Apprendre le HTML - Episode #1 : Structure Basique en HTML

ѕι∂яα∂ι

  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.
  1. ѕι∂яα∂ι

    ѕι∂яα∂ι Administrateur

    Messages:
    13 926
    J'aime reçus:
    70 812
    Points:
    8 543
    Salut communauté iHax ,

    Au cours de se Tutorial, je vais vous présenter et expliquer la structure basique d'une page en HTML.

    Screenshot_11.jpg

    La balise <!DOCTYPE> s'assure que le navigateur interprétera la version HTML qui sera utilisée, ainsi en HTML5 le Type de document à déclarer est :
    HTML:
    <!DOCTYPE html>
    Tout code html commence avec les balises :
    HTML:
    <!DOCTYPE html>
    <html>   
    </html>
    Ainsi le navigateur reconnais que la balise <html> est le début du code html, et </html> sa fin.
    Du coup, tout ce qui est au mieux, c'est le contenu.
    La balise <html> contient 2 balises ou catégories principales <head> et <body>
    HTML:
    <!DOCTYPE html>
    <html>
    <head> 
    </head>
    <body> 
    </body>
    </html>
    Dans la contenu de la balise <head>, on peux ajouter le titre de la page grâce à la balise <title>
    HTML:
    <!DOCTYPE html>
    <html>
    <head> 
        <title>iHax Tutorials</title>
    </head>
    <body> 
    </body>
    </html>
    
    On peux aussi ajouter des informations MetaData, qu'on ne veux pas afficher mais qui font partie de notre page HTML.

    Dans la partie body, tout ce qu'on ajoute est le contenu de la page qui sera affiché : header, paragraphe, table .. etc, par exemple pour ajouter du texte, on utilise la balise paragraphe <p> ainsi :

    HTML:
    <!DOCTYPE html>
    <html>
    <head> 
        <title>iHax Tutorials</title>
    </head>
    <body> 
        <p>Episode #1 : Structure Basique d'une page en HTML</p>
    </body>
    </html>
    
    Aussi très utilisé, c'est la balise heading autrement dit titre h1, h2, h3, h4, h5 et h6.

    HTML:
    <!DOCTYPE html>
    <html>
    <head> 
        <title>iHax Tutorials</title>
    </head>
    <body> 
        <h1>Tutorial HTML5</h1>
        <p>Episode #1 : Structure Basique d'une page en HTML</p>
    </body>
    </html>
    
    Maintenant, on va parler rapidement des attributs. Ce sont des informations supplémentaires qui permettent de configurer les éléments ou de modifier leur comportement de différentes façons. Exemple : lang qui est un attribut global qui indique la langue utilisée dans notre page. Voici un exemple :

    HTML:
    <!DOCTYPE html>
    <html lang="fr">
    .....
    </html>
    Voici la liste complète des langue : https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1 que vous pouvez utiliser.

    On peut aussi ajouter un attribut charset à la balise Metadata <meta>
    HTML:
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
    </head>
    ....................
    </html>
    Si on exécute notre code sur un navigateur, voici le résultat :

    Screenshot_12.jpg


    Ce Tutorial touche à sa fin .
    A très bientôt pour une prochaine épisode.
     
    SyTry apprécie ceci.
    ●●●Outils
  2. OxyGeneHD

    OxyGeneHD

    Messages:
    2
    J'aime reçus:
    0
    Points:
    2 271
    GG pour ce Tutorial, vivement la prochaine épisode (y)
     
    ●●●Outils
  3. DMAAR-7777

    DMAAR-7777 Premium

    Messages:
    3
    J'aime reçus:
    0
    Points:
    2 271
    Comment on fait pour afficher ce code sur chrome ?
     
    ●●●Outils
  4. billy440

    billy440 Premium

    Messages:
    3
    J'aime reçus:
    0
    Points:
    2 271
    merci sidradi pour ces tutorials :cheers:
     
    ●●●Outils
  5. ѕι∂яα∂ι

    ѕι∂яα∂ι Administrateur

    Messages:
    13 926
    J'aime reçus:
    70 812
    Points:
    8 543
    Il suffit d'utiliser un éditeur de text : blocnote, notepad++, sublime text .. etc de coller le code et enregistrer la page en .html au lieu de .txt
     
    ●●●Outils
  6. fjodu974

    fjodu974 Premium

    Messages:
    14
    J'aime reçus:
    0
    Points:
    2 281
    merci
     
    ●●●Outils
  7. amadd

    amadd

    Messages:
    130
    J'aime reçus:
    1
    Points:
    588
    merci pour ce tutoriel digne de openclassroms
     
    ●●●Outils
  8. SyTry

    SyTry Ancien Staff

    Messages:
    791
    J'aime reçus:
    2 316
    Points:
    3 793
    Merci pour le partage de ce petit tutoriel l'ami ! :)
     
    ●●●Outils
  9. yrtiv

    yrtiv

    Messages:
    39
    J'aime reçus:
    1
    Points:
    33
    Merci beaucoup pour ce tutoriel :D
     
    ●●●Outils
  10. HoKoMaH

    HoKoMaH

    Messages:
    54
    J'aime reçus:
    0
    Points:
    56
    Merci beaucoup pour ce tutoriel :no_mouth:
     
    ●●●Outils
  11. tkboom

    tkboom

    Messages:
    55
    J'aime reçus:
    0
    Points:
    556
    c'est cool merci ^^ ce genre de chose m'aide
     
    ●●●Outils
  12. Romain1808

    Romain1808

    Messages:
    75
    J'aime reçus:
    0
    Points:
    56
    merci pour ce tuto je serais moins bête maintenant
     
    ●●●Outils
  13. jimilou

    jimilou

    Messages:
    21
    J'aime reçus:
    0
    Points:
    21
    pas si compliquer finalement o top
     
    ●●●Outils
  14. amine07

    amine07

    Messages:
    183
    J'aime reçus:
    1
    Points:
    98
    merci bcp frere tu gere :heart:333 je vais faire mon mieux pour comprendre
     
    ●●●Outils
  15. Geoffrey37

    Geoffrey37

    Messages:
    10
    J'aime reçus:
    0
    Points:
    21
    merci pour tout c'es super gentil
     
    ●●●Outils