Creation Sites Web 2-2 - HTML - Balises Elementaires

HC Hervé Chappert 1
Sommaire
Chapitre : Les bases du HTML
Partie : Balises élémentaires
A. Organiser le texte
B. Mettre des images
C. Les chemins absolus ou relatifs
D. Les liens hypertextes
HC Bases du HTML / Balises élémentaires 2

A – Organiser le texte
Il faut organiser logiquement son texte et ses images sur sa page Web pour que la
partie mise en forme soit plus facile.
Cela permet aussi de proposer un site plus simple, plus intuitif et plus
ergonomique aux visiteurs. La structure est aussi très importante pour la mise en
place de SEO.
Nous allons donc voir quelques balises importantes et nous aborderons les
spécificités du HTML 5 plus tard dans le cours.
HC Bases du HTML / Balises élémentaires / A – Organiser le texte 3

BALISES Explications
i peut prendre les valeurs de 1 à 6
<hi> </hi> Balises en-tête (header) qui permet de définir des titres de
différents niveaux dans une même page
<br /> Pour aller à la ligne
Pour créer un paragraphe
<p> </p>
Aller à la ligne et sauter une ligne
Les balises <ul> (unordered) et <ol> (ordered) permettent de
<ul> </ul>
créer des listes non ordonnées ou ordonnées
<ol></ol>
Dans les deux cas <li> permet de créer des éléments de la liste
<li></li>
<ol> et <ul> peuvent s’imbriquer
Toutes les balises HTML avec les explications sur :

http://www.w3schools.com/tags/tag_i.asp
Voir vidéo « HTML 4 » sur https://www.youtube.com/c/hervechappert et faire les

exercices de la vidéo

EN HTML, on peut définir le type de numérotation ou de puces des listes <ol> et
<ul>. Pour cela on utilise l’attribut type avec les valeurs :
• Pour <ul> circle, square ou disc
• Pour <ol> la première lettre ou le 1er chiffre

B – Mettre des images
Pour afficher une image on va utiliser la balise <img>. Cette balise utilise des
attributs :
• Src
Indiquer la source de l’image (son adresse, son URL, ..)
• Alt
Indique un texte alternatif à l’image, qui s’affiche à la place de l’image
(en cas de problème), qui peut être lu par certains navigateurs pour des
personnes déficientes visuelles, qui permet aux robots de déterminer
quelle image vous utilisez, etc..
Il est important et obligatoire
• Title
Met un texte à côté de la souris lors du survol de l’imageType info-bulle
• Width et Height
Déterminent la largeur et la hauteur de l’image… même s’il vaut mieux
utiliser le CSS pour cela
HC Bases du HTML / Balises élémentaires / B – Mettre des images 6

1. Je télécharge une image et je la stocke dans le même répertoire que ma page
Web
2. J’écris la balise <img> avec ses attributs dans la partie <body>
3. Je teste

Les navigateurs peuvent afficher correctement trois types d’images :
1. GIF
Format assez ancien mais relativement léger. Convient bien pour des
petites images ou des symboles simples. Peut être remplacé par des
images PNG
Particularité : Les gifs animés
2. JPG
C’est un format conçu pour réduire le poids des fichiers (algorithme de
compression) très utilisé et de bonne qualité. Certaines images vont
donc être floues à l’agrandissement.
Particularité : 2 extensions pour le même format JPG et JPEG (Attention
dans les noms des fichiers)
3. PNG
Format récent. Très bonne qualité et « pas trop » lourd. A utiliser en
priorité (sauf pour les photos).
Particularité : Gère la transparence
Tous les autres types sont à éviter car tous les navigateurs ne les affichent pas
correctement

C – Chemin absolu et chemin relatif
Si nous avions mis l’image dans un répertoire (un dossier), nous aurions eu une
erreur de ce type à l’affichage
On voit ici l’utilité de l’attribut ALT
Cette erreur vient du fait que nous avons bien mis le nom du fichier dans
l’attribut SRC mais pas le chemin pour arriver à ce fichier.
En HTML, il existe deux type de chemin pour les fichiers (tous les types de
fichiers pas seulement les images) :
1. Chemin absolu
2. Chemin relatif
HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs 9

i – Chemin absolu
Le chemin absolu va indiquer l’adresse du fichier cible sans tenir compte de

l’emplacement courant.
On va commencer l’adresse par file:/// puis indiquer exactement tous les
répertoires pour arriver au fichier ….
C’est souvent source de problème quand on change son arborescence.
Par exemple :
On pourrait écrire
<img src="file:///C:/Users/Hervé/Desktop/Exemples Création sites Web/images/LogoBlueFish.png"
Attention : ce sont des / et pas des \
Ce n’est pas très pratique…
De plus, si ma page était hébergée sur un serveur Web, mon ordinateur devrait
avoir exactement cette arborescence avec un fichier de ce nom !!! Ce qui est
impossible
HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / i – chemin absolu 10

ii – Chemin relatif
Je vais indiquer l’emplacement du fichier cible depuis mon emplacement courant.

Pour cela je dispose de deux ordres :
Ø ./ indique l’emplacement courant
Ø ../ indique l’emplacement parent
<img src=« ./images/LogoBlueFish.png » …./>
Si le navigateur ne trouve pas File:/// ou ./ ou ../ (ou d’autres mots réservés que l’on verra
plus tard … ) il considère que vous êtes en chemin relatif et que vous « avez oublié » ./
Il corrige donc pour vous
Ainsi <img src=« images/LogoBlueFish.png » …./> fonctionne aussi
HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / ii – chemin relatif 11

