Composants de Page HTML5 et CSS3

Cette section détaille les divers composants et attributs utilisés pour construire des pages web modernes, en abordant les styles CSS pour les dimensions, bordures et arrière-plans, les liens hypertextes, la gestion des images, la strucutre des listes et tableaux, la création de formulaires interactifs, ainsi que l'intégration de contenu multimédia.

  1. Dimensions, Bordures et Arrière-plans des Éléments

1.1 Propriétés CSS relatives aux dimensions

  • height : hauteur de l'élément.
  • min-height : hauteur minimale.
  • max-height : hauteur maximale.
  • width : largeur de l'élément.
  • min-width : largeur minimale.
  • max-width : largeur maximale.

1.2 Espacement intérieur (padding) CSS

  • padding : espace intérieur général.
  • padding-left : espace intérieur à gauche.
  • padding-right : espace intérieur à droite.
  • padding-top : espace intérieur en haut.
  • padding-bottom : espace intérieur en bas.

1.3 Bordures

La propriété border permet de définir la largeur, le style et la couleur de la bordure en une seule déclaration. Des propriétés spécifiques comme border-left, border-right, border-top, et border-bottom permettent de cibler des côtés spécifiques.

border: [largeur] [style] [couleur];

Styles de bordure (border-style) :

  • dotted : pointillée
  • dashed : hachurée
  • solid : pleine
  • double : double ligne
  • groove : rainurée
  • ridge : crêtée
  • inset : en creux
  • outset : en relief

Les couleurs et largeurs peuvent également être définies pour chaque côté individuellement (ex: border-color, border-width, border-left-color, etc.).

1.4 Arrière-plans

La propriété background est une propriété raccourcie pour définir plusieurs aspects de l'arrière-plan.

background: [couleur] [image] [répétition] [attachement] [position];

Exemple : background: lightblue url('./images/fond.png') no-repeat center top;

  • background-color : définit la couleur d'arrière-plan (ou transparent).
  • background-image : spécifie une image d'arrière-plan (url(...) ou none).
  • background-repeat : contrôle la répétition de l'image (repeat, repeat-x, repeat-y, no-repeat).
  • background-attachment : détermine si l'image d'arrière-plan défile avec le contenu (scroll) ou reste fixe (fixed).
  • background-position : définit la position initiale de l'image d'arrière-plan, en utilisant des mots-clés (top, bottom, left, right, center) ou des valeurs numériques/pourcentages.
  1. Liens Hypertextes et Ancres

2.1 Liens Hypertextes

Le lien hypertexte est créé avec la balise <a>.

<a href="destination">Texte du lien</a>

Attributs de la balise <a> :

  • href : L'URL de destination du lien. Peut être une page web, un fichier, une section de la page actuelle, ou une adresse e-mail.
  • target : Indique où ouvrir le lien.
    • _blank : dans une nouvelle fenêtre/onglet.
    • _self : dans la même fenêtre/onglet (comportement par défaut).
    • _parent : dans la fenêtre parente.
    • _top : dans la fenêtre principale (annule tous les cadres).
  • title : Texte d'aide affiché au survol.
  • download : (HTML5) Indique que la ressource doit être téléchargée.

Exemples de liens :

<!-- Lien vers un site web -->
<a href="http://www.example.com">Visitez Example.com</a>

<!-- Lien vers une adresse e-mail -->
<a href="mailto:contact@example.com">Contactez-nous par e-mail</a>

<!-- Lien pour appeler un numéro -->
<a href="tel:+1234567890">Appeler le +1234567890</a>

<!-- Lien pour envoyer un SMS -->
<a href="sms:+1234567890">Envoyer un SMS</a>

