Module 1 : Retour sur le HTML et CSS, révision des formulaires et positionnement

Introduction

Ce module fait un retour sur les bases du HTML et CSS, les techniques de mise en page (Flexbox, Grid, positionnement) et la révision des formulaires HTML. Nous allons revisiter les concepts fondamentaux vus dans le cours précédent (Interface web) afin de bien débuter ce nouveau cours de développement web côté client.

Objectifs du cours

Rappeler les structures de base HTML5 et les balises sémantiques
Maîtriser les propriétés CSS essentielles (sélecteurs, block/inline, positionnement)
Créer et intégrer des formulaires HTML accessibles avec les types de champs appropriés
Appliquer les techniques de mise en page avancées (Flexbox, Grid)
Comprendre les bonnes pratiques de design et présentation web

📁 Démo

Télécharger la démo complète

Théorie : retour sur le HTML, CSS, formulaires et positionnement

1. Structure HTML5

1.1 Balises sémantiques de mise en page

Les balises sémantiques décrivent le sens de leur contenu, améliorant l'accessibilité et le référencement (SEO).

Balises du document HTML5 :

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Explication :

<!DOCTYPE html> : Déclare le type de document HTML5
<html lang="fr"> : Élément racine avec langue française
<head> : Métadonnées, titre, liens CSS
<body> : Contenu visible de la page
<meta charset="UTF-8"> : Encodage des caractères en UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Adaptation aux écrans mobiles
<link rel="stylesheet" href="css/style.css"> : Lien vers la feuille de style CSS
<title> : Titre de la page affiché dans l'onglet du navigateur. Élément important pour le SEO (Search Engine Optimization) : le titre doit être pertinent et contenir des mots-clés liés au contenu de la page, particulièrement aux H1,H2, etc.

Balises principales de structure :

Balise	Description
`<header>`	En-tête de la page ou d'une section
`<nav>`	Zone de navigation
`<main>`	Contenu principal (unique par page)
`<footer>`	Pied de page ou d'une section

Autres balises sémantiques importantes (SEO) :

Balise	Description
`<section>`	Section thématique du document
`<article>`	Contenu autonome (article de blog, commentaire)
`<aside>`	Contenu secondaire (barre latérale)
`<time>`	Date ou heure
`<audio>` / `<video>`	Contenu multimédia

Balises « passe-partout » :

Balise	Type	Usage	Display
`<div>`	Block	Regroupement et mise en page générale	Block : prend toute la largeur disponible
`<span>`	Inline	Cibler du texte dans un paragraphe	Inline : reste sur la même ligne

html

<!-- Structure sémantique de base -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav><!-- Navigation --></nav>
    </header>
    <main>
        <section>
            <article><!-- Contenu --></article>
        </section>
        <aside><!-- Barre latérale --></aside>
    </main>
    <footer><!-- Pied de page --></footer>
</body>
</html>

1.2 Hiérarchie des éléments

Relation parent-enfant :

Dans une structure HTML, chaque élément peut contenir d'autres éléments. L'élément contenant est le parent, les éléments contenus sont les enfants.

html

<main>              <!-- Parent -->
    <section>       <!-- Enfant de main, Parent de article -->
        <article>   <!-- Enfant de section -->
            <h2>Titre</h2>
            <p>Texte</p>
        </article>
    </section>
</main>

Hiérarchie des titres :

Les titres doivent suivre un ordre logique (H1 → H2 → H3...). Un seul <h1> par page est recommandé.

html

<h1>Titre principal de la page</h1>
    <h2>Section 1</h2>
        <h3>Sous-section 1.1</h3>
        <h3>Sous-section 1.2</h3>
    <h2>Section 2</h2>

Notes sur le référencement (SEO) :

Le <h1> doit contenir les mots-clés principaux de la page et sera généralement utilisé 1 fois par page. Les moteurs de recherche accordent une grande importance au contenu du <h1> et l'associent au sujet principal de la page. Le h1 sera très souvent affiché en premier dans les résultats de recherche.
- Il peut y avoir 2 <h1> dans certains cas spécifiques (ex. : pages avec des sections très distinctes).
Les <h2> seront utilisés pour les sous-titres importants, et les <h3>, <h4>, etc. pour des subdivisions supplémentaires.

