Les Technologies Web
Préambule
Afin de réaliser ce TP, vous allez devoir consulter des documentations de référence :
- W3 schools avec de nombreux exemples ;
- W3 Docs ;
- MDN web docs avec de nombreux tutoriels ;
- World Wide Web Consortium (W3C), qui le principal organisme de définition des standards du web.
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 :
- Un premier tutoriel : https://developer.mozilla.org/fr/docs/Web/HTML
- Un autre tutoriel : https://www.w3schools.com/html/default.asp
- Les différentes balises : https://developer.mozilla.org/fr/docs/Web/HTML/Element ou https://www.w3schools.com/tags/default.asp
- Spécification : https://html.spec.whatwg.org
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 :
- Un premier tutoriel : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics
- Les couleurs HTML/CSS : https://www.w3schools.com/colors/default.asp
- Les sélecteurs CSS : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Selectors
- Une même page et 5 styles : https://www.w3schools.com/css/demo_default.htm.
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 :
- Syntaxe : https://fr.wikipedia.org/wiki/Syntaxe_JavaScript
- Les bases : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- Un tutoriel interactif : https://www.w3schools.com/js/
👉 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 :
- Langage JavaScript : https://developer.mozilla.org/fr/docs/Web/JavaScript
- Langage : https://javascript.info/
- Des exemples : https://www.w3schools.com/js/js_examples.asp
- Les évènements : https://www.w3schools.com/js/js_events.asp
- Modification de la page : https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
- Timer et intervalle : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals