Cours HTML

BENAHOU TECHNOLOGIE
Apprendre le langage HTML (HyperText Markup

Language)
Page 1: HTML C'est quoi?
Qu'est ce que HTML?

HTML (HyperText Markup Language) est un langage de description (dit de
marquage) de pages Web. Il permet de présenter les documents hypertextes
destinés à être affichés sur le navigateur. Il s'agit d'un langage coté client (tout
comme CSS et Javascript). Il est supporté et développé par W3C.
L'origine du HTML remonte au début du Web. En effet, il a été inventé vers les
années 1989 afin qu'il puisse présenter les documents qui circulent sur la toile et
établir des liens entre eux à travers les liens hypertextes (ou hyperliens).
Versions du langage
En 1989 HTML1.0 est apparu, il se basait sur les spécifications du standard SGML
(Standard Generalized Markup Language) qui est aussi un langage de description à
balises. Puis HTML2.0 a vu le jour en 1995. En 1997, HTML3 puis HTML4 sont
apparus.
HTML4 est la version du langage la plus populaire, elle est toujours supportée de
nos jours malgré l’apparition du standard HTML5 qui constitue une révolution dans
le monde du Web.
Il existe aussi un autre standard qui est XHTML (eXtensible HyperText Markup
Language). Il s'agit d'un langage de balisage fondé sur XML mais qui utilise
presque les mêmes balises que HTML.
Objectif du cours
L'objectif de ce cours est d'apprendre à utiliser le langage HTML. Pour bien
démarrer, nous allons nous contenter de la syntaxe simple de HTML4 (un cours de
HTML5 est également disponible sur ce site).
H T M L 1 | 76
Quand je dis "apprendre à utiliser le langage" ne veut dire en aucun cas que vous
devez apprendre sa syntaxe par cœur, mais savoir comment éditer un document
HTML dans les règles en vous faisant assister par la documentation. Dans peu de
temps, et avec la pratique, vous allez vous rendre compte que vous avez réellement
appris la syntaxe. Super!
Prérequis
Vous avez sans doute remarqué dans les propriétés de ce cours que ce dernier est
destiné aux débutants. Il n'est donc pas nécessaire d'être un informaticien
chevronné pour en tirer profit. Tout ce dont vous avez besoin c'est de la patience,
être à l'aise avec le clavier, avoir un minimum de notions en informatique et en
traitement de texte, être passionné et en fin, être un grand amateur de navigation sur
le Web.
Si vous rencontrez un terme que vous ne comprenez pas, allez jeter un œil sur le
glossaire. J'ai essayé d'y expliquer brièvement les termes les plus courants dans le
jargon du développement Web.
Les outils dont vous aurez besoin

Pour bien maîtriser le langage HTML, il faut pratiquer. Il vous faudra donc un
éditeur de code et un navigateur pour tester ce que vous avez codé.
Il existe des éditeurs WYSIWYG (pour What You See Is What You Get) qui
permettent de construire facilement un document HTML sans avoir besoin de
connaitre la syntaxe. Mais pour devenir un bon développeur il faut essayer d'écrire
le code source par soi même. Je vous recommande donc de vous servir d'un
éditeur texte. Personnellement je préfère Sublime Text que vous pouvez
télécharger gratuitement. Un autre éditeur gratuit très populaire du nom de
Notepad++ est disponible en téléchargement ici.
Page 2: Comment créer une page HTML?

Format d'une page HTML
Une page HTML est un fichier texte (après tout, le code HTML est du texte) avec
l'extension .html ou .htm. Il n'y a absolument aucune différence entre les deux
extensions. La première est l'extension normale alors que la deuxième est plus
H T M L 2 | 76
BENAHOU TECHNOLOGIE
courte et aussi plus adaptées aux anciens systèmes d'exploitation qui comprenaient
seulement les extensions en 3 caractères.
Les fichiers HTML sont déposés dans un serveur de fichiers (voir serveur Web
dans le glossaire). Il ne nécessite donc aucune exécution par le serveur car HTML
est un langage coté client. Par conséquent, quand vous créez votre fichier HTML, il
n'y a aucun problème à le mettre n'importe où dans votre ordinateur (au bureau par
exemple) car c'est le navigateur qui l’exécutera après ouverture.
Les développeurs ont pour coutume de nommer la page d'accueil de leur site Web
"index", est puisque c'est un document HTML alors son nom complet sera
"index.html". Essayez de faire de même. Si vous utilisez Windows, je vous
recommande d'afficher les extensions de vos fichiers, car le système a tendance à
les masquer. Pour ce faire, ouvrez n'importe quel dossier puis cliquez sur
"organiser" puis "Options des dossiers et de recherche". Ensuite allez sur l'onglet
"Affichage" puis décochez la case "Masquez les extensions des fichiers dont le type
est connu". Vous verrez apparaître les extensions de tous vos fichiers y compris
celle de votre fichier index.html.
A quoi ressemble le contenu d'une page HTML?

Un document écrit en HTML ressemble à ceci:
<html>
<head>
<title>Ma première page HTML</title> <meta http-
equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<h1>Il s'agit d'un exemple de HTML</h1>
<div>
<font color="#DD7700"><b>HTML</b></font> est un langage de
description de pages Web.
</div>
</body>
</html>
Mieux encore, pour voir à quoi ressemble le code source de cette page Web,
cliquez sur le bouton droit de votre sourie en plaçant celle ci sur la page, puis
sélectionnez "Afficher le code source de la page" (le message à sélectionner peut
changer légèrement d'un navigateur à un autre, mais je suis sûr que vous vous en
sortirez).
H T M L 3 | 76
Comme je l'ai signalé au début de ce chapitre, un document HTML contient du
texte, mais vous avez certainement remarqué la présence des symboles < et >. Ces
deux chevrons (ouvrant et fermant) avec le mot qu'ils contiennent constituent ce
que l'on appelle une balise.
Un document HTML est structuré sous forme de balises, chaque balise a un sens
que le navigateur comprend et exécute pour que le document soit présenté tel que
les balises le dictent.
Page 3: Balises HTML, attributs et caractères spéciaux
Balises HTML
Les balises constituent l'élément de base du langage HTML. Chaque balise a une
signification que le navigateur connait et applique au contenu. C'est comme ça que
la présentation du document est effectuée.
Une balise est représentée par: le chevron ouvrant + le nom de la balise + le

chevron fermant. Exemple <b> ou <body>.
Il existe deux types de balises: des balises ouvrantes et des balises fermantes. Elles
vont souvent ensemble de telle sorte que la balise ouvrante applique un effet au
contenu qui la suit et la balise fermante cesse l'effet en question. La balise fermante
se distingue par un slash (/) qui vient juste avant le nom de la balise.
Exemple </b> est la balise fermante de <b> et </body> est la balise fermante de
<body>.
Néanmoins, il existe des balises ouvrantes qui n'ont pas de balises fermantes
associées. On les appelle des balises auto fermantes ou des balises orphelines. Ce
sont des balises qui s'ouvrent et se ferment au même moment et elles appliquent
leur effet à l'endroit où elles sont déclarées (et pas au contenu qui les suit comme
les balises qu'on a vu ci haut). Exemple: <br>.
Il serait utile de mentionner que depuis l'apparition du standard XHTML, les noms
des balises orphelines finissent par un espace suivi de slash. Exemple <br />. Mais
au début de ce cours j'ai précisé que nous allons voir la syntaxe simple de HTML4
H T M L 4 | 76
BENAHOU TECHNOLOGIE
qui n'exige pas cette écriture pour ce genre de balises. Alors dans le reste de ce
cours, nous écrirons les balises orphelines sans espace-slah. Cependant nous
adopterons cette écriture quand nous arriverons au cours de HTML5.
Imbrication des balises

Un contenu peut subir l'effet de plusieurs balises à la fois. Si c'est le cas, alors une
règle s'impose: En cas d'imbrication de plusieurs balises, la première balise ouverte
est la dernière à fermer. Il faut donc fermer les balises dans l’ordre inverse de leur
ouverture.
Le code ressemblera à ceci:
<balise1><balise2><balise3>Contenu</balise3></balise2></balise1>
Les attributs
La plupart des balises HTML peuvent appliquer des effets différents selon les
préférences du développeur. C'est comme si on peut les personnaliser à notre guise.
C'est là où les attributs interviennent.
Les attributs sont déclarés dans la balise ouvrante. Ils représentent des paramètres
qui personnalisent la balise où ils sont définis et ils possèdent des valeurs. Une
balise peut renfermer plusieurs attributs à la fois, chacun avec sa valeur.
Une balise possédant des attributs ressemble à ceci:
<balise attribut1="valeur1" attribut2="valeur2"

attribut3="valeur3"...>Contenu</balise>
Exemple:
<font color="red" face="arial">Bonjour à tous</font>
La balise ouvrante <font> applique la couleur rouge et la police Arial au contenu
qui la suit qui n'est rien d'autre que le message "Bonjour à tous". La balise fermante
</font> cesse l'effet appliqué par la balise ouvrante du même nom.
Les attributs peuvent s'appliquer sur les deux catégories de balises qu'on a vu; les
balises constituées de l'ensemble {balise ouvrante et balise fermante} et les balises
orphelines.
L'ordre de déclaration des attributs n'a pas d'influence sur le résultat.
Pour que l'écriture du code HTML soit correcte il faut vérifier les points suivants:
H T M L 5 | 76
• Il ne doit pas y avoir d'espace entre le chevron d'ouverture et le nom de la balise
• Il doit impérativement y avoir un espace (ou plus) entre le nom de la balise et
l'attribut
• Il doit impérativement y avoir un espace (ou plus) entre les attributs successifs
• La valeur de l'attribut doit être déclarée entre des guillemets (doubles quote ou
simple quote). Cependant les navigateur peuvent tolérer l’absence des guillemets,
mais votre code reste invalide du point de vue de W3C(*).
(*) Pour vérifier la validité de votre code par W3C, vous pouvez le soumettre au
validateur à l'adresse validator.w3.org. Mais sachez que la majorité des grands sites
sur la toile (ou presque tous) n'ont pas le code valide et pourtant il est compatible
avec tous le navigateurs populaires.
La casse n'est pas vérifiée en HTML, c'est à dire que vous pouvez écrire vos balises
et attributs en minuscule ou en majuscule. Bien que les développeurs ont tendance
à les écrire en minuscule.
Les caractères spéciaux

