> For the complete documentation index, see [llms.txt](https://cmspilot.gitbook.io/viscom-cie1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cmspilot.gitbook.io/viscom-cie1/04.intro_html.md). # 4 Introduction HTML Examinons maintenant le principe de fonctionnement et la syntaxe de base du HTML. ## [#](#syntaxe) 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. ![HTML Tag](https://github.com/inetis-ch/viscom-cie1/raw/main/asset/img/html_tags.d09c91d9.jpg) 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`. ```html contenu. Contenu et autres éléments DOM imbriqués. ``` ## [#](#document-objet-modèle) 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 `` qui contient des liens et des métas qui sont pour la plupart invisibles pour l'utilisateur final, et d'une section `` qui contient tout le contenu qui sera éventuellement affiché sur le site. ```html En-tête Zone principale d'affichage ``` ## [#](#nesting-parent-enfant) 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**. ![HTML Tree](https://github.com/inetis-ch/viscom-cie1/raw/main/asset/img/html_tree.e7dfdcd7.svg) ![HTML Boxes](https://github.com/inetis-ch/viscom-cie1/raw/main/asset/img/html_boxes.6665c487.svg) Images: eloquentjavascript.net ## Les tags les plus importants ### Structure de base | tag | description | | ------- | ------------------------------------------------------------------------------------- | | `html` | élément racine | | `head` | Container pour les méta-tags | | `title` | Titre de la page, par exemple pour les moteurs de recherche ou l'onglet du navigateur | | `meta` | méta-information/page, par exemple description, etc. | | `link` | Intégration de fichiers/données, par exemple CSS ou Javascript | | `body` | conteneur pour le contenu | ### [#](#mise-en-page) Mise en page | tag | description | | --------- | ------------------------------------------------------------- | | `header` | debut d'une page qui contient généralement le logo et le menu | | `nav` | conteneur pour les navigations/menus | | `main` | zone principale, conteneur pour les sections | | `section` | Section, conteneur pour divisions, articles, etc. | | `div` | Division, élément de bloc | | `aside` | sidebar, colonne | | `article` | Les contenus tels que les articles, les billets de blog, etc. | | `footer` | pied de page, par exemple pour les droits d'auteur, etc. | ### [#](#titres-titres) Titres | tag | description | | ---- | ----------------------------------------------- | | `h1` | titre/en-tête - taille de police la plus grande | | `h2` | titre/en-tête | | `h3` | titre/en-tête | | `h4` | titre/en-tête | | `h5` | titre/en-tête | | `h6` | Titre/En-tête - Taille de police la plus petite | ### [#](#text-links) Texte et liens | tag | description | | ------ | -------------------------------------------------------------- | | `p` | Paragraphe (ligne toujours une nouvelle ligne) | | `br` | Retour à la ligne dans le même paragraphe | | `span` | Élément en ligne dans un texte continu (pas de nouvelle ligne) | | `a` | Lien vers des pages à l'intérieur ou à l'extérieur du site | ### [#](#listen) lists | tag | description | | ---- | ---------------------------------------- | | `ul` | Liste non ordonnée / Liste non numérotée | | `ol` | Liste ordonnée / Liste numérotée | | `li` | élément d'une liste | ### [#](#images-vidéos) Images et vidéos | tag | description | | ------- | ------------------------------ | | `img` | Intégration d'un fichier image | | `video` | 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](https://websitesetup.org/HTML5-cheat-sheet.pdf) 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](https://htmlreference.io/) 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. :link: Liens * [Référence HTML avec exemples](https://htmlreference.io/) * [HTML Cheatsheet](https://websitesetup.org/HTML5-cheat-sheet.pdf)