Le WEB - Le fond et la forme

1. Qu'est-ce que le Web ?

Répondre aux questions suivantes :

a) Que signifie les trois lettres www ? b) Qui a créé le web et en quelle année ? c) Comment peut-on naviguer entre plusieurs pages d'informations ? d) qu'est-ce qu'une URL ? e) Où sont stockés les sites web ? f) Quel est le rôle d'un navigateur ? g) Le principal protocole utilisé ?

2. Surfer sur le net

Pour surfer sur le net, nous utilisons un navigateur web. Il s’agit d’un logiciel d’une extrême complexité, comportant plusieurs millions de lignes de code. Le premier navigateur web, appelé Mosaic, date de 1993. Actuellement, il en existe un grand nombre dont les plus connus sont les suivants :

3. Le fond et la forme : quelques explications…

Pour créer des sites web, nous avons besoin (au minimum) de deux langages informatiques : le HTML et le CSS. Ceux-ci ne sont pas des langages de programmation, mais des langages de description qui fonctionnent à l’aide de balises interprétées par le navigateur web.

Le langage HTML (HyperText Markup Language, langage de balisage hypertexte) a été inventé par Tim Bernes-Lee en 1991.

Son rôle est de gérer et d’organiser le contenu de la page web (titres, textes, images, etc.). Il répond à une norme très précise.

Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.).

Autrement dit, le contenu est écrit dans le fichier HTML et la mise en forme est écrite dans le fichier CSS.

Exemple : la copie d’écran ci-dessous est un extrait d’un fichier HTML.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="ISO-8859-1"> <title>Mon Titre</title> </head> <body> <div id="container"> <img src="Web_cours_2/images/ban.jpg" alt="banniere" id="image_container"> <div id="header"><h1> Les dieux du stade </h1></div> <div id="sub_header">... Swim, Bike, Run, three times the fun!</div> <div id="main_content_top"></div> <div id="main_content"> <div class="content"> <h2>Le triathlon</h2> <p class="ec">Le triathlon est une discipline sportive constituée de trois épreuves d'endurance enchaînées : natation, cyclisme et course à pied.</p> <p>L'enchaînement des <b>trois épreuves</b> sans pause de la part des concurrents leur impose, en plus d'être performants dans chacune des disciplines, d'effectuer des transitions rapides entre deux épreuves. Les compétiteurs doivent ainsi enlever le plus rapidement possible leur combinaison de natation à la sortie de l'eau et enfiler leur casque (obligatoire) avant de sauter - au sens propre le plus souvent - sur le vélo. Ils doivent de même descendre de manière efficace de leur monture, une fois la partie cycliste achevée et enfiler le plus rapidement possible leurs chaussures de course à pied. La rapidité à effectuer les deux transitions peut s'avérer déterminante sur des triathlons courts.</p> <h2>Types d'épreuves</h2> <div id="table_content"> <table> <caption>Classification internationale</caption> <tr> <th>Format</th> <th>Natation</th> <th>Cyclisme</th> <th>Course à pied</th> </tr> <tr> <th>équipe relais (4X)</th> <td>250 à 300 m</td> <td>5 à 8 km</td> <td>1,5 à 2 km</td> </tr> <tr> <th>Distance super sprint</th> <td>250 à 500 m</td> <td>6,5 à 13 km</td> <td>1,7 à 3,5 km</td> </tr> <tr> <th>Distance sprint</th> <td>750 m</td> <td>20 km</td> <td>5 km</td> </tr> <tr> <th>Distance standard</th> <td>1 500 m</td> <td>2000 km</td> <td>10 km</td> </tr> <tr> <th>Moyenne distance</th> <td>1 900 à 3 000 m</td> <td>80 à 90 km</td> <td>20 à 21 km</td> </tr> <tr> <th>Longue distance</th> <td>1 000 à 4 000 m</td> <td>100 à 200 km</td> <td>10 à 42 km</td> </tr> </table> </div> </div> <div class="menu"> <div class="menu_title">Les disciplines</div> <ul> <li><a href="" class="menu_link">Le Cyclisme</a></li> <li><a href="Course.html" class="menu_link">Course à pied</a></li> <li><a href="natation.html" class="menu_link">La natation</a></li> </ul> </div> <div id="clear"></div> </div> <div id="main_content_bottom"></div> <div id="footer"><strong>Copyright © 2018</strong> | <b>Design by</b> Cépé</div> </div> </body> </html>

