Introduction au HTML

Avant de commencer
Pour comprendre cet article, il est recommandé d'être à l'aise avec l'utilisation d'unNavigateur.
Si vous êtes également familiarisé avec la manipulation (création et modification) de fichiers texte, vous pouvez tester le
exemples présentés dans cet article.

Lorsque vous regardez une page web dans unnavigateur web, vous voyez, au niveau le plus simple, des mots. Il est rare de
voir une page web contenant seulement du texte brut. Au lieu des mots que vous voyez et lisez, ils ont du style
caractéristiques. Les designers de pages web modernes ont accès à des centaines de polices différentes, de tailles de police,
couleurs, et même alphabets (par exemple, espagnol, japonais, russe). Les navigateurs modernes peuvent afficher la plupart de
eux avec précision. Les pages Web peuvent également contenir des images, des clips vidéo et de la musique d'accompagnement. Elles
peut inclure des menus déroulants, des zones de recherche, des liens cliquables vers des produits ou d'autres pages au sein de
le même site web, ou des liens vers des pages web externes. Certains sites web offrent même des options de personnalisation pour le
afficher la page pour s'adapter aux préférences personnelles ou aux incapacités telles que la vision limitée, la surdité, ou
Daltonisme. Souvent, une page contient des zones de contenu qui se déplacent (défilent) tandis que le reste de la page
reste statique.
Plusieurs technologies (commeCSS, JavaScript, Éclair, AJAX, JSON) peut être utilisé pour définir le
éléments d'une page web. Cependant, au niveau de base, une page web est créée en utilisantHTML(Hypertexte
Langage de balisage). SansHTML, il n'y a pas de page web. HTML est ce qu'un navigateur « lit » pour
présenter la page sur l'ordinateur client.
Les normes et spécifications internationales de HTML sont maintenues par leWeb mondial
Consortium(W3C) et leGroupe de travail sur la technologie des applications hypertexte du Web(WHATWG).
Le WHATWG considère HTML comme un "standard vivant" qui évolue constamment, tandis que le
Le W3C travaille sur à la fois des "instantanés" de HTML, dont le plus récent estHTML5et sur le
évolution du HTMLHTML 5.1).
Lespécification HTMLdéfinit une seule langue qui peut être écrite en utilisant le relâchéHTML
syntaxe, mais aussi le plus strictXML(Langage de balisage extensible) un, et s'adresse également au
besoins des applications [Link] décrit pas le style et la mise en forme du contenu, mais seulement
le contenu lui-même et sa signification.

Le créateur d'une page web peut utiliserCSSdéfinir l'apparence et la disposition des textes et autres
matériaux. Les meilleures pratiques actuelles en développement web encouragent l'utilisation deCSSplutôt que explicite
présentationnelHTML.
Cet article présente une introduction à HTML. Si vous vous êtes déjà demandé ce qui se passe derrière le
scènes dans votre navigateur web, cet article est l'endroit idéal pour commencer à apprendre.

Une brève histoire du HTML

À la fin des années 1980,Tim Berners-Leetravaillait comme physicien àCERN(l'européen
Organisation de recherche nucléaire). Il a conçu un moyen pour les scientifiques de partager des documents sur le

1
internet. Avant son invention, la communication via internet se limitait au texte brut, utilisant
des technologies telles que l'email,FTP(Protocole de Transfert de Fichiers), etUsenet-forums de discussion en ligne. Le
invention deHTMLa utilisé un modèle de contenu stocké sur un serveur central qui pouvait être
transféré et affiché sur un poste de travail local via un navigateur. Cela a simplifié l'accès au contenu et
activé l'affichage de contenu "riche" (tel que le formatage de texte sophistiqué et l'affichage de
images).

Qu'est-ce que le HTML ?

HTMLest un langage de balisage. Le mot balisage a été utilisé par des éditeurs qui ont balisé des manuscrits.
(généralement avec un crayon bleu) lors de la présentation d'instructions pour des révisions. Le terme reste en usage, bien que
avec un sens légèrement différent. Un langage de balisage en rapport avec les navigateurs est un langage avec
une syntaxe spécifique qui donne des instructions à un navigateur web sur la façon d'afficher une page. HTML
sépare "le contenu" (mots, images, audio, vidéo, etc.) de "la présentation" (la définition de
le type de contenu et les instructions sur la manière dont ce type de contenu doit être présenté).HTML
utilise un ensemble prédéfini deélémentspour identifier les types de contenu. Les éléments contiennent un ou plusieurs "étiquettes"
qui contiennent ou expriment du contenu.Étiquettessont entourés de chevrons, et la balise "de fermeture" (le
celui qui indique la fin du contenu) est précédé d'une barre oblique.
La plupart des navigateurs permettent à l'utilisateur de voir le HTML de n'importe quelle page web. En utilisant Firefox, par exemple, cliquez sur

sur l'élément de menu : Outils : Développeur Web : Source de la page pour voir le HTML d'une page. Les débutants trouveront
le code est presque illisible pour une page complexe, mais si vous passez un peu de temps à regarder le code pour un
page simple et en la comparant à la page que le code rend, vous développerez bientôt une idée claire
compréhension de certaines des exigences de syntaxe de base. Essayez la prochaine fois que vous ouvrez un "connexion"
page qui contient quelques éléments tels que la connexion sur [Link].

