3.Organisez votre texte avec HTML

Organisez votre texte avec HTML - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application

Ok, donc la page blanche est agréable et tout sauf que votre site Web n'aura probablement pas beaucoup de succès si vous laissez les choses telles qu'elles sont.

La première étape pour "remplir" votre site est de lui donner du contenu. Le moyen le plus simple et le plus courant consiste à écrire du texte à l'intérieur de la balise <body> dont nous avons parlé au chapitre précédent.

Nous verrons que faire en sorte que votre page HTML affiche du contenu textuel est en fait très simple car le HTML vous permet d'arranger n'importe quel type de texte que vous pouvez imaginer.

Dans ce chapitre, vous apprendrez :

comment structurer votre texte en paragraphes
comment organiser votre page avec différents titres
comment souligner et surligner certains mots
comment insérer différents types de listes

Commençons à construire notre site Web.

Paragraphes

Vous souhaitez ajouter du texte à votre page web mais vous ne savez pas comment faire ?

En HTML, les choses sont plutôt simples : le contenu du texte est placé dans des paragraphes. Les paragraphes sont délimités par la balise <p> (p pour paragraphe).

<p>Ceci est mon paragraphe.</p>

Comme vous pouvez le voir, <p> est une balise appariée.

<p> indique le début du paragraphe
</p> marque la fin du paragraphe

Les paragraphes vont dans la section <body> de votre page HTML, qui comme nous l'avons appris au dernier chapitre est réservée aux éléments visibles destinés à être rendus (par opposition aux invisibles qui vont dans le <head>).

Il ne reste plus qu'à reprendre le code de notre page de démonstration et à ajouter un paragraphe.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>
    <body>
        <p>Bienvenue à SAGProfProg</p>
    </body>
</html>

Essayez-le et voyez le résultat par vous-même.

N'hésitez pas à modifier le texte comme vous le souhaitez. Vous pouvez même ajouter un autre paragraphe à la suite du premier, il n'y a pas de limite quant à leur nombre dans une page HTML.

En fait, essayons.

Copiez et collez le code suivant dans votre éditeur de texte.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>
    <body>
        <p>Ceci est mon premier paragraphe.</p>
        <p>Ceci est mon second paragraphe.
	Lisez le bien!</p>
    </body>
</html>

Ce n'est pas de la poésie homérique, mais c'est quand même assez bon.

Mais... dans le deuxième paragraphe, il est censé aller sur une nouvelle ligne... à la place, tout est sur la même ligne ! Ça ne marche pas !

Je vois ce que tu veux dire.

Vous vous attendiez probablement à voir quelque chose dans la mesure où : <CAPTURE> A la place tu as :

C'est parfaitement normal.

Nous devons dire au navigateur que nous voulons une nouvelle ligne. En HTML, les sauts de ligne fonctionnent un peu différemment de ce à quoi vous êtes habitué.

Les sauts de ligne en HTML

Si vous avez couramment utilisé des traitements de texte tels que Microsoft Word dans le passé, vous êtes déjà familiarisé avec les sauts de ligne.

Un saut de ligne, également appelé retour chariot, est simplement une indication pour commencer une nouvelle ligne. Ce n'est pas aussi prononcé qu'un paragraphe, il marque simplement la fin d'une ligne et le début d'une nouvelle. Dans la plupart des traitements de texte, pour créer une nouvelle ligne, appuyez simplement sur la touche Entrée. Évidemment, les choses ne sont pas aussi simples en HTML que vous venez de le découvrir. Pour marquer un saut de ligne en HTML, il vous suffit d'utiliser la balise <br />. C'est une balise autonome, ce qui signifie qu'il n'y a pas de balise de fermeture et qu'elle ne contient aucun contenu. Revenons à notre exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAGProfProg</title>
    </head>
    <body>
         <p>Ceci est mon premier paragraphe.</p>
         <p>Ceci est mon second paragraphe. <br/>
	Lisez le bien!</p>
    </body>
</html>

Maintenant tout fonctionne parfaitement.

Entendu?

Les balises <p> et </p> sont pour les paragraphes.
la balise <br /> est pour les sauts de ligne.

Puisque nous avons enfin réussi à faire fonctionner nos paragraphes comme nous le voulions, ajoutons quelques titres.

Titres

Une fois que nous commençons à ajouter plus de contenu à notre page Web, les choses peuvent devenir un peu difficiles à lire.

Les titres sont utiles pour organiser votre texte en segments distincts. N'ayez pas peur du nombre, toutes ces balises suivent les mêmes règles et en fait elles peuvent être regroupées dans une grande supra-balise : <hX>, où X est un nombre compris entre 1 et 6. Pourquoi six balises ? Ils sont utilisés pour indiquer le niveau d'importance d'un titre. Voici comment ils fonctionnent :

<h1> signifie "titre très important". Habituellement, il n'y en a qu'un par page bien que ce ne soit qu'une convention.
<h2> signifie "titre important".
<h3> signifie "titre quelque peu important".
<h4> signifie "titre quelque peu moindre".
<h5> signifie "titre moindre".
<h6> signifie "titre le moins important".

Vous n'avez pas besoin d'utiliser chaque niveau de titre sur chaque page Web.

Je vous recommande de commencer par <h1>. Ensuite, si vous avez besoin de faire un sous-titre, utilisez une ou plusieurs balises <h2>. Si vous avez besoin de sous-sous-titres, utilisez <h3> et ainsi de suite. Mais je pensais que nous avions déjà une balise de titre en HTML. Vrai. Au dernier chapitre, nous avons introduit la balise <title>, qui va dans la partie <head> de votre code. Ces balises sont en fait appelées en-têtes (h pour en-tête). Vous avez également dit qu'il y avait déjà une balise d'en-tête ! Écoutez, je n'ai pas inventé ces noms. Ne confondez pas les éléments suivants :

<head> est la balise d'en-tête, par opposition à la balise body (<body>). Ces deux vont dans la balise <html>.
<title> est le titre de votre page web, il va dans l'en-tête (<head>, voir ci-dessus).
<h1> à <h6> sont appelés comme vous voulez. Certains les appellent des titres, d'autres des en-têtes, certains les appellent même des balises "h". Ils vont dans le corps (<body>) de votre page Web.

La nomenclature n'est pas si importante.

Ce qui est essentiel, c'est de ne pas les confondre et de commencer à utiliser l'un à la place de l'autre.

