L’HTML est le langage utilisé pour l’affichage de site web.
La version actuelle est la 5.
Définition
HTML = Hyper Text Markup Language = langage de balisage d’hypertexte.L’hypertexte représente du contenu lié par des hyperliens, qui permettent de naviguer d’une page à l’autre.
Le langage de balisage est le code de développement permettant l’affichage de contenu.
L’HTML est un langage front-end (= ensemble des éléments visibles sur un site web) interprété par le navigateur.
Le code HTML est écrit dans un fichier texte et enregistré au format .htm ou .html entre autre.
Voir le site de Wikipédia à ce sujet.
Les navigateurs
Le fichier html est lu par un navigateur dont voici la liste des principaux
Firefox
Chrome
Edge
Safari
OperaLe navigateur interprète le code html, css, javascript et les langages back-end (PHP, .Net…).
Lors de la conception d’un site il convient donc de l’ouvrir sur tout ces navigateurs et voir les différences d’interprétations (d’affichage).
Les outils du navigateurs pour le développeur
Les navigateurs proposent de nombreux outils dédiés au développeur. Les plus intéressants sont la consultation du code entrant (code source) et la consultation, modification du code interprété permettant son affichage.Code source -> Navigateur -> Code interprété pour l’affichage
Seuls les codes html, css et javascript sont visible. Les langages back-end (PHP, .Net…) ne sont pas affichés.
Consultation du code entrant
Le code source est le code avant son arrivé dans le navigateur.- Cliquez avec le bouton droit de la souris sur une partie vide de la page Web (ou
Ctrl+u) - Sélectionnez « Code source de la page » ou « Afficher le code source de la page » dans le menu contextuel qui apparaît
- Un nouvel onglet apparait avec le code source
Lecteur vidéo
00:00
00:00
Le code affiché dans ce nouvel onglet n’est pas modifiable dans le navigateur.
Consultation / modification du code interprété
Le code interprété est le code source modifié par le navigateur afin de l’afficher.- Cliquez avec le bouton droit de la souris sur une partie à examiner de la page Web (ou
Ctrl+Maj+CouF12) - Sélectionnez « Inspecter » dans le menu contextuel qui apparaît
- Une fenêtre recouvrant une partie de la page web apparaît sur l’onglet (Elements pour Chrome, Inspecteur pour Firefox) du code interprété
- Cliquez avec le bouton droit de la souris sur le titre « Hypertext Markup Language » et sélectionnez Inspecter dans le menu contextuel
- Dans la fenêtre qui vient de s’ouvrir, double cliquez sur « Hypertext Markup Language »
- Saisissez ce que vous voulez, cliquez ensuite n’importe où ailleurs et vous verrez le changement
Lecteur vidéo
00:00
00:00
Pour en savoir plus
Le site de Mozilla –Les éditeurs
Ma première page
- Copiez le code ci-dessous en cliquant sur le bouton Copier
- Ouvrez un éditeur de texte (le bloc-notes de Windows ou TextEdit sur Mac)
- Collez y le code copié (
Ctrl+v) - Enregistrez le fichier sur le bureau en le nommant « monsite.htm »
- Rendez-vous sur le bureau et double-cliquez sur le fichier « monsite.htm », celui-ci doit normalement s’ouvrir dans votre navigateur
Structure
Une page html est constitué au minimum de cette façon :
<!DOCTYPE html>
<html>
<html>
<head>
<title>Mon premier site web</title>
</head>
<body>
</html>
<p>Coucou bonjour tout le monde !!</p>
</body>
Les documents html 5 commencent toujours par
<!DOCTYPE html>.Puis le code est entouré par les balises
<html> au début et </html> à la fin.Les balises
<head> et </head> entourent une partie qui ne sera pas visible dans la fenêtre du navigateur, comme le titre par exemple.Les balises
<body> et </body> entourent la partie visible.
Les balises
<balise> est une balise.Les balises indiquent une action à effectuer sur le contenu.
Elles ne sont pas affichées dans le navigateur et ne sont visible que dans le code source ou l’inspecteur.
La plupart des balises sont à fermer pour entourer le contenu :
<balise> contenu </balise><p>Coucou tout le monde !!</p>Certaines balises ne sont pas à fermer, ce sont des balises orphelines.
Coucou<br>Tout le monde !! Les balises peuvent être configurable en ajoutant une valeur à un attribut :
<balise attribut="valeur"> contenu </balise><p class="introduction">Coucou tout le monde !!</p>p est la balise
class est l’attribut de la balise p
introduction est la valeur de l’attribut class
Règles à suivre
Pour une meilleur compréhension du code-
- Les balises et leurs attributs doivent être saisie en minuscule
Bonne pratique<p>Coucou</p>
A éviter<p>Coucou</P>
- Les valeurs d’attributs doivent être saisie entre double quote
Bonne pratiquex<p class="introduction">Coucou</p>
A éviter<p class='introduction'>Coucou</p>
Mauvaise pratique<p class=introduction>Coucou</p>
- Les valeurs d’attributs doivent être saisie en minuscule
Bonne pratique<p class="introduction">Coucou</p>
A éviter<p class='INTRODUCTION'>Coucou</p>
- A l’intérieur d’une balise, évitez les espaces avant et après le signe =
Bonne pratique<p class="introduction">Coucou</p>
A éviter<p class = "introduction">Coucou</p>
- Evitez les lignes vides
Bonne pratique<!DOCTYPE html><html><head><title>Mon premier site web</title></head><body><p>Coucou bonjour tout le monde !!</p></body></html>
A éviter<!DOCTYPE html><html><head><title>Mon premier site web</title></head><body><p>Coucou bonjour tout le monde !!</p></body></html>
- Indenter correctement votre code, signifie ajouter une tabulation (ou 4 espaces) avant une ligne imbriquée
Bonne pratique<!DOCTYPE html><html><head><title>Mon premier site web</title></head><body><p>Coucou bonjour tout le monde !!</p></body></html>
A éviter<!DOCTYPE html><html><head><title>Mon premier site web</title></head><body><p>Coucou bonjour tout le monde !!</p></body></html>
- Ne pas entremêler les balises
Bonne pratique<p>Coucou bonjour <b>tout le monde !!</b></p>
Mauvaise pratique<p>Coucou bonjour <b>tout le monde !!</p></b>
- Les balises et leurs attributs doivent être saisie en minuscule