Le HTML (HyperText Markup Language) a fait son apparition dès 1991 lors du lancement du
Web. Son rôle est de gérer et d’organiser le contenu.
Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle de gérer
l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du
texte…). Ce langage est venu compléter le HTML en 1996, et il est toujours au fondement
même du style du Web de nos jours.
Comprenez le rôle du navigateur
Les rôles du HTML et du CSS se complètent. Mais ensuite, c’est le navigateur web
qui fait le reste du travail : lire le code HTML et CSS pour afficher un résultat visuel à
l'écran. Si votre code CSS dit “Les titres sont en rouge”, alors le navigateur affichera
les titres en rouge.
Pour créer une page web en HTML, il suffit de créer un fichier ayant l'extension .html
Appropriez-vous les balises HTML
Le langage HTML utilise ce qu'on appelle des balises. On les écrit entre chevrons <
et > :
Les balises indiquent la nature du texte qu'elles encadrent. Elles permettent au navigateur de
comprendre ce qu'il faut afficher à l'écran pour les visiteurs d'un site web.
Les balises indiquent la nature du texte qu'elles encadrent. Elles permettent au navigateur de
comprendre ce qu'il faut afficher à l'écran pour les visiteurs d'un site web.
<title> </title> : “Ceci est le titre de la page”,
<img>: “Ceci est une image”,
<p> </p>: “Ceci est un paragraphe de texte”, etc
On distingue deux types de balises :
1. Les balises en paires (une balise ouvrante et une balise fermante)
2. Et les balises orphelines (une seule balise).
Paramétrez vos balises avec des attributs
Un attribut est situé dans la balise ouvrante d'une balise en paire, ou directement
dans une balise orpheline, comme c'est le cas ci-dessous avec la balise<img>:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le titre de ma page</title>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe, <br>dont le contenu est particulièrement
long.</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
</html>
Voyons à quoi servent toutes ces balises.
La première ligne <!DOCTYPE html> est une balise orpheline indispensable :
elle indique qu'il s'agit d'une page HTML.
La balise en paire <html> </html> englobe tout le contenu de la page web. A
l'intérieur, il y a les balises en paire <head> </head> et <body> </body>
Pour revenir à la ligne, on utilise la balise orpheline <br> (pour break)
Créez des titres avec les balises <h1> , <h2> , <h3>…
Les balises de titres vont de <h1> </h1> jusqu'à <h6> </h6>, ce qui permet de
hiérarchiser et structurer le texte dans différentes sections, du niveau le plus grand,
au niveau le plus petit.
Créez des listes avec les balises <li> et <ul> ou <ol>
Étape 1 : balisez les éléments d'une liste avec <li> </li>
Pour baliser les éléments qu'on veut mettre dans une liste, on utilise <li>
</li> (pour "list item" ou "élément de la liste" en français). Puis on les insère tous à
l'intérieur d'une autre balise pour indiquer s'il s'agit d'une liste à puces ou d'une liste
numérotée.
Étape 2 : insérez la liste dans des balises <ul> </ul> ou <ol> </ol>
Les balises <ul> </ul>(pour "unordered list") permettent d'indiquer qu'on démarre
une liste non ordonnée, c'est-à-dire, ce que l'on appelle en français une liste à
puces.
Les balises <ol> </ol>(pour "ordered list") permettent d'indiquer qu'on démarre une
liste ordonnée, autrement dit en français une liste numérotée.
Mettez en valeur du texte important
Dans le texte qui s'affiche sur une page web, vous aimeriez faire ressortir certains
mots en particulier.
La balise la plus utilisée pour cela est <strong> mais HTML vous propose différents
moyens de mettre en valeur le texte de votre page :
Balises Traduction par le navigateur
<mark> </mark> Surligner le texte.
<em> </em> Mettre le texte en italique.
<strong> </strong> Mettre le texte en gras.
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,
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.
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 :
<a href="[Link] à OpenClassrooms</a>
Ce type de lien hypertexte s'appelle un lien absolu : il indique une adresse complète.
Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu
différente, ce qui va nous être utile pour faire des liens entre les pages de notre site.
Créez un lien hypertexte d'une page à une autre sur votre site
Souvenez-vous : pour l’instant nous n’avons pas d’URL disponible car le site n’est
pas encore en ligne. On va donc créer des liens entre nos pages en utilisant leur
nom, et en indiquant leur arborescence dans notre dossier en local.
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML.
Cas n°1 : 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é [Link].
Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier
de [Link] :
<a href="[Link]">Page 2</a>
Mais comment faire si on veut créer un fichier page 3 et le déplacer dans un dossier
`/contenu`: comment indiquer le chemin relatif ?
Justement, la réponse est dans la question : en indiquant le chemin !
Cas n°2 : les deux pages sont situées dans deux dossiers différents en
local
Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple
un dossier /contenu , on va donc indiquer le chemin à suivre pour trouver ce fichier :
<a href="contenu/[Link]">Page 3</a>
Et s'il y a plusieurs sous-dossiers, on écrira ceci :
<a href="contenu/autredossier/[Link]">Page 3</a>
Et si le fichier ne se trouve pas dans un sous-dossier, mais dans un dossier “parent”,
on fait comment ?
Si votre fichier cible est placé dans un dossier qui se trouve “plus haut” dans
l'arborescence, il faut écrire deux points .. , comme ceci :
<a href="../[Link]">Page 3</a>
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 " " :
<h2 id="mon_ancre">Titre</h2>
L'attribut id sert à donner un nom “unique” à une balise, pour s'en servir de repère.
Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut. 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, vous verrez.
É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.
La seconde étape consiste à indiquer où se situe l'ancre. La méthode pour se faire
varie selon que :
1. l'ancre est plus bas sur la même page
2. l'ancre est située sur une autre page
Cas n°1 : 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) :
<a href="#mon_ancre">Aller vers l'ancre</a>
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres :
<h1>Ma grande page</h1>
<p>
Découvrez nos conseils d’aménagement pour :<br>
<a href="#cuisine">La cuisine</a><br>
<a href="#jardin">Le jardin</a><br>
<a href="#salon">Le salon</a><br>
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="jardin">Le jardin</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="salon">Le salon</h2>
<p>... (beaucoup de texte) ...</p>
Testez pour voir avec le CodePen P1C5
Vous avez peut-être remarqué que l’on a commencé à utiliser du latin pour remplir
des zones de texte dans notre code. C'est normal, pas de panique ! Il s'agit du
"lorem ipsum", un “faux texte” qu'on peut ajouter provisoirement, de manière à
calibrer une mise en page avant la validation d’un texte définitif.
Cas n°2 : l'ancre est située dans 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 :
<a href="[Link]#jardin">Le jardin</a>
Voici une nouvelle page qui contient trois liens, chacun amenant vers une des ancres
de la page de l'exemple précédent :
<h1>Le Mégamix</h1>
<p>
Rendez-vous quelque part sur la page :<br>
<a href="[Link]#cuisine">La cuisine</a><br>
<a href="[Link]#jardin">Le jardin</a><br>
<a href="[Link]#salon">Le salon</a><br>
</p>
Et voilà pour tout ce que vous devez savoir sur les liens !
Sachez qu'il est possible de configurer un lien pour qu'il ait un comportement un peu
particulier.
target="_blank" fait en sorte que le lien hypertexte ouvre un nouvel onglet :
<p>Bonjour. Souhaitez-vous apprendre sur <a href="[Link]
target="_blank">OpenClassrooms</a> ?</p>
href="[Link] crée un lien hypertexte qui ouvre la boîte
mail avec un nouveau message vide.
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.
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 :
1. src : cet attribut permet d'indiquer la source de l'image.
2. alt : cet attribut permet de donner à l'image une description alternative.
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 :
…avec un chemin absolu si l'image vient d'internet
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.
Regardez ce que ça donne dans le CodePen P1C6.
Lorsque vous utilisez cette technique, faites attention à ce que l'URL corresponde bien à
l'image uniquement, et pas à une page web qui contient une image. Pour vous en assurer, vous
pouvez faire un clic droit sur l'image de votre choix, et choisir "Copier l'adresse de l'image".
…ou avec un chemin relatif si l'image est en local sur votre ordinateur
C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et
l'arborescence du fichier de l'image en local pour indiquer sa source.
Si l'image est dans un sous-dossier nommé images, on précise :
src="images/[Link]"
É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.
Voici un exemple d'insertion d'image :
<p>
Voici une très belle photo que j'ai trouvée sur Unsplash :<br>
<img src="images/[Link]" alt="Photo de plage vue du dessus" />
</p>
Ah tiens c'est quoi ce alt là ?
Voilà qui nous fait une belle transition vers la suite de ce chapitre !
Ajoutez l'attribut alt pour donner à l'image une description
alternative
Donner une decription alternative à une image est une bonne pratique !
C'est-à-dire ? Je ne comprends pas ce que c'est une description alternative.
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 (cela arrive) ;
audio-décrit par les navigateurs de personnes présentant un handicap (trouble
de la vue, non-voyants).
Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web. En
plus, cela aide les robots des moteurs de recherche pour trouver des images.
D'ailleurs, j'en profite pour faire une petite parenthèse sur les formats d'image !
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 (vous pouvez en apprendre davantage
sur le SVG dans le cours "Codez un site web accessible avec HTML et CSS").
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
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 :
<img src="[Link]" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de
randonnée au milieu des montagnes">
Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle
"Alors, envie de vous balader n'est-ce pas ?" apparaître par dessus l'image.
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, 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 montagne_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.
Voici le code HTML qu’on peut utiliser pour cela :
<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>
<a href="images/[Link]"><img src="images/montagne_mini.jpg" alt="Chemin de
randonnée au milieu des montagnes" title="Cliquez pour agrandir" ></a>
</p>
Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique
autour de votre image cliquable. Nous pourrons retirer ce cadre dans peu de temps grâce au
CSS.