Une fois ce code interprété par le navigateur web, nous obtenons à l’écran la page suivante :

Cette page ne contient que le texte contenu dans le fichier HTML. Pour la mettre en forme, nous utilisons un fichier de style CSS, par exemple celui dont un extrait est donné par la copie d’écran suivante.

body{background: lightgray; font-family: "Trebuchet MS", Verdana, serif;} /****************/ /* Style des id */ /****************/ #container{margin: 0 auto; width: 750px;color:black} #image_container{width:608px;height:150px;} #image_natation{width:750px;} #image_cyclisme{width:750px;} #image_course{width:750px;} #header{width: 100%;} #sub_header{text-align: right; font-weight: bold; font-size: 20px; color: white; padding-right: 20px; padding-bottom: 20px;} #header h1{margin-bottom: 0px; font-size: 28px; font-weight: bold; color: darkred;} #main_content{margin: 0 auto; width: 100%; background: white; } #main_content_top{height: 30px; background: white ;} #main_content_bottom{height: 30px; background: white; } #table_content caption {padding:5px;} #table_content table {border-collapse: collapse;} #table_content table,th,td {border: black 1px solid; padding:5px;} #footer{text-align: center; font-size: 12px; margin: 10px auto;} #clear{display: block; clear: both; width: 100%; height:1px; overflow:hidden;} /*********************/ /* style des classes */ /*********************/ .content{float: left; width: 510px; text-align: justify; padding: 0 30px 0 30px; font-size: 12px;} .content h2{margin-top: 0px; font-size: 18px; font-weight: bold; color: darkred;} .menu{width: 139px; float: right; padding: 0 20px 0 20px; border-left: darkgray 1px solid; font-size: 12px;} .menu ul{margin: 0; padding: 10px 0 10px 15px;} .menu li{padding-top: 2px; list-style-type: circle;} .menu_title{font-size: 18px; font-weight: bold; color: darkred;} .quote {margin: 20px; text-align: center; font-weight: bold; font-style: italic;} /*********************/ /* Style des balises */ /*********************/ a{color: darkred; font-weight: bold; text-decoration: none;} a:hover{color: darkred; font-weight: bold; text-decoration: underline;} a.menu_link{color: black; font-weight: bold; text-decoration: underline;} a.menu_link:hover{color: darkred; font-weight: bold; text-decoration: none;} li{color:white}

Une fois ce code relié à la page web de l’exemple précédent et interprété par le navigateur, nous obtenons à l’écran la page suivante

4. Un peu de pratique...

a) Télécharger le fichier Archive_site.zip. Dans vos documents SNT, créer un dossier web et y extraire tous les fichiers de l'archive, afin d'obtenir l'arborescence suivante :

.../SNT/web
│
├── Course.html
├── cyclisme.html
├── index.html
├── Natation.html
├── style.css
├── style_sombre.css
│   
└── images
    │
    ├── ban.jpg
    ├── Course_a_pieds.jpg
    ├── cyclisme.png
    ├── logo_fftri.svg
    └── Natation.png

Exécuter le fichier index.html avec un navigateur de votre PC. Editer-le à l’aide de Notepad++ ou Bloc-Note en effectuant un clic droit de la souris sur le fichier.

b) Repérez les différents éléments qui forment la structure de base d’une page HTML

Le doctype <!DOCTYPE html> : C’est cette ligne qui indique qu’il s’agit bien d’une page web HTML et qu’elle est écrite en HTML5. A quelle position du code HTML doit-il se trouver ?
La balise <html> : il s’agit de la balise principale du code. Elle définit un conteneur qui englobe tout le contenu de la page web. Cette balise est fermée à l’aide de la balise </html> située à la ligne du code.
La balise <head> : il s’agit d’une balise définissant le conteneur d’en-tête de la page. Ce conteneur donne des informations générales sur la page comme son titre (donné par la balise <title>), son encodage (donné par la balise <meta charset=... /> et utile pour la gestion de certains caractères), etc. Celles-ci ne sont pas affichées sur la page, mais sont extrêmement importantes puisqu’elles sont nécessaires au navigateur pour une bonne interprétation du code.
La balise <body> : il s’agit d’une balise définissant le conteneur du corps de la page. Ce conteneur contient tous les éléments qui seront affichés sur la page.

c) Le conteneur d’en-tête

Coller ci-dessous les lignes correspondantes au conteneur d’en-tête du fichier :

Précisez le titre de la page : .
Modifiez ce titre par "Le triathlon". Indiquez où il apparaît lorsque la page est exécutée par le navigateur :

Indiquez l’encodage du fichier. Expliquer ce qui se passe sur la page web si vous le remplacer l'encodage "ISO-8859-1" par un encodage "utf-8".

d) Le corps de la page web

Indiquez les lignes correspondantes au corps de la page web.

début : ligne n° fin : ligne n°

Modifiez <h1>Le triathlon</h1> en <h2>Le triathlon</h2>. Indiquez ce que vous observez sur la page web.

Dites comment mettre des mots en gras.

Mettez en gras le mot obligatoire à la ligne 31.

<p>L'enchaînement des <b>trois épreuves</b> sans pause de la part des concurrents leur impose, en plus d'être performants dans chacune des disciplines, d'effectuer des transitions rapides entre deux épreuves. Les compétiteurs doivent ainsi enlever le plus rapidement possible leur combinaison de natation à la sortie de l'eau et enfiler leur casque (obligatoire) avant de sauter - au sens propre le plus souvent - sur le vélo. Ils doivent de même descendre de manière efficace de leur monture, une fois la partie cycliste achevée et enfiler le plus rapidement possible leurs chaussures de course à pied. La rapidité à effectuer les deux transitions peut s'avérer déterminante sur des triathlons courts.</p>

Précisez quelle est la balise qui permet d’insérer une image.

A quoi sert l'attribut src, expliquer la différence entre un chemin relatif et absolu.

remplacer jpg par png dans la source du fichier et observez ce qui ce passe. Quel attribut joue son rôle à ce moment là ?
Indiquez à quoi peut servir la balise <div>.

Dans le conteneur du menu, quelle balise permet de naviguer vers d'autres pages

Lorsqu'on clique sur le lien hypertexte "Le Cyclisme", on reste sur la page du triathlon. Renseigner l'URL afin d'accéder à la page cyclisme.html
on souhaite maintenant ajouter une balise d'ancre (<a>) permettant de se diriger vers la page index.html et à la place d'un texte, on placera une image ayant pour attributs :

la source de l'image logo_fftri.svg se trouvant dans le dossier images,
l'dentifiant image_logo_fftri
le texte alternatif suivant logo FFTRI

Le résultat devra être le suivant (on ne se soucira pas encore de la taille de l'image) :

Ajouter cette même balise dans les 3 autres pages html
Remplacer Prénom Nom Classe dans le pied de page des 4 pages html par votre prénom, votre nom et votre classe

e) Liaison CSS

Copiez et collez ci-dessous la ligne de code qui permet de lier le fichier index.html à sa feuille de style.

Indiquez ce qui se passe sur la page web si on supprime cette ligne Rafraîchir la page index.html (touche F5 du clavier).

f) Fichier CSS

Ouvrez le fichier style.css à l’aide de Notepad++.
Indiquez à quoi correspondent les attributs width et height de l'identifiant image_container. Expliquez comment les modifier pour que l’image soit un rectangle de taille 750 x 191 pixels.

Imposer une largeur d'image de 140 pixels pour le logo FFTRI.

On distingue la mise en forme par :

