Les balises avancées sont celles qui ont, au moins, un paramètre obligatoire ou qui ont une structure plus complexe.
Les liens hypertextes permettent de relier une partie du texte à un autre endroit du Web. Cela peut être un autre endroit sur cette même page, un autre endroit sur le même site, ou bien un autre endroit sur un autre site. On fait référence à cet autre endroit grâce à une adresse Web (URL, Uniform Resource Locators).
Un lien hypertexte se présente ainsi : <A href="URL">Un
texte</A>
Le A fait référence à Anchor (ancre).
Les URL sont de la forme :
service://serveur/chemin/fichier
http : Référence un serveur Web (c'est le plus fréquent),ftp : Référence un serveur de fichiers,news : Référence un serveur de forum de discussions,mailto : Référence une adresse e-mail,file : Référence un fichier sur votre ordinateur.
Le nom du serveur est composé de plusieurs parties. Généralement, la
première partie identifie le service qu'il rend (www ou
ftp). Puis, vient une localisation plus précise du serveur (nom
d'université, nom d'entreprise, etc). Enfin, vient un identificateur qui
permet de savoir à quel type d'organisme on a affaire et/ou dans quel
pays il se trouve :
org : Organisation non gouvernementale,com : Entreprises commerciales,gov : Gouvernement américain,edu : Éducation,mil : Militaire,net : Organismes fournisseurs d'Internet,fr : France,gouv.fr : Gouvernement Français,be : Belgique,de : Allemagne,uk : United Kingdom (Royaume-Unis),ch : Confédération Helvétique (Suisse),ca : Canada,
Le chemin donne la position exacte du fichier dans l'arborescence de fichiers de la machine qui contient le site Web et le nom du fichier qui va être lu.
Prenons :
http://www.w3.org/TR/REC-html40/about.html
On voit que le service sera un serveur Web (http), qui se nomme
www.w3.org et que le chemin jusqu'au fichier
about.html est /TR/REC-html40/.
Pour pointer vers un autre site que le siens, il suffit placer son URL dans la balise.
Par exemple :
<A href="http://www.w3.org/">W3C</A>
Donne : W3C
On peut aussi pointer sur un fichier qui est présent sur l'ordinateur qui accueille le site (cela sert à relier les pages du site entre-elles).
L'une des solutions est de faire systématiquement une référence à l'adresse complète du site, mais cela devient vite pénible. L'autre solution, est de donner le chemin vers le fichier par rapport à la position du fichier actuellement lu.
Par exemple, si vous êtes en train de consulterle fichier
/music/toc.html et que vous voulez faire un lien vers
/music/tchaikovsky/biography.html, il suffit de faire appel à
tchaikovsky/biography.html.
On peut aussi faire référence à un point précis dans la page, par exemple dans une table des matière ou pour revenir en haut d'une page très longue. Pour cela, il faut avoir définit des points d'ancrage sur la page.
Un point d'ancrage se définit ainsi : <A NAME="label">Point
d'ancrage</A>
Et la référence à ce point d'ancrage ainsi : <A
HREF="#label">Référence à mon point d'ancrage</A>
Par exemple :
<H1 align=center>Alice's Adventures under Ground</H1> <H4 align=center>By Lewis Caroll</H4> <P><A href="#chapter1">Chapter 1</A><BR> <A href="#chapter2">Chapter 2</A><BR> <A href="#chapter3">Chapter 3</A><BR> ... <H2><A name="chapter1">Chapter 1</A></H2> Alice was beginning to get very tired of sitting ... <H2><A name="chapter2">Chapter2</A></H2> They were indeed a curious looking party that assembled ... <H2><A name="section2.1">Chapter 3</A></H2> "The first thing I've got to do," said Alice to herself, ...
On peut inclure facilement une image dans un document HTML grâce à la
balise IMG. On l'utilise ainsi : <IMG SRC="nom du
fichier">.
Les paramètres que l'on peut modifier sont :
alt : Permet de donner une alternative à l'image
lorsque le navigateur Web ne peut afficher l'image,align : Options d'alignement
align=left|center|right|justify (comme précédemment),width : Largeur de l'image,height : Hauteur de l'image,border : Épaisseur du bord de l'image,vspace : Espace vertical entre les bords de l'image
et un autre objet (texte, autre image, etc),hspace : Espace horizontal entre les bords de
l'image et un autre objet (texte, autre image, etc),Par exemple :
<IMG src="Botticelli12.png" alt="Venus sortant des eaux" align=left border="0">
Il existe trois types de listes en HTML, les listes ordonnées
(OL, Ordered List), les listes non ordonnées
(UL, Unordered List) et les listes de définitions
(DL, Definition List).
En HTML, une liste est composée d'une balise qui indique que l'on est dans un environnement liste et d'une balise ponctuelle qui marque le début de chaque item.
Par exemple :
<OL>
<ITEM>Premier item de la liste.
<ITEM>Deuxième item de la liste.
<UL>
<ITEM>Premier item de la liste du deuxième item!
</UL>
</OL>
Donne :
On la marque avec la balise <UL> (Unordered
List). Les items sont marqués par la balise ponctuelle
<LI>. Les paramètres sont :
type=disc|circle|square : Qui permet de fixer le
symbole qui apparaît devant les items,compact : Qui permet de tasser un peu la liste.
On la marque avec la balise <OL> (Ordered
List). Les items sont marqués par la balise ponctuelle
<LI>. Les paramètres sont :
type=1|a|A|i|I : Qui permet de fixer le
symbole qui apparaît devant les items. 1 pour une numérotation
classique (1, 2, 3, ...), a ou A pour une numérotation
alphabétique (a, b, ...), i ou I pour une numérotation
latine (i, ii, iii, ...),compact : Qui permet de tasser un peu la liste.Par exemple :
<OL type=1 compact>
<LI> texte 1
<LI> texte 2
</OL>
Donne :
On la marque avec la balise <DL> (Definition
List). Il y a deux items possibles, le terme à définir :
<DT> et la définition en elle-même :
<DD>.
Par exemple :
<DL>
<DT> Terme 1 à définir
<DD> Définition du terme 1
<DT> Terme 2 à définir
<DD> Définition du terme 2
</DL>
Donne :
Définition du terme 1
Définition du terme 2
Les tableaux sont des structures importantes en HTML. Elles servent non seulement à faire des tableaux comme on a l'habitude d'en voir, mais aussi à gérer la mise des documents.
Vous voulez mettre une marge à votre document? Vous voulez un agencement particulier de différentes images? Utilisez les tableaux!
Les différentes balises qui permettent de construire un tableau sont :
<TABLE>
Définis la zone qui contiendra les objets qui formerons le tableau,
<CAPTION>
Définis la légende du tableau,
<TR> (Table Row)
Définis une ligne du tableau,
<TD> (Table Data cell)
Définis une cellule du tableau,
<TH> (Table Header)
Définis les entêtes du tableau. C'est-à-dire la première ligne ou la
première colonne. Par défaut, l'alignement est centré et la police de
caractères est en gras.Certains navigateurs laxistes permettent
l'omission des balises de fin de <TR>,
<TD> et <TH>, mais c'est souvent une
source d'erreurs et/ou d'ambiguités. Il vaut donc mieux refermer ces
balises.
Par exemple :
<TABLE border="1">
<CAPTION>Ceci est un exemple</CAPTION>
<TR>
<TD align=center>Première case</TD>
<TD align=center>Deuxième case</TD>
</TR>
<TR>
<TD align=center>Troisième case</TD>
<TD align=center>Quatrième case</TD>
</TR>
</TABLE>
Donne :
Ceci est un exemple
------------------------------------
| Première case | Deuxième case |
------------------------------------
| Troisième case | Quatrième case |
------------------------------------
Les détails de quelques paramètres :
TABLE :
summary : Résumé de ce que contient la table.width : Largeur du tableau, exprimé en pixel ou en
pourcentage.align=left|center|right|justify Position
du texte dans la cellule.border : Épaisseur du trait en pixel.frame=void|above|below|hsides|lhs|rhs|vsides|box|border :
Détermine quels bords seront visibles.
void : aucun bord visible,above : le haut uniquement,below : le bas uniquement,hside : le haut et le bas,lhs : le coté gauche,rhs : le coté droit,vsides : le coté gauche et le coté droit,border : les quatre bords.cellspacing : Espace entre les cellules.TR :
align=left|center|right|justify : Position
du texte dans la cellule.valign=top|middletop|baseline : Alignement
vertical au sein de la cellule.
top : Aligné en haut,middletop : Au centre,baseline : Aligné en bas.TH :
align=left|center|right|justify : Position
du texte dans la cellule.valign=top|middletop|baseline : Alignement
vertical.colspan : Permet de recouvrir plusieurs colonnes
avec une seule cellule.nowrap : Empêche le passage à la ligne dans une cellule.
Un exemple plus compliqué :
<TABLE border="1"
summary="This table gives some statistics about fruit
flies: average height and weight, and percentage
with red eyes (for both males and females).">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
<TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>
Donne :
A test table with merged cells
|-----------------------------------------|
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| Males | 1.9 | 0.003 | 40% |
|-----------------------------------------|
| Females | 1.7 | 0.002 | 43% |
|-----------------------------------------|