HyperText Markup Language
HTML
I. Introduction
HTML est l’abréviation de HyperText Markup Language. En français langage de balisage
hypertexte. C’est un langage qui a été créé en 1991 par Tim Berners-Lee au sein du centre
européen de recherche nucléaire « CERN ». HTML est un langage de présentation et non pas
un langage de programmation comme on peut le croire. C’est un des piliers du World Wide
Web (www) qu’on appelle communément Web. On confond souvent le Web avec Internet qui
est un réseau mondial de réseaux. Internet connecte des millions d’ordinateurs « machines »
identifiées par des adresses IP. Une adresse est une succession de 4 chiffres de 0 à 255
séparés par des points par exemple 192.168.1.130. Pour faciliter la mémorisation des adresses
IP, on a créé les noms de domaines qui sont des ensembles de mots exemple : http://www.encg-
agadir.ac.ma. Les adresses Web sont appelées dans le langage technique URL acronyme de
« Uniform Resource Locator ». Le Web est une application d’Internet qui a été basée sur le
langage HTML, les URLs et le protocole http.
Requête http (envoi d’URL) Navigateur
Internet
Réponse (envoi code HTML)
Serveur du site Web
Domaine : encg-agadir.ac.ma Ordinateur Client
Adresse IP :104.28.5.101 Adresse IP : 192.168.10.45
Figure1 : Architecture des échanges sur le Web
Pour le codage d’un document on a besoin d’un simple éditeur de texte (exemple block note
sous Microsoft Windows). Pour visualiser le résultat on a besoin d’un navigateur (exemple :
Mozilla Firefox, Google Chrome, Safari,…). Le langage est un langage interprété côté client ça
veut dire que c’est le navigateur qui installé sur la machine de l’utilisateur qui permet
d’interpréter et visualiser le résultat du code HTML.
Le présent document est une initiation en HTML. Il contient les éléments de base pour
pouvoir apprendre le langage de programmation PHP.
II. Langage de balisage HyperText
a. Langage de balisage
HTML est un langage de balisage, il utilise des balises qui sont des unités syntaxiques
délimitant une séquence de caractères qu’on appelle des éléments (exemple : <body>). L’utilité
des balises est de pouvoir transférer à la fois le contenu et la structure du document.
Une balise HTML est un élément de base du système de codage HTML. Elle est composée
d’un ensemble de caractères délimités par les symboles < et > .
Exemple : la balise <p> qui présente un paragraphe.
On peut distinguer 3 types de balises ouvrante, fermante ou vide.
Type Notation Exemple
Ouvrante <element> <p> texte </p>
Fermante </element> <p> texte </p>
Vide <element/> <br/>
b. Langage HyperText
HTML est un langage Hypertexte parce qu’il utilise des liens qui permettent de relier
plusieurs documents qu’on appelle aussi pages. Ces liens sont nommés des liens Hypertextes
ou des hyperliens
III. Structure d’un document HTML
Un document HTML contient un ensemble d’éléments qui sont délimités par des balises. Les
éléments peuvent être accompagnés par des attributs qui les enrichissent. Le listing suivant
présente un exemple de documents HTML avec les éléments de base.
<!DOCTYPE html>
<html>
<head>
<title>
Exemple de HTML
</title>
</head>
<body>
Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.
<p>
Ceci est un paragraphe où il n’y a pas d’hyperlien.
</p>
</body>
</html>
Listing1 :structure de base d’un document HTML
a. Les éléments de base
html
Le premier élément d’un document html porte le nom « html ». Les balises html délimitent
tout le document c.à.d. que la balise ouvrante <html> indique le début du document et la
balise fermante </html> indique la fin.
head
Cet élément contient des éléments d’une très grande utilité même si la majorité de ses
éléments ne sont pas affichés. En effet, outre la balise « title » qui permet l’affichage du titre
du document, cette zone contient aussi des métadonnées qui permettent l’optimisation des
documents pour la recherche automatique via des moteurs de recherches. Les métadonnées
permettent d’indiquer la description, les mots clés, le nom de l’auteur etc.
body
Cet élément délimite le contenu de la page qui sera affiché effectivement par les navigateurs
sur une page web.
b. La composante textuelle en HTML
Le langage HTML permet le codage des différentes composantes qui peuvent être
rendues par les différents périphériques des ordinateurs, à savoir le texte, les sons, les
vidéos… On va commencer le tour d’horizon des balises HTML par celles qui sont liées
à la composante textuelle.
Paragraphes
Le paragraphe est un élément de base en traitement de texte. La balise d'un paragraphe est
<p>. Elle place une ligne vide au-dessus et en dessous du texte.
<p> Ce texte est un paragraphe en HTML</p>
Entêtes
Les entêtes HTML représentent les titres et les sous-titres d’un document. Il sont affichés en
gras et de taille plus grande que la taille du texte normal. Les entêtes sont numérotées comme
suit h1, h2, h3, h4, h5, h6. L’ordre de grandeur de la taille du texte des entêtes est
décroissant. Les h sont classées par ordre décroissant selon l’importance.
<h1>Titre d’une section</h1>
<h2>Titre d’une sous section</h2>
Saut de ligne
Un saut de ligne par un retour chariot dans le code source n’a aucun effet sur le rendu visuel
du navigateur. En effet, un saut de ligne est codé par la balise <br/> qui est différente des
autres balises ci-dessus, par le fait que cette balise ne nécessite pas de balise fermante. Il
s’agit d’une balise vide
Alignement du texte
L’alignement horizontal du texte peut être effectué grâce à l’attribut align qui a trois
valeurs
<P align= "LEFT"> Texte </P > justifie le texte à gauche
<P align="RIGHT" > Texte </P > justifie le texte à droite
<P align="CENTER"> Texte </P > centre le texte possibles :
Listes numérotées
Les listes numérotées ou ordonnées sont des listes avec l’affichage d’un numéro pour chaque
élément. Elles sont délimitées par <ol> dont chaque élément est limité par <il>
<OL>
<li>élément 1,</li>
<li>élément 2, </li>
<li> élément 3. </li>
</OL>
Listes à puces
Les listes désordonnées ou listes à puces sont des listes ou chaque élément est précédé par
symbole graphique. Elles sont délimitées par <ul>
<UL>
<li>élément 1, </li>
<li>élément 2, </li>
<li>élément 3. </li>
</UL>
Texte en gras
Pour afficher un texte en gras, on peut soit utiliser la balise <b> ou la balise <strong>
Texte italique
Pour afficher un texte en italique, on utilise la balise <i>
Couleur de texte
Pour changer la couleur par défaut du texte on utilise la balise <font> avec l’attribut color
dont la valeur est le nom de la couleur en anglais.
<font color=’’red ‘’>text en rouge</font>
On peut aussi utiliser un code de couleur RGB, codé en hexadécimal de 00 à FF. Sachant que
les couleurs optiques de bases sont le rouge, le vert et le bleu on peut écrire la couleur comme
une suite de 6 codes. Les 2 premiers pour le rouge, suivis de 2 pour le vert et enfin 2 pour le
bleu.
La balise font n’est plus utilisée dans HTML5, à la place de celle-ci on utilise un style avec du
code CSS.
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Violet #8000FF
Rouge #FF0000
Jaune #FFFF00
Gris clair #C0C0C0
Noir #000000
Taille de texte
Pour modifier la taille du texte on doit utiliser la balise font mais cette fois avec l’attribut size
dont les valeurs varient entre 1 et 7.
<font size=’’7’’> Ceci est texte avec une taille maximale</font>
Je rappelle là aussi que ce n’est pas valable pour la spécification HTML5.
Les caractères spéciaux
Les caractères spéciaux peuvent ne pas être bien affichés dans le navigateur. Pour éviter ce
genre de situations chaque caractère possède une abréviation (ENTITY) permettant de le
coder.
Espace
© ©
< <
> >
é é
è è
Les tableaux
Grace à la balise <table> avec une grille. Les contenus de chaque cellule sont saisis ligne par
ligne.
o La balise <tr> détermine les lignes
o La balise <td> les contenus des cellules.
o La balise <th> les entêtes des colonnes
c. Les tableaux
<table border="1">
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
<td> ligne 1, Colonne1</td>
<td> ligne 1, Colonne2</td>
<td> ligne 1, Colonné3 </td>
</tr>
<tr>
<td> ligne 2, Colonne1</td>
<td> ligne 2, Colonne2</td>
<td> ligne 2, Colonné3 </td>
</tr>
</table>
d. Les liens Hypertexte
HTML est un langage hypertexte qui permet en cliquant sur un mot généralement souligné
(ou une image), qu’on appelle lien hypertexte de passer vers :
o un autre endroit du document.
o un autre fichier HTML situé sur l’ordinateur.
o un autre ordinateur situé sur le Web.
La syntaxe de ces liens entre plusieurs pages est :
<A href="http://encg-agadir.ac.ma">cliquer sur ce lien</A>
Les liens hypertexte peuvent d’après le paragraphe ci-dessus être soit locaux ou externes.
1) Lien local
Les liens locaux correspondent à des fichiers sur le même ordinateur et dans ce cas on va
utiliser le même principe d’écriture des chemins absolu et relatifs que ceux du Dos sauf qu’il
faut remplacer les back-slaches « \ » par des slaches « / ».
<a href=’’fichier.html’’>cliquer ici</a>
<a href=’’.. /dossier1/dossier2/fichier.html’’>cliquer ici<a>
<a href=’’ /dossier3/dossier4/fichier.html’’>cliquer ici<a>
2) Lien Externe
Pour les liens externes il faut indiquer l’URL complète de la ressource cible.
<a href=’’http://www.monsite.com/index.html’’>cliquer ici<a>
e. Les images
On peut insérer des images dans un document HTML en indiquant le chemin de celles-ci
comme valeur de l’attribut src.
<img src=’’image1.jpg’’ width=’’100’’ height=’’300’’/>
attribut signification
Src URL de l’image à inclure
width Largeur de l’image
height Hauteur de l’image
f. Formulaires
Des formulaires peuvent être préparés afin de saisir des données et les traiter au niveau du
serveur.
Pour rédiger un questionnaire, il faut:
1) Établir une zone d'édition (appelée FORM) en utilisant la balise <FORM>.
2) Définir la méthode à employer pour transmettre au serveur l'information recueillie
dans les champs du formulaire.
3) Identifier l'emplacement et le nom du programme qui devra traiter l'information
recueillie.
4) Fournir, les arguments au programme de traitement des données.
<form action="exercice11.html" method="get">
<div>
<label for="nom">Nom :</label>
<input type="text" id="name" name="user_name">
<div>
</form>