1.3 Formatage du code

L'indentation améliore la lisibilité du code. Chaque niveau d'imbrication ajoute une tabulation.

Astuce VS Code

Clic droit → Mettre le document en forme (ou Shift + Alt + F)

Exemple d'une mauvaise indentation :

html

<main>
   <section>
   <article>
  <h2>Titre</h2><p>Texte</p>
   </article>
   </section>
</main>

Exemple d'une bonne indentation :

html

<main>
    <section>
        <article>
            <h2>Titre</h2>
            <p>Texte</p>
        </article>
    </section>
</main>

2. Images et multimédia

2.1 Choix du format d'image

Format	Transparence	Usage recommandé
JPG	Non	Photos, images avec beaucoup de couleurs
PNG	Oui	Logos, images avec transparence
WebP	Oui	Format moderne, meilleure compression
SVG	Oui	Icônes, logos vectoriels

2.2 Optimisation des images

Règle importante

Une image sur un site web ne devrait jamais dépasser 300 Ko, et est souvent en dessous de 100 Ko.

Truc pour optimiser les images : Utiliser un service web gratuit comme TinyPNG ou Squoosh pour compresser les images avant de les intégrer.

Points clés :

Redimensionner les images à la taille d'affichage proche de l'affichage réel attendu, mais pas trop petit au cas où un écran haute résolution (Retina) est utilisé
Compresser les images (outils : TinyPNG, Squoosh)
Minimiser le nombre d'éléments multimédias : le contenu prime sur le contenant

html

<img src="images/logo.webp" alt="Logo de l'entreprise" width="200" height="80">

3. Révision CSS

3.1 Identifiants et classes

Sélecteur	Symbole	Réutilisable	Spécificité	Avantage
Balise HTML	aucun	Oui	Faible	Allège le code HTML et CSS car pas besoin d'attributs supplémentaires aux balises HTML : le css cible directement les balises HTML. Approche simple et efficace.
Classe	`.`	Oui	Moyenne	Permet de regrouper des éléments similaires
ID	`#`	Non (unique)	Forte	Permet de cibler un élément unique sur la page

Force des sélecteurs :

La force (spécificité) des sélecteurs détermine quel style sera appliqué en cas de conflit. Un conflit c'est quoi : lorsque plusieurs règles CSS ciblent le même élément HTML avec des styles différents.

balise < .classe < #id

Exemple HTML :

html

<h1 id="titre-principal" class="important">Bienvenue</h1>

Exemple CSS :

css

h1 { color: blue; }               /* Force faible */
.important { color: green; }      /* Force moyenne */
#titre-principal { color: red; }  /* Force forte */

Dans cet exemple, le texte "Bienvenue" sera rouge car le sélecteur #titre-principal a la plus forte spécificité. Peu importe dans quel ordre les règles CSS sont écrites, le rouge l'emporte.

3.2 Balises block et inline

