2-HTML Partie 1

420-B16-RO : Techniques de
développement d’applications
hypermédia I
2 – Langage HTML partie 1
Professeur : Sylvain Labranche
slabranche@crosemont.qc.ca
1
2
Page Web, programmation client
Langage
HTML et CSS
Après
traduction
par le
navigateur
3 Pourquoi 2 langages?
 HTML (HyperText Markup Language) Il décrit le
contenu et la structure de la page Web
Les paragraphes,
les titres et leurs niveaux 1,2…
les tableaux,
les images,
les menus…
4 Pourquoi 2 langages? (2)
 CSS (Cascading Style Sheets)
Il est aussi appelé Feuilles de style.
Il décrit la mise en forme ou la présentation de la
page Web
 couleur des paragraphes,
 couleur des titres,
 polices de caractères,
 dispositions des paragraphes
On peut changer la forme sans toucher au contenu.
Qu’est-ce que le HTML
5
 HTML (HyperText Markup Language)
Format de données conçu pour représenter les pages web. C’est un
langage de balisage qui permet d’écrire de l’hypertexte.
Un hypertexte est un texte contenant les liaisons

directes entre des éléments de d'autres documents.
Pensez à un lien d'un site Web vers un autre.
HTML permet de décrire le contenu

d’un document :
 Les titres, Les paragraphes,
 La disposition des images,
 Les formulaires,
 etc.
Qu’est-ce que le HTML (2)
6
 Utilisation conjointe
HTML est souvent utilisé conjointement

avec:
 des langages de programmation comme JavaScript, et
 des formats de présentation (feuilles de style en cascade).
HTML et HTML avec CSS
7
Versions du HTML
8
 HTML1: 1991
 Première version créée par Tim Berners-Lee .
 HTML2:1994-1996 .
 Les règles et le fonctionnement de cette version sont donnés par
le W3C.
 W3C est une communauté internationale dont la mission est de développer les standards
du web.
 HTML3:1996
 Rajoute de nombreuses possibilités au langage comme
 les tableaux,
 les applets,
 les scripts,
 le positionnement du texte autour des images,
 etc.
9 Versions du HTML (2)
 HTML 4 : 1998
 Propose l'utilisation de cadres (frames en anglais), des
tableaux plus complexes, des améliorations sur les
formulaires, l’exploitation des feuilles de style ou CSS.
 Exemple de site avec cadres (frames):
http://devernay.free.fr/cours/internet/html/sitef.html
 HTML 5 :
 Possibilité d'inclure facilement des vidéos, un meilleur
agencement du contenu, de nouvelles fonctionnalités
pour les formulaires.
10 Structure d’un document
HTML
• Pour respecter les standards du HTML, tout
document doit débuter par la balise !DOCTYPE pour
informer les outils de validation de la version de
HTML utilisée.
• Un document HTML est délimité par les marqueurs:

• <html> et
• </html>.
• Le document est composé de deux parties:

• l’entête et
• le corps.
Structure d’un document HTML (2)
11
<!DOCTYPE html> La balise DOCTTYPE informe le navigateur de la

version du HTML utilisée.
<html> Le document HTML est contenu entre les
balises <html> et </html>
Entête du document: contient les

<head> informations qui concernent le
<meta charset="utf-8" /> document comme le jeu de
caractères utilisé et le titre qui
<title> Titre de la page Web </title>
sera affiché dans le navigateur.
</head> Ces informations, à l’exception
du titre, n’apparaissent pas dans
le navigateur.
<body>
Contenu de la page Web Corps du document :
</body> informations affichées dans le
navigateur
</html>
Fichier: exemple1.html
12 Visualiser un document HTML
Les fichiers HTML doivent être