L'élément de paragraphe se compose de la balise d'ouverture "<p>" et de la balise de fermeture "</p>". Ce qui suit
l'exemple montre un paragraphe contenu dans l'élément de paragraphe HTML mais rappelez-vous que cela va
ne pas conserver plus d'un espace blanc :
<p>Vous commencez à apprendre le HTML.</p>

Lorsque ce contenu est affiché dans un navigateur web, il apparaît comme ceci :

Le navigateur utilise leétiquettescomme un indicateur de la façon d'afficher le contenu dans les balises.

Élémentsqui contiennent du contenu peuvent généralement également contenir d'autres éléments. Par exemple, l'accentuation
L'élément ("<em>") peut être intégré dans un élément de paragraphe pour ajouter de l'accent à un mot ou

<p>Vous <em>commencez</em> à apprendre HTML.</p>

Lorsqu'il est affiché, cela ressemble à :

2
Certainélémentsne contient pas d'autres éléments. Par exemple, l'imageétiquette<img> spécifie le
nom de fichier du contenu (une image) comme unattribut:
<img src="[Link]" alt="Smiley face" >

Souvent, une barre oblique est placée avant le chevron final pour indiquer la balise de fin d'un élément vide.
élément dansXHTML(ce qui est unXMLschéma qui implémente des éléments HTML).

Le reste de cet article approfondit les concepts introduits dans cette section.
Cependant, si vous voulez voirHTMLen action, consultezMozilla Thimble, qui est interactif
éditeur en ligne qui vous aide à apprendre à écrireHTMLmarkup. Voir aussiÉléments HTMLpour une liste
des éléments disponibles et une description de leur utilisation.

Éléments — les blocs de construction de base

HTMLest composé d'un ensemble deéléments. Les éléments définissent le sens sémantique de leur contenu.
Les éléments incluent tout ce qui se trouve entre deux éléments correspondantsétiquettes, y compris les balises elles-mêmes.
Par exemple, l'élément "<p>" indique un paragraphe ; l'élément "<img>" indique une image. Voir
leÉléments HTMLpage pour une liste complète.
Quelquesélémentsa une signification très précise, comme dans "c'est une image", "c'est un titre", ou "c'est un"
liste ordonnée." D'autres sont moins spécifiques, comme "c'est une section sur la page" ou "c'est une partie de la
D'autres sont utilisés pour des raisons techniques, comme "c'est une information d'identification pour la page".
cela ne devrait pas être affiché." Quoi qu'il en soit, d'une manière ou d'une autre, tous les éléments HTML ont un
valeur sémantique.
La plupart des éléments peuvent contenir d'autres éléments, formant une structure hiérarchique. Un très simple mais
une page web complète ressemble à ceci :

<html>
<corps>
<p> vous êtes au début de votre apprentissage de l'HTML</p>
</body>
</html>

Comme vous pouvez le voir, le <html>élémententourez le reste du document, et le <body>élément

entourer le contenu de la page. Cette structure est souvent perçue comme un arbre avec des branches (dans ce cas, le
<body> et <p> éléments) poussant à partir du tronc (<html>). Cette structure hiérarchique s'appelle
leDOMleModèle d'objet de document.

Étiquettes
HTMLLes documents sont écrits en texte brut. Ils peuvent être écrits dans n'importe quel éditeur de texte qui le permet.
contenu à sauvegarder en tant que texte brut, tel que Notepad, Notepad++ ou Sublime Text, mais la plupart du HTML
les auteurs préfèrent utiliser un éditeur spécialisé qui met en évidence la syntaxe et montre leDOM. Noms de balises
peut être écrit en majuscules ou en minuscules. Cependant, leW3C(le consortium mondial qui
maintient la norme HTML) recommande d'utiliser des lettres minuscules (etXHTMLrequiert des lettres minuscules).

