Créez votre première page web en HTML
En résumé
On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…) pour créer un
fichier ayant l'extension .html (par exemple : test.html ). Ce sera notre page web.
Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-
clic dessus.
À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises
HTML.
Les balises peuvent avoir plusieurs formes :
o <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu
(début et fin d'un titre, par exemple) ;
o <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire),
elles permettent d'insérer un élément à un endroit précis (par exemple une
image).
Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple : <image nom="photo.jpg" /> ).
Une page web est constituée de deux sections principales : un en-tête ( <head> ) et un
corps ( <body> ).
On peut afficher le code source de n'importe quelle page web en faisant un clic droit
puis en sélectionnant Afficher le code source de la page
Organisez votre texte
En résumé
Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de
notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », «
Ceci est un titre », etc.
Les paragraphes sont définis par la balise <p> </p> , et les sauts de ligne par la
balise <br /> .
Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6> , à utiliser selon
l'importance du titre.
On peut mettre en valeur certains mots avec les balises <strong>(mettre en gras)
, <em>(mettre en italique) et <mark> (mettre en surligne) .
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée)
ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li>
pour chaque item.
En résumé
Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.
Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer
l'adresse de la page cible. Exemple : <a href="https://openclassrooms.com"> .
On peut faire un lien vers une autre page de son site, simplement en écrivant le nom
du fichier : <a href="page2.html"> .
Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut
créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire
un lien vers l'ancre comme ceci : <a href="#ancre"> .
Cas pratiques d'utilisation des liens
Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des liens. Par exemple, saviez-
vous qu'il est très facile de faire des liens qui lancent un téléchargement ? Qui créent un nouvel e-
mail ? Qui ouvrent une nouvelle fenêtre ?
Non ? Eh bien nous allons voir tout cela ici.
Un lien qui affiche une infobulle au survol
Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet
attribut est facultatif.
Vous aurez un résultat ressemblant à la figure suivante.
Une infobulle
La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le
lien.
Voici comment reproduire ce résultat :
<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com"
title="Vous ne le regretterez pas !">OpenClassrooms</a> ?</p>
Un lien qui ouvre une nouvelle fenêtre
Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on
rajoutera target="_blank" à la balise <a> :
<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com"
title="Vous ne le regretterez pas !" target="_blank">OpenClassrooms</a> ?
</p>
Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou un
nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un
nouvel onglet.
Notez cependant qu'il est déconseillé d'abuser de cette technique, car elle perturbe la
navigation. Le visiteur lui-même peut décider s'il veut ouvrir le lien dans une nouvelle fenêtre.
Il fera Maj + Clic sur le lien pour ouvrir dans une nouvelle fenêtre ou Ctrl + Clic pour ouvrir
dans un nouvel onglet.
Un lien pour envoyer un e-mail
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="mailto:[email protected]">Envoyez-moi 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.
Un lien pour télécharger un fichier
Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier…
En fait, 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.
Par exemple, supposez que vous vouliez faire télécharger monfichier.zip . Placez simplement ce
fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce
fichier :
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
C'est tout ! 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
Insérez des images
En résumé
Il existe plusieurs formats d'images adaptées au Web :
o JPEG : pour les photos ;
o PNG : pour toutes les autres illustrations ;
o GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être
animé.
On insère une image avec la balise <img /> . Elle doit obligatoirement comporter au
moins ces deux attributs : src (nom de l'image) et alt (courte description de
l'image).
Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la
placer au sein d'une balise <figure> . La balise <figcaption> permet d'écrire la
légende de l'image.
