Cours HTML

Chapitre III :Développement WEB(HTML)
1. Définitions
2. Structure d’un document HTML
3. Formater le texte
4. Insérer des liens hypertexte
5. Insérer une image ou multimédia
6. Insérer des tableaux
7. Créer un formulaire
M. MARZOUQ
1. Définitions
Le langage HTML est un langage qui permet de créer une page web . Il est
l'abréviation de : Hyper Text Markup Language
Le langage HTML n'est pas un langage de programmation proprement dit

comme le c /c++ , vb, java …etc . C’est un ensemble d’éléments pour mettre
en forme des pages web.
133
M. MARZOUQ
1. Définitions
Le HTML sert principalement à:
 Afficher un contenu (texte, image, …)
 Créer des liens hypertexte et relier les pages entre elles
 Structurer un document (titre, paragraphe …)
 Indiquer au navigateur ce qu’il doit afficher
 Bien indexer votre page web dans les moteur de recherches (choix de
balise, mot-clé …)
133
M. MARZOUQ
1. Définitions
Pour identifier un élément d’une page Web on utilise :
une balise (Tag en anglais) qui se définit par un marqueur de début de
l’élément et un marqueur de fin de l’élément.
<balise ouvrante> Contenu </balise fermante>
élément
iLe HTML compte une centaine de balises . vous n’aurez pas besoin à les
connaitre toutes. Sachez simplement qu’elles existent.
Note: IL N’Y A PAS D’ESPACE entre le signe (chevrons) < et balise 134
M. MARZOUQ
1. Définitions
Les éléments peuvent avoir des attributs:

Les attributs contiennent des informations supplémentaires qui portent sur
l'élément et qu'on ne souhaite pas afficher avec le contenu.
Les attributs disposent en général d’une valeur.
<balise attribut="valeur">Contenu de la balise</balise>
135
M. MARZOUQ
1. Définitions
Un attribut doit toujours avoir :
 un espace entre l'attribut et le nom de l'élément ou l'attribut
