Chapitre 6 : HTML CSS et JS

Cours

Les utilisateurs interagissent avec leur machine par le biais d'une interface.
Dans un navigateur cette interface est constituées de pages Web.
L’Interface Homme-Machine (IHM) repose sur la gestion d’événements (clic, survol ...) associés à des éléments graphiques (boutons, zone ...) munis de méthodes algorithmiques (fonctions appelées lorsque l'évènement se produit).
Ce cours propose de reprendre les langages de présentation du web statique (HTML et CSS) vu en seconde et d'y ajouter un langage de programmation afin d'obtenir un web interactif (javascript). Le chapitre suivant proposera d'approfondir la relation client-serveur et de découvrir un langage de programmation côté serveur pour générer un web dynamique (PHP).

1. Web statique (HTML et CSS)

1.1. Naissance du HTML

Pour partager des informations avec ses collègues chercheurs au CERN, Tim Berners-Lee met au point dans les années 1990 un système de liens (ou hyperliens) reliant les informations contenues dans les ordinateurs entre elles grâce à des adresses web ou URL (Uniform Ressource Locator) : c'est la naissance du Web (world wide web).
Le Web (ou « la Toile ») est un réseau mondial constitué de l'ensemble des pages web liées entre elles par des liens hypertextes. Afin de structurer les données présentes sur une page web, Tim Berners-Lee développa un langage de description : le HTML (hypertext markup language).

Tim Berners-Lee
Tout document texte ayant l'extension .htm ou .html, constitue une page web. Cependant, pour que cette page soit correctement interpréter par un navigateur (Chrome, Edge, Firefox, Opera ou Safari), elle doit vérifier la du HTML.
Logo des principaux navigateurs

1.2. Syntaxe du HTML

Les informations d'une page HTML sont encadrées par différents balises : une ouvrante <html> et une fermante </html>. Toute balise ouverte doit être refermée. Une page HTML 5 est construite sur la base suivante :
Code source HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>le titre</title>
    </head>
    <body>
        Contenu du document...
    </body>
</html>
Explications 
Indique qu'il s'agit d'un document écrit en html-5.
Ouverture de la balise html qui encadre tout le code html.
Ouverture de la balise (en-tête) qui encadre les métadonnées de la page.
Définit la norme d'encodage des caractères.
Titre de la page (Titre de l'onglet du navigateur).
Fermeture de la balise des métadonnées.
Ouverture de la balise qui encadre le corps (le contenu) de la page.

Fermeture de la balise corps de la page.
Fermeture de la balise html.

Toutes les balises HTML et leurs attributs sont présentés sur : w3schools.com.

Code source dans le navigateur
Ouvrir un éditeur de texte (Notepad++, Geany, ou autre) et sélectionner, pour Notepad++, dans l'onglet Langage/HTML et Encodage/Encoder en UTF-8.
Recopier la structure de base d'une page HTML donné ci-dessus en personnalisant le titre et le contenu. Sauvegarder sous le nom "page1.html" et ouvrir votre fichier avec un navigateur.
1 - Où s'affiche le contenu de la balise <title> ?
La balise <title> permet de définir le titre de l'onglet du navigateur. Tout ce qui est dans la balise correspond aux métadonnées de la page.

2 - Quelle balise délimite le contenu de la page ?
Le contenu de la page est délimité par la balise <body>.

Depuis le navigateur, ouvrir ⁝ / Plus d'outils / Outils de développement (Ctrl + Maj + I) pour sélectionner l'onglet "Elements" pour voir le code source de votre page. Modifier son contenu depuis le navigateur.
3 - Que se passe-t-il si vous modifier le code source dans le navigateur ?
L'affichage dans le navigateur (local) est modifié.

4 - Le fichier d'origine (sur le serveur) est-il modifié ?
Le fichier sur le serveur demeure inchangé. Cela est heureux car, c'est ce fichier qui est envoyé à chaque visiteur du site et il est évidemment hors de question que chaque visiteur puisse modifier le site lui-même.
Pour la suite, aidez-vous du mémo HTML joint à ce cours.
Initiation HTML
À chacune des étapes, sauvegarder votre fichier et actualiser son affichage dans le navigateur pour constater le résultat.

  1. Ajouter à votre page un titre de niveau 1 en utilisant la balise <h1>. N'oublier pas de refermer votre titre avec <h1>.
    Par défaut, comment apparaissent les titres de niveau 1 ?
    Les balises <h1> à <h6> encadrent des titres. Par défaut ils sont en gras et du plus grand <h1> au plus petit <h6>.
  2. Ajouter un paragraphe <p> avec un long texte (copier-coller du ). N'oublier pas de refermer votre balise.
    Par défaut, les paragraphes s'adaptent-ils à la largeur de la page ?
    Oui et les retours à la ligne sont automatiques.
  3. Ajouter un deuxième titre de niveau 1 puis un titre de niveau 2 <h2>.
  4. Ajouter une liste non-ordonnée <ul> qui contiendra trois éléments <li>.
    Par défaut, quelle puce apparaît devant chaque élément de la liste ?
    La puce par défaut est un petit rond noir.
  5. Convertir votre liste non-ordonnée en liste ordonnée avec la balise <ol>.
    Par défaut, comment s'insère tous ses éléments dans votre page ? Côte à côte (inline) ou les uns sous les autres (block) ?
    Les un sous les autres (block).
  6. Ajouter un lien vers https://www.w3schools.com avec la balise <a> à l'intérieur d'un des paragraphes. Par défaut, la balise <a> est-elle inline ou block ?
    Elle est de type inline car elle s'insère côte à côte avec les autres éléments.
  7. Ajouter une info-bulle en renseignant l'attribut title dans la balise ouvrante de votre lien. Qu'observe-t-on en passant la souris au-dessus du lien ?
    Une balise a des attributs, certains sont obligatoires comme href pour les lien, d'autres facultatifs : une valeur par défaut est alors parfois définie par le navigateur.
  8. Trouver une image libre de droit en ligne (pixabay.com et récupérer son URL.
    Sous votre premier titre, insérer cette image avec la balise orpheline <img />.
  9. Insérer une erreur dans l'URL de votre image. Qu'est-ce qui s'affiche à la place de l'image ?
    Il s'affiche un icône signalant que l'image n'existe pas. L'attribut alt est un texte alternatif qui s'affiche en cas de lien mort. Il est très utilisé par les moteurs de recherche pour comprendre l'image.
  10. Ajouter un attribut pour que l'image fasse 200 pixels de large.
Code source (modification) :
Consulter le guide
sur Wikipédia.
Écrire du HTML
Question 1/4 : ✓
Mémorisation 0x - Réussite 0/0
Qui a inventé le web grâce à son idée d'hypertextes reliés par des liens ?
Cocher la bonne réponse.

2.1. Naissance du CSS

Depuis 1997 et l'apparition du HTML 4, le choix a été fait de séparer le fond (c'est-à-dire le contenu) et la forme (c'est-à-dire l'aspect) d'une page web. Cela permet d'apporter des modifications à l'aspect visuel d'une page web sans toucher à son contenu.
Ainsi, on utilise en réalité deux langages de description (pas de programmation) pour créer une page web :

  • le langage HTML qui contient le fond (texte, images, videos, liens, ...)
  • le langage CSS qui décrit la forme (couleurs, cadres, positions, tailles, police de caractères, ...)

Le CSS (Cascading Style Sheets) est venu remplacer les anciennes balises de mise en forme qui existait en HTML 1, 2 et 3, car les fichiers HTML devenaient trop lourds et confus. Cela imposait par exemple de modifier une à une toutes les pages d'une site web pour en changer son aspect (sa charte graphique). Désormais, il suffit de modifier le fichier CSS du site web pour que toutes les pages soit mises en forme de la même manière.

1.4. Syntaxe du CSS

Pour la suite, aidez-vous du mémo CSS joint à ce cours.

Pour lier le fichier HTML à la feuille de style CSS, il doit contenir dans son en-tête <head>, une référence au fichier CSS : 
<link href="feuille1.css" rel="stylesheet">
Initiation CSS
  1. Créer un nouveau fichier texte nommé style1.css dans le même dossier que votre fichier HTML et l'ouvrir avec un éditeur texte.
  2. Lier votre fichier HTML à ce fichier CSS en ajoutant la bonne balise à l'intérieur de l'en-tête <head> (voir mémo CSS).
  3. À l'aide du sélecteur h1, mettre les titres de niveau 1 en gras en copiant dans votre fichier CSS le code : 
    h1 {
  font-weight: bold;
}
    4. On souhaite faire en sorte que les paragraphes soient de couleur #0E3C72 (héxadécimal).
  4. Quel sélecteur avez-vous utilisé ?
    Le sélecteur p.
  5. Combien de couleur peuvent être codée avec six caractères en hexadécimaux ? Cela correspond à combien d'octet ? De bits ?
    6 caractères hexadécimaux correspondent à 3 octets soit 24 bits. Cela correspond donc à une profondeur de couleur de 24 bits soit 224=16777216 couleurs possibles.
  6. Comment modifier ce sélecteur pour que le style des paragraphess'applique aussi aux listes (ul et ol) ?
    Avec le sélecteur p, li, ol
  7. Un de vos paragraphes est une définition et vous souhaitez le faire apparaitre différemment à l'écran. Pour cela ajouter l'attribut class="definition" dans la balise ouvrante de ce paragraphe. À l'aide du sélecteur CSS .definition le mettre en italique. 
    .definition {
    font-style: italic;
}
  8. Sur ce paragraphe, deux styles s'appliquent : celui défini par le sélecteur p et celui du sélecteur .definition. Lequel est prioritaire ?
    Le style .definition est prioritaire car il est plus sélectif.
    9. Pour identifier de façon unique une balise, il est possible d'utiliser l'attribut id="texte". Le sélecteur correspondant en CSS est #texte.
  9. Appliquer cette méthode de sélection à une de vos balises afin que le font soit de couleur sky. 
    #texte {
    color: sky;
}
Une balise (balise fille) contenue dans une autre (balise mère) hérite de ses propriétés. C'est le principe en cascade du code CSS (Cascading Style Sheets).
Les sélecteurs CSS permettent de choisir sur quelle balise appliquer un style. Il est possible de pointer les balises par leur nom mais aussi en les regroupant avec un même attribut class ou encore de les pointer de façon unique avec l'attribut id. Plus le pointeur est précis/sélectif, plus il est prioritaire.

Il est toujours possible d'inclure du code CSS sur du HTML en utilisant dans une balise HTML l'attribut style. Cette pratique doit être limitée ou réservée à des mises en forme pérennes. Il est préférable d'utiliser un fichier CSS séparé pour une meilleure évolutivité du code par la suite. 
<p style="color : orange ;">Ce paragraphe apparaît en orange</p>
Tous les sélecteurs CSS sont présentées ici : w3schools.com : sélecteurs.
Tous les attributs sont présentés là : w3schools : attributs.
Code source (modification) :
Consulter le guide
sur Wikipédia.
Écrire du HTML
Question 1/4 : ✓
Mémorisation 0x - Réussite 0/0/3
Où doit apparaître le lien vers la feuille de style dans le code HTML ?
<html> <head> 1 </head> <body> 2 </body> 3 </html> 4
Cocher la bonne réponse.

2. Web interactif (JavaScript)

2.1. Naissance du javascript

Le JavaScript est un langage de programmation créé en 1995. Il est très populaire et est un des langages standards du web comme le HTML et le CSS. Cela signifie que les principaux navigateurs web (Chrome, Safari, Firefox, etc.) savent l'interpréter. Il permet de rendre interactive une page web.
Le JavaScript est un langage de programmation, contrairement aux HTML et au CSS qui sont des langages de description.

Utilisation

Comme pour le CSS, les instructions javascript peuvent être dissociées dans un autre fichier script.js et ce fichier doit alors être lié à la page HTML en l'ajoutant dans l'élément <head> : 
<script type="text/javascript" src="script.js" async></script>;
ou bien : 
<script type="text/javascript" src="script.js" defer></script>;
Remarques :
  • defer permet de s'assurer que le fichier HTML soit entièrement arrivé avant d'exécuté le code du fichier javascript. Cette méthode est à privilégié quand le script a besoin d'accéder à la page HTML (on parle du ).
  • Avec async, le fichier javascript est téléchargé en même temps que le fichier HTML. Il est exécuté dès que son téléchargement est terminé sans attendre que le fichier HTML soit entièrement chargé. Idéal pour les scripts indépendants du fichier HTML (sans interaction immédiate avec le .
  • Il est possible d'écrire directement du code javascript dans un fichier HTML, entre des balises <script> sans préciser d'attribut src.
> Association d'un script JavaScript
  1. Créer un nouveau fichier texte nommé « script.js » dans le même dossier que les fichiers CSS et HTML et l'ouvrir avec Notepad++ en choisissant le langage Javascript dans l'onglet Langage afin de bénéficier de la coloration syntaxique.
  2. Associer votre javascript avec le fichier HTML.
Initiation Javascript
Ajouter un bouton et une zone pour entrer du texte sur votre page avec les lignes ci-dessous, sauvegarder vos fichiers et afficher le résultat dans le navigateur chrome. 
<input type="button" onclick="change_fond()" value="Appliquer">
<input type="text" id="couleur">
  1. La balise <input> est-elle orpheline ? Est-elle de type « block » ou « inline » ?
    Elle est orpheline et de type « inline ».
  2. À quoi sert l'attribut type ?
    Il précise le type de widget utilisé (bouton, entrée de texte).
  3. Et l'attribut value ?
    Il pernet d'écrire sur le bouton un message.
    4. Pour accéder à la page HTML (on parle du ), le script javascript utilise la variable document.
  4. Ajouter les lignes de code suivantes dans votre fichier script.js : 
    function change_fond() {
    var couleur = document.getElementById("couleur").value;
    document.body.style.background = couleur;
}
  5. En javascript, quel mot clé permet de définir une fonction ?
    function
  6. Quel mot clé permet de définir une variable ?
    var
  7. Comment sont repérés les blocs d'instruction
    Les blocs sont délimités par des accolades {...}.
  8. Par quel symbole doit se terminer toutes les instructions ?
    Chaque instruction est terminée par un point-virgule ;.
  9. Sauvegarder vos fichiers et actualiser la page pour observer le résultat.
  10. À quoi sert l'attribut onclick dans la 1ère balise <input> de votre fichier HTML ?
    Il permet de préciser l'instruction javascript exécutée au lic sur le bouton.
  11. Pourquoi a-t-il été ajouté l'attribut id à la 2e balise <input> dans votre fichier HTML ?
    Pour désigner directement l'objet dans le code javascript.
    12. Remplacer la valeur "text" par "password" pour l'attribut type de la 2e balise <input> de votre fichier HTML.
    Qu'est-ce que cela a modifié ? Sachant qu'avec un navigateur, il est possible de modifier le code d'une page ⁝ / Plus d'outils / Outils de développement (Ctrl + Maj + I) pour sélectionner l'onglet Elements. Réponse L'affichage des caractères tapés est caché.
Les possibilités sont immenses et la documentation Javascript est ici : w3school - doc JS.
Code source (modification) :
Consulter le guide
sur Wikipédia.
Écrire du HTML
Question 1/5 : ✓
Mémorisation 0x - Réussite 0/0/2
Quel mot clé permet de définir une fonction en javascript ?

Ressources :

  • openclassrooms.com : site proposant d'excellent cours gratuit sur le HTML 5, le CSS 3 et le Javascript.
  • Pour coder en HTML, CSS et JS, vous pouvez utiliser l'éditeur en ligne Digipen de La Digitale.