Essayons d'ajouter ces balises à notre page de démonstration.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>
    <body>
    	<h1>Bienvenue à SAGProfProg</h1>
        <p>Le meilleur site de cours en ligne.</p>
        <h2>Tutoriels gratuits pour les débutants</h2>
        <p>C'est mon deuxième paragraphe.</p>
        <p>(ok je suis à court d'idées... essayez de faire mieux)</p>
    </body>
</html>

Voici à quoi les choses devraient ressembler dans votre éditeur de texte.

Essayez-le

Maintenant, nous avons quelque chose qui commence à ressembler à une vraie page web.

Vous avez peut-être remarqué que le rendu des balises <h1> dans le navigateur est plus grand que celui des balises <h2>, qui à leur tour sont plus grandes que les <h3> et ainsi de suite. Ne choisissez pas vos balises de titre en fonction de la taille du texte rendu. Ces balises de titre sont importantes pour la structure hiérarchique, l'affichage esthétique est secondaire et peut être modifié à l'aide de CSS (nous verrons comment plus loin dans ce tutoriel). Il est tout à fait possible de rendre les titres <h3> plus grands que les <h1> en CSS, mais l'ordre d'importance ne peut pas être modifié.

Points forts

Nous avons vu comment structurer notre page Web en paragraphes et l'organiser à l'aide de titres.

Mais qu'en est-il de mettre l'accent sur certains mots ou phrases dans un paragraphe ?

Le langage HTML vous offre de nombreuses façons de mettre en évidence des parties de votre texte.

Accent

Mettre l'accent sur votre texte est très facile à faire en HTML.

Tout ce dont vous avez besoin est d'inclure le texte sur lequel vous souhaitez mettre l'accent à l'intérieur de la balise d'emphase : <em>.

Voici un exemple du fonctionnement de l'emphase :

<p>Bienvenue à <em>SAGProfProg</em>,

le meilleur site web de tous les temps !</p>

Et le résultat :

Comme vous pouvez le voir, le texte souligné est maintenant écrit en italique.

C'est simplement quelque chose que le navigateur fait pour faire ressortir le texte. Vous pourrez le modifier ultérieurement à l'aide de CSS.

Fort accent

La balise d'emphase est trop faible à votre goût ? Vous voulez quelque chose de vraiment brutal ?

Bon pour vous, il existe une autre balise pour indiquer l'emphase sur votre texte appelée la balise d'emphase forte.

Tout comme avec une emphase régulière, tout ce dont vous avez besoin est d'encadrer votre texte sélectionné dans la balise d'emphase forte : <strong>.

Voici notre exemple :

<p>Bienvenue à <strong>SAGProfProg</strong>,

le meilleur site web de tous les temps !</p>

Et le résultat :

Une fois de plus, vous pouvez voir que le navigateur a pris la liberté de rendre votre texte souligné en gras pour le faire ressortir.

C'est un comportement par défaut facilement modifiable en CSS.

Y a-t-il une différence entre l'emphase avec la balise <em> et l'emphase forte avec la balise <strong> ?

Honnêtement non.

Ils sont complètement interchangeables et servent exactement le même but.

Alors que la position officielle est que l'un est une emphase "forte" et l'autre une emphase "régulière", apparemment personne n'a pris le temps de définir ce que signifient l'un ou l'autre de ces deux adjectifs.

Utilisez celui que vous voulez, ou les deux.

Marquer les faits saillants

Il existe une troisième façon de surligner du texte en HTML.

La balise de texte marquée est utilisée pour faire ressortir un extrait du reste de votre texte. Il peut être utilisé pour mettre en surbrillance un texte pertinent dans une liste de résultats de recherche par exemple.

Son application est identique aux deux balises précédentes, n'oubliez pas d'utiliser la balise texte marquée : <mark>.

Par exemple:

<p>Bienvenue à <mark>SAGProfProg</mark>, 
le meilleur site web de tous les temps !</p>

Et le résultat :

Par défaut, le texte est surligné en jaune.

Ceci est encore une fois complètement réglable, alors ne vous inquiétez pas trop des effets visuels.

Balises rares mais parfois utiles

Il y a quelques balises supplémentaires que vous n'utiliserez pas très souvent, c'est le moins qu'on puisse dire, mais cela pourrait s'avérer pratique à un moment ou à un autre. Peut-être.

Vous n'avez pas à vous en souvenir, considérez simplement cette section comme un bonus.

Texte inséré : utilisez la balise <ins> (donne le texte inséré par défaut).
Texte supprimé : utilisez la balise <del> (donne le texte supprimé par défaut).
Saisie au clavier : utilisez la balise <kbd> (donne la saisie au clavier par défaut).
Citations : utilisez la balise <q> (donne des citations par défaut).
Code : utilisez la balise <code> (donne le code par défaut).
Exposant : utilisez la balise <sup> (donne un exposant par défaut).
Indice : utilisez la balise <sub> (donne l'indice par défaut).
Petits caractères : utilisez la balise <small> (donne petit par défaut).

Bonne chance pour trouver une utilisation pour chacun d'eux.

HTML pour le contenu, CSS pour le style

Il convient de répéter que <strong>, <em> et <mark> ne sont pas des balises de formatage.

Beaucoup de débutants voient ces balises et se disent : "Génial ! Maintenant je sais mettre en gras, mettre en italique et marquer mon texte en HTML". Il s'agit d'une erreur courante, commise par les débutants et les développeurs Web de longue date.

Chaque balise HTML a une signification au-delà de son apparence cosmétique. En fait, HTML n'est pas du tout utilisé pour l'apparence.

Si vous voulez du gras, de l'italique, du souligné, du surlignage (oui, c'est un truc), du texte rose clignotant ou tout ce que vous pouvez imaginer, attendez que nous apprenions le CSS.

Vous pouvez même mettre la balise <em> en gras et la balise <strong> en italique si vous le souhaitez.

La règle d'or du développement web est la suivante : HTML pour le contenu, CSS pour le style.

Liste des balises

Vous pensiez que ce chapitre était terminé ?

Détrompez-vous, nous avons encore un constituant HTML à couvrir : l'élément de liste.

Les listes HTML sont très courantes et extrêmement pratiques lorsqu'il s'agit d'organiser les informations de manière lisible.

Je vais présenter deux types de listes :

listes à puces, également appelées listes non ordonnées
listes numérotées, également appelées listes ordonnées

Nous commencerons par des listes à puces, l'occurrence la plus courante.

Listes à puces

Vous avez probablement déjà vu de nombreuses listes à puces, notamment dans ce chapitre.

Voici à quoi ressemblent les listes à puces :

C'est un système pratique car il permet de créer une liste d'éléments absents par ordre hiérarchique, contrairement à la liste numérotée que nous présenterons plus loin.

Ces listes sont très faciles à créer en HTML, le seul point dont vous devez vous souvenir est que vous avez besoin de deux balises HTML pour créer une telle liste.

Pourquoi deux ? Vous comprendrez dans un instant.

Lorsque nous visualisons une liste, nous pensons à un élément unique.

Au lieu de cela, considérez qu'il y a deux composants dans une liste : la liste elle-même et chaque élément individuel.

En HTML, vous devez indiquer au navigateur où commence et se termine la liste ainsi que où chaque puce commence et se termine.

Voici donc les deux balises dont vous avez besoin :

<ul> indique où la liste commence et se termine (signifie une liste non ordonnée)
<li> indique où chaque élément commence et se termine (pour List Item)

Les balises <li> sont naturellement placées à l'intérieur de la balise <ul>.

Voici le code HTML de l'exemple que j'ai donné ci-dessus.

<ul>
    <li>Bienvenue</li>
    <li>à</li>
    <li>SAGProfProg</li>
</ul>

Vous pouvez ajouter autant d'éléments que vous le souhaitez.

Vous pouvez même créer des listes à puces dans d'autres listes à puces. Celles-ci sont appelées listes imbriquées.

Il suffit d'ouvrir une nouvelle liste (avec <ul>) au sein d'un élément de la première liste (<li>).

Voici une démonstration.

<ul>
    <li>SAGProfProg</li>
    <li>est
        <ul>
            <li>génial</li>
            <li>un site web</li>
            <li>Exceptionnel</li>
        </ul>
    </li>
</ul>

Ce code vous donne :

N'oubliez pas de fermer les balises dans le bon ordre.

Chaque élément HTML a une valeur d'affichage par défaut, la plupart du temps en bloc ou en ligne. À l'exception notable de la balise <p> (pour les paragraphes), chaque balise que nous avons vue jusqu'à présent est un élément en ligne. La balise <ul> (pour les listes non ordonnées) est cependant un élément de bloc. En résumé, un élément de bloc commence sur une nouvelle ligne et occupe toujours toute la largeur disponible, alors qu'un élément en ligne ne nécessite pas de nouvelle ligne et n'occupe que la largeur nécessaire. Étant donné que <p> et <ul> sont tous deux des éléments de bloc, vous n'avez pas besoin d'inclure vos listes à l'intérieur des paragraphes.

Listes numérotées

Le second type de liste que nous allons découvrir est la liste numérotée.

Bien qu'un peu moins répandues que les listes à puces, elles sont néanmoins assez souvent utilisées dans les pages HTML.

Voilà à quoi ils ressemblent:

Les listes numérotées fonctionnent exactement de la même manière que les listes à puces.

La seule différence est que vous devez indiquer dans votre code que vous souhaitez une liste ordonnée (<ol>) plutôt qu'une liste non ordonnée (<ul>).

Rien ne change dans la liste : nous utilisons toujours <li> pour délimiter le début et la fin d'un élément.

L'ordre dans lequel vous placez vos articles est important. La première entrée correspondra à l'élément numéro un, la seconde à l'élément numéro deux et ainsi de suite.

Voici le code de notre exemple :

<ol>
    <li>Welcome</li>
    <li>to</li>
    <li>SiteRaw</li>
</ol>

Comme vous pouvez le voir, la seule différence entre la liste à puces et la liste numérotée est la balise HTML utilisée pour les insérer.

<ul> est pour les listes à puces (liste non ordonnée)
<ol> est pour les listes numérotées (liste ordonnée)
<li> est pour chaque entrée, indépendamment du type de liste utilisé (List Item)

Maintenant que vous savez comment créer des paragraphes, insérer des sauts de ligne, incorporer des titres, ajouter des surlignages et manipuler des listes, essayons de mettre à jour notre page de démonstration avec nos nouvelles connaissances.

Voici notre code HTML complet.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAGProfProg</title>
    </head>
    <body>
    	<h1>Bienvenue à SAGProfProg</h1>
        <p>Le meilleur<strong>site</strong> de formation en ligne.</p>
        <h2>Pourquoi SAGProfProg est-il si génial ?</h2>
        <p>Voici quelques raisons :</p>
        <ul>
    		<li>parce que c'est SiteRaw</li>
   		<li>parce que c'est génial</li>
    		<li>parce que des raisons</li>
	</ul>
    </body>
</html>

Ceci n'est que ma démonstration, vous pouvez bien sûr utiliser les tags que vous voulez parmi ceux que nous venons d'apprendre.

Et n'hésitez pas à modifier le texte absurde pour le rendre plus pertinent pour votre site Web.

Comme vous pouvez le voir, les balises de liste sont placées avant, entre ou après les paragraphes, pas à l'intérieur. Cela a à voir avec le comportement d'affichage par défaut de <p> et <ul>/<ol>, tous deux derrière les éléments de bloc par opposition aux éléments en ligne tels que <strong>.

Ce chapitre a couvert un grand nombre de nouvelles balises HTML et votre page Web devrait maintenant commencer à prendre forme.

Mais ce n'est pas encore un vrai site Web car il manque encore quelque chose.

Continuez à lire et nous découvrirons quoi dans le prochain chapitre.

3.Organisez votre texte avec HTML

Paragraphes

Les sauts de ligne en HTML

Titres

Points forts

Accent

Fort accent

Marquer les faits saillants

Balises rares mais parfois utiles

HTML pour le contenu, CSS pour le style

Liste des balises

Listes à puces

Listes numérotées

Aucun commentaire

DEVELOPPEMENT WEB

Ingénierie Logicielle

LANGAGE C

Tags

Ingénierie Logicielle

JAVA

LANGAGE C

HTML CSS