InfoProGraphie Simple > Cours > Créer un site web > Découvrez le xHTML et créer votre première page web > Structuration de la page web

C) Structuration de la page web

Comme nous l'avons vu dans le chapitre précédent, le xHTML est un langage fonctionnant avec des balises, chaque balise a une signification et de l'importance, on a vu par exemple que pour écrire du texte il fallait écrire entre les balises <p></p> qui indique que le texte correspond à un paragraphe. On va donc continuer notre apprentissage avec de nouvelles balises qui permettent de mettre en valeur le contenu de notre page web;).

1)1,2,3,4,5,6 titres différents !

Qu'est-ce qu'un titre concrètement ? siffle

Un titre est un intitulé qui indique le contenu du texte qui le suit, cet intitulé a de l'importance dans ce texte, puisqu'il donne dors et déjà une idée au lecteur sur le texte qui suit, avant même de le lire, c'est pourquoi un titre est souvent écrit dans un plus grand format, en gras et est souligné. Parfois nous avons plusieurs titres dans un document, par exemple dans un site on peut avoir:

Exemple de page web:


Les News

News 1: Un nouveau départ

blablabla

News 2: Un objet pas comme les autres

blablabla

Comme vous le voyez nous avons plusieurs titres, des titres d'importances variantes;). Et oui, le titre "Les News" renseigne sur tout le contenu (la page va présenter les nouvelles), tandis que les titres "News 1: Un nouveau départ" et "News 2: Un objet pas comme les autres" ne renseigne que sur une partie du contenu (une news chacun), donc le titre "Les News" est plus important que les deux autres titres.
"De toute façon ça se voit à l'œil nu que le premier titre est plus important que les autres, il est écrit en plus gros"
Oui et non, je vous dirais :p, c'est vrai qu'on s'arrange souvent pour que l'élément le plus important soit plus voyant, mais en xHTML, on va voir qu'il ne s'agit pas décrire le texte en plus gros, gras, souligné... à l'aide du CSS (le langage pour donner de la forme à notre page web), mais qu'il existe au total 6 balises pour 6 niveaux d'importances différentes de titre:

Je ne vous donne pas le code xHTML entier de la page xHTMl, mais seulement la partie comprise entre les balises <body></body>


Code:

<h1>Titre très très important</h1>
<h2>Titre très important</h2>
<h3>Titre important</h3>
<h4>Titre assez important</h4>
<h5>Titre moins important</h5>
<h6>Titre moins moins important</h6>

Tester ce code

Vous avez donc l'embarras du choix, cependant rappelez vous que ces balises donnent de la signification au texte et ne sont pas là que pour le côté visuel.

Les balises de titre ne doivent pas être utilisées entre les balises <p></p> et vice versa, tout simplement parce qu'un titre ne peut pas se trouver au beau milieu d'un paragraphe, et qu'un titre ne peut pas contenir un paragraphe, c'est assez logique :p.

2)Ce passage est important, celui là aussi..

Nous avons vu comment différencier les titres des paragraphes, maintenant voyons voir comment faire ressortir un passage d'un texte, pour souligner son importance;). Pour ce faire nous avons deux balises ouvrantes/fermantes d'intensité différente, la première <em></em>, d'importance plus faible, met le passage situé entre ces balises en italique, la deuxième <strong></strong>, met le passage en gras (ou souligné cela dépend des navigateurs web).

Code:

<p>Aujourd'hui est un jour <em>spécial</em>, c'est le jour où je vais enfin pouvoir donner <strong>plus de sens</strong> aux textes de mes pages web </p>

Tester ce code

Ces balises sont dites inline, elles doivent être utilisées entre des balises dites block comme <p></p> ou encore <h3></h3>. La grande différence entre ces deux types de balises et que l'une ne provoque pas de retour automatique à la ligne (inline) et que l'autre oui (block). Si on imagine tout ça, on peut voir les balises de type block comme des boites qui peuvent contenir des balises de type inline ("entre les lignes"). Cette notion sera vu plus loin dans le cours, c'est une notion importante du xHTML.

Comme nous l'avons dit pour les balises titres, ici les balises <em></em> et <strong></strong> ne servent pas à mettre un texte en italique ou en gras, elles servent à mettre en valeur le texte, leur donner plus de sens, on parle de balise de structuration de document (côté sens) et non de balise de formatage (côté décoratif).

3)...et voici d\'autres balises moins utilisées

Ne nous arrêtons pas en si bon chemin, et voyons quelques balises moins utilisées, mais que vous pourrez peut-être avoir besoin par la suite;).


Les citations

Nous avons tout d'abord des balises pour les citations, nous avons en fait deux balises:


  • l'une est de type inline : <q></q>, elle s'utilise pour de petites citations au sein d'un paragraphe.

  • l'autre est de type block : <blockquote></blockquote>, elle s'utilise pour de grande citation, situé hors paragraphe.


Code:

<p>Comme l'a dit Corneille au sujet d'un sentiment qui est à l'origine de nombreuses discordes : <q>La jalousie aveugle un coeur atteint, et sans examiner, croit tout ce qu'elle craint.</q>
</p>

<h5>La Poule aux oeufs d'or de La Fontaine</h5>

<blockquote>
L'avarice perd tout en voulant tout gagner.<br />
Je ne veux, pour le témoigner,<br />
Que celui dont la Poule, à ce que dit la Fable,<br />
Pondait tous les jours un oeuf d'or.<br />
Il crut que dans son corps elle avait un trésor.<br />
Il la tua, l'ouvrit, et la trouva semblable<br />
A celles dont les oeufs ne lui rapportaient rien,<br />
S'étant lui-même ôté le plus beau de son bien.<br />
Belle leçon pour les gens chiches :<br />
Pendant ces derniers temps, combien en a-t-on vus<br />
Qui du soir au matin sont pauvres devenus<br />
Pour vouloir trop tôt être riches ?<br />
</blockquote>

Tester ce code

Mettre en indice ou en exposant

C'est très simple il existe deux balises inlines:

  • <sup></sup> pour mettre en exposant (en haut en petit, pour les abréviation par exemple "ème")

  • <sub></sub> pour mettre en indice (en bas en petit, pour les formule mathématique souvent)


Code:

<p>
C'est au XX<sup>ème</sup> siècle que le premier ordinateur est apparu.
</p>

<p>
Voici la formule générale d'une suite arithmétique : U<sub>n+1</sub> = U<sub>n</sub>+ r
</p>

Tester ce code


Les acronymes

Les acronymes sont des mots formés d'initiales de plusieurs mots. Par exemple OVNI pour Objet Volant Non Identifié, ou encore IPGS pour InfoProGraphie Simple :p.
Pour indiquer qu'un mot est un acronyme et écrire le mot en entier lorsqu'on survole l'acronyme, il faut utiliser la balise <acronym ></acronym> avec l'attribut title pour indiquer le mot en entier.

Code:

<p>
Un <acronym title="Objet Volant Non Identifié">OVNI</acronym> est un phénomène aérien particulier non identifiable, dont on ne peut expliquer ni l'origine ou ni la nature.
</p>

Tester ce code


Les séparateurs

Pour finir nous voir une balise très utile, il s'agit d'un séparateur, une ligne, un trait (c'est comme vous voulez :p), qui va séparer le contenu du haut à celui du bas. Non seulement ça donne un côté esthétique, mais il faut bien se mettre en tête que ça permet de donner une nouvelle du sens au document, puisqu'il marque un changement d'idée, de contenu.
Cette fameuse balise est <hr/>:

Code:

<h5>TheGimp</h5>
<p>
TheGimp est un logiciel de retouche d'image, gratuit et libre, qui permet par exemple de créer des bannières, des avatars, de corriger des photos (yeux rouges, contrastes...), de dessiner, de coloriser un dessin... En somme, il s'agit d'un logiciel indispensable pour les amateurs comme pour les pros.
</p>

<hr/>

<h5>Louis XIV</h5>
<p>
Louis XIV,"Le Roi Soleil" né le 16 mai 1643 et mort le 1er septembre 1715, a été le roi de France durant cette période. Son règne laisse le souvenir d'une France rayonnante à l'image du château de Versailles...
</p>

Tester ce code

Voilà nous avons fait un tour des balises qui nous seront les plus utiles en ce qui concerne la structuration de nos pages, bien sûr sachez qu'il existe encore beaucoup de balises, d'autres que l'on verra par le suite, et d'autres que vous découvrirez vous même sur la toile, à travers différents tutoriels;).

A retenir

Comme d'habitude la rubrique "A retenir", pour citer les gros points de ce chapitre:


  • Les titres: 6 balises balises de type block:
    <h1></h1>, <h2></h2>, ... , <h6></h6> d'importance décroissante.

  • Mise en valeur du texte: deux balises de type inline:
    <em></em> d'importance moindre (en italique) et <strong></strong> d'importance plus élevée (en gras).

  • Les citations: deux balises, l'une de type inline pour de petite citation <q></q> et l'autre de type block pour les grande citation <blockquote></blockquote>.

  • Mise en indice ou en exposant: deux balises de type inline:
    <sup></sup> pour mettre en exposant, et <sub></sub> pour mettre en indice.

  • Les acronymes: une balise de type inline, qui peut fonctionner avec l'attribut title pour indiquer le mot complet au survol de l'acronyme:
    <acronym title="Mot Complet"></acronym>.

  • Les séparateurs: une balise de type block:
    <hr/>.

Notion importante abordée rapidement: Il existe deux type de balise, inline et block. La grande différence entre ces deux types de balises est que l'une ne provoque pas de retour automatique à la ligne (inline) et que l'autre oui (block). Si on imagine tout ça, on peut voir les balises de type block comme des boites qui peuvent contenir des balises de type inline ("entre les lignes"). Cette notion sera vu plus loin dans le cours, c'est une notion importante du xHTML.

precedentSOMMAIRE

Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.