Lezioni
Accedi a Diane

Introduction au langage HTML

14 carte

Le HTML est un langage de balisage utilisé pour créer des pages web. Il permet de structurer le contenu, d'inclure des médias et de créer des liens hypertextes.

14 carte

Ripassa
La ripetizione spaziata ti mostra ogni carta al momento ottimale per memorizzare a lungo termine, con revisioni sempre più distanziate.
Domanda
Quel est le rôle principal du HTML ?
Risposta
Le HTML sépare le contenu et la structure d'une page web de sa présentation visuelle.
Domanda
Quelles sont les trois balises fondamentales d'un document HTML ?
Risposta
Tout document HTML conforme doit contenir au minimum les balises ``, ``, et ``.
Domanda
Que contient la balise <head> ?
Risposta
Elle contient des métadonnées non affichées, comme le titre de la page, l'encodage et les liens vers les feuilles de style CSS.
Domanda
À quoi sert la balise <body> ?
Risposta
Elle renferme le contenu qui sera réellement visible par les internautes sur le navigateur.
Domanda
Quelle est la règle pour l'imbrication des balises HTML ?
Risposta
La première balise ouverte doit être la dernière à être fermée. Il faut fermer les balises dans l'ordre inverse de leur ouverture.
Domanda
Comment créer un lien hypertexte en HTML ?
Risposta
En utilisant la balise `` avec l'attribut `href` pour spécifier l'URL de destination.
Domanda
Quelle est la différence entre les listes <ul> et <ol> ?
Risposta
`
    ` crée une liste à puces (non ordonnée), tandis que `
      ` crée une liste numérotée (ordonnée). Chaque élément utilise `
    1. `.
