
Voici une petite introduction au html.
Il concerne la structure d'un texte et les balises que l'on peut utiliser dans un texte.
Les marqueurs : ils ne sont constitués que d'une seule balise.
Les conteneurs : ils sont constitués d'une balise de départ et d'une balise de fin. La balise de fin est constituée d'un slash (/).
Structure d'un document
Un document doit toujours être constitué d'un ensemble de
3 balises que je vais détailler. Voici le squelette :
<html>
<head>
</head>
<body>
</body>
</html>
La première balise est
<html>
. Elle se trouve à la première ligne et termine à la dernière ligne du fichier pour fermer la page.
Elle délimite l'ensemble du document HTML. Toutes les informations
doivent être écrites entre la balise
<html>
et la balise
</html>.
La deuxième balise est
<head>
. Placez ici les informations d'en-tête.
La dernière balise est
<body>
. Se trouvera ici tout le reste du document: le texte, les images, les vidéos etc.
Balise de texte
Pour indiquer le titre du document, celui qui est écrit dans la barre de titre de votre navigateur, il faut utiliser la balise
<title>
.
Qui se trouvera entre
<head></head>
<i>
Italique <b>
Caractères Gras <u>
Soulignement <strike>
Barré <sup>
Exposant <sub>
Indice <big>
caractères plus gros <cite>
courte citation <code>
code de programme <dfn>
définition <kbd>
(texte à saisir) <small>
caractères plus petits <strong>
marquer du texte <tt>
machine à écrireToutes ces balises sont de type conteneur.
La balise <i>
Italique
Pour écrire en italique, on utilise la balise
<i>
. Le texte doit être placé entre
<i>
et
</i>
qui doit etre placé lui même entre
<body>
</body>
.
<html>
<head>
<title>Ecrire en italique</title>
</head>
<body>
<i>Texte en italique</i>
</body>
</html>
EXEMPLE :
Texte en italiqueAperçuLa balise <b>
Caractères Gras
Pour écrire en caractères gras, on utilise la balise
<b>
.
Le texte doit être placé entre
<b>
et
</b>
.
<html>
<head>
<title>Ecrire en caractères gras</title>
</head>
<body>
<b>Texte en caractères gras</b>
</body>
</html>
EXEMPLE :
Texte en caractères grasAperçuLa balise <u>
Soulignement
Pour souligner, on utilise la balise
<u>
.
Le texte doit être placé entre
<u>
et
</u>
.
<html>
<head>
<title>Souligner</title>
</head>
<body>
<u>Texte souligné</u>
</body>
</html>
EXEMPLE :
Texte soulignéAperçuLa balise <strike>
Barré
Pour barrer du texte, on utilise
<strike>
.
Le texte doit être placé entre
<strike>
et
</strike>
.
<html>
<head>
<title>Barrer</title>
</head>
<body>
<strike>Texte barré</strike>
</body>
</html>
EXEMPLE :
Texte barréAperçuLa balise <sup>
Exposant
Pour écrire du texte en exposant, on utilise
<sup>
.
Le texte doit être placé entre
<sup>
et
</sup>
.
<html>
<head>
<title>Exposant</title>
</head>
<body>
<sup>Texte en exposant</sup>
</body>
</html>
EXEMPLE :
Texte en exposantAperçuLa balise <sub>
Indice
Pour écrire du texte en indice, on utilise
<sub>
.
Le texte doit être placé entre
<sub>
et
</sub>
.
<html>
<head>
<title>Indice</title>
</head>
<body>
<sub>Texte en indice</sub>
</body>
</html>
EXEMPLE :
Texte en indiceAperçuLa balise <big>
caractères plus gros
La balise
<big>
permet d'écrire du texte plus gros que le reste du texte.
Le texte doit être placé entre
<big>
et
</big>
.
<html>
<head>
<title>Ecrire plus gros</title>
</head>
<body>
<big>Texte plus gros</big>
</body>
</html>
EXEMPLE :
Texte plus grosAperçuLa balise <cite>
courte citation
La balise
<cite>
permet d'écrire une courte citation.
Le texte doit être placé entre
<cite>
et
</cite>
.
<html>
<head>
<title>Courte citation</title>
</head>
<body>
<cite>Citation</cite>
</body>
</html>
EXEMPLE :
CitationAperçuLa balise <code>
code de programme
La balise
<code>
est utilisée pour afficher du texte provenant d'un programme.
Le texte doit être placé entre
<code>
et
</code>
.
<html>
<head>
<title>Du code</title>
</head>
<body>
<code>Du code</code>
</body>
</html>
EXEMPLE :
Du code
AperçuLa balise <dfn>
définition
Pour écrire une définition, on utilise la balise
<dfn>
.
Le texte doit être placé entre
<dfn>
et
</dfn>
.
<html>
<head>
<title>Une Définition</title>
</head>
<body>
<dfn>Définition : ... </dfn>
</body>
</html>
EXEMPLE :
Définition : ... AperçuLa balise <kbd>
texte à saisir
La balise
<kbd>
est utilisée pour afficher du texte à saisir par le lecteur.
Le texte doit être placé entre
<kbd>
et
</kbd>
.
<html>
<head>
<title>Texte à saisir</title>
</head>
<body>
Saisissez le texte suivant : <kbd>Du texte à saisir</kbd>
</body>
</html>
EXEMPLE : Saisissez le texte suivant :
Texte à saisirAperçuLa balise <small>
caractères plus petits
La balise
<small>
permet d'écrire du texte plus petit que le reste du texte.
Le texte doit être placé entre
<small>
et
</small>
.
<html>
<head>
<title>Ecrire plus petit</title>
</head>
<body>
<small>Texte plus petit</small>
</body>
</html>
EXEMPLE :
Texte plus petitAperçuLa balise <strong>
marquer du texte
La balise
<strong>
permet de marquer du texte.
Le texte doit être placé entre
<strong>
et
</strong>
.
<html>
<head>
<title>Marquer un texte</title>
</head>
<body>
<strong>Texte marqué</strong>
</body>
</html>
EXEMPLE : Texte
marquéAperçuLa balise <tt>
machine à écrire
La balise
<tt>
est utilisée pour du texte comme une machine à écrire.
Le texte doit être placé entre
<tt>
et
</tt>
.
<html>
<head>
<title>Ecrire comme une Machine à écrire</title>
</head>
<body>
<tt>Texte écrit à la machine à écrire</tt>
</body>
</html>
EXEMPLE :
Texte écrit à la machine à écrireAperçu