• Structure d'une page HTML

    Par liloub dans Codage le 10 Juillet 2013 à 10:31

     Ce code correspond à la base d'une page web en HTML5 :

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Titre</title>
        </head>
     
        <body>
         
        </body>
    </html>

     

    Bon évidemment, ici je vous fait un cours sur comment créer une page entière en HTML. Il est évident que sur Eklablog vous n'aurez pas besoin de tout ça. Mais vous pourrez vous en inspirer.

     

    Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

    • <html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.

    • <html><body></html></body> : incorrect, les balises s'entremêlent.

     

    Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rôle !

    Le doctype

    <!DOCTYPE html>


    La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

    Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

    La balise </html>

     

    <html>
     
    </html>

     

    C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !

    L'en-tête <head> et le corps <body>

    Une page web est constituée de deux parties :

    • L'en-tête <head> : cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !

    • Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

    Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre aux deux balises contenues dans l'en-tête…

    L'encodage (charset)

    <meta charset="utf-8" />

     

    Cette balise indique l'encodage utilisé dans votre fichier .html.

    Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

    Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète ! C'est pour cela que j'ai indiqué utf-8 dans cette balise.

    Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus souvent sous Linux par défaut mais, sous Windows, il faut généralement le dire au logiciel.

    Cette partie du tutoriel est destiné à des gens qui créent eux-mêmes leurs fichiers HTML, alors vous Eklablogueurs, n'y prêtez pas attention.

     

    Le titre principal de la page

    <title>

    C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient.

    Il est conseillé de garder le titre assez court (moins de 100 caractères en général).

    Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet.

    « Commandes de dlodloLoup »

  • Commentaires

    1
    danyblue Profil de danyblue
    Mercredi 20 Novembre 2013 à 21:23
    danyblue

    coucou tres bien expliquer les code par exemple j aimrais mettre une bordure scintillente je fait comment merci

    tres bien fait ton blog merci amitier danyblue

    Répondre
    2
    liloub Profil de liloub
    Jeudi 21 Novembre 2013 à 18:17
    liloub

    merci beaucoup ;)

    (mais ce n'est pas moi qui ai écrit cet article)

    Répondre


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :