CoursHTML Id2069

Cours HTML
Objectif : Ce cours a pour but, de permettre, aux personnes le suivant, de pouvoir
réaliser un ensemble de pages en langage HTML, contenant du texte, des images, des
liens hypertextes, des tableaux, des formulaires d'interrogations.
 I Introduction
 II Ma première page en HTML
o II.1 Qu'est ce que le langage HTML ?
o II.2 Comment structurer une page HTML ?
o II.3 Les formats de Texte
 Les différents formats de texte

 La taille des caractères
 Les accents
 Les paragraphes
 La couleur des caractères
o II.4 Comment insérer une image au texte ?
 L'option ALIGN
 L'option VSPACE
 L'option HSPACE
 Les options WIDTH et HEIGHT
 L'option BORDER
 Remarques
o II.5 Utilisons l'hypertexte et réalisons nos premiers liens
 Le lien vers un élément externe à vos pages

 Le lien vers un élément interne à vos pages
 Une image comme ancre
 Option de la balise A HREF
o II.6 La balise BODY pour le fond de page et la couleur du texte
 Le fond de page
 La couleur du texte
o II.7 Ajouter son adresse électronique
 III Les tableaux

Cours HTML
 IV Les images cliquables balise MAP
 V Les Formulaires
o V.1 Présentation
o V.2 La balise FORM
 ACTION
 METHOD
 METHOD
 ENCTYPE
o V.3 La balise INPUT
 NAME
 TYPE
 ALIGN
 CHECKED
 MAXLENGTH
 SIZE
 SRC
 VALUE
o V.4 La balise SELECT
 Les menus déroulants

 Les listes à ascenseurs
o V.5 La balise TEXTAREA
 VI Autres mots clés

 VIII Les feuilles de style
 IX Conclusion
 Introduction
HTML signifie HyperText Markup Language. Ce langage permet de présenter des

informations d'ordre privé ou publique accessibles de n'importe quel endroit du monde et
pouvant rassembler des textes, images et autres de sources géographiquement éloignées.
Pour cela, bien entendu, vous devez avoir accès à internet et utiliser un butineur ou navigateur
ou browser selon l'appellation du pays.
Cours HTML
Pourquoi apprendre le langage HTML ?
 C'est un nouveau moyen de communiquer. Cela vous permet de présenter vos travaux,
que vous soyez un enseignant, un étudiant ou une entreprise.
Pour un particulier, créer des pages en langage HTML peut paraître un peu
mégalomane mais toutes les créations proposées au regard d'autrui le sont, tout dépend
de ce que contiennent vos pages et de quelle façon vous les présentez.
Par contre ce que vous réalisez peut être visible dans le monde entier ce qui augmente
considérablement le nombre de personnes qui peuvent être intéressées ou qui peuvent
vous apporter des informations sur le sujet que vous traitez.
Pour une entreprise, cet outil peut devenir un moyen privilégié pour communiquer
avec le monde à un coût bien inférieur au prix d'une campagne de promotion par
d'autres moyens (presse, télévision ...).
Il peut permettre de mettre en valeur son image de marque, de la "mondialiser" mais
aussi de promouvoir ses produits et pourquoi pas de les vendre par ce moyen.
Il est vrai qu'internet n'est pas encore un outil de consommation courante, les foyers ne
sont pas encore tous équipés d'un ordinateur loin de là, les coûts des communications
téléphoniques sont &eacutiques sont élevées, mais plus il y aura de contenu intéréssant
sur le web, plus les utilisateurs seront nombreux et plus la connaissance des langages
qui permettent de créer seront une des conditions de recrutement par les entreprises.
 Quel autre moyen peut aussi simplement vous permettre d'allier du texte à des
graphiques et des images et ainsi rendre beaucoup plus attrayant la lecture d'un
document ?
 Comme pour toutes constructions importantes il est nécessaire de participer et de
poser sa pierre pour agrandir l'édifice. Il est très intéressant de regarder, de sauter de
page en page, mais dans ce cas votre attitude est passive. Si vous créez votre page, sur
n'importe quel sujet, vous devenez actif et là, votre contribution à cet édifice, même
minime, permet de faire avancer le tout.
 Il est toujours agréable de créer et d'apprendre.
 Il est important lorsqu'un nouveau moyen de communication se crée de l'utiliser pour
ne pas être, surtout en informatique où tout va très vite, laissé de côté et très vite
dépassé. Il est étonnant de voir le peu d'intérêt que suscite l'internet dans son ensemble
en France par rapport aux autres pays (USA, Angleterre ...).
 Les possibilités ossibilités qu'offre ce moyen de communication sont gigantesques, il
est nécessaire de l'utiliser.
Il existe des éditeurs HTML qui permettent de créer des pages web comme PageMill,
WebEditeur, aswedit ... Cela peut vous éviter d'apprendre le langage HTML par contre
le jour où vous devrez maintenir des pages web et que vous n'avez pas votre logiciel
habituel alors vous serez incapables de faire quoique ce soit.
 II Ma première page en HTML

La création d'une page web en langage HTML n'est pas très compliquée car ce dernier,
en restant dans la limite du raisonnable (sans programmation annexe), est très simple
Cours HTML
et ne nécessite aucun "don particulier". Le plus long, lors sa création est de rechercher
les éléments (texte, icônes ...) à insérer puis de réaliser la mise en page du document
(couleur, disposition ...).
Nous allons donc commencer, pour cela lancez votre butineur (netscape le plus
souvent) et ouvrez un fichier avec votre éditeur préféré (vi, asedit ...) ayant l'extension
html ou htm.
Attention :
Les butineurs utilisent un cache qui permet de recharger une page, image ...
déjà consultée sans devoir pour cela faire une requête réseau afin de la
rechercher. Donc en cas de modification vous pouvez conserver l'ancienne
version et ne pas voir les modifications qui lui ont été apportées malgré un
"reload". Je vous conseille donc lorsque vous développez une page de mettre
vos caches à zéro, ainsi les éléménts seront rechargés à chaque lecture et seront
donc à jour.
Pour cela allez dans "options" puis "preferences" (netscape Version 1)
 II.1 Qu'est ce que le langage HTML ?
Le langage HTML est un langage à balises :

<balise> texte </balise>
Chaque balise a une signification particulière. Les éléments qui se trouvent
entre ces balises seront affectés par ce balisage.
Exemple :
<I>En italique</I> En italique
Remarque :
Si vous oubliez de fermer une balise elle affectera tout le reste du texte
tant qu'une autre du même type ne prend pas le relai.
Vous retrouvez cela dans les traitements de texte. Lorsque vous décidez de
mettre un mot en italique, le logiciel va positionner une biel va positionner une
balise devant et à la fin du mot à la différence près que le mécanisme est
invisible pour l'utilisateur alors qu'en HTML c'est l'utilisateur qui doit faire ce
balisage.
 II.2 Comment structurer une page HTML ?

o Même si vous ne respectez pas cette structure, votre page sera lisible par un
butineur mais par contre vous aurez peut être vous du mal à relire le code de votre
page car cela risque d'être le bazar. Il est donc préférable de prendre de bonnes
habitudes dès le début et de structurer vos pages de la façon suivante, afin de vous
offrir une meilleure lisibilité :
<HTML> début du document

<HEAD> en-tête du document
Cours HTML
<TITLE> Titre du document
........
</TITLE> Fin du titre du document
</HEAD> Fin de l'en-tête du document
<BODY> corps du document
........
</BODY> Fin du corps du document
</HTML> Fin du document

o
 Les balises HTML indiquent que le document est dans ce langage.

 Entre les balises HEAD vous devez mettre tout ce qui concerne
l'environnement de votre page, le titre, les couleurs du texte, les liens et
autres informations. Ces éléments n'apparaissent pas directement dans
la page.
 Les balises TITLE permettent de faire apparaître dans la zone titre de votre
navigateur le texte que vous insérez entre ces balises. Cette partie est
souvent négligée et c'est dommage. En effet il permet d'indiquer clairement
et de manière brève sur quel sujet porte le document mais il permet aussi
d'avoir pour le lecteur qui enregistre votre page (ou URL) dans son bookmark
comme lien le texte explicatif que vous avez inséré.
Il est donc préférable de mettre comme texte explicatif "SERVEUR
PEDAGOGIQUE DU CAMPUS JUSSIEU" plutôt que "SERVEUR PEDAGOGIQUE"
ainsi le lecteur saura tout de suite en regardant ces liens à quoi ils
correspondent.
Exemple du titre des pages du CICRP
 Entre les balises BODY vous insérez les éléments qui constitueront
votre page, les informationsage, les informations texte, images, liens, le
fond d'écran si c'est une image, les formulaires ...
o Afin de vous repérer dans vos pages, il est conseillé d'utiliser des majuscules
pour tout ce qui est balise et mot clé du langage. De cette façon vous
augmentez la lisibilité de votre document source.
Si vous ne procédez pas ainsi, vous n'affecterez pas le contenu ou la forme de
votre document, les balises en majuscules ou en minuscules produisent le
même èffet.
Cours HTML
o Vous pouvez aussi insérer des commentaires afin de marquer les parties
importantes de votre document source. Bien évidemment, ces commentaires
n'apparaîtront pas aux personnes regardant vos pages.
Les commentaires sont définis par la balise suivante :

o Il est aussi nécessaire de signer toutes vos pages afin que les personnes qui les
consultent, connaissent l'auteur et puissent le joindre, mais aussi tout
simplement parce que si vous créez quelque chose, que vous apportez des
informations il est de bon ton d'assumer ce que vous écrivez en le signant.
Deux formes de signatures sont à insérer, votre nom et votre adresse
électronique. Voir le paragraphe II.8.
o N'oubliez pas aussi de dater vos pages en insérant la date de la dernière
modification rave;re modification ainsi au premier coup d'oeil, il est possible
de déterminer si de nouvelles informations sont disponibles depuis la dernière
consultation.
Toutes ces recommandations vous permettrons de respecter la fameuse

"netiquette".
 II.3 Les formats de Texte
L'exemple précédent n'est pas très excitant par son contenu où par sa mise en
page. C'est pourquoi nous allons voir maintenant ce qu'offre le langage HTML,
dans un premier temps pour du texte, pour égayer la présentation.
Attention : le type de couleur, de caractères utilisés peuvent donner
l'impression que la balise n'a pas d'effet.
o Les différents formats de texte
<B>en gras</B> en gras

<I>en italique</I> en italique
<CITE>citation</CITE> citation
<TT>style machine</TT> style machine
<SAMP>affiche un exemple</SAMP> affiche un exemple
<STRIKE>texte rayé</STRIKE> texte rayé
<STRONG>caractère épais</STRONG> caractère épais
<BLINK>texte qui clignote</BLINK> texte qui clignote
<EM>texte en relief</EM> texte en relief
o
Bien évidemment les balises peuvent être combinées :
<STRIKE><I>Italique et rayé</STRIKE></I> Italique et rayé
o La taille des caractères
<H1>Taille 1</H1>
Cours HTML
Taille 1
<H2>Taille 2</H2>
Taille 2
<H3>Taille 3</H3> Taille 3

Vous pouvez aussi utiliser à partir de la version 2 de HTML une balise

<FONT> combinée avec l'option SIZE=nombre où nombre est compris entre
les valeurs 1 à 7 afin de définir la taille des caractères.
<FONT SIZE=7>Taille 7</FONT> Taille 7

o Les accents
à à
â â
ç ç
é é
è è
ë ë
ê ê
ï ï
ö ö
ô ô
ù ù
û û
Cours HTML
o
Vous pouvez aussi les taper directement sur votre clavier mais attention si une
personne n'utilise pas le même codage de caractères que vous (ici isolatin1) il
ne verra pas ces accents et cela risque de perturber son affichage. Il est donc
plutôt conseillé d'utiliser, même si cela est plus lourd, la syntaxe précédente.
o Les paragraphes
Texte déjà formaté

Si vous avez un texte déjà écrit et que vous voulez le mettre sur une page ce serait
long de le reformater en HTML afin d'avoir la même présentation (ajout de <BR> à
chaque fin de ligne, repositionner le texte ...). Vous pouvez utiliser alors une balise
très pratique qui conservera le format originel de votre texte.
<PRE>Texte formaté</PRE>
Mais attention le formatage ns attention le formatage n'est plus géré par votre
navigateur, ce qui veut dire en clair que si le contenu d'une ligne de votre texte
dépasse la taille définie par la fenêtre de votre navigateur alors apparaîtront des
ascenseurs. Il sera alors obligatoire de les utiliser pour lire toute la ligne.
Exemple d'une ligne dont le formatage est prédéfini et la même dont la gestion est
laissée au navigateur.
Les listes
Vous pouvez aussi directement formater votre texte en titre, sous-titre ... précédés
d'indications de niveaux (Un caractére ou un numéro).
Les balises <OL></OL>, <UL></UL> ou <DL></DL> permettent de définir le niveau.
En combinant ces balises vous définissez plusieurs niveaux d'affichage.
La balise <LI> permet de définir le type d'indication de niveau voulu (caractère ou numéro).
La liste numérotée
<OL> En-tête du document
<LH>En-tête du 1. Titre
document</LH>
1. Sous-titre
<LI>Titre
<OL> 2. Sous-titre
<LI>Sous-titre
<LI>Sous-titre 1. Sous-titre
</OL>
2. Sous-titre
<LI>Titre
</OL> 3. Titre
La liste non numérotée

<UL>
En-tête du document
<LH>En-tête du
 Titre
document</LH>
<LI>Titre
Cours HTML
<UL>
<LI>Sous-titre  Sous-titre
<LI>Sous-titre  Sous-titre
</UL>
<LI>Titre  Titre
</UL>
Liste descriptive
<DL>
<DT>Titre
Titre
<DD>texte
texte
<DT>Titre2
Titre2
<DD>texte2
texte2
</DL>
Vous pouvez utiliser une option qui est COMPACT qui se positionne de la façon
suivante <DL COMPACT> et qui permet d'aligner le texte avec le titre sur la même
ligne.
o La couleur des caractères
La balise est celle déjà évoquée lors de la définition de la taille des caractères
<FONT></FONT> mais cette fois-ci avec l'option COLOR=.
Deux possibilités sont utilisables pour définir la couleur soit la donner en clair
red, blue, yellow ... ou donner la cou la couleur soit la donner en clair red, blue,
yellow ... ou donner la couleur sous le format hexadécimale.
Le format hexadécimale vous permettra d'obtenir une palette de couleur plus
importante.
Le codage se fait de la façon suivante :
<FONT COLOR="#rrggbb">
Où rr, gg, bb sont des valeurs hexadécimales comprises entre 00 et FF,
indiquant la part de rouge (rr=red), vert (gg=green) et bleu (bb=blue) que
vous voulez mettre dans votre mélange afin d'obtenir la couleur désirée.
00 représente le minimum et FF le maximum.
<FONT COLOR="#FF0000"> rouge

<FONT COLOR="#00FF00"> vert
<FONT COLOR="#0000FF"> bleu
<FONT COLOR="#FFFFFF"> blanc
<FONT COLOR="#000000"> noir
Remarque :
Certains écrans peuvent altérer la couleur, vous pouvez sur un écran,

par exemple, voir du rouge et sur un autre pour le même codage du
rose.
Cours HTML
Vous pouvez avoir un aperçu des codages en Cliquant ici
 II.4 Comment insérer une image au texte ?
Vous devez utiliser la balise <IMG SRC="...">. Cette balise peut être
agrémentée d'options de positionnement.
Les images doivent être au format gif, jpg ou xbm.
<IMG SRC="applecom.gif">
Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la

balise, les options d'alignement
o ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT
<IMG ALIGN=TOP SRC="..."> la flèche est au dessus du texte
<IMG ALIGN=MIDDLE SRC="..."> la flèche est au milieu du texte
<IMG ALIGN=BOTTOM SRC="..."> la flèche est en dessous du texte
<IMG ALIGN=LEFT SRC="...">

Le texte va encadrer la flèche
Cette dernière est centrée à gauche
<IMG ALIGN=RIGHT SRC="...">

Le texte va encadrer la flèche
Cette dernière est centrée à droite
o VSPACE
Cette option permet de définir l'espace vertical que vous allez mettre entre l'image
et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
Dans cet exemple le texte précédent au dessus de l'image est plus éloigné que
l'exemple sans VSPACE.
<IMG VSPACE=40 SRC="applecom.gif">
o HSPACE
Cette option permet de définir l'espace horizontal que vous allez mettre entre
l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
Cours HTML
Dans cet exemple le texte et la flèche sont plus éloignés de l'image que dans
l'exemple sans HSPACE.
<IMG HSPACE=40 SRC="applecom.gif">
o WIDTH et HEIGHT
Ces options permettent de redéfinir la taille de l'image.

Attention : Si vous augmentez la taille, l'image perdra de sa qualité
<IMG WIDTH=30 HEIGHT=30 SRC="applecom.gif">

o
o BORDER
Cette option permet de fai

Cette option permet de faire un cadre autour de l'image plus ou moins large.
<IMG BORDER=1 SRC="applecom.gif">
<IMG BORDER=10 SRC="applecom.gif">
o Remarques
Parfois ces options ne suffisent pas, ne vous donnent pas entière satisfaction,
dans ce cas vous devez utiliser un tableau et positionner chaque élément dans
une cellule séparée, l'alignement sera souvent meilleur.
Vous avez deux possibilités pour insérer une image :
 L'image est sur votre compte
 L'image est sur un autre site
Le premier cas utilise de l'espace disque mais très peu de ressource réseau à
l'inverse du deuxième cas. Mais attention dans le deuxième cas, si le site
distant n'est plus accessible ou si le chemin d'accès vers l'image a été modifié
vous vous trouverez avec un ralentissement conséquent lors du chargement de
la page et d'une icône comme celle-ci.

Attention au copyright.
Cours HTML
 II.5 Utilisons l'hypertexte et réalisons nos premiers liens
Pour le moment nous avons réalisé une page simple contenant du texte et une
image. Mais l'un des intérêts de ce langage est de pouvoir réaliser des
documents pointant vers d'autres documents et ainsi d'explorer une nouvelle
dimension.
La balise à utiliser est <A HREF="adresse">Zone cliquable</A>
"adresse" est une adresse web ou une image au format jpeg.

"Zone cliquable" est un texte ou une image qui lorsque vous cliquez dessus
vous renvoie à un autre document ou une autre partie de document.
La "Zone cliquable" se nomme aussi ancre.
Deux types de liens sont disponibles.
 Le lien vers un élément externe à vos pages

 Le lien vers un élément interne à vos pages
o Le lien vers un élément externe à vos pages
La balise est :
<A HREF="adresse">Zone cliquable</A>
Lorsque vous cliquez sur "Zone cliquable", votre butineur charge la page
référencée par "adresse".
Cette page peut être, sur votre serveur comme à l'autre bout du monde, mais
pour vous ce sera transparent.
Réalisons un lien sur le CICRP.
Le CICRP
Les liens peuvent aussi bien être des liens vers des pages web que vers des
serveurs ftp, des serveurs de news, des serveurs gopher ou vers une machine
accéssible en telnet ou vers d'autres services comme le courrier électronique.
Le site ftp du cicrp
Les news de jussieu
Lien vers une adresse électronique voir le paragraphe II.7
o Le lien vers un élément interne à vos pages
Lorsque vous avez un document assez long il est parfois intéressant pour la
personne qui le consulte de pouvoir atteindre l'information désirée juste en
cliquant sur un lien ou un mot clé qui l'envoie directement au bon endroit.
Un peu comme le font certains langages utilisant notamment le mot clé
GOTO.
Vous pouvez ainsi réaliser un plan en début de votre document (comme sur
celui-ci) et ainsi clarifier, simplifier la recherche dans ce dernier.
L'utilisateur se déplace ainsi directement sans avoir à utiliser les ascenseurs,
Cours HTML
juste en cliquant sur les mots clés comme pour une lien extèrieur.
Il perd moins de temps et trouve immédiatement l'informae;diatement
l'information.
Les balises sont :

<A HREF="#étiquette">Zone cliquable</A>
associé à la balise
<A NAME="étiquette">
Vous pouvez associer les deux balises dans une seule ce qui permet de faire
des va-et-vient très utiles par exemple pour les notes de bas de pages.
Vous faites dans votre texte une annotation qui renvoie en cliquant à la note de
bas de page qui elle même renvoie à cette annotation.
Ainsi une fois la lecture de la note de bas de page faite, vous revenez
directement là où vous étiez resté dans le texte, simple et pratique.
<A HREF="#bas_de_page" NAME="annotation">(annotation 1)</A>
.....
<A HREF="#annotation" NAME="bas_de_page">(bas de page 1)</A>
o Une image comme ancre
Un lien hypertexte peut aussi bien se faire avec un texte,une image ou les deux à la
fois. L'image est alors la "Zone cliquable".
<A HREF="http://www.cicrp.jussieu.fr"> <IMG SRC="..."></A>
o
Vous pouvez dans ce cas ajouter comme option à la balise IMG,
BORDER=chiffre afin de grossir le trait qui entoure l'image, la rendant ainsi
plus visible. Voir les options possibles au paragraphe II.4.
<A HREF="http://www.cicrp.jussieu.fr"> <IMG BORDER=6 SRC="..."></A>
o Option de la balise A HREF
Vous pouvez lors du clic sur un lien hypertexte faire en sorte qu'une autre
fenêtre du navigateur s'ouvre contenant la page référencée au lieu de la faire
afficher dans la fenêtre courante.
Cela permet notamment de garder les informations importantes dans la fenêtre
courante.
Pour cela utilisez l'option TARGET.
<A TARGET=nom_de_la_fenetre HREF="adresse">zone hypertexte</A>
Cours HTML
Toutes les pages référencées par nom_de_la_fenetre s'ouvriront dans la même
fenêtre.
 II.6 La balise BODY pour le fond de page et la couleur du texte

o Le fond de page
Vous pouvez mettre un fond uni en codant la couleur grâce à l'option

BGCOLOR ou une image grâce à l'option BACKGROUND.
AttentioOR ou une image grâce à l'option BACKGROUND.
Attention l'image ralentira l'affichage de votre page car le navigateur va
devoir aller la chercher et la charger au contaire du fond uni.
 L'option BGCOLOR
Les couleurs sont codées en héxadécimales comme vu dans

le paragraphe II.3. Cliquez ici pour les voir
La balise à utiliser est <BODY BGCOLOR=#nombre_héxa>

Pour cette page la syntaxe est <BODY BGCOLOR=#808080>
 L'option BACKGROUND
La balise à utiliser est <BODY BACKGROUND="image">

Exemple
La syntaxe pour la page de l'exemple est :
<BODY BACKGROUND="/jacqueno/GALERIE/FOND/a103.jpg">
o La couleur du texte
Nous avons vu au paragraphe II.3 comment modifier les couleurs d'un texte

grâce à la balise FONT. Cette modification est ponctuelle, mais il est possible
d'indiquer une fois pour toute quelles couleurs doivent être utilisées pour tout
le texte du document ainsi que pour les ancres dans leurs différentes phases.
Le codage des couleurs se fait en héxadécimales voir paragraphe II.3.
 L'option TEXT
Cette option permet de positionner la couleur du texte standard (hors

lien). Par défaut la couleur est noire.
Syntaxe :
<BODY TEXT="#nombre_héxa">
 L'option LINK
Cette option permet de positionner la couleur d'un lien ou ancre qui n'a
Cours HTML
pas encore été visité. Par défaut la couleur est bleue.
Syntaxe :
<BODY LINK="#nombre_héxa">
 L'option VLINK
Cette option permet de positionner la couleur d'un lien ou ancre a déjà

été visité. Par défaut la couleur est violette.
Syntaxe :
<BODY VLINK="#nombre_héxa">
 L'option ALINK
Cette option permet de positionner la couleur d'un lien ou ancre au

moment où l'on clique dessus. Par défaut la couleur est rouge.
Syntaxe :
<BODY ALINK="#nombre_héxa">
Toutes ces options peuvent être combinées.

Pour ce document la ligne est :
 <BODY BGCOLOR="#808080" TEXT="#FFFFFF" VLINK="#FFFF80"

LINK="#000080">

 II.7 Ajouter son adresse électronique
La balise est :
<A HREF=mailto:adresse_electronique>Commentaires</A>
Lorsque vous cliquerez sur "Commentaires" une fenêtre vous permettant d'envoyer
un courrier s'affichera contenant l'adresse de la personne que vous voulez contacter
"adresse_electronique".
Exemple :
E-mail : <A
HREF=mailto:[email protected]>[email protected]</A>
E-mail : [email protected]
 III Les tableaux
 Lorsque vous présentez des données, un tableau peut être un moyen clair de les
disposer.
La construction d'un tableau nécessite un ensemble de balise pour déterminer les colonnes,
les lignes, le titre, la taille des bordures ...
<TABLE></TABLE> Début et fin du tableau

Cours HTML
<CAPTION></CAPTION> Titre du tableau
<TH></TH> Titre de chaque colonne
<TD></TD> Début et fin d'une case du tableau
<TR></TR> Nouvelle ligne du tableau

Ces balises peuvent avoir des options bien pratiques pour le centrage des éléments du
tableau.
Les options disponibles pour les balises de tableau

