I.

Les liens hypertextes

Conditions d’achèvement

Marquer comme terminé

1. Créer un lien hypertexte

Internet est entièrement basé sur la notion de lien hypertexte. Dans la pratique un site est composé
de plusieurs pages, pour que vos visiteurs puissent naviguer entre elles, il faut créer des liens.

Dans le langage HTML, il est possible de transformer certains mots ou images d'une page Web en
liens. Lorsque l'on clique sur ces liens, l'utilisateur est renvoyé vers un autre site web, ailleurs dans la
page, vers un document, un mail, une image, un son...

>> Comment créer un lien hypertexte ?

Le principe de l'HTML est simple : les balises <a>... </a> se placent autour des mots (ou de l'image)
qui vont servir d'origine au lien hypertexte, cette dernière sera donc la partie cliquable.

>> Comment préciser la ressource d’un lien hypertexte ?

Pour préciser où le lien va mener, on complète la balise <a> </a> par l'attribut "href" (Hypertext
REFerence) suivi d'une adresse.

A cette adresse doit correspondre le chemin vers la page ciblée.

<a href="chemin vers la page ciblée">mot cliquable</a>

Exemple :

<a href="[Link] au cinéma</a>

Dans le cas où le chemin ne mène plus à la ressource, on dira du lien qu'il est brisé.

>> L'apparence par défaut d'un lien

Par défaut, les liens sont soulignés et se colorent en bleu. Après avoir été cliqués, ils se colorent en
violet. C’est le navigateur qui a changé sa couleur permettant ainsi au visiteur de savoir que c’est un
lien qu’il a déjà visité.

Il est possible de changer ces couleurs peu élégantes à l’aide des feuilles de style CSS, nous
l'apprendrons plus tard.

2. Quelques attributs

>> Ajouter une infobulle

Cette bulle est un petit message qui s’affiche lorsque vous pointez avec la souris sur le lien. Pour
créer une bulle d’aide sur un lien, ajoutez à la balise <a> un attribut title.

<a href="[Link]" title="Signez mon livre !">Livre d’or</a>

Le texte de la bulle d’aide doit être assez court

>> Ouvrir un lien dans une nouvelle fenêtre

Ajouter l'attribut "target" (cible) permet, lorsqu'il est fixé à "blank" de forcer l'ouverture du lien dans
un nouvel onglet de navigateur.

<a href=" [Link] target="_blank"> Vers le site de Google </a>

Notez que cette pratique peut être utile pour éviter que les internautes "perdent" votre site web (je
l'emploie sur cette plateforme pour ouvrir mes ressources externes dans un nouvel onglet et vous
faciliter le passage de l'un à l'autre) MAIS est peu recommandable d'un point de vue de
l’accessibilité. En effet, l'ouverture dans une nouvelle fenêtre / onglet pénalise les personnes
souffrant de certains handicaps.

3. L'adressage absolu

L'adressage absolu consiste à indiquer le chemin d'accès complet vers une page, un site ou un
fichier.

Ce chemin d'accès démarre à la racine où se trouve le fichier.

Exemple :

<a href="C:/monsite/[Link]">Histoire de la société</a>

Notez que cette syntaxe ne peut en aucun cas être employée en web car, transféré en ligne, votre
page ne sera jamais trouvée !

Un lien vers un site (dit lien externe) est un lien inséré dans un de vos documents et donnant accès à
un autre site que le vôtre. Dans ce cas, il faut préciser l'adresse (ou url) complète et exacte de ce
site.

<a href="[Link] La [Link]</a>

Cet adressage est généralement réservé aux liens menant à des ressources externes, ils peuvent être
employés sans problème dans un site web.

5. L'adressage relatif

L'adressage relatif, contrairement à l'adressage absolu, consiste à effectuer un lien vers un fichier de
votre site (dit lien interne).

Dans le cas d’un lien relatif, on ne connaît pas l’adresse complète de la page vers laquelle on amène,
on cible la page par rapport à celle qui contient le lien.

>> Lorsque tous les documents sont dans le même dossier :

<a href="[Link]">Page</a>

Pour relier deux fichiers se trouvant dans le même dossier, l'adresse à mentionner correspond tout
simplement au nom du fichier visé.

>> Lorsqu'il faut parcourir (rentrer dans) des sous-dossiers :

<a href="dossier/[Link]">Lien</a>

L'alternances des dossiers et/ou des fichiers est écrite à l'aide du slash / (ou barre oblique).

