HTML Livre

1
AVANT-PROPOS
Ces notes de cours sont destinées aux étudiants de premier graduat en

Informatique pour leur permettre l'apprentissage des bases de la
programmation à travers deux langages simples : HTML.
HTML n'est pas un langage de programmation à proprement parler. Il

n'existe pas pour ce langage des notions telles celles de variable, de
structures conditionnelles, de structures répétitives; …c'est un simple
langage de description de documents à l'aide des balises, servant à la
création des pages web. A l'heure de l'Internet pour tous, il est tout à fait
normal que le futur informaticien puisse se familiariser assez tôt de cet outil
indispensable pour sa future profession.
Chaque chapitre se termine par une série de questions pour permettre au

lecteur de contrôler ses propres connaissances par rapport aux notions
étudiées dans le chapitre. Suit ensuite une série d'exercices pour la mise en
pratique des notions étudiées.
Langages : HTML L2 LMD Math-Info

2
TABLE DES MATIERES
PAGE
Avant- Propos 1
Ière partie: Programmation HTML 62
1. Généralités sur le web 63

2. Structure d'un document html 68
3. Styles d'écriture et séparateurs 73
4. Les images et les liens 80
5. Les tableaux 85
6. Formulaires 90
MAYALA LEMBA Francis

3
Ière PARTIE
PROGRAMMATION
HTML

4
1. GENERALITES SUR LE WEB
1.1. Notions sur le World Wide Web

1.1.1. La toile mondiale
On appelle Web (nom anglais signifiant toile, contraction de "World Wide
Web" d'où l'acronyme www), un des services offerts par Internet, permettant
de naviguer entre des pages web reliés par des hyperliens.
Une page web, appelée aussi document html, est un document multimédia,
c'est-à-dire un document électronique pouvant contenir du texte mis en
forme, des images, des sons, des vidéos, etc.
Image de Bruno Pouliquen( http://www.med.univ-rennes1.fr/~poulique/cours/html/)
Un hyperlien (ou un lien hypertexte) est une zone d'une page web qui est
sensible aux clics de la souris. En cliquant le lien ou en l'activant par le clavier,
vous êtes redirigé vers une autre page web ou vers un autre endroit de la
même page.
Une page web peut être locale, c'est à dire présente sur le disque dur de votre
ordinateur ou sur un ordinateur distant connecté à l'Internet en permanence
et chargé de fournir les pages web demandées; un tel ordinateur est appelé
serveur Web, qu'il soit local ou distant.
Il existe un nombre important de serveurs Web, mais les plus importants sont:
Apache (logiciel libre), IIS (Microsoft) et Netscape Entreprise.
5
1.1.2. Qu'est-ce qu'un site web ?

Un site web est un ensemble structuré des pages web reliées entre elles par
des liens hypertexte stockés sur un serveur web.
Les pages web sont généralement organisées autour d'une page centrale,
appelée page d'accueil, qui propose des liens vers un ensemble d'autres
pages hébergées sur le même serveur, et parfois vers des pages hébergées
par d'autres serveurs.
Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre

des pages web grâce à un logiciel appelé navigateur (en anglais browser)
Un navigateur permet de visualiser les pages Web et d'envoyer des requêtes

aux serveurs Web. Parmi les principaux navigateurs utilisés sur Internet,
citons Microsoft Internet Explorer, Mozilla Firefox, Scape Navigator, etc.
1.1.3. Protocoles et adresses web

La communication avec les serveurs web repose sur un ensemble de règles
appelé protocole web. Il existe plusieurs protocoles web, les principaux sont:
• http: hyper text transfert protocole (le protocole le plus utilisé sur Internet
à partir de 1990; le but de ce protocole est de permettre la navigation
entre les pages Web).
• ftp: file transfert protocole (protocole de téléchargement des fichiers)
• telnet
• smtp : send mail transfert protocol (protocole de transfert du courrier
électronique)
• mailto: (protocole d'envoie des mails à partir des documents html)
Chaque page web, et plus généralement toute ressource en ligne (image,

vidéo, musique, animation, etc.), est repérée par une adresse unique appelée
URL (Uniform Ressource Locator), permettant de localiser une ressource sur
n'importe quel serveur du réseau internet. Une URL a la structure suivante :
protocole:// nom du serveur[/chemin d'accès/nom du fichier]
(Les crochets indiquent une zone optionnelle; on ne les indique pas dans une
URL). Dans ce format:

6
• nom du serveur est une adresse alphanumérique (adresse DNS, pour

Domain Name System) commençant généralement par www (mais ce n'est
pas une obligation) suivi du nom proprement dit et se terminant par une
extension qui détermine le type du domaine auquel appartient le serveur. Les
types les plus connus sont:
- be : Belgique gouv: gouvernement
- cd : Congo Démocratique fr : France
- com : commerce net: network
- edu : education org: Organisation
(Exemple: http://www.ceni.gpuv.cd).
• Enfin, le document demandé est identifié par son chemin d'accès (en
anglais, PATH):
• nom du fichier pourra être :
• Le nom du document:
(Exemple:http://www.urec.fr/index.html)
• Le nom du document précédé par son chemin d'accès
(Exemple:
1. http://www.med.univ-rennes1.fr/antibio/endocardites.html)
• Le nom d'un programme suivi des paramètres qui sont introduits par le
signe ? et séparés par le signe &:
(Exemple:
http://www.microsoft.com/isapi/redir.dll?prd=ie&pver=6&ar=msnho
m)
• Le nom d'un document avec positionnement sur une ancre
(Exemples:
2.http://www.med.univ-rennes1.fr/etud/pharmaco/pharmacopediatrie
.htm#1.3)
3. http://www.info.univ-1. angers.fr/pub/gh/vitrine/Democgi/fixe.htm
Notez que si aucun document n'est spécifié, c'est la Page d'accueil ( HomePage
en anglais) du serveur qui est envoyée au navigateur.
Exemples:
1. http://www.apple.com/
2. http://www.ibm.com
Pour une page locale, le protocole par défaut est http, et l'URL se note selon
le format: support:\[PATH\]nom du document.html
Exemple:

7
3. C:\Doduments and settings\All Users\Salut.html

Permet de localiser le document Salut.html
1.2. A propos de html

1.2.1. Brève historique
HTML (Hyper Text Markup Language) est un langage qui sert à décrire la
structure et le contenu des documents hypertextes. En d'autres termes, html
sert à décrire comment sera placé, à l'intérieur d'un document hypertexte,
telle image, tel texte, tel lien, etc.
Le langage HTML a été mis au point par Tim Berners-Lee, alors chercheur
au CERN (Centre Européen pour la Recherche Nucléaire) à Genève, en
1990. Il fut popularisé à partir de 1993.par Mosaic, le premier navigateur
Web
Dès la version 2.0 les spécifications de ce langage ont été confiées à un

groupe international indépendant, le "World Wide Web Consortium"
(W3C). C'est cet organisme qui est chargé de la normalisation et de la
recherche sur la technologie Web.
Précisons que html n'est pas un langage de programmation dans le sens

où il n'existe pas de variables, boucles, expressions conditionnelles. En
fait, c'est plus un ensemble de codes qu'un langage, comme on le conçoit
en informatique.
1.2.2. Edition d'un document html.

Un document html n'est autre qu'un fichier texte (i.e. ASCII) auquel on a
ajouté des balises html (ou instructions html). Il est en effet parfaitement
possible de créer une page html avec un simple éditeur de texte comme
Bloc note ou WordPad sous Windows, à condition de sauvegarder le fichier
ainsi créé au format html (*.html ou *.htm) dans le type "Tous les fichiers"
(en anglais, All files).
Cependant, il existe des outils munis d'une interface graphique évoluée

permettant, d'un clic de souris, d'insérer dans le document en cours
d'édition une balise html, comme on le ferait avec un traitement de texte.

8
QUESTIONS
1. Donner la signification de chacun des abréviations suivantes:
1.1. HTML 1.4. W3B 1.7. FTP 1.10. ORG
1.2. HTTP 1.5. SMTP 1.8. DNS 1.11. CERN
1.3. URL 1.6. COM 1.9. WWW
2. Donner la structure d'une URL en indiquant le rôle de chaque terme.
3. Décrivez les différents termes de chacune des URL ci-après:
3.1. http://www.med.univ-rennes1.fr/antibio/ENDOCARDITES.htm
3.2. http://www.yahoo.com/mutigm@hotmai.com
3.3. ftp://www.eduqpsp.cd/exetats2011-2012.html
3.4. http://www.commentcamarche.net/index.php3
3.5. smtp://www.urec.fr/index.html#2.3
3.6. https://login.yahoo.com/config/login?.intl=fr&.src=ym&.do
ne=http://fr.mail.yahoo.com
3.7. http://windowsupdate.microsoft.com C:\Mes pages
Web\Formulaire.html
3.8. http://www.upn.binza.fr/cgi-n/idx/rechidx.pl?rech=
infomath)
3.9. http://www.commentcamarche.net/download/
telecharger- 118-avg-free-version-2011
3.10. mailto://www.gmail.net/makiesesay@gmail.com
3.11. http//www.apple.com/index/download/drivers/list.html
4. Qu'est-ce que?
4.1. un navigateur 4.6. une adresse internet
4.2. un hyperlien 4.7. une balise html
4.3. un serveur 4.8. un nom du domaine
4.4. un site internet 4.9. une page d'accueil
4.5. un document html
5. Donner l'année de la création de html, son auteur ainsi que le navigateur
qui l'a popularisé.
6. Citer trois exemples de:
6.1. navigateur 6.4. éditeur de texte
6.2. serveur web 6.5. protocole web
6.3. site web 6.6. type de domaine
2. STRUCTURE D'UN DOCUMENT HTML

9
2.1. Règles générales

Pour écrire un programme html, il faut retenir les règles suivantes:
a) Les balises sont toujours exprimées sous la forme d'un mot clé, encadré
par les caractères "<" et ">". Exemple : <html>.
b) Pour la plupart des balises, il existe une balise de fermeture associée,
reprenant le même nom, mais précédé du caractère "/". Exemple: 1.
</html>. La commande spécifiée s'applique donc uniquement au texte
situé entre le couple de balises ainsi formé.
c) Certaines balises ne nécessitent pas d'être refermées car elles ne
définissent pas de zone à proprement parler, mais un endroit où une action
se produit; ce sont des balises locales (ou des mono-balises)
(Exemple: 2. La balise <BR> de saut de ligne).
d) Une balise peut indifféremment être écrite en minuscules ou en majuscules.
Exemple: <HTML>, <Html>, <htMl>, <hTmL> représentent la même
balise.
e) Le formatage "manuel" d'un document (espaces, sauts de lignes,...) est
toujours ignoré. Par exemple : <html>...</html> est interprété de la même
façon par le navigateur Web que la syntaxe sur plusieurs lignes comme
indiquée ci-dessous:
<html>
..…
</html>
f) Les paramètres d'une balise sont repris à l'intérieur de la balise:
<Balise paramètre1="valeur1" paramètre2="valeur2" … paramètre
N="valeur N">
(pas d'espace avant et après le signe =). Les paramètres d'une même
balise, sont séparés par des espacements. Les paramètres ne sont pas
repris dans la balise de fermeture.
(Ex. <body text="white" bgcolor="blue"> … </body>)
g) Plusieurs balises peuvent être imbriquées, mais il est interdit de les croiser:
<html>
< body>
<font>
…
</font>
</body>

10
</ html>.
h) Un commentaire est compris dans la balise 
Exemple: 3. <!—Ceci est un commentaire -->
Les commentaires ne sont pas affichés à l'écran du navigateur.
2.2. Structure générale d'un document html

2.2.1. Introduction
Tout document html doit débuter par la balise <html> et se terminer par
</html>.
Entre ces deux balises, on définit deux zones: l'en-tête, spécifiée par la balise
<head>, ainsi que le corps, délimité par la balise <body>. Ce qui donne,
comme structure de base:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
2.2.2. L'en-tête
Dans l'en-tête, on ne met généralement qu'une seule information, le titre du
document qui sera affiché en haut de la fenêtre du navigateur (et non pas
dans le document lui-même et qui apparaît dans l'annuaire d'URL gérées par
le navigateur). Ce titre est indiqué entre les balises <title> et </title>.
Exemple:
4. <head>
<title>Mon premier document html</title>
</head>.
2.2.3. Le corps
Le corps d'un document html sert à définir la zone qui contient la description
du document visualisé. C'est ici que l'on définit le contenu et la présentation