Balises
Options Significations
concernées
Epaisseur des
<TABLE> BORDER=chiffre traits du
tableau
Espacement
<TABLE> CELLSPACING=chiffre
inter-cellule
Espacement
<TABLE> CELLPADDING=chiffre texte - bord de
la cellule
Proportion
<TABLE> WIDTH=% entre tableau
et document
Positionne un
fond de
<TABLE> BGCOLOR=
couleur dans
un tableau
Titre en haut
<CAPTION> ALIGN=TOP|BOTTOM ou en bas du
tableau
Alignement du
<TR> <TH>
ALIGN=CENTER|LEFT|RIGHT texte dans les
<TD>
cellules
Alignement
<TH> <TD> VALIGN=TOP|MIDDLE|BASELINE
vertical
La ligne d'une
<TH> <TD> NOWRAP cellule est
insécables
Nombre de
cellules
<TH> <TD> COLSPAN
horizontales a
recouvrir
Nombre de
cellules
<TH> <TD> ROWSPAN
verticales a
recouvrir
<TH> <TD> BGCOLOR= Positionne un
fond de
Cours HTML
couleur dans
une cellule
 Le tableau peut permettre de centrer une image et du texte
La flèche
est
centrée

Pour se faire il vous suffit de définir un tableau sans bordure et de positionner votre
texte dans des cellules. Le source de ce petit tableau est le suivant.
<TABLE BORDER=0>
<TD><IMG ALIGN=TOP SRC="fleches.gif" ></TD>
<TD><H2>La flêche<BR>est<BR>centréee</TD>
</TABLE>
 IV Les images cliquables balise MAP

Une image peut servir d'ancre comme nous l'avons vu au paragraphe II.5 mais dans ce
cas quelque soit la partie de l'image sur laquelle vous cliquez vous irez toujours vers
une seule destination.
La balise MAP peut vous permettre de définir sur la même image différentes zones
cliquables qui vous renvéront sur des destinations variées.
 Vous devez utiliser l'option USEMAP avec la balise IMG pour indiquer que vous
définissez une image cliquable.
 Ensuite vous devez ouvrir la map "nom_map" en indiquant les différentes

coordonnées des zones cliquables.
<MAP NAME="nom_map">Descriptif des zones cliquables</MAP>
 Vous devez définir le type des différentes zones cliquables de votre image en utilisant
son Mot Clé, en indiquant le lien sur lequel cette zone pointe et les coordonnées dpe
des différentes zones cliquables de votre image en utilisant son Mot Clé, en indiquant
le lien sur lequel cette zone pointe et les coordonnées définissant l'élément.
Cours HTML
<tlynome< td=""></tlynome<>
Type Mot clé

Comment référencer l'élément
X1,Y1 point Haut Gauche
Rectangle RECT
X2,Y2 point Bas Droit
X1,Y1 Centre du cercle
Cercle CIRCLE
R Rayon du cercle
X1,Y1 Première extrémité
Polynome POLY X2,Y2 Deuxième extrémité
X3,Y3 .....................
Defaut DEFAULT Pour les points non définis précédemment
<AREA SHAPE="Mot Clé" HREF="adresse du lien" COORDS=X1,Y1,X2,Y2>
 Exemple :
Ce plan est divisé en quatre cases.

Il peut être intéressant de proposer à la
personne qui clique sur une des cases, un
agrandissement de la zone cliquée ou des
informations sur cette zone.
Pour cela vous pouvez utiliser les MAP, et
rattacher chaque case à un lien.

Il faut donc trouver les coordonnées des différentes cases.
Pour cela utilisez un logiciel tel que Xview sur les machines unix (tapez xv).
Vous pouvez utiliser n'importe quel logiciel qui vous permet de recupérer les coordonnées
absolues des différentes parties d'une image.
Grille de controle du
logiciel XView

Cours HTML
Utilisation de xv.
o Ouvrez l'image à traiter (Load)
o Cliquez sur les points qLoad)
o Cliquez sur les points qui déterminent les sommets de vos zones cliquables
avec le bouton gauche de votre souris.
Dans notre exemple, nous avons 4 rectangles. Ce qui défini un rectangle sont ses
sommets haut gauche (X1,Y1) et bas droit (X2,Y2).
Il faut donc déterminer ces deux points pour chaque rectangle.
Nous aurons :
o Rectangle 13 : (X1,Y1)=(0,0) et (X2,Y2)=(108,81)

Le source pour cette image cliquable est :
<IMG USEMAP="#nantes" SRC="carre.gif">

<MAP NAME="nantes">
<AREA SHAPE="RECT" HREF="adresse1" COORDS=0,0,108,81>
<AREA SHA COORDS=108,81,209,154>
</MAP>
Les adresses des liens sont visibles lorsque vous passez la souris sur les cases.
Il est tout à fait possible d'avoir sur une même image des types de zones cliquables
différent, un rectangle et un cercle ....
Cours HTML
 V Les formulaires
 V.1 Présentation Nous avons vu dans les paragraphes précédents comment présenter
les informations, comment structurer un document ...
Mais mis à part le cas où le lecteur vous envoie un courrier électronique, vous n'avez
pas la possibilité d'avoir une interaction avec ce dernier.
Le langage HTML résoud ce problème en proposant des formulaires ou forms qui
permettent de générer des zones de "dialogue" avec le lecteur.
Ces zones ou champs peuvent être du texte, des listes, des cases à cocher, des zones de
saisies d'informations ....
Ces formulaires n'ont aucun intérêt si vous ne pouvez pas récupérer l'information
fournie par le lecteur et ensuite la traiter. C'est pourquoi les formulaires nécessitent
d'être associés à un programme.
Par exemple pour intérroger une base de données, réaliser une enqu&ecréaliser une
enquête via le web, proposer toutes sortes de programmes avec l'interfaçage web
(questionnaires, correcteur orthographique, dictionnaires ...).
Dans ce paragraphe nous verrons uniquement les différentes formes de formulaires et

comment les mettre en oeuvre. La partie programmation ou CGI (Common Gateway
Interface) sera traitée dans un autre cours.
Le principe des formulaires est le suivant :
Vous créez un document dans lequel vous proposez des zones de saisies
(boutons cliquables, listes, texte ...). Chaque zone est référencée par un mot
clé. Une fois le formulaire rempli, le lecteur soumet ses réponses.
Le formulaire transmet les informations au programme indiqué dans le
formulaire sous forme :
Mot_Clé1=information1&Mot_Clé2=information2 ...
Ensuite, Il ne reste plus qu'à mettre en forme et traiter ces informations.
Attention : Les caractères accentués, les ponctuations, les espaces ... sont
transmis sous forme codée. Il est donc nécessaire de les remettre sous la bonne
forme avant de traiter l'information.
 V.2 La balise FORM Elle indique que l'on va utiliser un formulairiliser un

formulaire. Les balises générant les boutons, zone de texte et autres éléments seront
entre cette balise. Deux formulaires ne peuvent etre imbriqués.
<FORM></FORM>
Les options de cette balise sont :
o ACTION
Cette option indique l'URL de destination des données. Généralement cette

URL sera l'adresse d'un programme. Cet attribut est obligatoire.
Cours HTML
ACTION="adresse"
o METHOD
Cette option indique la façon dont vont être transmises les données POST ou
GET.
METHOD="POST" ou METHOD="GET".
La première envoie les données sans l'adresse indiquée dans l'option ACTION
tandis que GET envoie aussi l'adresse.
Cette option n'est pas obligatoire, par défaut GET sera positionné.
o ENCTYPE
Cette option indique le type MIME des données lorsque vous positionnez
l'attribut METHOD="POST". Elle est optionnelle.
Les zones de dialogue avec l'utilisateur sont définies en trois classes représentées par
trois balises :
INPUT, SELECT et TEXTAREA.
Ces balises doivent se situer entre la balise FORM.
 V.3 La balise INPUT Les différents attributs de cette balidifférents attributs de cette

balise.
o NAME
Cet attribut est obligatoire. Il associe un nom de variable aux informations

récupérées et les transmet au programme sous la forme nom_variable=valeur.
Attention, excepté pour les cases à cocher et les boutons radio, le nom doit être
unique dans le formulaire sinon il y aurait des confusions et des
dysfonctionnements.
NAME="nom_variable"
o TYPE
Cet attribut est obligatoire. Il permet de définir le type de la zone de saisie. Les
valeurs possibles sont les suivantes :
 CHECKBOX
TYPE="CHECKBOX" permet la création de cases à cocher.

Lorsque vous cochez une case, l'autre ne réagit pas.
Les cases à cocher sont indépendantes les unes des autres.
Première case
Deuxième case Le source est le suivant
<FORM ACTION="rien.pl">
<INPUT NAME="case" TYPE="CHECKBOX">Première case
Cours HTML
<BR>
<INPUT NAME="case" TYPE="CHECKBOX">Deuxième case
</FORM>
case est le nom de la variable qui référence les données.

