Pour les balises FRAMESET / FRAME / NOFRAMES - voir CADRES
Les balises - marqueurs sans fin </ > : sont
<BR> <HR> <IMG> <P> <LI>
--------------------------------------------------
La balise A
A doit contenir au moins l'attribut HREF ou NAME
Pour plus de détail voir plus haut pour A
et pour NAME
Elle peut contenir BR et IMG, mais pas d'autres balises.
Elle peut se trouver dans ADDRESS - Hn - P - PRE - LI.
------------------------------------------------------
La balise ADDRESS
Cette balise est la plus utilisée pour donner l'adresse de l'auteur
ou du responsable du document, ainsi que le cas échéant la
date de mise à jour.
Elle apparaît en italique à l'écran et se place généralement
en fin de texte après une ligne et contient l'adresse E-mail.
Exemple :
<HR>
<ADDRESS> Mise à jour le jj/mm/aa par J.J. Haxhe<BR>
E-mail:<A HREF="mailto:haxhe@hosp.ucl.ac.be">
haxhe@hosp.ucl.ac.be </A>
</ADDRESS>
</BODY>
</HTML>
Notez ici l'URL "mailto:" suivie de l'adresse de courrier électronique.
En cliquant sur l'adresse en surbrillance, une page de courrier électronique
prête à l'emploi s'ouvre spontanément sur certains navigateurs.
----------------------------------------------
La balise BLINK
Placée autour d'un texte ou d'une petite image, ceux-ci clignotent
pour attirer l'attention. Fortement déconseillé .
Ex.: <BLINK> Abonnez-vous</BLINK>
---------------------------------------
La balise BLOCKQUOTE
La balise <BLOCKQUOTE>......</BLOCKQUOTE> permet d'indenter de un cran un fragment de texte.
Elle peut contenir Hn - P - HR - UL et OL
Elle doit logiquement être suivie de <P> Texte...
-------------------------------------------------
La balise BODY
La balise BODY est toujours présente sauf si la page se rapporte
à des FRAMEs. (voir plus loin)
Elle peut avoir deux attributs : BGCOLOR et TEXT
BGCOLOR définit la couleur du fond de page.
TEXTdéfinit la couleur du texte dans le document. Par
défaut, il est noir.
N.B.: En dehors d'une couleur d'arrière-plan, on peut aussi mettre une image d'arrière plan ( ne pas dépasser 10 K ) par :
<BODY BACKGROUND="xyz.gif">
Les couleurs sont spécifiées par le code RGB (red, green,
blue)
Rouge = "#FF0000"
Vert = "#00FF00"
Bleu = "#0000FF"
Blanc = "#FFFFFF"
Ex.: Fond blanc :
<BODY BGCOLOR="#FFFFFF">
Fond blanc et tout le texte rouge:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000">
Les 20 couleurs reconnues par Netscape Navigator et toute version de
Microsoft Explorer.
Les couleurs peuvent être indiquées par un codage hexadécimal
ou par une désignation significative plus facile à mémoriser.
Le même résultat est obtenu par les commandes :bgcolor=green
ou bgcolor="#008000"
Vous pouvez aussi choisir
dans une palette de couleurs
| Tableau de concordance des codes et des couleurs | |||
|---|---|---|---|
| résultat | codage significatif | codage hexadécimal | résultat |
| white | FFFFFF | ||
| silver | C0C0C0 | ||
| gray | 808080 | ||
| black | 000000 | ||
| red | FF0000 | ||
| crimson | DC143C | ||
| maroon | 800000 | ||
| brown | A52A2A | ||
| yellow | FFFF00 | ||
| aliceblue | 9ACD32 | ||
| lime | 00FF00 | ||
| green | 008000 | ||
| olive | 808000 | ||
| aqua | 00FFFF | ||
| lightslategray | 778899 | ||
| teal | 008080 | ||
| blue | 0000FF | ||
| blueviolet | 8A2BE2 | ||
| navy | 000080 | ||
| fuchsia | FF00FF | ||
| purple | 800080 | ||
Il s'agit d'un retour de ligne.
On peut mettre plusieurs <BR> à la queue-leu-leu pour augmenter
des espaces.
BR n'a normalement pas d'attribut, sauf CLEAR="left" ou CLEAR="right"
qui peut être utile pour séparer le texte suivant une image
(voir balise IMG)
-------------------------------------------------
La balise CENTER
Cette balise permet de centrer des textes, des titres, des images, des
tableaux...
Nous en avons vu des exemples.
<CENTER>..........</CENTER>
-------------------------------------------------------
La balise DL (Definition List)
Cette balise est intéressante pour établir une liste de
définitions ou un glossaire.
DL est suivi par deux balises : DT et DD
DT est suivi du mot à définir (Directory Term)
DD est suivi de la définition (Directory Definition),
qui se place légèrement en retrait.
DT et DD s'emploient en pair, mais plusieurs DT peuvent être suivis par un seul DD si plusieurs termes ont la même définition.
Par contre, il ne peut pas y avoir plusieurs DD successifs sans DT intermédiaire.
DT et DD peuvent contenir de multiples paragraphes séparés
par <P> de même que des listes. (voir ci-après)
<DL> se termine toujours par </DL>
Ex:
<DL>
<DT>Livre
<DD>Un livre est un recueil de pages.
<DT>HTML
<DD>HyperText Markup Language
</DL>
-----------------------------------
La balise DT
Le terme à définir est court, moins d'une ligne.
Cette balise suit directement DL; elle peut contenir des caractères
, A, BR, IMG
Elle ne doit pas être terminée par </DT> qui se trouve
implicitement dans DD , dans un autre DT ou dans </DL>
-------------------------------------
La balise DD
Cette balise se trouve toujours après DT
Elle peut contenir du texte, A, BR, IMG, DL, UL, OL, BLOCKQUOTE, P, PRE.
Elle ne doit pas être terminée par </DD> qui se trouve
implicitement dans le <DT> suivant ou dans </DL>
------------------------------------
La balise FONT
Deux attributs permettent de modifier la taille et la couleur du texte.
La taille des caractères peut être augmentée ou diminuée
par rapport au restant du texte . La taille va de 1 à 7 et par défaut,
elle s'élève à 3.
<FONT SIZE="+1"> ou <FONT SIZE="-1"> texte </FONT>
font varier la taille en plus ou en moins.
<FONT COLOR="#FF0000"> ...texte en rouge...</FONT>
Pour le code RGB des couleurs voir sous "balise BODY "
--------------------------------------
La balise Hn
La balise H ( Heading) est suivie d'un chiffre de 1 à
6 du plus grand au plus petit.
Hn est utilisé pour un titre, un sous-titre, un sous-sous titre...
Les lettres apparaissent en caractère gras.
On peut centrer un titre en écrivant : <Hn ALIGN="center">suivi
de </Hn>
On peut aussi écrire: <Hn ALIGN="right"> - (left est par
défaut)
H1 à H6 peuvent contenir A - IMG - BR
Elles peuvent se trouver dans BODY et BLOCKQUOTE, mais jamais dans une
liste
-----------------------------------------------
La balise HEAD
Comme nous l'avons vu plus haut, elle doit contenir la balise <TITLE> .
<TITLE> devrait être bref, concis et descriptif, ne contenant
que du texte et ne devrait pas compter plus de 64 caractères y compris
les espaces ou 5 à 6 mots maximum. C'est ce qui apparait en haut
dans le cadre du navigateur et s'inscrit dans les bookmarks.
TITLE ne peut pas contenir de caractère accentué. S'il
le faut, on peut donc utiliser des majuscules.
HEAD peut aussi contenir <META.....> pour mentionner
des informations concernant le document. On n'employera pas de caractère
accentué
Une utilisation intéressante consiste à employer cette
balise pour permettre l'indexation du document par mot-clés par
les robots, chercheurs de documents.
On affecte META de deux attributs NAME et CONTENT
Ex.: <META NAME="description" CONTENT="A large teaching hospital in Brussels - Belgium">
On ajoutera en plus :
<META NAME="keywords" CONTENT="hospital,university,Louvain, Belgium,teaching hospital">
Remarquez que - teaching hospital - ne comporte pas de virgule et sera ainsi traité comme un seul mot-clé
Certains chercheurs de documents comprendront que ce sont des mot-clés pour indexer le document. (promotion du document)
D'autre part, certains éditeurs qui génèrent le
code HTML, ajoutent systématiquement un <META NAME="generator"
CONTENT="XYZ"> mentionnant le type d'éditeur utilisé.
On peut carrément supprimer cette information.
Notons que la balise META peut être utilisée pour charger
un nouveau document après un certain nombre de secondes en utilisant
l'attribut HTTP-EQUIV et la valeur REFRESH. L'attribut CONTENT est suivi
d'une valeur X représentant le nombre de secondes à attendre
avant de charger la page définie par l'URL séparé par
un point virgule.
Ex.:
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://www.xx.yy/zz">
ou, si le fichier se trouve dans le même répertoire,
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=fichier.htm">
La page actuelle disparaît automatiquement après 5 secondes pour être remplacée par la page "fichier.htm". (ou http://www.xx.yy/zz ).
En plaçant la balise <META HTTP-EQUIV="REFRESH" CONTENT="5;URL=.........">
dans divers fichiers successifs (qui se substituent les uns aux autres),
on peut créer une boucle ou un diaporama.
Sous la balise HEAD, avant </HEAD>, on peut aussi insérer
les balises d'accès à la "Feuille de style" (style sheet)
voir sous la balise STYLE
------------------------------------------
La balise HR
C'est une ligne horizontale ( Horizontal Rule) à
travers l'écran.
Elle termine le paragraphe précédent et doit logiquement
être suivi de <P> s'il y a encore du texte.
Voir exemple ci-dessus pour terminer un texte.
Sans attribut, HR traverse tout l'écran
On peut y ajouter quatre attributs:
On a déjà vu que l'on pouvait attribuer l'attribut ALIGN avec "top" - "middle" et "bottom" pour aligner le texte au sommet de l'image, au centre ou au bas ( par défaut)
* On peut aussi écrire ALIGN="left" ou ALIGN="right". Ceci permet
d'écrire du texte à côté de l'image en alignant
celle-ci à gauche ou a droite.
MAIS si, après l'alignement de l'image, on ne veut pas mettre
de texte à côté de l'image, il faut placer <BR>
ou <P> après l'étiquette de l'image, sinon le texte
se place à droite ou à gauche spontanément.
* Si d'autre part on a placé du texte à côté
de l'image et que l'on veut interrompre pour continuer en dessous de l'image,
il faut interrompre le texte par <BR CLEAR="left"> pour que la suite
apparaisse sous l'image.
(Ce sera <BR CLEAR="right"> si l'image est placée à
droite.
* L'attribut HSPACE définit un espace horizontal libre exprimé en pixel entre l'image et le texte, à l'avant et après.
On écrit alors par exemple <IMG SRC="image.gif" HSPACE="8"> pour donner un espace de 8 pixels entre l'image et le texte.
* L'attribut VSPACE définit un espace vertical libre entre l'image et le texte.
* On peut aussi indiquer la dimension de l'image en pixels ainsi que
la bordure ( si on la désire) par les trois attributs suivants :
HEIGHT=
WIDTH=
BORDER= (indique l'épaisseur du bord en pixels).
Ex.: <IMG SRC="image.gif" ALIGN="left" HEIGHT="140" WIDTH="140" BORDER="2" >
Pour apprécier la taille en pixels, rappelons qu'il faut estimer qu'un écran normal fait de l'ordre de 640 x 480 pixels. On recommandait 300 x 480 pixels, mais les écrans étant debenu plus grand, on peut aller jusqu'à 600 x 800 pixels..
Voir aussi quelques explications concernant la
TAILLE
de l'image
Cette balise a
été créée patr Netscape, elle permet d'insérer
un objet multimédia, tel qu'un fichier son ou vidéo, dans la
page.
La balise <OBJECT>
homologuée par le très officiel
World Wide Web et supportée par tous les navigateurs reconnaissant
le HTML 4.0, remplace souvent la balise <EMBED>.
Cette balise se place en début de paragraphe. Elle est donc toujours suivie de texte ou d'image.
P peut être suivi de l'attribut ALIGN avec le complément "center" ou "right" pour centrer le texte du paragraphe qui suit ou le placer à droite:
ex.: <P ALIGN="center">
Comme dit plus haut, plusieurs <P> consécutifs n'augmentent pas l'espace.
On peut cependant utiliser l'astuce de mettre plusieurs fois <P>
( est un caractère exprimant un "blanc" ; c'est le caractère
160, parmi les 256 caractères ISO Latin-1)
N.B.: Le conteneur <DIV> et </DIV> a environ le même
effet que <P>, mais sans saut de ligne en fin de bloc.
-----------------------------------------------
La balise PRE ( pour "preformated")
La balise <PRE> .....</PRE> permet de maintenir la structure du texte préformaté c-à-d tel qu'il apparaît à l'écran, en préservant les retours de lignes et les espaces.
Le style est du type "machine à écrire"
On l'utilise
Les balises n'altèrent pas la structure du texte. Il faut donc créer le tableau tel qu'il devra apparaître et ENSUITE introduire les balises.
N.B. :
Exemple
à télécharger en format SOURCE.
--------------------------------------------------
La balise SUB
Cette balise permet d'abaisser un chiffre
Ex : H2O s'écrit : H<SUB>2</SUB>O
------------------------------------------
La balise SUP
Cette balise est commode pour créer un exposant :
Ex : 105 s'écrira : 10<SUP>5</SUP>
---------------------------------------
Les balises UL et OL
Une liste ne peut jamais contenir que des balises de la liste <LI>
UL = liste non ordonnée.
Elle doit être suivie directement par LI
Elle peut se trouver sous BLOCKQUOTE et LI (listes encastrées)
Certains navigateurs acceptent l'attribut TYPE pour indiquer le caractère qui précède chaque élément de la liste.
Par défaut, c'est généralement un gros point noir pour la première liste et un petit cercle pour une deuxième liste imbriquée.
Ex: <UL TYPE="disc"> ou bien "circle" ou bien "square"
-----------------------
OL = liste ordonnées
Elle doit être suivie directement par LI
Elle peut se trouver sous BLOCKQUOTE et LI (listes encastrées)
Elle accepte deux attributs
START="n"
indique le chiffre par lequel la liste commence (1 par défaut)
TYPE= "A" ou "a" ou "I" ou "i" ou "1"
indique le mode de numérotation
N.B.:
Il faut écrire le texte après <LI> sans espace, sinon
l'alignement de l'indentation peut être tordu.
N.B. :
TYPE (comme indiqué ci-dessus selon le type de liste)
VALUE="n" ( VALUE=5 signifie que la liste commence par 5)
-----------------------------------------------------
- 124 º peut s'écrire : 124 º ou º
- µ peut s'écrire : µ ou µ
- ± peut s'écrire : ± ou ±
- ¶ peut s'écrire : ¶ ou ¶
- § peut s'écrire : § ou §
- © pour Copyright peut s'écrire: © ou ©
- ® pour enregistré peut s'écrire: ® ou ®
- << peut s'écrire: « ou «
- >> peut s'écrire: » ou »
- espace inséquable :
Dans des URL, il existe parfois des tildes (~) mal reproductibles, ils
peuvent être remplacés par ~