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

Discussion dans 'Programmation' créé par Sι∂яα∂ι, 3 Février 2016.

  1. Sι∂яα∂ι

    Sι∂яα∂ι Administrateur

    Messages:
    28 564
    J'aime reçus:
    116 087
    Points:
    13 043
    Inscrit:
    25 Juin 2014
    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.
     
    Dernière édition: 17 Novembre 2021
    mabguez et SyTry aiment ça.
  2. OxyGeneHD

    OxyGeneHD Membre

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

    DMAAR-7777 Premium

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

    billy440 Premium

    Messages:
    3
    J'aime reçus:
    0
    Points:
    2 271
    Inscrit:
    1 Novembre 2014
    merci sidradi pour ces tutorials :cheers:
     
  5. Sι∂яα∂ι

    Sι∂яα∂ι Administrateur

    Messages:
    28 564
    J'aime reçus:
    116 087
    Points:
    13 043
    Inscrit:
    25 Juin 2014
    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
     
  6. fjodu974

    fjodu974 Premium

    Messages:
    14
    J'aime reçus:
    0
    Points:
    2 281
    Inscrit:
    13 Février 2015
    merci
     
  7. amadd

    amadd Membre

    Messages:
    163
    J'aime reçus:
    1
    Points:
    1 348
    Inscrit:
    8 Juillet 2017
    merci pour ce tutoriel digne de openclassroms
     
  8. SyTry

    SyTry Ancien Staff

    Messages:
    789
    J'aime reçus:
    3 613
    Points:
    3 793
    Inscrit:
    13 Octobre 2015
    Merci pour le partage de ce petit tutoriel l'ami ! :)
     
  9. yrtiv

    yrtiv Membre

    Messages:
    39
    J'aime reçus:
    1
    Points:
    33
    Inscrit:
    28 Octobre 2017
    Merci beaucoup pour ce tutoriel :D
     
  10. HoKoMaH

    HoKoMaH Membre

    Messages:
    51
    J'aime reçus:
    0
    Points:
    56
    Inscrit:
    30 Octobre 2017
    Merci beaucoup pour ce tutoriel :no_mouth:
     
  11. tkboom

    tkboom Membre

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

    Romain1808 Membre

    Messages:
    73
    J'aime reçus:
    0
    Points:
    1 306
    Inscrit:
    29 Octobre 2017
    merci pour ce tuto je serais moins bête maintenant
     
  13. jimilou

    jimilou Membre

    Messages:
    20
    J'aime reçus:
    0
    Points:
    21
    Inscrit:
    4 Novembre 2017
    pas si compliquer finalement o top
     
  14. amine07

    amine07 Membre

    Messages:
    203
    J'aime reçus:
    2
    Points:
    2 398
    Inscrit:
    29 Octobre 2017
    merci bcp frere tu gere :heart:333 je vais faire mon mieux pour comprendre
     
  15. Geoffrey37

    Geoffrey37 Membre

    Messages:
    10
    J'aime reçus:
    0
    Points:
    21
    Inscrit:
    6 Novembre 2017
    merci pour tout c'es super gentil
     
  16. mabguez

    mabguez Membre

    Messages:
    18
    J'aime reçus:
    0
    Points:
    31
    Inscrit:
    14 Juillet 2020
    Merci c'est la première fois que j'ai compris comment ce fait une page html
     
  17. mabguez

    mabguez Membre

    Messages:
    18
    J'aime reçus:
    0
    Points:
    31
    Inscrit:
    14 Juillet 2020
    à ce qu'il y a l’épisode 2 ?
     
  18. mabguez

    mabguez Membre

    Messages:
    18
    J'aime reçus:
    0
    Points:
    31
    Inscrit:
    14 Juillet 2020
    ou je peux trouver l'episode 2 de cette explication ?
     

Partager cette page

  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.