rien.pl est le programme qui recevra les données à traiter.
 HIDDEN
TYPE="HIDDEN" permet la création d'un élément de saisie non

visible à l'écran mais son contenu sera transmis au programme.
 IMAGE
TYPE="IMAGE" permet la création d'une image cliquable comme

nous l'avons vu au paragraphe IV. Les éléments transmis au
programme sont alors les coordonnées x et y de la zone où a eu lieu le
clique.
Si la variable se nomme "zone", le programme recevra zone.x=coord_x
et zone.y=coord_y.
 PASSWORD
TYPE="PASSWORD" permet la création d'une zone de saisie dans

laquelle les caractères tapés par l'utilisateur sont remplacés par des
étoiles, offrant ainsi une plus grande confidentialité.
Les données récupérées par le programme sont, elles, en clair.
Entrez votre mot de passe
Le source est le suivant
<INPUT NAME="pass" TYPE="PASSWORD"> Entrez votre mot de
passe
</FORM>
pass est le nom de la variable qui référence les données.

 RADIO
TYPE="RADIO" permet la création d'un élément de saisie sous la

forme d'un bouton radio.
Les boutons radio sont liés les uns aux autres au même nom de
variable. Vous ne pouvez faire qu'un choix, lorsque vous cliquez sur
l'un d'eux, qui prend la valeur oui ou on, les autres sont mis à non ou
off.
Vous pouvez proposer bien évidemment plus de deux choix.
Cours HTML
Oui
Non
<INPUT NAME="radio1" TYPE="RADIO" VALUE="oui"> oui
<INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
</FORM>
radio1 est le nom de la variable qui référence les données.

L'attribut VALUE est obligatoire avec le type RADIO, il permet
d'initialiser la valeur de l'élément de saisie.
 RESET
TYPE="RESET" permet lorsque l'utilisateur clique sur ce bouton de

remplacer toutes les valeurs qu'il a saisies par les valeurs par défaut
positionnées grâce à l'attribut VALUE.
Saisie
Remplacez le texte de cette zone et cliquez sur "Effacez", le texte par

défaut sera remis.
<INPUT NAME="zone" TYPE="TEXT" VALUE="Valeur par
défaut"> Saisie
<INPUT TYPE="RESET" VALUE="Effacer">
</FORM>
zone est le nom de la variable qui référence les données.

VALUE référence le texte par défaut de la zone de saisie.
 SUBMIT
TYPE="SUBMIT" permet de créer un bouton qui, lorsque l'utilisateur

clique dessus, déclenche l'envoi des données au programme référencé
dans le champ ACTION.
Cours HTML
<INPUT TYPE="SUBMIT" VALUE="Soumettre">
</FORM>
Si vous cliquez sur le bouton, vous obtiendrez un message d'erreur. En

effet le programme rien.pl n'existe pas.
 TEXT
TYPE="TEXT" crée une zone de saisie de texte dont la taille est

définie par l'attribut SIZE.
Cet attribut ne définit pas lat SIZE.
Cet attribut ne définit pas la taille du texte entré mais uniquement la
zone dans laquelle il est entré.
<INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le
texte">
<INPUT TYPE="RESET" VALUE="Effacez">
</FORM>
o ALIGN
Cet attribut n'est utilisé qu'avec l'attribut TYPE="IMAGE" et permet de

positionner l'image par raport au texte.
Les options de cet attribut sont TOP, MIDDLE et BOTTOM.
o CHECKED
Cet attribut est optionnel et ne s'applique qu'aux TYPE="CHECKBOX" et

TYPE="RADIO" et permet d'activer une case à cocher ou un bouton radio.
Attention : vous ne pouvez activer qu'une case ou bouton par liste (référencé
par la même variable).
Dans cet exemple la case "oui" est cochée par défaut.
Oui
Cours HTML
Non
<INPUT NAME="radio1" TYPE="RADIO" CHECKED VALUE="oui"> oui
<INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
</FORM>
o MAXLENGTH
MAXLENGTH="chiffre"
Cet attribut permet de définir la longueur du buffer texte utilisé dans une zone
de saisie de TYPE texte (TEXT, PASSWORD).
Si vous essayez dans cet exemple d'entrer un texte de plus de 10 caractères,

vous entendrez un bip et les caractères au delà de 10 ne seront pas pris en
compte.
<INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10"
VALUE="0123456789">
</FORM>
MAXLENGTH définit le nombre de caractères maximum pouvant être saisi

SIZE définit la taille de la zone de saisie
Dans notre exemple les deux attributs ont la même taille mais cela n'est pas
obligatoire.
o SIZE
SIZE="chiffre"
Permet d'indiquer la longueur de la zone de saisie. Voir l'exemple précédent.
o SRC
SRC="adresse"
N'est utilisable qu'avec le TYPE="IMAGE" et permet d'indiquer le lieu où se
trouve l'image à insérer dans le formulaire.
o VALUE
VALUE="valeur par défaut"

Cours HTML
Cet attribut n'est obligatoire qu'avec le TYPE="RADIO".
Il permet de positionner dans la zone de saisie un valeur par défaut.
<INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10"
VALUE="0123456789">
</FORM>
La valeur par défaut qui s'affiche est "0123456789"
 V.4 La balise SELECT Elle permet de créer des listes.
o Les menus déroulants
Vous devez associer à cette balise différents attributs.
 NAME
Comme nous l'avons vu précédemment il permet d'associer un nom de

variable aux données selectionnées par l'utilisateur.
 OPTION
Cet attribut permet de définir chaque élément texte du menu. Il précède

chaque ligne de texte.
 SELECTED
Cet attribut fonctionne comme CHECKED et permet de définir un

élément selectionné par défaut. Il n'est pas obligatoire.
 Exemple
Cliquez sur la zone ou ligne de texte pour obtenir les autres éléments
selectionnables. Si SELECTED n'avait pas été positionné le choix par
défaut aurait été "Premier choix".

Cours HTML
<SELECT NAME="zone">
<OPTION>Premier choix
<OPTION SELECTED>Deuxième choix
<OPTION>Troisième choix
<OPTION>Quatrième choix
<OPTION>Cinquième choix
</SELECT>
</FORM>
o Les listes à ascenseurs
 SIZE
Les attributs sont identiques au menu déroulant mais pour définir une

liste à ascenseurs il vous suffit d'utiliser l'attribut SIZE="chiffre" qui
affichera à l'écran "chiffre" lignes.
 MULTIPLE
Vous pouvez, en utilisant cet attribut donner la possibilité de réaliser

plusieurs choix dans la liste.
 Exemple
Vous devez utiliser les ascenseurs pour obtenir les choix suivants non
visibles.
Tout comme précédemmen visibles.
Tout comme précédemment le choix "Deuxième choix" est celui par
défaut grace à l'attribut SELECTED.
L'attribut MULTIPLE vous permet donc de réaliser plusieurs choix
dans la liste, cliquez sur les différentes lignes.
Vous pouvez désactiver un de vos choix en recliquant dessus.
<SELECT NAME="zone" SIZE="3" MULTIPLE>
<OPTION>Premier choix
<OPTION SELECTED>Deuxième choix
<OPTION>Troisième choix
<OPTION>Quatrième choix
<OPTION>Cinquième choix
</SELECT>
</FORM>
Cours HTML
 V.5 La balise TEXTAREA Cette balise permet de créer une zone de saisie de texte
sous forme de bloc.
La zone de saisie est délimitée par les attributs ROWS (lignes) et COLS (colonnes). Si
vous entrez un texte plus long ou plus large que la zone de saisie, cette dernière
positionnera alors des ascenseurs pour vous déplacer.
Le texte compris entre les balises <TEXTAREA></TEXTAREA> sera affi
<TEXTAREA></TEXTAREA> sera affiché dans la zone de saisie.
Exemple
<TEXTAREA NAME="commentaire" COLS="30" ROWS="5">
Entrez votre texte
</TEXTAREA>
</FORM>
 VI Autres mots clés

 HR
Cette balise permet de tracer un trait.

Elle peut comporter certaines options.
o SIZE
Permet d'indiquer l'épaisseur du trait.

<HR SIZE=6>
o WIDTH
Permet d'indiquer la largeur du trait.

WIDTH="n" la largeur dépend de la taille de l'écran en pixels.
Cours HTML
<HR WIDTH="50">
WIDTH="n%" la largeur dépend de la largeur du document.

