UTF-8

  • Les caractères HTML

    La structure de base d'un document au format HTML

    Un exemple de document au format HTML

    Voici un descriptif des balises HTML de base qui structurent un document standardisé nommé page web...

    <html>  
    <head>
    <title> </title>
    </head>
    <body>
    <p>Votre contenu...<p>
    </body>
    </html>

    A NOTER : toutes les balises <> se referment avec un "/"


    !-- Le document HTML commence ici --!

    <html>

    On complète désormais cette première déclaration par la langue et son format générique qui est en html 5 :

    <html lang="fr">

    !-- Ici, une déclaration de titre pour la page --!

    <head> 
    <title>Votre titre de page ici</title>
    </head>

    On complète désormais cette première déclaration par le type d'encodage des caractères de la page qui est en utf-8 :

    <meta charset="utf-8">

    !-- Et le début du corps de la page --!

    <body>

    Tous les éléments constituant le contenu visible de la page se situent à l'intérieur de la balise <body> (le corps du document) : le texte, les images, les animations...


    !-- Pour insérer les titres, sous-titres... <H1>,<H2>,<H3>,<H4>,<H5>,<H6> --!

    <h1>niveau one header </h1>

    <h2>niveau two header </h2>

    <h3>niveau three header </h3>

    <h4>niveau four header </h4>

    <h5>niveau five header </h5>

    <h6>niveau six header </h6>

    <h1> et le plus grand format et <H6> le plus petit, ce qui donne ceci pour ce site :

    Premier niveau - l'en-tête

    Second niveau - Un sous-titre

    Troisième niveau - Une rubrique

    Quatrième niveau - Une sous-rubrique

    Cinquième niveau - Une section
    Sixième niveau - Une sous-section

    !-- Pour mettre du texte en gras --!

    un texte normal...

    <b>les balises requises</b>

    Voici le texte en gras

    Elle est de plus en plus substituée par la balise <strong> (fort) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement le terme au-delà de la mettre simplement en gras

    <strong>les balises requises</strong>

    !-- Pour mettre du texte en italique--!

    un texte normal...

    <i>les balises requises</i>

    Voici le texte en en italique

    Elle est de plus en plus substituée par la balise <em> (emphase) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement (avec emphase donc) le terme au-delà de la mettre simplement en italique

    <em>les balises requises</em>

    !-- Pour centrer le texte ou une image --!

    <center><h1>Le texte que vous souhaitez centrer</h1></center>

    Ce qui donne ceci :

    Le texte que vous souhaitez centrer



    !-- Insertion d'une image dans la page --!

    Ce qui donne ceci :

    <img src="/mon-logo.jpg">

    Mon logo

    Il est très conseillé de rajouter l'attribut "alt" qui permet d'afficher un texte alternatif pendant que votre image se charge lorsqu'elle est d'un poids important :

    <img src="/images/mon-logo.jpg" alt="Mon logo : Webmaster Bretagne" />


    !-- Pour ajouter un lien hypertexte--!

    <a href="/index.html">Retour à la page d'accueil</a>

    Ce qui donne ceci :

    Retour à la page d'accueil


    !-- Une ligne de séparation --!

    Pour faire des séparation entre vos paragraphes, vous pouvez utiliser le balise <HR> qui génère une ligne horizontale sur toute la largeur de la page. Attention, elle s'insère seul, sans balise de fermeture.

    <hr />

    Ce qui donne ceci :


    Vous pouvez l'agrémenter de divers attributs :

    <hr size=10 align=left noshade width=50%>

    Ce qui donne ceci :


     


    !-- Les listes à puce --!

    Vous pouvez créer des listes précédées de puce avec les balises <ul> et <li>.

    <ul>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ul>  
    

    Ce qui donne ceci :

    • Texte 1
    • Texte 2
    • Texte 3

    !-- Listes numérotées --!

    Vous pouvez créer des listes numérotées avec les balises <ol> et <li>..

    <ol>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ol>
    

    Ce qui donne ceci :

    1. Texte 1
    2. Texte 2
    3. Texte 3

    !-- A la fin de votre page, vous devez refermer les balises de pages --!

    </body>
    </html>


    Des infos complémentaires :

    Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?

    Allez plus loin :

    La liste complète des balises HTML5...


En poursuivant votre navigation sur le site, vous acceptez l'utilisation des cookies...