• Donner forme à un site !

    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>.

     


  • Commentaires

    1
    Jeudi 31 Juillet 2014 à 00:11

    C'est quoi la différence entre les balises de types block et celles de type inline ? parce que tu a écrit la même chose pour les deux.

    2
    Jeudi 31 Juillet 2014 à 18:33

    Salut,

    D'abord, je n'ai pas dit la même chose :) :

    • 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>.

     Les balises de type block sont des balise qui se place les unes sur les autres.

    Exemples:

    <p>Mon premier paragraphe</p>

    <p>Mon deuxième paragraphe</p>

    Donnera cela:

    Mon premier paragraphe

    Mon deuxième paragraphe

    Et jamais cela: (sauf grace au css)

    Mon premier paragraphe Mon deuxième paragraphe

    Les balises block ne s'alignerons pas.

    En revanche les balises inline reste sur la même ligne, elles s'alignent.

    Tu ne verra jamais cela:

    lien 1

    lien 2

    Pour ce code:

    <a>lien 1</a><a>lien 2</a>

     

    3
    Jeudi 31 Juillet 2014 à 19:12

    Ah... shocked d'accord j'ai compris yes. Merci wink2

    4
    Jeudi 31 Juillet 2014 à 21:16

    De rien,

    Si tu n'as pas compris tu peux me le dire je te réexpliquereais d'une autre manière he.

    Mais bon, si tu dis que tu as compris , tant mieux happy.

     

    5
    Jeudi 31 Juillet 2014 à 22:04

    Si, si j'ai compris ne t'inquiète pas

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :