Les trois langages essentiels du Web

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 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, quand on le fait à la main. Bien sûr, WordPress le fait pour nous.

Plusieurs autres balises HTML existent, nous en verrons plusieurs durant la session. Pas besoin de toutes les apprendre par cœur puisque tu pourras toujours te référer aux notes de cours (ce site) ainsi qu'à Google ou à l'IA de ton choix pour te dépanner.

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, la position des éléments, etc.

Elles aussi sont assez facile à apprendre (les bases), même si elles sont 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

Important : prends en note dans ton cahier : pour faire une accolade ouvrante il faut appuyer sur la touche AltCar ou AltGr située à droite de la barre d'espacement et sur la touche accent grave située entre le point-virgule et les crochets, pour une accolade fermante c'est AltCar ou AltGr + la touche des crochets).

À l'intérieur des accolades, on écrit des déclarations CSS, 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.

En marketing électronique, connaitre les bases des CSS est essentiel, mais pas besoin de devenir ninja en CSS pour réussir!

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, des compteurs, et de nombreux autres exemples de contenu interactif. Par exemple, clique sur le × pour fermer l'alerte ci-dessous :

Tu peux faire réapparaître la boite en rafraichissant la page avec la touche F5 ou le raccourci clavier Ctrl+R.

Dans deux semaines, nous découvrirons JavaScript pour comprendre son rôle et les immenses possibilités que ce langage facile à apprendre nous apportent. Rassure-toi, apprendre à programmer des applications avec JavaScript ne fait pas partie de la compétence du cours, mais nous allons en apprendre les bases pour :

• développer notre pensée computationnelle;
• jeter les bases à une meilleure utilisation de l'IA;
• comprendre comment fonctionne un panier d'achat et un système d'inventaire;
• faire du moissonnage sur le Web (web scraping) pour accélérer la récolte de données;
• savoir discuter avec les membres techniques d'une équipe de commerce électronique;
• apprendre à poser les bonnes questions aux développeurs et à l'IA sur les possibilités à notre disposition.

Exercice 1 – Créer une première page Web

La page créée sera incomplète, seulement à des fins d'apprentissage, mais tu utiliseras HTML, CSS et JavaScript pour la concevoir.

1. Dans ton disque OneDrive, crée un dossier intitulé 410-CJR pour notre cours si ce n'est déjà fait;
2. Dans ton dossier OneDrive\410-CJR, crée un dossier intitulé Exercices si ce n'est déjà fait;
3. Lance l'application Bloc-notes ou Visual Studio Code si elle est installée sur ton ordinateur;
4. Écris la ligne suivante :

<h1>Mon premier titre en HTML</h1>

5. Sauvegarde le document sous OneDrive\410-CJR\Exercices\index.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\410-CJQ\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.
8. 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 pour l'instant.</p>

9. 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.
10. Dans Bloc-notes ou Visual Studio Code (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>

Lorem.

<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>