SiteWeb Répertoire
HTML CSS Images Répertoires
Page1.html Page2.html MonCss.css Logo1.png Logo2.png Fichiers
Ecrire les adresses relatives permettant d’accéder :

1. À la page Page2.html depuis la Page1.html
2. À la page MonCss.css depuis la Page1.html
3. A l’image Logo1.png depuis Page1.html
4. A l’image Logo1.png depuis MonCss.css

Ecrire les adresses relatives permettant d’accéder :
1. À la page Page2.html depuis la Page1.html

./page2.html
2. À la page MonCss.css depuis la Page1.html

../CSS/MonCss.css
3. A l’image Logo1.png depuis Page1.html

../images/Logo1.png
4. A l’image Logo1.png depuis MonCss.css

../images/Logo1.png

D – Faire des liens
Pour faire des liens on va utiliser les balises <a> et </a>. (a pour ancre)
On va utiliser l’attribut href pour indiquer la destination du lien (hypertext
reference)
Tout ce qui est écrit entre le <a> et </a> sera cliquable et nous dirigera vers la
destination donnée par href.
On peut aussi utiliser les attributs suivant avec la balise <a> :

Ø Title pour des infos bulles sur le lien
Ø Target pour donner des informations d’ouverture
Voir vidéo « HTML 5 » sur https://www.youtube.com/c/hervechappert
HC Bases du HTML / Balises élémentaires / D – Faire des liens 14

On peut faire des liens à l’intérieur d’une page HTML
Il faut donner un nom à l’endroit où on veut aller … Par exemple, si on veut

retourner en haut de la page. On va écrire :
… On ne met pas de href

<body> On peut mettre ce que
<h1 id=‘’haut’’>TITRE</h1> l’on veut comme nom
…..
Et en bas de la page, on va écrire

Le # est obligatoire
<a href=‘’#haut’’> Retour en haut de page</a>
Il faut que ce soit la
</body>
même casse que dans id
</html>
Exercice : faire un lien entre 2 pages permettant d’arriver à un endroit précis de la page 2
HC Bases du HTML / Balises élémentaires / D – Faire des liens 15

HC Hervé Chappert 16
Creative Commons:
• Attribution
• Pas d’Utilisation Commerciale
• Pas de Modification
Under the following terms:
Attribution — You must give appropriate credit, provide a link to the

license, and indicate if changes were made. You may do so in any
reasonable manner, but not in any way that suggests the licensor endorses
you or your use.
NonCommercial — You may not use the material for commercial purposes.
NoDerivatives — If you remix, transform, or build upon the material, you

may not distribute the modified material.

Creation Sites Web 2-2 - HTML - Balises Elementaires

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Creation Sites Web 2-2 - HTML - Balises Elementaires

Transféré par

Droits d'auteur :

Formats disponibles

HC Hervé Chappert 1

B. Mettre des images

C. Les chemins absolus ou relatifs

D. Les liens hypertextes

HC Bases du HTML / Balises élémentaires 2

HC Bases du HTML / Balises élémentaires / A – Organiser le texte 3

Toutes les balises HTML avec les explications sur :

Voir vidéo « HTML 4 » sur https://www.youtube.com/c/hervechappert et faire les

HC Bases du HTML / Balises élémentaires / A – Organiser le texte 4

HC Bases du HTML / Balises élémentaires / A – Organiser le texte 5

HC Bases du HTML / Balises élémentaires / B – Mettre des images 6

HC Bases du HTML / Balises élémentaires / B – Mettre des images 7

HC Bases du HTML / Balises élémentaires / B – Mettre des images 8

On voit ici l’utilité de l’attribut ALT

HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs 9

Le chemin absolu va indiquer l’adresse du fichier cible sans tenir compte de

Attention : ce sont des / et pas des \

Ce n’est pas très pratique…

HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / i – chemin absolu 10

Je vais indiquer l’emplacement du fichier cible depuis mon emplacement courant.

<img src=« ./images/LogoBlueFish.png » …./>

Ainsi <img src=« images/LogoBlueFish.png » …./> fonctionne aussi

HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / ii – chemin relatif 11

HTML CSS Images Répertoires

Page1.html Page2.html MonCss.css Logo1.png Logo2.png Fichiers

Ecrire les adresses relatives permettant d’accéder :

HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / ii – chemin relatif 12

1. À la page Page2.html depuis la Page1.html

2. À la page MonCss.css depuis la Page1.html

3. A l’image Logo1.png depuis Page1.html

4. A l’image Logo1.png depuis MonCss.css

HC Bases du HTML / Balises élémentaires / C – Chemins absolus et relatifs / ii – chemin relatif 13

On peut aussi utiliser les attributs suivant avec la balise <a> :

Voir vidéo « HTML 5 » sur https://www.youtube.com/c/hervechappert

HC Bases du HTML / Balises élémentaires / D – Faire des liens 14

Il faut donner un nom à l’endroit où on veut aller … Par exemple, si on veut

… On ne met pas de href

Et en bas de la page, on va écrire

HC Bases du HTML / Balises élémentaires / D – Faire des liens 15

Under the following terms:

Attribution — You must give appropriate credit, provide a link to the

NoDerivatives — If you remix, transform, or build upon the material, you

Vous aimerez peut-être aussi