HTML est constitué principalement de balises. Mais ce n'est pas tout car il y a des
séquences, autres que les balises, que le navigateur reconnait et remplace par leurs
significations. On appelle ces séquences: caractères spéciaux.
Le code HTML des caractères spéciaux commence par le symbole "&" et fini par
";". Par exemple © signifie "©".
Le tableau suivant liste les caractères spéciaux les plus utilisés en HTML:
H T M L 6 | 76
BENAHOU TECHNOLOGIE
Carctère Code HTML
" "
& &
< <
> >
Oeoe &oelig;
Espace
£ £
© ©
® ®
± ±
µ µ
½ ½
Ç Ç
H T M L 7 | 76
Ææ æ
Certains caractères spéciaux comme © ou & peuvent être écrits directement sans
passer par leur code HTML.
HTML ne prend pas en compte la succession d'espaces blancs, seul le premier et
considéré. Pour forcer plusieurs espaces successifs il faut passer par le code HTML

Dans les pages qui suivent nous allons voir la signification des balises HTML.
N'oubliez pas que nous sommes entrain de voir HTML4 pour maîtriser la syntaxe
de base. Après nous migrerons vers le nouveau standard HTML5 en toute facilité.
Page 4: Les balises HTML de base
Les balises <html>, <head> et <body>

Tout document HTML doit contenir au minimum 3 balises. Sans ces balises, le
document sera quand même exécuté par le navigateur mais il ne sera pas valide de
point de vue de W3C, et peut présenter des problèmes lors de son référencement
sur les outils de recherche. Il faut donc avoir la bonne habitude de les déclarer en
premier avant d'inclure du contenu.
Les trois balises HTML minimales sont: <html>, <head> et <body>.
Balise <html>
La balise <html> est la balise de premier niveau. Elle renferme tout le contenu de la
page Web. Elle est déclarée au début du document. La balise fermante </html>
vient clôturer le document en la déclarant à la fin.
H T M L 8 | 76
BENAHOU TECHNOLOGIE
Balise <head>
La balise <head> représente l'entête du document. Elle contient des donnés
supplémentaires qui ne sont pas nécessairement affichées sur le navigateur, mais
elle peuvent fournir des informations complémentaires à l’exécution de la page par
celui-ci, ou des informations utiles aux outils de recherche en vu de référencement.
Une des balises les plus utilisées dans la balise <head> est la balise <title>. Cette
balise indique le titre du document. Celui-ci sera affiché sur la barre de titre du
navigateur. C'est une balise qui doit être fermée pour indiquer la fin du titre.
On trouve aussi la balise <meta> qui fournit des informations

