HTML
CEDT G15
Département GEOMATIQUE
Prof: [Link]
INGENIEUR TOPO/GEOM
1
Langage HTML
1. Définition
2. Description
3. Squelette d’un fichier HTML
4. Texte
5. Listes
6. Liens
7. Image
8. Arrière-plan
9. Tableaux
10. Formulaires
11. Frames
2
1. Définition
→ HTML : Hyper Text Markup Language
→HTML: un langage de description qui va nous
permettre de décrire l'aspect d'un document, d'y
inclure des informations variées (textes, images,
sons, animations,… etc.) et d'établir des relations
cohérentes entre ces informations grâce aux liens
hypertextes.
→ Interprétation : navigateur ou browser.
→ Avantages: (peu couteux, simple à aborder, …)
3
2. Description
→ La description d’un document HTML passe par l'utilisation de
BALISES (ou "TAGS" en anglais).
→ Une balise est délimitée par les signes "<" et ">" entre lesquels
figure le nom de la balise.
→ La plupart du temps, on utilise une balise de début et une
balise de fin.
<B> Texte en gras </B>
Balise <B> Balise </B>
Début de l’écriture Fin de l’écriture
en gras Texte à écrire en gras
en gras
4
3. Squelette d’un fichier HTML
<HTML>
<HEAD>
<TITLE>
En-tête Titre de la page
</TITLE>
</HEAD>
<BODY>
Corps Contenu de la page
</BODY>
</HTML>
5
Exercice 1
→ Ouvrir l’éditeur de texte
→ Taper le code HTML suivant:
<HTML>
<HEAD>
<TITLE>
Page HTML
</TITLE>
</HEAD>
<BODY>
Ceci est le premier essai
</BODY>
</HTML>
→ Enregistrer le fichier sous le nom « [Link] »
→ Ouvrir le fichier [Link]
6
4. Texte
→ Quelques balises élémentaires:
<B>…</B> Gras
<STRONG>…</STRONG>
<I>…</I> Italique
<EM>…</EM>
<U>…</U> Souligné
<S>…</S> Barre le texte
<FONT SIZE=…>…</FONT> Taille Une nombre de 1 à 7
<FONT COLOR=″#$$$$$$″>…</FONT> Couleur
<FONT FACE=″…″>…</FONT> Police
<BR> Aller à la ligne
<!--- ***---> Commentaire
<CENTER>…</CENTER> Centrer
7
4. Texte
→ Quelques balises élémentaires (suite):
<PRE>…</PRE> Texte préformaté
<ADDRESS>…</ADDRESS> Adresse
<SUB>…</SUB> Indice
<SUP>…</SUP> Exposant
<DIV ALIGN=…>…</DIV> Aligner left, center,right
<BLINK>…</BLINK> Texte clignotant
<BLOCKQUOTE>…</BLOCKQUOTE> Citation
<P>…</P> Paragraphe
<Hn>…</Hn> Titre n=1 à 6
<HR> Ligne horizontale de width, size, align
séparation 8
4. Texte
→ Codes de quelques couleurs basiques:
Bleu #0000FF Rouge #FF0000
Vert #00FF00 Jaune #FFFF00
Blanc #FFFFFF Gris clair #C0C0C0
Violet #8000FF Noir #000000
9
4. Texte
→ Quelques caractères spéciaux:
Caractère ENTITY Caractère ENTITY
à &agrace; ç ç
â â è è
ä ä é é
ï ï ê ê
î î ô ô
ù ù û û
« « » »
10
Exercice 2
→ Réaliser la page HTML suivante:
11
5. Listes
→ Balises de listes:
<UL>…</UL> Liste non ordonnée
<OL>…</OL> Liste ordonnée TYPE
<LI>…</LI> Élément de la liste
12
Exercice 3
→ Réaliser la page HTML suivante:
13
6. Liens
Html est un langage hypertexte qui vous permet en cliquant
sur un mot, généralement souligné (ou une image) de vous
transporter;
→ vers un autre endroit du document.
→ vers un autre fichier Html situé sur votre ordinateur.
→ vers un autre ordinateur situé sur le réseau internet.
La syntaxe de ces liens entre plusieurs pages, est simple mais
entraînera de nombreux commentaires :
<A HREF="URL ou adresse">...</A>
14
6. Liens
→ Deux types de liens:
- Lien externe
- Lien interne
<A NAME="***">...</A> Point d'ancrage
<A HREF="#***">...</A> Lien vers une ancre dans la
même page
<A HREF="URL#***">...</A> Lien vers une ancre dans une
autre page
15
Exercice 4
→ Réaliser la page HTML suivante:
16
7. Images
* Une image peut être insérée dans un document HTML de la
suivante: <IMG SRC=‘’URL’’>
Attribut Signification
SRC Adresse de l’image
ALIGN Position de l’image
WIDTH Largeur de l’image
HEIGHT Hauteur
BORDER Cadre autour de l’image
* Une image peut être utilisée comme un lien dans un
document HTML:
<A HREF=‘’URL#****’’><IMG SRC=‘’URL’’></A>
17
Exercice 4
→ Réaliser la page HTML suivante:
18
8. Arrière-plan
* Le langage Html permet de changer l’arrière-plan
[background] (coloré ou composé d'une image) d’un
document HTML: <BODY BGCOLOR=‘’#$$$$$$’’> </BODY>
* Attributs de la balise <BODY>:
Attribut Signification
BACKGROUND Texture d’arrière-plan
BGCOLOR Couleur de l’arrière-plan
TEXT Couleur de texte
LINK Couleur de lien
ALINK Lien actif
VLINK Lien visité
19
Exercice 5
→ Réaliser la page HTML suivante:
20
Exercice 6
→ Réaliser les pages et les liens suivants:
21
9. Tableaux
En Html, les tableaux servent non seulement à aligner des
chiffres mais surtout à placer des éléments à l'emplacement
que vous souhaitez. L'usage des tableaux est donc très
fréquent.
Un tableau est composé de lignes et de colonnes qui forment
les cellules du tableau. Les balises de base sont donc :
<TABLE>...</TABLE> Début et fin de tableau width, border, cellspacing,
cellpadding
<TR>...</TR> Début et fin de ligne align, valing
<TD>...</TD> Début et fin de cellule width, rowspan, colspan, aling,
valing, bgcolor
22
Exercice 7
→ Réaliser la page suivante:
23
10. Formulaires
Les formulaires peuvent être préparés afin
de saisir des données.
Un formulaire doit toujours débuter par la
commande <FORM> et se termine par
</FORM>.
24
10. Formulaires
→Champ de saisir une ligne de texte:
<INPUT TYPE=″TEXT″ NAME=″nom″ SIZE=longeur MAXLENGHT=nombre de caract >
→Zone de texte:
<TEXTAREA NAME=″nom″ ROWS=nombre_ligne COLS=nombre_col ></TEXTAREA>
→Radio:
<INPUT TYPE=″RADIO″ NAME=″nom″ VALUE= ″ valeur ″ CHECKED >
→Case à cocher:
<INPUT TYPE=″CHECKBOX″ NAME=″nom″ VALUE= ″ valeur ″ CHECKED >
25
10. Formulaires
→Champ de mot de passe:
<INPUT TYPE=″PASSWORD″ NAME=″nom″>
→Liste déroulante:
<SELECT NAME=″nom″>
<OPTION SELECTED> élément 1
<OPTION> élément 2
…
</SELECT>
26
10. Formulaires
→Bouton SUBMIT:
<INPUT TYPE=″SUBMIT″ NAME=″nom″ VALUE=″texte du bouton″ >
→Bouton RESET:
<INPUT TYPE=″RESET″ NAME=″nom″ VALUE=″texte du bouton″ >
→Bouton quelconque:
<INPUT TYPE=″BUTTON″ NAME=″nom″ VALUE= ″texte du bouton″>
27
Exercice 8
→ Réaliser le formulaire suivant:
28
11. Frames
Cette fonctionnalité permet de diviser la
fenêtre en zones appelées frames.
Attention le corps du fichier n'est plus inclus
dans <BODY>…</BODY> mais dans :
<FRAMESET>…</FRAMESET>.
ROWS=″ ″ Division horizontale
COLS=″ ″ Division verticale
BORDER= Bordure
29
11. Frames
<FRAMESET ROWS=″25%,75%″> Contenu de [Link]
Contenu de [Link]
<FRAME SRC=″[Link]″>
<FRAME SRC=″[Link]″>
</FRAMESET>
<FRAMESET COLS=″50%,50%″>
<FRAME SRC=″[Link]″>
Contenu de Contenu de
<FRAME SRC=″[Link]″> [Link] [Link]
</FRAMESET>
30
11. Frames
<FRAMESET ROWS=″25%,75%″>
Contenu de [Link]
<FRAME SRC=″[Link]″>
<FRAMESET COLS=″50%,50%″>
<FRAME SRC=″[Link]″> Contenu de Contenu de
[Link] [Link]
<FRAME SRC=″[Link]″>
</FRAMESET>
</FRAMESET>
31
11. Frames
Les attributs de <FRAME>:
NAME=″ ″ Nom de la zone
SRC=″ ″ URL
SCROLLING Barre de défilement (yes, no)
NORESIZE Taille n’est pas modifiable par l’utilisateur
Pour utiliser les "frames", un nouvel attribut "TARGET" de
la commande <A> permet de donner le nom de la cellule
dans laquelle le document sera affiché.
<A HREF="url" TARGET=″″ >lien</A>
32