Type	Comportement	Exemples
Block	Prend toute la largeur, retour à la ligne	`<div>`, `<p>`, `<h1>` à `<h6>`, `<section>`, `<header>`, `<footer>`, `<ul>`, `<li>`
Inline	Reste sur la même ligne	`<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, `<input>`

Modification avec la propriété display :

css

/* Transformer un élément inline en block */
a { display: block; }

/* Transformer un élément block en inline */
li { display: inline; }

/* Combinaison : inline avec dimensions */
span { display: inline-block; }

3.3 Positionnement avec float

La propriété float permet de positionner des éléments à gauche ou à droite.

css

.image-gauche {
    float: left;
    margin-right: 15px;
}

.image-droite {
    float: right;
    margin-left: 15px;
}

/* Annuler le flottement */
.clear {
    clear: both;
}

Astuce

Sur le conteneur parent d'éléments flottants, ajouter overflow: auto; pour éviter les problèmes de hauteur.

Attention

On essai le plus possible d'utiliser Flexbox au lieu de float pour le positionnement. Flexbox est plus moderne, flexible et puissant.

4. Design et présentation web

4.1 Considérations générales

Le design d'un site web doit être pensé de manière stratégique pour offrir une expérience utilisateur cohérente et professionnelle. Voici les principes fondamentaux à respecter :

Palette de couleurs limitée

Règle générale : Un site web ne devrait utiliser que 3 couleurs maximum pour éviter la confusion visuelle.
Pourquoi ? Une palette restreinte crée une identité visuelle forte et mémorable.
Conseil : Inspirez-vous toujours du logo de l'entreprise ou du client.

Par exemple : alt text

Couleur principale (fond, boutons) : Bleu corporate (#007BFF)
Couleur secondaire (accents, liens) : Gris foncé (#6C757D)
Couleur d'accent (alertes, appels à l'action) : Vert succès (#28A745)

Astuce

Le blanc et le noir sont considérés comme des couleurs neutres et peuvent être utilisés librement pour le texte et les arrière-plans. Très souvent, le noir sera utilisé pour le texte et le blanc pour les fonds. L'accentuation des couleurs se fera avec les couleurs principales et secondaires, inspirées du logo de l'entreprise.

Typographie maîtrisée

Règle générale : Limitez-vous à 3 polices maximum par site.
Répartition suggérée :
- 1 police pour les textes de paragraphe (lisible, sobre)
- 1-2 polices pour les titres et la navigation (plus expressive)
Exemples :
- Paragraphes : 'Open Sans' ou 'Roboto' (sans-serif, moderne)
- Titres : 'Montserrat' ou 'Playfair Display' (serif ou sans-serif distinctive)

Uniformité du design

Ligne graphique cohérente : Tous les éléments (boutons, formulaires, cartes) doivent suivre le même style d'une page à l'autre.
- La ligne graphique est directement reliée au logo de l'entreprise. Les couleurs, polices, styles de boutons, etc. doivent être en harmonie avec le logo. Autrement dit, il serait incohérent d'avoir un logo très coloré et joyeux, mais un site web sombre et sérieux utilisant des couleurs différentes du logo.
Interface uniforme : Le header, footer et navigation doivent être identiques sur toutes les pages pour une navigation intuitive.
Avantages : Réduit la charge cognitive de l'utilisateur et renforce la crédibilité du site.

Contrôle des espacements et largeurs

Outils CSS : Utilisez width, padding, margin pour créer des rythmes visuels harmonieux.
Principe du .container : Créez une classe réutilisable pour centrer le contenu et limiter la largeur maximale.

Principe du container : Un container est simplement un conteneur central qui limite la largeur du contenu principal d'une page web. Il permet de centrer le contenu et d'assurer une présentation cohérente sur différents appareils (desktop, tablette, mobile).

css

/* Conteneur centré et responsive */
.container {
    max-width: 1200px; /* Largeur max pour écrans larges */
    margin: 0 auto;    /* Centrage horizontal */
    padding: 0 20px;   /* Espacement intérieur pour mobiles */
}

/* Exemple d'espacement cohérent */
.section {
    padding: 60px 0; /* Espacement vertical uniforme */
}

.card {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Résumé des bonnes pratiques :

Aspect	Règle	Exemple concret
Couleurs	Max 3 par site	Logo bleu + gris + vert
Polices	Max 3 par site	Roboto (texte) + Montserrat (titres)
Uniformité	Design cohérent	Boutons identiques partout
Espacement	Rythme visuel	`.container` + padding/margin consistants
Navigation	Simple et claire	Menu horizontal avec `<ul>`
Mise en page	Utiliser Flexbox/Grid	Disposition responsive

Ces considérations générales assurent un design professionnel qui améliore l'expérience utilisateur et facilite la maintenance du code.

La navigation principale utilise généralement une liste <ul> affichée horizontalement. Les éléments de liste <li> peuvent alors est affiché en display inline.

html

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

css

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

nav ul li {
    display: inline; 
}
nav a {
    text-decoration: none;
    color: #333;
}

On peut également utiliser un simple Flexbox pour la navigation.

html

<nav class="nav-bar">
    <a href="index.html">Accueil</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
</nav>

css

/* Conteneur PARENT */
.nav-bar {
    display: flex; 
    justify-content: center;  
    gap: 20px;
    background-color: #f8f8f8;
    padding: 10px 20px;
}
/* ÉLÉMENTS ENFANTS */
.nav-bar a {
    text-decoration: none;
    color: #333;
}

4.3 Typographie

css

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

5. Formulaires HTML

5.1 La balise `<form>`

Attributs principaux :

Attribut	Description	Explication/Usage
`method="get"`	Données visibles dans l'URL, limité à 255 caractères	Utile pour les recherches ou formulaires simples. Les données apparaissent dans l'URL (ex. : `?nom=Jean&email=jean@example.com`). Limite de sécurité pour les données sensibles.
`method="post"`	Données cachées dans la requête HTTP, pas de limite	Recommandé pour les formulaires avec données sensibles (mots de passe, fichiers). Les données sont envoyées dans le corps de la requête, invisibles dans l'URL.
`action`	URL de la page qui traitera les données	Spécifie le script ou la page qui recevra et traitera les données soumises. Si vide, les données sont envoyées à la page actuelle.

html

<form action="traitement.php" method="post">
    <div>
        <!-- Champ de formulaire est toujours accompagné d'une étiquette (label) -->
        <label for="nom">Nom complet :</label>
        <input type="text" id="nom" name="nom" required>
    </div>
    
    <div>
        <label for="email">Adresse email :</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="message">Votre message :</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    
    <button type="submit">Envoyer le message</button>
    <button type="reset">Réinitialiser</button>
</form>

Note

traitement.php est le script côté serveur (non couvert dans ce cours) qui reçoit et traite les données soumises par le formulaire.

5.2 Contrôles de formulaire

Chaque contrôle doit avoir :

Une étiquette <label> associée
Un attribut name pour l'identification des données
Un attribut id pour lier le <label>

html

<label for="email">Courriel : *</label>
<input type="email" id="email" name="email" required placeholder="exemple@domaine.com">

Attributs importants :

Attribut	Description
`placeholder`	Texte indicatif qui disparaît à la saisie
`required`	Champ obligatoire
`min` / `max`	Valeurs min/max pour les champs numériques
`step`	Intervalle entre les valeurs
`value`	Valeur par défaut

5.3 Types de champs `<input>`

Type	Usage
`text`	Texte simple
`email`	Adresse courriel (validation automatique)
`tel`	Numéro de téléphone
`url`	Adresse web
`password`	Mot de passe (masqué)
`number`	Valeur numérique
`date` / `time`	Date / heure
`range`	Curseur de sélection
`color`	Sélecteur de couleur
`checkbox`	Case à cocher
`radio`	Bouton radio

html

<!-- Champ numérique avec contraintes -->
<input type="number" id="quantite" name="quantite" min="1" max="100" step="1" value="1">

Exemple de boutons radio :

html

<fieldset>
    <legend>Genre :</legend>
    <label><input type="radio" name="genre" value="homme" checked> Homme</label>
    <label><input type="radio" name="genre" value="femme"> Femme</label>
    <label><input type="radio" name="genre" value="autre"> Autre</label>
</fieldset>

Note

Les boutons radio partagent le même name pour former un groupe où un seul choix est possible. Utilisez checked pour une valeur par défaut.

5.4 Disposition et ergonomie

Bonnes pratiques :

Champs obligatoires clairement indiqués (astérisque *)
Valeurs par défaut pertinentes
Exemples de format via placeholder
Étiquettes proches des zones de saisie

html

<form action="inscription.php" method="post">
    <div>
        <label for="nom">Nom complet : *</label>
        <input type="text" id="nom" name="nom" required>
    </div>
    
    <div>
        <label for="courriel">Courriel : *</label>
        <input type="email" id="courriel" name="courriel" required placeholder="nom@exemple.com">
    </div>
    
    <div>
        <label for="telephone">Téléphone :</label>
        <input type="tel" id="telephone" name="telephone" placeholder="514-555-1234">
    </div>
    
    <button type="submit">Envoyer</button>
</form>

5.5 Exemple complet d'un formulaire

Code HTML du formulaire

html

<form action="inscription.php" method="post">
    <fieldset>
        <legend>Informations personnelles</legend>
        
        <div>
            <label for="nom">Nom complet : *</label>
            <input type="text" id="nom" name="nom" required placeholder="Votre nom">
        </div>
        
        <div>
            <label for="email">Adresse email : *</label>
            <input type="email" id="email" name="email" required placeholder="nom@exemple.com">
        </div>
        
        <div>
            <label for="telephone">Téléphone :</label>
            <input type="tel" id="telephone" name="telephone" placeholder="514-555-1234">
        </div>
        
        <fieldset>
            <legend>Genre :</legend>
            <label><input type="radio" name="genre" value="homme" checked> Homme</label>
            <label><input type="radio" name="genre" value="femme"> Femme</label>
            <label><input type="radio" name="genre" value="autre"> Autre</label>
        </fieldset>
        
        <div>
            <label for="interets">Centres d'intérêt :</label><br>
            <label><input type="checkbox" name="interets[]" value="web"> Développement web</label>
            <label><input type="checkbox" name="interets[]" value="design"> Design</label>
            <label><input type="checkbox" name="interets[]" value="mobile"> Applications mobiles</label>
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Message</legend>
        <div>
            <label for="sujet">Sujet :</label>
            <input type="text" id="sujet" name="sujet">
        </div>
        
        <div>
            <label for="message">Votre message : *</label>
            <textarea id="message" name="message" rows="5" required placeholder="Tapez votre message ici..."></textarea>
        </div>
    </fieldset>
    
    <div>
        <label><input type="checkbox" name="newsletter" value="oui"> S'abonner à la newsletter</label>
    </div>
    
    <button type="submit">S'inscrire</button>
    <button type="reset">Réinitialiser</button>
</form>

Positionnement CSS simple et efficace

css

/* Styles de base pour le formulaire */
form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Un fieldset sert à regrouper des éléments liés ensembles, qui ont un thème commun */
fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}

/* Un legend sert à donner un titre à un fieldset */
legend {
    font-weight: bold;
    color: #333;
    padding: 0 10px;
}

/* Positionnement des champs */
div {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Ici, on utiliser la virgule pour cibler à la fois les input et textarea */
/* C'est une technique de sélection multiple en CSS */
input, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* Ici, on ajoute un style spécifique pour les champs en focus (lorsqu'on clique dedans) */
/* Le : focus est un pseudo-élément en CSS, qui fait en sorte que ce style va s'appliquer uniquement lorsque l'élément est actif (focus) */
input:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Boutons radio et checkbox en ligne */
fieldset label {
    display: inline-block;
    margin-right: 15px;
    font-weight: normal;
}

/* Boutons du formulaire */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 10px;
}

/* Ici, on utilise la technique de sélection multiple en CSS pour cibler les deux types de boutons */
/* Le [] indique qu'on cible un attribut spécifique de la balise html button. Autrement dit, si le button est de type "submit" ou "reset", ce style s'applique */
button[type="submit"] {
    background-color: #007bff;
    color: white;
}

button[type="reset"] {
    background-color: #6c757d;
    color: white;
}

/* Effet au survol des boutons. :hover veut dire "lorsque la souris est au-dessus" */
button:hover {
    opacity: 0.9;
}

Cet exemple montre un positionnement simple utilisant :

max-width et margin: 0 auto pour centrer le formulaire
fieldset pour regrouper les sections
display: block pour les labels et champs
display: inline-block pour aligner les boutons radio/checkbox
Styles de focus pour l'accessibilité

6. Positionnement CSS

6.1 Flexbox

Flexbox permet une disposition flexible des éléments sur un axe principal.

Propriétés du conteneur :

Propriété	Valeurs courantes
`display`	`flex`
`flex-direction`	`row`, `column`, `row-reverse`, `column-reverse`
`flex-wrap`	`wrap`, `nowrap`
`justify-content`	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`
`align-items`	`flex-start`, `center`, `flex-end`, `stretch`
`gap`	Espacement entre les éléments

