Les Technologies Web

Préambule

Afin de réaliser ce TP, vous allez devoir consulter des documentations de référence :

En outre, le site du W3C offre un outil de validation en ligne qui vous permet de vérifier la syntaxe de la page Web que vous avez produite : https://validator.w3.org/.

Outils de Développement

VS Code

Si vous utilisez un éditeur de code comme VS Code, il existe de nombreuses extensions utiles pour le développement Web. En particulier, nous vous recommandons d'installer l'extension HTML CSS Support.

Test en local

Pour tester rapidement en local une application web en cours de développement, il est possible de démarrer (en tant que simple utilisateur) un serveur web léger avec la commande suivante :

python3 -m http.server

Par défaut, il affiche la liste des fichiers du répertoire courant, accessible sur le port 8000 de la machine locale. Vous pouvez accéder à ce serveur en saisissant l'URL http://localhost:8000 dans votre navigateur web. Si le port 8000 est occupé, vous pouvez choisir un autre port avec la commande : python -m http.server 7800. (Les ports inférieurs à 1024 sont réservés par le système.)

Publication de sa page Web au CREMI

Le CREMI possède un serveur Web Apache2 sur lequel chaque étudiant possède un site web personnel, consultable à l'URL https://<prenom>-<nom>.emi.u-bordeaux.fr/ et dont les ressources sont accessibles dans le répertoire /net/www/<login>/ (ou via le lien symbolique ~/espaces/www/). Vous pouvez vérifier l'URL exacte de votre site en consultant cette page : https://services.emi.u-bordeaux.fr/intranet/mesinfos/.

Installation d'un serveur Web sur sa machine personnelle

Afin de travailler sur sa machine personnelle, il est également possible d'installer un serveur Web comme Apache2 (ou Nginx) en local de la façon suivante (sous Debian/Ubuntu) :

sudo apt update
sudo apt install apache2                       # installation apache2
sudo chmod 777 /var/www/html/                  # accès en écriture à tous
echo "hello world!" > /var/www/html/index.html # nouvelle page d'accueil

Dans ce cas là, il faut ajouter vos ressources web directement dans le répertoire /var/www/html/ et la page web sera alors directement accessible à l'URL http://localhost/.

Deboggage

Pour tester votre site web, nous vous conseillons d'utiliser le navigateur web Chrome ou Firefox, qui possède des outils de débogages très puissants (F12), qui permettent d'inspecter le code source à tous les niveaux, d'afficher les erreurs et même de modifier en direct le code à l'aide d'une console JavaScript interactive ! Plus d'info sur https://developer.chrome.com/docs/devtools/overview/.

HTML

Dans ce TP, nous utiliserons la version 5 du langage HTML. Ce document débute par une balise spéciale <!DOCTYPE html> et se compose de balises (ou éléments) ouvrantes (<html>) et fermantes (</html>), qui servent à décrire la structure du document. Voici donc une page minimaliste : demo-01.html. Faire Ctrl-U pour afficher le code source dans votre navigateur (ou F12, onglet Sources).

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Demo Web</title>
</head>

<body>
    <h1>Ma Page Web</h1>
    <h2>Un Sous-Titre</h2>
    <p>Un paragraphe, pour dire que ma page est chouette !</p>
    <!-- un commentaire -->
</body>

</html>

👉 En partant de cet exemple, mettre en place au CREMI une page HTML basique (demo.html), qui utilise un large éventail de balises, comme par exemple : <h1>, <h2>, <p>, <pre>, <br>, ... Ajoutez encore une liste (balises <ul>, <ol>, <li>), une image (balise <img>), un lien vers une page web externe (balise <a>). Ajoutez des meta-informations dans la partie <head>, comme par exemple : author, description, keywords, ... Vous pouvez structurer encore plus fortement votre document avec les balises : <header>, <nav>, <main>, <section>, <footer>, ...

Notez que pour mettre du texte en évidence, il faut privilégier l'utilisation des balises sémantiques <em> et <strong>, plutôt que <i> (italic) et <b> (bold). De manière générale, on s'interdira volontairement d'effectuer de la mise en forme en changeant par exemple les polices de caractères (<font>), l'alignement (<center>), la couleur, ... Nous allons faire cela de manière beaucoup plus élégante dans la section suivante avec une feuille de style CSS.

Pour réaliser le travail demandé, vous pouvez vous aider de la documentation complémentaire suivante :

CSS

Jusqu'à présent, notre page a le style par défaut du navigateur. Pour appliquer notre propre style et ainsi contrôler l'aspect de la page, on intègre à la page une feuille de style, défini dans le fichier mystyle.css, via la balise <link> dans l'en-tête du document (<head>).

<head>
<meta charset ="utf-8" />
<title> Demo Web </title>
...
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Une feuille de style se décompose en blocs de règles encadrées par des accolades, s'appliquant à un ensemble d'éléments HTML décrit par un ou plusieurs sélecteurs séparés par des virgules (selector_1, selector_2 { ... }).

