Aller au contenu principal

Découverte de l'HTML

Notions théoriques​

Le Web, aussi connu sous le nom de World Wide Web, est un système de documents interconnectés par des liens hypertextes.

Ces documents sont généralement des pages Web qui sont accessibles via Internet.

info

Un site Web est un ensemble de pages Web liées entre elles et publiées sur le même domaine.

Un site statique est un site Web qui est entièrement écrit en HTML (HyperText Markup Language). Les pages de ce type de site sont prédéfinies et ne changent pas, sauf si le code HTML est modifié manuellement.

Le HTML est le langage de balisage standard pour la création de pages Web. Il permet de structurer le contenu d'une page. Chaque élément de la page est entouré de balises HTML qui définissent son rôle.

Le DOM (Document Object Model) est une interface de programmation qui représente la structure d'un document HTML et permet aux langages de script comme JavaScript de manipuler le contenu et la structure de la page Web.

Pour commencer à travailler avec HTML, vous aurez besoin :

  • d'un éditeur de texte (comme * Visual Studio Code *) pour écrire le code,
  • et d'un navigateur Web (comme Google Chrome, Mozilla Firefox, Edge, Safari) pour afficher le résultat.

Exemple pratique​

  1. Dans votre répertoire "Documents", avec VSCode, créez le répertoire tp_web_html

  2. Dans le répertoire tp_web_html, créez le fichier index.html

    Contenu du fichier index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
Astuce

Le squelette d'un fichier HTML peut être rapidement obtenu avec VSCode :

  1. Créez un fichier fichier.html

  2. Tapez au clavier le mot html

  3. Cliquez sur html5

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    Le viewport du navigateur est la zone de la fenêtre dans laquelle le contenu Web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, dans ce cas des des barres de défilement apparaissent.

    Un site type, optimisé pour les mobiles, contient :

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    La propriété width contrôle la taille de la zone d'affichage.

    La propriété width peut être définie avec :

    • un nombre spécifique de pixels comme width=600
    • ou sur la valeur spéciale device-width, qui est la largeur de l'écran en pixels CSS à une échelle de 100%.

  1. Remplacez le code HTML actuel par :

    <!DOCTYPE html>
    <html>
      <head>
        <title>Ma première page HTML</title>
      </head>
      <body>
        <h1>Bonjour le monde !</h1>
        <p></p>
      </body>
    </html>

  2. Ouvrez le fichier index.html dans votre navigateur.

Vous devriez voir une page avec :

  • le titre "Ma première page HTML"
  • et un texte "Bonjour le monde ! Ceci est ma première page HTML."
astuce

Pour voir le code source d'une page Web, vous pouvez faire un clic droit sur la page et sélectionner "Inspecter" ou "Voir le code source de la page".

Les balises à connaître​

Dans cette première séance, nous avons introduit quelques balises HTML de base. Voici une brève description de chacune d'elles :

  • <!DOCTYPE html> : Cette balise est toujours la première ligne d'un document HTML. Elle indique au navigateur que le document est écrit en HTML5.

  • <html> : Cette balise englobe tout le contenu de la page HTML.

  • <head> : Cette balise contient des informations sur la page qui ne sont pas affichées sur la page Web elle-même, comme le titre de la page, les liens vers les CSS, etc.

  • <title> : Cette balise est utilisée dans la balise <head> pour définir le titre de la page. Le titre est affiché dans l'onglet du navigateur.

  • <body> : Cette balise contient le contenu principal de la page Web, qui est affiché dans le navigateur.

  • <h1> à <h6> : Ces balises sont utilisées pour les titres et sous-titres. <h1> est le titre de niveau le plus élevé et <h6> est le titre de niveau le plus bas.

  • <p> : Cette balise est utilisée pour les paragraphes de texte.

astuce

Expérimentez ces balises dans votre éditeur de texte pour voir comment elles modifient la structure et l'apparence de votre page Web.

Déclarative vs Impérative​