Un conteneur Flex, c'est l'élément PARENT qui contient des éléments ENFANTS positionnés en Flexbox. La majorité des propriétés Flexbox s'appliquent au conteneur PARENT.

css

.conteneur-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

Propriétés des enfants

Propriété	Valeurs courantes	Description
`flex-grow`	Nombre (0 par défaut)	Fait grandir l'élément pour remplir l'espace disponible
`flex-shrink`	Nombre (1 par défaut)	Réduit la taille de l'élément si nécessaire
`flex-basis`	Valeur en px, %, auto	Taille initiale de l'élément avant distribution de l'espace

Exemple d'utilisation de propriétés Flex de l'enfant :

Html

html

<div class="conteneur-flex">
    <div class="element-flex">Élément 1</div>
    <div class="element-flex">Élément 2</div>
    <div class="element-flex">Élément 3</div>
</div>

CSS

css

/* Parent */
.conteneur-flex {
    display: flex; /* Ce conteneur sera en mode flex */
    gap: 10px;
}
/* Enfant */
.element-flex {
    flex-grow: 1; /* L'élément grandit pour remplir l'espace */
    flex-shrink: 0; /* L'élément ne rétrécit pas */
    flex-basis: 200px; /* Taille initiale de 200px */
}

6.2 Grid

