Sciences

WEB : S N T Numériques
CH06 603 et
Technologiques

1. Introduction
1.1. Modèle Client-Serveur statique
On a deux acteurs principaux dans une communication Web : Les navigateurs et les serveurs web.
Les serveurs WEB hébergent les pages les pages HTML.
Un serveur WEB stocke sur son disque dur le contenu d’un site internet. Ce serveur WEB est identifié sur le réseau Internet
par un identifiant unique : son adresse IP (exemple d’adresse IP: 215.56.147.3 – Le protocole DNS fera le lien entre l’adresse
IP et l’URL).
Les navigateurs demandent le code HTML des pages web aux serveurs qui répondent aux demandes des navigateurs via le
protocole http (hypertext transfert protocol).

Remarque : N'importe quel type d'ordinateur peut jouer le rôle de serveur, mais dans le monde professionnel les serveurs
sont des machines spécialisées conçues pour fonctionner 24h sur 24h. Ils peuvent aussi avoir une grosse capacité de stockage
afin de stocker un grand nombre de ressources (vidéos, sons, …etc).
Afin d’assurer une continuité de service, dans les sociétés, plusieurs serveurs assurent
exactement le même rôle (on parle de redondance). Vous vous doutez bien que Google
ne possède pas qu'un seul serveur, en effet, en moyenne, chaque seconde, c'est environ
65000 clients qui se connectent aux serveurs du moteur de recherche de Google. Aucun
serveur, même extrêmement performant, ne serait capable de répondre à toutes ces
requêtes. Les entreprises possèdent d'immenses salles contenantes chacune des centaines
ou des milliers de serveurs (ces serveurs sont rangés dans des armoires appelées "baie
serveur").

Note importante : Dans ce chapitre, nous aborderons que les grands principes de
construction de pages statiques, les pages web ne seront pas traitées. Quel est la différence ? Une page web dynamique est
une page web générée à la demande, par opposition à une page web statique. Le contenu d'une page web dynamique peut
donc varier en fonction d'informations (heure, nom de l'utilisateur, formulaire rempli par l'utilisateur, etc.) qui ne sont
connues qu'au moment de sa consultation. À l'inverse, le contenu d'une page web statique est à priori identique à chaque
consultation.

1.2. Le protocole HTTP

Revenons sur l'adresse qui s'affiche dans la barre d'adresse d'un navigateur web et plus
précisément sur le début de cette adresse c'est-à-dire le "http"
Selon les cas cette adresse commencera par http ou https *.
Le protocole http (hypertext transfert protocol) va permettre au client d'effectuer des requêtes à
destination d'un serveur web. En retour, le serveur web va envoyer une réponse.

* Le "https" est la version "sécurisée" du protocole http. Par "sécurisé" en entend que les données sont chiffrées avant
d'être transmises sur le réseau. D'un point vu strictement pratique il est nécessaire de bien vérifier que le protocole est bien
utilisé (l'adresse commence par "https") avant de transmettre des données sensibles (coordonnées bancaires...).

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 1 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

Voici un exemple de requête HTTP :

Nous avons ici plusieurs informations :
"GET" est la méthode employée (voir ci-dessous)
"/mondossier/monFichier.html" correspond l'URL de la ressource demandée
"HTTP/1.1" : la version du protocole est la 1.1
"Mozilla/5.0" : le navigateur web employé est Firefox de la société Mozilla
"text/html" : le client s'attend à recevoir du HTML

Revenons sur la méthode employée :

Une requête HTTP utilise une méthode (c'est une commande qui demande au serveur d'effectuer une certaine action).
Réponse du serveur à une requête HTTP
Une fois la requête reçue, le serveur va renvoyer une réponse, voici un exemple de réponse du serveur :
La 1re ligne se nomme la ligne de statut :
HTTP/1.1 : version de HTTP utilisé par le serveur
200 : code indiquant que le document recherché par le client a bien été trouvé par
le serveur. Il existe d'autres codes dont un que vous connaissez peut-être déjà : le
code 404 (qui signifie « Le document recherché n'a pu être trouvé»).

1.3. Le fonctionnement des sites web

HTML, de CSS sont des langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces
langages. Ils sont à la base même du Web. HTML et CSS se sont des langages de description de documents et non des
langage de programmation.

Exemple de code pour une page

Le langage de description : HTML + CSS Le navigateur interprète les différentes balises et produit le
rendu graphique

+
Fichier html fichier css
Le langage de description : HTML seul Le navigateur interprète les différentes balises et produit le
rendu graphique

Fichier html

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 2 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

2. Comment est écrite une page Web ?

2.1. Lire les documents en annexe (extrait livre Delagrave) et visionner les vidéo « A quoi sert internet »
et «A quoi servent les css »

2.2. A l’aide des éléments de la précédente question répondre aux questions suivantes :

Doc 1 : Ecrire le contenu de la page HTML tel qu’il s’afficherait sur un navigateur

Doc 1 : Compléter la page HTML en ajoutant le titre « Classe de première » au même niveau que « Les classes
de Seconde »


Doc 2 : Quel est le nom et la taille de la police de caractère pour les titres de niveau 1 ?

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 3 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

Doc 3 : Quelle différence constatez-vous entre les deux versions du site Web et d’où vient-elle ?

Doc 3 : Quel changement aurait-il fallu faire pour afficher le titre Le Web en taille 54 ?

Doc 4 : Vers quelle page pointe le lien hypertexte « Nous contacter » ?

Conclusion : Comment les pages Web sont-elles écrites ?

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 4 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

3. Conception d’une page HTML

Rappel : Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), 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.
Une page HTML est ainsi un simple fichier texte avec l’extension « .html » ou «. htm » contenant des balises (parfois
appelées marqueurs ou tags en anglais) permettant de mettre en forme le texte, les images, ….

En HTML tout est une histoire de balise que l'on ouvre et que l'on ferme. Une balise ouvrante est de la forme
<nom_de_la_balise>, les balises fermantes sont de la forme </nom_de_la_balise>.

3.1. Voici un exemple de page Web :

Code source HTML contenu dans le Interprétation du code HTML

fichier « index.html ». effectuée par le navigateur

<html>
<head>
<meta charset="utf-8" />
<title>Titre de ma page html </title>
</head>
<body>
<b>corps de la page, </b>ce qui apparait dans la
fenêtre principale du navigateur.
</body>
</html>

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un
moment ou un autre.

3.1.1. Repérer la première paire de balise de la page « index.html ». Indiquer la balise « ouvrante », la
balise « fermante ».

Le rôle de ces balises : elles encadrent l'ensemble du code HTML, balise de début et de fin du document HTML.

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 5 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

3.1.2. Repérer la 2ème paire de balise de la page « index.html ». Indiquer la balise « ouvrante », la balise
« fermante ».

Le rôle de ces balises : C’est l’en-tête du document. Elles permettent de donner des informations générales sur la page
qui vont être utiles au navigateur pour interpréter le code HTML.

3.1.3. Repérer la 3ème paire de balise de la page « index.html ». Indiquer la balise « ouvrante »,
la balise « fermante ».

Le rôle de ces balises : Cette section encadre la partie principale de la page. Tout ce que nous écrirons entre ces
balises sera affiché à l'écran.

Voici des exemples de balises :

Balises paires :

Balises utilisées Rôle de la balise HTML Interprétation du navigateur

<B> j’aime les gâteaux !!!</B> Met le texte entre les balises en gras j’aime les gâteaux !!!

Met le texte entre les balises en

<I> j’aime aussi les fruits.</I> j’aime aussi les fruits.
italique
<U> Introduction au HTML</U> Souligne le texte entre les balises Introduction au HTML

Balises orphelines : <BR/> : retour à la ligne. <IMG> : insertion d’une image

En consultant le site https://jaetheme.com/balises-html5/#html vous trouverez une liste plus complète des différentes
balises

3.1.4. Ecrire le code source d’une page html, qui affichera « Bonjour et bienvenue sur mon site :
Sciences Numériques et technologie » et dont le titre de la page sera « SNT ».

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 6 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

Pour écrire de code, on utilise le logiciel Notepad++. Démarrer ce logiciel et choisir dans
l’onglet Langage, HTML. Enregistrer toujours vos modifications pour pouvoir être interprétés
par votre navigateur sous "mapremierepageweb.html " dans votre répertoire de travail.

Exécuter ensuite votre page à l’aide d’un navigateur.

Les attributs sont les options des balises, ils viennent les compléter pour donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur.).

- Exemple : insertion d’une image.

-

- <html>
- <head>
- <title>Titre de ma page html </title>
- </head>
- <body>
- <img src="images\LaPhotoDeMaMaison" alt="Ma maison !!!">
- </body>
- </html>

La balise <img> a, dans ce cas, deux attributs :

L’attribut « src » : désigne l’arborescence permettant de trouver le fichier «LaPhotoDeMaMaison .jpg ».
L’attribut « alt » : "info-bulle" affichée au survol de la photo par la souris.

3.1.5. Après un saut de ligne, insérez l’image de votre choix sur votre page web :
« mapremierepageweb.html.
Vous pouvez télécharger une image depuis internet.

Exécutez ensuite votre page à l’aide d’un navigateur.

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 7 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

Les liens hypertextes (ancrages) sont des éléments d'une page HTML permettant aux internautes de naviguer vers
une nouvelle page lorsque l'on clique dessus.
Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles.
Ils permettent notamment de naviguer :

 vers une autre page HTML du site -> lien local

 vers un autre site -> lien externe

 vers un autre endroit de la page sur laquelle on est situé -> lien interne

Un lien externe est un lien vers une page pointée par son URL (Uniform Resource Locator). Il s'écrit sous la forme
suivante : <a href="Adresse Web"> texte de l’hyperlien </a>

Exemple :

 La balise paire <a> ……</a> (<a> pour ancrage) est utilisée pour encadrer le texte qui va devenir un lien
dans la page (dans ce cas : Comment ça marche apparaitra en bleu souligné).

 href="………………………." Est un attribut de la balise paire <A> ……</A>, permettant de cibler le fichier
que l’on va consulter quand on va cliquer sur le lien.

1. Insérez un lien vers le site : "onisep.fr", après un saut de ligne sur votre "mapremièrepageweb".

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 8 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

4. Le CSS
4.1. Rappel : La page HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise
pratique). Le HTML s'occupe uniquement du contenu, pour tout ce qui concerne la mise en page et l'aspect « décoratif »
(on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

4.1.1. A l’aide d’un éditeur de texte (notepad++), créez la page suivante (vous nommerez le fichier
« pagehtml+css.html »)

Exécutez votre code à l'aide d'un navigateur web.

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 9 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

4.1.2. Toujours à l'aide d'un éditeur de texte (notepad++), vous allez créer un fichier qui va
contenir le CSS de notre page (vous nommerez ce fichier style.css). Complétez ce fichier à
l'aide du code suivant :

Pour l'instant notre CSS ne sera pas appliqué à notre page, pour ce faire, il faut modifier notre code HTML en ajoutant
une ligne qui va permettre d'associer notre code CSS à notre page.

4.1.3. Modifiez le code HTML (fichier "pagehtml+css.html") avec la ligne suivante :

<link rel="stylesheet" href="style.css"> entre les balises <HEAD>……</ HEAD >.

Exécutez votre code à l'aide d'un navigateur web.

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 10 sur 11
CH06 / 603 / Web : Ecrire une page web SNT

4.1.4. Modifiez le code HTML de votre page comme ci-dessous :

Écrivez sur votre fichier style.css, le code CSS suivant :

Exécutez votre code à l'aide d'un navigateur web.

4.1.5. Insérez une image dans votre code html et ajoutez à votre fichier style.css le code suivant :

Exécutez votre code à l'aide d'un navigateur web.

Que remarquez-vous si vous agrandissez ou diminuez votre fenêtre de navigateur ?

L’image s’adapte en largeur à la taille de la fenêtre car nous avons utilisé pour propriété un % pour LEFT de la taille
de l’écran.

CH06 / 603 / 603 web_ecrire une page web_eleves.docx / LVH Page 11 sur 11