HTML - Cours

Initiation
à HTML
Comment est crée un site
Web?
Code HTML & CSS
Traduction par l’ordinateur
Résultat visible par le navigateur
2
Langages Web
Fond de la page Web Forme de la page Web
3
Langage HTML
HTML (HyperText Markup Language) est un langage de balisage
utilisé pour créer des pages web. Il s'agit d'un langage de
programmation de base utilisé pour structurer le contenu d'une page
web et définir sa mise en forme.
Normalisé par le W3C (World Wide Web Consortium) regroupant
industriels (Microsoft, Google, Apple. . . ) et académiques (INRIA,
MIT…)
Il décrit la structure et du contenu d’un document.
On ne décrit pas la présentation (ce sera le rôle de CSS)
On ne décrit pas de comportement dynamique (ce sera le rôle de
JavaScript et des langages côté serveur)
4
Evolution du langage HTML
•HTML 1.0 : Publié en 1993 •HTML 4.01 : Publié en 1999
•HTML 2.0 : Publié en 1995 •XHTML 1.0 : Publié en 2000
•HTML 3.2 : Publié en 1997 •XHTML 1.1 : Publié en 2001
•HTML 4.0 : Publié en 1997 •HTML5 : Publié en 2014
HTML1 HTML2 HTML3 HTML4 HTML5
5
Outils de Html5
Pour apprendre le langage HTML, on a besoin :
 D'un éditeur de texte tout simple comme par exemple le Bloc‐notes de Windows.
 D'un navigateur web comme Microsoft Internet Explorer, Google Chrome ou autres.
