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.