Exemple avec une hiérarchie de plusieurs sous-dossiers :

<a href="dossier1/dossier2/[Link]">Lien</a>

A chaque barre oblique (/), vous descendez d'un niveau dans la hiérarchie des dossiers.

>> Lorsqu'il faut sortir du dossier parent et remonter dans l'arborescence

<a href="../[Link]">Lien</a>

Deux points et une barre oblique (../) permettent de remonter d'un niveau dans la hiérarchie des
dossiers.

Il est tout à fait possible de remonter plusieurs répertoires. Pour cela il faudra cumuler les ../ et ainsi
pour remonter de deux niveaux, il sera possible d'écrire :

<a href="../../dossier/[Link]</a>

Si vous déplacez ou renommez un fichier qui contient des liens relatifs au document, ou un fichier
sur lequel pointe un lien relatif à partir d'un autre document, il est nécessaire de mettre ces liens à
jour.

>> Exemple d'un site web

 Tout les éléments de votre site web se trouvent dans un dossier racine de site (toujours !!),
ici, my_site

 La page d'accueil de votre site web (la première que les internautes voient), est sauvegardée
sous le nom [Link] ou [Link] (toujours !!).

 Vos noms de fichiers et de dossiers ne peuvent jamais comporter d'espaces ou d'accents !

  Pour établir un lien entre "[Link]" et "[Link]" (qui se trouve dans le sous-dossier
"Support"), utilisez le chemin relatif Support/[Link].

 Pour établir un lien entre "[Link]" et "[Link]" (qui se trouve dans le sous-dossier
"Ressources"), utilisez le chemin relatif Support/Ressources/[Link].

 Pour établir un lien de [Link] vers [Link] (qui se trouve dans le dossier parent, un
niveau au-dessus de [Link]), utilisez le chemin relatif ../[Link].

 Pour établir un lien de [Link] vers [Link] (qui se trouve dans un autre sous-
dossier du dossier parent), utilisez le chemin relatif ../products/[Link]. Ici, la
séquence ../ fait remonter au dossier parent, et products/ fait redescendre dans le sous-
dossier « products ».

Évitez les noms de fichiers complexes, donnez à vos fichiers des noms en minuscules, sans espace ni
accent.

>> Avantage de l'adressage relatif

Le fait d'exprimer les liens de manière relative (où sont les fichiers d'origine et d'arrivée l'un par
rapport à l'autre) et non absolue (on accède au fichier cible en démarrant de la racine), permet de
mettre un site en ligne (copier la structure et les fichiers du site sur un serveur Web) sans aucun
problème.

Imaginez en effet que tous les liens soient exprimés de cette manière :

<a href="C:/monsite/[Link]">Accueil</a>

Il n'y a aucune chance pour qu'en copiant vos fichiers sur un serveur web qui aura par exemple pour
adresse [Link] votre fichier [Link] se retrouve dans c:/monsite/.

Votre lien ne fonctionnera donc pas... et votre site ne s'affichera pas

7. Créer un lien au sein d'une même page Web

>> Pourquoi créer un lien au sein d'une page ?

Dans le cas d'une page assez longue ou d'un site internet composé d'une seule page (Site dit
"onepage"), il est parfois nécessaire de mettre en place une navigation permettant de se déplacer au
sein de cette page.

On utilise pour cela un lien vers "une ancre", c'est-à-dire un lien au sein de la même page.

>> Mise en oeuvre

Il faut tout d’abord marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les
ancres se définissent grâce à l'attribut ID. La syntaxe est la suivante :

<balise id="ancre"> ... </balise>

L'appel d'une ancre se fait de la manière suivante :

<a href="#ancre"> ... </a>

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien
d'accéder à une section particulière d'une autre page :
<a href="url/nom_du_fichier.html#ancre"> ... </a>

