|

Les trois langages essentiels du Web

Cet article explique le rôle de chacun des trois langages essentiels du Web : HTML, CSS et JavaScript.

HTML : un langage facile à apprendre

Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour créer des pages Web. Beaucoup plus facile à apprendre qu'un vrai langage de programmation, un langage de balisage sert simplement à enrichir et à structurer le contenu d'un texte par des balises ouvrantes et fermantes.

Par exemple, sur cette page, le titre principal au haut de la page est « Les trois langages essentiels du Web ». Pour marquer ce titre en HTML, il suffit d'écrire dans un fichier texte :

  
  
<h1>Les trois langages essentiels du Web</h1>
  

La balise ouvrante <h1> indique que le texte qui suit est un titre de niveau 1 (comme un Titre 1 dans Word) et la balise fermante </h1> (remarque la barre oblique) indique que le titre de niveau 1 est terminé. C'est aussi simple que ça : on marque le texte d'un fichier avec des balises (markup) afin de structurer son contenu pour indiquer au navigateur comment le représenter à l'écran. C'est comme ça que l'on crée du contenu pour le Web. Du moins, à la main.

Il existe des dizaines de balises HTML. Nous en verrons d'autres durant la session.

CSS : pour donner du style à nos pages

Les Cascading Style Sheets (CSS) sont des feuilles de styles avec lesquelles nous changeons l'apparence de nos pages, comme les polices de caractères, les couleurs, les dimensions, le positionnement des éléments, etc.

Elles aussi sont assez facile à apprendre (les bases), même si elles sont un peu plus difficiles à maitriser en profondeur.

Par exemple, pour afficher les titres h1 en caractères Arial, de couleur rouge et centrés, il suffit d'écrire :

h1 {
    font-family : "Arial";
    color : red;
    text-align : center;
}

Une règle CSS se compose de trois parties : un sélecteur (le h1 ci-dessus) pour indiquer ce que nous voulons mettre en forme. Un bloc de déclarations, contenu entre des accolades. Puis des déclarations, elles-mêmes composées d'une propriété (font-family, color et text-align ci-dessus) et d'une valeur chacune (Arial, red et center ci-dessus). Nous y reviendrons plus tard.

JavaScript : pour rendre les pages interactives

JavaScript est un langage de programmation qui permet de rendre les pages interactives à travers divers éléments tels que les formulaires, des boutons, etc. Par exemple, clique sur le × pour fermer l'alerte ci-dessous :

× Avertissement : apprendre à coder peut créer une dépendance.

Plus tard durant la session, nous allons faire un atelier sur JavaScript pour découvrir la programmation et les immenses possibilités que ce langage facile à apprendre nous apportent. JavaScript ne fait toutefois pas partie de la compétence du cours.

Exercice – Créer une première page Web

  1. Dans ton disque OneDrive, crée un dossier intitulé 412-Z21 pour notre cours;
  2. Dans ton dossier OneDrive\412-Z21, crée un dossier intitulé Exercices;
  3. Lance l'application Bloc-notes;
  4. Écris la ligne suivante :

    <h1>Mon premier titre en HTML</h1>
  5. Sauvegarde le document sous OneDrive\412-Z21\Exercices\cours1.html
  6. Dans ton navigateur Firefox, ouvre un nouvel onglet avec le raccourci Ctrl+T;
  7. Avec le raccourci Ctrl+O, ouvre le fichier OneDrive\412-Z21\Exercices\cours1.html

    Tu devrais voir une page web blanche avec le titre « Mon premier titre en HTML ».

    Bravo, tu viens de créer ta première page web, même si elle est incomplète pour l'instant.
  1. Retourne dans Bloc-notes (Alt+Tabulation), et ajoute le paragraphe suivant sous l'élément h1 :

    
    <p>Bravo, tu viens de créer ta première page web, même si elle est incomplète.</p>
    
    
  2. Dans Firefox (Alt+Tabulation), rafraichis la page avec le raccourci F5 ou Ctrl+R;

    Tu vois maintenant un titre ainsi qu'un paragraphe dans la fenêtre du navigateur.
  1. Dans Bloc-notes (Alt+Tabulation), positionne le point d'insertion au début de la première ligne et appuie sur Entrée pour insérer une nouvelle ligne. Sur la première ligne (au-dessus du titre), écris le code suivant :

    <style>
      h1 {
        color : red;
      }
    </style>
  2. Enregistre le fichier et passe à Firefox (Alt+Tabulation) pour rafraichir la page (F5 ou Ctrl+R);

    Le titre de niveau 1 est maintenant affiché en rouge, grâce à la règle CSS que nous avons ajoutée.
  1. Dans Bloc-notes (Alt+Tabulation), sous l'élément paragraphe, ajoute le code suivant :

    <p id="message"></p>
    <script>
      prenom = prompt("Bonjour, quel est ton prénom?");
      alert("Avertissement : apprendre à coder peut créer une dépendance.");
      document.querySelector("#message").innerText = "Bonne session, " + prenom + "!";
    </script>
  2. Enregistre le fichier et passe à Firefox (Alt+Tabulation) pour rafraichir la page (F5 ou Ctrl+R).

    Écris ton prénom dans la case et appuie sur Entrée ou clique sur OK.

    Appuie sur Entrée à nouveau ou clique sur OK après avoir lu le message d'avertissement.

    Ton prénom devrait maintenant apparaitre dans le dernier paragraphe de la page, grâce à JavaScript!

A lire également