Donner forme à un site !

21.06.2014

Dans le chapitre précédant, je vous ai appris à créer une page web de base, et à écrire des paragraphes et même sauter des lignes !

Maintenant, nous allons voir comment mieux perfectionner notre page, car un site ne se compose pas seulement de paragraphe !

Dans les site, il y a généralament des titres pour les articles, les images...

Nous allons donc voir comment créer des titres !

La balise, ou devrais-je dire, les balises qui permettent de créer des titres sont des balises doubles:

<h1></h1>, pour les titre très très très important !
<h2></h2>, les titres un peu moins important
<h3></h3>, les titres encore moins important
<h4></h4>, les titres encore moins important
<h5></h5>, bon je pense que vous avez compris le principe
<h6></h6>, ce sont les balises pour les titres les moins important !

Ces balises ne se placent pas dans un paragraphe ! Elles se placent à les unes à la suite des autres ! On ne peut pas écrire :

<p><h1>Mon titre</h1></p>

Donc, les balises titres fonctionne comme ceci:

<h1>Ceci est un titre important !</h1>

<h2>Ceci est un titre un peu moins important !</h2>

<h3>Ceci est un titre très peu moins important !</h2>

<h4>Ceci est un titre très très peu moins important !</h2>

<h5>Ceci est un titre très très très peu moins important !</h2>

<h6>Ceci est le titre le moins important !</h2>

J'ai volontairement pas réecrit tous le code du début, car c'est assez lourd, mais vous savez qu'il faut mettre ce code entre les balise <body></body>

Vous savez maintenant comment créer des titres.

Vous avez d'ailleurs s'en doute remarquer que le navigateur affiche par défaut le titre <h1> très gros, en gras et en noir.

Mais moi, je veux que mon titre soit en rouge, encore plus gros, et au centre !

Il faudra attendre d'arriver au cours sur le CSS, désoler !

Attention ! Ne pensez pas que la balise h1 sert à mettre le texte en gros, grand et gras ! Il ne sert qu'a le mettre en valeur pour mieux référencer votre site et expliquer la structure de votre site à l'ordinateur !

Nous allons maintenant voir les balises <em></em> et <strong></strong>:

strong: les balises <strong> rendent le texte qu'il englobent important(mais moins important qu'un titre)
em: les balises <em> rendent le texte qu'il englobent important, mais moins important que les balises <strong>

C'est balise se place directement dans les balises de paragraphe <p></p>:

<p>Ceci est un paragraphe ! Ce mot est très <strong>important</strong> ! Ce mot est un peu moins <em>important</em> !</p>

Attention ! La même chose que pour les titres, les balises <strong> mettent par défaut le texte en gras et es balise <em> en italic, mais il ne faut pas les utiliser pour mettre du texte en gras ou en italic ! Beaucoup de débutants font cette erreur !

Avant de nous quitter, nous allons voir une notion fondamentale en HTML.

En effet, je ne vous ai pas tous dis sur les balises... Vous savez qu'il existe deux type d'écriture de balise:

Les balises double comme <p></p>
Les balises simple comme <meta />

Mais, les balises ont d'autre caractèristiques:

Les balises peuvent être de deux types différents:

De type block: c'est à dire qu'il se place les uns après les autres, comme les balises <p></p>, <h1></h1>, <head> </head> ou encore <body></body>
Ou de type inline: c'est à dire qu'il se place les uns à côtés des autres comme les balises : <em></em> et <strong></strong>.