Partie I :
Langage HTML TP2
Objectif
Apprendre les notions de
base du langage HTML
Savoir créer une page web
dotée d'une mise en page et
d'une mise en forme
basiques
Définition
HTML
HyperText Markup Language
Langage de balisage hypertexte utilisé pour créer et
structurer le contenu d'une page web.
HyperText
Page web 1 Page web 2
texte
lien
L'hypertexte est un texte qui contient des liens
vers d'autres pages web
Markup Language
Bonjour Hello
marquer
*Bonjour* _Hello_
HTML est un « langage de balisage » qui sert à indiquer
au navigateur comment présenter la page web
Définition
Code HTML Navigateur Page web
<!DOCTYPE html>
<html>
<head>
<title> MyPage </title>
</head>
<body>
</body> (interpréteur)
</html>
HTML est un langage interprété
<!DOCTYPE html>
Elément
<html>
<head>
<title> MyPage </title> Elément
</head>
<body>
<p> La persévérance est la clé de la réussit </p>
</body>
</html>
Le code HTML est une composition d'éléments
Anatomie d'un élément HTML
<p> La persévérance est la clé de la réussit </p>
Contenu
Balise Ouvrante Balise Fermante
ÉLÉMENT P
Elément = Balise ouvrante + Contenu + Balise Fermante
Anatomie d’une balise
La balise ouvrante marque le début d'un élément HTML
nom de la balise
Anatomie d’une balise
La balise fermante indique la fin d’un élément
nom de la balise
Balises et affichage Web
Les navigateurs n'affichent pas les balises.
Les balises sont utilisées pour interpréter le contenu de la page.
<del> Im </del> possible
Impossible
Contenu
Balise Balise
Ouvrante Fermante
ÉLÉMENT DEL
Type de balises
Balises en paire Balises orpheline
La plupart des éléments HTML sont Certaines balises ne nécessitent pas
écrits avec des couples de balises de balise de fermeture
ouvrantes et fermantes
<p> </p> <br>
<title> </title> <hr>
<h1> </h1> <img>
Exemple de balise orpheline
Titre niveau 1
<h1> Contact info </h1>
Contact info
<hr> fsjes@umi.ac.ma
<p> fsjes@umi.ac.ma </p>
Notion d’Attribut
Les attributs sont utilisés pour personnaliser le comportement ou l'apparence
d'un élément
<a href = "www.fsjes.ma" > FSJES Meknès</a>
Nom de l’attribut Valeur de
l’attribut
ATTRIBUT
• Les attributs figurent sur la balise ouvrante de l'élément.
• Chaque attribut est composé de deux parties : un nom et une valeur
Attribut
Attribut 1 Attribut 2 Attribut 3
<img src="logo.jpg" width="200" height="100" >
200
100
Éléments imbriqués
Les balises doivent être imbriquées, sans se chevaucher :
<p> <p>
This is This is
<strong> <strong>
incorrect correct
</p> </strong>
</strong> </p>
Bonnes pratiques
Utiliser l'indentation pour mettre en évidence les blocs de code
<p> <p>
This is This is
<strong> <strong>
incorrect correct
</strong> </strong>
</p> </p>
Exercice 1 : Indentation et formatage d'un code HTML:
<body> <body>
<img src = "logo.jpg"> <img src = "logo.jpg">
<p> <p>
HTML is HTML is
<strong> <strong>
fun! fun!
</strong> </strong>
</p> </p>
</body> </body>
Résumé
HTML est un langage de balisage pour la création de page
web.
HTML est constitue d’une série d’éléments HTML.
Elément HTML = balise ouvrante + contenu + balise
fermante
Il existe deux types de balises : Balises en paire et balises
orphelines.
Les balises ouvrantes peuvent posséder des attributs
Structure minimale d’une
page HTML <!DOCTYPE html>
<html>
<head>
<title> Inscription </title>
<meta name=“” content=“” />
</head>
<body>
</body>
</html>
<!DOCTYPE html>
La première ligne à écrire dans Indique au navigateur la version
le code d’une page web de HTML utilisée (HTML 5)
<!DOCTYPE html> une façon polie de dire au navigateur:
'Salut, je vais te parler en langage HTML, alors sois prêt!'
<!DOCTYPE html>
<html>
<head>
</head>
<body> Mode standard
</body>
</html>
<html>
<head>
</head>
<body> Mode Quirks
</body>
</html>
<!DOCTYPE html>
Balise racine qui contient tout le
<html> contenu de la page web
<head>
<title> Inscription </title>
<meta name=“ ” content=“” />
</head>
<body>
<img src = “header_logo.jpg”>
</body>
</html>
<!DOCTYPE html>
<html>
Fournit des informations générales sur
<head> le document
<title> Inscription </title>
<meta charset="UTF-8" >
</head>
<body>
<img src = “header_logo.jpg”>
</body>
</html>
onglet
<!DOCTYPE html>
<html>
Le titre de la page
Inscription <head>
<title> Inscription </title>
<meta charset="UTF-8" >
</head>
<body>
<img src = “header_logo.jpg”>
</body>
</html>
<!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset="UTF-8" >
</head> La page web peut représenter
tous les caractères
<body>
<img src = “header_logo.jpg”>
</body>
</html>
<!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset=" " >
</head>
<body>
<h1>Mon séjour à Chefchaouen</h1>
</body>
</html>
<!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset="UTF-8" >
</head>
<body>
<h1>Mon séjour à Chefchaouen</h1>
</body>
</html>
<!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset="UTF-8" >
</head>
Il contient tout le contenu que vous
<body> souhaitez afficher aux visiteurs
<img src = “header_logo.jpg”>
</body>
</html>
Body
Arbre DOM
<!DOCTYPE html> (Document Object Model)
<html>
<head>
html
<title> MonSite: Inscription </title>
<meta charset=“utf-8">
</head>
<body> head body
<img src = “header_logo.jpg”>
<p> HTML is fun! </p>
</body> title meta img p
</html>
Exercice : Identifier et corriger les erreurs de syntaxe dans le code HTML
suivant :
< DOCTYPE html>
<html>
<head>
<title> La chasse aux erreurs </title>
<meta charset="utf-8"> </meta>
<head>
<body>
<img src = header_logo.jpg >
<p>
Hello world
<span>
HTML is fun!
</p>
</span>
</body bgcolor="blue">
Exercice : Identifier et corriger les erreurs de syntaxe dans le code HTML
suivant :
<!DOCTYPE html>
<html>
<head>
<title> La chasse aux erreurs </title>
<meta charset="utf-8"> </meta>
</head>
<body bgcolor="blue" >
<img src = "header_logo.jpg" >
<p>
Hello world
<span>
HTML is fun!
</p> <span>
</span> <p>
</body bgcolor="blue">
</html>
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
Titre niveau 1
Pragraphe
Titre niveau 2
Les titres
<h1> titre du premier niveau </h1>
<h2> titre du deuxième niveau </h2>
<h3> titre du troisième niveau </h3>
<h4> titre du quatrième niveau </h4>
<h5> titre du cinquième niveau </h5>
<h6> titre du sixième niveau </h6>
<h1>
<h2>
<h3>
Les paragraphes
<p>
L'échec n'est qu'une opportunité de recommencer avec
plus d'intelligence
</p>
Le retour à la ligne
<h1> Liberté </h1>
<p>
Sur mes cahiers d'écolier <br>
Sur mon pupitre et les arbres <br>
Sur le sable sur la neige <br>
J'écris ton nom <br> Retour à la ligne
</p>
<h1>
Overview of HTML
</h1>
<p>
hypertext Markup,…
</p>
<h2>
Elements
</h2>
Résumé
Il existe six niveau de titre de <h1> </h1> à <h6> </h6>,
à utiliser selon l’importance du titre.
Les paragraphes sont définis par les balises <p> </p>
Les sauts de ligne sont définis par la balise <br>
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
L’emphase forte
Pour donner à une partie du texte plus de poids ou
d'importance.
<p>
Le prix du produit est :
<strong>
100 DH Emphase forte
</strong>
</p>
L’emphase simple
La balise <em> est utilisée pour indiquer une emphase
légère, souvent représentée en italique
<p>
Le changement climatique est
<em>
un problème grave. Emphase simple
</em>
</p>
Mettre en gras et italique
<p>
Un très
<b> bon </b> Italique
Gras
livre et une belle
<i> découverte. </i>
</p>
Le souligné
<p>
<u>
Intelligence artificielle
</u> Souligné
(IA) est un domaine de l'informatique
</p>
Le barré
<p>
<del> Im </del>possible
</p> Barré
Exposant et indice
<p>
10m <sup> 3 </sup>
</p>
<p>
H <sub> 2 </sub> O
</p>
Résumé
On peut mettre en forme certains mots avec les
balises suivantes:
L’emphase forte :
L’emphase simple :
Gras :
Italique :
Souligné :
barré :
Exposant :
indice :
Exercice : Donner le code HTML
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
Insérer une images
<img src=" " alt=" " >
src : indique où se trouve l’image
(chemin) qu’on veut insérer.
<img> alt : signifie « texte alternatif » c’est
une courte description textuelle
de ce qu’elle représente
Les images
Donuts
<h1> Donuts </h1> Chemin vers l’image
<img src="img/donut.jpg"
alt="A delicious donuts">
Texte alternatif
Redimensionner une image
<img src="img/tiramisu.jpg" alt="Tiramisu aux fraises" width="200" height="100" >
Largeur Hauteur
recette.html
100 px
200 px
Résumé
<img src=" " alt=" " width=" " height=" " >
L’élément <img> est utilisé pour insérer une image dans une
page web.
L’attribut src est quasiment obligatoire.
L'attribut alt est également important car il fournit une
description textuelle de l'image.
Il est conseillé de renseigner les deux attributs width et height
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
Les listes en HTML
Les listes permettent d’insérer des énumérations sémantiques dans vos
pages web
Listes non ordonnées Listes ordonnées
(Unordered List ) (Ordered List )
Les éléments des listes non ordonnées Une liste dont les éléments sont
sont marqués avec des puces numérotés pour donner une idée d'ordre
Liste non ordonnée
Unordered List <ul>
Les éléments des listes non ordonnées
sont marqués avec des puces
<ul>
<li>Pommes</li>
<li>Poires</li>
<li>Ananas</li>
</ul>
Liste ordonnée
Ordered List
Une liste dont les éléments sont
numérotés pour donner une idée
d'ordre <ol>
<li> Pommes </li>
<li> Poires </li>
<li> Ananas </li>
</ol>
Résumé
Il existe deux types de listes : ordonnées et non
ordonnées.
Pour créer des listes, on doit utiliser la balise :
<ul> </ul> : liste à puces, non ordonnée
<ol> </ol> : liste ordonnée (chiffres)
A l’intérieur, on insère les éléments avec la balise <li>
pour chaque item
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
Lien Hypertexte
Les liens permettent de naviguer d'une page web à une autre.
<a href=" "> </a>
href : indique vers quelle page le
<a> </a> lien doit conduire.
Lien hypertexte
Lien absolu Lien relatif
Lien d'un site web à un autre Lien d'une page à une autre sur le même
site web
Lien absolu
www.google.com www.avito.ma
Accueil Contact us Accueil Contact us
Page d’accueil
Bienvenue sur notre site web
<a href = "https://www.avito.ma"> Vente et achat </a>
Lien relatif
index.html contact.html
Accueil Contact us
Page d’accueil
Bienvenue sur notre site web
<a href = "contact.html"> Contact us </a>
Lien hypertexte
index.html contact.html
Accueil Contact us
Page d’accueil
Bienvenue sur notre site web
<a href = " "> Accueil </a>
Résumé
Pour créer un lien, on utilise la balise : <a> (pour ancre
ou anchor en anglais).
Il faut lui ajouter un attribut, href, pour indiquer vers
quelle page le lien doit conduire
Exercice : Donner le code HTML
Index.html
apropos.html
produit.html
contact.html
Plan du cours
1. Titres et paragraphes
2. La mise en forme du texte
3. Les images
4. Les listes
5. Les liens hypertextes
6. Les Tableaux
7. Les formulaires
Les tableaux
Colonne
Produit Prix Quantité Prix * quantité
Cellule
Pro1 60 dh 2 120 dh
Pro2 10 dh 32 320 dh
Total 440 dh ligne
3 Cellules fusionnées
<table>
Pour insérer un tableau, il faut utiliser l’élément <table> </table>
Les tableaux
ligne
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Les tableaux
<table>
<tr>
<th> Produit </th> Produit Prix Quantité Prix * quantité
<th> Prix </th>
<th> Quantité </th>
<th> Prix*Quantité </th>
</tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Les tableaux
<table>
<tr>
<th> Produit </th>
<th> Prix </th>
<th> Quantité </th>
<th> Prix*Quantité </th>
</tr>
<tr>
Produit Prix Quantité Prix * quantité
<td> Pro1 </td>
Pro1 60 dh 2 120 dh
<td> 60 dh </td>
<td> 2 </td>
<td> 120 dh </td>
</tr>
<tr> </tr>
</table>
Les tableaux
<table>
<tr>
<th> Produit </th>
<th> Prix </th>
<th> Quantité </th>
<th> Prix*Quantité </th>
</tr>
… Fusionner 3 cellules Produit Prix Quantité Prix * quantité
horizontalement
<tr> Pro1 60 dh 2 120 dh
<td colspan = 3 > Total </td> Pro2 10 dh 32 320 dh
<td> 440 dh </td> Total 440 dh
</tr>
</table>
Résumé
L’élément <table> est utilisé pour insérer un tableau dans une
page web.
La structure interne des tableaux se crée avec des lignes.
vous pouvez insérer des lignes avec l’élément <tr>
Dans chaque ligne, vous pouvez insérer des cellules simples
avec l’élément <td> ou des cellules d’en-tête avec <th>
Vous pouvez fusionner des cellules, verticalement ou
horizontalement avec les attributs rowspan et colspan
Exercice : Donner le code HTML
