Cours HTML

Hyper Text Markup Language
Pr ERRATTAHI Rahhal
[email protected]
2020/2021
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

 <I>...</I> Texte en italique
 <BIG>...</BIG> Agrandissement de la taille des caractères
 <FONT color=colcod>...</FONT> Texte en couleur
 <FONT size=X>...</FONT> Taille des caractères (X a une valeur de 1à 7)
 <EM>...</EM> 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
Les formulaires
• Un formulaire est une fiche que l'utilisateur peut remplir; ces

informations ainsi saisies sont traitées par un serveur.
• Un formulaire débute par la balise <form> et finit par </form>
<form name="myform" id="myform" action="page"
method=“post" > ... Objets… </form>
 name ou id permettent d'accéder par script à son contenu.
 action: indique la page à laquelle on envoie les données du
formulaire. Si cet attribut est vide, c'est la page qui
contient le formulaire.
36
Les formulaires
 method: permet de définir la méthode de transfert des

données vers le serveur. Les deux valeurs possibles sont
GET et POST
GET: ajoute les données à l'URL, la taille d'une URL est limitée
par le serveur, souvent un peu plus de 2000 caractères
POST: n'a pas de taille limite, Les données du formulaire
n'apparaissent pas dans l'URL. En conséquence, il n'est pas
possible de récupérer directement les données en JavaScript ,
il faut ajouter du code PHP dans la page.
37
Les objets de formulaire
 Bouton simple:
<input type="button" onclick="myfunction()">
S'il s'agit d'un bouton simple et non pas d'un bouton d'envoi, il faut lui
associer du code JavaScript à exécuter avec l'évènement onclick.
 Bouton d’envoie:
<input type="submit" name="Submit" value="Envoyer">
L'attribut value définit le libellé à afficher sur le bouton.
 Bouton de réinitialisation:
<input type= "reset" name= "réinitialiser" value="effacer la saisie">
remet l'ensemble des champs du formulaire à leurs valeurs par défaut.
38
 Champ de texte:
<input type="text" name="text1" value="texte par défaut">
Le champ peut être pré-rempli grâce à l'attribut value. D’autres attributs sont:
size="" : largeur du champ de texte.
maxlength="" : nombre maximal de caractères.
 Mot de passe:
<input type="password" name="pass" value="12345">
 Zone de texte:
Champ de texte sur plusieurs lignes.
<textarea name="textarea">contenu</textarea>
39
Tâche 9
• Créer une page formulaire.html qui permet la saisie de votre nom,

prénom, ainsi que votre email. Votre page doit contenir 3 champs
texte et une bouton simple.
40
Tâche 10
• Ajouter ces deux paragraphes après votre formulaire:

<p> <b>Vos coordonnés sont:<b> </p>
<p id="saisie"> </p>
• Ajouter le code JavaScript suivant pour récupérer les information que
vous avez saisie et associer le à votre bouton à l’aide de l’attribut
onclick. Concaténation du nom et
prénom dans une variable x
Permet de récupérer la valeur
<script type="text/javascript" language="javascript"> du champ indiqué
function fun(){ Document courant
var x=document.monform.nom.value+" "+document.monform.prenom.value;
x=x+", Email: "+document.monform.email.value;
Nom du champ de texte
document.getElementById(“saisie").innerHTML= x;
}
Nom de votre formulaire Insérer le contenu de x
</script> dans l’objet qui porte id=
saisie dans la même page 41
 Fichier:
<input type="file" name= "monfichier">
 Champ image:
<input type="image" src="xul.png">
La différence avec la balise img est la prise en compte parmi les données de
formulaire passées à une autre page.
 Case à cocher:
<input type="checkbox" name="cb" value="true" checked>
L'attribut checked permet de cocher initialement la case.
42
 Bouton radio:
<input type="radio" name="radiox" value="radio1">
 Groupe radio:
<input type="radio" name="identifieur" value="true" checked>Oui
<input type="radio" name="identifieur" value="false">Non
Un bouton radio fonctionne comme une case à cocher, mais un groupe de
boutons radios permet un choix alternatif: cocher une case décoche les
autres. Pour que les boutons soient alternatifs, il faut donner le même nom à
tous.
 Liste:
La balise select et les balises internes options permettent de construire un
menu qui peut avoir la forme d'une liste déroulante ou d'une liste statique.
43
 Liste déroulante:
<select name="select"> <option>cerise</option>
<option>orange</option>
<option>pomme</option>
</select>
 L'attribut size spécifie le nombre de lignes affichées. Si le nombre est
inférieur au nombre d'options, une barre de défilement verticale apparaît.
 L'attribut multiple permet la sélection simultanée multiple.
 L'attribut d'option selected indique quel élément est initialement choisi.
 Liste statique:
<select name="select2" size="3"> <option>cerise</option>

<option>orange</option>
<option>pomme</option>
44
</select>
Tâche 11
Réaliser le formulaire ci-contre:
Remplacer les cases à cocher par
une liste déroulante, puis par une
liste statique.
45
Les balises structurantes de HTML5
• <header> spécifie un entête pour un document ou une section.

• <nav> définit un ensemble de liens de navigation.
• <section> sert à regrouper des contenus en fonction de leur thématique.
• <article> spécifie un contenu indépendant et autonome
• <aside> est conçue pour contenir des informations complémentaires au
document que l'on visualise.
• <footer> spécifie le pied de page pour un document ou une section, il
comporte des informations comme des liens de contact, le nom de
l'auteur, les mentions légales, etc.
46
Exemple de page Structuré
<Header>
<article>
<nav>
<article>
<article> <footer>
47
Les balises structurantes de HTML5
• Ajouter les balises suivantes à votre première page html:

<header> <nav> <article> <footer>
de sorte que:
 Le titre, l’image de l’université et l’école seront dans la section
<header>
 La section <nav> contient une liste non numéroté sous forme de
menu.
 3 sections <article> : Acceuil, Formation, et Recherche
 Une section pied de page <footer> contient contact (l’adresse de
l’école)
48

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Informations du document

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

Hyper Text Markup Language

• 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:

• Un formulaire est une fiche que l'utilisateur peut remplir; ces

 method: permet de définir la méthode de transfert des

• Créer une page formulaire.html qui permet la saisie de votre nom,

• Ajouter ces deux paragraphes après votre formulaire:

<select name="select2" size="3"> <option>cerise</option>

• <header> spécifie un entête pour un document ou une section.

• Ajouter les balises suivantes à votre première page html:

Vous aimerez peut-être aussi