identifiant : elles commencent par un hastag (#),
classe : elles commencent par un point (.)

Remarque : il ne peut y avoir qu'un seul identifiant dans le code html d'une page, par contre il peut y avoir plusieurs classes portant le même nom.

Les paragraphes sont créés avec les balises <p>.
Déclarer une classe ec dans le fichier style.css de telle sorte que la police de caractère soit cursive et de couleur bleu : .ec {font-family: cursive;color:#0000C0;}

Enregistrer le fichier, observez et consigner les modifications apportées à l'affichage de la page index.html.

Le dark mode peut représenter un gain d'énergie et donc plus d'économie, notamment si on a un écran OLED. En effet, les pixels de couleur sombre consomment moins d'énergie que les pixels de couleur claire, environ 20% de moins. De plus, les couleurs foncées mettent les couleurs vives en valeur. Vous allez créer un style sombre.

Sélectionner l'onglet style.css dans notepad++, dans le menu fichier cliquer sur "enregistrer sous..." puis renommer le fichier style_sombre.css
Modifiez le lien du style dans le fichier html afin qu'il soit en lien avec le style sombre.

Basculer sur le navigateur qui affiche la page d'accueil index.html et par un clic droit sur le body (corps) de la page index.html, sélectionner "inspecter".

Image inspecter

La fenêtre suivante s'ouvre :

inspection

Vous pouvez prévisualiser les modifications que vous apporterez au style de vos pages en changeant les attributs

attributs

Cliquer sur le rectangle (ou le cercle) qui se trouve après background,
choisir la couleur désirée,
copier le code de la couleur avec #,
coller le code dans le fichier style_sombre.css à la ligne 1 (comme indiqué), à la place de lightgray

Modifiez les couleurs afin de créer un mode sombre inspiré de l'image du site représenté ci-dessous.
L'attribut color, peut se rajouter dans la définition d'un style, pour définir la couleur du texte
Modifier les couleurs des éléments suivants :
- la couleur de fond (background) du corps (body),
- la couleur de fond des contenus (#content),
- la couleur du texte (color) des paragraphes, des listes, du pied de page et du tableau (p li #footer #table_content),
- la couleur de la balise h1 de l'entête et les liens vers les autres disciplines (#header a),
- la couleur de la balise h2 du contenu (.content),
- la couleur de la balise a du menu(a.menu_link),
- la couleur de la balise a du menu lorsque la souris passe sur l'hypertexte (a.menu_link:hover),

1 / 4

2 / 4

3 / 4

4 / 4

❮ ❯

5. Création d'une page supplémentaire :

Dans l'explorateur, copiez le fichier index.html et coller-le.
Renommer la copie du fichier "jo2024.html"
Editer ce fichier avec Notepad++ et remplacer les éléments permettant d'afficher les médaillés de triathlon français des Jeux olympiques de Paris 2024.
Il faudra y intégrer la bannière ci-dessous, un titre pour la page, un titre, les 2 médaillés : Cassandre Beaugrand et Léo Bergère et leur photo respective.
Bannière à télécharger :

Les images doivent être stockées dans le dossier images et leurs dimensions seront codés dans le fichier theme_sombre.css.
Modifier le menu pour ajouter un lien vers cette nouvelle page, ainsi que dans toutes les autres pages html du site.

Connectez-vous afin de pouvoir téléverser vos fichiers en ligne

Tester les liens de votre site hébergé, attention Windows ne fait pas de différences entre les lettre majuscules ou minuscules contrairement au serveur Web qui héberge votre site...

6. Grille de notation :

Points évalués :

Mode sombre: Couleur des fonds des conteneurs, Couleurs des textes, couleurs des titres et sous titres, couleurs des liens et de leur survol.
Site : Nom prénom classe modifié, présence du logo du triathlon, taille logo triathlon, lien vers la page cyclisme.
Page Jo2024 : Titre de l'onglet, présence de l'image bannière JO, Taille de la bannière, présence d'un titre, présence de sous-titre, présence d'un paragraphe, présences d'images, identifiants images et taille, lien depuis index, navigation vers page natation, image natation.

La note affichée est provisoire et sera définitive lorsque la dernière question et le QCM seront corrigés par le professeur.

1 (3.5 pts)	2 (3 pts)	4b (1 pt)	4c (2 pts)	4d (4.5 pts)	4e (1 pt)	4f (1 pt)	darkmode (4 pts)	site (2 pts)	Médaillés (10 pts)	QCM	Total (42 pts)	Note (20 pts)
											0	0

SCIENCES NUMERIQUES ET TECHNOLOGIE

D
É
C
O
N
N
E
C
T
É

Somaire

Le WEB - Le fond et la forme

1. Qu'est-ce que le Web ?

2. Surfer sur le net

3. Le fond et la forme : quelques explications…

4. Un peu de pratique...

5. Création d'une page supplémentaire :

6. Grille de notation :

SCIENCES NUMERIQUES ET TECHNOLOGIE

DÉCONNECTÉ

Somaire

Le WEB - Le fond et la forme

1. Qu'est-ce que le Web ?

2. Surfer sur le net

3. Le fond et la forme : quelques explications…

4. Un peu de pratique...

5. Création d'une page supplémentaire :

6. Grille de notation :

D
É
C
O
N
N
E
C
T
É