supplémentaires sur le contenu. (Il existe plusieurs balises <meta>
qu'on va voir en détail dans ce cours).
Les balises <meta> sont des balises orphelines et ne sont, par conséquent, pas
fermées.
L'entête peut contenir aussi la balise <script> qui évoque un script externe
(généralement écrit en Javascript), et la balise <link> qui appelle une ressource
externe comme une feuille de style CSS ou une icone à afficher sur la barre des titre
du navigateur. (Ces deux balises seront aussi vues en détail un peu plus loin).
Balise <body>
C'est la plus importante parmi les balises vues précédemment. En effet, la balise
<body> renferme le contenu du corps. C'est ce qui sera réellement visible sur le
navigateur par les internautes.
La balise <body> doit aussi être fermée pour indiquer la fin du corps du document.
Elle peut contenir des attributs, mais la plupart d'ente elles ne sont pas compatibles.
On parle de code non compatible s'il ne produit pas le même résultat sur les
différents moteurs de rendu.
Cependant <body> peut contenir un attribut plus au moins utilisé, il s'agit de
bgcolor qui permet de colorer l'arrière-plan de la page Web en entier. La balise est
donc déclarée ainsi:
<body bgcolor="orange"></body>
H T M L 9 | 76
La couleur d'arrière plan sera donc orange. Il suffit de mentionner le nom de la
couleur en anglais pour que celle ci soit reconnue en HTML. Cependant il existe
une manière plus efficace pour déclarer les couleurs qu'on va voir après.
Code HTML minimal
Voici un exemple de code minimal qu'on peut éditer:
Essayer de reproduire ce code sur votre éditeur, enregistrez le à n'importe quel

endroit sur votre ordinateur (n'oubliez pas l'extension .html) et exécutez le par votre
navigateur préféré. Pas de surprise, le document est vide, à part le message "Titre
de ma page Web" qui s'affiche sur la barre de titre, il n'y a absolument aucun
contenu. C'est normal après tout, car la balise <body> qui est sensée accueillir du
contenu est vide.
Voilà, vous savez maintenant comment écrire un document HTML. Dans la page
suivante nous allons voir les balises de formatage du texte.
Page 5: Balises de formatage du texte - Partie 1
Balises de formatage de texte sans attributs

Il existe d'innombrables balises qui permettent de mettre en page un texte en
HTML. Nous nous intéresserons aux balises les plus utilisées (Après tout, ce cours
est destiné aux débutants, alors il ne faut pas trop corser les choses). Mais soyez sûr
qu'avec les balises que nous allons voir, vous pouvez réussir une bonne page Web.
Nous allons d'abord commencer par les balises qui ne nécessitent pas d'attributs. A
elles seules, elles peuvent formater un texte.
Balise <b> et <strong>
H T M L 10 | 76
BENAHOU TECHNOLOGIE
La balise <b> met le texte qu'elle contient en gras (bold). C'est utile pour les textes
importants ou les titres.
Par exemple:
<b>Ce texte est écrit en gras</b>
Ce qui donne:
Ce texte est écrit en gras
La balise <strong> met aussi le texte en gras, elle peut remplacer la balise <b>, bien
que celle ci est plus populaire.
Balise <u>
La balise <u> (pour underline) souligne le texte qu'elle entoure. C'est utile pour
attirer l'attention à un mot ou une phrase.
Par exemple:
<u>Texte souligné</u>
Ce qui donne:
Texte souligné
Balise <i>
La balise <i> (pour italic) met le texte en italique. C'est pratique pour les citations
ou les notes.
Par exemple:
<i>Texte en italique</i>
Ce qui donne:
Texte en italique
Balise <s>
La balise <s> (pour strike) barre le texte. C'est pratique pour marquer un contenu
obsolète ou invalide (par exemple: sur les sites Ecommerce, on barre généralement
les anciens prix d'articles en promotion, pour mettre en valeur le nouveau prix).
Par exemple:
<s>Texte barré</s>
Ce qui donne:
H T M L 11 | 76
Texte barré
Exemple pour récapituler

Supposons que je veux écrire la phrase suivante "HTML est un langage de
description de pages Web et non pas un langage de programmation", de telle sorte
que "HTML" soit en gras et souligné, "est un langage de description de pages Web"
souligné, et "et non pas un langage de" italique et "de programmation" italique et
barré.
Le code qui fait ceci peut s'écrire ainsi:

<u><b>HTML</b> est un langage de description de pages Web</u>
<i>et non pas un langage de <s>programmation</s></i>
Le résultat est:
HTML est un langage de description de pages Web et non pas un langage de
programmation
Vous avez certainement vu en pratique le principe d'imbrication de balises
"Première balise ouverte, dernière balise fermée". Au début du code j'ai ouvert la
balise <u> puis la balise <b>. Quand j'ai fermé, j'ai commencé par </b> puis </u>.
Cependant, il existe de nombreuse façons qui permettent d'avoir le même résultat,
mais vous devriez probablement mettre un peu plus de balises. Le principe
d'imbrication permet donc (en plus de rendre le code conforme) d'économiser les
balises et rendre le code plus court.
Remarquez aussi que le code source contient un retour à la ligne (après la balise
</u>), mais le résultat eu sur le navigateur n'en contient pas! C'est tout à fait
normal, le fait d’appuyer sur "entrer" dans le code n'est pas pris en compte par le
navigateur. Même les tabulations et les espaces répétés ne sont pas considérés.
Mais il existe une solution, nous la verrons quand ça sera le moment.
Balises <h1>, <h2>...<h6>

La balise <h1> (heading) désigne un titre de premier niveau. Le texte qu'elle
entoure est de grande taille et mis en gras. Il est utile pour créer les grands titres
d'une pages. La balise <h2> désigne un titre de deuxième niveau, elle applique le
même effet que la balise précédente mais avec une taille de caractères légèrement
plus petite. C'est pratique pour les sous-titres. Il existe aussi <h3>, <h4>, <h5> et
<h6> avec une taille de caractères de plus en plus petite.
Par exemple:
<h1>Titre de premier niveau</h1>
<h2>Titre de deuxième niveau</h2>
H T M L 12 | 76
BENAHOU TECHNOLOGIE
<h3>Titre de troisième niveau</h3>

<h4>Titre de quatrième niveau</h4>
<h5>Titre de cinquième niveau</h5>
<h6>Titre de sixième niveau</h6>
Ce qui donne:
Titre de premier niveau

Titre de deuxième niveau
Titre de troisième niveau
Titre de quatrième niveau
Titre de cinquième niveau
Titre de sixième niveau
0.
Balises <sup> et <sub>

La balise <sup> met un texte en exposant et la balise <sub> le met en indice.
Par exemple, le code suivant:

x<sup>2</sup>
donne:
x2
et ce code
H<sub>2</sub>O
donne
H2O
Retour à la ligne: Balise<br>

Pour retourner à la ligne à n'importe quel moment, il suffit de déclarer la balise
<br>. Il s'agit d'une balise orpheline (donc pas de </br>).
Exemple:
Ligne 1 <br>
Ligne 2 <br> Et ligne
3
Ce qui donne le résultat suivant:
H T M L 13 | 76
Ligne 1
Ligne 2
Et ligne 3
Commentaire HTML 
Un commentaire HTML est déclaré comme ceci: <-- Commentaire ->. Il est visible
dans le code source mais ignoré par le navigateur. Il sert à marquer un bloc de code
pour que celui-ci soit facilement trouvé et compris lors de sa prochaine
manipulation.
Exemple:

<i>Le commentaire n'est pas visible sur le navigateur.</i>
Le résultat eu sur le navigateur est:

Le commentaire n'est pas visible sur le navigateur.
Balise <pre>
Nous avons vu précédemment que pour intégrer un retour à la ligne il faut déclarer
la balise <br>, et pour mettre plusieurs espaces ou tabulations il faut passer par le
caractère spécial . Cependant, il existe une méthode très simple pour
afficher un contenu tel qu'il a été édité dans le code. C'est à dire, si vous mettez une
tabulation dans le code, celle ci sera automatiquement reprise dans le navigateur, et
si vous sautez une ligne, ce saut de ligne sera aussi visible sur le navigateur. La
solution magique s'appelle la balise <pre>.
Exemple:
<pre>
Là-haut sur la montagne, l'était un vieux chalet.
Murs blancs, toit de bardeaux,

Devant la porte un vieux bouleau.

</pre>
Le résultat du code est le suivant:
Murs blancs, toit de bardeaux,
Devant la porte un vieux bouleau.
H T M L 14 | 76
BENAHOU TECHNOLOGIE
Page 6: Balises de formatage du texte - Partie 2
Balises de formatage de texte avec attributs

Avec la même balise on peut réussir plusieurs effets différents. C'est grâce aux
attributs que celle ci renferme. Une des balises les plus populaires de HTML est la
balise <font>.
Balise <font>
La balise de formatage de texte la plus connue est sans doute la fameuse <font>.
Bien qu'elle a été rendue obsolète par W3C, les navigateurs continuent encore à la
prendre en charge.
La balise <font> doit sa notoriété aux effets qu'elle peut apporter aux textes qu'elle
inclue.
Elle dispose de trois attributs principaux qui permettent d'appliquer des effets
non négligeables aux textes. Ces trois attributs sont: face, size, et color.
L'attribut face:
L'attribut face permet de spécifier la police à utiliser pour afficher le texte inclus
dans la balise <font>. Par défaut c'est la police "Times New Roman" qui est
appliquée par la plupart des navigateurs si aucune police n'est spécifiée. "Times
New Roman" est une police de la famille "Sérif" et elle n'est pas très adaptée aux
pages
Web.Cependant d'autres polices pourront bien faire l'affaire comme "verdana" ou
"arial" qui sont assez populaires et sont supportés par de nombreux systèmes
d'exploitation.
Pour que la police soit exécutée correctement, il faut qu'elle soit disponible sur le
système d'exploitation du client. Par exemple la police "Rondalo" n'est pas
populaire et par conséquent elle n'est pas disponible que chez peu d'utilisateurs
(comme les designers ou les infographistes) et le fait de la déclarer comme valeur
H T M L 15 | 76
de l'attribut face incitera le navigateur du client à charger la police par défaut qui
est "Times New Roman".
L'attribut size:
Vous l'avez sûrement deviné. L'attribut size change la police du texte. Par défaut le
navigateur applique la taille 12 points (écrit 12pt) aux polices, sauf quelques
exceptions comme "Netscape Navigator" qui applique par défaut la taille 10pt. (Le
point est l'unité de mesure des polices. Il en existe d'autres, mais je préfère laisser
ce volet fermé jusqu'au cours de CSS).
HTML ne supporte (malheureusement) que 7 tailles de police seulement, elle sont

déclarées par des indices allant de 1 à 7. Le tableau suivant détaille la valeur de
chaque indice:
Indice (valeur de l'attribut size)

Valeur réelle en pt
1 8pt
2 10pt
3 (par défaut) 12pt
4 14pt
5 18pt
6 24pt
7 36pt
La limitation des possibilités de redimensionner un texte à sa guise n'est qu'un des

nombreux problème de design de HTML. En effet, HTML sert essentiellement à la
H T M L 16 | 76
BENAHOU TECHNOLOGIE
création du contenu. Cependant, pour réussir un design attrayant et absolument

personnalisable, une autre technologie s'offre à vous; c'est CSS (Cascading Style
Sheets) dont un cours détaillé est disponible sur ce site.
L'attribut color:
Dans un texte, il n'y a pas que la police et la taille, il y a aussi la couleur. L'attribut
color sert à appliquer une couleur au texte entouré par la balise <font>. La méthode
la plus simple pour définir une couleur c'est par son nom anglais (red pour rouge,
yellow pour jaune...). Bonjour les anglophones!
Un problème surgit aussitôt à la surface. Combien de couleurs peut on définir de

cette manière? sans doute pas beaucoup (un peu plus de 100 couleurs). Cependant
un écran peut afficher environ 16 millions de couleurs. Pour couvrir toutes ces
nuances, la seule solution consiste à utiliser les codes des couleurs.
Gestion des couleurs en HTML (codes des couleurs)

Pour qu'un écran affiche une image en couleur, il combine 3 couleurs dites
primaires. Ces couleurs sont Rouge, Vert et Bleu. On parle alors de la base RVB
(RGB en anglais). Le fait de mélanger ces trois couleurs à des proportions
différentes donne naissance aux 16 millions de couleurs dont on a parlé au
paragraphe précédent.
Techniquement, chaque couleur primaire est codée sur un octet (8 bits) (si vous ne
voyez pas ce que cela veut dire allez jeter un coup d’œil sur cette page
https://fr.wikipedia.org/wiki/Bit). Les trois couleurs sont donc codées sur 24 bits et
du coup on peut avoir jusqu'à 2 nuances différentes (ce qui donne 16777216
24
couleurs).
Alors, pour avoir du rouge parfait à partir de la base RVB on doit prendre la
maximum du rouge, le minimum du vert et et le minimum du bleu. En codant cela
en binaire on obtient:
• Rouge: 11111111
• Vert: 00000000
• Bleu: 00000000
Il faut alors 24 caractères combinant des 0 et des 1. C'est un peu long non?
Heureusement, il existe le système hexadécimal
H T M L 17 | 76
(https://fr.wikipedia.org/wiki/Système_hexadécimal) qui regroupe les bits 4 par 4.
Le code précédent décrivant le rouge devient alors FF pour le rouge, 00 pour le
vert et 00 pour le bleu. L'attribut HTML color aura donc la valeur #FF0000 (le #
est là pour dire au navigateur qu'il s'agit du système hexadécimal).
De la même manière, le vert parfait est codé #00FF00, le bleu #0000FF, le blanc
#FFFFFF (le blanc est le mélange des trois couleurs primaires au maximum), le
noir #000000 (le noir désigne qu'il n'y a aucune couleur), le gris moyen #888888
(pour obtenir du gris, il faut mélanger les trois couleurs primaires aux même
proportions. Un gris claire est obtenu par des valeurs élevées et un gris foncé est le
résultat de faibles valeurs).
Le tableau suivant illustre les couleurs basiques:
couleur Code HTML
Rouge
#FF0000
Vert #00FF00
#0000FF
Bleu
#FFFFFF
#000000
Noir
#FFFF00
Jaune #FF00FF
H T M L 18 | 76
BENAHOU TECHNOLOGIE
Magenta
#00FFFF
Cyan
Gris moyen #888888
Orange #FF8800
1. Les codes #FF8800 et #F80 donnent-ils la même couleur? Oui
Non
2. Quelle est l'erreur commise dans ce code?

<html>
<head>
</head>
<body>
<b>Texte en gras</b><br>
<u>Texte souligné</u></br>
</body>
</html>
La balise <title> a été oubliée
La balise <body> ne contient pas assez de contenu
H T M L 19 | 76
La balise <br> ne doit pas être fermée
3. Si on appliquait la balise <u> à un texte dans la balise <title>, est ce que celui-ci
serait souligné?
Oui
Non
4. Par défaut, combien mesure la taille de caractères d'un titre <h1>?

24pt
36pt
18pt
20pt
5. La balise <strong> peut-elle remplacer:

La balise <u>
La balise <s>
La balise <b>
La balise <i>
H T M L 20 | 76
BENAHOU TECHNOLOGIE
Valider les reponses
Page 7: Paragraphes, conteneurs (ou containers) et

listes
Les paragraphes
Nous avons vu l’intérêt de la balise <br> qui sert à sauter de ligne à n'importe quel
endroit au milieu d'un contenu HTML. Déjà avec cette balise on peut dire que l'on
arrive à séparer les paragraphes entre eux. Mais il existe une balise plus adaptée à
cet usage. Il s'agit de <p>.
Balise de paragraphe <p>

La balise <p> est une balise de type block, c'est à dire qu'elle crée un bloc et
engendre automatiquement un retour à la ligne. Elle sert à définir un paragraphe.
On peut la doter de l'attribut align qui permet d'aligner, à sa guise, le contenu du
paragraphe. Les différentes valeurs de l'attribut align sont:
• left: C'est la valeur par défaut. Elle permet d'aligner le contenu du paragraphe à
gauche de la page (ou à gaude du conteneur qui renferme la balise <p>).
• right: Elle permet d'aligner le contenu du paragraphe à droite de la page (ou à droite
du conteneur qui renferme la balise).
• center: Elle permet de centrer le paragraphe.
• justify: Elle permet de justifier le contenu du paragraphe (prolonge le texte pour
qu'il occupe toute la ligne).
H T M L 21 | 76
Exemple:
<h1>Les paragraphes</h1>
<p align="left">
La balise <p> permet de définir un paragraphe
au sein d'un code HTML.

Il engendre un retour à la ligne avant et après.
</p>
L’exécution du code sur le navigateur donne:
Les paragraphes
La balise <p> permet de définir un paragraphe au sein d'un code HTML. Il
engendre un retour à la ligne avant et après.
Avez vous remarqué les caractères spéciaux < et > dans le code source? C'est
pour afficher les chevrons de la balise <p> sur le navigateur. Si j'avais écrit la
balise normalement elle serait exécutée par le navigateur. Or, ce que je veux c'est
l'afficher et pas l’exécuter.
Les conteneurs (ou containers)

On entend par conteneur (ou container) des balises qui peuvent renfermer d'autres
éléments comme du textes ou des images. Les conteneurs les plus célèbres sont les
balises <div> et <span>.
Balise <div>
La balise <div> est une balise de type block. Elle permet de définir un conteneur ou
un bloc qui contient d'autres éléments. Il sert généralement à mieux diviser la page
Web pour placer le bon contenu au bon endroit. Cependant, la balise <div>
nécessite des styles CSS pour qu'elle soit dotée de toute sa force.
En HTML cette balise ne sert pas à grand chose si ce n'était que pour aligner du
texte ou définir un paragraphe (Elle se comporte à
peut près comme la balise <p>). Les attributs dont on peut la doter sont les même
que ceux de la balise <p>.
Exemple:
H T M L 22 | 76
BENAHOU TECHNOLOGIE
<h1>Les conteneurs DIV</h1>

<div align="left">
La balise <div> permet de définir un conteneur
de type block au sein d'un code HTML.
Il engendre un retour à la ligne avant et après.
</div>
L’exécution du code sur le navigateur donne:
Les conteneurs DIV

La balise <div> permet de définir un conteneur de type block au sein d'un code
HTML. Il engendre un retour à la ligne avant et après.
Pour centrer un contenu (texte, image ou autre objet HTML) on peut utiliser la
balise <center></center> sans être obligé à le mettre dans un conteneur <div> ou un
paragraphe <p>.
Balise <span>
La balise <span> est aussi un container, mais de type inline (elle occupe juste assez
d'espace pour afficher ce qu'elle contient et pas toute la ligne comme la balise
<div>). Par conséquent elle n'engendre pas de retour à la ligne.
Exemple:
HTML est un <span>langage</span> de description de
pages Web.
Sur le navigateur cela donne:
HTML est un langage de description de pages Web.
Vous voyez que la balise <span> n'apporte aucun effet au contenu qu'elle
entoure. Elle n'engendre même pas de retour à la ligne puisqu'elle s'agit d'une
balise de type inline. Comme pour la balise <div>, elle sera utile quand on la
dotera de styles CSS.
Les listes HTML

Pour afficher plusieurs entrées, l'une en dessous de l'autres, il n'y a pas mieux que
les listes. Il y'en a deux types: des listes ordonnées et des listes non ordonnées.
H T M L 23 | 76
Listes ordonnées: Balise <ol>
La balise <ol> permet d'avoir des listes ordonnées (ou numérotées). Elle doit être
fermée (par </ol>) et elle contient une autre balise qui est <li>. La balise <li>
permet de définir une entrée de la liste (Il y 'a donc autant de balises <li> que
d'entrées).
La balise <ol> peut avoir des attributs dont les plus importants sont:
• type: sert à définir le type de marqueur de la liste. Les différentes valeur de

l'attribut sont: 1 pour les chiffres classiques (il s'agit d'ailleurs de la valeur par
défaut), A pour l'alphabet majuscule, a pour l'alphabet minuscule, I pour les chiffres
romains majuscules et i pour les chiffres romains minuscule.
• start: indique la valeur du marqueur du début. Par défaut la liste commence par 1 (si
elle est ordonnée). Si vous mettez start="5" alors la première entrée sera marquée
par 5 et non par 1, la deuxième par
6...
Exemple:
Les noms des balises de bases à déclarer dans un
document HTML sont: <ol
type="1">
<li>HTML</li>
<li>HEAD</li>
<li>BODY</li>
</ol>
On obtient sur le navigateur:

Les noms des balises de bases à déclarer dans un document HTML sont:
1. HTML
2. HEAD
3. BODY
Liste non ordonnées: Balise <ul>
H T M L 24 | 76
BENAHOU TECHNOLOGIE
La balise <ul> permet de créer des listes non ordonnées. Elle contient aussi la balise
<li> qui permet de définir les éléments de la liste.
Tout comme la balise <ol>, la balise <ul> possède des attributs qui permettent de
personnaliser la liste. Le plus important d'entre eux est l'attribut type qui défini le
type de marquer et qui peut avoir une des valeurs suivantes:
• disc: le marqueur est un cercle plein. Il s'agit de la valeur par défaut.

• circle: le marqueur est un cercle creux.
• square: le marqueur est un carré plein.
On reprend l'exemple précédent avec la balise <ul> cette fois:

Les noms des balises de bases à déclarer dans un
document HTML sont: <ul
type="square">
<li>HTML</li>
<li>HEAD</li>
<li>BODY</li>
</ul>
Le résultat obtenu ressemble à ceci:

Les noms des balises de bases à déclarer dans un document HTML sont:
 HTML
 HEAD

BO
DY
Page 8: Images et liens hypertextes (Hyperliens)
H T M L 25 | 76
Les images
Pour afficher une image en HTML on fait appelle à la balise <img>. Toutefois on
peut afficher les images en tant qu'arrière plan, mais je préfère laisser cette partie
jusqu'à ce que nous arrivions au cours de CSS.
Balise <img>
La balise <img> permet d'afficher une image sur le navigateur. Il s'agit d'une balise
orpheline (donc pas de </img>).
La balise <img> peut avoir plusieurs attributs. Les plus importants sont:
• src: désigne la source de l'image. La valeur associée correspond au chemin vers elle
(ou son emplacement). Le chemin peut être absolu ou relatif. Le chemin absolu
représente l'URL de l'image (par exemple:
http://www.chiny.me/images/Logo_Chiny.png). Le chemin relatif, quant à lui,
désigne l'emplacement de l'image à partir de l'emplacement actuel (par exemple:
images/Logo_Chiny.png).
• border: accepte une valeur numérique (1,2...). Cette valeur désigne l'épaisseur de la
bordure qui encadre l'image. L'unité utilisée pour la bordure est le pixel (px) mais
elle est implicite, seule la valeur numérique est déclarée. Par défaut la bordure est
de couleur noire.
• width et height: signifient, respectivement, la largeur et la hauteur de l'image.
L'unité peut être le pixel (qui est implicite) ou le pourcentage (qu'il faut expliciter à
l'aide du symbole universel %). Si par exemple on donne à la largeur la valeur
100%, cela veut dire que l'image occupe toute la largeur de la page (ou du
conteneur qui accueille la balise <img>).
Si width ou height ne sont pas spécifiée alors l'image sera affichée en taille réelle.
Si seule la valeur d'une dimension (width ou height) est déclarée, l'autre dimension
sera automatiquement recalculée par le navigateur de telle sorte à conserver les
proportions originales de l'image.
• alt: représente le texte alternatif à l'image. Il accepte comme valeur un mot ou une
phrase qui sera affichée à la place de l'image si celle ci n'est pas chargée
correctement.
• title: il s'agit d'un message qui sera affiché dans une infobulle si on survole l'image
avec la souris.
H T M L 26 | 76
BENAHOU TECHNOLOGIE
Le code suivant affichera le logo de ce site en forçant la largeur à 200 pixels.

<center>
<img src="images/Logo_Chiny.png" width="200"
border="0" alt="Logo" title="Logo officiel">
</center>
Le résultat aura l’allure suivante:
H T M L 27 | 76

Vous avez remarqué que je n'ai pas déclaré l'attribut height mais le navigateur l'a
automatiquement calculé pour que l'image ne soit pas déformée.
Conseil: évitez de redimensionner les images à l'aide de width ou height. Ce
qu'il faut faire, c'est préparer l'image à l'avance (à l'aide d'un logiciel de
traitement d'images) avant de la mettre sur le site. En effet:
Si l'image est trop grande, même si vous la redimensionnez à l'aide du HTML, elle
conservera toujours son poids (sa taille en octets) et par conséquent, elle sera lourde
au moment du chargement.
Si l'image est plus petite que la taille avec laquelle vous voulez l'afficher sur le
navigateur, elle perdra sa qualité et elle ne sera pas agréable à voir.
Les liens hypertextes

Un lien hypertexte ou hyperlien est un objet HTML (texte, image ou autre) sur
lequel on peut cliquer pour aller vers une autre page (ou un autre emplacement dans
la même page). Il est considéré comme l'un des éléments les plus importants du
langage HTML puisqu'il permet de relier les pages les unes aux autres pour
constituer ainsi le Web tel que nous le connaissons.
H T M L 28 | 69
H T M L 29 | 76
Balise <a>
La balise <a> (pour anchor ou ancre) permet de créer un lien hypertexte
pointant vers un autre document ou autre emplacement. Un lien classique est
connaissable par sa couleur bleue et un style souligné (ces propriétés peuvent
être changées à l'aide du langage CSS).
La balise <a> dispose des attributs suivants:
• href: désigne le chemin vers la page de destination après avoir cliqué sur le lien.
Comme pour l'attribut src de la balise <img>, le chemin peut être absolu ou relatif.
Si par exemple la valeur de l'attribut href vaut "mailto:adresse@mail" alors, en

cliquant sur le lien, le logiciel de messagerie par défaut installé chez le client
s'ouvrira en l'invitant à écrire un mail à "adresse@mail".
• target: désigne où la page de destination sera ouverte. Il peut contenir plusieurs
valeurs mais une seule est fréquemment utilisée il s'agit de _blank (n'oubliez pas le
souligné avant le mot blank). La valeur _blank signifie que le lien sera ouvert dans
une nouvelle fenêtre (ou nouvel onglet). C'est utile pour les liens pointant vers
d'autres sites Web. Si l'attribut target n'est pas spécifié, alors la page de destination
sera ouverte dans la même fenêtre.
• title: décrit un message qui sera affiché dans une infobulle si on survole le lien avec
la souris.
Exemple:
<a href="http://www.chiny.me" title="Aller vers
chiny.me" target="_blank">
Lien vers le site chiny.me
</a>
Ce qu'on aura sur le navigateur est:
Lien vers le site chiny.me
Liens internes
Il arrive des fois qu'en cliquant sur un lien, on se déplace vers un autre
emplacement dans la même page déjà ouverte. On l'appelle alors un lien interne.
H T M L 30 | 76
Le principe est simple. Supposons que vous voulez prévoir un lien qui déplace
l'internaute vers une image dans la même page. Ce qu'il faut faire c'est ajouter une
ancre près de l'image (de préférence avant la balise <img>). L'ancre aura la forme
suivante:
<a name="toto"></a>
(Vous être libre de mettre ce que vous voulez dans l'attribut name). Notez que cet
ancre ne sera pas visible car la balise <a> ne contient aucun texte. Ensuite on va
créer le lien qui nous mènera vers l'ancre créé comme ceci:
<a href="#toto">Aller vers toto</a>
Notez que le # fait référence à la page courante. Après le # on déclare le nom de

l'ancre (la valeur de 'attribut name de tout à l'heure).
En cliquant sur le texte "Aller vers toto" on sera déplacé automatiquement vers
l'ancre et par conséquent vers l'image souhaitée.
Pour voir à quoi cela ressemble, cliquez sur ce lien: Aller vers le haut.
Images, liens hypertextes et containers en vidéo
Quiz (Pour tester vos connaissances)

1. Une page Web peut contenir un nombre illimité d'images
Oui
Non
2. Parmi les attributs suivants, lequel est obligatoire dans la balise <a>
Title
Target
Href
H T M L 31 | 76
3. La balise <img> permet d'intégrer des images JPEG et PNG seulement
Oui
Non
4. Les attributs alt et title, appliqués à une image, permettent de faire la même
chose.
Oui
Non
5. Bien que l'on peut redimensionner les images avec les attributs width et height,
il est peu recommander de recourir à cette pratique.
Page 9: Exercice - Présentation d'une page HTML

basique
Pour mettre en pratique ce que nous avons fait jusqu'ici, on va se dégourdir les
doigts par un petit exercice de récapitulation.
Énoncé
On souhaite créer une page Web classique avec une bannière en haut, un menu
horizontal juste en dessous, un grand titre et un texte. Et à la fin un bas de page qui
contient le nom du créateur (une sorte de copyright).
H T M L 32 | 76
Pour faire simple, je vous montre à quoi ça devrait ressembler:
H T M L 33 | 76
H T M L 34 | 76
H T M L 35 | 76
Accueil | Présentation | Activités | Contact
Mon premier exercice

Cet exercice permet de mettre en pratique les balises que nous avons vu jusqu'ici. N'attendez pas à ce que le
design soit épatant! En effet, il reste encore du chemin à faire avant de réussir une page Web parfaite avec un
design agréable.
Webmaser © 2015
Je vous donne des indices:
• La police utilisée est "verdana", sauf pour les liens qui ont la police par défaut.
• Le code de la couleur utilisée pour le titre et le bas de page est #003569 (C'est la
même couleur utilisée dans la majeur partie de ce site.)
• L'image de la bannière mesure 100% de la page, si vous voulez la même, rendez
vous au lien suivant: http://www.chiny.me/images/arr_bannp.png.
• Le code de la couleur utilisée pour le texte du corps de la page est :#444444 (Il
s'agit d'un gris foncé).
Pour tirer profit de l'exercice, n'utilisez qu'un éditeur texte. Si l'autocomplete

de la syntaxe est activée, désactivez la. Vaut mieux commettre des erreurs et
apprendre que de se servir d'une syntaxe prête.
Solution
Notez qu'il n'existe pas qu'un seule méthode pour réussir l'exercice, il y'en a
plusieurs, avec plus ou moins de balises. Ci après la solution que je propose:
<html>
<head>
<title>Mon permier exercice</title>
</head>
<body>
<img src="images/arr_bannp.png" width="100%" title="Mon premier
exercice">
H T M L 36 | 76
<div align="center">
<a href="accueuil.html">Accueil</a> |
<a href="presentation.html">Présentation</a> |
<a href="activites.html">Activités</a> |
<a href="contact.html">Contact</a> </div>
<h1><font face="verdana" color="#003569">Mon premier
exercice</font></h1>
<font color="#444444" face="verdana" size="2"> Cet exercice permet de
mettre en pratique les balises que nous avons vu jusqu'ici.<br>
N'attendez pas à ce que le design soit épatant! En effet,
il reste encore du chemin à faire avant de réussir une page Web parfait avec
un design <b>agréable</b>.
</font>
<br>
<div align="right"><font color="#003569" face="verdana"
size="1">Webmaser ©
2015</font></div>
</body>
</html>
Simple non? Si vous n'y arrivez pas vous pouvez relire les pages précédentes de ce
cours et vous y arriverez haut la main. Courage!
Page 10: Les tableaux HTML
Les tableaux en HTML

Nous avons déjà vu deux balises qui servent de conteneur à savoir <div> et
<span>. C'est à dire qu'ils peuvent contenir d'autres balises afin de donner une
structure au document. Mais j'ai précisé que ces deux balises ne servent pas à
grand chose si nous ne les
H T M L 37 | 76
dotons pas de styles CSS. Cependant, il existe un autre objet HTML qui peut servir
de conteneur sans être obligé de faire appel au CSS. C'est le tableau HTML.
Les tableaux peuvent servir de grille qui contient des données structurées en ligne et en
colonne. Comme par exemple une liste d'articles avec leurs prix. Mais ils peuvent servir
également de conteneurs qui renferment d'autres objet HTML afin de structurer sa page
Web sous forme de cellules et faciliter ainsi la mise en page.
Pour créer un tableau nous avons besoin, au moins, de trois balises de base: <table>,
<tr> et <td>.
Balise <table>
La balise <table> est le conteneur principal. Elle permet de déclarer un tableau et
peut accueillir de nombreux attributs dont les plus fréquents sont:
border: définit l’épaisseur de la bordure du tableau (et de ses cellules). Elle est
exprimée en pixels (px) mais nous nous contentons de déclarer la valeur sans l'unité.
 Celle ci étant implicite et connue par le navigateur.
width: définit la largeur du tableau. Elle est exprimé en pixel ou en pourcentage. Si
on entend les pixels alors on met la valeur sans l'unité. Si c'est du pourcentage alors
on met la valeur suivie du symbole %.

height: définit la hauteur du tableau en pixel. Mais il vaut mieux ne pas déclarer cet
attribut et laisser le tableau s'étirer en fonction de la taille de son contenu.
bgcolor: désigne la couleur de l'arrière plan du tableau. Cette couleur est exprimée en
nom anglais ou en code de couleur.

cellspacing: signifie l'espacement entre les différentes cellules du tableau. Sa valeur est
exprimée en pixel (implicite).
 cellpadding: définit la marge interne des cellules. Elle est exprimée en pixel
(implicite).

H T M L 37 | 69

Si le tableau est destiné à devenir conteneur d'autres objet HTML. Alors il serait
judicieux que les bordures ne soient pas visibles. On parle alors de tableau masqué.
L'attribut border aura donc la valeur
0.
Balise <tr>
Même si vous déclarez la balise <table> dans le code, rien ne s'affichera sur le
navigateur. En effet, ce qui peut être affiché ce sont les cellules d'un tableau, et une
cellule c'est au moins une ligne et une colonne.
La balise <tr> permet d'ajouter une ligne à un tableau. Elle est directement déclarée dans
la balise <table>. Il y a donc autant de balises <tr> que de lignes.
La balise <tr> peut accueillir des attributs comme height ou bgcolor, mais la plupart
des développeurs (y compris moi) préfèrent la déclarer sans attribut.
Balise <td>
La balise <td> représente une colonne. C'est elle en fait le vrai conteneur, car
c'est elle qui peut accueillir du contenu. Elle est déclarée dans la balise <tr>. Si
vous voulez avoir un tableau avec une ligne et deux colonnes, alors vous devez
déclarer une balise <tr> et dans celle ci, deux balises <td>.
Si je vous ai conseillé de laisser la balise <tr> sans attributs, c'est parce que c'est la
balise <td> qui doit en avoir. Les principaux attributs qu'on peut déclarer sur la
balise <td> sont:
width: définit la largeur de la colonne. Elle est exprimé en pixel ou en pourcentage

par rapport à la largeur du tableau. height: définit la hauteur de la colonne en
pixel.
bgcolor: désigne la couleur de l'arrière plan de la colonne. Cette couleur est exprimée en
 nom anglais ou en code de couleur. Si la couleur d'arrière plan n'est pas déclarée, alors
la colonne est
 H T M L 38 | 69

transparente, et c'est la couleur de l'arrière plan du tableau qui sera visible.
• align: permet de spécifier l'alignement des objets contenus dans la colonne. Elle
peut avoir une des valeurs: left (valeur par défaut), right, center ou justify.
• valign: défini l'alignement vertical des objets contenus dans la colonne. Elle peut
avoir une des valeurs: middle (valeur par défaut), top ou bottom. Il existe aussi
la valeur baseline qui signifie la ligne de base (son effet est proche de celle de la
valeur bottom).
Exemple
Supposons qu'on veut créer un tableau qui affiche la liste du matériel informatique
d'une petite entreprise avec leur quantité. Le code que je propose est le suivant:
<table border="1" width="100%" cellspacing="0" cellpadding="6">
<tr>
<td width="50%" bgcolor="#000000"><font
color="#FFFFFF">Type de matériel</font></td> <td
width="50%" bgcolor="#000000"><font
color="#FFFFFF">Quantité</font></td>
</tr>
<tr>
<td width="50%">PC de bureau</td>
<td width="50%">26</td>
</tr>
<tr>
<td width="50%">PC portables</td>
<td width="50%">32</td>
</tr>
<tr>
<td width="50%">Imprimantes</td>
<td width="50%">12</td>
</tr>
</table>
H T M L 39 | 69
Type de matériel Quantité
PC de bureau 26
PC portables 32
Imprimantes 12
Supposons maintenant qu'on veut ajouter un titre au tableau, et qu'on veut aussi
donner un sens au contenu. Il existe d'autres balises qu'on peut déclarer.
Balise <caption>
La balise <caption> est déclarée directement après la balise <table>. Elle contient
le titre du tableau et elle peut accueillir l'attribut align qui peut prendre une des
valeurs suivante: top (valeur par défaut) permet d'avoir le titre en dessus du
tableau et bottom permet d'avoir le titre en dessous du tableau.
Balise <thead>
La balise <thead> permet de déclarer les cellules d'entête. Elle est déclarée dans
la balise <table> et peut contenir des lignes (balise <tr>) qui contiennent des
colonnes (balise <td>). Les cellules d'entête sont incluses en haut.
Balise <th>
Quand la balise <thead> est déclarée, il est préférable de remplacer ses balises <td>
par <th>. La balise <th> désigne donc une légende pour les colonnes d'entête.
Balise <tbody>
Il s'agit d'une balise qui est sensée accueillir les cellules du corps du tableau.
<tbody> est déclarée dans la balise <table> est peut
contenir les balises <tr> puis <td>.
Balise <tfoot>
Il s'agit d'une balise qui est sensée accueillir les cellules du pied du tableau.
<tfoot> est déclarée dans la balise <table> après la balise <thead> est peut
contenir les balises <tr> puis <td>. Les cellules de la balises <tfoot> sont
automatiquement intégrées à la fin du tableau.
Exemple
Le tableau de l'exemple précédent peut être codé comme ceci:
<caption>Liste du matériel informatique disponible</caption>
<thead>
<tr>
<th width="50%">Type de matériel</th>
<th width="50%">Quantité</th>
</tr>
</thead>
<tfoot>
<tr>
<th width="50%">Total</th>
<th width="50%">70</th>
</tr>
</tfoot>
<tbody>
<tr>
<td width="50%">PC de bureau</td>
<td width="50%">26</td>
</tr>
<tr>
<td width="50%">PC portables</td>
<td width="50%">32</td>
</tr>
<tr>
<td width="50%">Imprimantes</td>
H T M L 46 | 76
H T M L 41 | 69
<td width="50%">12</td>
</tr>
</tbody>
</table>
Ce qui donne:
Liste du matériel informatique disponible
Type de matériel Quantité
Total 70
PC de bureau 26
PC portables 32
Imprimantes 12
C'est un peu moche n'est ce pas? C'est normal. On ne peut pas faire grand chose
coté design avec du HTML. Après tout, HTML est un langage de description et
d'intégration de contenu. Mais ne vous inquiétez pas, vos pages Web ne
ressembleront plus à cela pour longtemps. Le CSS arrive. Patience!
Fusionnement de cellules d'un tableau

Si on suppose qu'on veut créer un tableau qui contient deux lignes, et si la ligne du
dessus contient deux colonnes, alors ce qu'on a fait jusqu'ici ne nous permet pas
d'avoir un nombre différent de colonnes dans la ligne du dessous. Alors cette
dernière ne peut comporter que deux colonnes si on tient à avoir un affichage
correcte. Néanmoins, il existe des cas (d'ailleurs très nombreux) où on a besoin
d'avoir un nombre de cellules différent dans chaque ligne. La solution magique est
le fusionnement des cellules.
On peut fusionner les cellules horizontalement ou verticalement. Mais le plus

fréquent c'est de fusionner à l'horizontale grâce à l'attribut colspan.
H T M L 48 | 76
L'attribut colspan
L'attribut colspan est inclus dans la balise de colonne <td>. Il indique à celle ci
combien de colonnes il faut fusionner pour en avoir qu'une seule à la fin.
Un exemple sera en mesure de clarifier les idées. Alors, supposons que je veux
créer un tableau qui contient deux lignes et chaque ligne contient deux colonnes.
Bien entendu, y a rien de nouveau à cela. Voici le code:
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Ce code donne le résultat suivant:
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Maintenant on ne veut garder dans la première ligne que la colonne qui contient le
texte "Cellule 1". Il est donc évident qu'on va retirer la <td> qui contient le texte
"Cellule 2", mais notre tableau sera déformé. Pour éviter ce problème, sur la
colonne que l'on veut garder, on va ajouter l'attribut colspan auquel on va donner al
valeur 2. Littéralement, ceci veut dire qu'on a fusionné 2 colonnes pour n'en avoir
qu'une seule.
Voici le nouveau code:
<table>
<tr>
<td colspan="2">Cellule 1</td>
</tr>
<tr>
<td>Cellule 3</td>
H T M L 49 | 76
<td>Cellule 4</td>
</tr>
</table>
Et voilà le résultat:
Cellule 1
Cellule 3 Cellule 4
Si vous voulez fusionner 3 colonnes. Supprimez deux d'ente elles, et sur la colonne
restante mettez colspan="3" etc etc.
L'attribut rowspan
Si colspan fusionne les colonnes à l'horizontale, rowspan quant à elle, elle les
fusionne à la verticale. Le principe est le même: Enlevez la (les) colonnes en plus,
et sur celle qui reste mettez rowspan="le nombre de colonnes à fusionner".
Par exemple, avant le fusionnement:
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Le résultat est:
Cellule 1 Cellule 2
Cellule 3
Cellule 4
Après le fusionnement des cellules 1 et 3 le code devient:
H T M L 50 | 76
<table>
<tr>
<td rowspan="2">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 4</td>
</tr>
</table>
Cellule 2
Cellule 4
La page suit contient un exercice sur l'utilisation des tableaux pour diviser une page
Web.
Les tableaux HTML en vidéo

1. Par défaut, le contenu de la balise <caption> est placé
En dessus du tableau
En dessous du tableau
2. Que fait le code suivant?
H T M L 51 | 76
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Crée un tableau à deux lignes et deux colones
Crée un tableau à deux lignes, la première contient une seule colonne et la deuxième
en contient deux
Crée un tableau à deux lignes, la première contient deux colonnes et la deuxième

contient une seule
Crée un tableau à trois lignes.
3. Un tableau doit impérativement contenir autant de colonnes dans chaque ligne.

Oui
Non
4. Si l'arrière plan d'un tableau est bleu et qu'on n'a pas déclaré la couleur des
colonnes, alors l'arrière plan de celles ci sera bleu également.
Oui
Non
5. Les tableaux HTML sont souvent utiles pour:
H T M L 52 | 76
Valider les reponses Faciliter au navigateur l’exécution du code HTML
Structurer une page Web en la divisant en plusieurs zones
Rendre la page Web plus légère lors de son chargement
Page 11: Exercice - Présentation d'une page HTML à

l'aide des tableaux
Vous vous souvenez de l'exercice de la page 9? Alors, on va le modifier légèrement

en faisant appel aux tableaux.
Enoncé
On souhaite créer une page Web qui ressemble à ceci:
H T M L 53 | 76
Accueil Exercice
Présentation Cet exercice permet de mettre en pratique les balises que nous avons vu
jusqu'ici.
Activités
N'attendez pas à ce que le design soit épatant! En effet, il reste encore du
Contact chemin à faire avant de réussir une page Web parfait avec un design
agréable.
Webmaser © 2015
Je vous donne des indices:
• La police utilisée est "verdana", sauf pour les liens qui ont la police par défaut.
• Le code de la couleur utilisée pour le titre est #003569.
• L'image de la bannière mesure 100% de la page, si vous voulez la même rendez
vous au lien: http://www.chiny.me/images/arr_bannp.png.
• Le menu est structuré sous forme de liste.
• Le code de la couleur d'arrière plan du menu est #EEEEEE
• Le code de la couleur d'arrière plan du bas de page est #FF6600
Solution
<html>
<head>
<title>Mon code amélioré</title>
</head>
<body>
<tr>
<td colspan="2">
<img src="images/arr_bannp.png"
H T M L 54 | 76
width="100%">
</td>
</tr>
<tr>
<td width="30%" valign="top" bgcolor="#EEEEEE" height="200">
<ul> <li><a
href="accueil.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="activites.html">Activités</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</td>
<td width="70%" valign="top">
<h2>
<font face="verdana" color="#003569">
Exercice
</font>
</h2>
<font face="verdana" size="2"> Cet exercice permet de
mettre en pratique les balises que nous avons vu jusqu'ici.<br>
N'attendez pas à ce que le design soit épatant! En effet,
il reste encore du chemin à faire avant de réussir une page Web parfait avec un
design <b>agréable</b>.
</font>
</td>
</tr>
<tr>
<td colspan="2" align="center" height="40" bgcolor="#EE6600">
<font color="#FFFFFF"><font face="verdana" size="1">
Webmaser © 2015
</font>
</td>
H T M L 49 | 69
H T M L 56 | 76
</tr>
</table>
</body>
</html>
Page 12: Les formulaires HTML
Qu'est ce qu'un formulaire?

Un formulaire HTML permet de rendre la page Web plus interactive en la rendant
capable de dialoguer avec l'internaute à travers des champs de saisie et boutons. Un
formulaire permet à l'internaute de saisir du texte ou de valider un choix ou encore
de sélectionner une entrée. Ces informations seront ensuite (dans la plupart des cas)
envoyées au serveur pour les traiter. C'est très utile surtout quand il s'agit d'une
page Web dynamique.
Balise <form>
La balise <form> délimite les champs du formulaire (zones de texte, boutons...).
Elle peut avoir plusieurs attributs dont voici les plus fréquents:
L'attribut name
L'attribut name permet d'identifier le formulaire par un nom. On peut mettre
n'importe quel nom (à conditions qu'il ne contienne que les caractères
conventionnels comme les lettres et les chiffres). Le nom du formulaire est unique.
En effet, nous pouvons déclarer plusieurs formulaires dans la même page, pour les
distinguer les uns des autres il suffit de leur donner des noms différents.
L'attribut methode
L'attribut methode permet de spécifier la méthode à utiliser pour envoyer le
formulaire au serveur. En effet, l'objectif d'un formulaire c'est de transférer les
données saisies par le client au serveur (on dit généralement poster ou soumettre le
formulaire). En HTML, il existe deux méthodes pour envoyer un formulaire: GET et
POST.
La méthode GET
La méthode GET (method="get") est la valeur par défaut si on ne précise aucune

valeur pour l'attribut method. Cette méthode permet d'envoyer les données du
formulaires à travers l'URL en utilisant les symboles ? pour préciser la suite de
données et & pour séparer les données entre elles.
r mieux comprendre, imaginons que sur ce site il existe une page nommée
infos.html qui renferme un formulaire utilisant la méthode GET et qui contient
deux zones de textes nommées respectivement ville et pays. Au chargement du
formulaire, le client à saisie dans les deux champs les valeurs Marrakech et
Maroc. Quand le client ordonnera l'envoi du formulaire, les données saisies seront
envoyées via l'URL et celui ci aura la forme suivante:
http://www.chiny.me/infos.html?ville=Marrakech&pays=Maroc
La méthode POST (method="post") permet d'envoyer les données du formulaire au

serveur à travers une entête. Pour simplifier, on va dire que les données et la page
ne font qu'un. Les informations ne seront donc pas visibles sur l'URL. La méthode
POST permet aussi de poster un volume de données plus important que celui
transmis par GET. D'ailleurs on peut même poster un fichier à travers un formulaire
via cette méthode. C'est ce que l'on appelle le "Upload" (C'est comme si vous
"uploadez" une vidéo sur Youtube, ou votre photo de profil sur Facebook).
Il ne faut en aucun cas penser que le fait que les données ne sont pas visibles sur
l'URL grâce à la méthode POST les rend sécurisées. C'est loin d'être le cas!
H T M L 51 | 69
H T M L 58 | 76
L'attribut action
Quand un formulaire est rempli par l'internaute, il est posté au serveur pour le
traitement. Il faut donc désigner la page qui se chargera du traitement des données.
Cette page est spécifiée dans l'attribut action.
Si l'attribut action est vide ou n'est pas mentionné, alors c'est la page courante (celle
qui contient le formulaire) qui sera la page action.
Généralement, la page définie dans l'attribut action contient des scripts CGI
(Commun Gateway Interface). Ces scripts (coté serveur) se chargeront d'analyser et
traiter les données envoyées (stockage dans la base de données, exécution des
calculs...)
Supposons que nous voulons créer un formulaire nommée

"inscription" utilisant la méthode "post" et faisant appel à la page "inscription.html"
pour assurer le traitement après envoi. Le code HTML ressemblera à ceci:
<form name="inscription" method="post"
action="inscription.html"> </form>
Si vous exécutez ce code sur le navigateur, rien ne s'affichera. En effet, ce qui

sera visible c'est ce que l'on intégrera dans la balise <form>.
Que contient donc la balise <form>? Elle contient ce que l'on appelle les champs de
formulaire. Ce sont des objets comme des zone de texte ou des boutons. Nous
allons maintenant voir comment intégrer ces champs.
Balise <input>
La zone de texte est le champ de formulaire le plus célèbre. Il permet d'écrire un
texte sur une seule ligne (comme le nom ou le login par exemple). Pour créer une
zone de texte on fait appel à la balise <input>. Il s'agit d'une balise orpheline (pas
de </input>).
Notez que la plupart des champs de formulaire existants sont déclarés aussi à l'aide
de la même balise <input>. Pour distinguer une zone de texte d'un bouton par
exemple, on fait appel à l'attribut type. Détaillons les attributs les plus utilisées pour
les inputs.
Attribut type
L'attribut type permet de définir le type de champ à intégrer. Voici les valeurs à
mettre pour cet attribut et qui permettent d'avoir les champs les plus fréquents:
text: Permet d'avoir une zone de texte normale (adapté pour les noms, emails,
 login...)