3
HTML attribue un sens spécial à tout ce qui commence par le signe inférieur à (« < ») et se termine par
le signe supérieur à ("). Ce balisage est appelé unétiquette. Assurez-vous de fermer la balise, car certaines balises sont
fermé par défaut, alors que d'autres pourraient produire des erreurs inattendues si vous oubliez la balise de fin.

Voici un simple exemple :

<p>Ceci est un texte dans un paragraphe.</p>

Dans cet exemple, il y a une balise d'ouverture et une balise de fermeture. Les balises de fermeture sont les mêmes que la balise d'ouverture mais

contiennent également une barre oblique immédiatement après le signe inférieur à. La plupart des éléments en HTML
sont écrits en utilisant à la fois des balises d'ouverture et de fermeture. Les balises d'ouverture et de fermeture doivent être correctement imbriquées--que

les balises de fermeture doivent être écrites dans l'ordre inverse des balises d'ouverture. Un bon imbriquement est une règle.
cela doit être obéi pour écrire du code valide.
Ceci est un exemple de code valide :
<em>Je <strong>veux vraiment</strong> dire cela</em>.

Ceci est un exemple decode invalide :

Invalide : <em>Je <strong>veux vraiment dire cela</strong></em>.

Notez que dans l'exemple valide, la balise de fermeture de l'élément imbriqué est placée avant la fermeture.
balise pour l'élément dans lequel elle est imbriquée. Dans le code invalide, elles sont imbriquées.

Certainsélémentsne contiennent aucun contenu textuel ni d'autres éléments. Ce sont des éléments vides
et n'a pas besoin de balise de fermeture. Voici un exemple :

<img src="[Link]" alt="Visage souriant" >

Les éléments vides en mode XHTML sont généralement fermés à l'aide d'une barre oblique finale.

<img src="[Link]" alt="Visage souriant" />

Dans HTML, ce slash a une signification qui n'est pas implémentée dans Firefox, il ne devrait donc pas être utilisé.
Les éléments vides ne doivent pas être fermés en mode HTML.

Attributs
La balise d'ouverture peut contenir des informations supplémentaires, comme dans l'exemple précédent. De telles informations sont

appelé unattributLes attributs se composent généralement de 2 parties :

Un nom d'attribut
une valeur d'attribut

Quelques attributs ne peuvent avoir qu'une seule valeur. Ce sont des attributs booléens et peuvent être abrégés par
seulement en spécifiant le nom de l'attribut ou en laissant la valeur de l'attribut vide. Ainsi, les 3 suivants
les exemples ont le même sens :
<input required="required">

<input required="">

<input requis>

4
Les valeurs d'attribut qui consistent en un seul mot ou un nombre peuvent être écrites telles quelles, mais dès que
s'il y a deux chaînes de caractères ou plus dans la valeur, elles doivent être écrites entre des guillemets.
Les guillemets simples (') et les guillemets doubles (") sont autorisés. De nombreux développeurs préfèrent toujours utiliser

des citations pour rendre le code moins ambigu pour l'œil et éviter les erreurs. Ce qui suit est tel un
Erreur
<p class=foo bar> (Prenez garde, cela ne signifie probablement pas ce que vous pensez.)

Dans cet exemple, la valeur était supposée être « foo bar », mais comme il n'y avait pas de guillemets, le code est
interprété comme s'il avait été écrit comme ceci :
<p class="foo" bar="">

Références de caractères nommés

Références de caractères nommées (souvent appelées de manière informelle)entités) sont utilisés pour imprimer des caractères qui ont un
signification spéciale dansHTMLPar exemple, HTML interprète les symboles inférieur et supérieur.
comme délimiteurs de balises. Lorsque vous souhaitez afficher un symbole supérieur à dans le texte, vous pouvez utiliser un nom
référence de personnage. Il y a quatre références de personnage couramment nommées que l'on doit connaître :

> désigne le signe supérieur à (>)

< désigne le signe inférieur à (<)
& représente le signe ampersand (&)
" désigne les guillemets doubles (")

Il y abeaucoup d'autres entités, mais ces quatre sont les plus importants car ils représentent
caractères ayant une signification spéciale en HTML.

Doctype et commentaires
En plus deétiquettes, contenu texte, etentités, un document HTML doit contenir undoctype
déclaration comme première ligne. La déclaration d'application n'est pas une balise HTML ; c'est une instruction au
navigateur web à propos de quelle version de HTML la page est écrite.

Dans HTML 4.01, le doctype fait référence à unDTD(Définition de type de document) tel qu'il était basé surSGML.
Il existe trois déclarations de type de document différentes dans HTML 4.01.

HTML 4.01 Strict

Ce DTD contient tous les éléments et attributs HTML, mais N'INCLUT PAS les éléments de présentation ou
éléments obsolètes (comme la police). Les cadres ne sont pas autorisés.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//FR">

[Link]

HTML 4.01 Transitional

Ce DTD contient tous les éléments et attributs HTML, Y COMPRIS ceux de présentation et obsolètes
éléments (comme la police). Les ensembles de cadres ne sont pas autorisés.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR"

[Link]

5
HTML 4.01 Frameset
Ce DTD est équivalent à HTML 4.01 Transitional, mais permet l'utilisation de contenu frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//FR">
"[Link]

Dans HTML 5, il n'y a qu'une seule déclaration et elle est écrite comme ceci :

<!DOCTYPE html>

Le doctype a une histoire longue et complexe, mais pour l'instant, tout ce que vous devez savoir, c'est que ce doctype
indique au navigateur d'interpréter leHTMLetCSScode selonW3Cnormes et ne pas essayer de
faisons semblant que c'estInternet Explorerdes années 90. (Voirmode quirks.)
HTML dispose d'un mécanisme pour intégrer des commentaires qui ne sont pas affichés lorsque la page est rendue.
dans unnavigateurCeci est utile pour expliquer une section de balisage, laissant des notes pour d'autres personnes qui
peut fonctionner sur la page, ou pour laisser des rappels pour vous-même. Les commentaires HTML sont entourés de
symboles comme suit :
<!-- Ceci est un texte de commentaire -->

Un document complet mais petit

En rassemblant cela, voici un petit exemple d'unHTMLdocument. Vous pouvez copier ce code dans un
éditeur de texte, enregistrez-le sous [Link], et chargez-le dans unnavigateurAssurez-vous de l'enregistrer en utilisant le
encodage des caractères UTF-8. Comme ce document n'utilise aucun style, il aura l'air très simple, mais c'est seulement
un petit début.
<!DOCTYPE html>
<html lang="fr">
<tête>
Un RMScreenprint
</ tête>
<corps>
<h1>Titre principal dans mon document</h1>
Remarque qu'il s'agit de "h" + "1", pas "h" + les lettres "un"
<p>Regarde Maman, je code <abbr title="Hyper Text Markup
Langue">HTML</abbr>.</p>
</corps>
</html>