Grid permet de créer des grilles complexes en lignes et colonnes.

css

.conteneur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    grid-template-rows: auto;
    gap: 20px;
}

Exemple complet :

html

<div class="conteneur-grid">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
</div>

css

.conteneur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    grid-template-rows: auto;
    gap: 20px;
}

Mise en page attendue :

|  1  |  2  |  3  |
|  4  |  5  |     |

6.3 Types de positionnement

Position	Description
`static`	Flux normal (par défaut)
`relative`	Décalage par rapport à sa position normale, reste dans le flux
`absolute`	Retiré du flux, positionné par rapport au parent positionné
`fixed`	Fixé par rapport à la fenêtre (menu sticky)
`sticky`	Combinaison de relative et fixed

css

/* Positionnement relatif */
.decale {
    position: relative;
    top: 10px;
    left: 20px;
}

/* Positionnement absolu */
.parent {
    position: relative; /* Référent pour l'enfant absolu */
}

.enfant-absolu {
    position: absolute;
    top: 0;
    right: 0;
}

/* Navigation fixe */
.nav-fixe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

6.4 Pratiques recommandées

Prioriser les marges et padding pour espacer les éléments
Utiliser Flexbox et Grid pour les mises en page complexes
Positionnement absolu/relatif/fixe : à utiliser avec précaution, quand les autres options ne fonctionnent pas