enregistrés avec l’une des
extensions: .html ou .htm (ou en
majuscule (HTML ou HTM)
Le résultat de chargement
de la page dans le
navigateur Google chrome
Affichage du code HTML d'une page Web dans un navigateur:

On utilise le menu contextuel/ Afficher la source (Internet
Explorer) ou code source de la page (FireFox)
Afficher les extensions des fichiers
13  Ouvrez l'explorateur Windows (ouvrez un dossier, par exemple)
 En haut, cliquez sur Affichage, puis Options, puis Modifier les options des dossiers
et de recherche.
 Dans la nouvelle fenêtre, cliquez encore sur Affichage, puis décochez Masquer
les extensions des fichiers dont le type est connu.
Balises HTML
14  Les commandes HTML sont appelées marqueurs ou balises.
 Exemples: <html> , <title>, <body>, <p>…
 La balise <!DOCTYPE> est spéciale, car elle commence
par !
 Ces marqueurs ont une syntaxe bien particulière: ils sont
encadrés par des délimiteurs: < et >.
 Pour définir la portée d’un marqueur, on le fait apparaitre en
double: le marqueur de fin se différencie du marqueur de
début par le signe /.
 Exemple: <html>…</html>
 Les balises qui n'ont pas de portée, ou orphelines, doivent

être fermées. Notez le signe / à la fin de la balise.
 Exemple: < meta charset="utf-8" />
 Les marqueurs peuvent indifféremment être écrits en

majuscules ou en minuscules. On favorise les minuscules pour
une compatibilité avec le XHTML (eXtensible HyperText
Markup Language).
1
5 Attributs
 Certaines balises ont besoin d’être

paramétrées. Par exemple, la balise meta:
 Exemple: < meta charset="utf-8" />
 meta est le nom de la balise.
 charset est un attribut.
 Un attribut doit avoir une valeur, que l’on affecte
toujours avec ="valeur" ;
16 Insérer un commentaire
 Un commentaire en HTML est un texte qui n'est pas

affiché dans la page Web. C'est un mémo.
 

Titres et sous titres
17  Les balises <h1> à <h6> permettent de définir les titres dans un document
html.
 h1 étant le premier niveau.
 Bien comprendre qu’il peut y avoir plus d’un h1 dans un document, 1 à 6
représentent l’importance du titre.
 Exemple: titres.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"\>
<title> Les niveaux de titres </title>
</head>
</body>
<h1> Titre1 </h1>
<h2> Titre2 </h2>
<h3> Titre3 </h3>
<h4> Titre4 </h4>
<h5> Titre5 </h5>
<h6> Titre6 </h6>
</body>
</html>
18 Titres et sous titres (2)
19 Paragraphe de texte:
élément p
 La balise <p> permet de définir un paragraphe.
 On n’écrit jamais de texte en HTML sans l’encadrer d’une balise.
 Elle provoque un saut de ligne et le passage à la ligne suivante.
Exemple: paragraphe.html
…
<body>
<h1>Le langage Java</h1>
<p>Selon Wikipédia</p>
<p>
Le langage Java est un langage de programmation informatique
orienté objet créé par James Gosling et Patrick Naughton,
employés de Sun Microsystems.
</p>
</body>
</html>
20 Paragraphe de texte:
élément p (2)
21 Élément de saut de ligne br
 La balise <br> force le passage à la ligne (équivalent d’un retour chariot)
sans pour autant changer d’élément (ou de bloc).
 Pour être compatible XHTML, l’élément vide br doit être codé <br />.
 <br /> doit obligatoirement être à l'intérieur d'un paragraphe ou d’un titre.
Exemple: br.html
…
<body>
<h1>Voici un titre<br />
et la suite du titre</h1>
<p>voici le début du premier paragraphe<br />
et la suite du premier paragraphe.
</p>
<p> voici un deuxième paragraphe </p>
</body>
…
Attention!
Ne choisissez pas votre balise de titre en fonction de la taille du texte, mais
plutôt de son niveau hiérarchique.
 La taille du texte peut être changée avec le CSS.
22 Élément de saut de ligne br
(2)
23 Les listes
 Il existe 3 types de listes en HTML:
Les listes numérotées : <ol>… <ol/>

Les listes non numérotées (à puces) :
<ul>… <ul/>
Les listes de définition: <dl>… <dl/>
24
Les listes numérotées (<ol> pour
ordered list)
• <ol></ol> délimite toute la liste.
• <li></li> délimite un élément de la
liste
•Exemple : liste-numerotee.html
25 Les listes numérotées (<ol> pour
ordered list) (2)
26
Les listes non numérotées (<ul>
pour unordered list)
• On les appelle également les listes à puces.
• <ul></ul> délimite toute la liste.
• <li></li> délimite un élément de la liste
Exemple : liste-puces.html
27 Les listes non numérotées: ul
(<ul> pour unordered list) (2)
28
Les listes de définition (<dl> pour
definition list)
 Le contenu d’une liste de définition est délimité
par <dl>
 dt (definition term) pour délimiter un terme
 dd (definition description) pour délimiter la
définition du terme
Exemple: liste-definition.html
29
Les listes de définition (<dl> pour
definition list) (2)
Les liens hypertextes: élément
30
<a>
 La balise utilisée pour créer un lien est <a> pour

anchor
 balise d'ancrage, le lien est "ancré" vers un autre objet
 Les liens ou les hyperliens nous permettent
d’effectuer un lien entre une partie quelconque de
la page et une ressource Web pouvant se trouver
n’importe où:
 sur la même page,
 sur une page différente du même site,
 sur une page d’un autre site,
 vers un fichier ou une image situés à un
emplacement quelconque.
31
Lien vers un autre site web
• Ce lien est absolu, car on indique l'adresse complète.

• Ce lien mène à la page d’accueil du site dont l’URL est
http://www.cmontmorency.qc.ca
• Exemple: premierlien.html
Liens vers une page web
32 locale (du même site)
Ces liens sont relatifs, ils dépendent de l’emplacement de la

page courante. Exemple: dossier liens
33 Lien vers une adresse de
courriel
<p> Pour contacter le
<a href="mailto:slabranche@crosemont.qc.ca">Webmestre</a>
</p>
Remarque:
Il n'y a pas d'espace entre "mailto:" et l'adresse de
messagerie.
Exemple: Exemple: dossier liens, fichier liens.html

Lien vers une autre section
34
du document
 Il suffit d'attribuer à l'élément vers lequel on veut pouvoir
pointer un identifiant avec l'attribut HTML id, et d'y
associer un lien débutant par le caractère dièse # suivi du
nom de cet identifiant.
Définition de
<body> l'identifiant :
c’est une ancre
<p id="haut">Introduction</p> ou signet
servant de
<p>...</p> cible.
<p>Conclusion</p> Définition d’un

lien hypertexte
<p > <a href="#haut">haut de la page</a></p> vers le signet.
Symbole # suivi
de
</body> l'identificateur
de l'ancre.
Exemple: lienSection.html
35 Lien vers une autre section
du document (2)
Pour définir un lien vers un signet se trouvant sur une autre page, on
doit le précéder de l'adresse de cette page:
<p> <a href=“page.html#signet">haut de la page</a></p>

36 Ligne horizontale
séparatrice: élément hr
 La balise <hr> insère une ligne horizontale
séparatrice.
 Note: Pour être compatible XHTML, l’élément

vide hr doit être codé <hr />.
Exemple: ligne_horizontale.html
37 Les images: Format de
fichiers
 JPEG ou JPG (Joint Photographic Experts Group)
 16.7 millions de couleurs,
 Pour des photographies et des graphismes riches en couleurs,
 Taux de compression élevé.
 GIF(Graphic Interchange Format)
 256 couleurs,
 Pour dessins, icônes et images animées,
 De plus en plus supplanté par le PNG.
 PNG(Portable Network Graphic)
 16.7 millions de couleurs,
 Format ouvert non breveté,
 Conçu spécialement pour le Web.
 La compression est d’excellente qualité.
 Recommandé par le W3C.
3
8 Insertion d’image
 On utilise la balise img pour insérer une image.

 La balise est vide, tout est dans les attributs.
 <img src= "cheminImage" />

 Exemple : image.html
39 Insertion d’image avec tous les
attributs: <img> Exemple
Exécution
(diapositive
suivante)
40 Insertion d’image: <img> (3)
 La balise <img>
 Elle n’a pas besoin d’être fermée.
 On la note en XHTML <img />
 Le paramètre src
 Il est un attribut obligatoire.
 Il indique le nom et l'emplacement du fichier image.
 Le chemin relatif est indiqué de la même manière que pour
les liens.
<img src="images/logo.jpg" />
 Les paramètres width et height :

 Permettent de définir, en pixels, la largeur et la hauteur de
l'image à l'écran.
 Cela permet au navigateur de réserver un emplacement pour
l'image avant son téléchargent complet.
<img src= "images/logo.jpg" width="500" height="300" />
41 Insertion d’image: <img> (4)
 Le paramètre alt :
 Il permet de spécifier un texte alternatif (une description de
l'image) si l’image ne peut pas être affichée par le navigateur (par
exemple si elle est introuvable).
 Cette description sera utilisée par les moteurs de recherche lors de
l'indexation de l'image.
<img src="../images/logo.jpg" alt="logo de Montmorency" />
 Le paramètre title :
 Il affiche le commentaire dans une info-bulle lorsque le
pointeur se trouve sur l’image.
<img src="../images/logo.jpg" alt="logo de Montmorency" title=
="logo du CEGEP" />
42 Image comme lien (2)
 Il suffit d’utiliser une balise <a> en

plaçant une balise d'image au milieu.
 Le contenu de la balise de lien, au lieu
d'être du texte, est une image.
<a href="lien">
<img src="image">
</a>
Exemple: lien_image.html
43 Image comme lien
44 Le XHTML
 Introduction
 eXtensible Hyper Text Markup Language.
 Il est une réécriture du HTML4.0 en XML.
 XML signifie eXtensible Markup Langage.
 Le langage
 Un langage plus strict et plus propre.
 Il est plus facile à interpréter par les navigateurs
et surtout par les interpréteurs intégrés dans les
portables qui sont de moindre capacité.
 Mise au point
 Il a été mis au point par le WC3
45 La validation du code HTML
 Un processus de vérification
 La "validation de balisage" est un processus de
vérification d'un document Web par rapport aux règles (
la grammaire) définies dans le DTD(Document type
Definition) qu’il utilise.
 Quelques règles de validation du XHTML

 Règles 1, 2 et 3
 Règles 4, 5, 6 et 7