Dans cet article

1Résumé
[Link] actif
[Link]ère étape : un fichier
[Link]ème étape : Un navigateur web
[Link]ème étape : Expérimenter et apprendre
[Link]ée plus profonde
1Ce n'est pas une très belle page web
[Link] à deux pages
1. Liaison entre deux pages locales

6
 [Link] à un autre site web
[Link] étapes
Dans cet article, vous apprendrez comment créer une page web simple.

Conditions préalables : Vous devez avoirun éditeur de texteet

savoircomment ouvrir un fichier dans un navigateur.
Vous créerez une page web sur votre ordinateur que vous pourrez utiliser avec votre
Objectif :
navigateur.

Résumé
La page web la plus simple est juste unHTMLfichier. Juste un fichier HTML valide sur votre ordinateur et un web
les navigateurs sont les seules choses dont vous avez besoin. Nous verrons comment HTMLétiquettessont utilisés, et vous pourrez
affichez la page que vous créez dans votre navigateur.

Apprentissage actif
Tout d'abord, assurez-vous d'avoir un éditeur de texte avec lequel vous êtes à l'aise et un navigateur web ouvert
et en cours d'exécution. Pratiquement n'importe quel éditeur de texte fera l'affaire ; vous pouvez utiliser Notepad sur Windows ou TextEdit sur

le Mac, par exemple. Assurez-vous simplement que vous créez des fichiers texte brut et non des fichiers RTF ou Word
quand tu travailles.

Si vous utilisez TextEdit sur votre Mac, vous pouvez vous assurer que le fichier que vous éditez est un fichier au format texte.
en choisissant l'option "Texte brut" dans le menu "Format".
Première étape : Un fichier

Une seule page web se compose (au moins) d'un fichier HTML, alors nous allons commencer par en créer un.
votre éditeur de texte et créez un nouveau fichier texte, puis tapez quelque chose comme ça :

<!DOCTYPE html>
<html>
<tête>
Bonjour
</tête>
<corps>
Ceci est une page
une page simple
</body>
</html>

Vous pouvez modifier cela comme vous le souhaitez ; n'hésitez pas à ajouter ou à changer le texte dans le corps ou le titre, puis enregistrez-le.