La programmation déclarative et la programmation impérative sont 2 approches différentes de la programmation qui ont des différences fondamentales.

  1. Programmation déclarative :

    Dans la programmation déclarative, vous indiquez simplement ce que vous voulez obtenir, sans vous soucier de comment y parvenir.

    C'est comme dire à un chef cuisinier de préparer un plat spécifique (vous ne vous souciez pas de comment il le fait) vous voulez juste le résultat final. Les langages de programmation tels que SQL et HTML sont des exemples de langages déclaratifs.

    Par exemple, si vous voulez trier des données d'une base de données en SQL (un langage déclaratif), vous écrivez une requête qui explique ce que vous voulez obtenir (par exemple, SELECT * FROM table ORDER BY colonne). Le moteur de base de données s'occupe du "comment faire".

    C'est la même chose avec le langage HTML. Vous dites au navigateur ce que vous voulez afficher mais pas comment il doit faire.

  2. Programmation impérative :

    Dans la programmation impérative, le programmeur donne des instructions précises sur comment faire quelque chose.

    C'est comme donner une recette de cuisine détaillée à quelqu'un, où chaque étape est clairement définie. Les langages de programmation tels que CSharp, Python et Java sont des exemples de langages impératifs.

    Par exemple, si vous voulez trier des données en Python (un langage impératif), vous indiquez exactement comment le tri doit être effectué avec des boucles et des instructions conditionnelles.

Programmation déclarative vs impérative
  • La programmation impérative est centrée sur le "comment"

    comment arriver à un résultat (Python, PHP, etc),

  • tandis que la programmation déclarative est centrée sur le "quoi"

    quel est le résultat que vous voulez obtenir (HTML, SQL, etc).

Test de mémorisation/compréhension​


Qu'est-ce qu'un site statique ?


Qu'est-ce que le DOM ?


Comment voir le code source d'une page Web ?


Quelle balise représente le début et la fin d'un document HTML ?


Quelle balise est utilisée pour définir le titre d'une page Web ?


Quelle balise est utilisée pour définir un paragraphe de texte ?


Quelle balise contient des informations sur la page qui ne sont pas affichées sur la page Web elle-même ?


Quelle balise n'existe pas en HTML ?


Quelle balise englobe tout le contenu de la page HTML ?


Quelle est la principale différence entre la programmation impérative et déclarative ?


Quelle est l'approche de la programmation impérative ?


Quelle est l'approche de la programmation déclarative ?


Quel langage de programmation est un exemple de programmation déclarative ?


Quel langage de programmation est un exemple de programmation impérative ?


Dans quel type de programmation est-ce que vous vous souciez du 'comment' ?


Dans quel type de programmation est-ce que vous vous souciez du 'quoi' ?


Quel type de programmation est similaire à donner une recette de cuisine détaillée ?


Quel type de programmation est similaire à demander à un chef de préparer un plat spécifique ?


TP pour réfléchir et résoudre des problèmes​

  1. Dans votre répertoire "Documents", avec VSCode, créez le répertoire tp_premier_site

  2. Dans le répertoire tp_premier_site, créez le fichier index.html

  3. Pour ce TP, votre défi sera de créer une page HTML qui contient les éléments suivants :

    • Un titre qui dit "Mon premier site Web"
    • Un paragraphe qui dit "Bienvenue sur mon premier site Web ! Je suis en train d'apprendre HTML."

  4. Une fois que vous avez terminé, ouvrez le fichier dans votre navigateur pour voir le résultat.

Une solution

Voici comment vous pourriez écrire le code pour ce TP :

<!DOCTYPE html>
<html>
  <head>
    <title>Mon premier site Web</title>
  </head>
  <body>
    <h1>Mon premier site Web</h1>
    <p>Bienvenue sur mon premier site Web ! Je suis en train d'apprendre HTML.</p>
  </body>
</html>

Si vous ouvrez ce fichier dans votre navigateur, vous devriez voir une page avec le titre "Mon premier site Web" et un texte qui dit "Bienvenue sur mon premier site Web ! Je suis en train d'apprendre HTML."