Développement web statique

HTML (Partie 2)

Il est primordial d’adopter de bonnes pratiques d’utilisation de l’ordinateur, de

maîtriser la terminologie des ressources et d’optimiser notre méthode de travail
avant de commencer ce cours. Pour vous préparer, je vous invite à visionner la
vidéo suivante :

Lien de la vidéo

⚠️ Afin de pouvoir faire les applications du cours vous devez créer un dossier
nommer « Applications » dans lequel vous allez mettre toutes les pages que vous
allez créer.

1. Créez un lien hypertexte en HTML

L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un
lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des
emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser.
Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href
est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.

On reconnaît facilement un lien hypertexte (ou hyperlien) sur une page web : par
défaut, il est en bleu et souligné dans le navigateur et un curseur en forme de main
apparaît lorsqu'on pointe dessus ; mais on peut modifier ce style en CSS.

1.1. Créez un lien hypertexte avec la balise <a> et l'attribut href

Pour faire un lien hypertexte :

1. On utilise la balise<a>(pour "anchor") pour indiquer qu'on va rediriger vers un

autre endroit,
2. Puis, on ajoute l'attribut href suivi de = pour annoncer l'endroit vers lequel on veut
rediriger,

1
 Développement web statique

3. On indique explicitement entre " " l’endroit vers lequel le lien doit rediriger,
4. Enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.

À partir de là, il y a des subtilités selon l'endroit où l'on veut rediriger l'utilisateur.

1.1.1. Créez un lien hypertexte vers l'URL d'une page disponible sur
internet
Si vous voulez faire un lien vers un autre site existant en ligne, rien de plus simple, il
suffit d'utiliser la méthode de copier l'URL du site entre " " à la suite de l'attribut, comme
ceci :

Figure 1 : Création d'un lien hypertexte

Figure 2 : Résultat

Ce type de lien hypertexte s'appelle un lien absolu : il indique le chemin absolu de la

ressource.

Un chemin absolu spécifie l'emplacement exact d'une ressource, en commençant par le

protocole (généralement http:// ou [Link] suivi du nom de domaine, du chemin d'accès
au fichier et du nom du fichier lui-même.

2
 Développement web statique

Figure 3 : Chemin absolu

1.1.2. Créez un lien hypertexte d'une page à une autre sur votre site
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier
HTML par rapport au fichier HTML actuel.

Un chemin relatif décrit l'emplacement d'une ressource par rapport au fichier HTML
actuel. Il ne spécifie pas l'adresse complète de la ressource, mais indique plutôt
comment la trouver en remontant ou en descendant dans la hiérarchie des dossiers.

Par exemple, si votre fichier HTML se trouve dans le dossier pages et que vous
souhaitez créer un lien vers une autre page dans le même dossier, vous pouvez utiliser
un chemin relatif comme ceci:

Figure 4 : Chemin relatif

[Link]. Les deux pages sont situées dans un même dossier en local
Si les pages sont dans le même dossier, il suffit d'écrire comme cible du lien hypertexte
le nom du fichier vers lequel on veut amener, par exemple le fichier nommé 02-
[Link].

3
 Développement web statique

Figure 5 : Les fichiers sont dans un même dossier

Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier de
[Link] :

Figure 6 : Exemple de lien ou les deux pages sont situées dans un même dossier en local

[Link]. Les deux pages sont situées dans deux dossiers différents en
local

Figure 7 : Les fichiers sont dans deux dossiers différents

Si on veut créer un lien vers un fichier « 02-contact » dans un autre dossier, par
exemple un dossier « /pages », on va donc indiquer le chemin à suivre pour trouver ce
fichier :

4
 Développement web statique

Figure 8 : Exemple de lien ou les deux pages sont situées dans deux dossiers en local

1.1.3. Application 5:
Ouvrez votre dossier de travail dans VS Code et créez un dossier nommé «05-
application». À l'intérieur de ce dossier, créez deux fichiers « [Link] » et « liste-
[Link] ». Vous devez maintenant structurer toutes les deux pages pour contenir
un menu de navigation composé de deux liens : « Accueil » pour afficher la page index
et « Appareil » pour rediriger vers liste-appareil. Dans chacune de ces deux pages vous
devez avoir un titre avec comme contenu le nom de la page.

 La page index doit avoir un paragraphe (Exemple : Lorem ipsum … ).

 La page liste-appareil lui doit contenir une liste ordonnée d’appareil (Exemple :
Ordinateur, Serveur, Smartphone, Écran, …).

Figure 9 : Application 5

5
 Développement web statique

1.2. Créez une ancre avec les attributs id et href

Une ancre est un repère que l'on peut mettre dans une page HTML si elle est très
longue, cela aide à la navigation et rend un contenu plus facile à parcourir. Cela permet
par exemple aux visiteurs d'un site web d'aller directement à la partie qui les intéresse.
Ce comportement est typique d'un site web "one page" où tout se situe sur la même
page.

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, une balise de titre par exemple. Voyons
comment faire :

La première étape consiste à ajouter l'attribut id suivi de = pour donner un nom à l'ancre
entre " " :

Figure 10 : Ajout d'un id a notre deuxième titre

L'attribut id sert à donner un nom “unique” à une balise, pour s'en servir de repère. Ici,
on s'en sert pour faire un lien vers une ancre mais, en CSS, il pourra nous être utile pour
repérer une balise précise.

Évitez de créer des id avec des espaces ou des caractères spéciaux ; utilisez
simplement, dans la mesure du possible, des lettres et des chiffres pour que la valeur
soit reconnue par tous les navigateurs.

On peut être confronté à deux cas :

6
 Développement web statique

1.1.4. L’ancre est plus bas sur la même page

Dans ce premier cas, on crée un lien avec l'attribut href (il contient un dièse # suivi du
nom de l'ancre) :

Figure 11 : Ancre sur la même page

Figure 12 : Lien vers un titre sur la même page

1.1.5. L’ancre est située sur une autre page

Dans ce cas-là, on tape le nom de la page cible avant le dièse # et enfin le nom de
l'ancre :

7
 Développement web statique

Figure 13 : Ancre vers une autre page

Figure 14 : Lien vers un titre sur une autre page

Il est possible de configurer un lien pour qu'il ait un comportement un peu particulier.

 Nouvel onglet vide : « target="_blank" » fait en sorte que le lien hypertexte

ouvre la même page sur un nouvel onglet.
 Envoie d’un mail : « href="[Link] » crée un lien
hypertexte qui ouvre la boîte mail avec un nouveau message vide.
 Téléchargement d’un fichier : « href="[Link]" » crée
un lien hypertexte qui permet de télécharger un fichier que vous avez placé au
préalable dans le même dossier que votre page web.

8
 Développement web statique

Figure 15 : Autres utilisations d'un lien

Figure 16 : Résultat

1.1.1. Application 6:
Ouvrez votre dossier de travail dans VS Code et créez un dossier nommé «06-
application». À l'intérieur de ce dossier, créez deux fichiers « [Link] » et
«[Link] » dans un sous dossier nommé « pages ». Vous devez maintenant
structurer la première page ([Link]) pour avoir des liens pour les titres de la
seconde page ([Link]). Le résultat doit ressembler à cela :

9
Développement web statique

10
 Développement web statique

2. Insérez des images

1.3. Insérez une image avec la balise orpheline <img>
La balise qui permet d'insérer une image est une balise orpheline : <img>. Pour
fonctionner correctement, la balise <img> doit être accompagnée de deux attributs :

 src : cet attribut permet d'indiquer la source de l'image.

 alt : cet attribut permet de donner à l'image une description alternative.

2.1.1. Ajoutez l'attribut src pour indiquer la source de l'image

La source de l'image est précisée avec l'attribut src pour indiquer au navigateur
comment récupérer l'image que l'on veut insérer. De la même manière qu'un lien
hypertexte, on peut indiquer la source d'une image :

Figure 17 : Ajout d'une image

Figure 18 : Résultat

11
 Développement web statique

On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci est en
ligne, sur un site, ou qu'elle est hébergée sur le web. On copie colle donc simplement
l'URL de l'image.

Évitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de
dossiers. Par exemple, voici un chemin qui va poser problème : Images du site/Image
toute bê[Link]
Il faut idéalement :
 Supprimer les espaces (ou les remplacer par le symbole_) et les accents ;
 Tout mettre en minuscules, comme ceci
:images_du_site/image_toute_bete.jpg.

Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est
incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers, et tout ira bien.

2.1.2. Ajouter les attributs « height » et« width » pour contrôler la taille de
l’image
Inclure « height » et « width » permet au navigateur de calculer les proportions de
l'image avant son chargement. Ces proportions sont utilisées pour réserver l'espace
nécessaire afin d'afficher l'image et de réduire voire d'empêcher tout décalage à
l'affichage, permettant ainsi une navigation plus agréable et de meilleures
performances.

 L’attribut « height » : La hauteur de l'image, exprimée en pixels. Cette valeur

doit être un nombre entier, sans unité.
 L’attribut « width » : La largeur de l'image, exprimée en pixels. La valeur doit
être un nombre entier, sans unité.

Nous pouvons regarder l’affichage d’une image sans width ni height, avec width, avec
height et avec les deux :

 Sans width ni height (taille réelle) :

12
 Développement web statique

Figure 19 : Exemple d'ajout d'image sans l'utilisation de l'attribut « width »

Figure 20 : Résultat : une image qui est trop grande et qui déborde de l'écran

 Avec width :

Figure 21 : Exemple d'utilisation de width

13
 Développement web statique

Figure 22 : Résultat

 Avec height :

Figure 23 : Exemple d'utilisation de l'attribut « height »

14
 Développement web statique

Figure 24 : Résultat

 Avec width et height :

Figure 25 : Exemple d'utilisation de width et de height en même temps

15
 Développement web statique

Figure 26 : Résultat

2.1.3. Ajoutez l'attribut alt pour donner à l'image une description alternative
Donner une description alternative à une image est une bonne pratique !

Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte
alternatif sera :

 Inscrit à la place de l'image si elle ne peut pas être affichée au moment du

chargement de la page web;
 Audio décrit par les navigateurs de personnes présentant un handicap (trouble de
la vue, non-voyants).

Cela contribue donc à améliorer ce qu'on appelle l'accessibilité d'un site web. En plus,
cela aide les robots des moteurs de recherche pour trouver des images.

Une vidéo de ma chaine YouTube détaille la compétence annexe de recherche et de

téléchargement de qualité : Pour accéder à la chaine cliquer ici

16
 Développement web statique

1.4. Choisissez le bon format d'image

Voici quel format adopter en fonction de l'image que vous avez :

 Une photo : utilisez un JPEG.

 N'importe quelle image avec peu de couleurs (moins de 256) : utilisez un
PNG 8 bits, ou éventuellement un GIF.
 N'importe quelle image avec beaucoup de couleurs : utilisez un PNG 24 bits.
 Une image animée : utilisez un GIF animé.
 Un logo vectoriel : utilisez un SVG.

Prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans
espace ni accent. C’est une bonne pratique à mettre en place dès le début. Vous
pouvez remplacer les espaces par le caractère underscore _. Par exemple :
mon_image.png
2.1.4. Application 7:
Ouvrez votre dossier de travail dans VS Code et créez un dossier nommé «07-
application». Nous allons créer un site pour un restaurant. À l'intérieur de ce dossier,
créez les fichiers « [Link] », « [Link] » et « [Link] », en choisissant une
structure adéquate pour vos fichiers.

Vous devez maintenant mettre un menu de navigation dans chacune de ces pages. Le
menu de navigation doit être détaillé et permettre d’aller directement dans les différentes
parties des autres pages (plat et contact), identifiées par des titres.

 Pour la page d’accueil « [Link] », vous allez mettre un paragraphe de

description générale du site.
 Pour la page « [Link] », vous allez mettre un paragraphe de description de la
page des plats avec un titre, suivi d'une liste sans ordre de plats.
 Pour la page « [Link] », vous allez mettre un titre pour cette partie, suivi
d’un paragraphe indiquant que la liste qui va suivre est destinée à ceux qui
veulent commander. Ensuite, une liste de contacts à appeler pour commander
dans notre restaurant. Après cette partie pour les commandes, ajoutez une autre

17
 Développement web statique

liste de numéros à appeler, qui représente le service client, également précédée

d’un titre.
 Le menu de navigation doit être une liste détaillée avec des liens vers les pages,
mais aussi vers les grands titres des autres pages.
 Mettez les mots importants en gras ou en italique dans les paragraphes et ajoute
des retours chariots si nécessaire.

Exemple (ouvrer la vidéo pour voir le résultat attendu):

Figure 27 : Exemple de site pour restaurant

1.5. Ajoutez une infobulle avec l'attribut « title »

Afin d'afficher une bulle d'aide sur vos images, vous pouvez utiliser l'attribut title ; (à ne
pas confondre avec la balise title qui permet d'indiquer au navigateur le titre d'une page
web).

