Séance2 Cours HTML

Hyper Text Markup Language
Mme. Fatima zahra SALMAM

salmam.f@ucd.ac.ma
2019/2020
Hyper Text Markup Language (HTML)
• HTML est utilisé pour créer des documents web qui peuvent
inclure des textes, images, sons, vidéos, animations, liens
...etc.
• HTML est un langage interprété par le navigateur pour la
description et le formatage de la page
• Un navigateur Web est un programme qui permet de
visualiser les sites Web. Il permet spécialement d’interpréter
le code HTML.
• Il existe de nombreux navigateurs différents, les principaux
sont :
2
Hyper Text Markup Language (HTML)
• L’extension (suffixe) d’un document HTML est : .htm ou .html

• HTML utilise des balises (tags) pour indiquer la façon dont le
document doit être affiché.
• Une balise est un élément HTML qui est composé d'une balise
ouvrante (son nom encadré par des chevrons), un contenu, et
d'une balise fermante (son nom précédé d'un slash / encadré
par des chevrons).
<nombalise> Contenu </nombalise>
3
Historique
• Depuis les premiers jours du Web, il y a eu plusieurs versions de

HTML:
Version Année
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
• HTML5 est la dernière version du HTML, il a été finalisée le 28

octobre 2014
4
Exemple d’un document HTML
<!DOCTYPE html>
<html>
<head>
<title>Exemple 1</title>
</head>
Valeur de l’attribut bgcolor
Balise ouvrante
<body bgcolor="gray">
Attribut de la balise <body>
<p> Ceci est un exemple de page web </p>
 Contenu
Juste un commentaire (Non interpréter par le navigateur)
</body>
</html> Balise fermante
5
Exemple d’un document HTML
Navigateur
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="gray">
<p> Ceci est un exemple de
page web </p>

</body>
</html>
Document HTML
Résultat de son interprétation par
le navigateur
6
Structure d’un document HTML
• Un document HTML est dévisé en deux sections principaux:

 Heading : cotient des informations qui décrivent le
document, comme le titre. La section heading est indiquée
par les balises <HEAD> et </HEAD>
 Body : c’est l'endroit où le texte, les graphiques et autres
éléments du document Web sont placés. La section Body
est indiquée par les balises <BODY> et </ BODY >
7
• <!DOCTYPE html>
Pour dire au navigateur quel type et version du document à
interpréter
• <HTML> ... </HTML>
Marqueurs de début et de fin du document HTML
• <HEAD> ... </HEAD>
Ensemble des méta informations relatives au document
• <TITLE> Mon titre </TITLE>
Titre du document qui apparaît sur la barre de titre du
navigateur
8
• <META>
Paramètres utiles notamment pour l’indexation du document
par les moteurs de recherche
<meta name="keywords" content="mot1, mot2, mot3, ...">
<meta name="description" content="ceci est ma
description">
• <BODY> ... </BODY>
Corps du document
• <!– Mon commentaire -->
pour insérer des commentaires dans le document
9
Le Paragraphe <HEAD> …</HEAD>
• Il contient des informations relatives au document,

notamment sur les scripts et les feuilles de style. Ces
informations ne sont pas affichées par les navigateurs.
• Quelques balises qui peuvent y être intégrées :
<SCRIPT>
 Contient le code du programme qui sera appelé dans une balise de
<BODY>
<STYLE>
 Définit les styles de présentation associée à des balises
<TITLE>
 C'est le titre du document affiché dans la barre de titre du navigateur.
10
Les balises
• Il y a deux types de balises:

 Balises doubles: Ce sont des balises ouvrantes/fermantes, dans
lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise
fermante est identique à la balise ouvrante, à la différence qu'elle
contient un "/" pour indiquer à quel endroit on la ferme.
Exemple : <p> Ici du texte ou tout autre balise.</p>
 Balises simples: Ce sont des balises qui sont dites "vides", c'est-à-dire
qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont
pas besoin d'être fermées.
Exemple <br> : permet un retour à la ligne
11
Les balises
• Certaines balises ouvrantes peuvent contenir des attributs

paramétrables en leurs assignant une valeur entre guillemets.
<balise attributs=‘’ valeur ’’> Contenu </balise>
 Balise (tag en anglais): Un mot clé du langage associant une propriété
particulière au contenu de la balise
 Attributs ils ne sont pas toujours obligatoires. Ils définissent les valeurs
spécifiques à appliquer sur le contenu.
 Contenu : Il représente du texte, des images ou d’autres balises
 </balise> : C’est une étiquette précisant la fin de la balise.
12
Logiciels de développement
• N’importe quel éditeur de texte peut être utilisé pour créer

des documents HTML.
• Parmi les plus utilisé sous:
– Windows: Bloc-notes, Sublime Text, Notepad++, jEdit…
– Mac OS X: Sublime Text, jEdit, Smultron , TextWrangler…
– Linux: vim, Sublime Text, jEdit, Kate …
13
Tâche 1: Votre premier page html
• Lancez l’éditeur de texte Bloc-notes ou bien Notepad++ et

