Prof : Mr FATAM
Technologies du WEB
D. HTML :
• Années 1990 : HTML est créé par Tim Berner-Lee au Centre
Européen de Recherche Nucléaire (CERN)
• 1995: HTML 2.0 normalisation par l’IETF (Internet Engineering
Task Force)
• 1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
• 1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
• 2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
• 2002-2006 : XHTML 2.0 en cours de spécification
• 2007- maintenant : HTML5
Étape 1: structure
Normalisation par le W3C (World Wide Web Consortium
[Link] depuis 1996.
HTML= Hyper Text Markup Language
Un langage à balises pour hypertextes
Un langage
De description de documents web, il permet de
structurer le contenu de ces documents.
À balises
La structure des documents est organisée à l’aide de
balises.
Pour hypertextes
Les documents contiennent des hyperliens
permettant un accès direct à une autre partie du
document.
1
Prof : Mr FATAM
Vocabulaire : éléments prédéfinis, identifiés par des balises
(ou tags)
Balise ouvrante : <element>
Balise fermante : </element>
<h1> <p> <strong> …… </strong></p></h1>
Balises auto-fermantes : <element/>
<br/> <img/>
HTML insensible à la casse : <eLEmENt> = <eLeMeNT>
Contenue d’un élément : le code qui se trouve entre ses
balises ouvrante et fermante.
<p> contenu de l’élément p </p>
Étape 2: Titre de la page :
La syntaxe définit : La structure du document
(un document est Un fichier d’extension .html)
Structure minimale d’un document
<! DOCTYPE html>
<html>
<head>
<title> Ma Première page HTML </title>
</head>
<body>
…
</body>
</html>
2
Prof : Mr FATAM
Étape 3: les Métas :
<meta charset ="utf-8">
<meta name="propriété" content="valeur">
Étape 4: Les titres :
Il existe six niveaux hiérarchiques de titres ("heading" en
anglais) définis par les éléments h1, h2, h3, h4, h5 et h6.
L'élément h1 représente un titre très important, h2 un titre
important, h3 un titre d'importance moyenne, etc.
<h1> Titre niveau 1</h1> Titre niveau 1
Titre niveau 1 <h2> Titre niveau 2</h2>
<h3> Titre niveau 3</h3> Titre niveau 1
Titre niveau 1 <h4> Titre niveau 4</h4>
<h5> Titre niveau 5</h5> Titre niveau 1
Titre niveau 1 <h6> Titre niveau 6</h6>
3
Prof : Mr FATAM
Étape 5: Les listes → Listes non-ordonnées
Utiles pour lister des éléments sans hiérarchie ni ordre logique
1) Pour créer une liste non-ordonnée, nous allons avoir besoin :
1.1. D’un élément <ul> <body>
(pour unordrered list ou <h1>Les listes</h1>
liste non-ordonnée) qui va <ul type="disc">
<li>Java</li>
représenter la liste en soi;
<li>Base de données</li>
1.2. D’éléments <li> (list
<li>HTML</li>
items ou éléments de la
</ul>
liste) représentant chaque </body>
élément de la liste;
1.3. Un attribut type de puce à pour valeur :
● disc
○ circle
□ square
Étape 5: Les listes → Listes ordonnées :
Vont être utiles lorsqu’il y aura une notion d’ordre ou de
progression logique entre les éléments de notre liste.
Pour créer une liste non-ordonnée, nous allons avoir besoin :
D’un élément <ol> (pour « ordered List », ou « liste
ordonnée » en français) qui va représenter la liste en soi
D’éléments <li> représentant chaque élément de la liste.
Un attribut type de puce à pour valeur :
1 → {1, 2, 3…}
A → {A, B, C…}
a → {a, b, c…}
I → {I, II, III…}
i → {i, ii, iii…}
4
Prof : Mr FATAM
Étape 5: Les listes → Listes de définitions
L'élément HTML <dl> représente une liste de descriptions sous la
forme d'une liste de paires associant des termes et leurs
descriptions ou définitions
Les items sont déclarés par les balises
<dt> pour le terme et <dd> pour la définition associée.
<dl>
<dt>Nom</dt>
<dd>Mohamed</dd>
<dt>naissance</dt>
<dd>2005</dd>
<dt>lieu</dt>
<dd>Rabat</dd>
<dt>Taille</dt>
<dd>1m50</dd>
</dl>
Étape 6: Lien hypertexte :
Un lien hypertexte est une partie de texte cliquable qui fait référence à un autre
document.
Pour créer des liens en HTML, nous allons utiliser l’élément <a> accompagné de
son attribut href (hypertext reference) qui va prendre comme valeur la cible du
lien (l’URI).
URL : [Link]
Fichier local avec chemin relatif : ./dossier/autre_page.html
Fichier local avec chemin absolu : /www/dossier/autre_page.html
Il existe deux types de liens :
Les liens internes (la référence se trouve dans le document actuel)
Les liens externes (la référence est un autre document).
Exemple :
<a href="[Link] Ma page </a>
<a href = "exemples/[Link]" target= "_blank" > Lien </a>
5
Prof : Mr FATAM
Étape 7: Les images :
La balise <img/> permet d’insérer une image
• Les attributs suivants sont obligatoires :
o src : l’URI où se situe l’image, va fonctionner de la même manière
que href
o alt : va contenir un texte alternatif décrivant l’image
o width : largeur
o height : hauteur
<img src="[Link]" alt="une photo" title="Photo HTML" />
Étape 8: Les tableaux :
Les tableaux en HTML doivent être utilisés pour organiser de façon logique des
données.
• Pour créer un tableau simple, nous allons avoir besoin de trois éléments HTML :
L’élément <table> va définir le tableau en soi ;
L’élément <tr>, pour « table row » ou « ligne de tableau », va nous servir à
introduire une nouvelle ligne dans notre tableau ;
L’élément <td>, pour « table data » ou « donnée de tableau », va nous
permettre
D’ajouter des cellules dans nos lignes.
• Pour créer une ligne d’en-tête, nous allons cette fois-ci devoir utiliser l’élément th,
pour « table Head » ou « en-tête du tableau » à la place de nos éléments td dans
notre première ligne.
<table border="1">
<tr>
<th>Line 1, Header 1</th>
<th>Line 1, Header 2</th>
</tr>
<tr>
<td>Line 2, Cell 1</td>
<td>Line 2, Cell 2</td>
</tr>
<tr>
<td>Line 3, Cell 1</td>
<td>Line 3, Cell 2</td>
</tr>
</table>
6