fichier. Assurez-vous de donner au fichier un nom se terminant par l'extension ".html". Par exemple, vous pourriez
nommez-le "my_page.html".
Vous devriez maintenant avoir un fichier sur votre ordinateur ; il pourrait ressembler à ceci dans votre dossier (cela est évidemment
dépend de quel système d'exploitation vous utilisez) :

En ouvrant le fichier dans votre éditeur, cela pourrait ressembler à ceci (encore une fois, selon l'éditeur)
vous utilisez):

7
Rouvrir le fichier dans un éditeur nécessitera de glisser le fichier dans votre éditeur, de l'ouvrir en utilisant le
option "Ouvrir" dans le menu Fichier de l'éditeur, ou en cliquant avec le bouton droit sur le fichier et en choisissant de l'ouvrir dans votre

Éditeur de texte. Un double-clic sur le fichier l'ouvrira dans votre navigateur, ce qui est notre prochaine étape.

Deuxième étape : Un navigateur web

Dans votre explorateur de fichiers (comme l'Explorateur Windows, Fichiers sous Ubuntu ou Finder sur Mac), trouvez le
fichier que vous venez de créer et ouvrez-le avec votre navigateur. Vous pouvez le faire en le faisant glisser dessus.
l'icône du navigateur ou, généralement, en double-cliquant simplement sur le fichier. Cela devrait afficher le texte de la
Le fichier HTML que vous avez créé, et l'onglet doit avoir le titre de la page. Cela doit ressembler à quelque chose
comme ceci, bien que cela varie en fonction de votre plateforme et de votre navigateur :

Vous pouvez voir que l'onglet affiche le titre que vous avez spécifié, et que le contenu du corps de la page est
là — sans saut de ligne entre les deux lignes dans le texte. Intéressant.
Troisième étape : Expérimentez et apprenez
Essayez de retirer des parties du HTML et voyez ce qui se passe. Certains changements permettront toujours à la page de
afficher dans votre navigateur, et d'autres entraîneront des problèmes évidents avec les résultats. Cela est dû à
les navigateurs sont conçus pour comprendre que les gens sont susceptibles de faire certains types d'erreurs, et ils essaient
pour compenser certains d'entre eux.

La première chose que vous devriez remarquer est que la seule chose que vous voyez affichée à l'écran est le texte qui est
pas à l'intérieur des chevrons (également connus sous le nom de symboles plus grand que et moins que, mais nous appelons
les chevrons lorsqu'on parle de HTML). Tout ce qui se trouve à l'intérieur des chevrons estétiquettes; ceux-ci
représentez la structure ou le squelette de votre page web. C'est entre les balises que tout est affiché
le contenu apparaît.

Dans notre exemple, nous avons deux sections principales dans notre page HTML : un en-tête, contenu dans le
<tête> bloc, et un corps, contenu à l'intérieur du<corps>Le corps contient le texte affiché
dans la page.
Chaque balise a une signification spécifique et doit être utilisée en conséquence ; par exemple,title est utilisé pour
indiquez le titre de la page, qui n'a pas besoin d'être le même que le nom du fichier !). Remarquez également que

8
les balises peuvent se trouver à l'intérieur du contenu d'autres balises. Letitle est contenu à l'intérieur de la page
<tête>, par exemple.
Si vous souhaitez ajouter quelque chose comme une image à votre page, vous devez ajouter une balise pour l'image et
l'image elle-même. Par exemple :
<!DOCTYPE html>
<html>
<tête>
Salut là-bas
</tête>
<body>
Ceci est une page
une page simple
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
maintenant avec une licorne
</body>
</html>

Éditez votre fichier pour inclure le tag, comme ceci :

<img src="unicorn_pic.png" alt="Unicorn picture :)" />

Il peut aller n'importe où à l'intérieur du<corps>N'oubliez pas d'enregistrer votre page modifiée !

Puis mettez un fichier nommé "unicorn_pic.png" dans le même dossier que votre fichier HTML. Lorsque vous actualisez
votre fenêtre de navigateur (ou rouvrez le fichier HTML dans votre navigateur), vous devriez voir les changements
contenu, complet avec licorne ! (n'oubliez pas de sauvegarder votre page).

Remarque : Vous pouvez obtenir une copie de l'image de la licorne à utiliser dans vos expériences en cliquant avec le bouton droit ci-dessus.

sur l'image et en choisissant l'option "Enregistrer l'image sous..." dans le menu qui apparaît.

Les fichiers nécessaires au fonctionnement de cette page ressemblent maintenant à ceci sur votre bureau :

9
La page résultante devrait ressembler à cela dans votre navigateur :

Vous avez peut-être remarqué que le<img> l'étiquette ici aattributsqui fournissent des supplémentaires
informations nécessaires à la construction de l'objet demandé ; dans ce cas, il s'agit du nom du fichier image à
afficher et une chaîne de texte alternative qui est affichée si l'image ne peut pas être chargée.
Ceci est un exemple de la façon d'ajouter une image à votre page, mais vous pouvez utiliser des techniques similaires pour ajouter
musique, vidéos, et plus encore, le tout en utilisant rien de plus que le HTML.

Plongée plus profonde

Ce n'est pas une très belle page web

Comme vous l'avez probablement remarqué, cette page web n'est pas un miracle de design et de beauté. Cela est dû au fait que

HTML concerne tout le contenu et ce que ce contenu signifie (en termes de son contexte et le
relations entre les blocs de contenu), plutôt que sur le design.

CSSvous permet de faire briller le contenu, en ajoutant de la mise en page, des couleurs, des polices, et ainsi de suite. Pur
HTML est suffisamment bon pour créer des pages web simples, mais des pages plus complexes (ou même simples)
avec des designs attrayants) ont généralement besoin de CSS et possiblementJavaScript. HTML construit le contenu, CSS
les styles le contenu, et JavaScript rend le contenu dynamique.
Expérimentons un peu avec le CSS en rendant le texte du corps de la page bleu :
<!DOCTYPE html>
<html>
< tête >
Salut là-bas
</tête>
<body style="color:blue">
<p>Ceci est un texte bleu</p>

10
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</corps>
</html>

Notez l'addition dustyle attribuer à la page<corps>Cela spécifie le CSS à appliquer à

le texte du corps.

Vous voulez que le texte soit souligné ? Essayez d'ajouter "text-decoration: underline;" au corps :
<body style="color:blue; text-decoration: underline;"></body>

Vous voulez que le texte ait une taille spécifique ? Essayez d'ajouter "font-size: 42px;" comme ceci :

<body style="color:blue; text-decoration: underline; font-size: 42px;">

Le résultat final ressemble à ceci :

<html>
<tête>
Salut là-bas
</tête>
<corps>
<p style="color: blue; text-decoration: underline; font-size: 42px;">Ceci est un
texte gros souligné bleu </p>
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>

Et si vous enregistrez le contenu de la page avec votre éditeur, puis que vous actualisez votre navigateur, la page devrait
maintenant ressemble à ceci :

11
Grandir à deux pages
Lorsque vous naviguez sur le Web, vous tombez souvent surliensCe sont les moyens les plus utiles de naviguer
d'une page à l'autre. Puisque HTML concerne le contenu et que les liens sont une forme de contenu, vous pouvez
créer des liens entre les pages en utilisant uniquement HTML.

Liaison entre deux pages locales

Pour cet exercice, vous devrez créer deux fichiers HTML sur votre ordinateur (vous pouvez garder le
le précédent). Nous ajouterons un lien vers chaque page afin que vous puissiez rapidement passer d'une à l'autre.
eux.
Dans le premier fichier, vous pouvez conserver la même structure générale qu'auparavant. L'important est d'ajouter un
nouvelle étiquette<a>, comme ceci :
<!DOCTYPE html>
<html>
<tête>
Page 1 au contrôle au sol
</tête>
<body>
Ceci est la page 1.
<a href="[Link]" title="vers la page 2">Que se passe-t-il sur la page 2 ?</a>
</body>
</html>

La deuxième page devrait renvoyer à la première page :

12
<!DOCTYPE html>
<html>
<tête>
Page 2 :)
</tête>
<corps>
Ceci est une page 2.
Vous voulez revenir à la page 1 ? Cliquez
ici</a>
</body>
</html>