Types de chemins :

  • Chemin relatif : Par rapport au fichier courant (ex: documents/page.html).
  • Chemin absolu : URL complète (ex: http://www.example.com/page.html).
  • Chemin relatif à la racine du site : Commence par / (ex: /css/style.css).

Curseurs de souris (CSS) :

La propriété cursor change l'apparence du curseur au survol.

  • text : curseur de texte.
  • crosshair : croix.
  • wait : sablier (attente).
  • help : point d'interrogation.
  • pointer : main.

2.2 Ancres

Les ancres permettent de créer des liens internes vers des sections spécifiques d'une page.

<!-- Définir une ancre -->
<h2><a name="section1">Partie 1</a></h2>

<!-- Lien vers l'ancre -->
<a href="#section1">Aller à la Partie 1</a>

Pour lier vers une ancre dans une autre page : http://www.example.com/page.html#section2.

2.3 URL (Uniform Resource Locator)

L'URL est l'adresse standardisée d'une ressource sur Internet.

http://www.example.com:8080/produits/item?id=123&cat=4#details
  • Protocole : http, https, ftp, etc.
  • Nom d'hôte : www.example.com (ou adresse IP).
  • Port : Le port du serveur (80 par défaut pour HTTP).
  • Chemin : Le chemin de la ressource sur le serveur (/produits/item).
  • Chaîne de requête : Paramètres passés au serveur (?id=123&cat=4).
  • Ancre : Partie de l'URL pointant vers une section spécifique de la page (#details).
  1. Images

3.1 La balise <img>

<img src="chemin/vers/image.jpg" alt="Texte alternatif" title="Info-bulle">

Attributs :

  • alt : Texte alternatif affiché si l'image ne peut pas être chargée ou pour l'accessibilité.
  • src : L'URL de l'image.
  • title : Texte affiché au survol.
  • border : Largeur de la bordure de l'image (déprécié en HTML, préférer CSS).
  • height : Hauteur de l'image.
  • width : Largeur de l'image.
  • usemap : Associe l'image à une carte d'image côté client.

Formats d'images courants :

  • GIF : Supporte jusqu'à 256 couleurs, la transparence et les animations.
  • JPEG : Supporte de nombreuses couleurs, bonne compression (avec perte), pas de transparence ni d'animation. Idéal pour les photographies.
  • PNG : Compression sans perte, supporte la transparence (alpha) et une large gamme de couleurs. Idéal pour les logos, icônes, et images nécessitant une transparence nette.

3.2 Cartes d'image (Image Maps)

Permet de définir des zones cliquables sur une image.

<img src="carte.png" alt="Carte" usemap="#mapid">

<map name="mapid">
 <area shape="rect" coords="0,0,100,100" href="lien1.html" alt="Zone 1">
 <area shape="circle" coords="150,150,50" href="lien2.html" alt="Zone 2">
</map>

La balise <map> :

Contient les définitions des zones cliquables (<area>). L'attribut usemap de l'image référence le name (ou id) de la carte.

La balise <area> :

  • alt : Texte alternatif pour la zone.
  • href : URL de destination du lien.
  • coords : Coordonnées définissant la zone (dépendent de shape).
  • shape : Forme de la zone.
    • rect : Rectangle (coordonnées : x1,y1,x2,y2).
    • circle : Cercle (coordonnées : centre-x, centre-y, rayon).
    • poly : Polygone (coordonnées : x1,y1,x2,y2,x3,y3,...).
  • target : Où ouvrir le lien.
  1. Listes

4.1 Balises de liste HTML

  • <ul></ul> : Liste non ordonnée (points).
  • <ol></ol> : Liste ordonnée (numéros, lettres).
    • start : Premier numéro/lettre.
    • type : Type de marqueur (1, a, A, i, I).
    • reversed : (HTML5) Liste en ordre décroissant.
  • <li></li> : Élément de liste (item).
  • <dl></dl> : Liste de définitions.
  • <dt></dt> : Terme dans une liste de définitions.
  • <dd></dd> : Définition d'un terme.

4.2 Propriétés CSS pour les listes

  • list-style-type : Type de marqueur.
    • disc : cercle plein
    • circle : cercle vide
    • square : carré
    • decimal : décimal (1, 2, 3...)
    • lower-roman : romain minuscule (i, ii, iii...)
    • upper-roman : romain majuscule (I, II, III...)
    • lower-alpha : alphabétique minuscule (a, b, c...)
    • upper-alpha : alphabétique majuscule (A, B, C...)
  • list-style-position : Position des marqueurs.
    • inside : à l'intérieur de l'élément de liste.
    • outside : à l'extérieur (par défaut).
  • list-style-image : Utilise une image comme marqueur (ex: url('./images/puce.gif')).
  • list-style : Propriété raccourcie pour type, position et image. Peut aussi être mise à none.
  1. Tableaux

5.1 Balises de tableau HTML

  • <table></table> : Conteneur du tableau.
  • <caption></caption> : Titre du tableau.
  • <thead></thead> : En-tête du tableau.
  • <tfoot></tfoot> : Pied de tableau.
  • <tbody></tbody> : Corps du tableau.
  • <tr></tr> : Ligne du tableau.
  • <th></th> : Cellule d'en-tête.
  • <td></td> : Cellule de données standard.

5.2 Propriétés CSS pour les tableaux

  • table-layout : Méthode de calcul des largeurs de colonnes.
    • auto : Basé sur le contenu (par défaut, peut être lent).
    • fixed : Basé sur la largeur du tableau et des colonnes définies (plus rapide, contenu peut être tronqué).
  • border-collapse : Fusionne ou sépare les bordures des cellules.
    • separate : Bordures séparées (par défaut).
    • collapse : Bordures fusionnées.
  • border-spacing : Espace entre les bordures lorsque border-collapse est separate.
  • caption-side : Position du titre.
    • top : Au-dessus du tableau.
    • bottom : En dessous du tableau.
  • empty-cells : Affiche ou masque les bordures des cellules vides.
    • show : Affiche (par défaut).
    • hide : Masque.

5.3 Fusionner des cellules

Utiliser les attributs rowspan (fusionner des lignes) et colspan (fusionner des colonnes) sur les cellules <td> ou <th>.

<td colspan="2">Cellule fusionnée sur 2 colonnes</td>
<td rowspan="3">Cellule fusionnée sur 3 lignes</td>
  1. Formulaires

6.1 Balises relatives aux formulaires

  • <form></form> : Conteneur du formulaire.
    • action : URL de traitement des données.
    • method : Méthode HTTP (GET ou POST).
    • enctype : Type d'encodage (multipart/form-data pour les fichiers).
    • target : Où afficher la réponse.
  • <input> : Contrôle de saisie. L'attribut type est crucial (text, password, radio, checkbox, submit, file, email, number, etc.). Doit avoir un attribut name pour la soumission.
  • <button></button> : Bouton personnalisable (type="submit", reset, button).
  • <select></select> : Liste déroulante.
    • multiple : Permet la sélection multiple.
    • size : Nombre d'options visibles.
  • <option></option> : Une option dans une liste <select>.
    • value : La valeur envoyée au serveur.
    • selected : L'option est présélectionnée.
  • <optgroup></optgroup> : Groupe d'options connexes.
  • <textarea></textarea> : Zone de texte multiligne.
    • cols : Largeur en caractères.
    • rows : Hauteur en lignes.
  • <label></label> : Associe un texte à un contrôle de formulaire (via l'attribut for).
  • <fieldset></fieldset> : Groupe des éléments liés d'un formulaire.
  • <legend></legend> : Titre pour un fieldset.

6.2 Types de contrôles d'entrée

  • Texte : <input type="text" name="nom" placeholder="Entrez votre nom" value="Prénom" size="30" maxlength="50">
  • Mot de passe : <input type="password" name="mdp" placeholder="Votre mot de passe" maxlength="12">
  • Boutons radio : (même name pour le groupe) <input type="radio" name="genre" value="M" checked> Monsieur
  • Cases à cocher : <input type="checkbox" name="interet" value="musique"> Musique
  • Fichier : <input type="file" name="fichier">, avec multiple pour plusieurs sélections.
  • Types HTML5 : email, url, number (avec min, max, step), search, tel, color, date, time, datetime-local, range.

Exemple de liste déroulante :

<select name="ville">
 <option value="paris">Paris</option>
 <option value="lyon" selected>Lyon</option>
 <option value="marseille">Marseille</option>
</select>

Exemple de zone de texte :

<textarea name="commentaire" cols="40" rows="5"></textarea>

Types de boutons :

  • Soumission : <input type="submit" value="Envoyer"> ou <button type="submit">Envoyer</button>
  • Réinitialisation : <input type="reset" value="Effacer"> ou <button type="reset">Effacer</button>
  • Bouton simple : <input type="button" value="Action"> ou <button type="button">Action</button>

6.3 Autres balises de formulaire

  • <fieldset> et <legend> : Pour regrouepr et titrer des sections du formulaire.
  • <datalist> (HTML5) : Fournit une liste d'options prédéfinies pour un champ <input>.

6.4 Validation côté client (HTML5)

  • required : Attribut rendant un champ obligatoire.
  • Validation automatique pour les types email, url, number.
  • pattern : Attribut pour spécifier une validation par expression régulière. ```

6.5 Attributs communs des contrôles de formulaire

  • disabled : Désactive le contrôle.
  • readonly : Le contenu ne peut pas être modifié (pour les champs de texte).
  • autofocus : Le contrôle reçoit le focus automatiquement au chargement de la page.
  • autocomplete : Active/désactive la suggestion automatique (on/off).
  1. Audio et Vidéo (HTML5)

7.1 Balises HTML

  • <video></video> : Intègre une vidéo.
    • src : URL de la vidéo.
    • controls : Affiche les contrôles de lecture.
    • autoplay : Démarre la lecture automatiquement (souvent bloqué par les navigateurs sans interaction).
    • loop : Rejoue la vidéo en boucle.
    • muted : Volume coupé par défaut.
    • poster : Image affichée avant le chargement/lecture.
    • width, height : Dimensions.
  • <audio></audio> : Intègre un fichier audio. Attributs similaires à video (src, controls, autoplay, loop, muted).
  • <source></source> : Spécifie plusieurs sources pour un élément audio ou video, permettant la compatibilité avec différents formats.
    • src : URL de la ressource média.
    • type : Type MIME de la ressource (ex: video/mp4).
    • media : Spécifie le média cible (ex: "screen", "print").
<video controls width="640" height="360">
 <source src="video.mp4" type="video/mp4">
 <source src="video.webm" type="video/webm">
 Votre navigateur ne supporte pas la vidéo HTML5.
</video>

7.2 Vidéo

Formats vidéo supportés :

  • MP4 : Codecs H.264 (vidéo) et AAC (audio).
  • WebM : Codecs VP8/VP9 (vidéo) et Vorbis/Opus (audio).
  • Ogg : Codecs Theora (vidéo) et Vorbis (audio).

La compatibilité varie selon les navigateurs. L'utilisation de plusieurs balises <source> est recommandée.

Types MIME vidéo :

  • video/mp4
  • video/webm
  • video/ogg

7.3 Audio

Formats audio supportés :

  • MP3 : Très largement supporté.
  • WAV : Qualité non compressée, fichiers volumineux.
  • Ogg : Codec Vorbis/Opus.

Comme pour la vidéo, plusieurs <source> sont conseillées.

Types MIME audio :

  • audio/mpeg (pour MP3)
  • audio/ogg
  • audio/wav

Étiquettes: HTML5 CSS3 web design composants web formulaires

Publié le 30 juin à 00h44

Étiquettes Populaires

©2026 L'Atelier Monstre