recopiez le code suivant :
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<p> Ceci est un exemple de page web </p>
</body>
</html>
14
Les attributs
• Les attributs se trouvent toujours dans la balise d’ouverture et

ils ne sont pas toujours obligatoires.
• Les attributs sont séparés par des espaces.
• Chaque attribut a une valeur : attribut="valeur"
• L’ordre des attributs n’a aucune importance
15
Les attributs
Attribut standard:
 id: identification (identité) nom UNIQUE de l'élément
 style: (style) code CSS
 bgcolor: couleur pour le fond
 background: Image de fond
 text: imposer une couleur pour le texte
 title: (titre) texte visible au survole de la souris
 lang: language (langue) abréviation de la langue (en, fr etc.)
16
Tâche2: utilisation des attributs
• Ajouter les attributs avec les valeurs suivantes à la balise

<body>:
 bgcolor="gray"
 text="red"
17
Balises de titres
• Les titres HTML sont définis avec les balises <h1> à <h6>.
<h1> définit le titre le plus important.
<h6> définit le titre le moins important.
18
Mise en forme du texte
  Commentaire ignoré par le navigateur

 <BR> retour à la ligne
 <BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un
retrait du texte)
 <CENTER>...</CENTER> Centre tout élément compris dans
la balise
 <DIV align=halign> ...</DIV> Aligne l'élément, halign peut
avoir les valeurs center, left, right, justify
 <P>...</P>
 <P align=halign>...</P> Paragraphe
19
Tâche 3
• Modifier votre document HTML et ajouter les deux titres

et le paragraphe suivants :
<h1> Université Chouaib Doukkali </h1>
<h2> Ecole Nationale des sciences appliquées</h2>
<p>
L’ENSAJ est une école qui forme des futures ingénieures
</p>
• Centrer les deux titres à l’aide de la balise <center>
20
Résultat de la Tâche 3
21
Mise en forme des caractères
 <B>...</B> Texte en gras

 <BIG>...</BIG> Agrandissement de la taille des caractères
 <EM>...</EM> Texte en italique
 <FONT color=colcod>...</FONT> Texte en couleur
 <FONT size=X>...</FONT> Taille des caractères (X a une valeur de 1à 7)
 <I>...</I> Texte en italique
 <PRE>...</PRE> Texte préformaté, affichage des espaces et des sauts
de ligne
 <SMALL>...</SMALL> Réduction de la taille des caractères
 <STRONG>...</STRONG> Mise en gras du texte
 <SUB>...</SUB> Texte en indice
 <SUP>...</SUP> Texte en exposant
 <U>...</U> Texte souligné
22
Tâche 4: Mise en forme des caractères
• Mettez en gras le premier mot « L’ENSAJ », puis en

italique, et après soulignez le.
23
Les listes
 <UL type=type> Liste non numérotée (dite à puces)

<LI>... </LI><LI>...</LI>... Eléments de liste
</UL> (type peut être "disc", "square" ou
"circle")
 <OL type=type> Liste numérotée

<LI>...</LI><LI>...</LI>... (type peut être "1" (1,2,3), "a" (a,b,c), "A"
</OL> (A;B;C), "I" (I,II,III,IV) ou "i" (i,ii,iii,iv))
 <DL> Liste de glossaire

<DT>...</DT> Terme de glossaire (sans retrait)
<DD>...</DD> </DL> Explication (DETAIL) du terme (avec
retrait)
24
Tâche 5: Les listes
• Ajouter les filières suivante, en utilisant les listes à puces,

numérotés, puis glossaire avec retrait (voir les figures
suivants)
25
Lignes de séparation
 <HR> trait horizontal (centré par défaut)

 <HR width="x%"> Largeur du trait en %
 <HR width=x> Largeur du trait en pixels
 <HR size=x> Hauteur du trait en pixels
 <HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite
 <HR noshade> Trait sans effet d'ombrage
26
Hyperliens
 <a href="http://...">...</a> Lien externe vers une page Web

 <a href="mailto:...">...</a> Lien vers une adresse Email
 <a href="fichier.htm">...</a> Lien vers la page locale
fichier.htm située dans le même
dossier
 <a name="xyz">...</a> Définition d'une ancre
 <a href="#xyz">...</a> Lien vers une ancre dans le
même fichier.
 <a href="file.html#xyz">...</a> Lien vers une ancre dans le

fichier file.html.
27
Tâche 6
• Ajouter une ligne horizontale après le premier titre

« Université Chouaib Doukkali », puis modifier les listes à
puces de sorte qu’elles deviennent des liens vers de
nouvelles pages: II2E.html, ISIC.html, G2E.html
28
Les images
• <IMG src=urlimg> Insertion d'une image au format gif, jpg

ou png
• <IMG ... width=x height=y> Mise à l'échelle de l'image en pixels
• <IMG ... border=x> Définition de la bordure d'une image
• <IMG ... alt=text> Texte alternatif lorsque l'image n'est pas
affichée
• <IMG ... align=valign> Alignement de l’image par rapport à la
ligne de texte.
• <IMG ... align=halign> habillement de l’image par le texte
(center n’est pas possible)
• <IMG ... hspace=x> Espacement horizontal entre l'image et le
texte
• <IMG ... vspace=y> Espacement vertical entre l'image et le
texte
29
Tâche 7
• Créer ces nouvelles pages: II2E.html, ISIC.html, G2E.html

• Ajouter l’image de ENSAJ à l’entête de chaque page.
• Ajouter un lien vers votre page principale.
30
Les tableaux
• Un tableau est conçu initialement pour afficher des données tabulaires et

non pour faire la présentation de la page.
• Un tableau HTML est défini avec la balise <table>.
• Chaque ligne du tableau est définie par la balise <tr>.
• Un entête du tableau est défini par la balise <th>.
• Par défaut, les entêtes des tableaux sont gras et centrés.
• Un élément du tableau est défini par la balise <td>.
Exemple 1:
<table>
<th> Titre 1</th> <th> Titre 2</th> <th> Titre 3</th>
<tr> <td>Cellule 1 </td> <td>Cellule 2 </td> <td>cellule 3 </td> </tr>
<tr> <td>Cellule 4 </td> <td>Cellule 5 </td> <td>cellule 6 </td> </tr>
</table>
31
Les tableaux
 <TABLE>...</TABLE> Définition d'un tableau

 <TABLE width="x%"> Largeur du tableau en %
 <TABLE width=x> Largeur du tableau en pixels
 <TABLE border=x> Largeur de la bordure
 <TABLE cellpadding=x> Espace entre la bordure et le
texte
 <TABLE cellspacing=x> Epaisseur du trait entre les
cellules
 <CAPTION> Légende d’un tableau
 <TH> …</TH> Ligne titre d'un tableau
 <TR>...</TR> Ligne du tableau
 <TD>...</TD> Cellule du tableau
 <TD bgcolor=colorcod> Couleur d'une cellule du tableau
32
Les tableaux
 <TD width="x%"> Largeur de colonne en %

 <TD width=x> Largeur de colonne en pixels
 <TD align=halign> Contenu centré ou aligné à
gauche/à droite
 <TD valign=valign> Contenu aligné verticalement en
haut, au milieu, en bas
 <TD colspan=x> Nombre de cellules à fusionner
horizontalement
 <TD rowspan=x> Nombre de cellules à fusionner
verticalement
33
Les tableaux
Exemple 2:
<table border=1>
<th> Titre 1</th> <th> Titre 2</th> <th> Titre 3</th>
<tr><td colspan=2>Cellule 1 et 2</td><td>cellule 3</td> </tr>
<tr> <td>Cellule 1 </td> <td>Cellule 1 </td> <td>cellule 3</td> </tr>
<caption>Mon tableau </caption>
</table>
34
Tâche 8
• Ajouter à votre page IITE.html le tableau ci-dessous:

• Donnez un nom au tableau en utilisant la balise <caption>.
35

Séance2 Cours HTML

Transféré par

Informations du document

Description :

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

Séance2 Cours HTML

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Hyper Text Markup Language

Mme. Fatima zahra SALMAM

• L’extension (suffixe) d’un document HTML est : .htm ou .html

• Depuis les premiers jours du Web, il y a eu plusieurs versions de

• HTML5 est la dernière version du HTML, il a été finalisée le 28

• Un document HTML est dévisé en deux sections principaux:

• Il contient des informations relatives au document,

• Il y a deux types de balises:

• Certaines balises ouvrantes peuvent contenir des attributs

 Contenu : Il représente du texte, des images ou d’autres balises

 </balise> : C’est une étiquette précisant la fin de la balise.

• N’importe quel éditeur de texte peut être utilisé pour créer

• Lancez l’éditeur de texte Bloc-notes ou bien Notepad++ et

<p> Ceci est un exemple de page web </p>

• Les attributs se trouvent toujours dans la balise d’ouverture et

• Ajouter les attributs avec les valeurs suivantes à la balise

  Commentaire ignoré par le navigateur

• Modifier votre document HTML et ajouter les deux titres

 <B>...</B> Texte en gras

• Mettez en gras le premier mot « L’ENSAJ », puis en

 <UL type=type> Liste non numérotée (dite à puces)

 <OL type=type> Liste numérotée

 <DL> Liste de glossaire

• Ajouter les filières suivante, en utilisant les listes à puces,

 <HR> trait horizontal (centré par défaut)

 <a href="http://...">...</a> Lien externe vers une page Web

 <a href="file.html#xyz">...</a> Lien vers une ancre dans le

• Ajouter une ligne horizontale après le premier titre

• <IMG src=urlimg> Insertion d'une image au format gif, jpg

• Créer ces nouvelles pages: II2E.html, ISIC.html, G2E.html

• Un tableau est conçu initialement pour afficher des données tabulaires et

 <TABLE>...</TABLE> Définition d'un tableau

 <TD width="x%"> Largeur de colonne en %

• Ajouter à votre page IITE.html le tableau ci-dessous:

Centres d'intérêt liés

Vous aimerez peut-être aussi