46
Règles 1, 2 et 3
1. Le document doit respecter la structure DOCTYPE, html,

head, title, body,
2. Les noms des balises et des attributs doivent être en

minuscules.
3. Toutes les balises doivent être correctement fermées.

 Exemple: <h1> Titre1 </h1>
47 Règles 4, 5, 6 et 7
4. Les balises vides doivent toujours être terminées.

 Exemple: <br />, <hr />, <img src=“mail.png” />
5. Les attributs doivent toujours être placés entre

guillemets.
 Exemple: <a href="contact.html" >.
6. L’emboîtement des balises doit se faire sans

chevauchement.
 Exemple :
<p> Selon <a href="http://fr.wikipedia.org">Wikipédia</a></p>

7. Tout paramètre doit avoir une valeur.
4
8 Validateur
 Vous pouvez passer votre code HTML dans le

validateur suivant : https://validator.w3.org/ qui vous
indiquera si vous avez respecté tous les critères XHTML.
 Attention, une seule erreur de signe oublié (/ ou >) peut
entraîner une cascade de plusieurs dizaines d’erreurs.
 Mieux vaut se fier à votre œil d’informaticien pour
détecter les erreurs.
4
9 Sources
 Les diapositives du cours sont fortement inspirées des

cours suivants sur OpenClassrooms:
 http://openclassrooms.com/courses/comprendre-le-web
 http://openclassrooms.com/courses/apprenez-a-creer-