Pour développer des sites web professionnels, on utilise souvent des logiciels de
développement spécialisés appelés aussi éditeurs WYSIWYG : What You See Is
What You Get (Ce que vous voyez, vous l'obtenez). On trouve entre autres
Adobe DreamWeaver.
6
Html5 est un langage de balises
Les balises, aussi appelées éléments, sont des commandes à l’intention du
navigateur et saisies entre des signes inférieur à (<) et supérieur à (>). Ainsi une
balise s’écrit <balise>
Exemples
<b> b pour bold ce qui signifie gras

<i> i pour italic ce qui signifie italique
<p> p pour paragraph ce qui signifie paragraphe
<div> div pour division ce qui signifie division
<table> table signifie tableau
<form> form signifie formulaire
<img /> img pour image
7
HTML: Balises et leurs
attributs
<balise> </balise>
<p> Ceci est un paragraphe </p>
8
attributs
Les balises paires:
<titre> Titre de mon site Web </titre>

Les balises orphelines:
Elles servent le plus souvent à insérer un élément à un endroit précis
(par exemple une image). Il n'est pas nécessaire de délimiter le début et
la fin de l'image.
<img/> <br/>
9
attributs
Les attributs:
Les attributs sont les options des balises. Ils viennent les
compléter pour donner des informations supplémentaires. L'attribut se
place après le nom de la balise ouvrante et a le plus souvent une valeur,
comme ceci :
<img src=" photo.jpg" alt="logo"/>
<a href="/mespages/page1.html">cliquez ici</a>
10
Structure de base d'une page
en HTML5
11
Structure de base d'une page
HTML5
Les balises doivent être fermées dans le sens inverse de leur

ouverture.
<html><body></body></html> : correct. Une balise qui est ouverte à

l'intérieur d'une autre doit aussi être fermée à l'intérieur.
<html><body></html></body> : incorrect, les balises s'entremêlent.
12
Doctype et son importance
Tout document Html doit commencer par un doctype. Le Html5 propose
un doctype unique et simplifié.
Le Doctype (Document Type Declaration) est une instruction spéciale
qui se trouve en haut d'un document HTML et qui indique au navigateur
Web quel type de document il doit interpréter.
HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" >
HTML5 <!DOCTYPE html>
13
Balise Html
La balise <html> indique au navigateur qu’il s’agit d’un document Html.
La balise <html> est l’élément le plus haut ou l’élément racine du document.
<!DOCTYPE html>
<html lang="fr">
…
</html>
La balise <Html> peut prendre comme attribut lang="fr" qui spécifie que le
document est en langue française.
14
En-tête du document
Dans cet en-tête du document se situe toute une série d’informations:
Le titre du document. Soit la balise <title> … <title>
 Des déclarations ou des appels de feuilles de style CSS.
 Des fonctions ou des liens vers des fichiers JavaScript.
 Des informations à l’intention des moteurs de recherche pour le
référencement de la page.
 Des informations à l’intention des navigateurs.
 Des balises méta qui reprendront quant à elles l’encodage, la description
de la page, les mots-clés associés à la page, le nom de l’auteur, des
mentions de copyright, etc.
15
En-tête: <head>…</head>
Rôle: Fournir des informations au sujet du document
Position: En début de document (après la balise <html> et avant
la balise <body>)
Contenu
 <title>…</title>
Titre de la fenêtre dans laquelle la page s'affiche
 <meta name="..." content="...">
Permet de spécifier des méta-données sous la forme de couple
attribut-valeur (NAME-CONTENT)
16
En-tête: <meta…>
<meta name="auteur" content="El Motaki">
< meta name="keywords" content="page personnelle,
informatique">
<meta http_equiv="Content-Type" content="text/html;
charset=utf-8">
Permet de spécifier le type de contenu :
 Type de document
 Codage des caractères
< meta http_equiv ="Content-language" content="fr">
permet d’indiquer la langue du contenu du document
17
Arborescence d’une page
HTML
Métadonnées de
<meta> la page HTML
<title> Titre de la page
Intégration du code
Head <script > JavaScript
HTML
Body <style>
Feuilles de style CSS
<link>
18
Document Html5 minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="utf-8">
</head>
<body>
…………………………………………………………
</body>
</html>
19
Corps du document
Les balises <body> … </body> déterminent ce que l’on appelle le corps

du document.
C’est entre ces balises que prendra place le code Html5 qui sera utilisé
pour élaborer le contenu de la page.
C’est cette partie du document Html qui sera affichée dans la fenêtre du
navigateur et donc visible par l’internaute.
20
Document Html5 minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Un premier document Html5
</body>
</html>
21
Heading, Paragraph, Break
L’élément p définit un paragraphe.
L’élément br crée un retour à la ligne.
Les éléments h1, h2,… jusqu’à h6 définissent des titres (par

ordre d’importance).
22
Strong, Emphasis, Mark
L’élément strong est utilisé pour définir un contenu comme

important. Il met le texte en gras.
L’élément em est utilisé pour définir un contenu comme
assez important. Il met le texte en italique.
L’élément mark est utilisé pour faire ressortir du contenu. Il
surligne l’élément important.
23
Paragraphe
<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>
ALIGN: Permet l’alignement des paragraphes. Les valeurs possibles de cet
attribut sont: left, center, right et justify.
Pour passer (ou sauter) une ligne, on utilise l’élément <BR>
Exemple
24
Ligne horizontale
<hr size=" " width=" " align="left|center|right" color=" ">
size : épaisseur en pixel de la ligne
width : largeur de la ligne
align : alignement à gauche| au centre | à droite dans la fenêtre
color :Permet de spécifier la couleur de la ligne
<hr> : Utilisée sans option, cette balise produit une ligne grise de
1 pixel d'épaisseur faisant toute la largeur de la fenêtre
Exemple
25
Titres des sections
Il existe 6 balises permettant de représenter les titres de sections, par
importance décroissante :
 <h1>Titre de niveau 1</h1>
26
Listes
HTML possède plusieurs balises permettant de présenter le texte sous
forme de listes.
On en distingue trois types :
les listes non numérotées
les listes numérotées
les listes de définitions (ou lexiques)
Ces listes peuvent être emboîtées les unes à l’intérieur des autres.
27
Listes
Les listes classiques :
Les listes non numérotées délimitées par les balises <ul> ... </ul> (unordered
list).
Les listes numérotées délimitées par les balises <ol> ... </ol> (ordered list).
Tous les éléments d’une liste numérotée ou non sont délimités par les balises
<li> ... </li> (list item)
Les lexiques sont délimités par les balises <dl> ... </dl> (definition list) et
leurs entrées par les balises <dt> ... </dt> (term) et <dd> ... </dd>
(definition).
28
Listes: Exemple
29
Listes: attributs
Listes non numérotées
L’attribut TYPE="disc|circle|square" Permet de choisir la forme de la puce
(disc par défaut)
Listes numérotées
L'attribut TYPE définit le type de numérotation:
1 : Numérotation en chiffres arabes (1, 2, 3… par défaut)
A: Numérotation en lettres majuscules (A, B, C…)
 a: Numérotation en lettres minuscules (a, b, c…)
 i : Numérotation en petits chiffres romains (i, ii, iii…)
I : Numérotation en grands chiffres romains (I, II, III…)
L'attribut START permet de spécifier à partir de quel niveau la numérotation
doit commencer (un nombre entier)
30
Tableaux
Les tableaux sont délimités par les balises <table>... </table>
Les balises <tr> ... </tr> (table row) délimitent les lignes
Les balises <td> ... </td> (table data) délimitent les cellules
Attention ! On déclare les lignes à l’intérieur du tableau, les cellules à
l’intérieur des lignes
On peut ajouter de la structure à un tableau en :
donnant une légende au tableau avec les balises <caption
align="top|bottom" >... </caption> juste après la balise ouvrante
<table>
remplaçant les <td> ... </td> qui contiennent des en-têtes (de ligne, de
colonne) par des <th> ... </th> (table header)
31
Tableaux: Exemple1
32
Tableaux: attributs
<TABLE BGCOLOR= "couleur_fond " ALIGN="LEFT|RIGHT|CENTER"
WIDTH="pixels ou%" BORDER="pixels" CELLPADDING="pixels"
CELLSPACING="pixels">
• BGCOLOR: Couleur du fond
• ALIGN: Alignement horizontal
• WIDTH: Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la
fenêtre (à utiliser avec prudence)
• BORDER: Largeur de l'encadrement du tableau et des cellules exprimée en pixels. Si
une cellule est vide, il n'apparaît pas
• CELLPADDING: Marge intérieure de chaque cellule (en pixels)
• CELLSPACING: Espace inter-cellules
33
Tableaux: attributs
<TR BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" VALIGN=
"TOP|MIDDLE|BOTTOM" >
• ALIGN: Alignement horizontal du contenu de toutes les cellules de la ligne
• VALIGN: Alignement vertical du contenu de toutes les cellules de la ligne
<TD BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"

VALIGN="TOP|MIDDLE|BOTTOM" COLSPAN="nb" ROWSPAN="nb"
WIDTH="pixels ou %">
• ALIGN: Alignement horizontal cellule par cellule
• VALIGN: Alignement vertical cellule par cellule
34
Tableaux: attributs
COLSPAN
Nombre de cellules fusionnées à l'horizontal
Permet de disposer du texte au dessus de plusieurs colonnes
ROWSPAN
Nombre de cellules fusionnées à la verticale
35
Tableaux: Exemple2
36
Tableaux: Exemple1
37
Tableaux: Exemple2
38
Tableaux: Exemple2 - corrigé
39
Liens
Un lien se définit par le marqueur <a ...> suivi de l’attribut
HREF="URL" qui définit l’adresse du document vers lequel le lien
conduit. Il se termine par </a>
Syntaxe: <A HREF="adresse"> texte ou image</A>
Exemple:
<A HREF="http://www.wikipedia.org">aller vers wikipedia</A>
<A HREF="Accueil.html">Page d’accueil</A>
Les liens peuvent être de deux types: externes ou internes
40
Liens externes
Un lien externe est un lien qui renvoie vers une page d'une autre site
internet
Deux types de liens externes:
Exemple:
<A HREF="http://www.wikipedia.org">aller vers wikipedia</A>
41
Liens externes
Exemple
42
Liens internes (type 1)
Liens vers des pages locales (même site)
Deux façons pour spécifier un lien:
Chemin absolu
Indique l'adresse complète du fichier. Il est généralement utilisé
pour afficher une page d'un autre site
Chemin relatif
Indique l'adresse du fichier par rapport à la page actuelle. Il est
vivement conseillé de l'utiliser dans son site web
43
Liens vers des pages locales (même site)
Exemple:
<A HREF="Contacts.html">Mes contacts</A>
<A HREF="dossier1/Contacts.html">Mes contacts</A>
44
Exemple: Chemin relatif
Racine du site
Dossier1
Page1.html Href=“Page2.html”
Page2.html Href= “SousDossier/Page3.html”
SousDossier Href=“../Dossier2/Page4.html”
Page3.html
Dossier2
Page4.html
45
Les liens internes permettent de construire des tables de matières et des
renvois à l’intérieur du même document
Un lien interne pointe vers une ancre, c’est à dire un endroit à l’intérieur
du même document défini par un nom
Dans un lien interne, il faut définir:
L’ancre interne
Exemple: <h3 NAME="HautPage"> Début de la page</h3>
Le lien vers l’ancre
Exemple:<a HREF="#HautPage">Aller en haut</a>
46
Liens internes: Exemple
47
Lien: Envoi d’un email
Un tel lien lance automatiquement l’application de messagerie
électronique en incluant le nom du destinataire
Syntaxe: <A HREF = "Mailto: adresse_Email?Subject=
sujet_msg"> zone_cliquable </A>
Mailto: ouverture d’une session de courrier électronique à
partir du navigateur
subject: sujet du message
Exemple:
<A HREF = "Mailto:saloua@gmail.com?Subject= Demande
d’information"> Envoyez moi un message </A>
48
Lien: Nouvelle fenêtre
L'attribut target permet de définir la cible du lien, c'est-à-dire
l'endroit où le fichier du lien sera ouvert
Pour ouvrir le fichier dans une nouvelle fenêtre, on assigne la valeur

_blank à l’attribut target
Exemple
<a href="http://fr.wikibooks.org" target="_blank">Lien ouvrant

Wikilivres</a>
49
Lien avec une image
Exemples
50
Images
Pour insérer une image dans un document HTML, on utilise la balise
<IMG SRC="URL" WIDTH="pixels" HEIGHT="pixels" ALT="texte
alternatif" BORDER="pixels" TITLE="description"
ALIGN="LEFT|RIGHT|TOP|ABSMIDDLE|MIDDLE|BOTTOM"
HSPACE="pixels" VSPACE="pixels" >
• SRC: Permet de préciser où se trouve l’image à insérer
• WIDTH: Largeur de l'image à afficher.
• Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle. On
indique soit la valeur en pixel, soit en pourcentage de la taille originale de
l'image
• HEIGHT: Hauteur de l'image affichée (mêmes remarques que pour WIDTH).
51
Images
• ALT: text qui s'affiche à la place de l'image en cas d'erreur
• BORDER: taille en pixel de la bordure autour de l'image
• TITLE: permet d'associer à l'image une annotation (Texte apparaissant dans
une info-bulle quand la souris est positionnée pendant 1 à 2 secondes sur
l'image)
• ALIGN: permet d’aligner une image par rapport à la ligne du texte courante
• HSPACE et VSPACE permettent d’éloigner les texte de l’image
NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée,
l'autre est automatiquement calculée en proportion.
52
Images
Exemples
<img src="images/Arbre.jpg" alt="Arbre sapin" height="50%"
width="50%" title="Arbre sapin" border="3" >
<img src="http://www.wikipedia.org/images/robot.png" alt="robot">
Les formats d’images utilisables pour le Web sont :
Le JPEG (.jpg), un format adapté aux photos.
Le GIF (.gif) et le PNG (.png), des formats adaptés aux autres types
d’image ; le PNG est à préférer dans tous les cas (transparence,
profondeur de couleurs. . .) sauf besoin d’images animées.
53
Formulaires: Exemple
54
Formulaires
Permettent d’interagir avec l’utilisateur en lui proposant d’entrer des
informations
Un formulaire HTML est placé à l’intérieur d’une balise <form>
Syntaxe
<form method="GET|POST" action="url" enctype="type"> …</form>
method : Méthode HTTP, valant soit "get" soit "post"
GET: envoie les paramètres dans l'URL
POST : On ne voit pas ce qui est envoyé dans l'URL
action :URL du script auquel sera soumis le formulaire
Exemple: <form method="post" action="action.php"> … </form>
55
Formulaires
En HTML, il est interdit de mettre des champs de formulaire directement à
l’intérieur d’un <form>. Il faut d’abord les regrouper:
Dans des paragraphes <p> si les champs de formulaires sont à l’intérieur
de paragraphes de textes (rare)
Dans des ensembles de champ <fieldset> pour regrouper des champs de
formulaire de sémantique proche
Dans des divisions <div> sans contenu sémantique sinon
Exemple
56
Etiquettes
La plupart des champs sont accompagnés d’une étiquette (<label>)
Exemple: <label>Ville :</label>
Pour lier une étiquette à un champ, il faut lui ajouter un attribut for
qui a la même valeur que l'id du champ en question
Lorsqu’une étiquette est liée à un champ, un clic sur l’étiquette
permet en général de sélectionner le champ
Exemple
<label for="txt_ville">Ville :</label>
<input type="text" name="ville" id="txt_ville">
57
Champs de saisie
La balise <input> permet de définir les différents types de champ d’un
formulaire:
zone de saisie
case à cocher
bouton radio
bouton de confirmation
bouton de remise à zéro des champs
L’attribut type détermine le type du champ
L’attribut name(nom du paramètre de la requête HTTP) est obligatoire
(sauf pour les types "reset" et "submit" ) ; il permet de préciser au
serveur à quelle saisie on fait référence
Exemple:
58
Saisie d’une ligne de texte
type ="text" est utilisé pour la saisie d’un texte dont la taille est
inférieure à une ligne
L’attribut value permet de pré-remplir le champ avec une valeur par
défaut
L’attribut maxlength permet de spécifier la taille maximale de la chaîne
de caractères à saisir
L’attribut placeholder permet de donner une indication sur le contenu
du champ
L’attribut size permet de modifier la taille de la zone de saisie
Exemple:
59
Saisie d’un mot de passe
type ="password" est utilisé pour la saisie d’un texte dont les
caractères sont remplacés par des astérisques
L’attribut value permet de préciser la valeur par défaut (facultatif)
La taille maximale de la chaîne de caractères à saisir peut être
spécifiée à l’aide de l’attribut maxlength (facultatif)
Exemple
60
Zones de saisie enrichies
1. E-mail
On peut demander la saisie d'une adresse e-mail
<input type="email"/>
2. URL
Avec le type url, on peut demander à saisir une adresse absolue
(commençant généralement par http://)
<input type="url"/>
3. Numéro de téléphone
Ce champ est dédié à la saisie d’un numéro de téléphone
<input type="tel"/>
61
Zones de saisie enrichies
4. Nombre
Ce champ permet de saisir un nombre entier
<input type="number"/>
5. Date
Différents types de champs de sélection de date existent :
date : pour la date (05/08/1985 par exemple)
time : pour l'heure (13:37 par exemple)
week : pour la semaine
month : pour le mois
datetime : pour la date et l'heure (avec gestion du décalage horaire)
datetime-local: pour la date et l'heure (sans gestion du décalage
horaire)
Exemple: <input type="date"/>
62
Cases à cocher
type ="checkbox" permet de choisir plusieurs éléments parmi
une liste de possibilités
L’attribut checked ="checked" permet de cocher la case par
défaut
Certains langages côté serveurs imposent que les noms de
champs de formulaire à choix multiples se terminent par []
Exemple
63
Boutons radio
type ="radio" permet de choisir un seul élément parmi une liste
de possibilités.
La valeur retournée est obligatoirement précisée à l’aide de
l’attribut value.
L’attribut checked ="checked" permet de préciser la valeur par
défaut.
Exemple:
64
Menu de sélection
La balise <select> permet d’ajouter une liste de sélection :
L’attribut facultatif size permet de préciser le nombre de choix
apparaissant sur la page Web. Par défaut, ce nombre est
initialisé à 1
L’attribut multiple ="multiple" permet d’autoriser des
réponses multiples. Dans ce cas, pour PHP, on donnera
toujours un nom se terminant par []
Les choix du menu sont indiqués à l’aide de la balise <option> :
L’attribut value permet de spécifier la valeur associée au choix
L’attribut selected ="selected" permet de spécifier le(s) choix
par défaut
65
Menu de sélection
Exemple
66
Fichiers joints
type ="file" permet de joindre au formulaire un fichier
À cause de la taille de la requête due au téléchargement (upload)
du fichier, il faut impérativement utiliser la méthode POST et
l’encodage multipart/form-data
Exemple
<label for="fichier">Fichier:</label>
<input type="file" name="fichier" id="fichier">
67
Réinitialiser le formulaire
type ="reset" permet de réinitialiser le formulaire en affectant aux
différents champs leur valeur par défaut
L’attribut value permet de changer le texte du bouton

correspondant
Exemple
<input type="reset" value="Effacer les donnes">
68
Soumettre le formulaire
type ="submit" permet de soumettre le formulaire
Le client envoie le contenu du formulaire à l’adresse précisée par
l’attribut action de la balise <form>
L’attribut value permet de changer le texte du bouton
correspondant
Exemple
<input type="submit" value="Enregistrer les donnes">
69
Zone de saisie multiligne
Pour les saisies multiligne, on utilise la balise <textarea>
Le texte délimité par cette balise permet d’initialiser la valeur par
défaut du champ
La balise fermante est obligatoire même si le champ est vide
Les attributs rows et cols (obligatoires) permettent de spécifier la
taille en lignes et colonnes de la fenêtre de saisie
Exemple
70
Exercice
71

HTML - Cours

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

HTML - Cours

Transféré par

Droits d'auteur :

Formats disponibles

Initiation

Traduction par l’ordinateur

Résultat visible par le navigateur

HTML1 HTML2 HTML3 HTML4 HTML5

<b> b pour bold ce qui signifie gras

<titre> Titre de mon site Web </titre>

<img src=" photo.jpg" alt="logo"/>

<a href="/mespages/page1.html">cliquez ici</a>

Les balises doivent être fermées dans le sens inverse de leur

<html><body></body></html> : correct. Une balise qui est ouverte à

HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<title> Titre de la page

Les balises <body> … </body> déterminent ce que l’on appelle le corps

L’élément br crée un retour à la ligne.

Les éléments h1, h2,… jusqu’à h6 définissent des titres (par

L’élément strong est utilisé pour définir un contenu comme

<TD BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"

Nombre de cellules fusionnées à l'horizontal

Permet de disposer du texte au dessus de plusieurs colonnes

Nombre de cellules fusionnées à la verticale

<A HREF="Accueil.html">Page d’accueil</A>

Les liens peuvent être de deux types: externes ou internes

Pour ouvrir le fichier dans une nouvelle fenêtre, on assigne la valeur

<a href="http://fr.wikibooks.org" target="_blank">Lien ouvrant

L’attribut value permet de changer le texte du bouton

<input type="reset" value="Effacer les donnes">

Vous aimerez peut-être aussi