|
|
· Les ajouts de Netscape /
M$ Internet Explorer
Bientòt, ici, la possibilité de télécharger
entièrement cette aide pour une consultation en local sur votre ordinateur !
Si vous utilisez ce
document régulierement, mailez-moi
: ca fait plaisir de savoir que mon boulot sert a quelquechose :)
Cette documentation présente le langage HTML. Lorsqu'il y a une extension à ce langage, je le
précise toujours. Il faut savoir que ces extensions ne fonctionnent pas sur
tous les clients WWW.
Une fois que vous maitriserez ces pages,
reportez-vous a une page
decrivant tous les tags HTML/3
Introduction au
langage HTML
HTML : Hyper Text Markup Langage.
Un fichier HTML est
composé de texte normal, et de "tags" ou "markups".
On dira ici "étiquettes" pour faire plaisir à Jack Allgood. Le texte normal constitue le texte que vous pouvez
lire en ce moment par exemple. Les étiquettes servent à le mettre en forme
(Styles de titre, gras, italique, insertion d'images, insertion de liens, etc...)
Lien
:
En Anglais "link". Un lien constitue un mot clef sur lequel vous
pouvez cliquer à la souris (ou activer par tout moyen qui vous semblera bon)
pour accéder aux informations disponibles sur un autre
fichier, sur la même machine ou sur une machine éloignée. Ce sont tous les mots
que vous voyez apparaître en bleu sous NCSA Mosaic ou
Netscape, ou en vidéo inverse sous Lynx. Un lien peut aussi contenir une image,
en y insérant l'étiquette convenable.
Squelette de base
<HTML>
<HEAD>
<TITLE>Titre
du document</TITLE>
</HEAD>
<BODY>
Corps du document
</BODY>
</HTML>
Etiquettes souvent utilisées et mise en forme
Les étiquettes sont
constituées d'un mot (ex : TOTO) encadré par <
et >. Sauf contre ordre, elles sont activées en
insérant dans le texte <TOTO> et désactivées en insérant </TOTO>. (notez bien le
'/' avant TOTO).
Remarque : HTML n'est pas sensible à la casse des
caractères des étiquettes. Cela signifie que <TotO>, <TOTO>, <toto> ou <tOTo> sont strictement
équivalents
Caractères
accentués
Soit vous pouvez
dans votre éditeur les insérer directement
Soit vous utilisez
les séquences d'échappement :
à
pour à
ê pour
ê
ç
pour ç
ï pour
ï
ñ
pour ñ
Notez bien le ';'
après chaque caractère accentué. Celui-ci est indispensable.
Caractères
spéciaux. C'est le cas de <, >;
et &, qui sont interprétés par HTML. On peut néanmoins les insérer à l'aide de séquences
d'échappement : < pour <, > pour >,
enfin & pour &.
D'autres caractères existent, comme : ® -> Registered Trademark
-> ® et © -> Copyright -> ©.
Cliquez ici
pour voir une table des caractères spéciaux.
Styles physiques
(forcent le client WWW sur un style donné)
Gras : <B>
Italique : <I>
Rayé : <S>. Synonyme : <STRIKE>
Souligné : <U>
Clignotant : <BLINK>
Chasse fixe :
<TT>
Styles logiques (à
préférer aux styles physiques)
Mot sur lequel
on insiste : <STRONG> En général Gras.
Mettre un texte
en valeur : <EM> En principe : Italique.
Citation : <CITE> En principe : italique.
Vous pouvez placer
les caractères en exposant ou en indice respectivement
grâce aux tags <SUP>...</SUP> et <SUB>...</SUB>.
<SMALL>...</SMALL> permet de réduire du texte, tandis que <BIG>...</BIG> permet de le grossir.
Enfin, vous pouvez
jouer avec la couleur, la taille et la face de la fonte des
caractères.
Les entêtes
(ou titres)
Titre 1 : <H1>
Titre 2 :
<H2>
Titre 3 :
<H3>
Titre 4 :
<H4>
Titre 5 :
<H5>
Titre 6 :
<H6>
Fin de
paragraphe : <P>. Vous pouvez sauter des lignes dans votre
texte source, les retour a la ligne ne seront pas pris
en compte. Par contre, l'étiquette <P> formera une fin de paragraphe. (pas de </P>)
Paragraphe ou
division : <P ALIGN=left/right/center>...</P>. Synonyme : <DIV>
Le tag <P> est aussi utilisé d'une autre façon : en
encadrant les paragraphes entre <P> et </P>, vous pouvez spécifier un attribut ALIGN prenant la valeur right, left ou center, permettant d'aligner le paragraphe
respectivement à droite ou à gauche, ou de le centrer.
Césure forcée : <BR> Pour forcer le retour à la ligne (pas de </BR>)
L'argument <BR
CLEAR=right/left/all> a été ajouté par Netscape. Il permet de
mieux contrôler le retour à la ligne à cause des images flottantes
introduites par Netscape.
<BR> introduit un retour à la ligne normal.
<BR CLEAR=left>
introduit un retour à la ligne et descend jusqu'à ce que la marge gauche soit
libre (pas d'image flottante). <BR
CLEAR=right> fait la même
chose pour la marge droite et <BR
CLEAR=all> pour les deux
marges.
Gérer soi-même
la coupure des lignes : <NOBR>...</NOBR> empêche le client WWW de passer un texte à la ligne. On peut alors
forcer le passage à la ligne par <WBR>.
Ligne
horizontale de séparation :
<HR> (pas de </HR>)
Des arguments ont été ajoutés par Netscape. Ce sont les suivants :
<HR
SIZE=nombre> spécifie
l'épaisseur de la ligne.
<HR
WIDTH=nombre/pourcentage>
spécifie la largeur de la ligne en nombre de pixels ou en pourcentage de la
largeur de l'écran.
<HR
ALIGN=left|right|center> spécifie comment la ligne dont la largeur a
été réduite doit être alignée.
<HR
NOSHADE> spécifie que la
ligne doit être une barre solide (pas d'ombrage).
Texte Préformatté. En encadrant du texte par <PRE> et </PRE>, vous conservez leur sens initial aux
espaces, tabulations et retour chariot. (il n'y a plus besoin de <BR> ou <P>). Les caractères apparaissent en général dans une fonte non
proportionnelle (chasse fixe).
Texte Préformatté, non interprété. <XMP>...</XMP> se comporte comme <PRE>, mais rien n'est interprété, c'est à dire
que ce texte peut contenir des caractères réservés de HTML (tags, <, >,
&,...), ils seront affichés tels quels dans le client. (La norme HTML3
déconseille l'utilisation de ce tag.)
Texte centré
Vous pouvez gràce à Netscape centrer du texte
(ou une image). Il suffit de l'encadrer entre les deux étiquettes <CENTER> et </CENTER>.
Les listes.
Listes
numérotées : encadrées par <OL> et </OL>.
Netscape a ajouté deux arguments : <OL TYPE=a/A/1/I/i START=nombre>. TYPE spécifie le type de numérotation (a=a,b,c... A=A,B,C... 1=1,2,3... I=I,II,III,IV,... i=i,ii,iii,iv,...) et START le début de
la numérotation.
Listes non
numérotées : encadrées par <UL> et </UL>.
Netscape a ajouté l'argument <UL
TYPE=disc/circle/square> pour spécifier la puce voulue.
Chaque élément de
la liste est introduit par un <LI>. (Avec Netscape, LI utilise aussi les mêmes
arguments que OL ou UL pour créer une exception dans la liste.)
|
Exemple : <UL> ou <OL> <LI>premier item <LI>deuxième item <LI>troisième item </UL> ou </OL> |
Résultat (UL) : premier item deuxième item troisième item |
Résultat (OL) : premier item deuxième item troisième item |
Listes de
définition : encadrées par <DL> et </DL>.
Une liste de definition consiste en des termes a définir (<DT>), ainsi qu'en des définitions (<DD>).
|
Exemple : <DL> <DT><B>Ecole Centrale de
Lille</B> <DD>Grande école d'ingenieurs de renommée intergalactique sise dans la bonne ville de Villeneuve d'Ascq. <DT><B>Jice</B> <DD>Eleve
de cette ecole d'ingenieurs acteurs europeens z'et généralistes. </DL> |
Résultat : Ecole Centrale de Lille Grande école d'ingenieurs
de renommée intergalactique sise dans la bonne ville de Villeneuve d'Ascq. Jice Eleve de cette ecole
d'ingenieurs acteurs europeens
z'et généralistes. |
Les entrées <DT> et <DD> peuvent contenir tout ce que vous voulez (paragraphes séparés par <P>, listes, etc...
Local sur son compte sur un
document complet :
<A HREF="/repertoire/toto.html">Texte du
lien</A>,
si toto.html se trouve dans le repertoire ~username/public_html/repertoire/toto.html. Le 'Texte
du lien' sera le texte actif (qui apparaît en bleu, video
inverse...) dans le document visualisé sous Mosaic ou
Lynx, ou...
Local sur son compte, interne
à un autre document :
<A NAME="etiquette"> pour définir le point de
branchement.
<A HREF="nom de
fichier#etiquette">Texte du lien</A>
pour effectuer le lien.
Lien interne au document
courant :
même syntaxe que ci-dessus, le nom du fichier n'étant cette fois pas
nécessaire.
Local sur un autre compte que
le sien :
<A HREF="~username/repertoire/toto.html">Texte du
lien</A>
ou <A
HREF="http://adresse.de.la.machine.fr/~username/repertoire/toto.html">.
Même remarques que ci-dessus.
Sur une autre machine distante :
<A
HREF="http://adresse.de.la.machine.fr/repertoire/du/fichier/toto.html">Texte du
lien</A>
ou <A
HREF="http://adresse.de.la.machine.fr/~username/repertoire/toto.html">Texte du
lien</A>
avec les mêmes remarques que ci-dessus.
Vous pouvez les réaliser exactement de la même façon. A la
place de toto.html, tapez toto.gif, toto.mpg, toto.mov, toto.au, toto.n'importe_quoi
pourvu que le client WWW soit configuré pour se servir de ces fichiers. En
général, les images .gif, .jpeg,
.jpg sont recommandées, les films .mpg, .mpeg (plus rarement .mov), les sons .au (de type SUN) ou .wav
(de type PC).
<IMG ALIGN="top"/"middle"/"bottom" SRC="toto.gif" ALT="TOTO"> pour voir la tronche de toto insérée dans le texte. ALIGN suivi de "top", "middle" ou "bottom" est facultatif. Cela sert à aligner le texte à droite ou à gauche de l'image. Pour pouvoir écrire à coté de l'image, celle-ci doit être encadrée entre les mêmes etiquettes de style que le texte. ALT sert à afficher 'TOTO' à la place de l'image pour les utilisateurs dont le client WWW ne supporte pas les images (ex : lynx). Cette directive est fortement recommandée.
Exemple : <H3><IMG ALIGN="top" SRC="images/toto.gif">La tête de toto</H3> provoque l'affichage de l'image avec à sa droite, aligné en haut 'La tête de toto' en style H3.
Netscape a ajouté <IMG
ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>
pour pouvoir aligner une image comme vous le désirez dans votre page. Le texte
vient alors se placer à coté de l'image le cas échéant. Les images ainsi
alignées sont indépendantes du texte, on les appelle des images flottantes.
On peut spécifier la largeur de l'image : <IMG
WIDTH=value HEIGHT=value>, un bord : <IMG BORDER=value>.
On peut également contrôler l'espacement entre les images et le texte : <IMG VSPACE=value HSPACE=value>.
L'attribut VSPACE contrôle l'espacement vertical, tandis que HSPACE se reporte
à l'espacement horizontal.
Les images peuvent aussi être insérées à l'intérieur d'un lien ou constituer le texte de celui-ci.
ou les améliorations apportées par Netscape et/ou M$ Internet Explorer.
Ce que vous venez de lire constitue les bases du langage HTML. Le logiciel Netscape a aidé à construire le HTML 3.0 (le standard devrait bientot sortir) qui permet de réaliser des documents beaucoup plus beaux, en ayant plus de contrôle sur la présentation de vos pages.
Vous pouvez (comme sur cette page) remplacer le fond d'écran gris par une
image de votre choix. Pour ce faire, il suffit de placer en tête du document
dans l'étiquette <BODY> :
<BODY BACKGROUND="fond_d_ecran.gif">.
Facile non ? Faites cependant attention à la lisibilité de votre page. Pour
l'améliorer, vous pouvez changer la couleur du texte, des liens...
Et si vous décidez de ne pas mettre d'image en fond d'écran vous pouvez quand même modifier sa couleur. Il s'agit ici aussi d'apports à l'étiquette <BODY>. Ce sont les attributs BGCOLOR (couleur de fond), TEXT (couleur du texte), LINK (couleur des liens), ALINK (couleur des liens actifs) et VLINK (couleur des liens déjà visités). La couleur s'écrit "#rrvvbb" qui est le triplet héxadécimal rouge/vert/bleu.
exemple :
<BODY BGCOLOR="#B167B1" TEXT="#6464E8"
LINK="#3AE6C5" ALINK="#AA44FF" VLINK="#D271EB">
De nombreux autres tags supportent des attributs de couleur, comme les fontes ou
les tableaux.
Pour les tableaux, l'attribut BGCOLOR=#$$$$$$
s'utilise pour donner la couleur de fons d'un tableau (tag TABLE) ou d'une cellule particulière (tag TD).
Les tableaux sont un moyen simple d'agencer de façon très lisible des données, des liens, etc...
L'étiquette est : <TABLE ...></TABLE>
Elle est secondée par <TR> pour créer une ligne, <TD> pour les
données d'une cellule, <TH> pour les entêtes de tableaux. De nombreux
attributs existent (COLSPAN, ROWSPAN, BORDER, WIDTH, BGCOLOR...) pour contrôler
l'aspect de vos tableaux.
Le plus simple pour expliquer les tableaux est encore de regarder les exemples.
Vous pouvez également insérer des images dans les tableaux (étiquette <IMG...>).
Les frames
vous permettent de découper votre document en plusieurs fenêtres (ou frames), comme l'est cette aide.
Ces frames peuvent
être ou non munies d'un ascenceur pour scroller le
document,...
Chaque frame peut
recevoir le contenu d'une URL, indépendamment des autres. On peut lui donner un
nom de cible (target) pour déterminer dans quelle frame va s'afficher le contenu de tel ou tel URL.
On peut autoriser ou non le redimensionnement de chaque frame
par l'utilisateur, et elles peuvent se redimensionner toutes seules si
l'utilisateur change la taille de la fenêtre du client WWW.
Ces nouvelles propriétés offrent des possibilités très intéressantes, dont :
Les éléments que l'utilisateur doit toujours
voir (sommaire, entête, copyrights, etc...) peuvent
être placés dans une frame statique.
Les sommaires (comme celui de cette aide)
sont bien plus conviviaux.
Les formulaires et leur réponse peuvent
apparaître dans la même page, côte à côte dans deux frames.
à vous d'imaginer la
suite...
La philosophie des frames est assez similaire à celle des tableaux. Vous pouvez cliquer ici pour voir la syntaxe des frames et un exemple.
De nouvelles étiquettes ont été introduites qui permettent
facilement de générer des images clickables, gérées
du côté du client Web (Vous n'avez pas besoin d'avoir accès au serveur HTTP).
Il s'agit de :
· <MAP NAME="nom"> et </MAP> encadrent une définition d'image cliquable, et permettent de la nommer pour pouvoir l'utiliser plus tard. Cette définition est composée d'un nombre variable de l'apparition du tag suivant :
· <AREA [SHAPE="forme"] COORDS="x,y,..."
[HREF="URL"] [NOHREF]> définit une partie de l'image
de forme SHAPE (RECT, CIRCLE, POLY, DEFAUT) renvoyant à l'URL
HREF (NOHREF indique qu'un click sur la région ne déclenche aucune action.).
COORDS : Pour un rectangle, ce sont les coordonnées des deux sommets
opposés (4 nombres), pour un cercle : le centre et le rayon (3 nombres), pour
un polygone les coordonnées des points successifs.
Si deux "areas" se recoupent, c'est celle qui est la première dans la
définition du MAP qui sera prise en compte. Cela permet notamment de gérer
l'action par défaut, en placant à la fin de la
définition un tag AREA recouvrant toute l'image.
· Au tag <IMG> a été ajouté l'argument USEMAP="maps.html#nom" pour faire réference à la définition de zone clickable "nom" dans le document "toto.html" (Si la valeur de USEMAP commence par "#", la définition est dans le document courant).
·
Exemple :
<MAP NAME="toto"><AREA SHAPE="RECT" COORDS="12,12,24,100" HREF="zone1.html"><AREA SHAPE="RECT" COORDS="40,12,64,100" HREF="zone2.html"><AREA SHAPE="RECT" COORDS="80,12,92,100" HREF="zone3.html"><AREA SHAPE="RECT" COORDS="0,0,144,144" NOHREF></MAP>
<IMG SRC="/images/toto.gif" USEMAP="#toto">
Cet exemple montre l'utilisation (dernier tag AREA) d'une action par défaut.
Avec l'étiquette <FONT SIZE=value>, vous pouvez c h a n
g e r l a t a i l
l
e des caractères. Les
valeurs admises pour SIZE
sont un nombre entre 1 et 7 qui correspond à la taille, ou bien +nombre ou -nombre qui représente la
taille relative par rapport à la fonte de base.
La taille de base peut être choisie par l'étiquette <BASEFONT SIZE=value>.
Avec l'étiquette <FONT COLOR=#$$$$$$>, vous pouvez choisir la couleur de votre texte. Etonnant, non ?
Enfin, l'étiquette <FONT FACE="fonte1,fonte2"> vous permet de choisir la face de la fonte (arial, times, courier, etc...).
Avec les tableaux, et l'attribut BGCOLOR du tag TABLE ou TD, on peut réaliser de jolis effets en combinant pas mal de tags :
|
Titre de partie |
Cela vaut mieux qu'une image qui va prendre plusieurs kilo-octets, et allonger le temps de chargement de la page, non ?
Grâce à l'étiquette <MULTICOL> (spécifique Netscape 3.0), vous pouvez créer des parties de document comportant plusieurs colonnes, le passage du texte d'une colonne à l'autre étant géré automatiquement. Ainsi, vous disposez de colonnes emplies de manière égale.
Utilisation :
<MULTICOL COLS=n GUTTER=nb_pixels WIDTH=largeur> ... </MULTICOL>.
L'attribut COL permet de spécifier le nombre de colonnes, GUTTER (optionnel) représente l'espace en pixels entre deux colonnes, enfin WIDTH (optionnel) est la largeur d'une colonne.
Vous pouvez également imbriquer des zones à colonnes multiples, il suffit d'indiquer un autre tag MULTICOL. Ne perdez cependant pas de vue que cette fonctionnalité est très nouvelle, et que seul Netscape 3.0 en dispose à l'heure actuelle (19/9/96).
Le tag <SPACER>
(spécifique Netscape 3.0) permet de gérer l'espacement horizontal entre
les mots (comme l'indentation de ce § de 24 pixels), ainsi que l'espacement
vertical (comme l'espace de 24 pixels entre ce paragraphe et le suivant). Utilisation :
<SPACER
TYPE=horizontal/vertical SIZE=n>
Ce tag peut aussi s'utiliser comme une image entièrement transparente,
puisqu'il supporte les attributs WIDTH, HEIGHT
et ALIGN du tag
IMG.
Ne perdez cependant pas de vue que cette fonctionnalité est très nouvelle, et que seul Netscape 3.0 en dispose à l'heure actuelle (19/9/96).
· <NOBR> permet d'empêcher Netscape de retourner à la ligne dans un texte entouré par les étiquettes <NOBR> et </NOBR>.
· <WBR>. Lorsque vous connaissez exactement l'endroit où le retour à la ligne doit se faire, dans le cas de l'emploi de <NOBR>, utilisez cette étiquette.
· <CENTER>. Vous pouvez centrer du texte et/ou une image.
Il suffit de l'encadrer entre les étiquettes <CENTER> et </CENTER>.
Voir le paragraphe Mise
en forme du texte.
· <MARQUEE>. Spécifique Internet Explorer. Le texte situé entre <MARQUEE> et </MARQUEE> défile de gauche à droite.
· MSIE et Netscape supportent un ajout d'attribut au tag FRAME : BORDER permet de choisir la largeur des traits séparant les frames, et FRAMEBORDER=yes/no permet de spécifier si on désire afficher des traits ou non entre les frames.
· MSIE ajoute des attributs aux tableaux. Dans
les tags TABLE
ou TD, on peut
donner l'attribut BACKGROUND=url
qui permet de mettre une image en fond d'un tableau et/ou d'une cellule du
tableau. (Même comportement que l'attribut BACKGROUND du tag BODY.)
L'attribut RULES=none/rows/cols du tag TABLE permet d'indiquer quels traits sont
ou ne sont pas tracés dans un tableau. none ne trace aucun
trait, tandis que rows ou cols tracent respectivement uniquement les traits
horizontaux ou uniquement les traits verticaux.
Voilà. J'espère que ce texte vous aura aidé à réaliser votre page sur le Web. Si vous trouvez des erreurs et/ou imperfections, mailez-moi pour que je les corrige.
J'ai besoin de vos remarques pour améliorer cette page et la rendre encore plus compréhensible et/ou (?) agréable pour le néophyte. N'hésitez pas à me passer un mail, j'adore recevoir du courrier. Comme disent les serveurs estrangers : "We need your feedback".
En guise de conclusion, on se rend bien compte que la rédaction des documents HTML peut être fastidieuse lorsqu'on ne dispose pas d'outils de traduction. Il existe une macro pour WORD 6 (CU_HTML qui permet de réaliser ses pages en Tel Ecran Tel Ecrit (Wysywig pour Jack Allgood), "almost"...
Quant à moi, je les ai réalisées pour partie avec CU_HTML et pour une autre (dont ce texte d'aide) directement dans un éditeur texte (emacs) sur un PC émulant un terminal X en vérifiant au fur et à mesure l'avancement des travaux avec NCSA Mosaic pour Windows. (Heu... c'était en décembre 1994 !)