4 Introduction HTML
DerniĂšre mise Ă jour
DerniĂšre mise Ă jour
Examinons maintenant le principe de fonctionnement et la syntaxe de base du HTML.
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.
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.
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
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
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.
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
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
ul
Liste non ordonnée / Liste non numérotée
ol
Liste ordonnée / Liste numérotée
li
élément d'une liste
img
Intégration d'un fichier image
video
Intégration d'un fichier vidéo
: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.
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 vous permet de voir toutes les tags et leur signification en un coup d'Ćil. La rĂ©fĂ©rence du langage, une est Ă©galement trĂšs utile. Vous apprendrez Ă©galement Ă connaĂźtre d'autres balises au cours de ce module.
Liens
