découvrir la construction d'une page web avec l'html5 et ...s2i.bordeaux.free.fr/espace...
TRANSCRIPT
Sciences Numériques et Technologie - SNT Lycée PAPE CLÉMENT - PESSAC
Le W
EB
Étude de Cas
Les langages du WEB Découvrir la construction d'une page WEB avec l'HTML5 et le CSS3 EdC03 Anatomie d'une page WEB : le langage HTML
Th
ém
at
iqu
e L
e W
orl
d W
ide
Web
[W
EB]
Ti
m B
ern
ers-
Lee
top level domain [TLD]
à travers le monde
2
A - Préambule
L'accès au WEB est rendu possible par l'existence des liens hypertextes entre les pages du WEB et au
protocole de communication HTTP. Mais pour être échangées à travers le monde, les pages doivent aussi
utiliser des langages communs et de préférence standardisés.
Depuis sa création en 1990, le langage informatique HTML (HyperText Markup Language) est utilisé pour
créer des pages WEB. C'est l'une des trois inventions issues du W3C avec le protocole HTTP et les adresses
WEB. Son acronyme signifie "langage de balisage d'hypertexte" car il permet en effet de réaliser de
l'hypertexte à base d'une structure de balisage.
B - Les exigences du programme
Voici le positionnement de ce cours par rapport au programme.
Activités Objectifs visés
Situation déclenchante n°1 Les repères historiques
Connaître les étapes du développement du WEB
Le fonctionnement du WEB La composition d'une URL Le modèle client-serveur et les requêtes HTTP
Les langages du WEB Le langage HTML Le langage CSS Les liens hypertextes
Les moteurs de recherche Indexation du WEB Calcul de la popularité (algorithme PageRank)
Sécurité et confidentialité sur le WEB Paramétrer son navigateur Les sites sécurisés Notions juridiques
C - Objectif et organisation de l'activité
Une page WEB est constituée de deux éléments distincts : le code HTML pour la structure et la feuille de
style CSS pour la présentation.
Il existe de nombreuses publications et tutoriels sur le WEB qui permettent d'apprendre en toute autonomie.
Il ne s'agit donc pas ici d'apprendre à réaliser un site WEB complet mais uniquement à vous faire découvrir
l'écriture d'une page WEB.
Certains documents ou outils peuvent s'avérer indispensables si l'on souhaite poursuivre vers des connaissances
et savoir-faire plus pointus et tirer le meilleur parti de ces technologies. Car si créer des pages WEB est déjà une
première difficulté, s'assurer qu'elles puissent être consultées dans de bonnes conditions est une exigence
incontournable, c'est-à-dire :
✓ Adapté à tout type de support : smartphone, tablette, ordinateur,
✓ Consultable même pour les personnes présentant un handicap,
✓ Rendu compréhensible car traduit dans plusieurs langues.
3
Voici dès à présent quelques supports très intéressants :
1. Des ressources pour les développeurs de la fondation Mozilla
(https://developer.mozilla.org/fr/docs/Web ) et notamment celles concernant le HTML
(https://developer.mozilla.org/fr/docs/Web/HTML ) et le CSS
(https://developer.mozilla.org/fr/docs/Web/CSS ),
2. Le site https://www.w3schools.com/default.asp pour la bibliothèque des balises HTML,
3. Un validateur W3C qui permet de vérifier si le code de la page WEB est conforme
(https://validator.w3.org/ ),
4. Visual Studio Code l'éditeur de code multiplateforme, open source et gratuit, développé par
Microsoft pour Windows, Linux et macOS (https://code.visualstudio.com/ )
D - Le langage HTML : le langage de l'hypertexte
Le langage HTML a été conçu pour standardiser le format des pages envoyées par un serveur à un
navigateur WEB.
HTML : provenant de l'anglais Hypertext Markup Language, Langage de balisage pour
hypertexte. HTML est un langage de description des pages WEB permettant de structurer un
texte en lui ajoutant des balises pour préciser comment le navigateur doit interpréter et
mettre en forme le contenu.
Copiez la vidéo "1 - Introduction HTML - 3'20" dans votre espace local de travail c'est-à-dire sur
le bureau de votre ordinateur.
Utilisez l'application VLC pour visualiser le film et répondez à la question suivante.
Ouvrez votre navigateur (Firefox par exemple) et consultez le site http://s2i.bordeaux.free.fr
Visualisez le code source de la page et proposez une copie d'écran.
Copiez la vidéo "2 - Syntaxe HTML - 10'" dans votre espace local de travail c'est-à-dire sur le
bureau de votre ordinateur.
Utilisez l'application VLC pour visualiser le film et répondez au QUIZ suivant.
4
D.1 - QUIZ
Question n°1 : Quelle est l'écriture HTML pour un texte dans un paragraphe ?
<paragraphe> Mon Texte <fin paragraphe>
/p/ Mon texte \p\
</p> Mon texte <p>
<p> Mon texte </p>
Question n°2 : La vidéo nous apprend l'existence d'une ressource de la fondation Mozilla, elle permet :
De télécharger le navigateur FIREFOX pour consulter les pages HTML,
De consulter la documentation HTML,
D'installer un serveur WEB pour tester les pages HTML.
Question n°3 : En HTML ce qui structure les éléments "texte", "image" etc… s'appelle :
Des points d'arrêt,
Des tags HTML,
Des balises,
Des caractères spéciaux.
Question n°4 : L'écriture de "Sciences Numériques et Technologie" s'écriera :
<strong>Sciences Numériques et Technologie</strong>
<strong>S</strong>ciences<strong> N</strong>umériques</strong> et
<strong>T</strong>echnologie
<strong>Sciences</strong> <strong>Numériques</strong> et <strong>Technologie</strong>
Question n°5 : L'élément HTML qui permet de représenter une image est "<img src="Banque
Images/SNT.png" alt="SNT">. Que se passe-t-il si le fichier spécifié est absent du dossier
"Banque Images" ?
Un point d'interrogation remplace l'image,
La page ne peut pas être visualisée, une erreur de type "404" est envoyée par le serveur au
navigateur,
L'image est remplacée par le texte "SNT",
L'emplacement réservé à l'image reste vide.
Question n°6 : Dans l'écriture d'une page HTML, l'indentation consiste à :
Colorier les balises,
Aligner verticalement les balises identiques entrantes et sortantes,
Tester la conformité de la page HTML sur le site de validation W3C
Question n°7 : Le "DOCTYPE" permet de :
Garder une vieille habitude mais la ligne contenant "DOCTYPE" peut être omise,
Donner la version de l'HTML utilisée dans la page,
Spécifier les règles à appliquer au document.
5
D.2 - Exercice
D.3 - Ma première page HTML
Avant de pouvoir écrire nos premières lignes de code HTML, il est important de trouver un outil qui va nous
permettre d'écrire notre fichier HTML.
Par défaut, on pourrait être tenté d'utiliser les applications qui sont disponibles sur notre système
d'exploitation.
Danse avec les balises !
Replacez les balises telles que l'on doit les retrouver dans toute page HTML.
<!DOCTYPE html> <html>
</html>
<head>
</head>
<body>
</body>
Si je cherche "note" dans le champ "Rechercher les programmes et fichiers" de Windows, je
m'aperçois qu'une application "Bloc-notes" est disponible.
Ouvrez l'application et immédiatement faîtes "Enregistrer sous…". Nommez le fichier
"index1.html" et placez-le sur le bureau.
Saisissez le texte suivant : Ma première page WEB
Mon nom est : "Placez ici votre prénom et votre nom"
N'oubliez pas d'enregistrer !
À l'aide d'un navigateur, ouvrez le fichier "index1.html". Que constatez-vous ?
Placez ci-dessous une copie image de votre travail
avec "Bloc-notes" Placez ci-dessous une copie image du résultat dans
le navigateur
Commentez ici les différences !
6
Il existe des éditeurs plus spécialisés qui peuvent vous aider.
Prenons l'exemple de Notepad++ (gratuit)
Ouvrez l'application Notepad++ et procédez comme suit :
1. Choix de la langue : Menu "Paramétrage" ou "Settings" puis "Préférences" ou
"Preferences",
2. Choix du langage : Menu "Langage" ou "Language" puis "H" et "HTML",
3. Saisir :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Salut</p>
<p>Comment ça va !</p>
</body>
</html>
N'oubliez pas d'enregistrer le fichier ("index2.html" sur le bureau) !
À l'aide d'un navigateur, ouvrez le fichier "index2.html". Que constatez-vous ?
Placez ci-dessous une copie image de votre travail
avec "Notepad++" Placez ci-dessous une copie image du résultat dans
le navigateur
Commentez ici les différences !
Copiez la vidéo "3 - Visual Studio Code - 5'30" dans votre espace local de travail c'est-à-dire sur
le bureau de votre ordinateur.
Utilisez l'application VLC pour visualiser le film et faîtes l'exercice suivant.
7
Seule l'application Visual Studio Code sera utilisée par la suite.
D.4 - Ma deuxième page HTML… pour découvrir les balises
Objectif : Le langage HTML est un langage utilisant des balises, de très nombreuses balises…
Comment se souvenir de tous ces éléments pour pouvoir les utiliser efficacement ?
Première solution : APPRENDRE le nom, la syntaxe et les modalités d'utilisation de toutes les balises !
Deuxième solution : DÉCOUVRIR les principales balises à travers d'exemples et UTILISER selon les
besoins, une bibliothèque HTML. Le site "w3schools.com" fait référence dans ce domaine. C'est cette
deuxième solution qui est retenue et qui constitue l'objectif de cette partie.
Ouvrez l'application Visual Studio Code et procédez comme suit :
Saisir :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Salut</p>
<p>Comment ça va !</p>
</body>
</html>
N'oubliez pas d'enregistrer le fichier ("index3.html" sur le bureau) !
À l'aide d'un navigateur, ouvrez le fichier "index3.html". Que constatez-vous ?
Placez ci-dessous une copie image de votre travail
avec "Visual Studio Code" Placez ci-dessous une copie image du résultat dans
le navigateur
Commentez ici les différences !
8
Toutes les pages HTML qui vont être construites seront constituées a minima de balises
dites de premier niveau : <html> <head> <body> sans oublier la première ligne <!DOCTYPE
html> qui permet de définir le type de document afin qu'il soit correctement interprété par
le navigateur.
C'est le "code minimal" d'une page HTML.
Créez un dossier "HTML" sur votre espace de travail.
Placez dans ce dossier "HTML", le fichier "index4.html", "page_suivante.html" et les 2 fichiers
"HobbieCat16.png" et "HobbieCat16-mini.png" (initialement enregistrés par votre professeur
sur le serveur de données)
Ouvrez le fichier dans un navigateur (Firefox).
Remplacez l'image ci-dessous représentant le dossier HTML et son contenu par votre propre
situation.
Ouvrez le fichier dans un navigateur (Firefox).
Remplacez l'image ci-contre représentant le rendu
du fichier index4.html dans le navigateur.
Remarque : pour réduire (zoom -) la page du
navigateur, faire "CTRL -"
Que pensez-vous de la présentation de ce site ?
9
J'interprète la signification des balises de la page index4.html…
Balise À quoi cela sert ?
<!DOCTYPE html> À compléter
<html> À compléter
<title> À compléter
<head> À compléter
<body> À compléter
< !-- --> À compléter
</body> À compléter
<h1> À compléter
<p> À compléter
Complétez le tableau ci-dessous.
Le site https://www.w3schools.com/tags/default.asp permet de trouver, si besoin, la
signification des différentes balises.
Ouvrez l'éditeur HTML "Visual Studio Code",
Dans le menu "File" puis "Open Folder…", sélectionnez le dossier "HTML" présent sur le bureau.
Ouvrez le fichier "index4.html"
Confirmez le bon réglage de l'application "Visual Studio Code" en
apposant votre situation.
10
</br> À compléter
<ul><li> À compléter
<ol><li> À compléter
Balise À quoi cela sert ?
<a href="http://s2i.bordeaux.free.fr">lien vers une page
web</a> À compléter
<a href="https://www.w3schools.com/tags/default.asp" target="_blank">lien vers la page web du site w3scools mais dans une nouvelle fenêtre</a>
À compléter
<img src="HobbieCat16.png" alt="HobbieCat16-Lacanau" title="Catamaran Hobbie Cat 16" width="194" height="100">
À compléter
<a href="HobbieCat16.png"><img src="HobbieCat16-
mini.png" alt="Hobbie Cat 16" title="Cliquez pour
agrandir" width="194" height="100" /></a> À compléter
<a href="#Mon Paragraphe">Aller à mon paragraphe</a> À compléter
D.5 - Évaluation
Un QUIZ a été préparé pour tester vos connaissances sur le langage HTML. Vos codes MOODLE sont
nécessaires !
Fin de cette première partie : le document doit être remis selon les modalités précisées par votre professeur
Deuxième partie : Donner du style - le langage CSS
Connectez-vous au serveur de données dans l'environnement Moodle
(http://172.17.215.31/moodle).
L'évaluation porte sur 20 questions, elle est en langue anglaise. Pendant l'évaluation, vous
pouvez vous aider du présent document ou du site w3schools, le temps n'est pas limité mais
comptabilisé, alors ne perdez pas trop de temps quand même !!
Ma note est de …… /20.
Le temps passé est de ………. mn.