<HR WIDTH="55%">
o ALIGN
Permet de positionner le trait par rapport au document. Les options sont LEFT,
CENTER et RIGHT.
o NOSHADE
Par défaut le trait est ombré. Cette option permet de rendre le trait noir.
<HR SIZE=6 NOSHADE>
 BR
Permet de sauter une ligne.
 P
Permet de sauter une ligne mais à la différence de BR, le décalage est de deux lignes.
Un saut avec <BR>

puis un saut avec <P>
et le tour est joué
 VII Les mots clés importants
Récapiltulatif des mots clés importants

BALISE SIGNIFICATION OPTIONS
<HEAD> En-tête du document source voir II.2

<BODY> Corps du document source voir II.2
<H?> Modification de la taille d'un caractère voir II.3
Cours HTML
<PRE> Insertion d'un texte préformaté voir II.3
<UL> Formatage d'un texte voir II.3
<OL>
Formatage d'un texte voir II.3
<OL>
<DL> Formatage d'un texte voir II.3
<FONT> Taille d'un caractère ou couleur voir II.3 et II.3
<IMG SRC> Permet d'afficher une image voir II.4
<A HREF> Permet de créer un lien hypertexte voir II.5
<BODY BGCOLOR> Insère une couleur de fond voir II.6
<BODY
Insère une image de fond voir II.6
BACKGROUND>
<A HREF=mailto> Ouverture d'une fenêtre de mail voir II.7
<TABLE> Création d'un tableau voir III
<MAP> Création d'une image cliquable voir IV
<FORM> Création d'un formulaire voir V.2
Les boutons et zones de saisie dans un
<INPUT> voir V.3
formulaire
<SELECT> Les menus dans un formulaire voir V.4
<TEXTAREA> Zone de dialogue texte dans un formulaire voir V.5
<HR> Permet de tracer un trait voir VI
<BR> Saut de ligne voir VI
<P> Saut de ligne voir VI
 Les feuilles de style

