[TITRE DU DOCUMENT]
F. DIALLO
Code
Les
Essentiels
du HTML –
Version 1
Pour les balises qui vont par paire, seules la balise ouvrante est indiquée. La balise
fermante correspondante comporte un / en plus, après son premier chevron. Ex :
<p>Ceci est un paragraphe</p>
Les balises auto-fermantes sont repérables à leur fin en />.
[TITRE DU DOCUMENT]
F. DIALLO
Pour les balises se plaçant dans le <body>, deux types de balises existent :
● •
● les balises blocs : elles créées leur propre bloc de contenu, avec un saut-de-
ligne avant et après elles.
● •
● les balises inlines : elles ne créées par leur propre bloc de contenu, elles
affectent ce qui se trouve entre elles sans produire de saut-de-lignes.
Les commentaires s’écrivent entre les symboles <!-- et -->.
A. Balises de Structure de
la Page-Web
1. Structure générale
<!DOCTYPE> : Version du (X)HTML
<html> : Document HTML
<head> : Informations de la page
<body> : Contenu de la page
2. Description de la page
Ces balises sont à mettre dans le <header>
<title> : Titre de la page
<meta charset="utf-8" /> : Gestion de l’encodage
<link href="style.css" rel="stylesheet" type="text/css" /> :
Liaison avec le fichier CSS
3. Code de base d’une page web
<!DOCTYPE html>
<html>
[TITRE DU DOCUMENT]
F. DIALLO
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>
B. Identifiants et Classes
1. Identifiant
Un identifiant unique peut être attribué à chaque balise HTML. Cet identifiant permettra
de sélectionner la balise à l’intérieur de la page.
L’identifiant se déclare en ajoutant l’attribut id à une balise, dans la balise ouvrante.
Si le nom choisi comme identifiant comporte plusieurs mots, on les sépare par des
tirets -.
<!-- Exemple -->
[TITRE DU DOCUMENT]
F. DIALLO
<h1 id="main-titre">Page sur le HTML</h1>
<p id="first-paragraph">Le HTML est un langage informatique.</p>
2. Classe
Une ou plusieurs classes peuvent être attribuées à chaque balise HTML. Les classes
permettent d’attribuer des styles-CSS particulier à une balise.
Plusieurs balises peuvent partager la même classe.
La classe se déclare en ajoutant l’attribut class à une balise, dans la balise ouvrante.
Si le nom choisi comme classe comporte plusieurs mots, on les sépare par des tirets
-. Si une balise comporte plusieurs classes, on sépare le nom de chaque classe par
un espace
<!-- Exemple -->
<p class="lang">Le HTML est un langage informatique.</p>
<p class="lang">Le HTML est un langage informatique.</p>
<p class="lang prog">Le PHP est un langage informatique.</p>
<p class="lang prog">Le JavaScript est un langage
informatique.</p>
C. Balises de Contenu
Ces balises sont à mettre dans le <body>
1. Mise en Forme du Texte
Balises blocs
<h1>, <h2>, <h3>, <h4> : Titres
<p> : Paragraphe
Balises inline
<strong> : Texte important, en gras, utilisé pour l’indexation
[TITRE DU DOCUMENT]
F. DIALLO
<b> : Texte en gras
<em> : Texte important, en italique, utilisé pour l’indexation
<i> : Texte en italique
<mark> : Surlignage
<br /> : Retour à la ligne
2. Liens
<a href="" > : Lien vers une page-web ou une ressource. Entre les guillemets de
href, on peut mettre un chemin :
● •
● relatif, qui pointe vers l’endroit où se trouve la page-web ou la ressource
ciblée, sur le disque-dur/SSD du PC/Mac, par rapport à la page contenant le
lien. Les symboles .. permettent de remonter dans l’arborescence des
fichiers si besoin.
● •
● url, qui pointe vers l’adresse URL d’une page-web ou d’une ressource en
ligne
<!-- Exemples -->
<a href="page2.html">Lien relatif vers une page du même site,
située dans le même dossier que cette page.</a>
<a href="course/web.html">Lien relatif vers une page du même
site, située dans un dossier nommée course. Le dossier course se
trouve dans le même dossier que cette page.</a>
<a href="../accueil.html">Lien relatif vers une page du même
site, située un niveau plus dans l’arborescence du site que
cette page.</a>
<a href="https://link.nairod.eu/">Lien vers une page en ligne,
sur un autre site-web</a>
Il est aussi possible de faire un lien vers une ancre, en ajoutant #, puis l’id de la balise
servant d’ancre, à la fin du chemin. Si on écrit uniquement #, puis l’id de la balise
servant d’ancre, le lien pointera vers un id se trouvant dans la même page que lui.
<!-- Exemple -->
6
7
8
9
1
/
9
100%