Remarque : Assurez-vous que les noms de fichiers spécifiés dans le<a> l'attribut href de la balise correspond aux noms des fichiers

vous avez créé sur votre ordinateur.

Vous pouvez maintenant naviguer entre les deux documents HTML. Ouvrez la page 1 dans votre navigateur et cliquez
le lien pour ouvrir la page 2, et vice versa. Vous pouvez également tester le bouton "précédent" dans votre navigateur ; il
vous ramènera à la dernière page que vous regardiez.
Votre gestionnaire de fichiers devrait avoir les deux fichiers HTML dans le même dossier, comme ceci :

La page 1 ressemble à ceci dans le navigateur :

Et la Page 2 ressemble à ceci dans le navigateur, après avoir cliqué sur le lien de la Page 1 :

Remarque : Le lien vers la page 1 est violet car le navigateur "sait" que nous l'avons déjà visitée.
la première page.
Si vous le souhaitez, vous pouvez essayer cela avec plus de deux pages, ou continuer à la section suivante pour prendre
ceci à un niveau supérieur.

Lien vers un autre site Web

Dans cet exercice, nous allons ajouter un lien au fichier HTML afin que le lecteur puisse rapidement accéder à certains
page utile sur le Web. Vous pouvez lier tout ce qui est disponible sur le Web public. Essayons de lier à
Wikipédia :

13
<!DOCTYPE html>
<html>
<tête>
Ma page
</head>
<body>
Un jour,...Les licornes sont géniales...À bientôt.
<a href="[Link] title="Page sur l'unicorne">
Wikipedia">Vous voulez en savoir plus sur les licornes ? Wikipedia est juste ici</a>
</corps>
</html>

Cela devrait ressembler plus ou moins à ceci dans le navigateur :

Survolez le lien avec le pointeur de la souris ; vous verrez letitre attribut affiché dans un survol
info-bulle. Cela peut être utilisé pour fournir plus d'informations sur le lien, afin que l'utilisateur puisse faire un
décision éclairée quant à savoir s'il faut cliquer dessus ou non.

Rappel : Lorsque vous éditez la page, n'oubliez pas de sauvegarder le fichier sur votre éditeur et de rafraîchir.
la page sur votre navigateur afin que vous puissiez voir les changements que vous avez effectués.

Prochaines étapes

Comment utiliser les balises HTMLIl

y a beaucoup de balises en HTML ; nous n'avons examiné que les bases.
Ici ! Vous trouverez plus de ressources sur ce qui est possible ici.
Anatomie d'une page webHTML a certaines règles et une page peut contenir beaucoup de contenu ; ceci
peut vous aider à comprendre des pages plus complexes, telles que celles utilisées sur certains des plus
sites populaires sur le Web !
Comprendre les liensNous avons utilisé des exemples très simples avec des liens ; cet article est pour vous
si vous voulez comprendre pourquoi "liens" est l'origine du nom "Web".
Utiliser des imagesetajout de l'audio et de la vidéosont utiles pour ajouter du contenu multimédia avec

HTML simple.

Dans cet article

1.Résumé
[Link] des balises
2.Éléments HTML
[Link] HTML
[Link] actif
[Link]ée plus profonde

14
 [Link] auto-fermants
2.Éléments spéciaux
[Link] du document HTML
4.Éléments superposés
5.Vérifiez votre HTML
[Link] étapes
Cet article traite des bases très fondamentales deHTML. Découvrez ce que sont les balises et comment les utiliser.

Vous devriez déjà savoirla différence entre une page web et un site webetcomment
Conditions préalables :
créer un document HTML simple.
Apprenez ce que sont les balises HTML et comment les utiliser aux endroits appropriés dans un HTML
Objectif :
document.

Résumé
HTML(HTML) est un langage descriptif utilisé pour structurer une page web.
contenu (par exemple, texte, images, liens).

Un document HTML est un document texte contenantétiquettes, qui doit être correctement utilisé pour décrire
la structure du document. Les balises indiquent au navigateur comment afficher le document et vous permettent de
intégrer divers médias (par exemple des images, des vidéos, du son) dans le texte.

Le navigateur n'affiche pas les balises elles-mêmes. Lorsque les utilisateurs visitent une page web, leur navigateur
analyse le document et interprète les balises afin d'afficher correctement la page web. Par exemple,
s'il y a un<img> l'étiquette dans le document, le navigateur charge l'image associée et l'affiche
cette image à la place de la balise HTML.

Syntaxe des balises

Les balises HTML suivent une syntaxe simple mais stricte :

crochet ouvrant (<)

Nom de l'étiquette

Attributs (facultatif). D'abord un espace, puis le nom de l'attribut, un signe égal (=) et une valeur
entre guillemets doubles ("")
Angle de fermeture (>)
Quelques exemples :

<article>
<meta charset="utf-8">
<img src="[Link]" alt="">

