2 HTML Organisez Votre Texte
2 HTML Organisez Votre Texte
2 HTML Organisez Votre Texte
Le texte affiché sur une page web est compris entre les balises <body> </body>.
C'est donc dans <body> </body> que nous allons écrire du texte à afficher en utilisant
des balises HTML pour le structurer grâce à des paragraphes, des titres, des listes ou
encore mettre en avant du texte important.
Créez des paragraphes avec les balises <p> </p>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
</head>
<body>
</body>
</html>
Oui, mais si je veux juste revenir à la ligne sans créer un paragraphe à chaque fois ?
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe, <br>dont le contenu est particulièrement
long.</p>
</body>
</html>
Maintenant que vous savez créer des paragraphes et sauter des lignes, voyons
comment créer des titres.
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.
Il faut toujours structurer sa page en commençant par un titre de niveau 1 <h1>, puis
structurer l'intérieur avec des titres de niveau 2<h2>, puis, si besoin de structurer
l'intérieur, utiliser des titres de niveau 3, etc. Il ne devrait pas y avoir de sous-titre
sans titre principal !
Ne confondez pas :
• La balise <h1> sert à créer un titre de niveau 1 qui sera affiché sur la page web.
• La balise <title>n'affiche rien sur la page web, elle affiche le titre de la
page dans l'onglet du navigateur.
Ajoutons donc des balises de titre dans le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<h3>Une sous-partie</h3>
<p>Un paragraphe</p>
</body>
</html>
Votre navigateur affiche par défaut des tailles différentes de texte en fonction des titres,
mais si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire cela
en CSS un peu plus tard.
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Groseilles</li>
</ul>
<h1>Ma journée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois de l'eau.</li>
</ol>
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 :
Une nuance tout de même : abuser de ces balises n’aura pas l’effet escompté sur votre
référencement. Si quasiment tout le texte est signalé comme étant important, rien en
particulier ne va vraiment pouvoir "ressortir"… Pensez-y !
À vous de jouer
La photographe Robbie Lens nous a demandé de lui faire un site web pour mettre en
avant son travail. Mais il va lui falloir également une page pour se présenter. Pour
l'occasion, nous avons donc ajouté du contenu dans le fichier index.html et créé une
nouvelle page :a-propos.html.
Vous allez :