précédent (s'il y a plusieurs attributs) ;
 un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
 des guillemets anglais (") pour encadrer la valeur de l'attribut.
Exemple:
<p align="center"> cette balise représente un paragraphe centré</p>
136
M. MARZOUQ
1. Définitions
Eléments vides: Certains éléments n'ont pas de contenu. Ces éléments sont
appelés éléments vides. Prenons l'élément <img>:
Les balises ouvrante et fermante sont remplacées par une balise auto-
fermante <img/>.
Exemple: <img src="image.png"/>
L'élément image n'embarque pas de contenu, son but est d'intégrer une
image dans la page HTML, à l'endroit où l'élément est placé.
137
M. MARZOUQ
1. Définitions
M. MARZOUQ
 <!DOCTYPE html>: Déclare le type du document pour le navigateur
 <html>: Définit le contenu HTML d'un document et nécessite un marqueur de fin.
Règle : <html>.....</html>
 <head>: Définit l'en-tête d'un document HTML et nécessite un marqueur de fin.
Règle : <head>.....</head>
138
M. MARZOUQ
 <meta charset="utf-8"/>: permet d'afficher sans aucun problème

pratiquement tous les symboles de toutes les langues.
 <title> :Définit le titre d'un document HTML et nécessite un marqueur de fin.
Règle : <title> ..... </title>
 <body> Définit le corps du document HTML et nécessite un marqueur de fin.
Règle : <body>.....</body>
139
M. MARZOUQ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title> Entête du document
</head>
<body>
 Corps du document
</body>
M. MARZOUQ
</html> 140
Les commentaires
Utiles pour les développeurs de pages web sur le fonctionnement interne de la

page web . On peut les ajouter n’importe où sur notre document HTML sous la
forme :
<! -- Mettez votre commentaire ici -->
141
M. MARZOUQ
1. Définitions
M. MARZOUQ
Un texte peut être représenté par différentes forme, on peut distinguer:
 Les titres
 Les paragraphes
 Les listes
142
M. MARZOUQ
Avec la balise <font> on peut jouer sur la taille, la taille relative, la couleur et
la police des caractères, en utilisant les attributs suivant:
Attribut Fonction
size=“valeur” la taille du texte
size=“+valeur” taille relative du texte
color =“green” Couleur relative
face=“Lucinda, Arial” La police du texte

143
M. MARZOUQ
Les couleurs en HTML sont souvent définies par 3 nombres hexadécimaux (selon le
codage RGB (Red Green Blue, en français : RVB) de la couleur choisie.
La syntaxe de codage d'une couleur en HTML est la suivante :
<font color="#RRVVBB">
RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF
pour les tons du Rouge, le Vert et le Bleu.
Ou une façon moins conventionnelle où on utilise le code couleur nommé.
<font color="red"> 144

M. MARZOUQ
Pour afficher les symboles <, >, &, " sans qu'ils ne soient interprétés comme des
délimiteurs de marqueurs, il faut utiliser les codes suivant :
&lt <
&gt >
&amp &
&quot ”
145
M. MARZOUQ
3. Formater le texte :Les titres
 Les éléments de titre permettent de définir certains textes comme des

titres ou sous-titres pour le contenu.
 Ils fonctionnent comme pour un livre : on a le titre du livre (le plus
important) puis les titres des différents chapitres et parfois des sous-
titres au sein de ces chapitres.
146
M. MARZOUQ
3. Formater le texte :Les titres
 HTML contient des éléments pour 6 niveaux de titres : <h1>jusqu’à<h6>.
<h1>Mon titre principal </h1>

<h2>Mon titre de section </h2>
<h3>Mon sous-titre </h3> Résultat
<h4>Mon sous-sous-titre </h4>
<h5>Mon sous-sous-sous-titre </h5>
<h6>Mon sous-sous...-titre</h6>
 La plupart du temps, 3-4 niveaux suffisent amplement :

147
M. MARZOUQ
3. Formater le texte :Les paragraphes
 l’élément <p> est utilisé pour contenir des paragraphes de texte. On
l’utilise fréquemment pour placer du texte sur une page :
<p> Ici, vous pouvez ajouter le texte choisi votre page WEB</p>
 <br>L'élément HTML <br> crée un saut de ligne (un retour chariot) dans le
texte.
Exemple : <p> Ici,<br>vous pouvez ajouter le texte choisi votre page WEB. </p>
148
M. MARZOUQ
3. Formater le texte :Les listes
Une grande partie du contenu sur le Web est présenté sous forme de listes.
HTML a donc des éléments utilisés pour représenter ces listes.
 HTML différencie plusieurs types de listes des:
 listes non ordonnées
 listes ordonnées
 listes imbriquée
149
M. MARZOUQ
listes non ordonnées
 sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance.
 la balise utilisée pour ces listes est l'élément <ul> (ul signifie unordered list
liste non-ordonnée en anglais).
 chaque élément d'une liste est balisé avec un élément <li> (list item).
<ul>
<li>Café</li> • Café
<li>Thé</li> • Thé
<li>Lait</li> • Lait
</ul>
150
M. MARZOUQ
listes ordonnées
 sont des listes pour lesquelles l'ordre des éléments est important .
 La balise utilisée pour ces listes est l'élément <ol> (ol signifie ordered list
liste ordonnée en anglais).
 Chaque élément d'une liste est balisé avec un élément <li> (list item).
<ol>
<li>Café</li> 1. Café
<li>Thé</li> 2. Thé
<li>Lait</li> 3. Lait
</ol>
151
M. MARZOUQ
listes imbriquées
Liste non ordonnée dans une Liste ordonnée dans une
autre liste non ordonnée autre liste ordonnée
• Elément 1 1. Elément 1
Liste ordonnée dans une Liste ordonnée dans une

liste non ordonnée liste non ordonnée
1. Elément 21 • Elément 21
2. Elément 22 • Elément 22
M. MARZOUQ 152
1. Définitions
M. MARZOUQ
Un lien hyper texte (ou hyperlien) est utilisé dans le WEB pour permettre le
passage d'une page web à une autre.
Il est caractérisé par:
 La référence de la cible : où on veut aller
 Elément pointeur ou lien : sur quoi on clique (avec une couleur distinguée)
• texte : Souligné et avec une couleur différente
• image
• Un curseur en forme de main apparaît lorsqu'on pointe dessus
153
M. MARZOUQ
Lien dans la même page
 Un hyperlien est défini par la balise <a></a>
<p id="haut">Texte en haut de la page </p>
<a href="#haut"> lien vers le texte cible en haut de la page </a>
Exemple
M. MARZOUQ 154
Lien local
 La page cible est sur la même machine

• La cible est un fichier dans le même dossier
<a href="page2.html">aller voir la page 2</a>
• La cible est un fichier dans un autre dossier
<a href=« chemin/page2.html">la page 2</a>
155
M. MARZOUQ
Lien global (absolu)
 La cible est n’importe où sur le net
<a href="http://www.google.com/"> accéder au site google</a>
Attention, si le lien contient des caractères spéciaux, il faut les remplacer par la
représentation des caractères spéciaux pour avoir une page web correctement écrite en
HTML.
Exemple
156
M. MARZOUQ
 Un lien pour télécharger un fichier
On indique le fichier à télécharger, et le téléchargement se lance :
<p><a href=" mon_fichier_a_telecharger.zip/"> Téléchargez le fichier </a></p>
157
M. MARZOUQ
1. Définitions
M. MARZOUQ
 HTML prend en charge différents fichiers multimédias: les images, les fichiers
audio et vidéo etc.
<audio> </audio> Cet élément est utilisé afin d'intégrer un contenu sonore dans un document.
<img/> Cet élément permet de représenter une image dans un document.
<video> </video>
Cet élément intègre un contenu vidéo dans un document.
158
M. MARZOUQ
une image
Les images sont très importantes dans une page internet. On insère une image en
utilisant la balise <img/>.
Deux attributs obligatoires:
 src: chemin du fichier image
 alt: texte alternatif à afficher si l’image ne peut pas être affichée
<img src="maison_compagne.jpg" alt="Photo maison de compagne" />
M. MARZOUQ 159
une image
On utilise l’attribut src selon la localisation de l’image dans le dossier utilisé.
Source locale Description

src="image1.jpg" L'image est située au même niveau que le fichier .html
de notre page web
src="../image1.jpg" L'image est située dans le niveau précédent le fichier .html
src=« chemin/image1.jpg" L'image est située dans un autre emplacement dans la machine
M. MARZOUQ 160
une image comme hyperlien
 Image dans un lien:

Il faut placer la balise <img> dans la balise lien <a>
 Ajouter une infobulle:
On utilise l’attribut title
<a href="URL page"><img src=« image.png" alt= " message alternatif" title= "titre de
l’image"/> </a>
M. MARZOUQ 161
1. Définitions
M. MARZOUQ
 Un tableau HTML est un ensemble de lignes elles même constituées de
cellules.
 Le nombre de cellules dans chaque ligne doit être le même, ou alors il est
nécessaire de spécifier des options de recouvrement.
 Pour créer un tableau on utilise la balise <table></table>.
 L’attribut border permet de tracer ou éliminer les bordures du tableau.
 L’attribut align permet d’aligner le texte à l’intérieur des cellules.
M. MARZOUQ 162
6. Insérer des tableaux Tableaux simples
 Les éléments constituants d’un tableau en HTML
 Légende : <caption> </caption>
 Définition d’une ligne : <tr> </tr> (Table Row)

 Définition d’une cellule d’en-tête ou titre des colonnes : <th> </th>
(Table Heading)
 Définition d’une cellule normale ou cellule de données : <td> </td>
(Table data)
M. MARZOUQ 163
6. Insérer des tableaux Tableaux simples
<table border="1">
<caption>Titre du tableau</caption>
<tr>
<th>Cellule 1.1</th>
<th>Cellule 1.2</th>
Titre du tableau
</tr>
<tr> Cellule 1.1 Cellule 1.2
<td>Cellule 2.1</td> Cellule 2.1 Cellule 2.2
<td>Cellule 2.2</td> Cellule 3.1 Cellule 3.2
</tr>
<tr>
<td>Cellule 3.1</td>
<td>Cellule 3.2</td>
</tr>
</table>
M. MARZOUQ 164
Tableaux à cellules recouvrantes
 Des cellules peuvent en recouvrir d'autres, que ce soit en largeur ou en

hauteur.
 Pour qu'une cellule occupe n cellules vers la fin de la ligne, on utilise
l'attribut colspan="n".
 Pour qu'une cellule occupe n cellules vers la fin de la colonne, on utilise
l'attribut rowspan="n".
M. MARZOUQ 165
Tableaux à cellules recouvrantes
<table border="1">
<tr>
<td rowspan="2">Cellule 1</td>
<td>Cellule 2</td> Cellule 1 Cellule 2
</tr>
<tr> Cellule 3
<td>Cellule 3</td> Cellule 4
</tr>
<tr>
<td colspan="2">Cellule 4</td>
</tr>
</table>
M. MARZOUQ 166
1. Définitions
M. MARZOUQ
7. Création d’un formulaire
Les formulaires HTML sont un des vecteurs principaux d'interaction entre un
utilisateur et un site web ou une application. Ils permettent à l'utilisateur
d'envoyer des données au site web.
Un formulaire HTML est composé d'un ou plusieurs widgets. Ces widgets
peuvent être :
 des zones de texte (sur une seule ligne ou plusieurs lignes),
 des boîtes à sélection,
 des boutons radio,
M. MARZOUQ
 des cases à cocher, etcu des boutons radio. 167
Boutons radio Boite à sélection
Zone de texte
M. MARZOUQ 169
Pour définir un formulaire en HTML, nous allons utiliser l’élément <form> qui
signifie « formulaire » en anglais.
Cet élément form va avoir besoin de deux attributs pour fonctionner normalement,
à savoir les attributs: method et action.
Notre formulaire sera sous la forme:
<form method="valeur" action ="valeur ">
</form>
M. MARZOUQ 170
L’attribut method va indiquer comment doivent être envoyées les données saisies
par l’utilisateur.
Cet attribut peut prendre deux valeurs : get et post.
get:
 envoie les informations entrées par l’utilisateur via l’URL ,
 limité dans la quantité de données pouvant être envoyées
 les données vont être envoyées en clair
M. MARZOUQ 171
post:
 envoie les informations entrées en post-transaction (via serveur),
 Aucune limités dans la quantité de données pouvant être
envoyées
 les données envoyées ne sont visible par personne durant l’envoi
(méthode sécurisée).
M. MARZOUQ 172
 L’attribut action va servir à préciser l’adresse relative de la page dans

laquelle les données doivent être traitées. Ce sera généralement un fichier
PHP.
 Nous n’allons pas créer ce fichier dans ce cours, mais je vous propose pour les
exemples suivants de faire comme si ce fichier existait et de l’appeler
« traitement.php ».
M. MARZOUQ 173
7. Création d’un formulaire: Les éléments HTML d’un formulaire
 L’élément input est l’élément le plus utilisé dans les formulaires HTML.
 Il permet de créer la majorité des champs de notre formulaire.
 L’élément input se présente sous la forme d’une balise orpheline (qui n’a pas
besoin d’une balise de fermeture)
 possède un attribut type auquel on va pouvoir donner de nombreuses
valeurs.
M. MARZOUQ 175
Les éléments de formulaires sont répartis en 3 classes :
 input :Champs de saisie de texte et différents types de boutons
 select: Listes (menus déroulants et ascenseurs)
 textarea: Zone de saisie de texte libre
M. MARZOUQ 176
l’élément input
En changeant la valeur de l’attribut type de l’élément input, nous allons changer le
type de données qui vont pouvoir être envoyées via notre élément input.
Il permet par exemple pouvoir créer :
M. MARZOUQ 177
l’élément input
 un champ de saisie de texte mono-ligne
<input type="text" name="nom_du_champ" size="taille"
maxlength="taille_maximum" value="texte_par_défaut">
Texte par défaut
M. MARZOUQ 178
l’élément input
 un champ contenant des zones d’options : Boutton radio
Premier choix<input type= « radio" name="choix1" value="Premier choix" > <br>
Deuxième choix<input type= « radio" name="choix2" value="Deuxième choix"><br>
Troisième choix<input type= « radio" name="choix3" value="Troisième choix"><br>
Premier choix
Deuxième choix
Troisième choix
M. MARZOUQ 179
l’élément input
 un champ contenant des zones d’options
Premier choix<input type= "checkbox" name="choix1" value="Premier choix" > <br>
Deuxième choix<input type= "checkbox" name="choix2" value="Deuxième choix"><br>
Troisième choix<input type= "checkbox" name="choix3" value="Troisième choix"><br>
Premier choix
Deuxième choix
Troisième choix
M. MARZOUQ 180
l’élément input
 le bouton permettant d’entrer un mot de passe

<input type= "password" name="Pass " >
M. MARZOUQ 181
l’élément input
 les boutons permettant l’envoi ou l’annulation de l’envoi des données du

formulaire rentrées par l’utilisateur.
<input type= "submit" value=" Envoyer " >
<input type= "reset" value="Annuler" >
Envoyer Annuler
M. MARZOUQ 182
L’élément select
 Permet de selectionner un choix parmi une liste
<select name="menu fruit" >

<option> Pomme Pomme
<option> Banane
<option> Orange
<option> Fraise
</select>
M. MARZOUQ 183
L’élément select
 Permet de sélectionner un choix parmi une liste
<select name="menu fruit" size=4 >

<option> Pomme Pomme
Banane
<option> Banane Orange
Fraise
<option> Orange
<option> Fraise
</select>
M. MARZOUQ 184
L’élément Textarea
 Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs
rows et cols.
<textarea name= "commentaire" rows=20 cols=40 >

</textarea >
M. MARZOUQ 185

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Informations du document

Titre original

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é ?

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre III :Développement WEB(HTML)

Le langage HTML n'est pas un langage de programmation proprement dit

<balise ouvrante> Contenu </balise fermante>

Les éléments peuvent avoir des attributs:

Les attributs disposent en général d’une valeur.

<balise attribut="valeur">Contenu de la balise</balise>

Exemple: <img src="image.png"/>

 <html>: Définit le contenu HTML d'un document et nécessite un marqueur de fin.

 <meta charset="utf-8"/>: permet d'afficher sans aucun problème

Utiles pour les développeurs de pages web sur le fonctionnement interne de la

face=“Lucinda, Arial” La police du texte

Ou une façon moins conventionnelle où on utilise le code couleur nommé.

<font color="red"> 144

 Les éléments de titre permettent de définir certains textes comme des

<h1>Mon titre principal </h1>

 La plupart du temps, 3-4 niveaux suffisent amplement :

Liste ordonnée dans une Liste ordonnée dans une

 Un hyperlien est défini par la balise <a></a>

<p id="haut">Texte en haut de la page </p>

<a href="#haut"> lien vers le texte cible en haut de la page </a>

 La page cible est sur la même machine

<a href="page2.html">aller voir la page 2</a>

• La cible est un fichier dans un autre dossier

<a href=« chemin/page2.html">la page 2</a>

 La cible est n’importe où sur le net

<a href="http://www.google.com/"> accéder au site google</a>

<p><a href=" mon_fichier_a_telecharger.zip/"> Téléchargez le fichier </a></p>

<img/> Cet élément permet de représenter une image dans un document.

<img src="maison_compagne.jpg" alt="Photo maison de compagne" />

Source locale Description

 Image dans un lien:

 Les éléments constituants d’un tableau en HTML

 Légende : <caption> </caption>

 Définition d’une ligne : <tr> </tr> (Table Row)

 Des cellules peuvent en recouvrir d'autres, que ce soit en largeur ou en

Boutons radio Boite à sélection

 L’attribut action va servir à préciser l’adresse relative de la page dans

 Il permet de créer la majorité des champs de notre formulaire.

besoin d’une balise de fermeture)

 possède un attribut type auquel on va pouvoir donner de nombreuses

 input :Champs de saisie de texte et différents types de boutons

 select: Listes (menus déroulants et ascenseurs)

 textarea: Zone de saisie de texte libre

En changeant la valeur de l’attribut type de l’élément input, nous allons changer le

Il permet par exemple pouvoir créer :

Texte par défaut

 le bouton permettant d’entrer un mot de passe

 les boutons permettant l’envoi ou l’annulation de l’envoi des données du

<select name="menu fruit" >

<select name="menu fruit" size=4 >

<textarea name= "commentaire" rows=20 cols=40 >

Vous aimerez peut-être aussi