Considérons par exemple le style mystyle.css ci-dessous :

h2, .important {
    color: darkblue;
    background: #eeeeee;
}

#labri {
    color: red;
    font-family: monospace;
    font-weight: bold;
    font-size: 20px;
}

Et voici un exemple de page demo-02.html, qui utilise ce style... Dans cet exemple, on change les couleurs du texte et de l'arrière-plan de tous les éléments <h2> et de tous les élements de classe important. De plus, on modifie le style du texte et sa couleur pour l'élément avec l'identifiant labri. Voici un extrait du code HTML, qui utilise ce style :

<h2>Un sous-titre</h2>
<p>Un paragraphe normal...</p>
<p class="important"> Un paragraphe important...</p>
<p>Un lien avec une style particulier <a href="https://www.labri.fr" id="labri">LaBRI</a>.</p>

Nota Bene : Les couleurs peuvent s'écrire dans plusieurs formats comme #rrggbb en hexadécimal ou encore en utilisant des noms de couleur standards (https://www.w3schools.com/html/html_colors.asp).

👉 Reprenez votre page demo.html et ajoutez une feuille de style CSS. Appliquez un style CSS à plusieurs éléments de votre page : <h1>, <h2>, <p>, <strong>, ... Ajoutez des attributs class et id à plusieurs éléments de votre page afin de leur appliquer un nouveau style défini dans votre CSS. Notez que vous pouvez utiliser la balise <div> comme un simple conteneur pour appliquez votre style à tout un bloc de HTML. La balise <span> permet de faire la même chose à l’inérieur d’une ligne.

Pour réaliser le travail demandé, vous pouvez vous aider de la documentation complémentaire suivante :

Pour aller plus loin, vous pouvez mettre en place un layout dans votre document avec, par exemple, le <header> dans un bloc en haut, des balises <section> répartis sur deux ou trois colonnes au milieu et le <footer> en bas (https://www.w3schools.com/css/css_templates.asp).

JavaScript

Une fois la page HTML, les styles CSS et les images chargés, la page (son contenu et son aspect) ne change plus. On dit que la page est statique. Pour ajouter un peu de dynamisme, il est possible d'intègrer à notre page un programme écrit en langage JavaScript. Considérons un petit exemple, demo-03.html.

<body>
...
<script>
  console.log("Hello World!");
</script>
<script src="myscript.js"></script>
</body>

La balise <script> permet d'injecter du code JavaScript directement dans la page HTML. Notez que le message Hello World! va s'afficher dans la console de votre navigateur web, accessible sous Chrome ou Firefox avec la touche F12. C'est très pratique pour faire du deboggage !

Mais, en pratique, il est préférable d'écrire son code JavaScript dans un fichier à part, comme par exemple myscript.js. Ce code va s’exécuter à la fin du chargement de la page et va principalement contenir la définition de fonctions, qui seront appelées en réaction à des évènements, comme un clic souris. Dans l’exemple ci-dessous, la première fonction modifie le titre <h1>, tandis que la seconde fonction modifie le style d’un élément avec l’identifiant foo.

function func1 () {
  let elm = document.querySelector("h1");
  elm.textContent = "Un Nouveau Titre";
}

function func2 () {
  let elm = document.getElementById ("foo");
  elm.style.fontWeight ="bold ";
}

Vous noterez que ce code utilise la variable globale prédéfinie document (qui represente la page web courante au format DOM), pour sélectionner un élément de ce document soir à partir de son type <h1>, soit à partir d'un identifiant unique foo. Il existe d'autres variables globales ainsi prédéfinies comme window ou console.

Afin de réagir à un évènement particulier, il est nécessaire d’affecter le nom d’une fonction JavaScript à certains attributs spéciaux (onclick, onmousemove, onmouseover, onload, onfocus, ...) des différents éléments. Par exemple :

<h1 onmouseover="func1()">Un Titre</h1>
<h2>Un Sous-Titre</h2>
<p>Un paragraphe, pour dire que ma page est <span id="foo">chouette</span> !</p>
<button onclick="func2()">Clic</button>

Voici un autre démo très simple tempus/ de code JavaScript qui utilise la fonction setInterval() pour afficher périodiquement la date et l'heure du jour... Notez que le sablier qui tourne n'est pas programmé en JavaScript, c'est juste un Gif animé.

Pour réaliser le travail demandé, il est utile de consulter les documentations ci-dessous :

👉 Ajoutez à votre page demo.html du JavaScript pour modifier son contenu dynamiquement en réaction à des évènements : onclick sur un bouton, setInterval, onload, onresize, ... Ajoutez ensuite un exemple de modification dynamique du style appliqué à un élément comme <div> ou <span> pour changer par exemple la couleur de fond du texte lors du survol de la souris.

Pour réaliser le travail demandé, vous pouvez vous aider de la documentation complémentaire suivante :