Découvrir le HTML
Dans cette partie, nous allons analyser un site Web très simple. Cela sera suffisant pour comprendre le rôle de balises fondamentales utilisées pour la conception de pages Web. Le HTML est un langage de balises : très simplement cela permet de structurer du texte, par exemple la construction <title>Oh le joli site !</title> permet de spécifier le titre du site. On peut aussi parler de « texte mis entre parenthèses avec une étiquette ». Il y aura des balises pour pointer vers un autre site Web, afficher une vidéo… Le langage CSS lui va permettre de définir comment afficher le document. Nous allons expliquer tout cela.
S’initier en faisantPour s’initier, notre meilleure proposition est d’utiliser la plateforme Thimble de Mozilla, qui est devenu https://glitch.com/. Il faut pour cela créer un compte. C’est très simple.
Note : Un intérêt de Thimble/Glitch est que, sur le même écran s’affichent les fichiers du site (à gauche), les balises (au centre) et à droite le résultat escompté (la page Web en question) que l’on peut évaluer instantanément. On peut travailler en ligne de n’importe quel ordinateur, sauvegarder son travail.
Attention : la page index.html ne doit jamais être renommée sous peine de voir votre site impossible à publier (et ce même en la nommant à nouveau index.html). Elle correspond à la page principale (ou page d’accueil) du site.
Un souci sur les réseaux des lycées et sa solution : Il se peut que vous obteniez le message suivant:
La procédure est alors simple, (i) s’assurer de ne pas être en navigation privée, (ii) aller dans les options du navigateur pour valider les cookies (parfois il y un effet de bords étrange : c’est en allant dans la section « vie privée » pour sélectionner ensuite « conserver l’historique » que la situation se débloque); (ii) relancer le navigateur et ouvrir à nouveau le site pour le remixer.
Comprendre en analysant un existant
Nous allons maintenant afficher, analyser et modifier le site Musique Numérique.
Aller chercher les sources et les installer sur la plateforme en ligne.
Note : Voici aussi les fichiers du site (une archive ZIP à décompresser en local pour ouvrir le fichier index.html dans un navigateur) pour faire l’activité hors-ligne, sans Thimble.
Observons un peu le code (les réponses seront données en fin de page) et jouons au détective en farfouillant dans cet exemple :
1. On peut distinguer deux grands espaces délimités par les balises <head> et <body>. Quelles peuvent être leurs fonctions ?
2. Où trouve-t-on « Musique Numérique » sur la page web ?
3. Comment indiquer un lien vers un document ou un site ? Et une ancre interne à l’intérieur d’une page ?
4. Pour voir la différence entre <h1> et <h2>, inversez les balises, puis après avoir sauvegardé, ré-actualisez la page Web. Qu’observe-t-on?
5. Au-delà de l’aspect visuel, quel peut-être le sens des deux balises <h1> et <h2> ?
6. Quelle est la balise qui permet de passer à la ligne ?
7. A quoi sert l’attribut target=”_blank” (on pourra essayer avec et sans)?
8. Une icône apparaît dans l’onglet du navigateur. Quel est le nom du fichier image ? Où a-t-elle été définie dans le code ?
9. Supprimer l’étoile (*) située ligne 7 après le mot “style”. Après avoir actualisé la page, quelle remarque peut-on faire ? Allez à la page suivante pour comparer.
10. En transformant le fichier CSS, positionnez tous les liens sur la partie droite de la page Web.
Voilà comment très rapidement, faire découvrir quelques bribes des langages HTML/CSS.
Note : Ce ne sont pas des langages de programmation, mais des langages de spécification : ils permettent de définir des données que va exploiter un programme. On peut d’ailleurs introduire un langage de programmation au sein d’une page Web, avec le langage JavaScript.
Appendre plus en faisant
Pour apprendre plus en faisant, on peut créer un site personnel sur Thimble respectant le « cahier de doléances » suivant, cela se fait sur deux à trois séances en classe :
- Vous avez le choix du sujet, mais si vous n’avez pas d’idée, vous pouvez faire un site qui présente l’ICN et le travail qui y est effectué.
- Créer une page d’accueil avec au moins une image, un sommaire (sous forme de liste numérotée) pour présenter le site, et trois autres pages minimum, reliées entre elles par des liens (page précédente – page suivante – retour accueil).
- Proposer des liens vers une vidéo, et des documents et des sites externes.
- Les ressources devront être des ressources librement réutilisables.
- La présentation se fera à travers un CSS.
- Les documents et médias mis en ligne seront rangés dans des dossiers.
- Prévoir une icône qui apparaisse dans l’onglet du navigateur.
- Ajouter un mini document sonore personnel (avec votre voix) ou venant de Jamendo.
- Votre contact devra apparaitre et être actif par simple clic.
La qualité de l’orthographe, l’allure générale du site, la bonne arborescence des dossiers, la pertinence des informations sont des éléments d’évaluation.
Comment aller plus loin ?
- Le site W3school propose une interface très pratique permettant de comprendre et d’utiliser en direct les différentes balises. Il est le meilleur outil pour découvrir ou faire découvrir le HTML.
- Les sites Openclassrooms ou Informatique au lycée contiennent de vrais tutoriels qui permettent de travailler avec les élèves en classe inversée : chacun les suit à son rythme et la classe est un lieu de partage d’échange et d’entraide sur ces sujets.
Mais le HTML/CSS/JS est aussi une famille de langages qui implémente de grandes idées que nous vous proposons de partager dans l’onglet suivant.
Réponses au questionnaire
- Le bloc <head>…</head> contient les méta-données de la page, et bloc <body>…</body> contient le contenu de la page.
- La chaine « Musique Numérique » se trouve dans une balise <h1>…</h1> pour indiquer que c’est le titre du contenu de la page
- Le lien vers une page externe s’indique avec une balise de la forme <a href= »http://adresse-du-site-externe »>…</a> et une balise interne à une page, par une ancre précédée par un <a href= »#identificateur »>…</a>.
- On observe que la mise en page diffère, celle de la balise <h1>…</h1> est plus visible que celle de la balise <h2>…</h2>
- Ces balises servent à titrer des sections et sous-sections
- C’est la balise <br/>
- Il permet, quand on clique sur le lien, que la nouvelle page ne s’ouvre pas à la place de la présente, mais dans un autre onglet ou une nouvelle fenêtre (selon la configuration du navigateur).
- Le nom de fichier est « icononglet.png » et l’icone est défnie avec la balise <link rel= »shortcut icon » type= »image/x-icon » href= »icononglet.png » /> dans les méta-données de la page
- On note que le caractère ‘*’ est une typo qui empêchait de charger le bon fichier de style Musique.css, bon après tout le monde n’aime pas le violet, non plus
- Il y a plusieurs solutions, on peut par exemple utiliser text-align:right dans la balise idoine, tiens, c’est laquelle en fait ?
Note : cette activité permet de guider l’élève pour lui permettre d’apprendre par « essais successifs » en explorant à partir d’un exemple et construisant petit à petit ce qu’il souhaite, c’est une façon de faire courante et efficace en informatique.