du document. Le corps est compris entre <body> et </body>.

11
Les paramètres de <body> s'appliquent au document tout entier; c'est

notamment:
a) Background: Ce paramètre permet de donner l'adresse d'une image qui

servira de fond à votre page.
Exemple:
5. <body background="C:\Documents and Settings\All Users\Mes
images\ Collines.jpg">
b) Bgcolor: Permet de fixer la couleur du fond de la page.
c) Text: Permet de fixer la couleur pour tout le texte du document,
Exemple:
6. <Body text="red"> tout le texte du document sera en rouge.
2.3. Code des couleurs:

Les quatre derniers paramètres de la balise Body ont pour valeur, une couleur;
celle-ci est exprimée soit par son nom (en anglais) soit par son code composé
de six chiffres hexadécimaux de 0 à F (F étant la valeur maximale).
Les couleurs de base sont: red="#FF0000", green="#008800" et

blue="#0000FF"; toutes les autres ne sont que des combinaisons de ces trois
couleurs. Le tableau ci-après reprend le code de quelques combinaisons.
Nom de la Code en
Observations
couleur Hexadécimal
Black "000000"
Absence de couleur
Red "FF0000"
1ère couleur de base
Green "00FF00"
2ème couleur de base
Blue "0000FF"
3ème couleur de base
White "FFFFFF"
Toutes les couleurs de base
Yellow "FFFF00"
Mélange du rouge et du vert
Gray "808080"
Rouge+vert+bleu atténuées
Maroon "800000"
Olive "808000"
Purple "800080"
Bleu nuit
Navy "000080"
Argent
Silver "C0C0C0"
Cyan (Vert+Bleu)
Aqua "00FFFF"
Magenta (Rouge+Bleu)
Funchsia "FF00FF"

12
2.4. Exemple d'un document html
<html>
<head>
<title>Attributs du document</title>
</head>
<body bgcolor="cyan" text="red" >
Bonjour <br>
Bienvenu sur ma première page Web
</body>
</html>
(Notez que l'indentation facilite la lecture du code mais n'est pas

reproduite par le navigateur). La mono-balise <br> (Break Line) force le
passage à la ligne suivante.
Pour tester cet exemple avec Internet Exploreur:

- saisir ce programme dans un éditeur de texte (Bloc Note, WordPad, …)
- Aller dans Enregistrer sous/ Mes documents
- Saisir le nom Bienvenu.html ou Bienvenu.htm (les deux extensions html
et htm sont valables)
- Sélectionner Tous les fichiers dans la case Type.
- Cliquer le bouton Enregistrer
- Quitter l'éditeur de texte puis ouvrir le dossier Mes documents
- Le programme Bienvenu.html doit être là auquel est associé l'icône
d'Internet Exploreur
- Lancer ce programme (Double click) ou Ouvrir avec le menu contextuel.
- Votre page Web doit, en principe, afficher un page en cyan avec un texte
en rouge. Le titre "Attributs de Document" est tout en haut du navigateur,
tandis que le nom du fichier "Bienvenu.html" se trouve dans la zone URL
du navigateur
Pour modifier cette page (par exemple changer la couleur de fond ou du

texte), cela ne peut se faire qu'en modifiant son code source, en procédant
de la manière suivante:

13
- Cliquer "Affichage/Source" sur la Barre de Menus de votre navigateur (ou

à partir du menu contextuel de votre page Web, cliquer "Afficher la
source")
- Faire les modifications voulues dans le code source qui vient de s'afficher
- Cliquer "Fichier/Enregistrer" sur la Barre de Menus de votre éditeur de
texte,
- Revenir à la page Web (rien n'a changé jusque là!)
- Cliquer sur "Affichage/Actualiser" sur la Barre de Menus de votre page
Web. (et les modifications apportées sont affichées!)
QUESTIONS
1. Qu'est-ce qu'une balise?
2. Qu'elle est la structure générale d'un document Html
3. Quelles sont les couleurs de base et donner le code de chacune
d'elles.
4. Pour chacun des paramètres de la balise body donner le rôle ainsi que
les valeurs éventuelles qu'il peut prendre:
a) text b) background c) bgcolor
5. Quels sont les éléments de base qu'il faut avoir pour créer un
document html?
EXERCICES
1. Créer une page blanche avec comme titre "Bienvenu à l'UPN" suivi de
votre nom.
a) Ajouter à cette page le texte
"VIVE L'UNIVERSITE PEDAGOGIQUE NATIONALE"
b) Ajouter un fond vert à la page créée.
c) Ajouter à la page un arrière plan d'une image que vous prendrez
du dossier Echantillons d'images du répertoire "Mes documents".
2. Créer une page web ayant en arrière plan une image Clipart (rechercher
les images *.gif)
3. Insérer en arrière plan d'une page web, une de tes photos.
3. STYLES D'ECRITURE ET SEPARATEURS
3.1. Les modificateurs de style

14
Le style est ce qui permet de faire ressortir certains mots du texte, en les
mettant en italique ou en gras, en les soulignant, en changeant la taille de sa
police, etc. dans le corps du document.
Ces modificateurs de styles sont définis par les balises suivantes:
• <u> : (Underline) permet de souligner un texte;

• <b> : (Bold) permet de mettre un texte en gras;
• <i> : (Italic) permet de mettre un texte en italique;
• <marquee> : Permet de faire circuler un élément, de gauche à droite;
• <strike> : Permet d'écrire des caractères barrés;
• <dfn> Définition (souvent en italique);
Exemple:
1. <dfn> ETUDIANT: Personne qui suit une formation
universitaire </dfn>
Résultat (en italique):
ETUDIANT: Personne qui suit une formation universitaire
• <sup> : Permet de mettre un texte en exposant;
• <sub> : Permet de mettre un texte en indice;
• <blockquote> : Permet d'afficher un bloc en retrait;
• <strong>: Pour une mise en évidence plus importante d'un texte;
• <font> : Permet de modifier l'apparence, la taille ou la couleur d'un texte
grâce à divers paramètres tels que:
<font size=1 à 7, et +1 à +4> Permet d'agrandir ou de réduire un texte;
<font color="code" ou "nom couleur"> Texte dans la couleur indiquée.
• <center>: Permet de centrer un texte
Exemples:
2. <font color="FF0000" size=+4>Texte en rouge de grande taille</font>
3. <center> <u>Bonjour</u>, <i>Bonjour</i> et <b>Bonjour</b>
</center> s'affichera à l'écran du navigateur comme suit :
Bonjour, Bonjour et Bonjour.
3.2. La mise en page
La mise en page regroupe tout ce qui sert à formater le document; à savoir,