Exercice : Reproduction d'un aperçu de site web

Contexte À partir des techniques apprises dans ce module, vous allez devoir reproduire un aperçu de site web en HTML et CSS. L'idée est que l'on vous fournisse les ressources nécessaires (images, textes, exemples de rendu) et que vous deviez recréer le site web en respectant le plus fidèlement possible le design fourni.

Télécharger les ressources de cet exercice

On s'attends à du code qui respecte :

Un document HTML conforme aux standards (DOCTYPE, head, meta, charset, title)
La structure HTML sémantique (header, nav, main, section, article, aside, footer)
Une navigation claire, avec une liste horizontale ou encore du Flexbox
Une hiérarchie correcte des titres (h1, h2, h3...)
L'optimisation des images (si le cas : doit être en dessous de 300 Ko)
L'utilisation appropriée des sélecteurs CSS (balises, classes, IDs)
Limiter le plus possible la création de classes styles lorsqu'on peut plutôt cibler avec des balises HTML
L'utilisation de Flexbox pour la mise en page des colonnes
Le choix d'une palette de couleurs cohérente. En fait, vous devriez capturer les couleurs directement à partir des images fournies pour respecter le design (https://imagecolorpicker.com/fr/)

Structure du projet attendue : Créer un nouveau projet avec Vs Code et organiser les fichiers comme suit :

/Racine du site
    /images
    /css
    index.html

Vérifications des connaissances

Testez vos connaissances acquises dans ce module en répondant aux questions suivantes. Cliquez sur chaque question pour révéler la réponse.

Question 1

Quelles sont les balises sémantiques principales pour structurer une page HTML5 ?

Réponse :

Les balises sémantiques principales sont `<header>` (en-tête), `<nav>` (navigation), `<main>` (contenu principal), `<section>` (section thématique), `<article>` (contenu autonome), `<aside>` (contenu secondaire), et `<footer>` (pied de page). Elles améliorent l'accessibilité et le SEO.

Question 2

Quelle est la hiérarchie recommandée pour les titres HTML (h1 à h6) ?

Réponse :

