Activité 1 : découverte du HTML
Objectifs : • Connaître les étapes du développement du Web.
• Maîtriser les renvois d'un texte à différents contenus.
• Etudier et modifier une page HTML simple.
Quelques définitions pour commencer :
Exercice 1 :
Sur votre synthèse, compléter les définitions avec les mots suivants :
CSS (Cascading Style Sheets) / World Wide Web (WWW) / HTML (Hyper Text Markup Langage) / Navigateur Web (Browser en anglais) / Hypertexte
Différence entre HTML et CSS :
Pour faire simple, le code HTML définit le fond d'une page et le code CSS la mise en forme (voir ci-dessous un exemple d’une même page Web sans CSS et avec CSS) :
Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera, etc.), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).
HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles... c'est un langage de description.
Pour écrire du HTML, plusieurs solutions :
• Avec éditeur en ligne (https://codepen.io/pen) : pratique juste pour tester du code
• Avec un éditeur de texte quelconque (comme "wordpad") en enregistrant le fichier avec l'extension html
• Avec un smartphone (comme "Easy HTML" sous Androïd ou "Coda" sous IPhone)
• Avec un éditeur spécifique gratuit (comme "Notepad++" sous Windows)
Nous utiliserons Notepad++
Exercice 2 :
a) Créer sur le réseau (demander le chemin au professeur) un dossier à vos noms du type Web_ NomsEleves qui contiendra lui-même un dossier Images.
b) Ouvrir le logiciel Notepad++ et écrire le code HTML suivant :
Sauvegardez-le en le nommant "index.html".
Testez votre code :
• en “double-cliquant” sur le fichier index.html de votre dossier (ouvrir avec le navigateur Chrome ou Firefox)
• ou à partir de « Notepad++ » en cliquant sur le menu « Exécution » puis en choisissant le navigateur Web
Quelques explications :
En HTML tout est une histoire de balise que l'on ouvre et que l'on ferme.
Une balise ouvrante est de la forme < balise> et une balise fermante est de la forme </balise>.
Toute balise ouverte doit être refermée. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a pas d'importance, la seule question à se poser est : ai-je bien refermé toutes les balises ?
Il est important de savoir qu'une structure du type : <balise1> <balise2> </balise1> </balise2>
est interdite, la balise2 a été ouverte après la balise1, elle doit donc être refermée avant la balise1.
En revanche, l'enchaînement suivant est correct : <balise1> <balise2> </balise2> </balise1>
Notez que dans notre exemple nous respectons bien cette règle avec la balise <p> et la balise <strong>.
Il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) : un exemple est la balise permettant de sauter une ligne, la balise <br/>.
Exercice 3 :
Sur votre synthèse, compléter la colonne « Eléments de texte » du tableau des balises.
Exercice 4 :
Compléter votre code comme ci-dessous :
Enregistrer et observer le résultat en rafraîchissant votre page dans le navigateur.
Quelques explications : la structure de base d’une page HTML
• <!doctype html> : indique au navigateur que nous utilisons la dernière version du HTML : le HTML5
• <html> …….. </html> : balises obligatoires, l’attribut lang=ʺfrʺ indique au navigateur que nous utilisons le français pour écrire la page
• <head> ……. </head> : c’est l’ « en-tête » de votre page.
Elle contient 2 balises : - la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères
- la balise <title> qui définit le titre de la page (visible dans l’onglet)
• <body> ……. </body> : c’est le « corps » de votre page qui contient tout votre code HTML
Exercice 5 :
Regarder la vidéo ci-dessous concernant les repères historiques du Web puis compléter la frise chronologique de votre synthèse.
Exercice 6 :
Créer votre première page Web présentant les grands repères historiques du Web en respectant le cahier des charges ci-dessous :
- La page possède un titre
- Le texte est constitué de plusieurs niveaux de titres (au moins deux niveaux)
- Le texte contient plusieurs paragraphes
- Le texte contient un saut de ligne
- Le texte contient un mot ou groupe de mots mis en valeur
- Le texte contient une liste (numérotée ou non)
- La page contient au moins une image (voir la syntaxe sur la fiche synthèse)
- La page contient au moins un lien hypertexte renvoyant vers une ressource Wikipédia (voir la syntaxe sur la fiche synthèse)
Exercice Bonus pour les plus rapides :
Créer une autre page page2.html dans votre dossier Web_ NomsEleves en respectant le cahier des charges suivants :
- La page sera accessible en cliquant sur le texte Tim Berners Lee de votre page index.html
- La page présentera une biographie de Tim Berners Lee