L'attribut title est facultatif, contrairement à alt.

Voici ce que cela peut donner :

Figure 28 : Utilisation de l'attribut « title »

18
 Développement web statique

Figure 29 : Résultat

Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle
« École Supérieure de Technologie et de Management » apparaître par-dessus l'image.

1.6. Créez une miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature cliquable sur
votre site. De cette manière vos pages web mettront moins de temps à s'afficher. Si vos
visiteurs souhaitent voir vos images en taille originale, ils n'auront qu'à cliquer dessus.

Pour ce faire, il faut disposer de deux versions d’une photo : l'image d'origine
([Link]), et une version de cette image moins lourde (donc plus petite).
Voyons voir comment faire en sorte que la miniature soit cliquable :

1. Placez vos deux images dans un dossier appelé par exemple images.
2. Faites afficher la version appartement_mini.jpg sur une page,
3. Et faites un lien vers la version [Link].

L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.

19
 Développement web statique

Figure 30 : Création d'une miniature cliquable

Figure 31 : Résultat création d'une miniature cliquable

1.7. Application 8 :
Ouvrez votre dossier de travail dans VS Code et créez un dossier nommé «08-
application». Nous allons créer une page [Link] dans ce dossier, en
choisissant une structure adéquate pour vos fichiers (page HTML et images).

 La page doit avoir un titre « Universités de mon pays » (libre choix de mettre
votre pays par exemple : « Universités du Sénégal »).
 A la suite de ce titre vous devons mettre un paragraphe annonçant que la liste