password: Permet d'avoir une zone de mot de passe où les caractères sont masqués.

radio: Pour créer un bouton radio. Il s'agit d'un petit cercle qu'on peut cocher et qui
permet de faire un choix unique. Le fait de cocher un autre bouton radio décoche le
 premier.
checkbox: Permet de créer une case à cocher. C'est un petit carré qu'on peut cocher ou
décocher. Il est destiné à faire des choix multiples.
 file: Permet de créer le champ de chargement de fichier (comme une pièce jointe d'un
email).
hidden: Pour créer un champ caché. C'est comme une zone de texte mais qui n'est
 pas visible sur le navigateur. Il sert à stocker provisoirement des données jusqu'à la
phase de traitement.
 button: Permet de créer un bouton simple. A la base, ce bouton ne fait aucune
opération. Il faut donc le programmer (généralement avec Javascript).
reset: Permet de créer un bouton d'annulation. Si le formulaire contient des champs
 qu'on a déjà saisi, ce bouton permet de tout initialiser.
submit: C'est le bouton d'envoi. C'est lui qui permet de poster le formulaire
vers la page définie dans l'attribut action de la balise <form>.

H T M L 53 | 69

H T M L 60 | 76
Attribut name
L'attribut name permet de donner un nom au champ de formulaire. Le nom sert
d'identifiant du champ et doit être unique.
Attribut value
L'attribut value sert à définir la valeur par défaut d'un champ. S'il s'agit d'une zone
de texte, le fait de déclarer l'attribut value force le navigateur à initialiser ce champ
avec le texte faisant office de valeur de l'attribut. Si le champs est un bouton, alors
le texte de l'attribut value constitue l'étiquette (ou label). C'est le texte visible sur le
bouton. Pour les boutons radio ou les cases à cocher, le texte de l'attribut value n'est
pas visible sur le navigateur mais il est très utile (si on fait appel à des programmes
comme Javascript ou PHP).
Attribut size
L'attribut size contient un entier comme valeur. Il définit la largeur du champ en
caractères. Par défaut, une zone de texte mesure 20 caractères (cela veut dire qu'on
peut voir jusqu'à 20 caractères à la fois même si le texte est plus grand).
Attribut tabindex
L'attribut tabindex permet de définir l'ordre de tabulation. En pratique, si on veut
saisir un grand formulaire, on se déplace d'un champ à un autre en appuyant sur la
touche "tabulation" du clavier. Par défaut le curseur se déplace dans l'ordre où sont
déclarés les champs. On peut rompre cet ordre en définissant les valeurs de
tabindex. La valeur est un entier qui commence de 1. Le curseur se déplacera dans
l'ordre croissant de tabindex.
Attribut checked
L'attribut checked est un attribut booléen. Explicitement il est déclaré comme ceci:
checked="true", mais il suffit de déclarer checked tout seul pour que le navigateur
sache qu'il est activé. Cet attribut s'applique uniquement sur les boutons radio
(type="radio") et les cases à cocher (type="checkbox"). S'il est déclaré alors le
bouton est automatiquement coché au chargement de la page.
. Le standard HTML5 (dont le cours est disponible ici) a introduit de nouveaux
champs de formulaire de la famille <input> qui s'avèrent très pratiques lors de la
saisie
Il existe deux autres champs de formulaire mais qui ne sont pas déclarés à l'aide de la
balise <input>. Ce sont les espaces de texte et les listes de sélection.
Balise <textarea>
La balise <textarea> permet de définir un espace de texte. Un espace de texte est une
grande zone de texte qui permet d'écrire des paragraphes entiers.
Les attributs name et tabindex sont aussi applicables sur l'espace de texte mais, en plus,
il dispose des attributs suivants:
cols: définit la largeur en caractères de l'espace de texte. Elle désigne combien de

caractère une ligne peut-elle contenir. Le fait de dépasser la largeur définie entraîne
un retour automatique à la ligne.
rows: définit la hauteur de l'espace de texte. La hauteur désigne combien de ligne on
peut voir à la fois. Si le texte dépasse le nombre de ligues défini, alors une barre de
défilement qui permet d'atteindre le reste des lignes apparaît.

Balise <select>
H T M L 55 | 69

H T M L 62 | 76
La balise <select> permet de déclarer une liste de sélection (ou liste déroulante).
Elle dispose également des attributs name et tabindex. Pour remplir cette liste avec
les valeurs (appelées options) on doit déclarer une autre balise à l'intérieur, c'est la
balise <option>. Dans la balise <option> on déclare le mot à afficher (en tant
qu'élément de la liste).
La balise <option> dispose d'un attribut booléen du nom de selected. Si cet attribut
est déclaré, c'est l'option qui le contient qui sera automatiquement sélectionnée au
chargement de la page.
Exemple de formulaire d'inscription

<form name="inscription" method="post" action="">
Civilité<br>
<input type="radio" name="civilite"> Mlle<br>
<input type="radio" name="civilite"> Mme<br>
<input type="radio" name="civilite"> M.<br>
Nom et prénom<br>
<input type="text" name="nom" value=""><br> Email<br>
<input type="text" name="email" value=""><br>
Login<br>
<input type="text" name="login" value=""><br>
Mot de passe<br>
<input type="password" name="pass" value=""><br>
Vous être<br>
<select name="niv">
<option>Etudiant</option>
<option>Fonctionnaire</option>
<option>Employé au secteur privé</option> </select><br>
<input type="button" name="envoyer" value="S'inscrire">
</form>

Civilité
Mlle
Mme
M.
Nom et prénom
Email
Login
Mot de passe
Vous être
Employé au secteur privé
J'avoue, le résultat n'est pas très joli mais c'est du HTML. A lui seul le design laisse
à désirer. Mais tout cela sera du passé très bientôt.
Vous avez remarqué que les noms des boutons radio sont les mêmes? En effet, si
on souhaite que le client ne puisse choisir qu'une seule option, alors il faut donner à
tous les boutons le même nom. De cette manière, l'ensemble des boutons radio
constituent un même groupe.
Pour les cases à cocher, même si vous leur donnez le même nom, le client pourra
quand même faire plusieurs choix. C'est naturel car les cases à cocher sont faites
pour les choix multiples.
On peut appliquer un cadre qui entoure notre formulaire grâce à la balise
<fieldset> et une légende en guise de titre avec la balise <legend>.
Exemple:
<form name="inscription" method="post" action="">
<fieldset>
<legend><h2>Inscription</h2></legend>
Civilité<br>
<input type="radio" name="civilite"> Mlle<br>
<input type="radio" name="civilite"> Mme<br>
<input type="radio" name="civilite"> M.<br>
H T M L 64 | 76
Nom et prénom<br>
<input type="text" name="nom" value=""><br> Email<br>
<input type="text" name="email" value=""><br>
Login<br>
<input type="text" name="login" value=""><br>
Mot de passe<br>
<input type="password" name="pass" value=""><br>
Vous être<br>
<select name="niv">
<option>Etudiant</option>
<option>Fonctionnaire</option>
<option>Employé au secteur privé</option> </select><br>
<input type="button" name="envoyer" value="S'inscrire">
</fieldset>
</form>
Ce qui donne:
Les formulaires en vidéo
H T M L 65 | 76
1. Parmi les champs suivant, lequel est le plus adapté pour accueillir un
commentaire qui peut contenir plusieurs lignes?
<input type="text">
<input type="hidden">
<select>
<textarea>
2. Si on déclare l'attribut checked sur une case à cocher, celle ci sera cochée
Au chargement de la page
Au moment où l'on commence la saisie du formulaire
Au moment où l'on clique sur le bouton d'envoi du formulaire
3. La méthode POST permet de sécuriser les données transférées lors de l'envoi

d'un formulaire.
Oui
Non
4. Que fait le code suivant?

<fieldset>
<input type="password" name="MotDePasse"> </fieldset>
Crée une zone de mot de passe entourée par un cadre
H T M L 66 | 76
Crée une zone de mot de passe dans un formulaire du nom de "fieldset"
Crée une zone de mot de passe rendue invisible sur la page grâce à la balise
<fieldset>
5. Si on donne le même nom (valeur de l'attribut name) aux boutons radio, on peut
en cocher plusieurs à la fois.
Oui
Non
Valider les reponses
Page 13: Balises spéciales:

marquee, iframe et object
Balise <marquee>
La balise <marquee> permet de faire défiler un objet HTML (texte, image...). Elle a
été développé par Microsoft et intégrée initialement à son navigateur "Interner
Explorer". Cependant, d'autre navigateurs l'on également pris en charge, à
l'exception de "Netscape
Navigator" qui affiche le contenu de la balise sans le faire défiler.
Le comportement et l'allure de la balise <marquee> peuvent être personnalisés

grâce à de nombreux attributs.
attribut behavior
L'attribut <behavior> agit sur le style d'animation souhaité. Il peut avoir trois
valeurs différentes:
• scroll: C'est le comportement par défaut. Il permet de faire défiler l'objet d'un coté à
un autre. Quand l'objet disparaît, il réapparaît à l'endroit initial et refait le cycle.
• slide: L'objet défile d'un coté vers l'autre, quand il atteint la position finale il
s'arrête et l'animation est interrompue.
• alternate: L'objet défile en va-et-vient entre la position 1 et la position
2.
H T M L 67 | 76
Exemple:
<marquee behavior="alternate">
Texte défilant en va-et-vient
</marquee>
Le code donne ceci:
Les attributs width et height

Désignent respectivement la largeur et la hauteur de la zone de défilement. Ils sont
exprimés en pixel (px) qui est implicite (la valeur est déclarée sans l'unité).
L'attribut bgcolor
Comme pour les tableau et la balise <body>, l'attribut bgcolor spécifie la couleur
d'arrière plan de la zone de défilement. Elle est exprimée en nom anglais de la
couleur ou code de celle ci.
L'attribut direction
L'attribut direction spécifie la direction du défilement. Elle peut avoir 4 valeurs:
• left: Signifie vers la gauche. L'objet défile de droite à gauche.

• right: L'objet défile de gauche à droite.
• up: L'objet défile du bas vers le haut
• down: L'objet défile du haut vers le bas
Exemple:
<marquee behavior="scroll" direction="left" width="100%" bgcolor="#EEEEEE">
<h2>Texte défilant horizontalement</h2>
</marquee><br>
<marquee behavior="scroll" direction="down" width="100%" height="200" bgcolor="#EEEEEE">
<h2>Texte défilant verticalement</h2> </marquee>
Après exécution on obtient ceci:
H T M L 68 | 76
Attribut scrollamount
L'attribut scrollamount signifie le pas de défilement. Entre l'instant t et t+1 l'objet
parcours une distance appelée pas de défilement. Plus le pas est grand plus le
défilement aura l'air rapide et inversement. Il accepte une valeur numérique qui
désigne le nombre de pixels à parcourir.
Attribut scrolldelay
L'attribut scrolldelay signifie le délai de défilement. Il s'agit de la durée pendant
laquelle l'objet reste dans la même position. Plus il est grand plus le défilement est
lent. Il a comme valeur un nombre entier qui désigne le nombre de millisecondes
(l'unité ms est implicite).
Attribut loop
L'attribut loop indique combien de fois le défilement sera répété. Par défaut il vaut
la valeur -1 qui signifie à l'infini.
Exemple:
<marquee width="100%" scrollamount="2" scrolldelay="10">

<img src="http://www.chiny.me/images/footerlogo.png"> </marquee>
Ce qui donne ceci:
Balise <iframe>
La balise <iframe> permet d'insérer une page web au sein d'une autre. Elle
peut être insérée n'importe où entre les balises <body> et </body>.
De nombreux attributs peuvent être appliqués à la balise, en voici les plus
importants:
Attribut src
Vous l'avez deviné. L'attribut src permet d'indiquer le chemin (ou l'URL) de la page
web à insérer dans la balise <irfame>. Il n'est pas nécessaire que la page à insérer
H T M L 69 | 76
appartienne au même site Web. On peut toujours appeler une page appartenant à
autre site.
Attributs width et height

Comme pour les images ou les tableaux, les attributs width et height permettent
d'indiquer, respectivement, la largeur et la hauteur de l'iframe.
Attribut frameborder
L'attribut frameborder permet de spécifier l'épaisseur de la bordure de l'iframe. Elle
est utilisée exactement comme l'attribut border sur les images ou les tableaux.
Attribut scrolling
Si vous définissez yes comme valeur de l'attribut scrolling alors, une barre de
défilement s'affichera sur l'iframe si la page appelée est plus grande que les
dimensions de celle ci.
Attribut name
L'attribut name permet d'identifier une iframe par un nom unique.
Exemple:
<iframe name="moniframe" width="100%" height="400"
src="https://www.chiny.me" frameborder="0" scrolling="yes"> </iframe>
Balise <object>
La balise <object> a été inclues au langage HTML pour permettre au navigateur
d'afficher tout type de documents (que, normalement, il ne peut pas comprendre)
comme du contenu multimédia (audio ou vidéo) ou encore des documents PDF...
La balise <object> dispose de nombreux attributs dont certains sont un peu

compliqués à coder. Cependant, nous allons voir les attributs de base pour que vous
compreniez l'utilité de cette balise et ce dont elle est capable de faire.
H T M L 70 | 76
Attributs width et height
Ces deux attributs vous sont familier non? En effet, leur rôle reste inchangé;
spécifier la largeur et la hauteur de la zone d'affichage de la balise <object>. On
peut leur donner des valeurs en pixel (unité implicite qu'on ne doit pas déclarer) ou
en pourcentage.
Attribut type
Cet attribut a pour rôle d'indiquer le type de données à insérer dans la balise
<object> comme par exemple text/html qu'on a déjà vu et qui signifie document
texte écrit en HTML ou encore application/pdf qui désigne un document PDF.
Attribut data
L'attribut data spécifie le chemin (ou URL) du contenu à insérer dans la balise
<object>.
Voici une exemple d'affichage d'un document PDF sur le navigateur:

<object data="docs/ExemplePDF.pdf" type="application/pdf" width="100%" height="400">
<a href="docs/ExemplePDF.pdf">Le PDF</a> </object>
Cela donne le résultat suivant:

Vous avez certainement remarqué dans le code un lien hypertexte qui pointe sur le
document PDF. Ce lien s'affichera au cas où le
H T M L 71 | 76
navigateur ne peut pas afficher correctement le contenu. En effet, il existe des contenus
qui nécessitent des plugins spéciaux. Si le navigateur n'en dispose pas alors il ne pourra
pas afficher convenablement le contenu de la balise <object>
Page 14: Les balises META (Meta tags)
Balise <meta>
Les balise <meta> (ou Meta tags) sont des balises qui contiennent les métadonnées. Il s'agit
de données supplémentaires qui aident à l’exécution correcte de la page ou fournissent des
informations additionnelles lors de l’exécution.
Les balises <meta> sont déclarées dans l'entête du document HTML (entre les
balises <head> et </head>). Son contenu n'est donc pas affiché sur la page. C'est
une balise orpheline (alors pas de </meta>).
La balise META contient en général deux attributs. Le deuxième est toujours

l'attribut content. Quant au premier il peut être soit httpequiv ou name. Ce qui mène
à penser qu'il existe deux familles de balises META selon l'attribut déclaré.
Balise META avec l'attribut http-equiv: Cette balise fournit des informations
supplémentaire au navigateur exécutant la page, comme l'encodage ou les
redirections...
Balise META avec l'attribut name: Cette balise fournit des informations
complémentaires aux outils de recherche et d'indexation (comme les moteurs de
recherche). Elles sont largement utilisées pour le référencement des sites Web.
Ci après, la liste des balises META les plus utilisées.


H T M L 65 | 69

H T M L 73 | 76
META Content-Type
Cette balise permet de spécifier le type du document qui la contient et son
encodage.
La syntaxe de la balise ressemble à ceci:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
Dans cet exemple on a spécifié le type du document comme étant text/html. En

effet un document HTML est un document texte et ce n'est pas de n'importe quel
texte, c'est du HTML (brillant non?). Pour l'encodage (ou jeu de caractères), on a
utilisé UTF-8. Il s'agit d'un codage universel de caractères, il couvre tous les
systèmes d'écriture.
Cette balise est utile quand le serveur n'envoi pas d'entête indiquant la manière dont
le navigateur doit afficher les caractères. Car il se peut que les caractères en accent
ou les caractères spéciaux soient mal perçus par le navigateur qui les remplacera
par des symboles étranges.
META refresh
Cette balise permet de rafraîchir la page ou rediriger le navigateur vers une autre
page. Sa syntaxe ressemble à ceci:
<meta http-equiv="refresh" content="3;url=http://www.w3.org">
Si la page qui contient ce code est chargée sur le navigateur, celui ci sera redirigé
vers les site de W3C après une durée d'attente de 3 secondes. Si la durée n'est pas
spécifiée, alors elle vaut 0 seconde et la redirection est instantanée, et si la partie
contenant le message url=http://www.w3.org n'est pas déclarée, cela sous entend
que c'est la page courante qui sera rafraîchie.
META Content-Language
Cette balise permet de préciser la langue principale de la page Web.
Son code ressemble à ceci:

<meta http-equiv="Content-Language" content="fr-FR">
Ce code indique que la langue française (de la France) est la langue principale de la
page Web courante.
META description
H T M L 74 | 76
Cette balise intéresse principalement les outils de recherche (comme les moteurs de
recherche). Elle contient un résumé de la page courante. Elle est très utile pour le
référencement, c'est ce qui explique le soin pris par les développeurs d'y déclarer
les mots clés (pertinents) susceptibles d'attirer les internautes vers leurs sites.
Son code ressemble à ceci:

<meta name="description" content="résume de la page
Web">
Le résumé ne doit pas être très abondant. deux ou trois phrases pertinentes
suffisent.
Dans le cours du SEO (Search Engine Optimization) nous allons voir en détail
comment éditer les balises META d'une façon optimale pour préparer le sites Web
au référencement.
META keywords
Cette balise renferme les mots-clé qui ont un rapport avec le contenu de la page.
Elle est de moins en mois pris en considération par les outils de recherche. Elle est
codée comme ceci:
<meta name="keywords" content="mot clé 1, mot clé 2, mot clé 3, ...">
Un mot clé peut être une phrase.
META generator
Cette balise permet d'indiquer l'outil utilisé pour créer le site Web.
Généralement utilisé par les CMS (Content Management System). Sa déclaration
permet aux auteurs de ces logiciels de faire des statistiques sur le taux d'utilisation
de leur outils par les créateurs des sites Web. La syntaxe peut ressembler à ceci:
<meta name="generator" content="nom et version du logiciel">
Cette balise n'est pas utile pour le référencement.
Page 15: Validation et compatibilité HTML -
H T M L 75 | 76
Les moteurs de rendu
Validation et compatibilité HTML et le rapport avec les
moteurs de rendu
L'un des problèmes majeurs que rencontrent les intégrateurs HTML est la
compatibilité de leur pages Web. En effet, une page Web ne s'affiche pas toujours
de la même manière d'un navigateur à un autre. Le rendu obtenu peut être atteint de
quelques différences mineures à peine perceptibles par les internautes, mais parfois,
ces différences deviennent trop visibles et peuvent aller jusqu'à métamorphoser
l'apparence de la page en bouleversant de fond en comble les éléments constituant
celle ci.
Afin de palier le problème de compatibilité, les créateurs de pages Web recourent

souvent à l'une des deux techniques suivantes:
• Validation de la page: Pour cela, ils se servent généralement du validateur de

W3C dont le lien est validator.w3.org afin de rendre le code conforme aux
spécifications du Consortium.
• Faire des tests sur des moteurs de rendu différents: Chaque navigateur
embarque un moteurs de rendu. Parmi ces derniers on trouve Gecko, Trident,
Webkit, Blink, Presto et bien d'autres. Les intégrateurs choisissent alors un
navigateur par moteur de rendu pour faire les tests afin de garantir un rendu
uniforme de la page.
Dans la vidéo suivante, j'ai essayé de traiter ce sujet d'une manière concise.
H T M L 76 | 76

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

BENAHOU TECHNOLOGIE

Apprendre le langage HTML (HyperText Markup

Page 1: HTML C'est quoi?

Qu'est ce que HTML?

Les outils dont vous aurez besoin

Page 2: Comment créer une page HTML?

A quoi ressemble le contenu d'une page HTML?

Page 3: Balises HTML, attributs et caractères spéciaux

Une balise est représentée par: le chevron ouvrant + le nom de la balise + le

Imbrication des balises

Le code ressemblera à ceci:

Une balise possédant des attributs ressemble à ceci:

<balise attribut1="valeur1" attribut2="valeur2"

Les caractères spéciaux

Carctère Code HTML

Page 4: Les balises HTML de base

Les balises <html>, <head> et <body>

Les trois balises HTML minimales sont: <html>, <head> et <body>.

On trouve aussi la balise <meta> qui fournit des informations

Code HTML minimal

Voici un exemple de code minimal qu'on peut éditer:

Essayer de reproduire ce code sur votre éditeur, enregistrez le à n'importe quel

Page 5: Balises de formatage du texte - Partie 1

Balises de formatage de texte sans attributs

Balise <b> et <strong>

Exemple pour récapituler

Le code qui fait ceci peut s'écrire ainsi:

Balises <h1>, <h2>...<h6>

<h3>Titre de troisième niveau</h3>

Titre de premier niveau

Balises <sup> et <sub>

Par exemple, le code suivant:

Retour à la ligne: Balise<br>

Ce qui donne le résultat suivant:

Le résultat eu sur le navigateur est:

Murs blancs, toit de bardeaux,

Là-haut sur la montagne, l'était un vieux chalet.

Page 6: Balises de formatage du texte - Partie 2

Balises de formatage de texte avec attributs

HTML ne supporte (malheureusement) que 7 tailles de police seulement, elle sont

Indice (valeur de l'attribut size)

3 (par défaut) 12pt

La limitation des possibilités de redimensionner un texte à sa guise n'est qu'un des

création du contenu. Cependant, pour réussir un design attrayant et absolument

Un problème surgit aussitôt à la surface. Combien de couleurs peut on définir de

Gestion des couleurs en HTML (codes des couleurs)

Le tableau suivant illustre les couleurs basiques:

couleur Code HTML

Gris moyen #888888

1. Les codes #FF8800 et #F80 donnent-ils la même couleur? Oui

2. Quelle est l'erreur commise dans ce code?

La balise <title> a été oubliée

La balise <body> ne contient pas assez de contenu

4. Par défaut, combien mesure la taille de caractères d'un titre <h1>?

5. La balise <strong> peut-elle remplacer:

Valider les reponses

Page 7: Paragraphes, conteneurs (ou containers) et

Balise de paragraphe <p>

au sein d'un code HTML.

Les conteneurs (ou containers)

<h1>Les conteneurs DIV</h1>

Les conteneurs DIV

Les listes HTML