2. Les Liens:
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir
: <a> . Il faut cependant lui ajouter un attribut, href , pour indiquer vers quelle
page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers google, situé à
l'adresse https://google.com :
<a href="https://google.com">google</a>
Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment
reproduire l'exemple de la figure précédente :
<p>Bonjour. Vous souhaitez visiter <a href="https://google.com ">google</a>
?<br /> C'est un bon site </p>
3. Un lien vers une autre page de son site
Deux pages situées dans un même dossier
si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible
du lien le nom du fichier vers lequel on veut amener. Par exemple : <a
href="page2.html"> . On dit que c'est un lien relatif.
Deux pages situées dans des dossiers différents
Imaginons que page2.html se trouve dans un sous-dossier appelé contenu
Dans ce cas de figure, le lien doit être rédigé comme ceci :
<a href="contenu/page2.html">
Un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos
pages HTML lorsqu'elles sont très longues.
4. Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors
servir de repère. Ce peut être n'importe quelle balise, un titre, par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour
faire un lien vers cette ancre. Par exemple :
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois
l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
5. Tableau en HTML :
Un tableau en HTML représente un ensemble organisé de données. Pour créer
un tableau en HTML nous allons utiliser l’élément table qui signifie « tableau
» en anglais.
Les tableaux sont une notion importante du HTML et il est important que vous
sachiez comment les créer. Dans cette leçon, nous allons voir comment créer
un tableau simple.
6. Les éléments constitutifs essentiels d’un
tableau HTML
Un tableau est un ensemble de lignes et de colonnes. L’intersection entre une
ligne et une colonne est une cellule de tableau.
Pour créer un tableau fonctionnel en HTML, nous allons devoir utiliser à
minima 3 éléments :
Un élément table (« tableau » en français) qui va définir le tableau en soi ;
Des éléments tr, pour « table row » ou « ligne de tableau » en français qui
vont nous permettre d’ajouter des lignes dans notre tableau ;
Des éléments td, pour « table data » ou « donnée de tableau » en français qui
vont nous permettre d’ajouter des cellules dans nos lignes et ainsi de créer
automatiquement de nouvelles colonnes.
7. L’élément HTML table va représenter le tableau en soi. Cet élément est
composé d’une paire de balises ouvrante <table> et fermante </table> au
sein desquelles nous allons placer les différents autres éléments de notre
tableau. Les éléments tr et td sont également représentés sous la forme
d’une paire de balises avec leur contenu entre les balises.
8. Pour créer un tableau en HTML, il y a une chose que vous devez bien
comprendre qui est que les tableaux HTML vont être créés ligne par ligne.
A chaque fois que nous voudrons ajouter une ligne dans notre tableau, nous
utiliserons un nouvel élément tr.
Nous allons ensuite pouvoir ajouter autant d’éléments td au sein de chacune
de nos lignes. Chaque élément td va représenter une cellule dans le tableau.
Par exemple, pour créer un tableau en HTML contenant 3 lignes contenant
chacune 4 cellules (c’est-à-dire un tableau de 3 lignes, 4 colonnes), nous
utiliserons notre élément table qui va contenir 3 éléments tr et chaque
élément tr contiendra 4 éléments td comme ceci (ne tenez pas compte de la
mise en forme pour le moment, nous en reparlerons plus tard) :
9.
10. Insérer des images dans des pages avec
l’élément HTML img
L’insertion d’images en HTML va se faire au moyen de l’élément HTML img.
Cet élément est représenté par une balise orpheline.
Au sein de l’élément img, nous allons obligatoirement devoir préciser deux
attributs : les attributs src et alt.
L’attribut src (pour source) va prendre comme valeur l’adresse de l’image
(adresse relative ou absolue)
l’attribut alt (pour alternative) va contenir un texte alternatif décrivant
l’image. Ce texte va être affiché si l’image ne peut pas l’être pour une raison
ou pour une autre
11. L’attribut src va fonctionner de la même manière que l’attribut href pour les liens.
Ainsi, si vous enregistrez votre image dans un dossier différent de votre page
HTML, pensez bien à en tenir compte dans la valeur donnée à src.
Exemple:
< !DOCTYPE HTML>
<html>
<head>
<title> Cours HTML </title>
</head>
<body>
<img src= ‘’nom_de_votre_image.extension’’ alt= ‘’la description que vous
voulez mettre’’>
</body>
</html>
