Le language HTML :


Ici nous allons réaliser une page visant à utiliser certaines des principales balises existantes et aborder les principales notions vues en HTML (HyperText Markup Language) :

Le code HTML d'une page doit contenir :

  • Sur la première ligne on doit préciser le type de code c'est a dire :
    <!DOCTYPE HTML>
  • La balise sui suit est une balise unique qui délimite tout le code HTML :
    • <html>
  • entre html et /html on trouvera deux blocs encardrés par head puis body
    • <head> ; <body>
  • dans le block head figures les instructions de paramétrage de la page :
    •      Le titre de l'onglet de la page
         Des métas données inscrites dans le corps de la balise méta; par exemple, méta charset= utf-8
         De manière optionnelle on peut ajouter un bloc style (de type css)
         De manière optionnelle on peut ajouter un bloc de script Javascript
         De manière optionnelle on peut ajouter des liens (link) des fichiers externes


    Il existe deux types de balises :

    1. Les balises orphelines qui fonctionnent seule

    2. Les balises en paires qui fonctionnent par deux

    Quelques balises orphelines :

    <br/> : cette balise s'utilise dans un paragraphe pour revenir à la ligne, br sont les initiales de break row.
    Cette balise doit être mise à l'endroit ou l'on veut que le retour à la ligne soit réalisé. La balise <input/> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données.
    Elle doit être mise à l'endroit spécifique ou vous voulez que le contrôle interactif apparaisse.

    En voici le résultat : (Ceci est une lien)

    Quelques balises en paires :

    Les balises visant personaliser le texte :

    Les titres :

    Les balises titres <h1></h1> ; <h2></h2> jusqu'à <h6><h6/> permettent de réaliser des titres de plus en plus petit

    Exemples

    Ceci est un titre

    Ceci est un titre

    Ceci est un titre

    Ceci est un titre

    Ceci est un titre
    Ceci est un titre

    La balise paragraphe <p> :

    Exemple

    La balise paragraphe permet d'écrire un texte quelconque comme celui-ci

    Les balises souligner (<u>), italique (<i>) ou encore gras (<b>) :

    Exemple

    Ceci est Souligné
    Ceci est en Italique
    Ceci est en Gras

    Les balises de listage

    Il existe deux types de balises de listages :
            - La balise <ul> qui veut dire en anglais unordered list permet de faire une liste d'éléments sans ordre particulier.
        Elle est souvent représentée par une liste à puces.
            - La balise <ol> qui veut dire en anglais ordered list permet de faire une liste numérotée.

    Il existe de nombreuses balises c'est pourquoi nous avons seulement vu celle que nous utilisons le plus.

    L'insertion d'une image :

    Nous allons à présent voir comment insérer une image sur notre page.

    La balise s'écrit de cette manière :
    <img src="nomDeLimage.png" alt="Le fichier de l'image n'existe pas">

    La balise nécessite deux attributs :

    1. l'attribut src permet d'indiquer l'emplacement de l'image : (URL+)nom fichier ; exemple :
      src= "maPhotodeProfil.png" ;
    2. l'attribut Alt contiendra du texte qui s'affichera si l'image ne s'affiche pas

    Exemple :

    Le fichier de l'image n'existe pas

    Si l'image n'existe pas alors on affiche :

    Le fichier de l'image n'existe pas

    Les liens :

    C'est la balise "a" ; elle nécessite au minimum l'attribut href qui indique la destination du lien.

    Exemple :

     Aller sur le site NSI

    Liens vers d'autres pages de mon site :