votre-site-web-avec-html5-et-css3
 http://openclassrooms.com/courses/dynamisez-vos-sites-
web-avec-javascript
 http://openclassrooms.com/courses/concevez-votre-
site-web-avec-php-et-mysql
50 Déclaration DOCTYPE
 Exemple:
 <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
51 Déclaration DOCTYPE (2)
 Propriétés:
 La balise DOCTYPE informe le navigateur de la
version du HTML utilisée.
 La balise DOCTYPE spécifie que le document se

conforme à certaines règles syntaxiques
DTD(Document Type Definition) précises.
 La balise DOCTYPE inclut, en fin de la balise,

l'adresse du document des normes.
52 Exemples de déclaration
DOCTYPE
 XHTML 1.0 Strict
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
 Dans cette DTD, la mise en page est réalisée à l’aide des feuilles
de style. Les éléments de présentation ou obsolètes (comme la
balise Font pour la police) et Jeux de cadres ne sont pas
autorisés.
 XHTML 1.0 Transitional
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 Cette DTD contient tous les éléments et attributs HTML, y
compris les éléments de présentation déconseillés et les
éléments obsolètes (comme la balise Font ). Les Jeux de
cadres ne sont pas autorisés.
53 Exemples de déclaration
DOCTYPE (2)
 XHTML 1.0 Frameset
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
 Cette DTD est égale à XHTML 1.0 Transitional, mais permet
