Android Lab Test : Le capteur gyroscope (français)
Le langage HTML
1. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Sommaire
HISTORIQUE...............................................................................................................2
STRUCTURE D’UNE PAGE HTML...................................................................................3
FORMATER LE TEXTE...................................................................................................4
ETABLIR DES LISTES ET DES DÉFINITIONS................................................................6
INSÉRER UNE IMAGE..................................................................................................7
PLACER DES LIGNES HORIZONTALES.........................................................................8
INSÉRER UN LIEN.......................................................................................................9
UTILISER LE COURRIER............................................................................................10
CRÉER UN FORMULAIRE............................................................................................11
PLACER DES LIENS SUR DES IMAGES.......................................................................12
UTILISER UNE TRAME SONORE.................................................................................13
UTILISER UNE SÉQUENCE VIDÉO..............................................................................14
CRÉER UN TABLEAU..................................................................................................15
SPÉCIFIER UN FONDS D'ÉCRAN ...............................................................................17
LES AUTRES COMMANDES.........................................................................................18
LES COOKIES............................................................................................................19
1
2. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Historique
Le langage HTML provient du langage SGML (Standard Generalized Markup
Language).
C’est le navigateur (en anglais « browser ») qui interprète les commandes
HTML contenues dans le document.
Il est apparu en 1990.
2
3. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Structure d’une page HTML
Une page HTML est un fichier texte. On peut donc utiliser n’importe quel
éditeur de texte pour le modifier.
Une page HTML doit contenir les éléments suivants :
Elément Description
<HTML> Marque le début du document.
<head> Marque le début de la zone d'en-tête.
<title> Marque le début du titre de la page.
</title> Marque la fin du titre de la page.
</head> Marque la fin de la zone d'en-tête.
<body> Marque le début du corps du document.
Corps du document (textes et images).
</body> Marque la fin du corps du document.
</HTML> Marque la fin du document HTML.
Les balises vont par paire : une balise début <code> possède une balise de
fin équivalente </code>.
Les balises peuvent figurent en minuscules ou en majuscules.
3
4. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Formater le texte
Action Syntaxe
Pour formater un en-tête (header en Utiliser les balises de <H1> à <H6> (de la plus grosse à la
anglais) plus petite).
Pour center du texte <center>texte </center>
Pour changer de paragraphe <P>
Pour changer de ligne <BR>
Pour afficher du texte en gras <b>texte</b> ou <strong>texte</strong>
Pour afficher du texte en italique <EM>texte</EM> ou <I>texte</I> ou
<CITE>texte</CITE>
Pour afficher du texte avec une <TT>texte</TT>
police à espace constant
Pour afficher du texte préformaté (le <pre>texte</pre>
navigateur respecte alors les fins de
ligne)
Pour afficher du code de <CODE>texte</CODE>
programmation (analogue à
<TT>texte</TT>; les fins de ligne
sont ignorées)
Pour attribuer l'annotation variable à <VAR></VAR>
une donnée (s'affiche en italique)
Pour augmenter des caractères d’un <FONT SIZE="+2"></FONT SIZE="+2"> ou <FONT
certain nombre d’unités (de 1 à 7) SIZE="+2"></FONT>
Pour réduire la taille des caractères <FONT SIZE="-2"></FONT SIZE="-2"> ou <FONT SIZE="-
d’un certain nombre d’unités (de 1 à 2"></FONT>
7)
Pour emprisonner un paragraphe <BLOCKQUOTE></BLOCKQUOTE>
(exemple : une citation) en alinéa
Pour rayer un texte <STRIKE></STRIKE>
Pour utiliser les indices <SUB></SUB>
Pour utiliser les exposants <SUP></SUP>
Pour faire clignoter du texte <BLINK>texte</BLINK>
Pour modifier la police de caractères Utiliser l’attribut FACE=« première police, deuxième
(par ordre de préférence) police ».
Pour spécifier la couleur du texte Utiliser l’attribut COLOR.
Remarques :
• Les balises <P> et <BR> n'ont pas besoin d’être fermées. De plus,
elles peuvent être répétées.
4
5. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Il existe des caractères spéciaux dans HTML. Pour les utiliser, on fait aux
commandes dites alternatives :
Commande alternative Caractère spécial
< <
> >
& &
" "
Pour pouvoir utiliser les caractères accentués sur le Web, il faut savoir
plusieurs choses. Ainsi, on distingue plusieurs types de codage des
caractères :
• les caractères référencés (Entity References en anglais), qui
utilisent le jeu de caractères US-ASCII standard ; ce jeu de
caractère n’utilise que 7 bits (ce qui permet de coder 127
caractères).
Avantage :
• Certains systèmes informatiques filtrent le 8ème bit : bien que
la norme HTTP utilise 8 bits pour les échanges, ces jeux de
caractères 8-bits (ou « étendus ») diffèrent d'un système
informatique à l’autre.
Inconvénient :
• La composition et la consultation des sources HTML de votre
document est fastidieuse (exemple : le caractère « é » est
codé « é »).
• les caractères ISO Latin-1 (ISO-8859-1)
La plate-forme informatique de conception doit utiliser ce jeu de
caractères. Les caractères sont codés sur 8 bits. Les systèmes Unix
et MS-Windows peuvent utiliser ces jeux de caractères, mais
Macintosh, MS-DOS et OS/2 ont adopté des jeux caractères
différents.
5
6. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Etablir des listes et des définitions
Action Syntaxe
Pour créer une liste non ordonnée <UL><LI>1er point<LI>2ème point</UL>
Pour créer une liste ordonnée <OL><LI>1er point<LI>2ème point</OL>
Pour changer de type de puce dans une <UL TYPE=disc> (ellipse), <UL TYPE=circle> (cercle) ou
liste non ordonnée <UL TYPE=square> (carré)
Pour changer de type de numérotation <OL TYPE=a> (minuscules), <OL TYPE=I> (chiffres
dans une liste ordonnée romains en majuscules), <OL TYPE=i> (chiffres romains
en minuscules) et <OL TYPE=1> (chiffres)
Pour définir une zone de définition <DL>
(Definitions List)
Pour indiquer le premier terme à définir <DT>
(Definition Term)
Pour donner la définition du premier <DD>
terme en retrait d'un alinéa
Pour indiquerla fin de la zone de </DL>
définition (Definition List)
Remarque :
• Pour enchaîner plusieurs définitions, répéter la séquence
<DT><DD> pour chaque définition. On peut ainsi donner plusieurs
définitions à un même terme en utilisant plusieurs fois la balise
<DD> sous la balise <DT>.
• Les listes peuvent être imbriquées.
6
7. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Insérer une image
Les navigateurs Web reconnaissent deux formats d'images compressés :
• les images GIF,
• les images JPEG.
Action Syntaxe
Pour insérer une image <img src="images.gif">
Pour aligner une image à la base <img src="images/serviette50.gif" ALIGN=BOTTOM>
Pour aligner une image à la tête <img src="images/serviette50.gif" ALIGN=TOP>
Pour aligner une image au centre <img src="images/serviette50.gif" ALIGN=MIDDLE>
Pour aligner du texte à gauche <img src="photos/PK015moyenne.jpeg" ALIGN=LEFT
HSPACE=4>
Pour aligner du texte à droite <img src="photos/PK015moyenne.jpeg" ALIGN=RIGHT
HSPACE=4>
Pour définir un espace horizontal libre Utiliser l’attribut HSPACE (de 1 à 5)
entre l'image et le texte
Pour forcer un changement de ligne qui <br clear>
tienne compte de la place occupée par
l'image (en fin du texte)
Remarque :
• La taille de l'image est déterminée par le fichier lui-même.
7
8. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Placer des lignes horizontales
Action Syntaxe
Pour placer une ligne horizontale <HR>
Pour faire varier la largeur de la ligne en pourcentage de la <HR WIDTH=75%>
largeur de l’écran
Pour faire varier la largeur de la ligne en nombre de pixels <HR WIDTH=200>
Pour faire varier l'épaisseur de la ligne <HR SIZE="5">
Pour aligner les lignes à gauche <HR ALIGN=left>
Pour aligner les lignes à droite <HR ALIGN=right>
Pour aligner les lignes au milieu <HR ALIGN=center>
Pour afficher une ligne sans effet de profondeur <HR NOSHADE>
Remarque :
• On peut placer une image en tant que ligne.
8
9. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Insérer un lien
Action Syntaxe
Pour insérer un lien hypertexte-hypermédia <A HREF="url">texte lié</A>
Pour créer un lien vers un document <A
HREF="http://www.grr.ulaval.ca/grrwww/glossairehtml.
html">Glossaire</A>
Pour créer signet (c’est-à-dire un point <a name="Gopher">
d'accès à l'intérieur d'un document HTML)
Pour se rendre à un signet <a href="manuel8.html#Gopher">Gopher</a>
Pour voir les liens sous forme de texte Utiliser l’attribut ALT : <A HREF="fichier.HTML"><img
src="images/belicone.gif" ALT="accès au fichier
X"></a>
Remarque :
• Les liens apparaissent en couleur contrastée et souligné dans le
navigateur.
Un lien peut pointer vers différents types de site :
Type de site Syntaxe
Site HTTP (WWW) <A HREF="http://WWW.fsaa.ulaval.ca">Serveur WWW
de la FSAA</A>
Site FTP <A HREF="ftp://ftp.apple.com/pub">Site FTP de la
compagnie Apple</A>
Site TELNET (émulation de terminal <A HREF="telnet://ariane.ulaval.ca/">ARIANE</A>
VT100/VT220)
Site TN3270 (émulation de terminal IBM <A HREF="tn3270://muse
3270) <retour>@mvs.mcgill.ca/">MUSE</A>
Site GOPHER <A
HREF="gopher://dionysos.ulaval.ca:70/00/reglementati
on/calendrier/1996-1997/cal9697.rtf.txt</A>
Site USENET (news) <A HREF="news:soc.culture.quebec">Société
québecoise</A>
Fichier sur le système hôte <A HREF="fichier.HTML">fichier</A>
9
10. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Utiliser le courrier
Action Syntaxe
Pour envoyer du courrier <A HREF="mailto:dboivin@grr.ulaval.ca">Le courrier
électronique</a>
10
11. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Créer un formulaire
Action Syntaxe
Pour créer un formulaire <FORM METHOD="POST" ACTION="/cgi-
bin/formulaire.pl?xxx">
Pour créer un champ de saisie de texte <input type="text" name="name">
Pour spécifier la longueur du champ de saisie <input type="text" name="name" size=30>
de texte
Pour créer deux champs de type bouton <input type="radio" name="info" value="OUI">OUI
radio (donc exclusifs) <input type="radio" name="info" value="NON">NON
Pour créer un champ de type case à cocher Kent, England <input name="city" TYPE=checkbox
(pour pouvoir sélectionner plusieurs choix en VALUE="Kent">
même temps)
Pour créer un champ de type combo box <select name><option selected>Kent,
(apparaissant donc sous la forme d’un menu England<option>Toronto, Canada<option>Dublin,
« pop-up ») Ireland</select>
Pour créer un champ de saisie texte <TEXTAREA name="logiciels?" rows=3
multilignes (3 lignes de 56 colonnes) cols=56></TEXTAREA>
Pour valider le formulaire et le soumettre au <input type="submit" value="Soumettre">
serveur HTTP
Pour vider le contenu du formulaire <input type="reset" value="effacer et
recommencer">
Remarque :
• METHOD= « POST » désigne la méthode de transmission des
champs de saisie au serveur.
• ACTION=« /cgi-bin/formulaire.pl » désigne le programme de
traitement des informations.
• « ?xxx » désigne les éventuels arguments du programme.
• Pour les boutons radio, on peut spécifier n’importe quel type de
valeur dans l’attribut « value ».
11
12. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Placer des liens sur des images
Action Syntaxe
Pour afficher une image dont certaines <A HREF="http://www.grr.ulaval.ca/cgi-
zones ont un lien bin/imagemap.exe/moissonbatteuse"><img
src="images/moissonbatteuse.gif" ISMAP></a>
Pour désactiver le carré bleu entourant <img border=0 src="images/moissonneuse.gif">
une image liée
Remarque :
• Le programme « imagemap.exe » identifiera et retournera l'URL
associée à la zone sélectionnée. Pour cela, il faut fournir une clef de
l'image "cartographiée". Il faut aussi constituer un fichier
d’association des zones à des URL.
12
13. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Utiliser une trame sonore
Puisque le navigateur Web ne peut reproduire les sons, il appelle un
programme externe.
Action Syntaxe
Pour lier un son à un mot <A HREF="sons/meuh.aiff">mot sonore</A>
Pour lier un son à une image <A HREF="sons/meuh.aiff"><img
src="images/vache.gif></A>
Pour intégrer un son (au format Wave ou <BGSOUND src="fnkngrvn.mid">
Midi) en arrière-plan (dans la partie HEAD)
13
14. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Utiliser une séquence vidéo
Puisque le navigateur Web ne peut reproduire les sons, il appelle un
programme externe :
• PMMPEG pour le format MPEG,
• le runtime de QuickTime pour les fichiers QuickTime,
• le runtime de Video for Windows pour les fichiers AVI.
Action Syntaxe
Pour lier une vidéo à un mot <A HREF="animations/WaterCycle.mov">cycle de l'eau
animé</A>
Pour lier une vidéo à une image <A HREF="animations/WaterCycle.mov"><img
src="images/ cycleeau.gif"></A>
14
15. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Créer un tableau
Action Syntaxe
Pour créer un tableau <TABLE></TABLE>
Pour définir une ligne dans un tableau <TR></TR>
Pour définir une colonne dans une ligne d’un tableau <TD></TD>
Pour aligner à au centre verticalement dans une <TD VALIGN=MIDDLE></TD>
colonne
Pour ajouter une ligne en en-tête (Table Header) <TH></TH>
Pour placer un titre au-dessus du tableau <CAPTION ALIGN=TOP></CAPTION>
Pour placer un titre en-dessous du tableau <CAPTION ALIGN=BOTTOM></CAPTION>
Pour définir une ligne d'épaisseur variable entourant <TABLE BORDER=nombre>
le tableau
Pour aligner à gauche une ligne dans un tableau <T? ALIGN=LEFT></T?>
(<TR>), une colonne dans une ligne d’un tableau
(<TD>) ou une en-tête (<TH>)
Pour aligner à droite une ligne dans un tableau <T? ALIGN=RIGHT></T?>
(<TR>), une colonne dans une ligne d’un tableau
(<TD>) ou une en-tête (<TH>)
Pour aligner au centre une ligne dans un tableau <T? ALIGN=CENTER></T?>
(<TR>), une colonne dans une ligne d’un tableau
(<TD>) ou une en-tête (<TH>)
Pour aligner en haut verticalement une ligne dans <T? VALIGN=TOP></T?>
un tableau (<TR>), une colonne dans une ligne d’un
tableau (<TD>) ou une en-tête (<TH>)
Pour aligner en bas verticalement une ligne dans un <T? VALIGN=BOTTOM></T?>
tableau (<TR>), une colonne dans une ligne d’un
tableau (<TD>) ou une en-tête (<TH>)
Pour aligner au milieu verticalement une ligne dans <T? VALIGN=MIDDLE></T?>
un tableau (<TR>), une colonne dans une ligne d’un
tableau (<TD>) ou une en-tête (<TH>)
Pour aligner sur la même ligne une ligne dans un <T? VALIGN=BASELINE></T?>
tableau (<TR>), une colonne dans une ligne d’un
tableau (<TD>) ou une en-tête (<TH>)
Pour empêcher que le texte des cellules (<TD> ou <td nowrap> ou <th nowrap>
<TH>) ne soit réparti sur plusieurs lignes
Pour ajouter une ligne qui s'étend sur toute la <td colspan=2>
largeur du nombre de colonnes spécifié (<TD> ou
<TH>)
Pour ajouter une colonne qui s'étend sur toute la <td rowspan=2>
largeur du nombre de rangées spécifié (<TD> ou
<TH>)
Pour spécifier l'épaisseur de la bordure Utiliser l’attribut BORDER.
Pour spécifier l'espacement entre les données dans Utiliser l’attribut BORDER.
les cellules et la bordure
Pour spécifier la largeur totale du tableau en <table border=1 width="30%">
pourcentage de la largeur de l’écran
Pour spécifier la largeur totale du tableau en <table border=1 width="500">
15
16. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
nombre de pixels
Pour spécifier la largeur Utiliser l’attribut width.
Remarques :
• Dans une cellule d’un tableau, il est possible d’insérer une image,
un texte, un lien, une liste ou encore un autre tableau.
16
17. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Spécifier un fonds d'écran
Action Syntaxe
Pour changer l'image du fond d'écran Utiliser la balise <body
background="images/carrefondgris.gif"> dans l'entête
du document HTML juste avant <title>.
Pour changer la couleur du fond d’écran <BODY BGCOLOR="#000000" TEXT="#FFFFFF"
LINK="#FFFFFF" VLINK="#00AAFF">
Pour changer la couleur du fond de Utiliser l’attribut BGCOLOR (Background Color).
l'écran
Pour changer la couleur du texte Utiliser l’attribut TEXT (Text Color).
Pour changer la couleur des liens Utiliser l’attribut LINK (Link Color).
Pour changer la couleur des liens Utiliser l’attribut ALINK (Selected Link Color).
sélectionnée avec la souris
Pour changer la couleur des liens visités Utiliser l’attribut VLINK (Visited Link Color).
Pour spécifier une couleur RGB (ou RVB Utiliser l’attribut #rrvvbb.
en Français) (Rouge, Vert, Bleu)
Pour changer localement la couleur du <FONT COLOR=#FFFFFF>texte</FONT>
texte
Couleur Code RGB
Blanc #FFFFFF
Jaune #FFFF00
Noir #000000
Magenta #FF00FF
17
18. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Les autres commandes
Action Syntaxe
Pour positionner les autres pages dans la <BASE
hiérarchie des fichiers (en début de page, dans HREF="http://WWW.grr.ulaval.ca/grrWWW/"
la section entête) >
Pour insérer un commentaire <!-- commentaire -->
Pour permettre à l’utilisateur de chercher un ou <ISINDEX>
plusieurs mots-clé (l’utilisateur doit alors
spécifier un mot-clé lors de l’affichage de la
page ; un programme est nécessaire pour cela)
Pour changer automatiquement de page (dans la <META HTTP-EQUIV="refresh" CONTENT="6;
section HEAD de la page) (« refresh » indique de URL=meta2.html">
rafraîchir l’écran, « content=6 » indique la durée
en secondes)
18
19. Bruno Delb http://www.brunodelb.com Date : 12/02/2001
HTML
Les cookies
Un cookie HTTP sauvegarde des informations chez le client (c’est-à-dire chez
l’utilisateur) jusqu’à une date d’expiration. Cela nécessite l’utilisation de
scripts CGI ou de JavaScript.
Pour sauvegarder une information, utiliser la commande « Set-Cookie:
NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure ».
Remarque :
• La date est au format suivant : Wednesday, 09-Nov-99 23:12:40
GMT
Dès que vous revenez sur la page « PATH » avant la date d'expiration
« DATE », le navigateur envoie au serveur la commande « Cookie:
NAME=VALUE ».
19