Les titres doivent suivre un ordre logique sans sauter de niveaux : un seul `<h1>` par page, suivi de `<h2>`, puis `<h3>`, etc. Cela crée une structure claire pour l'accessibilité et le référencement. Le `<h1>` doit contenir les mots-clés principaux pour le SEO.

Question 3

Quels sont les formats d'images recommandés pour le web et leurs usages principaux ?

Réponse :

JPG : Pour les photos avec beaucoup de couleurs (pas de transparence)
PNG : Pour les logos ou images avec transparence
WebP : Format moderne avec meilleure compression
SVG : Pour les icônes vectorielles (transparence, redimensionnable)

Les images doivent être optimisées : redimensionnées, compressées, et ne pas dépasser 300 Ko (idéalement < 100 Ko).

Question 4

Quelle est la force des sélecteurs CSS en termes de spécificité ?

Réponse :

La spécificité augmente ainsi : sélecteur de balise (faible) < classe (moyenne) < ID (forte). Par exemple, un style appliqué via un ID l'emportera sur une classe ou une balise.

Question 5

Quelle est la différence entre les éléments block et inline en CSS ?

Réponse :

Les éléments block (comme `<div>`, `<p>`, `<h1>`) occupent toute la largeur disponible et créent un saut de ligne. Les éléments inline (comme `<span>`, `<a>`, `<strong>`) se placent côte à côte sur la même ligne. On peut modifier avec `display: block`, `inline` ou `inline-block`.

Question 6

Comment fonctionne la propriété float en CSS pour le positionnement ?

Réponse :

`float` permet de positionner un élément à gauche (`float: left`) ou à droite (`float: right`) de son conteneur. Les éléments suivants s'enroulent autour. Pour éviter les problèmes, ajouter `clear: both` sur l'élément suivant ou `overflow: auto` sur le parent. Préférer Flexbox à `float` pour le positionnement moderne.

Question 7

Quelles sont les règles générales pour le design web en termes de couleurs et typographie ?

Réponse :

Couleurs : Maximum 3 couleurs par site pour une identité cohérente (inspirée du logo), plus blanc et noir comme neutres
Polices : Maximum 3 polices (une pour le texte, 1-2 pour les titres)

Assurer une uniformité du design : ligne graphique cohérente, interface uniforme sur toutes les pages.

Question 8

Quels sont les attributs principaux de la balise <form> et leur rôle ?

Réponse :

