Temps de lecture approximative : 14 minutes
La balise <body> est restée vide trop longtemps, il faut que nous la complétions au plus vite. Comme annoncé, nous avions envisagé au début du cours de réaliser un site web simple. Nous allons prendre comme exemple, un site personnel qui a pour objectif de se présenter.
Au cours de ce chapitre, nous allons enfin découvrir les balises HTML. Certaines de ces balises existent depuis les toutes premières versions, tandis que d'autres ont été introduites dans la dernière version. Au final, ça n'a que peu d'importance, c'est pour votre gouverne.
Au sein d'une page web, les titres hiérarchisant le contenu sont délimités par les balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Le <h?> fait référence à heading en anglais. C'est une balise normale, il y a donc une balise ouvrante et fermante. Ces balises ont deux principales vocations :
Il y a 6 niveaux de titres. La balise <h1> étant plus importante que la balise <h2> et ainsi de suite. Chaque page web peut contenir un ou plusieurs titres de <h1> à <h6>. Cependant, il est préférable pour des questions de référencement de n'utiliser qu'une seule balise <h1> par page. Il n'y a pas de restrictions sur les autres.
Attention, le titre <h1> ne doit pas être confondu avec la balise <title>. En effet, comme nous l'avons vu dans un précédent chapitre, la balise <title> affiche le titre de la page dans la barre de l'onglet de votre navigateur web. Tandis que le <h1> est le titre de premier niveau au sein du <body> de votre page. Cette balise s'affiche dans le corps de la page pour votre utilisateur.
La question pertinente qui suit cette explication est : est-ce que la balise <title> et la balise <h1> peuvent avoir le même contenu ? Dans le monde idéal du référencement, les deux contenus de ces balises doivent être différents. Ils sont similaires mais différents. Cependant, pour le moment, à notre niveau, nous allons placer le même contenu dans ces deux balises.
Dernier point au sujet de ces balises, il est de bon goût de les placer dans le bon ordre. Ce n'est pas une erreur de mettre un <h3> avant un <h1> mais c'est tout de même mieux de respecter l'ordre naturel et sémantique des balises.
Dans la majorité des cas, lorsque l'on écrit des blocs de texte dans une page web, on le fait à l'intérieur de la balise <p>. C'est également une balise normale. Elle permet de délimiter les paragraphes de son contenu. Il n'y a pas grande chose de plus à dire sur cette balise simple pour le moment. C'est le moment de faire un test.
See the Pen HTML - Chap.5 - <p> & <br> by AAymericcccc (@aaymeric) on CodePen.
Le contenu est purement fictif. Écrivez ce que vous souhaitez et commencez même votre premier site, si vous avez la motivation. Par contre, merci de ne pas me tenir rigueur de ce qui peut me passer par la tête. Je suis rigoureusement mon traitement.
Vous découvrez la mise en forme par défaut du HTML. Pour le moment, tout ce que vous écrivez aura la mise en forme par défaut du HTML dans le navigateur web. C'est particulièrement brut et moche. Comment améliorer ça ? La mise en forme du HTML se fait à l'aide d'un autre langage informatique : le CSS (Cascading Style Sheets). Ce sera l'objet d'un cours entier.
Sans l'aide du CSS, nous pouvons tout de même faire une mise en forme basique et découvrir d'autres balises HTML. La dernière sous-partie possède pour le moment deux paragraphes. Nous souhaitons en avoir qu'un seul, mais que le paragraphe possède une ligne distincte pour chaque phrase. Dans un logiciel de traitement de texte, vous auriez répondu à ce problème avec un ENTER ou SHIFT + ENTER, mais là, vous pouvez toujours essayer, ça ne fonctionnera pas.
Pour réaliser ce traitement, il faut utiliser la balise auto-fermante <br />. Cette balise permet de créer un saut de ligne (un retour chariot) dans le texte.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Roger, maître du HTML et dresseur de pokémon</title>
</head>
<body>
<h1>Roger, maître du HTML et dresseur de pokémon</h1>
<h2>Présentation</h2>
<p>Bonjour et bienvenue sur mon site. Je m'appelle Roger et je suis désormais un maître de niveau 99 en HTML.</p>
<h2>Mes pokémons</h2>
<p>Je collectionne les pokémons avec l'application Pokémon GO. C'est mon jeu préféré, j'adore.</p>
<h2>Mes autres passions</h2>
<p>
Après Pokémon GO, mon autre passion est le football. Je supporte l'équipe de Dunkerque et je rêve de voir mon équipe préférée écraser le PSG.<br />
Si je ne joue pas à Pokémon GO et que je ne regarde pas un match de football de Dunkerque, j'écoute du Céline Dion.
</p>
</body>
</html>
Rafraîchissez la page et appréciez le résultat. Le HTML, c'est magique.
Lorsque l'on utilise son navigateur web pour parcourir des pages web, il stocke des données sur votre machine pour éviter de les re-télécharger lors d'une prochaine visite, afin d'accélérer l'affichage de la page. Seulement, en tant que développeur, vous souhaitez obtenir la dernière version de votre page pour tester au plus vite. On parle donc de rafraîchir une page. Tous les navigateurs web le permettent. Il suffit généralement de faire la combinaison de touches suivante : CTRL + F5 ou Commande + R.
Au sein de vos paragraphes, certains mots ou expressions sont plus importants que d'autres. Dans un logiciel de traitement de texte, vous auriez sauté sur le gras ou l'italique. En HTML, c'est différent, on indique seulement l'importance de portions de texte. La mise en forme se fait avec le CSS. Ne perdez pas de vue que le HTML ne permet pas de mise en forme. Il propose différents moyens de mettre en valeur le texte. Nous nous focaliserons sur la balise normale <strong>. Elle est utilisée pour donner de l'importance à du texte et se traduit généralement par défaut dans les navigateurs par un affichage en gras.
See the Pen CodePen Home HTML - Chap.5 - <strong> by AAymericcccc (@aaymeric) on CodePen.
Les listes nous permettent au cours de notre rédaction de mieux structurer nos différents blocs de texte et d'ordonner des informations. Le HTML permet de reproduire des listes ordonnées ou non. En HTML, on parle de :
<ul><ol>Les éléments d'une liste sont délimités par la balise normale <li>.
<h2>Mes pokémons</h2>
<p>Je collectionne les pokémons avec l'application <strong>Pokémon GO</strong>. C'est mon jeu préféré, j'adore. Voici ma collection :</p>
<ul>
<li>Pikachu</li>
<li>Salamèche</li>
<li>Carapuce</li>
</ul><h2>Mes pokémons</h2>
<p>Je collectionne les pokémons avec l'application <strong>Pokémon GO</strong>. C'est mon jeu préféré, j'adore. Voici ma collection :</p>
<ol>
<li>Pikachu</li>
<li>Salamèche</li>
<li>Carapuce</li>
</ol>Les listes peuvent s'imbriquer pour former une liste ou arborescence complexe. Ci-après un exemple :
See the Pen CodePen Home HTML - Chap.5 - <ul> by AAymericcccc (@aaymeric) on CodePen.
<div> et <span>Les balises normales <div> et <span> sont utiles car elles ne représentent rien de particulier. Elles sont très utilisées pour appliquer des styles de mise en forme. Cependant, elles ont tout de même un comportement par défaut. Considérons pour le moment que la balise <span> s'utilise à l'intérieur d'un <div>, <p>, <h?> ou <li>, tandis que la balise <div> englobe toutes ces balises. Nous approfondirons leur comportement dans le cours sur le CSS. Ci-après un exemple.
See the Pen CodePen Home HTML - Chap.5 - <div> & <span> by AAymericcccc (@aaymeric) on CodePen.
C'est un nouveau chapitre dense qui se termine. Nous avons appris plein de nouvelles balises et à quoi allait nous servir le CSS. Au cours de ce nouveau chapitre, nous avons découvert un deuxième GIF de Jack Sparrow. Y-aura-t-il encore régulièrement dans les prochains cours des GIF de ce personnage ? Seule la lecture des prochains chapitres vous le dira. C'est quelque part une motivation supplémentaire. Le prochain chapitre nous permettra d'approfondir nos connaissances dans les balises du HTML.