Comment organiser son texte

Après avoir vue les bases du HTML /XHTML , voyons maintenant quelques balises de mise en forme.

Les titres.

Les titres permettent de donner une importance plus ou moins grandes à votre texte et/ou page. Il existe 6 degrés d'importances que voici:
<h1></h1> : Titre très important généralement utilisé pour le titre de la page.
<h2></h2> : Titre important utilisé la plus part du temps pour les paragraphes.
<h3></h3> : Titre moyennement important généralement utilisé comme "sous-titre".
<h4></h4> : Titre un peut moins important.
<h5></h5> : Titre peut important.
<h6></h6> : Titre pas du tout important.

Exe
<!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>Ma première page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Mon premier titre</h1>
<h2>Mon second titre</h2>
<h3>Mon troisième titre</h3>
</body>
</html>

En testant par vous même, vous vous rendrez compte que la taille d'écriture de certaines de ces balises sont plutot démesuré et nous verrons plus tard comment le CSS. peut influer sur celles-ci.
De même, rare est l'utilisation des 6 niveaux de titre. Généralement on utilise au mieux les 4 premier niveau.

Les paragraphes.

Les paragraphes sont définit par 2 balises que voici : <p> et </p> qui permet d'organiser son texte en paragraphes dans un document XHTML.
<p>
: début du paragraphe.
</p> : fin de paragraphe.

Exemple
<!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>Ma première page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Mon premier titre</h1>
<p>Mon premier texte, rien de génial mais c'est un début!</p>
<h2>Mon second titre</h2>
<p>Mon second texte, toujours rien de génial mais sa va venir!</p>
</body>
</html>
La balise <p> ne peut contenir d'autres éléments générant eux mêmes des blocs comme les titres, les listes, des citations ou des adresses.
Hein..quoi ta dit...j'ai rien comprit ???

Les balises ci-dessous sont de types bloc. Cela signifie que ces balises ne doivent pas être imbriquées les une dans les autres.
<address>  , <blockquote>  , <body>  , <dd>  , <div>  , <dl>  , <dt>  , <fieldset>  , <form>  , <h1>  , <h2>  , <h3>  , <h4>  , <h5>  , <h6>  , <head>  , <hr />  , <html>  , <li>  , <map>  , <noscript>  , <ol>  , <p>  , <pre>  , <script>  , <style>  , <table>  , <tbody>  , <td>  , <tfoot>  , <th>  , <thead>  , <tr>  , <ul>
Voici un exemple d'une mauvaise mise en page:
<!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>Ma première page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
<p>Cette ligne est mise en paragraphe.<br/>
<ul>
<li>Voici la première phrase d'une liste</li>
<li>Voici une deuxième phrase d'une liste</li>
</ul>
</p>
    </body>
</html>
 
 Et voici un exemple d'une bonne mise en page :
<!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>Ma première page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
<p>Cette ligne est mise en paragraphe.</p>
<ul>
<li>Voici la première phrase d'une liste</li>
<li>Voici une deuxième phrase d'une liste</li>
</ul>
    </body>
</html>
 
 Vous voyez la différence ? Tout est dans "l'imbrication" des balises.

Par défaut, les paragraphes sont alignés à gauche. Vous pouvez aligner un paragraphe à droite ou le centrer grace à l'utilisation du CSS.

Autres balises:

Comme vous vous en doutez, ils existes une multitudes de balises HTML /XHTML que je vous laisse découvrir dans la section Liste des balises HTML.
Voir/déposer un commentaire (0) | Signaler un problème