Consultez un exemple concret ici (Après l'avoir affiché > clic droit / Afficher le code source de la page)

8. Les liens hypertextes particuliers

>> Créer un lien de messagerie

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de
type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de
l'attribut href comme ceci :

<p><a href="[Link] un e-mail !</a></p>

Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous
contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre
adresse e-mail.

Attention !

Outre le problème de spam que ce type de lien peut occasionner, il a la particularité d’ouvrir le
logiciel de courrier électronique du visiteur, c'est donc son serveur SMTP qui fait parvenir le courriel
vers votre propre serveur de courrier. Si celui-ci n'en a pas configuré sur son ordinateur, votre lien de
messagerie ne servira à rien.
C'est la raison pour laquelle les professionnels mettent en place des formulaires qui gèrent l’envoi de
ces messages.

>> Un lien pour télécharger un fichier

Pour proposer le téléchargement d'un fichier à partir d'une page web, il faut procéder exactement
comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à
télécharger.

Exemple pour lancer, au clic, le téléchargement de [Link] situé dans le même dossier que
votre page web :

<p><a href="[Link]">Télécharger le fichier</a></p>

Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de
téléchargement lorsqu'on cliquera sur le lien.

>> Un lien vers un fichier PDF

<a href="pdf/[Link]">Téléchargez le mode d'emploi </a>

Le navigateur, s'il possède un lecteur pdf intégré (comme Chrome), va afficher le pdf lorsqu'on
cliquera sur le lien. L'utilisateur peut naviguer, imprimer ou sauvegarder le fichier en utilisant les
fonctionnalités de son lecteur.

C'est cette technique qui est employée pour proposer à des clients le téléchargement d'un fichier PDF
avec des tarifs par exemple :

<p><a href="tarifs/[Link]">Télécharger nos tarifs</a></p>

II. Les tableaux

Conditions d’achèvement

Marquer comme terminé

1. Introduction aux tableaux

>> Utilité des tableaux

Dans un site web, les tableaux servent à afficher des données tabulaires, comme on pourrait en
trouver dans un logiciel tableur.

>> Mise en oeuvre

Les tableaux HTML sont, comme les tableaux Excel, construits en fonction de deux éléments : des
lignes et des cellules.

Chaque tableau est constitué d'une série de lignes. Chaque ligne est constituée d'une ou plusieurs
cellules.

Découvrez un tableau simple ... (Après l'avoir affiché > clic droit sur la page / Afficher le code source
de la page)

2. Code source

>> Structure de base d’un tableau

Comme vous venez de le découvrir dans l'exemple, les balises suivantes sont indispensables à la
construction d'un tableau :

<table></table> - définit le début et la fin de la construction du tableau

<tr></tr> - définit une rangée dans un tableau. On parle aussi de ligne.

<td></td> - définit les données dans une rangée. On parle aussi de cellule.

Ces balises sont toujours utilisées suivant la même structure :

 un tableau peut contenir une ou plusieurs lignes,

 une ligne peut contenir une ou plusieurs cellules.

>> Une ligne et deux cellules

Pour créer un tableau d'une ligne et de deux cellules, il faut insérer dans la ligne (entre les balises
<tr></tr>) deux cellules (deux fois le couple <td></td>).

Ce qui donne:

<table>
<tr>
<td>Un</td>
<td>Deux</td>
</tr>
</table>
Et ainsi de suite pour chaque cellule supplémentaire !

3. Principes de base des tableaux

>> La largeur du tableau

Un tableau ne prend pas tout l'espace disponible dans la fenêtre mais prend au contraire le moins de
place possible.

Si aucune modification de taille du tableau n'est précisée, une cellule prend la place de son contenu,
tout en prenant le moins de place possible, en "collant" aux données.

>> La bordure du tableau

Par défaut, un tableau n'a pas de bordure visible.

L'attribut 'border=1' qui accompagne la balise <table> implique l'affichage d'un cadre autour de
chaque cellule du tableau :

<table border="1">

Lorsque vous travaillerez avec des tableaux, prenez la précaution, tant que votre tableau n'est pas
fini, de travailler en affichant les bordures du tableau. Vous verrez ainsi plus clairement les problèmes
qui peuvent survenir. Une fois satisfait du résultat, vous pourrez mettre la valeur de cet attribut à 0 ou
ne plus le mentionner.

>> Contenus du tableau

Les éléments insérés dans un tableau sont toujours placés entre les balises <td> et </td>, jamais en
dehors.

Ces éléments peuvent être:

 du texte

 une image

 des liens

 un autre tableau

 un tableau qui contient une image sur laquelle on fait un lien...

>> Mise en page dans l’éditeur

Les deux codes suivants aboutissent exactement au même résultat.:

L'option 2 et son code indenté permet une meilleure lecture du code.

Indenter signifie l'ajout de tabulations ou d'espaces dans un code, pour une meilleure lecture et
compréhension du code. C'est tout aussi important en Web que n'importe lequel des langages de
programmation !!

Il est vivement conseillé de soigner son code, de l'indenter, afin qu'il soit aéré (comme à droite), de
manière à faciliter la relecture et les corrections éventuelles. C'est évidemment valable pour le HTML
en général !