action : URL de la page qui traite les données (si vide, page actuelle)
method : get (données dans l'URL, limité à 255 caractères) ou post (données cachées, recommandé pour données sensibles)

Question 9

Quels sont les types de champs <input> les plus courants et leurs usages ?

Réponse :

text : Texte simple
email : Adresse email avec validation automatique
tel : Numéro de téléphone
url : Adresse web
password : Mot de passe masqué
number : Valeur numérique (avec min, max, step)
date/time : Date/heure
range : Curseur de sélection
color : Sélecteur de couleur
checkbox : Cases à cocher multiples
radio : Boutons radio (un seul choix dans un groupe avec même name)

Question 10

Pourquoi est-il important d'associer un <label> à chaque champ de formulaire ?

Réponse :

Le label améliore l'accessibilité : les utilisateurs peuvent cliquer sur le texte pour activer le champ, et les lecteurs d'écran identifient correctement les champs. L'attribut `for` du label doit correspondre à l'`id` du champ. Utiliser `placeholder` pour des exemples et `required` pour les champs obligatoires.

Question 11

Quelles sont les propriétés CSS principales pour Flexbox sur le conteneur et les enfants ?

Réponse :

Conteneur : `display: flex`, `flex-direction` (row/column), `justify-content` (alignement horizontal), `align-items` (alignement vertical), `gap` (espacement)
Enfants : `flex-grow` (grandir pour remplir l'espace), `flex-shrink` (rétrécir si nécessaire), `flex-basis` (taille initiale)

Question 12

Comment créer une grille CSS avec Grid ?

Réponse :

Utiliser `display: grid` sur le conteneur, puis `grid-template-columns` (ex. : `repeat(3, 1fr)` pour 3 colonnes égales) et `grid-template-rows` (auto). Ajouter `gap` pour l'espacement. Les éléments enfants se placent automatiquement dans la grille.

Question 13

Quelles sont les différences entre les types de positionnement CSS (static, relative, absolute, fixed, sticky) ?

Réponse :

static : Position normale dans le flux
relative : Décalage par rapport à sa position normale, reste dans le flux
absolute : Retiré du flux, positionné par rapport au parent positionné le plus proche
fixed : Fixé par rapport à la fenêtre du navigateur
sticky : Combine relative et fixed (colle lors du défilement)

Question 14

Quelles sont les bonnes pratiques pour la navigation principale d'un site ?

Réponse :

Clarté et simplicité : options limitées, libellés explicites
Accessibilité : navigation au clavier, lecteurs d'écran
Uniformité : même navigation sur toutes les pages
Responsive : adaptée aux mobiles et tablettes

Question 15

Comment créer un formulaire accessible et ergonomique ?

Réponse :

Indiquer les champs obligatoires (astérisque *)
Utiliser des placeholder pour des exemples
Grouper avec <fieldset> et <legend>
Utiliser des types appropriés (email, tel, number)
Attribut required pour la validation native
Associer <label> à chaque champ avec for et id

Module 1 : Retour sur le HTML et CSS, révision des formulaires et positionnement ​

Introduction ​

Objectifs du cours ​

📁 Démo ​

Théorie : retour sur le HTML, CSS, formulaires et positionnement ​

1. Structure HTML5 ​

1.1 Balises sémantiques de mise en page ​

1.2 Hiérarchie des éléments ​

1.3 Formatage du code ​

2. Images et multimédia ​

2.1 Choix du format d'image ​

2.2 Optimisation des images ​

3. Révision CSS ​

3.1 Identifiants et classes ​

3.2 Balises block et inline ​

3.3 Positionnement avec float ​

4. Design et présentation web ​

4.1 Considérations générales ​

Palette de couleurs limitée ​

Typographie maîtrisée ​

Uniformité du design ​

Contrôle des espacements et largeurs ​

4.2 Navigation ​

4.3 Typographie ​

5. Formulaires HTML ​

5.1 La balise <form> ​

5.2 Contrôles de formulaire ​

5.3 Types de champs <input> ​

5.4 Disposition et ergonomie ​

5.5 Exemple complet d'un formulaire ​

Code HTML du formulaire ​

Positionnement CSS simple et efficace ​

6. Positionnement CSS ​

6.1 Flexbox ​

6.2 Grid ​

6.3 Types de positionnement ​

6.4 Pratiques recommandées ​

Exercice : Reproduction d'un aperçu de site web ​

Vérifications des connaissances ​

Question 1 ​

Question 2 ​

Question 3 ​

Question 4 ​

Question 5 ​

Question 6 ​

Question 7 ​

Question 8 ​

Question 9 ​

Question 10 ​

Question 11 ​

Question 12 ​

Question 13 ​

Question 14 ​

Question 15 ​

Module 1 : Retour sur le HTML et CSS, révision des formulaires et positionnement

Introduction

Objectifs du cours

📁 Démo

Théorie : retour sur le HTML, CSS, formulaires et positionnement

1. Structure HTML5

1.1 Balises sémantiques de mise en page

1.2 Hiérarchie des éléments

1.3 Formatage du code

2. Images et multimédia

2.1 Choix du format d'image

2.2 Optimisation des images

3. Révision CSS

3.1 Identifiants et classes

3.2 Balises block et inline

3.3 Positionnement avec float

4. Design et présentation web

4.1 Considérations générales

Palette de couleurs limitée

Typographie maîtrisée

Uniformité du design

Contrôle des espacements et largeurs

4.2 Navigation

4.3 Typographie

5. Formulaires HTML

5.1 La balise `<form>`

5.2 Contrôles de formulaire

5.3 Types de champs `<input>`

5.4 Disposition et ergonomie

5.5 Exemple complet d'un formulaire

Code HTML du formulaire

Positionnement CSS simple et efficace

6. Positionnement CSS

6.1 Flexbox

6.2 Grid

6.3 Types de positionnement

6.4 Pratiques recommandées

Exercice : Reproduction d'un aperçu de site web

Vérifications des connaissances

Question 1

Question 2

Question 3

Question 4

Question 5

Question 6

Question 7

Question 8

Question 9

Question 10

Question 11

Question 12

Question 13

Question 14

Question 15