le retour à la ligne, le paragraphe, séparation par une ligne horizontale, etc.
Les principales balises sont:
15
- <BR> : (BReak). Mono balise (on n'a pas besoin de la fermer)

qui sert à forcer le retour à la ligne
- <P> : (Paragraph). Cette balise sert à notifier un début de
paragraphe. On peut y préciser le paramètre:
align (ALIGNement) qui peut prendre l'une des valeurs suivantes:
left/center/right/justify qui permet, d'aligner le paragraphe, respectivement à
gauche, au centre, à droite ou justifié.
- <h1> à <h6>: Ces balises permettent de faire apparaître une
certaine hiérarchie dans les titres de documents (dans l'ordre décroissant de
taille): le H1 sert aux gros titres, H3 est la taille standard et le H6 est la plus
petite. On peut y préciser les paramètres align comme dans la balise <P>
- <hr>: (Horizontal Row). Mono balise qui permet d'afficher une ligne
horizontale de séparation (une ligne de démarcation).
Les paramètres de cette balise sont:
o Align avec pour valeurs: left/center/right. Par défaut, l'alignement est
center.
o Color: Couleur de la ligne: (<hr color="FF0000" > ligne rouge).
o Size: Ajuste l'épaisseur de la ligne de séparation, sa valeur est exprimée
en pixels: (size=1 ligne normale, size=10 dix fois la ligne normale).
o Width: Ajuste la longueur de la ligne de séparation; sa valeur est
exprimée en % par rapport à la largeur de l'écran. Par défaut, la
largeur=100%
Exemples:
4) <hr color="red" > ligne horizontale rouge
5) <hr size=20 width=50% align="right">
alignement à droite, avec une épaisseur de 20 pixels et une largeur
=50% de l'écran.
3.3. Listes d'éléments
Il existe deux types de listes en html:

- les listes ordonnées (OL, Ordered List),
- les listes non ordonnées (UL, Unordered List)
3.3.1. Listes ordonnées (ou numérotées)

Une liste ordonnée est délimitée par les balises <OL> et </OL> entre
lesquelles chaque élément de la liste est précédé de la balise ponctuel <LI>.

16
Exemple :
6. <ol>
<li>Josette
<li>Blaise
<li>Pierre
</ol>
Ce qui donne à l'écran :
1. Josette
2. Blaise
3. Pierre
3.3.2. Listes non ordonnées (ou non numérotées)

Une liste non numérotée est définie de la même façon qu'une liste
numérotée, sauf qu'elle est encadrée par les balises <ul> et </ul>.
Cette balise admet le paramètre:
Type=disc/circle/square (disc est la valeur par défaut)
Exemples:
7. <ul>
<li>Sandra
<li>Ruth
<li>Grâce
</ul>
On obtient cette fois :
• Sandra
• Ruth
• Grâce
8. <ul type="circle">
<li> Sandra
<li>.Ruth
<li>Grâce
</ul>
On obtient cette fois :

17
o Sandra
o Ruth
o Grâce
3.3.3. Listes imbriquées

Il est possible d'imbriquer des listes du même type ou de types différents.
Exemple:
9. <ul>
<li>Langages de programmation
<ol>
<li>QBasic
<li>Html
</ol>
<li>Algorithmique
<ol>
<li>Calcul numérique
<li>Logique de programmation
</ol>
<li>Informatique Générale
</ul>
On obtient alors :
• Langages de programmation
1. QBasic
2. Html
• Algorithmique
1. Calcul Numérique
2. Logique de programmation
• Informatique Générale
3.3.4. Listes de définition

Une liste de définition est une liste spéciale permettant de faire par exemple
un glossaire. Une liste de définition est marquée par la balise <DL> (Definition
List) et comprend deux types d'information possibles:
- le terme à définir, grâce à la mono-balise <DT> (Definition Term)
18
- la définition elle-même, grâce à la mono-balise <DD>
Exemple
10. <dl>
<dt>html:<dd>HyperText Markup Language
<dt>http:<dd>HyperText Transfert Protocol
</dl>
Donne :
Html:
HyperText Markup Language
http:
HyperTemm)xt Transfert Protocol
QUESTIONS
1. Quel est le rôle de chacune des balises ci-après:
1.1. <font> 1.5. <ul> 1.9. <sub>
1.2. <ol> 1.6. <p> 1.10. <dt>
1.3. <b> 1.7. <li> i1.11.<dfn>
1.4. <hr> 1.8. <dd> 1.12. <marquee>
2. Quelle différence existe-il entre les paramètres size et width de la balise hr?
3. Citer trois exemples pour chacune des catégories des balises ci-après:
3.1. Balises de mise en forme
3.2. Balises listes
3.3. Balises de style
EXERCICES
1. Créer un document html intitulé "Le beau temps" et qui aura l'aspect
suivant:
Il fait beau. Mais qu'est-ce que le beau temps s'il n'y a pas eu la pluie
auparavant?
2. Créer un document html intitulé "Mon site Web" et qui comprendra le texte
suivant:
BIENVENU SUR MON SITE WEB
Mon nom est (complétez votre nom)
Je suis étudiant de G1 Math-Info
UNIVERSITE PEDAGOGIQUE NATIONALE

19
a) Le texte sera centré sauf la deuxième ligne "Mon nom est …" qui va
circuler.
b) Mettre en arrière plan une image de votre choix (votre photo ou autre).
c) Mettre une ligne de séparation avant et après la ligne "Mon nom est …";
les deux lignes seront en rouge (ou autre couleur suivant l'image
d'arrière plan) et auront chacune une épaisseur de 10 pixels.
d) La première et la dernière ligne auront la plus grande taille, la deuxième
ligne aura une taille intermédiaire, et la troisième une taille inférieurs par
rapport aux autres.
e) Chaque mot de la première ligne aura une couleur différente des autres.
f) La troisième ligne sera en caractères typographiques.
3. Créer une page nommée "Les équations" de fond bleu contenant les
équations suivantes centrées au milieu de la page (on utilisera une police
de couleur blanche et de taille +4).
-3x2 + 2x - 4 = 0-
7x1 + 2x2 - 5x3 = 0
x12 + 5x22+ 2x32 = 0
4. Créer un lexique des termes suivants: HTML, URL, HTTP, DNS et WWW.
Les termes à définir seront en rouge et leur signification en vert.
5. Reproduisez un fichier html qui présente la structure ci-dessous:
Quelques loisirs
Voici quelques loisirs relatifs à mes goûts:
1. Sport
o football
o judo
2. Lecture
• roman policier
• bandes dessinées
3. Audio visuel
▪ televion
▪ cinéma
6.. Créer une table des matières qui sera sous la forme suivantes:
TABLE DES MATIERES

PAGES
1. Généralités sur les Web 1
1.1. Notions sur le World Wide Web . 1
1.1.1. La toile mondiale 1
1.2. Qu'est-ce qu'un site …
20
1.3. A propos de Html . 3

1.3.1. Brève historique .. 3
1.3.2. Edition d'un document html .. 4
EXERCICES… 4
2. STRUCTURE D'UN DOCUMENT HTML 5
2.1. Règles générales 5
2.2. Structure générale… 5
EXERCICES 8
4. LES IMAGES ET LES LIENS
4.1. Inclusion d'images
Pour inclure une image dans un document html, on utilise la mono balise
<IMG> (IMaGe) avec un paramètre obligatoire src (SeaRCh) pour

21
l'emplacement de l'image: <IMG src="[PATH\]nom de l'image. ext"> (les

extensions possibles sont .jpg, .gif, .png, …)
Exemple:
<img src="c:\Mes documents\Mes images\Nénuphars.jpg">
Autres paramètres de la balise <IMG src>:

- Align: Options d'alignement. Valeurs possibles:
left/center/right/justify
- Width: largeur de l'image (en pixels ou en % ),
- Height: Hauteur de l'image (en pixel ou en %),
- Border: Epaisseur du bord de l'image (en pixels); par défaut: 1,
- Vspace: espace vertical entre les bords de l'image et un autre objet
- Hspace: espace horizontal entre les bords de l'image et un autre objet
Exemple :
<IMG SRC=" C:\Documents and Settings\ Coucher de soleil.jpg" align="left"
border="2">
4.2. Les liens hypertextes

4.2.0. Introduction
Pour réaliser la ré-direction, il est nécessaire de fournir une URL. Cette
dernière précise exactement la localisation du document à afficher.
Pour définir un lien hypertexte, il suffit de rajouter à la balise <A> (Anchor

qui veut dire ancrage) le paramètre obligatoire: HREF qui reçoit comme
valeur une URL.
La syntaxe générale est: <A href="URL">Texte</A>.
dans laquelle "Texte" désigne le lien, qui devient un lien hypertexte à
l'affichage.
Exemple;
<a href="http://dliard.multimania.com">Cliquez ici</a>
Donne le résultat: Cliquez ici
En html, Il existe trois types de lien hypertexte:
- Les liens internes à un site
- Les liens externes
22
- Les liens internes à une page (ou ancre)
4.2.1. Liens internes à un site

Ici, la syntaxe est;
<A href="[PATH\] Nom du document.html">texte</A>
Exemple: On veut réaliser un lien de la page1 à la page2 dont le chemin est :

D:\Confidences\Messages\page2.html,
on pourra écrire:
Page
<A href=" D:\Confidences\Messages\page2.html">suivante</A>SVP
4.2.2. Liens externes

a) Lien vers une page web
La syntaxe est; <A href="URL">texte</A>
Exemple:
En écrivant:
Cliquez <A href="http://www.microsoft.com/isapi/redir.dll?prd=
ie&pver=6&ar=msnhome"> ici </A> pour accéder à MSN
A l'exécution on obtient:
Cliquez ici pour accéder à MSN
En cliquant sur le mot ici, le navigateur va se connecter au serveur Web

dont on a indiqué l'URL et afficher la page d'accueil du serveur. Si vous
n'êtes pas sous connexion, c'est un message d'erreur de MSN qui va
s'afficher.
On peut aussi créer un lien vers une image.
Exemple:
Il est possible d'
<A HREF="http://www.meteo.fr/cartes/lundi_1200.gif>afficher </A>
la carte du ciel de Lundi dernier à 12H.
Le résultat est:

23
Il est possible d'afficher la carte du ciel de Lundi dernier à 12H.
En cliquant sur "afficher", l'image (fictive) ainsi définie sera affichée à

l'écran.
b) Lien vers une adresse e-mail.

Il s'agit du service courrier offert par internet; ici l'adresse mail peut être
utilisée comme adresse de destination d'un lien. Dans ce cas, le fait de
cliquer sur le mot désignant ce lien affiche à l'écran une fenêtre
permettant d'envoyer un e-mail à l'adresse indiquée.
Exemple:
<a href="mailto:president@whitehouse.gov"> écrire au président des
USA</A>.
c) Lien à partir d'une image

Il s'agit d'un lien auquel on accède en cliquant sur une image plutôt que
sur une portion de texte. Il suffit de remplacer le texte définissant le lien
par la balise d'inclusion d'une image. Le format général est:
<a href="URL" > <img src=[PATH\]nom de l'image .extension></A>.
Exemple:
Cliquer cette image <A href="http://www.microsoft.com/
isapi/redir.dll?prd=ie&pver=6&ar=msnhome"><img src="c:\Mes
documents\Mes images\Nénuphars.jpg"></A> pour accéder à MSN
Notez qu'une image définissant un lien est différenciée des autres images
par le fait qu'elle est entourée d'un cadre et que le curseur de la souris
change de forme lorsqu'on le positionne sur cette image.
4.2.3. Les liens internes à une page
Pour définir un lien interne à un document, il faut définir une étiquette qui
spécifie la portion du document que l'on peut atteindre par le biais d'un
hyperlien. Au niveau de l'URL, l'étiquette se note en rajoutant, à la suite de
l'URL, un caractère # et le nom de l'étiquette. Le format est: <A
href="#nom_étiquette">...</A>.

