2. Les principes de fonctionnement du HTML
L’organisation des fichiers et dossiers
Pour l’instant, votre dossier de travail doit ressembler à ceci dans votre explorateur de fichier :
En gros, il ne contient que la page “index.html”.
Dans les cours qui vont suivre, vous allez ajouter des images, et des liens relatifs à d’autres fichiers HTML.
Ce qu’il faut retenir avant d’aller plus loin, c’est que lorsque vous avez plusieurs pages HTML dans le même dossier, vous pouvez créer des liens entre elles en utilisant des liens relatifs.
Un lien relatif indique la position d’une page par rapport à la page sur laquelle vous vous situez.
Par exemple, si vous créez deux pages HTML (index.html et page1.html) dans le dossier “cours-html”, vous pouvez créer un lien de la page index.html vers la page page1.html en utilisant la balise <a> et un lien relatif :
<a href="page1.html">Lien vers la page 1</a>Pour comprendre, expérimentez :
- Créez une page “page1.html” qui contient exactement le même code que votre page index.html, et ajoutez simplement le code suivant entre les balises <body></body> (nous reviendrons là dessus plus tard) :
<h1>Hello, bienvenue sur la page 1 !</h1>Voilà à quoi doit ressembler votre fichier page1.html :
2. Dans votre fichier “index.html”, ajoutez ce bout de code entre les balises <body></body>
<a href="page1.html">Lien vers la page 1</a>Voilà à quoi doit ressembler votre fichier index.html :
3. Ouvrez votre fichier “index.html” en cliquant sur “Open with live server” : vous devriez voir une page html toute simple avec un lien unique, qui vous emmène sur le fichier page1.html lorsque vous cliquez sur le texte “Lien vers la page 1” (on appelle ce texte surligné en bleu une ancre de lien – terme qui a son importance en SEO).
Bravo, vous venez d’expérimenter ce qui fait la spécificité du HTML, et ce qui est à la base du web moderne : la possibilité de créer des liens entre 2 fichiers (hyper)textes.
Cela dit, pour l’instant, vous n’avez créé qu’un lien relatif. Relatif, car il est lié à un fichier présent sur le même ordinateur que le fichier d’origine. Il n’y a pas besoin de créer de chemin complexe pour y aller.
Le fichier “page1.html” étant juste à côté du fichier “index.html”, il suffit juste d’indiquer son nom dans l’attribut “href” de l’ancre <a>.
Que se passe-t-il lorsque vous créez un fichier – par exemple page2.html – dans un sous-dossier “pages” par exemple ?
Réponse : il suffit simplement d’ajouter le dossier dans l’attribut “href”, comme ceci :
<a href="pages/page2.html">Lien vers la page 2<</a>Essayez par vous même !
Pour rappel voici à quoi doit ressembler le contenu de votre dossier “cours-html” →
Il existe un autre type de lien : le lien dit “absolu”. Le lien “absolu” permet de désigner l’URL d’une ressource externe à l’ordinateur sur lequel se trouve votre fichier html.
Par exemple, si vous voulez faire un lien vers wikipedia, il faut d’abord vous rendre sur le site de Wikipedia, copier / coller l’URL qui vous intéresse, puis l’utiliser dans l’attribut href de votre balise <a>.
Exemple :
<a href="https://www.wikipedia.fr/">Lien vers Wikipedia</a>Cet exercice avait pour but de vous familiariser avec la notion de lien vers des ressources externes à la page sur laquelle vous travaillez, en relatif ou absolu.
La structure d’une balise html
La structure d’une balise HTML est composée du nom de la balise, des attributs et des valeurs.
- Le nom de la balise est le nom de l’élément que vous souhaitez spécifier dans votre page Web, tel que <p> pour un paragraphe ou <img> pour une image.
- Les attributs sont des propriétés qui sont appliquées à la balise et sont utilisées pour spécifier des informations supplémentaires sur l’élément. Les attributs sont placés à l’intérieur de la balise ouvrante et peuvent avoir une valeur qui leur est assignée.
- La valeur est utilisée pour spécifier la propriété de l’attribut.
Par exemple, la balise <a> est utilisée pour spécifier un lien hypertexte et peut avoir l’attribut href qui spécifie l’URL vers laquelle ce lien doit pointer.
La syntaxe de la balise avec l’attribut href est la suivante :
<a href= »https://www.example.com« >Mon lien</a>
Dans cet exemple, la valeur de l’attribut href est « https://www.example.com« , qui est l’URL vers laquelle le lien doit pointer.
Le texte « Mon lien » sera affiché comme le texte du lien sur la page Web, et deviendra donc cliquable.
NB : dans le jargon SEO, on appelle le texte présent entre les balise <a></a> une ancre de lien. Vous rencontrerez souvent ce terme si vous travaillez dans le domaine, retenez-le !
Un autre exemple est la balise <img>, qui est utilisée pour spécifier une image et peut avoir les attributs src et alt. La syntaxe de la balise avec les attributs src et alt est la suivante :
<img src= »mon-image.jpg » alt= »Ma description d’image« >
Dans cet exemple, la valeur de l’attribut src est « mon-image.jpg« , qui est l’emplacement de l’image.
La valeur de l’attribut alt est « Ma description d’image« , qui est le texte alternatif qui sera affiché si l’image ne peut pas être chargée.
NB : là encore, dans le domaine du SEO, le fameux attribut « alt » est réputé car il permet d’optimiser la visibilité des images dans les résultats de recherche. En réalité, sa vocation est surtout d’améliorer l’accessibilité de la page, permettant par exemple aux personnes malvoyantes d’avoir une description orale de son contenu.
Les 2 types de balises
Comme vous avez pu le constater, en html il existe 2 types de balises :
- Des balises ouvrantes et fermantes
- Des balises dites “orphelines”
Les balises ouvrantes / fermantes
Les balises ouvrantes / fermantes sont constituées d’une balise ouvrante et d’une balise de fermeture.
La balise ouvrante est indiquée par le signe inférieur suivi du nom de la balise et la balise de fermeture est indiquée par le signe inférieur suivi du nom de la balise précédé d’un slash (/).
Entre les balises ouvrantes et fermantes, on peut spécifier le contenu de la balise.
Par exemple, la balise <p> est une balise ouvrante / fermante qui spécifie un paragraphe de texte. La balise <p> ouvrante indique le début du paragraphe, et la balise de fermeture </p> indique la fin du paragraphe.
Exemple :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu sit amet augue eleifend efficitur. Quisque metus libero, eleifend vel egestas nec, suscipit vel mauris. Suspendisse ac placerat dui. Vivamus egestas quis nisi in pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu erat risus. Aliquam nec semper orci, ut consectetur nisl. </p>
Les balises orphelines
Les balises orphelines, par contre, ne possèdent pas de balise de fermeture et sont donc fermées par un slash (/) juste avant la fin de la balise ouvrante. Les balises orphelines sont utilisées pour spécifier des éléments qui ne contiennent pas de contenu.
Par exemple, la balise <img> est une balise orpheline qui spécifie une image. La balise <img> peut avoir des attributs tels que src (spécifiant l’emplacement de l’image) et alt (spécifiant le texte alternatif à afficher si l’image ne peut pas être chargée).
Exemple :
<img src=”dossier/nomdelimage.jpg” alt=”description de l’image” />
C’est tout pour l’instant : effacez vos fichiers, ne gardez que le fichier “index.html” mais en effaçant toutes ses lignes avant de suivre le prochain tutoriel !