qui va suivre est une liste d’université de ce pays.
 Enfin cette liste doit être constitué de 3 trois logos d’université qui seront des
liens cliquables, ces logos doivent avoir une info-bulle affichant la signification du
sigle de l’université .
 Au clic de chaque logo on doit être rediriger vers la page d’accueil du site de
l’université en question.

Exemple :

20
Développement web statique

Figure 32 : Exemple

21
 Développement web statique

3. Résumé
1.8. Concepts :
 Un lien hypertexte (ou hyperlien) permet de changer de page. Par défaut, il est
en bleu et souligné dans le navigateur mais on peut modifier ce style en CSS.
 Pour faire un lien hypertexte vers un site web existant, on utilise la balise <a>
avec l'attribut href pour indiquer l'adresse de la page web cible. Il s'agit d'un
lien absolu. Exemple : <a href="[Link] .
 Pour faire un lien hypertexte vers une autre page de son site, on utilise la
balise <a> avec l'attribut href pour indiquer le nom du fichier en local. Il s'agit
d'un lien relatif. Exemple : <a href="[Link]"> .
 Un lien hypertexte peut aussi permettre d'amener vers un endroit précis d'une
page. Il faut créer une ancre avec l'attribut id pour “marquer” cet endroit dans la
page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre"> .
 Il existe plusieurs formats d'images adaptés au Web : PNG, JPG…
 On insère une image avec la balise <img>.
 <img> doit obligatoirement comporter au moins ces deux attributs : src (source de
l'image) et alt (courte description de l'image).
 Il est possible d'afficher une autre version d'une image grâce à un lien qui entoure
l’image.
1.9. Nouvelle balise apprise :
Élément Attribut Fonction
<a> href, alt, title, id Créer un lien hypertextes
<img> src, width, height, title Insérer une image

22
 Développement web statique

4. Table des matières

HTML (PARTIE 2)........................................................................................................................................ 1

1. CRÉEZ UN LIEN HYPERTEXTE EN HTML.............................................................................................. 1

1.1. Créez un lien hypertexte avec la balise <a> et l'attribut href...................................................1
1.1.1. Créez un lien hypertexte vers l'URL d'une page disponible sur internet.............................................2
1.1.2. Créez un lien hypertexte d'une page à une autre sur votre site..........................................................3
[Link]. Les deux pages sont situées dans un même dossier en local...................................................3
[Link]. Les deux pages sont situées dans deux dossiers différents en local........................................4
1.1.3. Application 5:....................................................................................................................................... 5
1.2. Créez une ancre avec les attributs id et href..........................................................................6
1.1............................................................................................................................................................ 7
1.2............................................................................................................................................................ 7
1.2.1. L’ancre est plus bas sur la même page...............................................................................................7
1.2.2. L’ancre est située sur une autre page.................................................................................................7
1.2.1. Application 6:....................................................................................................................................... 9
2. INSÉREZ DES IMAGES....................................................................................................................... 11
2.1. Insérez une image avec la balise orpheline <img>...............................................................11
2.1.1. Ajoutez l'attribut src pour indiquer la source de l'image....................................................................11
2.1.2. Ajouter les attributs « height » et« width » pour contrôler la taille de l’image....................................12
2.1.3. Ajoutez l'attribut alt pour donner à l'image une description alternative..............................................16
2.2. Choisissez le bon format d'image......................................................................................... 17
2.1.4. Application 7:..................................................................................................................................... 17
2.3. Ajoutez une infobulle avec l'attribut « title ».........................................................................18
2.4. Créez une miniature cliquable.............................................................................................. 19
2.5. Application 8 :....................................................................................................................... 20
3. RÉSUMÉ.......................................................................................................................................... 22
3.1. Concepts :............................................................................................................................ 22
3.2. Nouvelle balise apprise :...................................................................................................... 22
4. TABLE DES MATIÈRES....................................................................................................................... 23

23