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

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

Discussion dans 'Programmation' créé par Billazzo, 3 Février 2016.

  1. Billazzo

    Billazzo Administrateur

    Messages:
    24 584
    J'aime reçus:
    110 187
    Points:
    13 043
    Salut communauté Billazzo ,

    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>Billazzo 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>Billazzo 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>Billazzo 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: 3 Octobre 2020
    SyTry apprécie ceci.
  2. OxyGeneHD

    OxyGeneHD Membre

    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 Membre

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

    billy440 Premium Membre

    Messages:
    3
    J'aime reçus:
    0
    Points:
    2 271
    merci Billazzo pour ces tutorials :cheers:
     
    Dernière édition par un modérateur: 3 Octobre 2020
  5. Billazzo

    Billazzo Administrateur

    Messages:
    24 584
    J'aime reçus:
    110 187
    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 Membre

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

    amadd Membre

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

    SyTry Ancien Staff Membre

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

    yrtiv Membre

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

    HoKoMaH Membre

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

    tkboom Membre

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

    Romain1808 Membre

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

    jimilou Membre

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

    amine07 Membre

    Messages:
    198
    J'aime reçus:
    2
    Points:
    1 348
    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
    merci pour tout c'es super gentil
     

Partager cette page