Note préalable:
Vous pouvez consulter ce document depuis n'importe quel browser, mais pour en
visualiser les effets, il doit supporter les cascading style sheets (CSS). Netscape et
Explorer, versions 4 et supérieures vous le permettent. Pour les autres, je ne sais
pas.
Introduction
Le langage HTML n'a pas pour but de mettre en page les documents. Son but est de
permettre la distinction entre les différents éléments d'une page, et c'est au browser
de traiter l'affichage de celle-ci. Rien n'empêcherait donc quelqu'un de développer
un browser qui interpréterait les balises <H> autrement que par un changement de
taille, mais par un affichage décalé par exemple, le <H1> étant aligné
complètement à gauche, le <H6> se retrouvant presque à droite. Le décalage
Cours HTML
indiquerait l'importance de la section dans le document. Cette conception reste tout
à fait logique, puisque les balises <H> ne doivent pas être utilisées dans le but
d'afficher du texte dans une police plus grasse et grosse, mais bien parce que c'est la
section la plus importante de votre document. Mais un tel rendu dans ce type de
browser ne donnerait pas le résulta attendu par le concepteur de la page... Et c'est
ici que les feuilles de style interviennent.
Principe
Le but de la feuille de style est de permettre au concepteur (ou à l'utilisateur) de

définir l'apparence des balises utilisées, voir même de pouvoir définir plusieurs
styles pour une même balise. Ainsi, les auteurs auront un meilleur contrôle sur le
résultat final de leurs pages web. Ce style peut être défini au moyen de la
balise <STYLE> ou au moyen de la balise <LINK>.
Notons cependant que les feuilles de styles ne sont supportées (et encore, pas
complètement) que par les versions 4 et supérieurs des
browsers Netscape et Explorer....
STYLE
La balise <STYLE> défini le début et la fin de la section servant à définir les

éléments de styles à appliquer au document. Cette section se place dans la
partie <HEAD> du document et peut s'utiliser avec l'attribut TYPE . TYPE peut,
pour le moment, avoir deux valeurs reconnues:
 text/css : Utilisé pour indiquer que nous définissons une feuille de style
 text/javascript : Cette valeur n'est gèrée que par Netscape 4.0 et sert à
indiquer que l'on utilise des feuilles de styles en javascript.
Note: Dans Netscape, il est possible d'utiliser style à l'intérieur de la balise <BODY>
Exemple
<STYLE>

</STYLE>
<P>
<H1>Header taille 1</H1>
<P>

Résultat
Header taille 1
Header taille 2
Header taille 3
Header taille 4
Header taille 5
Header taille 6
LINK
La balise <LINK> a pour but de définir les relations entre le document actif et les
autres documents et ressources. D'après la norme HTML 3.2, elle doit être utilisée
pour les menus et barres d'outils spécifiques au document, pour la gestion de
l'impression du document, pour gérer la liaison avec les ressources associées telles
que les feuilles de style et les scripts ou pour définir un rendu alternatif au
document. <LINK> peut s'utiliser avec différents attributs :
 HREF : Définit l'URL de la ressource liée.

Cours HTML
 REL : Spécifie le type de relation entre le document source et la ressource
liée avec HREF . Les relations de typeLINK ne sont pas encore
standardisées, mais certaines valeurs sont déjà définies et/ou utilisées :
o CONTENTS : Dans ce cas, LINK référence un document servant de
table de matière.
o COPYRIGHT : Ici, LINK définit le copyright pour le document
actif.
o FONTDEF : Sert à lier un fichier de définition de fontes (supporté
par Netscape).
o GLOSSARY : LINK référence un document contenant un glossaire
des termes importants dans le document actuel.
o HELP : LINK pointe sur un fichier contenant une aide concernant le
document actif, par exemple en décrivant le contexte ou en offrant des
liens vers d'autres documents traitant du même sujet.
o HOME : LINK pointe sur la homepage du site.
o INDEX : LINK référence un document fournissant un index du
document actif.
o NEXT : LINK référence le document suivant dans un tour guidé et
peut être utilisé pour, par exemple, pré charger la page suivante.
(supporté par WebTV)
o PREVIOUS : LINK référence le document précédent dans un tour
guidé.
o SEARCH : LINK référence une page regroupant des liens relatifs à
une série de pages.
o STYLESHEET : LINK référence une feuille de style externe que le
browser peut utiliser pour afficher le document. (Reconnu
par Netscape et Explorer).
o TOP : LINK référence le premier document dans la hiérarchie, par
exemple, la couverture d'un magazine.
 REV : Définit une relation inverse.
 SRC : Définit l'URL de la ressource liée (Netscape et Explorer)
 TITLE : Définit un titre informatif pour la ressource liée.
 TYPE: Utilisé avec REL=STYLESHEET, sert à déterminer le type de
feuille de style liée et peut prendre deux valeurs :
Cours HTML
o text/css : Utilisé pour indiquer que nous définissons une feuille de
style
o text/javascript : Cette valeur n'est gérée que par Netscape 4.0 et sert à
indiquer que l'on utilise des feuilles de styles en javascript.
Exemple <HEAD>
<TITLE>Le langage HTML: Les feuilles de style</TITLE>
<META NAME="description" CONTENT="HTML feuille de style,
exemple">
<LINK rel=stylesheet href="link1.css" type="text/css">
</HEAD>
<BODY BGCOLOR=white TEXT=black LINK="#0000A0"
VLINK="#A000A0">
La feuille de style correspondant à ce document contient : <BR>
BODY {
color: blue;
background: #A0A0F0
}
</body>
Résultat
Pour voir le résultat de cet exemple, réfèrez-vous à ce document
CLASS
Cet attribut peut être utilisé pour pouvoir redéfinir une même balise en fonction de
telle ou telle pseudo-classe. Dans ce cas, en fonction de la pseudo-classe utilisée,
l'auteur pourra créér un rendu différent. Notons que si la pseudo-classe ne peut
s'appliquer qu'à une seule balise, la balise peut être omise dans la redéfinition. Par
exemple, pour la balise <A>, elle seule définissant les liens visités, non-visités ou
actifs, on peut se permetre de ne redéfinir que link, visited ou active.
Exemple:
<STYLE type="text/css">
DIV.alerte {background: #A00000; color: white;}
Cours HTML
DIV.note {background: black; color: white;}
A:link { color: red }
:visited { color: black }
</STYLE>
<DIV class=note>
Cette note ne signifie pas grand chose.
</DIV>
<DIV class=alerte>
Mais elle utilise les feuilles de styles.
</DIV>
Résultat:
Cette note ne signifie pas grand chose.

Mais elle utilise les feuilles de styles.
ID
L'attribut ID définit un identificateur unique dans toute la page. Il doit commencer

par une lettre et peut être suivit de lettres de chiffres, de tirets ou de points. ID peut
ainsi être utilisé pour agir sur la balise à l'endroit ou il est définit.
Exemple:
#abc {font-size: 20pt; background: #AA0000; color: blue; }
</STYLE>
<DIV ID=abc>Cette ligne est soumise à l'identificateur abc</DIV>
Résultat:
Cette ligne est soumise à l'identificateur abc
Insèrer un commentaire
Cours HTML
Lorsqu'on redéfini l'apparence d'une balise, il peut être utile de placer un
commentaire, souvant utile pour d'éventuelles modifications ultérieures. Dans le
cas des feuilles de style, l'insertion des commentaires s'inspire du langage C et se
place entre/* et */.
Exemple:
background: red; /* redéfinit le fond en rouge */

Que peut-on redéfinir dans une feuille de style ?
A priori, toutes les balises peuvent être redéfinies, mais pour ce faire, il faut utiliser
le langage correctement. Actuellement, les CSS ne sont pas encore complètement
implémentées dans les browsers, mais beaucoups de tags sont déjà supportés,
notement:

 font:
o font-style: [ normal | italic | oblique ] ; Permet de choisir le style de
la police.
H1, H2, H3 { font-style: italic }

o font-family: [[ family-name | generic-family]] , [ family-name | gen
eric-family ]; Permet de choisir quelle(s) police(s) il faut utiliser pour
afficher le texte. BODY { font-family: gill, helvetica, sans-
serif }
o font-variant: [ normal | small-caps ]; Permet de déterminer si le
texte sera affiché en petites capitales ou en texte normal.
EM { font-style: oblique }
o font-size: [ absolute-size | relative-size | longueur | pourcentage ];
Permet de déterminer la taille de la police utilisée, soit directement
soit en choisissant un nom générique ( comme sérif, cursive... ).
 absolute-size:[xx-small | x-small | small | medium | large | x-
large | xx-large]
 relative-size: [ larger | smaller ]
Cours HTML
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
o font-weight: [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 ]; Permet de choisir la largeur de la police.
Bolder et lighter seront utilisés pour modifier l'apparence de la balise
par rapport à la balise parente.
P { font-weight: normal }
 color: [ valeur ]; Permet de changer la couleur d'affichage du texte.
EM { color: red }
EM { color: rgb(255,0,0) }
 background : [ background-color || background-image || background-
repeat ||
background-attachment || background-position ]
P { background: url(chess.png) gray 50% repeat fixed }
o background-color : [ couleur | transparent ]; Permet de déterminer
la couleur de fond pour la police utilisée.
H1 { background-color: #F00 }
o background-image : [ url | none ]; Permet de choisir l'image de fond
à employer pour un élément.
BODY { background-image: url(fond.gif) }

P { background-image: none }
o background-repeat: [repeat-x | repeat-y | no-repeat ] Permet de
définir si l'image de fond sera répètée ou non, et si oui, si elle doit
l'être uniquement horizontalement ou verticalement
BODY {
background: red url(vertical.gif);
background-repeat: repeat-y;
}
o background-attachment: [ fixed | scroll ]; Permet de définir si
l'image de fond est fixe ou si elle doit défiler avec la page.
Cours HTML
BODY {
background: red url(vertifix.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
o background-position: [ pourcentage | longueur ] |
[ top | center | bottom] || [left | center | right ]; Permet de décaler
l'image de fond par rapport au bords de la page.
BODY { background: url(banner.jpeg) right top }

BODY { background: url(banner.jpeg) center }
 text
o word-spacing: [ normal | longueur ] ; Permet de redéfinir l'espace
entre les mots.
H1 { word-spacing: 0.4em }
o letter-spacing: [ normal | longueur ] ; Permet de redéfinir l'espace
entre les lettres.
BLOCKQUOTE { letter-spacing: 0.1em }

o text-decoration: [ none | underline | overline | line-through | blink ]
; Permet de définir la décoration du texte.
A:link, A:visited, A:active { text-decoration: underline }

o vertical-align: [ baseline | sub | super | top | text-top | middle | bott
om | text-bottom | pourcentage ] ; Permet de positionner l'alignement
vertical de l'élément par rapport à l'alignement normal ou de l'élément
parent.
H6 { vertical-align: super }
o text-transform: [ capitalize | uppercase | lowercase | none ] ;
Permet de forcer l'affichage du text en mettant une majuscule au début
de chaque mot, majuscules ou minuscules, ou encore en neutralisant
l'héritage de l'élément parent.
H1 { text-transform: uppercase }
o text-align: [ left | right | center | justify ] ; Permet de définir
l'alignement du texte.
Cours HTML
DIV.center { text-align: center }
o text-ident: [ longueur | pourcentage ]; Permet de définir l'indentation
qui apparaît devant la première ligne de la balise redéfinie. Elle ne
sera pas active au milieux d'un élément coupé par un autre (par
exemple, un <BR> ).
P { text-indent: 3em }
o line-height: [ normal | nombre | longueur | pourcentage ] ; Permet de
modifier la hauteur entre deux lignes. Si c'est un nombre, la distance
est calculée en fonction de la taille de la police multipliée par ce
nombre.
DIV { line-height: 1.2; font-size: 10pt }

DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
 box: Il est possible de définir des encadrements pour les objets.
o margin: [ longueur | pourcentage | auto ] Il est possible de définir les
marges :
 margin-top: [ longueur | pourcentage | auto ]; Permet de
définir la marge supérieure.
H1 { margin-top: 2em }
 margin-left: [ longueur | pourcentage | auto ]; Permet de
définir la marge de gauche.
H1 { margin-left: 2em }
 margin-right: [ longueur | pourcentage | auto ] ; Permet de
définir la marge de droite.
H1 { margin-right: 12.3% }
 margin-bottom: [ longueur | pourcentage | auto ] ; Permet de
définir la marge du bas.
H1 { margin-bottom: 3px }
o padding : [ longueur | pourcentage ] ; Il est possible de définir les
marges par rapport au bords du cadre.
Cours HTML
H1 {
background: white;
padding: 1em 2em;
}
 padding-top: [ longueur | pourcentage ] ;
BLOCKQUOTE { padding-top: 0.3em }

 padding-right: [ longueur | pourcentage ] ;
BLOCKQUOTE { padding-right: 20% }

 padding-bottom: [ longueur | pourcentage ] ;
BLOCKQUOTE { padding-bottom: 10px }

 padding-left: [ longueur | pourcentage ] ;
BLOCKQUOTE { padding-left: 0.3em }

o border: [ border-width || border-style || color ]
 border-width: [thin | medium | thick | longueur] ; Permet de
définir un bord pour le cadre.
H1 { border-width: thin thick medium none }

 border-right-width:[thin | medium | thick | longueur] ;
Permet de définir l'épaisseur du bord droit.
 border-left-width:[thin | medium | thick | longueur] ; Permet
de définir l'épaisseur du bord gauche.
 border-top-width:[thin | medium | thick | longueur] ; Permet
de définir l'épaisseur du bord supérieur.
 border-bottom-width:[thin | medium | thick | longueur] ;
Permet de définir l'épaisseur du bord inférieur.
 border-style: groove; Permet de définir le type de cadre.
 border-color: [ couleur ] ; Permet de définir la couleur du
bord.
P {
color: black;
background: white;
Cours HTML
border: solid;
}
 border-style: [ none | dotted | dashed | solid | double | groove
| ridge | inset | outset ]; Permet de définir le style du bord de
cadre.
#abc9 { border-style: solid dotted }

 border-top: [ border-top-width || border-style || color ] ;
Permet de définir en une fois l'apparence du bord supérieur.
 border-right: [ border-right-width || border-style || color ] ;
Permet de définir en une fois l'apparence du bord droit.
 border-botom: [ border-bottom-width || border-style || color
] ; Permet de définir en une fois l'apparence du bord inférieur.
 border-left: [ border-left-width || border-style || color ] ;
Permet de définir en une fois l'apparence du bord gauche.
 width: [ longueur | pourcentage | auto ] ; Permet de définir la largeur d'un
élément. Cette propriété peut s'appliquer aux éléments de textes, mais sera
plus utile avec les éléments de remplacement, tels que les images.
IMG.icon { width: 100px }

 height: [ longueur | auto ] ; Permet de définir la hauteur d'un élément. Cette
propriété peut s'appliquer aux éléments de textes, mais sera plus utile avec
les éléments de remplacement, tels que les images.
IMG.icon { height: 100px }

 float: [ left | right | none ] ; Permet de décaler un objet sur la gauche ou sur
la droite, et de forcer le texte à l'envelopper sur le côté opposé.
IMG.icon {
float: left;
margin-left: 0;
}
 clear: [ none | left | right | both ]; Permet de déterminer si un élément
autorise des éléments flottants sur ses flancs, ou, plus exactement, sur quels
flancs un tel élément n'est pas autorisé. Avec clear égal a left, un élément
sera placé en dessous de tout élément flottant situé à sa gauche.
H1 { clear: left }
Cours HTML
 first-line: Permet de définir la première ligne d'un pseudo-élément.
 first-letter: Permet de définir la première lettre d'un pseudo-élément.
Les pseudo-éléments et les pseudo-classes
Les pseudo-classes sont en fait des propritétés intrinséquement liées à une balise.
Par exemple, pour la balise anchor<A> , on peut considèrer qu'elle possède trois
pseudo-classes: link, visited et active , qui correspondent aux trois états d'un lien
html: un lien non visité, un lien déjà visité, ou un lien sur lequel on est en train de
cliquer. Les pseudo éléments, quand a eux, sont en fait des parties d'un élément,
comme la première lettre d'un paragraphe ou la première ligne d'une section Dans
les pseudo-classes, nous avons:
 La balise anchor:
o A:link : { color: red } ;
o A:visited : { color: black };

o A:active : { color: blue };
Dans les pseudo-éléments, nous trouvons:

 first-line: Permet de définir un style particulier pour la première ligne d'une
balise.
P:first-line { font-style: small-caps }

 first-letter: Permet de définir un style pour la première lettre d'une balise.
P:first-letter { font-size: 200%; float: left }

first-letter peut s'appliquer à :
1. font
2. color
3. background
4. 'text-decoration'
5. 'vertical-align' (seulement si 'float' est égal à 'none')
6. 'text-transform'
7. 'line-height'
8. margin
9. padding
Cours HTML
10.border
11.'float'
12.'clear'
Les balises imbriquées
A priori, lorsqu'on imbrique des balises, et si il n'existe aucune redéfinition pour les
"sous" balises, elles héritent des attributs pour les balises parentes. Ainsi, nous
avons redéfinis plus haut <H1> et si nous y imbriquons du texte encadré par la
balise keyboard, celui-ci héritera des attributs redéfinis dans <H1>
Exemple:
<H1>Hello world, <KBD> ceci est ma première page html. </kbd> Ce n'est pas

fameux, mais nous allons améliorer tout ça.
Résultat:

Hello world, Ce n'est

ceci est ma première page html.
pas fameux, mais nous allons

améliorer tout ça.
Modifier différement
Nous venons de voir qu'une balise imbriquée hérite des attributs des balises
"mêres". Mais il est possible de redéfinir les attributs d'une balise en fonction de la
manière dont elle est imbriquée dans d'autres. Ainsi, puisque toute les
balises <Hx> ont été redéfinies, rien ne nous empêche de redéfinir la
balise <EM> en fonction de la balise qui la contient, ce qui nous permet d'obtenir
un habillage spécifique pour chacune de celles-ci.
Cours HTML
Exemple :
H1 EM { color: blue; font-size: 10pt; }

H2 EM { color: black; font-size: 15pt; }
H3 EM { color: red; font-size: 30pt; }
</STYLE>
<H1> taille H1 <em>avec em </em> redéfini </h1>
Résultat :
taille H1 avec em redéfini

Redéfinition par groupes.
Si l'auteur veut redéfinir toute une série de balises de la même façons, et pouvoir
rapidement modifier ces modifications, il lui est possible d'agir directement sur
plusieures balises.
Exemple:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Cascades
Il est possible, pour l'auteur, d'utiliser en même temps et/ou partiellement plusieures
feuilles de style. C'est ce qu'on appelle utiliser des feuilles de styles en cascades.
Notons que dans ce cas, et en cas de conflit, c'est la dernière redéfinition qui prends
le pas sur les précédentes. Notons aussi que @import doit être déclaré en début de
feuille de style, avant toute autre redéfinition.
Cours HTML
Exemple:
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* remplace les attributs définits dans les feuilles importées. */
'important' :
Le lecteur pouvant utiliser ses propres feuilles de style pour lire les documents qu'il
trouve sur le web, et celles-ci pouvant entrer en conflit avec celles de(s)
(l')auteur(s), c'est toujours le style de(s) (l')auteur(s) qui prédominera.Mais il est
possible, et pour l'auteur, et pour le lecteur, d'augmenter la "valeur" de leur
déclaration dans une feuille de style grâce à l'attribut important . Les balises
importantes d'un lecteur prendront le pas sur les balises normales (redéfinies sans
important) d'un auteur. Mais si l'auteur les définit avec l'attribut important, elles
prendront toujours le pas sur celles du lecteur.
Exemple:
H1 { color: black ! important; background: white ! important }

P { font-size: 12pt ! important; font-style: italic }

 IX Conclusion
 De nos jours, le marché du travail étant ce qu'il est, un employeur engagera plutot la
personne ayant le plus de connaissances annexes à ses études les candidats ont tous
maintenant des diplômes élevés. C'est pourquoi la connaissance du langage HTML
peut être ce petit plus qui fera pencher la balance en votre faveur.
Une adresse électronique sur un CV c'est bien mais si en plus vous avez une adresse
web indiquant votre connaissance en ce domaine c'est mieux et très apprécié.
 Afin de faire connaître vos travaux il est utile d'utiliser le plus de moyens de diffusion
possibles. Internet via les pages créees en langage HTML est l'un de ces moyens, et
certainement l'un des moins chèrs en considérant toutes les possibilités offertes.
 Une option des navigateurs est de pouvoir montrer le document source d'une page que
vous lisez. Ceci peut vous permettre de mieux comprendre le langage en ayant à votre
portée une très grande quantité d'exemple. N'hésitez pas à y jeter un oeil c'est très
instructif. Donc apprenez en butinant ...

CoursHTML Id2069

Transféré par

Droits d'auteur :

Formats disponibles

CoursHTML Id2069

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

CoursHTML Id2069

Transféré par

Droits d'auteur :

Formats disponibles

Cours HTML

o II.2 Comment structurer une page HTML ?

o II.3 Les formats de Texte

 Les différents formats de texte

 Le lien vers un élément externe à vos pages

 III Les tableaux

o V.2 La balise FORM

 Les menus déroulants

 VI Autres mots clés

HTML signifie HyperText Markup Language. Ce langage permet de présenter des

Pourquoi apprendre le langage HTML ?

 II Ma première page en HTML

Le langage HTML est un langage à balises :

<I>En italique</I> En italique

 II.2 Comment structurer une page HTML ?

<HTML> début du document

</HTML> Fin du document

 Les balises HTML indiquent que le document est dans ce langage.

Exemple du titre des pages du CICRP

Toutes ces recommandations vous permettrons de respecter la fameuse

 II.3 Les formats de Texte

o Les différents formats de texte

<B>en gras</B> en gras

o La taille des caractères

<H3>Taille 3</H3> Taille 3

<H5>Taille 5</H5> Taille 5

<H6>Taille 6</H6> Taille 6

Vous pouvez aussi utiliser à partir de la version 2 de HTML une balise

<FONT SIZE=7>Taille 7</FONT> Taille 7

<FONT SIZE=6>Taille 6</FONT> Taille 6

Texte déjà formaté

La liste non numérotée

<FONT COLOR="#FF0000"> rouge

Certains écrans peuvent altérer la couleur, vous pouvez sur un écran,

 II.4 Comment insérer une image au texte ?

Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la

<IMG ALIGN=TOP SRC="..."> la flèche est au dessus du texte

<IMG ALIGN=MIDDLE SRC="..."> la flèche est au milieu du texte

<IMG ALIGN=BOTTOM SRC="..."> la flèche est en dessous du texte

<IMG ALIGN=LEFT SRC="...">

<IMG ALIGN=RIGHT SRC="...">

<IMG VSPACE=40 SRC="applecom.gif">

<IMG HSPACE=40 SRC="applecom.gif">

Ces options permettent de redéfinir la taille de l'image.

<IMG WIDTH=30 HEIGHT=30 SRC="applecom.gif">

Cette option permet de fai

<IMG BORDER=1 SRC="applecom.gif">

<IMG BORDER=10 SRC="applecom.gif">

la page et d'une icône comme celle-ci.

La balise à utiliser est <A HREF="adresse">Zone cliquable</A>

"adresse" est une adresse web ou une image au format jpeg.

Deux types de liens sont disponibles.

 Le lien vers un élément externe à vos pages

o Le lien vers un élément externe à vos pages

o Le lien vers un élément interne à vos pages

Les balises sont :

o Une image comme ancre

<A HREF="http://www.cicrp.jussieu.fr"> <IMG SRC="..."></A>

o Option de la balise A HREF