24
Il faut ensuite fournir à la balise <A> le paramètre NAME qui reçoit le nom de
l'étiquette pour valeur: <A name="nom_étiquette">...</A>.
Exemple:
Supposons que notre document contient la définition du mot HTML, et qu'à
un autre endroit du document on peut consulter cette définition grâce à un
hyperlien. A cette définition associons l'étiquette défhtml; d'où les lignes
<a name="defhtml">HTML = Hyper Text Markup Language</A>
Définition du terme <A href="#defhttp"> HTML</A><BR>
On obtiendra alors dans la fenêtre du navigateur :

Définition du terme HTML
En cliquant sur HTML, le texte ci-après est affiché:
HTML = HyperText Markup Language
QUESTIONS
1. Quel est le rôle de chacun des paramètres ci-après de la balise <IMG>:
a) hspace c) height e) width
b) border d) scr f) align
2. Donner le format général de la balise <A> dans chaque cas ci-après:
a) lien externe vers une image e) lien interne à un site
b) lien vers une adresse mail f) image lien
EXERCICES
1. Créez un document texte de 3 lignes avec Word et enregistrez-le. Créer
ensuite une page comprenant un lien pour télécharger le document
créé avec Word.
2. Créer une page qui comporte un titre, centré, de niveau 2, une image
centrée ayant une bordure de 10 pixels. Créer un lien de cette image
vers la page de l'exercice 1.
3. Créer une page qui comporte un lien hypertexte avec la page de
l'exercice 1 et un lien hypertexte vers l'image de l'exercice 2.
4. Créer une page qui comporte deux images séparées d'un espace de
50 pixels, la première image aura un cadre de 10 pixels. La deuxième
image sera un lien hypertexte vers l'image de l'exercice 2.

25
5. LES TABLEAUX
5.1. Construction d'un tableau

En html, un tableau est constitué des lignes; dans chaque ligne on peut y
placer un certain nombre de cases que html nomme cellules. Le nombre de
cellules pour chaque ligne est égal au nombre de cellules d'une ligne qui en
comporte le plus.

26
La balise <TABLE> permet de créer un tableau et les éléments pour le

construire sont donnés par les balises suivantes:
- <CAPTION>: pour définir la légende du tableau.

- <TR>: (Table Row), pour créer une nouvelle ligne du tableau
- <TD>: (Table Data), pour créer une cellule dans un tableau
- <TH>: (Table Header), pour définir les en-têtes des lignes et des
colonnes)
Remarques
1. La balise de fin</TR> de la création d'une ligne n'est pas obligatoire.
Chaque fois que le navigateur tombera sur un <TR> il considérera que la
ligne précédente est terminée et commencera une nouvelle.
2. Une cellule doit être contenue dans une ligne et donc, une balise <tr> doit
être déjà ouverte avant d'ouvrir une balise <TD>. Vous pouvez ensuite
créer autant de cellules que vous voulez.
3. Comme pour la balise <TR>, la fin de fin </TD> est optionnelle.
4. Une cellule peut contenir diverses données: texte, nombre, image, lien, etc.
5. Par défaut, la légende du tableau est centrée par rapport à la largeur du
tableau.
Exemple:
<table>
<caption>Exemple d'un tableau</caption>
<tr>
<!—1è ligne avec 3 cellules-->
<td>c11</td>
<td>c12</td>
<td>c13</td>
</tr>
<tr>
<!—2è ligne avec 2 cellules définies-->
<td >c21</td>
<td >c22</td>
</tr>
</table>
Le résultat, c'est un tableau sans bordure:
Exemple
d'un
27
tableau
c11 c12 c13
c21 c22
5.2. Quelques paramètres du tableau

5.2.1. Pour la balise <Table>
- align=left/center/right. Position du tableau dans le document.
- border: Epaisseur du trait, exprimée en pixel; la valeur par défaut
est 0.
- bgcolor: Définit la couleur d'arrière plan du tableau.
- cellspacing: Espace entre les cellules, exprimé en pixel.
- Height: Hauteur du tableau, exprimée en pixels
- width: Largeur du tableau, exprimée en pixels ou en pourcentage
5.2.2. Pour la balise <TR> (Table Row)

- align=left/center/right/justify. Alignement à l'intérieur des cellules d'une
même ligne.
- bgcolor: Définit la couleur d'arrière plan d'une ligne.
- valign=top/middle/bottom: Alignement vertical au sein des cellules d'une
même ligne:
• top: Alignement en haut,
• middle: Alignement au centre,
• bottom: Alignement en bas.
5.2.3. Pour les balises TD (Table Data) et TH (Table Header),

- align=left/center/right. Position du texte dans la cellule
- bgcolor: Couleur d'arrière plan d'une cellule
- colspan : Permet de recouvrir plusieurs colonnes avec une seule cellule,
- rowspan : Permet de recouvrir plusieurs lignes avec une seule cellule
- height: Définit, en pixel, la hauteur d'une cellule; toutes les cellules d'une
ligne prennent la hauteur de la cellule la plus haute
- nowrap : Empêche le passage à la ligne dans une cellule
- valign=top/middle/bottom: Alignement vertical dans une cellule
• top: en haut
• middle: au milieu
• bottom: en basl,
- width: Largeur d'une cellule, exprimée en pixel.

28
5.2.4. Pour la balise <CAPTION>

Cette balise permet d'aligner la légende autour du tableau horizontalement et
verticalement. Caption ne possède qu'un seul paramètre: align. La valeur à
utiliser est: top/bottom/left/right
• top : centrée, au dessus du tableau (c'est l'option par défaut)
• bottom: centrée, en dessous du tableau
• left: à gauche, au dessus du tableau
• right; à droite, au dessus du tableau
5.3. Exemple
Soit à créer le tableau ci-après:
Tableau statistique des