Domanda
À quoi servent les attributs src et alt de la balise <img/> ?
Risposta
L'attribut `src` spécifie le chemin vers l'image, et `alt` fournit un texte alternatif pour l'accessibilité et en cas de non-chargement.
Domanda
Quand utiliser les balises de tableau ?
Risposta
Pour représenter un tableau de données, en utilisant `` pour le conteneur, `` pour les lignes et `
` pour les cellules.
Domanda
Comment insérer un commentaire en HTML ?
Risposta
Un commentaire est déclaré avec ``. Il est visible dans le code source mais ignoré par le navigateur.
Domanda
Comment définir un formulaire en HTML ?
Risposta
Avec la balise `
`, en utilisant l'attribut `action` pour l'URL de traitement et `method` pour la méthode d'envoi (GET ou POST).
Domanda
Quelle est la différence entre les méthodes GET et POST ?
Risposta
GET envoie les données via l'URL (visibles), tandis que POST les envoie dans l'en-tête de la requête (non visibles), ce qui est plus sécurisé.
Domanda
À quoi sert la balise <label> dans un formulaire ?
Risposta
Elle associe un libellé à un champ de saisie (``). Cliquer sur le label active le champ associé, améliorant l'ergonomie.
Domanda
Qu'est-ce qu'une balise sémantique en HTML5 ?
Risposta
Une balise qui donne une indication sur le contenu qu'elle entoure, comme `
`, `
` ou `
`, améliorant la structure et le SEO.

HTML : Un Langage Fondamental pour le Web

L'HTML (HyperText Markup Language) est un langage de description (ou de balisage) qui permet de créer la structure et le contenu des pages web. Il est interprété par les navigateurs pour afficher des documents hypertextes.

Historique et Rôle Principal

  • Origine : Inventé en 1989, le HTML a émergé avec le début du Web pour présenter des documents et établir des liens hypertextes entre eux.
  • Support : Il est supporté et développé par le W3C (World Wide Web Consortium).
  • Côté Client : C'est un langage exécuté côté client, tout comme le CSS et le JavaScript.
  • Séparation des préoccupations : Dans une page web, il est crucial de séparer :
    • L'aspect information : contenu (textes, images, sons, vidéos, liens) et sa structuration.
    • L'aspect présentation : forme (affichage sur grand écran, smartphone, imprimante, etc.).
    HTML se concentre principalement sur l'aspect information et la structure.

Fonctionnalités Clés

Le HTML permet de :

  • Structurer le texte (divisions, titres, paragraphes, tableaux, listes).
  • Créer des hyperliens (ou hyperliens).
  • Insérer des images.
  • Insérer des composants multimédia : sons, vidéos.
  • Créer des formulaires de saisie.
Note : HTML offre des fonctionnalités de mise en forme basiques. Pour des mises en forme avancées, les feuilles de style CSS sont recommandées.

Structure d'un Document HTML

Un document HTML est un hypertexte décrit avec le langage HTML, il décrit le contenu des pages web.

Un hypertexte est un texte contenant des liens. Un lien peut être un mot ou une image cliquable permettant de se déplacer vers un autre emplacement du document, un autre document sur le même site, un document sur un autre site web, ou un autre service Internet (mail, ftp, etc.).

Création et Fichiers HTML

  • Un document HTML est un simple fichier texte avec l'extension .html (Ex: index.html). Un éditeur de texte simple suffit, mais un éditeur avec coloration syntaxique (comme Visual Studio Code) est plus confortable.
  • Le navigateur ne signalera pas d'erreur de syntaxe, même si le fichier HTML en contient.

Structure Hiérarchique et Balises

Un fichier HTML a une structure d'éléments imbriqués réalisée grâce au balisage. Chaque balise (ou tag) a une signification que le navigateur comprend et exécute pour présenter le document.

  • Le balisage associe généralement une balise ouvrante (<nom_balise>) et une balise fermante (</nom_balise>).
  • Certaines balises sont auto-fermantes (ou orphelines), n'ayant pas de balise fermante associée (Ex: <img>, <br>). Elles insèrent un élément sans contenu.
  • Les noms des balises ne sont pas sensibles à la casse (<body> est équivalent à <BODY>).
  • Une balise auto-fermante peut aussi être écrite <balise/>.

Code Source Minimal Conforme

La structure minimale pour un document HTML5 est :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu visible ici -->
</body>
</html>
  • <!DOCTYPE html> : Indique qu'il s'agit d'une page HTML5.
  • <html> : Renferme l'intégralité de la page web.
  • <head> : Contient des métadonnées non affichées à l'écran mais utilisées par le navigateur et les moteurs de recherche.
    • <title> : Définit le titre de la page affiché dans l'onglet du navigateur.
    • <meta charset="utf-8"> : Spécifie l'encodage des caractères.
    • <meta name="author" content="Mme Bousnina"> : Indique l'auteur.
    • <meta name="Keywords" content="web, html, css"> : Mots-clés pour les moteurs de recherche.
    • <link/> : Appelle une ressource externe (ex: une feuille de style CSS).
  • <body> : Renferme le contenu réellement visible par les internautes.

Sans les balises <html>, <head> et <body>, le document sera exécuté mais non valide selon le W3C et pourrait rencontrer des problèmes de référencement.

Imbrication des Balises

  • Un contenu peut être affecté par plusieurs balises imbriquées.
  • Règle d'imbrication : "La première balise ouverte est la dernière à fermer." Les balises doivent être fermées dans l'ordre inverse de leur ouverture. 
    <balise1> <balise2> <balise3> Contenu </balise3> </balise2> </balise1>
  • L'imbrication d'éléments HTML forme une structure hiérarchique sous forme d'arbre, où les éléments peuvent être parents, enfants, frères, ancêtres ou descendants.

Commentaires HTML

Les commentaires HTML sont déclarés ainsi : <!-- Commentaire -->

  • Ils sont visibles dans le code source mais ignorés par le navigateur.
  • Utiles pour documenter le code et faciliter sa compréhension future.

Balises de Structure et de Contenu

Balises de Titres

Les balises <h1> à <h6> (heading) définissent les titres et sous-titres :

  • <h1> : Titre de premier niveau (grande taille, gras).
  • <h2> : Titre de deuxième niveau (taille légèrement plus petite), utile pour les sous-titres.
  • Jusqu'à <h6>, avec une taille de caractères décroissante.

Balise de Paragraphe

La balise <p> sert à définir un paragraphe.

  • Les retours chariot dans un élément <p> sont ignorés par le navigateur, le texte est affiché comme un bloc continu.
  • Un paragraphe insère par défaut une ligne vide au-dessus et en dessous de son contenu.

Balise de Retour à la Ligne

La balise <br/> insère un saut de ligne sans créer un nouveau paragraphe. C'est une balise orpheline (pas de </br>).

Balise de Ligne Horizontale

La balise <hr/> crée une ligne horizontale, représentant un changement thématique. C'est une balise auto-fermante.

Autres Balises de Formatage de Texte

Il est recommandé d'utiliser des balises sémantiques lorsque cela est possible plutôt que des balises purement de présentation.

Balise Effet Exemple Rendu
<b> ou <strong> Gras (importance particulière pour <strong>) <b>Texte en gras</b> Texte en gras
<u> Souligné <u>Texte souligné</u> Texte souligné
<i> ou <em> Italique (emphase pour <em>) <i>Texte en italique</i> Texte en italique
<s> Barré <s>Texte barré</s> Texte barré
<mark> Surligné <mark>Texte surligné</mark> Texte surligné
<sub> Indice H<sub>2</sub>O H2O
<sup> Exposant 10<sup>2</sup> 102
<small> Police plus petite <small>Police plus petite</small> Police plus petite

Caractères Spéciaux

Les caractères spéciaux sont des séquences reconnues et remplacées par le navigateur (Ex: &quot; pour "

").

Balise Préformatée

La balise <pre> affiche le contenu exactement tel qu'il a été édité dans le code, conservant les retours à la ligne, les espaces et les tabulations.

<pre>
Là-haut sur la montagne, l'était un vieux chalet.
Murs blancs, toit de bardeaux,
Devant la porte un vieux bouleau.
</pre>
Attention : Il ne faut pas abuser de l'élément <pre> car il ne comporte aucune signification sémantique forte, ce qui n'est pas apprécié car il ne renforce pas le rôle du HTML.

Liens Hypertextes (Ancres)

Les liens HTML (balise <a>) créent des ponts entre pages du même site ou de sites différents, ou au sein de la même page.

Structure d'un Lien

  • Un lien transforme un texte ou une image en une ancre, c'est-à-dire une région sensible au clic.
  • L'attribut href ("hypertext reference") est obligatoire et spécifie l'endroit où l'utilisateur sera redirigé. 
    <a href = "http://www.wikipedia.com">web</a>

Types de Liens

  1. Liens externes : Vers une page d'un autre site. 
    <a href="http://www.ummto.dz">UMMTO</a>
  2. Liens internes (locaux) : Vers une page du même site. 
    <a href="cv.html">curriculum vitae</a>
  3. Liens d'ancres : Permettent de naviguer au sein de la même page ou vers une ancre dans une autre page.
    • Ancre dans la même page :
      1. Définir la cible avec un id : <p id="ancre">Contenu</p>
      2. Créer le lien : <a href="#ancre">Section</a>
    • Ancre dans une autre page :
      1. Définir la cible avec un id : <p id="ancre">Contenu</p>
      2. Créer le lien : <a href="url/nom_du_fichier.html#ancre">Section</a>

Attribut target

L'attribut target de la balise <a> spécifie où le document lié doit être ouvert :

  • _blank : Ouvre le lien dans un nouvel onglet.
  • _self : Ouvre le lien dans le même onglet (valeur par défaut).

Listes HTML

Les listes HTML ordonnent ou hiérarchisent le contenu.

Types de Listes

  • Listes ordonnées (numérotées) : Balise <ol> 
    <ol>
    <li>BMW</li>
    <li>MERCEDES</li>
    <li>PORSCHE</li>
</ol>
  • Listes non ordonnées (à puces) : Balise <ul> 
    <ul>
    <li>BMW</li>
    <li>MERCEDES</li>
    <li>PORSCHE</li>
</ul>
  • Chaque élément de liste est défini par la balise <li>.
  • Les listes peuvent être imbriquées.

Attributs des Listes

  • type :
    • Pour <ul> : disc (●), circle (○), square (■).
    • Pour <ol> : A, a, I, i, 1.
  • value (pour <li>) : Définit un rang de numérotation spécifique.
  • start (pour <ol>) : Démarre la numérotation à un rang spécifique.

Gestion des Images

La balise <img/> permet d'intégrer une image dans un document. C'est un élément de type inline.

Attributs Obligatoires et Recommandés

  • src : Obligatoire, spécifie le chemin vers l'image.
    • Fichier local : <img src="images/test.png">
    • Fichier distant : <img src="http://exemple.org/exemples/images/test.png">
  • alt : Recommandé pour l'accessibilité, propose un texte de remplacement si l'image ne peut pas être chargée ou pour les lecteurs d'écran. Utile pour les moteurs de recherche.

Chemins de Fichiers

  • Chemin absolu : Emplacement complet d'un fichier depuis la racine (Ex: D:/home/john/www/blog/index.php).
  • Chemin relatif : Description de l'emplacement d'un fichier depuis l'emplacement du fichier actuel (Ex: ./images/back03.jpg).
  • Pour la conception de sites, il est fortement recommandé d'utiliser des chemins relatifs pour garantir que les liens restent valables quel que soit le serveur d'hébergement.

Attributs Additionnels

  • width, height : Largeur et hauteur de l'image (généralement en pixels). Il est déconseillé de les utiliser pour redimensionner, préférer le CSS.
    Note : Si les valeurs sont en pourcentage (Ex: width="50%"), cela représente le pourcentage de l'espace par rapport à la taille de son conteneur parent.
  • title : Texte affiché en info-bulle au survol de la souris.

Formats d'Images Courants

  • JPEG (Joint Photographic Expert Group) :
    • Format photo le plus répandu.
    • Forte compression (supprime les informations invisibles à l'œil).
    • Léger, temps de chargement optimisé.
    • Qualité suffisante pour le digital.
    • Universel.
  • GIF (Graphics Interchange Format) :
    • Utilisé pour les images animées.
    • Idéal pour les réseaux sociaux.
  • PNG (Portable Network Graphics) :
    • Idéal pour les images à fond transparent, graphiques et logos.
    • Bon taux de compression avec bonne qualité.
Règle d'or : Une bonne image vaut mieux qu'un long discours, mais une bonne image est plus longue à charger.

Tableaux HTML

L'élément <table> représente un tableau de données en deux dimensions.

Structure de Base

  • Un tableau est défini par la balise <table>.
  • Les lignes sont définies par <tr> (table row).
  • Les cellules de données sont définies par <td> (table data).

Cellules d'En-tête

L'élément <th> (table header) définit les cellules d'en-tête, qui sont généralement affichées en gras par les navigateurs.

Légende de Tableau

L'élément <caption> ajoute une légende (titre) à un tableau, elle peut être placée au-dessus ou au-dessous (selon l'attribut align).

Attributs de Tableau (Dépréciés pour la Mise en Forme)

Il est fortement conseillé de ne pas utiliser ces attributs pour la mise en forme et de privilégier le CSS.

  • Pour <table> :
    • border : Épaisseur de la bordure extérieure.
    • cellpadding : Espace entre bordures et contenu des cellules.
    • cellspacing : Marges entre cellules.
  • Pour <td> :
    • colspan : La cellule s'étend sur plusieurs colonnes.
    • rowspan : La cellule s'étend sur plusieurs lignes.
    • bgcolor : Couleur de fond de la cellule (déprécié).

Contenu Multimédia (Audio et Vidéo)

Intégration de Vidéos

La balise <video> inclut une vidéo dans une page web, avec des contrôles de lecture intégrés.

  • Il est important de fournir plusieurs sources vidéo (MP4, WebM, Ogg) pour une compatibilité maximale entre navigateurs.
  • Le texte entre <video></video> est un message de secours si le navigateur ne peut pas lire la vidéo.
  • L'attribut src peut être utilisé directement : <video src="..."></video>.

Intégration d'Audio

La balise <audio> est similaire à <video> mais est spécifiquement pour les fichiers audio.

<audio controls autoplay muted loop>
    <source src="audio.mp3" type="audio/mp3">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

Attributs Communs aux Balises <video> et <audio>

  • controls : Affiche les contrôles de lecture (lecture, pause, volume, etc.).
  • autoplay : Démarre la lecture automatiquement (peut être bloqué par certains navigateurs).
  • loop : Rejoue le média en boucle.
  • muted : Démarre le média en sourdine.
  • poster (pour <video>) : Affiche une image de prévisualisation avant la lecture.
  • track (pour <video>) : Permet d'ajouter des sous-titres ou légendes.

Intégration de Contenu Externe (Iframes)

La balise <iframe> inclut une autre page web à l'intérieur de la page actuelle. Elle permet d'intégrer du contenu externe (vidéos, cartes, widgets) de manière sécurisée.

  • Pour intégrer des services comme Google Maps, il faut utiliser l'URL spécifique fournie par le service pour l'intégration.

Formulaires HTML

Les formulaires HTML (``) permettent aux utilisateurs d'interagir avec la page web en saisissant des informations (texte, choix, boutons) et de les envoyer à un serveur pour traitement.

Balise <form>

Un formulaire est défini par la balise <form>. Attributs fréquents :

  • action : Spécifie l'URL où les données du formulaire seront envoyées après soumission.
  • method : Spécifie la méthode de transfert des données au serveur (GET ou POST).
<form action="/submit-form.php" method="POST">
    <!-- Éléments du formulaire -->
</form>

Éléments de Formulaire (<input/>, <button>, <textarea>, <select>)

Balise <input/>

La balise auto-fermante <input/> est l'élément le plus polyvalent, son comportement dépend de l'attribut type.

  • Regroupement : Pour organiser de nombreux champs, les balises <fieldset> et <legend> sont utilisées.
<form action="traitement.php" method="post">
    <fieldset>
        <legend>Vos coordonnées</legend>
        <input name="nom" id="nom" type="text"/>
        <!-- Autres champs ici -->
    </fieldset>
</form>

Associant une Étiquette: La Balise <label>

La balise <label> associe un libellé à un élément de saisie.

  • Lier le label au champ : L'attribut for du <label> doit avoir la même valeur que l'attribut id du champ associé.
  • Améliore l'expérience utilisateur (cliquer sur le label active le champ).
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom"/>

Les Types d'<input/>

Les différents types d'<input/> définissent le type de données que l'utilisateur peut saisir, offrant un contrôle côté client et améliorant l'expérience utilisateur.

  • type="text" : Champ de texte simple (une seule ligne).
  • type="email" : Champ pour adresses e-mail (validation basique).
  • type="password" : Champ de mot de passe (caractères masqués).
  • type="date" : Champ de sélection de date.
  • type="color" : Sélecteur de couleur.
  • type="radio" : Bouton radio (sélection unique dans un groupe).
    • Pour former un groupe, tous les boutons radio doivent avoir le même attribut name.
    • L'attribut value de l'élément sélectionné est envoyé au serveur.
    • checked : Attribut booléen pour pré-sélectionner un bouton radio.
  • type="number" : Champ pour nombres (avec fléches d'incrémentation/décrémentation).
  • type="file" : Champ de téléversement de fichier.
  • type="checkbox" : Case à cocher (sélection multiple possible).
  • type="range" : Curseur de sélection de valeur dans une plage.
  • type="submit" : Bouton de soumission du formulaire.
  • type="reset" : Bouton de réinitialisation du formulaire.
  • type="image" : Bouton de soumission via une image (nécessite l'attribut src).
  • type="button" : Bouton générique, sans effet par défaut (souvent géré par JavaScript).

Autres Attributs d'<input/>

  • name : Identifie le champ lorsque le formulaire est soumis.
  • id : Identifiant unique de l'élément.
  • value : Valeur par défaut du champ.
  • placeholder : Texte d'aide qui disparaît à la saisie.
  • maxlength : Nombre maximal de caractères.
  • required : Indique que le champ est obligatoire.
  • size : Largeur visible du champ (pour les champs de texte).
  • step : Incrément pour les types numériques (date, number, range).

Balise <textarea>

La balise <textarea> est utilisée pour les zones de texte multilignes (grands blocs de texte).

<label for="msg">Message </label>
<textarea id="msg" name="message" rows="4" cols="50" placeholder="Entrez votre message ici..."></textarea>

Balises <select> et <option>

Utilisées pour créer des menus déroulants.

  • <select> : Le conteneur du menu déroulant.
  • <option> : Chaque élément de choix dans le menu.
<select name="ville" id="ville">
    <option value="Adrar">Adrar</option>
    <option value="Bouira" selected>Bouira</option>
</select>
  • multiple (pour <select>) : Permet de sélectionner plusieurs options.
  • size (pour <select>) : Nombre de lignes visibles simultanément.
  • selected (pour <option>) : Option sélectionnée par défaut au chargement de la page.

Méthodes d'Envoi d'un Formulaire

L'attribut method de la balise <form> spécifie comment les données sont envoyées au serveur.

  1. method="get" (par défaut) :
    • Envoie les données via l'URL, rendant les informations visibles dans la barre d'adresse.
    • Format : ?clé1=valeur1&clé2=valeur2.
    • Utile pour les formulaires de recherche où les paramètres sont partagés.
    • Limitation de la taille des données que certains navigateurs et serveurs peuvent accepter.
  2. method="post" :
    • Envoie les données via l'en-tête de la requête HTTP, les informations ne sont pas visibles dans l'URL.
    • Permet d'envoyer un volume de données plus important et des fichiers ("Upload").
    • Préférable pour les données sensibles (ex: mots de passe) ou grandes quantités de données.
    Attention : La méthode POST ne rend pas les données sécurisées, juste non visibles dans l'URL. La sécurisation nécessite d'autres mesures.

Le HTML seul ne permet pas de traiter ou d'enregistrer les données envoyées par un formulaire ; cela nécessite un langage côté serveur (PHP, Python, Node.js, etc.).

Éléments Génériques (<div> et <span>)

Ces balises sont utilisées pour structurer et styliser le contenu lorsque d'autres balises sémantiques ne sont pas appropriées. Elles n'ont pas de signification sémantique propre.

  • <div> :
    • Utilisé pour grouper des éléments consécutifs.
    • C'est une balise de type bloc (prend toute la largeur disponible et crée un saut de ligne).
  • <span> :
    • Utilisé pour grouper des portions de texte consécutives à l'intérieur d'une balise bloc.
    • C'est une balise de type inline (ne crée pas de saut de ligne, prend juste l'espace nécessaire).
    • Les éléments inline ne peuvent contenir que d'autres éléments inline.

HTML5 : Évolutions et Concepts

HTML5 est la dernière version des standards HTML, enrichissant le langage avec de nouveaux éléments, attributs et comportements, ainsi qu'un ensemble de technologies pour des sites et applications web plus puissants.

Nouveaux Éléments et Attributs

  • Balises sémantiques pour la structure : <header>, <footer>, <article>, <section>, etc.
  • Nouveaux types d'inputs pour les formulaires : date, number, email (comme vu précédemment).
  • Support natif pour l'Audio/Vidéo : balises <audio> et <video>, simplifiant l'intégration multimédia sans plugins.
  • APIs JavaScript étendues et fonctionnalité Canvas (dessin).

Balises Sémantiques

Une balise sémantique donne des indications sur le contenu qu'elle entoure, clarifiant sa signification pour les navigateurs, les moteurs de recherche et les développeurs.

  • Elles améliorent l'accessibilité et le référencement (SEO) en aidant les robots d'indexation à mieux comprendre la page.

Exemples de Balises Sémantiques

  • <figure> et <figcaption> :
    • <figure> : Spécifie un contenu autonome (illustrations, diagrammes, photos).
    • <figcaption> : Utilisé pour légender le contenu de <figure>.
  • <details> et <summary> :
    • <details> : Conteneur pour un contenu qui peut être révélé ou caché.
    • <summary> : Titre ou résumé cliquable qui contrôle l'affichage du contenu de <details>.

Validation HTML

Valider un document HTML à l'aide d'un validateur aide à :

  • Assurer un affichage cohérent entre les navigateurs.
  • Améliorer l'accessibilité pour les personnes souffrant d'un handicap.
  • Démontrer des capacités professionnelles (code de qualité respectant les normes).

Le Validateur du W3C (http://validator.w3.org ou http://validator.w3.org/nu) est l'outil de référence.

Inizia un quiz

Testa le tue conoscenze con domande interattive