5. Légender un tableau

>> La balise caption

Cette balise servira à légender le tableau. Il suffit de la placer au début du tableau, juste après la
balise d'ouverture <table> et d'y placer un descriptif.

Exemple :

<table><caption>Revenus de cette année civile</caption><tr>...

Par défaut, cette légende apparaît en haut du tableau mais sa position et son aspect peuvent être
stylisées en CSS.

6. Insérer une image dans un tableau

Les images s’insèrent, comme le texte, à l’intérieur des cellules du tableau, exemple :

<table>
<tr>
<td><img src="images/[Link]"></td>
<td><img src="images/[Link]"></td>
<td><img src="images/[Link]"></td>
</tr>
<tr>
<td> caractéristiques physiques </td>
 <td> l'ours dans l'histoire </td>
<td> le développement économique </td>
</tr>
</table>

7. Structurer un tableau de données

>> Les balises d’en-tête

Les balises <th> et </th> peuvent désigner la ligne d’en-tête d’un tableau, par défaut, les cellules de
celles-ci apparaîtront plus grasses. Les cellules d'en-tête sont alors encadrées par ces balises <th>
</th>.

Exemple :

<table>
<tr>
<th>Nos articles</th>
<th>Nos prix</th>
<th>Mois de livraison</th>
</tr>
</table>

Celles-ci peuvent être formatées en CSS.

>> Les sections logiques

Les gros tableaux, peuvent être divisés en trois parties : thead (en-tête du tableau), tbody (corps du
tableau) et tfoot (pied de tableau). Ces balises permettent de décomposer les tableaux en sections
logiques.

Cela permet également d’appliquer une mise en forme particulière à cette zone avec les CSS (que
nous découvrirons plus tard).

Exemple :
Cette structuration ne sera mise en place que pour les tableaux suffisamment gros pour le justifier.
Une structure simple est suffisante dans la plupart des cas, accompagnée d'une feuille de style pour
mettre en relief les titres de colonnes et de lignes.

Découvrez un exemple de tableau structuré. (Après l'avoir affiché > clic droit sur la page / Afficher le
code source de la page)

◄ I. Les liens hypertextes

Aller à…

III. Compléments aux Tableaux

Conditions d’achèvement

Marquer comme terminé

1. Tableau et mise en page

Il n'y a pas si longtemps que ça, la plupart des sites étaient encore construits entièrement à l'aide de
tableaux.

Depuis, tout le monde du web (ou presque) s'est tourné vers la mise en page à l'aide des CSS.

Il y a encore des sites qui sont construits de la sorte. Autant le dire tout de suite, ce sont le plus
souvent des sites créés par des amateurs ou des sites qui n'ont pas été mis à jour depuis longtemps.

Il reste cependant un domaine où les tableaux sont encore fort utilisés pour effectuer la mise en page
du contenu HTML, c'est le domaine des mailings ou newsletters ou lettres d'informations.
La raison est que les logiciels de messagerie (Outlook, Thunderbird, Mail, Eudora, etc..) n'évoluent
pas de la même manière que les navigateurs. Leur évolution est beaucoup plus lente.

Mettre en page les courriels uniquement par le biais de CSS devient hasardeux, bien que possible, et
il est conseillé d'utiliser des tableaux pour effectuer ces mises en page, mais uniquement dans ce
cadre-là.

>> Créer un mail HTML de type "Newsletter"

[Link]

Tutoriel complet qui montrera les subtilités et les pratiques efficaces pour construire une mail de type
"Newsletter" en HTML.

2. Fusionner des cellules

Par défaut, le nombre de cellules est toujours le même par colonne ou par ligne.

Il est possible, via deux attributs, de décrire une fusion de cellule. Le principe est simple :

 spécifier si la fusion est horizontale ou verticale

 spécifier sur combien d'éléments la fusion s'effectue.

Exemple de fusion horizontale (sur 3 colonnes dans cet exemple) :

<tr>
<td colspan="3"> cliquez sur les miniatures pour accéder aux pages correspondantes </td>
</tr>

Colspan étend en colonnes et le chiffre correspond au nombre de colonnes sur lesquelles devra
s'étendre la cellule.

Exemple de fusion verticale (sur 3 lignes dans cet exemple) :

<tr>
<td rowspan="3"> détails </td>
</tr>

Rowspan étend en lignes et le chiffre correspond au nombre de lignes (rangées) sur lesquelles devra
s'étendre la cellule.