effectifs en Licence Math &
Informatique
Total
Effectifs
par
L1 L2 catégorie
Garçons 64 43 107
Filles 17 15 32
Analyse: Il s'agit d'un tableau de 4 lignes (on aura donc quatre <TR>) et 4
colonnes d'où, le code suivant:
<table border=1>
<caption>
Tableau statistique des effectifs en Licence Math & Informatiques
</caption>
<tr><th rowspan=2> </th><th colspan=2>Effectifs
</th><th rowspan=2>Total par<br>catégorie</th>
<tr><td >L1</td><td>L2</td>
<tr><th>Garçons</th><td>64</td><td>43</td><td
align="center">107</td>
<tr><th>Filles <td>17</td><td>15</td> <td align="center">
32</td>
</table>
5.4. Utilisation des tableaux

29
Les tableaux ont plusieurs applications. Par exemple, quand on veut mettre
une marge dans un document, ou si on veut un agencement particulier des
images, il faut utiliser les tableaux. On peut également créer des tableaux
contenant toutes sortes d'objets, comme du texte, des images, des liens, etc.
Exemple: Création d'une marge

<html>
<head>
<title>Marge dans un document</Title>
</head>
<body>
<table width=20 align="left" border=2>
<tr><td height=500></td>
</table>
Bonjour! Avez-vous remarqué la marge?<br>
Merci beaucoup.<br>
Au revoir!
</body>
</html>
QUESTIONS
1. Donner le rôle de chacune des balises suivantes:
a) TD c) TABLE e)TH
b) CAPTION d) TR
2. Quel est le rôle de chacun des paramètres ci-dessous de la balise TD:
a) height d) align g) rowspan
b) valign e) nowrap
c) bgcolor f) colspan
3. Quelle la signification de chacun des mots ci-après intervenant dans la

construction des tableaux:
a) TR b) TH c) TD
4. Citer quelques applications des tableaux dans une page web.
EXERCICES
1. Créer une page nommée "Echantillons d'images" comprenant dans un
même cadre les quatre images du dossier:
"Mes documents\Mes images\Echantillons d'images",

30
deux au dessus de deux autres.

2. Construire le tableau multicolore centré dont les différentes couleurs sont
indiquées dans les cellules (respecter la bordure):
Tableau multicolore
Rouge Vert bleu
Gris Cyan Chocolat
Jaune Noir Orange
3. Construire le tableau ci-après en respectant toutes les spécifications.
Effectif Total par

L1 L2 catégorie
Garçon 64 43 107
Fille 17 15 32
Total par
promotion 81 58 139
Tableau statistique des effectifs en Licence
Math & Informatique
4. Créer une page nommée "Le damier" comprenant un damier de 10 x 10
cases coloriées en noir et blanc.
6. FORMULAIRES
6.1. Qu'est-ce qu'un formulaire?
Un formulaire est un ensemble de champs de saisie de données: une fois

tous les champs remplis, on peut soumettre les données du formulaire au
serveur pour traitement. Cela peut être un formulaire d'inscription à distance
dans une université (cas de l'UPN), l'enrôlement des électeurs (cas de la CENI
en RD Congo), …

31
A cet effet, on utilise le couple <FORM> et </FORM> pour délimiter un

formulaire. Cette balise a entre autres, le paramètre Name qui permet
d'identifier le formulaire dans la page web.
6.2. Les éléments de formulaire
Pour constituer un formulaire, on utilise la mono balise <INPUT> qui, selon

la valeur de son paramètre type, donnera tel ou tel objet graphique de saisie.
Voici la liste des objets de saisie associés à la balise <INPUT> grâce au

paramètre type:
• text : zone de texte;

• password : zone de texte dans laquelle, les caractères apparaissent sous
forme d'étoiles à l'écran;
• checkbox: case à cocher
• button: bouton de commande.
• submit bouton de commande pour envoyer le formulaire;
• radio: batterie des boutons à choix unique; dans ce cas tous les boutons
devront avoir le même nom.
• reset: bouton de remise à l'état initial du formulaire
Chaque objet du formulaire possède un nom et une valeur initiale. D'où les
paramètres possibles liés à ces objets:
- Name: Ce paramètre permet à désigner de manière unique un objet créé

dans le formulaire. C'est ce nom qui sera utilisé pour le traitement des
données; c'est un identificateur.
— Value: Ce paramètre donne le texte devant apparaître dans l'objet du
formulaire, comme: button, submit, reset, …
— Size: définit la longueur de la zone de saisie (en nombre de caractères).
La longueur par défaut est 20.
Exemples:
1. (Les objets text et reset)
<html>
<body>
<form>

32
<Input type="text" name="TonNom" value="" size="10"><br>

<Input type="reset" name="Remise" value="initialiser">
</form>
</body>
</html>
2: (Des boutons et des cases à cocher)
<html>
<body>
<form>
<h3>Formulaire</h>
<li>Nom: <input type="text" name="nom" size="15">
<li>Etat civil: <input type="radio" name="Etciv" value="Mar">
Marié <input type="radio" name="Etciv" value="Cél">
Célibataire
<li><u>Mes sports préférés</u> (Veuillez cochez)
<ol>
<li>Le judo <input type="checkbox" name="sprt1"><br>
<li>Le foot <input type="checkbox" name="sprt2"><br>
<li>Le basket :<input type="checkbox" name="sprt3" >
</ol>
</form>
</body>
</html>0.
Ce qui donne pour résultat suivant;
• Formulaire
• Nom:
• Etat civil: Marié Célibataire
• Mes sports préférés (Veuillez cochez)
1. Le judo
2. Le foot
3. Le basket :

33
6.3. Autres éléments du formulaire
6.3.1. Champ de saisie de plusieurs lignes

Le premier élément est la zone de saisie sur plusieurs lignes. On utilise à
cet effet la balise <TEXTAREA> qui possède entre autres, les paramètres
suivants:
name: pour identifier l'objet
cols: fixe le nombre de colonnes de la zone de saisie
rows: fixe le nombre de lignes de la zone de saisie
Exemple:
3. <html>
<body>
<form>
<textarea name="zone" cols="40" rows="5"></texarea>
</form>
</body>
</html>
Ce qui donne le résultat suivant:
6.3.2. Liste déroulante

Le dernier élément du formulaire, est l'objet
"Menu déroulant". La balise qui permet de
créer un menu déroulant est <SELECT>. Cette dernière possède un
unique paramètre, à savoir, Name, pour donner au menu.
Ensuite on définit chaque élément du menu déroulant avec la balise

<OPTION>, et lui donner une valeur grâce au paramètre Value. C'est le
premier élément de la liste qui est le choix par défaut. On peut changer
cette valeur grâce au paramètre selected; c'est un paramètre booléen (il
se suffit à lui-même).
Exemple:
4. <form>