Éléments HTML
Les balises viennent généralement par paires. Une balise dans chaque paire est la balise d'ouverture, l'autre est la balise de fermeture. A
La balise de fermeture doit avoir un nom de balise identique à celui de sa balise d'ouverture correspondante. De plus, une balise de fermeture

doit inclure une barre oblique (/) entre la parenthèse d'ouverture et le nom de la balise. Par exemple, si <p>
est une balise d'ouverture, </p> est la balise de fermeture correspondante.

15
Un élément HTML se compose d'une balise d'ouverture, de la balise de fermeture correspondante et du texte dans.
entre

Vous pouvez voir pourquoi nous établissons ces conventions rigides pour les balises de fermeture, car vous pouvez imbriquer

éléments imbriqués
<p>
Voici le début d'un paragraphe
<strong>
Voici un texte important dans le paragraphe
</strong>
et le paragraphe se termine ici
</p>

Meilleure pratique : Strictement parlant, certaines balises de fermeture sont optionnelles. Cependant, si vous omettez les balises de fermeture,

vous êtes à la merci des règles imprévisibles de votre navigateur pour terminer un élément. Par conséquent,
Chaque fois que vous devez entourer des balises avec du texte, nous vous encourageons à toujours terminer l'élément explicitement.
une balise de fermeture.

balises HTML
HTML fournit presque140 étiquettesfournir au navigateur des sémantiques, ou des règles pour interpréter et
afficher le contenu. Parmi d'autres choses, les balises peuvent fournir des métadonnées pour le document HTML, définir
la police, mettre en évidence certaines phrases (par exemple avec des italiques), ajouter du contenu multimédia ou gérer des formulaires.

Voici quelques-unes des balises les plus courantes :

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Ce sont des balises d'en-tête qui définissent des titres, allant de h1 pour le titre le plus général.
toh6 pour le plus spécifique.
<p>
C'est la balise paragraphe, utilisée pour créer des paragraphes, qui sont généralement séparés par une ligne
pauses.
<a>
Cette balise est utilisée pour créer un lien vers des ressources externes telles qu'une autre page web, un e-mail, un
image, une section différente du document actuel, et ainsi de suite. Le<a> les balises englobent le texte
représentant le lien et lehref l'attribut est utilisé pour définir l'URL cible:<a
href="target_url">du texte que l'utilisateur verra</a>.
<img>
Cette balise intègre une image dans le document HTML. Voici un exemple de son utilisation :<img
[Link]

<div> et<span>

16
 Ces balises n'ont aucune signification spéciale. Elles sont utilisées pour créer des sections distinctes à l'intérieur
le document. Ils sont souvent utilisés pour le style et le script (ce dont nous discuterons plus tard)
sur).
<ul>, <ol> et<li>
Ces balises sont utilisées pour créer des listes. <ul> définit une liste non ordonnée, <ol> définit une liste ordonnée.
liste, et <li> définit un élément de liste dans un élément de liste. Voici <ul> en action :

<ul>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>

N'hésitez pas à explorer et à jouer avec ces balises. Plus tard, nous verrons ensemble comment intégrer des médias.
formulaires, tableaux, etc., mais n'hésitez pas à expérimenter avecn'importe lequel des tags HTML. Juste fais
assurez-vous d'utiliser les balises pertinentes, car leur sémantique compte. La sémantique HTML est énorme.
impacte la facilité avec laquelle les moteurs de recherche trouveront et pointeront vers votre page web.

Apprentissage actif
À déterminer

Plonger plus profondément

Nous avons donc examiné quelques règles de base et simples régissant les balises et éléments HTML. Mais de
Bien sûr, toutes les bonnes règles simples comportent des exceptions. Jetons un œil à celles-ci.

Balises auto-fermant
Comme nous l'avons vu, un élément HTML est une chaîne de texte avec ses balises d'encadrement. Cependant, certaines balises ne peuvent pas

texte entouré. Le<img> La balise est un exemple facile à comprendre. Le navigateur remplace le <img>
tag avec l'image demandée et jette tout le texte à l'intérieur de l'élément image. Pour cette raison, le
<img> est une balise auto-fermante qui définit un élément HTML à part entière sans balise de fermeture.
Voici un texte avant un élément d'image
<img src="[Link]" alt="">
Voici du texte après un élément d'image

Une balise auto-fermant peut avoir une syntaxe spéciale. Vous pouvez ajouter un caractère / avant la fermeture de la balise
angle crochet, mais ce n'est pas nécessaire :

<img src="[Link]" alt="">

contre
<img src="[Link]" alt="" />

Remarque : Parce qu'un seul tag définit parfois un élément HTML entier, les gens obtiennent souvent
confus entre les balises et les éléments, même pour les éléments nécessitant des balises d'ouverture et de fermeture.

Éléments spéciaux
En HTML, il y a deux éléments spéciaux qui ne sont pas constitués de balises. Ils sont essentiels et nous les aborderons.
en ce moment.

17
Type de document
Le doctype est une déclaration formelle, placée au tout début d'un document HTML, que le
Le document est un document HTML standard. Il ressemble à ceci :
<!DOCTYPE html>

HTML est maintenant plus formel qu'auparavant. Les navigateurs ont deux modes de rendu pour HTML.
des documents afin qu'ils puissent gérer les anciens documents hérités. Il y a un "mode particulier" pour les vieux documents
et le "mode standard" pour les nouveaux documents. Si le navigateur ne trouve pas le doctype à la
au début du document, le navigateur utilisera le mode quirk. Vous ne voulez pas cela, car le quirk
le mode n'est pas aussi fiable ou cohérent que le mode standard.
Meilleure pratique : Nous vous conseillons vivement d'ajouter un doctype à tous vos documents HTML pour vous assurer
le navigateur utilise le "mode standard".

Commentaires
Les commentaires sont des éléments très spéciaux. Ce sont des notes que vous mettez dans votre document HTML pour votre
besoins propres. Le navigateur ne montre pas les commentaires à votre utilisateur.

En HTML, les commentaires sont des textes enclavés entre <!-- et -->

translatedText

Ce texte s'affiche dans le navigateur.

Structure du document HTML

La structure de base d'un document HTML est définie par un ensemble de balises spéciales. Les éléments
défini par ces balises ne peut pas apparaître plus d'une fois dans un document donné, et n'a pas à apparaître à
tout (sauf pour l'élément titre obligatoire). Le navigateur fournira pour le manque d'impliqué
éléments.
<html>
Définit l'élément racine du document. Chaque document HTML contient uniquement un élément racine.
qui contient tous les autres éléments. Vous ne pouvez pas inclure d'éléments en dehors de l'élément racine.
<tête>
Définit l'élément 'head' du document. Le navigateur n'affiche pas cet élément, qui est uniquement
porte des métadonnées telles que le titre et la description. Les navigateurs peuvent utiliser les métadonnées pour améliorer le
l'expérience de l'utilisateur, et nous en discuterons plus tard.
<corps>
Définit l'élément body du document. Il n'y a qu'un seul élément body dans un HTML
document et il vient toujours après l'élément d'en-tête. Tout ce que l'utilisateur verra va dans le
élémentcorps.
title
Définit l'élément title du document. L'élément title est le seul élément HTML obligatoire.
et cela va à l'intérieur de l'élément head puisque le titre fait partie des métadonnées affichées dans divers
endroits (par exemple, l'onglet du navigateur ou dans le cadre d'un résultat de moteur de recherche).

Formel vs. valide

Ceci est le document HTML formel le plus simple que vous pouvez écrire :

<!DOCTYPE html>

18
<html>
<tête>
Un document HTML formel
</tête>
<corps>
<!-- Ajoutez du contenu ici -->
</body>
</html>

Si vous omettez tous les éléments optionnels, voici le document HTML valide le plus simple que vous pouvez écrire :

<!DOCTYPE html>
Ceci est un très petit document HTML

Meilleure pratique : Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement <head>-
matériau et <body>-matériau, il est facile de faire des erreurs qui pourraient entraîner des comportements imprévus du navigateur

comportement.

Éléments superposés
Pour conclure notre aperçu des balises HTML, il convient de mentionner que si les éléments peuvent être imbriqués, ils
ne peut pas se chevaucher.

Quels sont les éléments superposés ? Voici un exemple :

mon paragraphe commence ici

<strong>
un texte important
</p>

un deuxième paragraphe
</strong>
et l'élément fort s'est terminé juste au-dessus
</p>

Dans cet exemple, l'élément fort chevauche (il commence dans le premier paragraphe et se termine dans le
deuxième paragraphe). C'est la mauvaise façon de coder. Vous devriez écrire ceci :

<p>
mon paragraphe commence ici
<strong>
un texte important
</strong>

<p>
<strong>
un deuxième paragraphe
</strong>
avec un autre élément fort dedans
</p>

Dans un cas simple comme celui-ci, le navigateur peut généralement comprendre ce que vous voulez dire, mais le codage incorrect souvent

a des conséquences graves, surtout quand vous commencez à utiliserCSSouJavaScript(comme nous le ferons bientôt).
Supposons que nous utilisions un<div> étiquette, dire, plutôt que<p> et<strong> tags

<div>
mon paragraphe commence ici
<div>

19
un texte important

<div>
un deuxième paragraphe
</div>
et mon paragraphe se termine ici
</div>

Comment êtes-vous censé savoir s'il y a un chevauchement ou non ? C'est impossible parce que c'est quelque chose
code valide d'adivelement avec deux éléments imbriqués ! Faites donc attention à cela si vous ne voulez pas
comportement étrange avec vos futurs documents HTML.

Vérifiez votre HTML

Il est bon de confirmer que votre code HTML est correct. La meilleure façon de le faire est par le
Validateur HTML du W3C, un outil en ligne qui lit tout document HTML et vous dit si le
le document est entièrement conforme aux spécifications HTML. Si le code est invalide, le validateur fournit
informations sur les erreurs de codage.
Remarque : En raison de la façon dont ce validateur est conçu, si vous avez un document HTML plein d'erreurs,
corrigez toujours la première erreur et revalidez le document. Une seule erreur peut en créer beaucoup.
des erreurs suivantes, donc ne jamais se concentrer sur la dernière erreur, concentrez-vous toujours sur la première.

Prochaines étapes
Vous devriez maintenant être en mesure d'écrire votre premier document HTML complet et d'avoir un brouillon d'un
site web fonctionnel.

20