Intrduction à l'HTML
 |
 Introduction au CSS |
Les Balises sont la structure même d'une page html, Il y en a une
quantité importante. Je vous propose de vous en décrire quelques unes dans ce qui suit.
|
Faisons ensemble notre premier document Html:
- Ouvrir l'éditeur de texte.
- Ecrire les codes Html suivants:
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Enregistrer le document avec l'extension .html ou .htm.
- Ouvrir le navigateur.
- Afficher le document via le menu File/Open file...
- Admirer votre premier document Html.
Celui-ci est vide (et c'est normal) mais tout à fait opérationnel ! Il faudra maintenant lui fournir votre information à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de votre browser.
Vous aurez remarqué qu'à chaque début d'action, soit <...>, correspond (en toute logique) une balise de fin d'action </...>.
|
|
| Gras | [Bold] | <B>...</B> ou <STRONG>...</STRONG> | Début et fin de zone en gras |
| Italique | [Italic] | <I>...</I> ou <EM>...</EM> | Début et fin de zone en italique |
| Taille de caractère | [Font size] | <FONT SIZE=?>...</FONT> | Début et fin de zone avec cette taille |
| Couleur de caractère | [Font color] | <FONT COLOR="#$$$$$$">...</FONT> | Début et fin de zone en couleur |
| A la ligne | [Line break] | <BR> | Aller à la ligne |
| Commentaires | [Comments] | <!-- *** --> | Ne pas afficher |
| Centrage | [Center] | <CENTER>...</CENTER> | Centrer |
-Ouvrir l'éditeur de texte, et taper:
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
- Ouvrir le browser, et voila ce que vous devait observer.
texte simple
texte en gras
texte en gras
texte en italique
texte en italique
texte en gras et en italique
texte en bleu
Quelques commentaires s'imposent;
- Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police
et taille de caractères choisies dans sa configuration par défaut.
- Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque
celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de
conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction
particulière. C'est la balise<BR>. Celle-ci représente une action ponctuelle et
n'a donc pas besoin de balise de fin.
- Le même browser ne tient compte que d'un seul espace entre les mots.
Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>
- Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut
veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct
et <B><I>...</B></I> risque de vous créer des ennuis.
- La taille dans <FONT SIZE=?> peut être indiquée de deux façons :
- avec un nombre de 1 à 7. La valeur par défaut étant 3.
- de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.
- Pour les puristes , les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur.
Du texte encore...
|
|
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 :
| Définition du tableau | [Table] | <TABLE></TABLE> | Début et fin de tableau |
| Définition d'une ligne | [Table Row] | <TR></TR> | Début et fin de ligne |
| Définition d'une cellule | [Table Data] | <TD></TD> | Début et fin de cellule |
Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :
<TABLE>
<TR>
<TD>Cellule 1, Ligne 1, Colonne 1</TD>
<TD>Cellule 2, Ligne 1, Colonne 2</TD>
</TR>
<TR>
<TD>Cellule 3, Ligne 2, Colonne 1</TD>
<TD>Cellule 4, Ligne 2, Colonne 2</TD>
</TR>
</TABLE>
| Cellule 1, Ligne 1, Colonne 1 | Cellule 2, Ligne 1, Colonne 2 |
| Cellule 3, Ligne 2, Colonne 1 | Cellule 4, Ligne 2, Colonne 2 |
Si vous souhaitez y adjoindre des bordures :
| Bordure de cadre | [Border] | <TABLE border=?></TABLE> |
| Cellule 1, Ligne 1, Colonne 1 | Cellule 2, Ligne 1, Colonne 2 |
| Cellule 3, Ligne 2, Colonne 1 | Cellule 4, Ligne 2, Colonne 2 |
Il y a encore trois éléments (définis par défaut mais modifiables) :
| L'espace entre les cellules ou l'épaisseur des lignes du quadrillage | <TABLE cellspacing=?> |
| L'enrobage des cellules ou l'éspace entre le bord et le contenu | <TABLE cellpadding=?> |
| La largeur de la table | <TABLE width=?> <TABLE width=%> |
Construisons deux exemples :
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
| 1 | 2 |
| 3 | 4 |
<TABLE border=2 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
| 1 | 2 |
| 3 | 4 |
Les cellules d'un tableau...
|
|
Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) 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 Web.
Ce système d'hypertexte vous est familier car il est
également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous
permettent de surfer de page en page et qui constituent l'essence des documents Html.
La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux
commentaires :
<A HREF="URL ou adresse">...</A>
|
|
Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type :
http://serveur/chemin.../fichier
ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte
|
|
L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et ,but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement :
fichier.html
|
|
Nous entendons par là un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention Danger! En effet, il est peu probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme
file:///lecteur:/répertoire/fichier.htm (en adressage absolu).
../../../fichier.htm (en adressage relatif).
Cette matière d'adressage absolu et relatif dépasse le cadre de cet exposé et je vous invite en cas d'utilisation à vous plonger dans la documentation relative à ce sujet.
|
|
Dans l'éditeur de texte, nous allons créer deux fichiers Html.
- le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A> - le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>
- On sauve ces deux fichiers dans un même répertoire.
- Le browser vous affichera :
| premier document HTML | deuxieme document HTML |
| Aller vers le document 2 | Retour au document 1 |
(bien sur chaque colonne représente un page HTML)
|
|
Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].
Point d'ancrage |
<A NAME="***">...</A> |
Ceci est une cible |
Lien vers une ancre dans la même page |
<A HREF="#***">...</A> |
Lien vers la cible *** dans la même page |
Lien vers une ancre dans une autre page |
<A HREF="URL#***">...</A> |
Lien vers la cible *** dans une autre page |
Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite.
Les images
|
|
Avant de passer aux balises, il faut savoir ce qui suit.
- Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.
- L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.
- Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.
- Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Avec Netscape, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Save Image As...).
|
|
<IMG SRC="Adresse de
l'image"> Afficher l'image qui se trouve à l'adresse...
La balise image possède de nombreux attributs.
Texte alternatif alt="****" |
Pour les browser n'ayant pas l'option "image" activée |
Dimensions width=? height=? |
Hauteur et largeur (en pixels) |
border=? (en pixels) |
Bordure |
| align=top align=middle align=botton align=left align=right |
Alignement |
|
|
- En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html.
- Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien sa taille.
- Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre œuvre.
- Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Paint Shop Pro.
|
|
Les balises sont :
<A HREF="fichier.htm"><IMG SRC="image.gif"></A>
Remarquons que les images cliquables sont entourées d'une bordure.
|
|
Quoi de plus simple que les frames? Mais aussi
quoi de plus délicat et dangereux (risque de plantage) que les frames? En outre, tous les
browsers n'ont pas la possibilité de les afficher.
Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses :
| Zone avec des fenêtres | |
| <FRAMESET> | Début de zone avec des fenêtres |
| </FRAMESET> | Fin de zone avec des fenêtres |
| Agencement des fenêtres | |
| <FRAMESET ROWS="..."> | Fenêtres horizontales |
| <FRAMESET COLS="..."> | Fenêtres verticales |
|
|
Employons les balises suivantes :
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Attention! <FRAMESET></FRAMESET> remplace
<BODY></BODY>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des
différentes fenêtres en cas de division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit
égal à100%;
Le même pour un agencement vertical
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la
largeur des différentes fenêtres en cas de division verticale.
La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit
égal à100%;
On peut mélanger les deux :
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des
attributs de la balise :
<FRAME .SRC="URL ou adresse du document à afficher dans la fenêtre">
On construit 3 fichiers Html élémentaires que l'on place dans le même répertoire que
le fichier de frames :
A.htm |
B.htm |
C.htm |
<HTML><BODY> <H4>A</H4> </BODY></HTML> |
<HTML><BODY>
<H1>B</H1> </BODY></HTML> |
<HTML><BODY>
<H1>C</H1> </BODY></HTML> |
On reprend le fichier de frame précédent que l'on complète.
<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm">
</FRAMESET>
</FRAMESET>
Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.
Un autre attribut de cette balise <FRAME> est
NAME="NOM". Name indique le nom de la fenêtre de telle sorte que cette frame
puisse être utilisée comme cible d'un lien hypertexte.
Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le
fichier A.htm pour éviter de l'encodage) dans C .
Le fichier de frames devient :
<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>
Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.
<HTML><BODY>
<A HREF="A.htm"
TARGET="fenetreC"><H1>B</H1></A>
</BODY></HTML>
L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :
- _blank qui indique au browser qu'il doit créer une nouvelle fenêtre afin d'y afficher le fichier. Dans ce cas, vous ouvrer en fait un nouveau browser.
- _self qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien.
- _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.
VERIFIEZ TOUJOURS VOS DIFFERENTS LIENS AVEC DES FRAMES. Vous éviterez ainsi que votre beau site ne devienne rapidement une "soupe".
Il y a pour terminer la balise <NOFRAMES>...</NOFRAMES> qui est utilisée pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames. Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteurs puissent profiter quand-même de votre site.
