4 Introduction HTML
DerniĂšre mise Ă jour
Examinons maintenant le principe de fonctionnement et la syntaxe de base du HTML.
# Syntaxe
Le HTML fonctionne avec des balises. Les balises sont toujours composées de trois parties. Un début (balise d'ouverture), le contenu proprement dit ou d'autres éléments HTML imbriqués et une fin (balise de fermeture). Ces trois parties forment ensemble un élément HTML.
Image: Livre HTML&CSS par John Duckett
Dans l'exemple ci-dessous, vous pouvez voir encore une autre représentation. C'est le format que vous utilisez pour écrire le HTML dans votre fichier index.html.
# Document Object Model
Le Document Object Model (DOM) comprend tous les Ă©lĂ©ments HTML de votre document dans un ordre hiĂ©rarchique. Dans ce contexte, les Ă©lĂ©ments HTML sont Ă©galement appelĂ©s "nĆuds DOM".
L'arbre DOM est une reprĂ©sentation visuelle de ces Ă©lĂ©ments et en mĂȘme temps un code valide pour le navigateur. Pour toute page web, le DOM peut ĂȘtre consultĂ© via l'Ă©lĂ©ment de menu "View source code" ou la combinaison de touches âCMD + â§SHIFT + U (macOS).
Ici, vous pouvez voir un arbre DOM minimal, comme tout site web. Il se compose d'une section de tĂȘte <head> qui contient des liens et des mĂ©tas qui sont pour la plupart invisibles pour l'utilisateur final, et d'une section <body> qui contient tout le contenu qui sera Ă©ventuellement affichĂ© sur le site.
# Hiérarchie
L'imbrication des nĆuds DOM les uns dans les autres est Ă©galement appelĂ©e " nesting ". L'Ă©lĂ©ment englobant est toujours appelĂ© parent, l'enfant child.
Images: eloquentjavascript.net
Les tags les plus importants
Structure de base
| tag | description |
|---|---|
| élément racine |
| Container pour les méta-tags |
| Titre de la page, par exemple pour les moteurs de recherche ou l'onglet du navigateur |
| méta-information/page, par exemple description, etc. |
| Intégration de fichiers/données, par exemple CSS ou Javascript |
| conteneur pour le contenu |
# Mise en page
| tag | description |
|---|---|
| debut d'une page qui contient généralement le logo et le menu |
| conteneur pour les navigations/menus |
| zone principale, conteneur pour les sections |
| Section, conteneur pour divisions, articles, etc. |
| Division, élément de bloc |
| sidebar, colonne |
| Les contenus tels que les articles, les billets de blog, etc. |
| pied de page, par exemple pour les droits d'auteur, etc. |
# Titres
| tag | description |
|---|---|
| titre/en-tĂȘte - taille de police la plus grande |
| titre/en-tĂȘte |
| titre/en-tĂȘte |
| titre/en-tĂȘte |
| titre/en-tĂȘte |
| Titre/En-tĂȘte - Taille de police la plus petite |
# Texte et liens
| tag | description |
|---|---|
| Paragraphe (ligne toujours une nouvelle ligne) |
| Retour Ă la ligne dans le mĂȘme paragraphe |
| ĂlĂ©ment en ligne dans un texte continu (pas de nouvelle ligne) |
| Lien vers des pages à l'intérieur ou à l'extérieur du site |
# lists
| tag | description |
|---|---|
| Liste non ordonnée / Liste non numérotée |
| Liste ordonnée / Liste numérotée |
| élément d'une liste |
# Images et vidéos
| tag | description |
|---|---|
| Intégration d'un fichier image |
| Intégration d'un fichier vidéo |
Les balises HTML mentionnĂ©es ici vous permettent dĂ©jĂ de structurer des sites web Ă©laborĂ©s. Il y a beaucoup d'autres tags, mais vous n'ĂȘtes bien sĂ»r pas obligĂ© de toutes les mĂ©moriser. Une Cheatsheet vous permet de voir toutes les tags et leur signification en un coup d'Ćil. La rĂ©fĂ©rence du langage, une rĂ©fĂ©rence HTML est Ă©galement trĂšs utile. Vous apprendrez Ă©galement Ă connaĂźtre d'autres balises au cours de ce module.
:memo: Note
Si aucune des balises de mise en page descriptive (par exemple "main", "article", "aside", "foot", "header" ou "nav") ne semble avoir de sens pour un certain Ă©lĂ©ment, vous pouvez Ă©galement utiliser "div" (division). En principe, l'ensemble du site web peut Ă©galement ĂȘtre structurĂ© avec des div uniquement, mais ce n'est pas trĂšs conseillĂ©, car la lisibilitĂ© du code diminue massivement.
đ Liens
