Code Les Essentiels du HTML – Version 1 Pour les balises qui vont par paire, seules la balise ouvrante est indiquée. La balise fermante correspondante comporte un / en plus, après son premier chevron. Ex : <p>Ceci est un paragraphe</p> Les balises auto-fermantes sont repérables à leur fin en />. [TITRE DU DOCUMENT] F. DIALLO Pour les balises se plaçant dans le <body>, deux types de balises existent : ● ● ● ● • les balises blocs : elles créées leur propre bloc de contenu, avec un saut-deligne avant et après elles. • les balises inlines : elles ne créées par leur propre bloc de contenu, elles affectent ce qui se trouve entre elles sans produire de saut-de-lignes. Les commentaires s’écrivent entre les symboles <!-- et -->. A. Balises de Structure de la Page-Web 1. Structure générale <!DOCTYPE> : Version du (X)HTML <html> : Document HTML <head> : Informations de la page <body> : Contenu de la page 2. Description de la page Ces balises sont à mettre dans le <header> <title> : Titre de la page <meta charset="utf-8" /> : Gestion de l’encodage <link href="style.css" Liaison avec le fichier CSS rel="stylesheet" type="text/css" /> : 3. Code de base d’une page web <!DOCTYPE html> <html> [TITRE DU DOCUMENT] F. DIALLO <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initialscale=1" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Titre de la page</title> </head> <body> Contenu de la page </body> </html> B. Identifiants et Classes 1. Identifiant Un identifiant unique peut être attribué à chaque balise HTML. Cet identifiant permettra de sélectionner la balise à l’intérieur de la page. L’identifiant se déclare en ajoutant l’attribut id à une balise, dans la balise ouvrante. Si le nom choisi comme identifiant comporte plusieurs mots, on les sépare par des tirets -. <!-- Exemple --> [TITRE DU DOCUMENT] F. DIALLO <h1 id="main-titre">Page sur le HTML</h1> <p id="first-paragraph">Le HTML est un langage informatique.</p> 2. Classe Une ou plusieurs classes peuvent être attribuées à chaque balise HTML. Les classes permettent d’attribuer des styles-CSS particulier à une balise. Plusieurs balises peuvent partager la même classe. La classe se déclare en ajoutant l’attribut class à une balise, dans la balise ouvrante. Si le nom choisi comme classe comporte plusieurs mots, on les sépare par des tirets -. Si une balise comporte plusieurs classes, on sépare le nom de chaque classe par un espace <!-- Exemple --> <p class="lang">Le HTML est un langage informatique.</p> <p class="lang">Le HTML est un langage informatique.</p> <p class="lang prog">Le PHP est un langage informatique.</p> <p class="lang prog">Le JavaScript est un langage informatique.</p> C. Balises de Contenu Ces balises sont à mettre dans le <body> 1. Mise en Forme du Texte Balises blocs <h1>, <h2>, <h3>, <h4> : Titres <p> : Paragraphe Balises inline <strong> : Texte important, en gras, utilisé pour l’indexation [TITRE DU DOCUMENT] F. DIALLO <b> : Texte en gras <em> : Texte important, en italique, utilisé pour l’indexation <i> : Texte en italique <mark> : Surlignage <br /> : Retour à la ligne 2. Liens <a href="" > : Lien vers une page-web ou une ressource. Entre les guillemets de href, on peut mettre un chemin : ● ● ● ● • relatif, qui pointe vers l’endroit où se trouve la page-web ou la ressource ciblée, sur le disque-dur/SSD du PC/Mac, par rapport à la page contenant le lien. Les symboles .. permettent de remonter dans l’arborescence des fichiers si besoin. • url, qui pointe vers l’adresse URL d’une page-web ou d’une ressource en ligne <!-- Exemples --> <a href="page2.html">Lien relatif vers une page du même site, située dans le même dossier que cette page.</a> <a href="course/web.html">Lien relatif vers une page du même site, située dans un dossier nommée course. Le dossier course se trouve dans le même dossier que cette page.</a> <a href="../accueil.html">Lien relatif vers une page du même site, située un niveau plus dans l’arborescence du site que cette page.</a> <a href="https://link.nairod.eu/">Lien vers une page en ligne, sur un autre site-web</a> Il est aussi possible de faire un lien vers une ancre, en ajoutant #, puis l’id de la balise servant d’ancre, à la fin du chemin. Si on écrit uniquement #, puis l’id de la balise servant d’ancre, le lien pointera vers un id se trouvant dans la même page que lui. <!-- Exemple --> [TITRE DU DOCUMENT] F. DIALLO <a href="page2.html#section-2">Lien vers une ancre sur une autre page</a> <a href="#sommaire">Lien vers une ancre sur cette page</a> <a href="mailto:"> : Lien vers un mail 3. Médias <img src="" alt="" /> : Image. Entre les guillemets de alt, on écrit une description de l’image. de src, on peut mettre un chemin : ● ● ● ● • relatif, qui pointe vers l’endroit où se trouve l’image ciblée, sur le disquedur/SSD du PC/Mac, par rapport à la page devant afficher l’image. Les symboles .. permettent de remonter dans l’arborescence des fichiers si besoin. • url, qui pointe vers l’adresse URL d’une image en ligne <!-- Exemple --> <img src="ressources/img/image-1.png" alt="Photo de la Terre"/> <video> : Vidéo <!-- Exemple --> <video width="600" height="400" controls> <source src="vid/video_file.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 4. Balises neutres Ces balises sont à remplacer, quand c’est possible, par toute autre balise ayant une signification du point de vue de l’indexation. [TITRE DU DOCUMENT] F. DIALLO <div> : Balise bloc neutre <span> : Balise inline neutre D. Balises de Zones Complexes Ces balises sont à mettre dans le <body> Tableaux <table> : Zone de tableau <caption> : Titre du tableau <tr> : Ligne <th> : Cellule d’en-tête <td> : Cellule <!-- Exemple --> <table> <caption>Titre du tableau</caption> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> <tr> <td>Case 1</td> [TITRE DU DOCUMENT] F. DIALLO <td>Case 2</td> <td>Case 3</td> </tr> <tr> <td>Case 4</td> <td>Case 5</td> <td>Case 6</td> </tr> </table> Listes <ul> : Zone de liste à puces <ol> : Zone de liste numérotée <li> : Élément d'une liste <!-- Exemple --> Liste à puce : <ul> <li>Élement 1</li> <li>Élement 2</li> <li>Élement 3</li> <li>Élement 4</li> </ul> [TITRE DU DOCUMENT] F. DIALLO Détails <details> : Zone de détail <summary> : Partie résumant le détail, permettant d’afficher/cacher le reste <!-- Exemple --> <details> <summary>Partie toujours visible</summary> Partie cachée quand le détail<br /> est fermé </details> [TITRE DU DOCUMENT] F. DIALLO
