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

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

  1. Sι∂яα∂ι

    Sι∂яα∂ι Administrateur

    Inscrit:
    25 Juin 2014
    Messages:
    32 879
    J'aime reçus:
    121 598
    Points:
    13 043
    Salut communauté iHaxGlobal ,

    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: 16 Novembre 2021
    mabguez et SyTry aiment ça.
  2. OxyGeneHD

    OxyGeneHD Membre

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

    DMAAR-7777 Premium

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

    billy440 Premium

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

    Sι∂яα∂ι Administrateur

    Inscrit:
    25 Juin 2014
    Messages:
    32 879
    J'aime reçus:
    121 598
    Points:
    13 043
    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

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

    amadd Membre

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

    yrtiv Membre

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

    HoKoMaH Membre

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

    tkboom Membre

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

    Romain1808 Membre

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

    jimilou Membre

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

    amine07 Membre

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

    Geoffrey37 Membre

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

    mabguez Membre

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

    mabguez Membre

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

    mabguez Membre

    Inscrit:
    14 Juillet 2020
    Messages:
    18
    J'aime reçus:
    0
    Points:
    1 281
    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.
    Rejeter la notice