TEWEB-2024-L1 TP HTML / CSS

Assignement HTML / CSS

Explore

TP HTML / CSS

TP1 : La structure de base

Objectif : Créer une structure de base pour une page web en utilisant les balises HTML appropriées.

---

1. Doctype

Consigne : Commencez toujours par déclarer le type de document à l'aide de la balise `<!DOCTYPE html>`. Cette balise permet de spécifier au navigateur la version du langage HTML utilisée, ici HTML5.

2. Structure de base

Consigne : Créez les balises principales de la structure d'un document HTML : `<html>`, `<head>` et `<body>`.

Utilité :

`<html>` : Elle englobe tout le contenu de la page. C'est la balise racine du document.

`<head>` : Cette section contient des informations et des configurations sur le document, mais pas le contenu visible pour l'utilisateur.

`<body>` : C'est ici que vous mettrez tout le contenu visible de la page web (texte, images, liens, etc.).

3. Métadonnées

Consigne : Dans la section `<head>`, ajoutez les balises `<meta charset="utf-8">` et `<meta name="viewport" content="width=device-width">`.

Utilité :

`<meta charset="utf-8">` : Cette balise indique au navigateur le jeu de caractères utilisé, ici UTF-8 qui est un standard international.

`<meta name="viewport" content="width=device-width">` : Cette balise rend votre site responsive. Elle indique au navigateur comment afficher le contenu en fonction de la taille de l'écran.

4. Titre de la page

Consigne : À l'intérieur de la balise `<head>`, ajoutez la balise `<title>` pour donner un titre à votre page. Pour cet exercice, nommez-le "Ma première page".

Utilité :

- `<title>` : Le contenu de cette balise est le titre qui s'affiche dans l'onglet du navigateur. C'est aussi le titre que les moteurs de recherche affichent dans leurs résultats.

5. Lier une feuille de style

Consigne : Toujours dans la section `<head>`, ajoutez la balise `<link href="style.css" rel="stylesheet" type="text/css" />` pour lier votre page HTML à une feuille de style externe.

Utilité :

`<link>` : Cette balise permet de lier des ressources externes à votre document, comme une feuille de style CSS. Ici, vous indiquez que vous utiliserez une feuille de style nommée "style.css".

TP 2: Créer votre carte (partie 1 : HTML)

Objectif : Comprendre et maîtriser la structure et les éléments HTML nécessaires à la création d'une carte (ou "card" en anglais), couramment utilisée dans les interfaces web modernes.

⁠

1. Titres

Consigne : Commencez par ajouter un titre principal (<h2>) indiquant le numéro et le nom du TP. Ensuite, sous le titre principal, ajoutez un sous-titre (<h4>) intitulé "Consigne :".

Utilité :

<h2> : Représente un titre de niveau 2. Les titres servent à structurer le contenu.

<h4> : Représente un titre de niveau 4. Plus le nombre est grand, moins le titre est important.

2. Section

Consigne : Encadrez votre carte dans une balise <section>. Cet élément représente une section autonome de votre contenu.

Utilité :

<section> : Décrit un bloc de contenu thématiquement cohérent. Elle peut être utilisée pour regrouper de grands blocs de contenu dans une page.

3. Structure de la carte

Consigne : Créez une <div> avec la classe "card". Cette <div> sera le conteneur principal de votre carte.

Utilité :

<div> : Représente un conteneur générique qui n'a pas de signification spécifique. Il est souvent utilisé pour grouper des éléments à des fins de style ou pour manipuler plusieurs éléments comme un seul bloc.

4. Image de la carte

Consigne : À l'intérieur de votre conteneur "card", ajoutez une balise <img> avec un attribut src vide pour le moment. Utilisez également l'attribut alt pour fournir une brève description de l'image.

Utilité :

<img> : Permet d'insérer une image dans votre document. L'attribut src est utilisé pour spécifier le chemin vers l'image, et alt est une description textuelle de l'image.

5. Titres et sous-titres de la carte

Consigne : Ajoutez un titre (<h3>) pour votre carte, suivi d'un sous-titre (<h5>).

6. Description

Consigne : Juste après le sous-titre, insérez une balise <p> pour ajouter une description à votre carte.

Utilité :

<p> : Représente un paragraphe. C'est l'un des éléments les plus courants pour structurer le texte.

7. Boutons

Consigne : Enfin, ajoutez deux boutons à l'intérieur de votre carte en utilisant la balise <button>. Nommez-les "Button 1" et "Button 2".

Utilité :

<button> : Représente un élément cliquable, souvent utilisé pour déclencher une action.

TP3 : Stylisation d'une carte et utilisation des conteneurs flexibles

Objectif : Appliquer des styles CSS pour améliorer l'esthétique de votre carte et la placer à l'intérieur d'un conteneur flexible.

Prérequis : Assurez-vous que votre fichier CSS est correctement lié à votre page HTML, comme mentionné dans le TP1.

---

Partie 1 : Stylisation de la carte

1. Style général de la carte

Consigne : - Sélectionnez la classe `.card` et appliquez un arrière-plan (`background-color`) de votre choix. - Ajoutez une marge (`margin`) de `20px` et un padding (`padding`) de `15px`. - Pour ajouter une bordure, utilisez la propriété `border` : une bordure solide (`solid`) de `1px` et de couleur `#ccc` par exemple. - Pour créer un effet d'ombre, utilisez `box-shadow` avec les valeurs `3px 3px 10px rgba(0, 0, 0, 0.1)`.

2. Style de l'image

Consigne : - Sélectionnez l'image à l'intérieur de la carte et donnez-lui une largeur (`width`) de `100%` pour s'assurer qu'elle s'étire pour remplir la largeur de la carte. - Assurez-vous que l'image a un `border-radius` de `5px` pour adoucir les coins.

3. Style des titres et sous-titres

Consigne : - Pour le titre (`<h3>`), modifiez la taille de la police (`font-size`) à `24px` et donnez-lui une couleur de votre choix. - Pour le sous-titre (`<h5>`), utilisez une taille de police (`font-size`) légèrement plus petite, par exemple `18px`, et une autre couleur.

4. Style du bouton

Consigne : - Sélectionnez les boutons et modifiez leur arrière-plan, leur couleur et ajoutez un peu de `padding` (par exemple, `10px 15px`) pour les rendre plus gros. - Ajoutez également un `border-radius` pour adoucir les coins et une petite `box-shadow` pour leur donner de la profondeur.

---

Partie 2 : Utilisation des conteneurs flexibles

1. Création du conteneur flex

Consigne : - Créez une nouvelle `<div>` avec la classe `.flex-container` qui englobera votre carte. - Dans votre fichier CSS, sélectionnez `.flex-container` et appliquez la propriété `display` avec la valeur `flex`.

2. Centrage de la carte

Consigne : - Toujours dans `.flex-container`, utilisez la propriété `justify-content` avec la valeur `center` pour centrer horizontalement la carte. - Utilisez la propriété `align-items` avec la valeur `center` pour centrer verticalement la carte.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.