34
Quel est le 2ème fleuve du monde en longueur? <br>

<select name="fleuves">
<option value=" Nil"> Le Nil </option>
<option value=" Mekong"> Le Mekong</option>
<option value=" Congo">Le Congo </option>
<option value="Amazone"> L'Amazone </ option> selected
<option value=" Yang-tseu"> Le Yang-tseu </option>
</form>
On obtiendra le résultat suivant:
Quel est le 2ème fleuve du monde en longueur?

Le Yang-tseu
QUESTIONS
1. Quel est le rôle de chacun des paramètres ci-après de la balise
<Input>?
a) size b) type c) name d) value
3. Quel est le rôle de chacune des balises suivantes qui entrent dans la
construction des formulaires:
a) Select c) Input e) Option
b) Form d) Textarea f)) Option
4. Qu'est ce qu'un formulaire?
EXERCICES
1. Prendre un modèle de la carte d'étudiants de l'UPN et créer une page
web nommée "Carte d'étudiant" qui contient le formulaire pour
l'établissement de la carte pour un étudiant.
2. Prendre un modèle du formulaire d'inscription à l'UPN et créer une page
web nommée "Inscription" pour l'inscription en ligne.
3. Réalisez un mini site Web sur votre commune comprenant:
• Une page histoire.html qui contient le texte (mis en forme) contenu
dans le fichier histoire.txt est qui incorporera l’image histoire.jpg
• Une page celebrite.html, reprenant les personnalités célèbres de
votre commune. . En particulier, une image illustrant chaque

35
personne devra être incorporée. De plus, un petit sommaire devra

être présent en haut de la page et devra contenir des liens renvoyant
vers chaque section. De plus, un lien « Retour vers le sommaire »
après chaque personne doit renvoyer vers ce sommaire.
• Une page plan.html qui contient uniquement un plan de votre
commune.
• Une page liens.html contenant une liste de liens sur votre
communes)
• Et enfin une page d’accueil index.html qui doit contenir le texte
histoire.docx contenu dans un fichier texte et un sommaire du site
dont les éléments pointeront vers chacune des pages ci-dessus.
• Par ailleurs, chacune des pages du site, hormis le sommaire, doit
contenir un lien vers la page index.html.
• Vous choisirez une présentation standard pour le site, avec
notamment une couleur de fond.
4. Réaliser à l'aide du code HTML une page Web qui permet d'afficher le
formulaire d'inscription à la Bibliothèque Centrale de l'UPN. Ce
document sera de centré, de couleur jaune sur un fond rouge. Le
document aura le format ci-après:

HTML Livre

Transféré par

Droits d'auteur :

Formats disponibles

HTML Livre

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Livre

Transféré par

Droits d'auteur :

Formats disponibles

1

Ces notes de cours sont destinées aux étudiants de premier graduat en

HTML n'est pas un langage de programmation à proprement parler. Il

Chaque chapitre se termine par une série de questions pour permettre au

Langages : HTML L2 LMD Math-Info

TABLE DES MATIERES

Ière partie: Programmation HTML 62

1. Généralités sur le web 63

MAYALA LEMBA Francis

Langages : HTML L2 LMD Math-Info

1. GENERALITES SUR LE WEB

1.1. Notions sur le World Wide Web

Image de Bruno Pouliquen( http://www.med.univ-rennes1.fr/~poulique/cours/html/)

1.1.2. Qu'est-ce qu'un site web ?

Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre

Un navigateur permet de visualiser les pages Web et d'envoyer des requêtes

1.1.3. Protocoles et adresses web

Chaque page web, et plus généralement toute ressource en ligne (image,

Langages : HTML L2 LMD Math-Info

• nom du serveur est une adresse alphanumérique (adresse DNS, pour

MAYALA LEMBA Francis

3. C:\Doduments and settings\All Users\Salut.html

1.2. A propos de html

Dès la version 2.0 les spécifications de ce langage ont été confiées à un

Précisons que html n'est pas un langage de programmation dans le sens

1.2.2. Edition d'un document html.

Cependant, il existe des outils munis d'une interface graphique évoluée

Langages : HTML L2 LMD Math-Info

2. STRUCTURE D'UN DOCUMENT HTML

MAYALA LEMBA Francis

2.1. Règles générales

Langages : HTML L2 LMD Math-Info

Exemple: 3. <!—Ceci est un commentaire -->

Les commentaires ne sont pas affichés à l'écran du navigateur.

2.2. Structure générale d'un document html

du document visualisé. C'est ici que l'on définit le contenu et la présentation

MAYALA LEMBA Francis

Les paramètres de <body> s'appliquent au document tout entier; c'est

a) Background: Ce paramètre permet de donner l'adresse d'une image qui

2.3. Code des couleurs:

Les couleurs de base sont: red="#FF0000", green="#008800" et

Langages : HTML L2 LMD Math-Info

2.4. Exemple d'un document html

(Notez que l'indentation facilite la lecture du code mais n'est pas

Pour tester cet exemple avec Internet Exploreur:

Pour modifier cette page (par exemple changer la couleur de fond ou du

MAYALA LEMBA Francis

- Cliquer "Affichage/Source" sur la Barre de Menus de votre navigateur (ou

3. STYLES D'ECRITURE ET SEPARATEURS

3.1. Les modificateurs de style

Langages : HTML L2 LMD Math-Info

Ces modificateurs de styles sont définis par les balises suivantes:

• <u> : (Underline) permet de souligner un texte;

3.2. La mise en page

La mise en page regroupe tout ce qui sert à formater le document; à savoir,

- <BR> : (BReak). Mono balise (on n'a pas besoin de la fermer)

3.3. Listes d'éléments

Il existe deux types de listes en html:

3.3.1. Listes ordonnées (ou numérotées)

Langages : HTML L2 LMD Math-Info