Tout pour ton blog

La page blanche, c'est bien, mais votre site ne sera pas très populaire ... :p
Nous allons donc voir comment :
- comment rédiger des paragraphes
- comment fonctionnent les titres
- comment donner de l'importance à des mots
- et quelques balises rares mais utiles

Les paragraphes

En XHTML, pour écrire du text, c'est assez simple : on rédige des pararaphes.
Chaque paragraphes est entouré des balises <p> et </p>.
Exemple :

<p>Bienvenue sur mon super site !
C'est ma première page web, soyez indulgents ;)
Elle sera bientôt remplie, vous allez être surpris !</p>

<p> : début du paragraphe
</p> : fin du paragraphe

Comme on écrit le contenue de notre page dans les balises <body> et </body>, il suffit de mettre les paragraphes entre ces balises, et nous aurons notre première page avec du text ^^
Allez y, amusez vous à paragrapher autant que vous voulez, même si c'est pas super mais bon, ça va venir ;)

Sauter des lignes

Dans votre code, si vous appuyer sur la touche "entrée", ça ne va pas créer une nouvelle ligne.
Essayez, vous verrez !
Taper sans arrêt sur "entrée" ne changera strictement rien :p ^^

Si vous voulez faire un deuxième paragraphe, il vous suffit de mettre encore une fois <p> </p>.

Mais si vous voulez juste aller à la ligne et non faire un autre paragraphe ?
He ben, devinez, il existe une balise "sauter à la ligne" !!!
C'est une balise seule qui indique de sauter une ligne : <br/> .
Attention, elle doit obligatoirement être entre les balises <p> et </p> !

Les titres

Vous savez créer des paragraphes et aller à la ligne, mais faire des titres ???
En XHTML, on est vernis : on a 6 tailles de titres différents :

<h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.
<h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez)
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment pas important du tout.

ATTENTION : Il ne faut pas confondre avec la balise <title> ! La balise <title> permet d'afficher le titre de la page en haut du naviguateur, les <h1> et compagnie servent à créer des titres qui seront sur la page web.

J'ai rarement besoin de 6 niveaux de titres diff"rents, j'utilise le plus souvent <h1>, <h2> et <h3>.
Essayez donc ce code, pour voir :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>

<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>

Et voila ! vous savez faire des titres, amusez vous bien à tout essayer !
Mais si vous voulez mettre votre titre en bleu roi clignotant, souligné et en gras ? Eh bien il faudra attendre de savoir faire du css, car avec o pourrat faire tout ça, et même bien plus !
Alors, envie de continuer ?! ^^

Mettre en valeur le text

Un peu en valeur :

Pour mettre un peu en valeur le text, on utilise <em> </em>. Comment ? Très simplement ! On entour le text à mettre en valeur par <em> et </em> et voila !

Essayez, vous verrez que les mots entourés sont en italique.

Bien en valeur :

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort", ou "important" si vous préférez. Elle s'utilise exactement de la même manière que <em>.

Elle met les mots entourés en gras.

Balises rares mais utiles

Mettre en exposant ou en indice :

Pour mettre en exposant certains mots ou caractères, on utilise la balise <sup> et </sup> .
Les mots seront alors affichés en hauteur. Par exemple :

<h3>Mon Emploi du temps</h3>
<p>
        <em>Avril</em>
        <br/>
        Le 1<sup>er</sup> Avril, Je suis invitée chez les extraterrestres ...
</p>

Pour mettre en indice, on utilise cette fois <sub> et </sub> .

Les citations :

Il y a 2 types de citations :

- Les citations courtes, dans un paragraphe, entourées des balises <q> et </q> .
Exemple :

<p>Vous souvenez-vous de la phrase célèbre qu'a prononcé Neil Armstrong en posant le premier pied sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q>. C'était un certain 20 Juillet 1969...</p>

- Les citations longues, hors d'un paragraphe, entourées de <blockquote> et </blockquote> .

<blockquote>
<p>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
</p>
</blockquote>

Les acronymes :

Un acronyme est une suite d'initiales utilisée généralement pour raccourcir certains noms, comme par exemple XHTML, FBI, CSA etc...

Le problème des acronymes, c'est qu'on ne sait pas toujours ce qu'ils signifient. Pour que le visiteur sache de quoi il s'agit, vous devez entourer votre acronyme de la balise <acronym>
La nouveauté ici, c'est que vous allez devoir utiliser un attribut (title) pour expliquer ce que signifie l'acronyme.
Exemple :

<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p>

Si vous pointez sur XHTML, vous verrez apparaître la description :)

Et voila ! Vous savez mettre du text, etc ...
C'est pas très joli, mais ne vous inquiétez pas, c'est le début !