l'utilisation des cadres.
 Pour une liste complète des DTD
 http://www.w3schools.com/tags/tag_doctype.asp

2-HTML Partie 1

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

2-HTML Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

420-B16-RO : Techniques de

Professeur : Sylvain Labranche

Un hypertexte est un texte contenant les liaisons

HTML permet de décrire le contenu

HTML est souvent utilisé conjointement

• Un document HTML est délimité par les marqueurs:

• Le document est composé de deux parties:

<!DOCTYPE html> La balise DOCTTYPE informe le navigateur de la

Entête du document: contient les

Les fichiers HTML doivent être

Affichage du code HTML d'une page Web dans un navigateur:

 Les balises qui n'ont pas de portée, ou orphelines, doivent

 Les marqueurs peuvent indifféremment être écrits en

 Certaines balises ont besoin d’être

 Un commentaire en HTML est un texte qui n'est pas



 Il existe 3 types de listes en HTML:

Les listes numérotées : <ol>… <ol/>

 La balise utilisée pour créer un lien est <a> pour

• Ce lien est absolu, car on indique l'adresse complète.

Ces liens sont relatifs, ils dépendent de l’emplacement de la

Exemple: Exemple: dossier liens, fichier liens.html

<p>Conclusion</p> Définition d’un

<p> <a href=“page.html#signet">haut de la page</a></p>

 Note: Pour être compatible XHTML, l’élément

 On utilise la balise img pour insérer une image.

 <img src= "cheminImage" />

 Les paramètres width et height :

 Il suffit d’utiliser une balise <a> en

 Quelques règles de validation du XHTML

1. Le document doit respecter la structure DOCTYPE, html,

2. Les noms des balises et des attributs doivent être en

3. Toutes les balises doivent être correctement fermées.

4. Les balises vides doivent toujours être terminées.

5. Les attributs doivent toujours être placés entre

6. L’emboîtement des balises doit se faire sans

<p> Selon <a href="http://fr.wikipedia.org">Wikipédia</a></p>

 Vous pouvez passer votre code HTML dans le

 Les diapositives du cours sont fortement inspirées des

 La balise DOCTYPE spécifie que le document se

 La balise DOCTYPE inclut, en fin de la balise,

 Pour une liste complète des DTD

Vous aimerez peut-être aussi