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;} #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 */ /*********************/ .ec{font-family: cursive;} .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

Par un clic droit sur le body (corps) de la page sélectionner "inspecter". La fenêtre suivante s'ouvre :

inspection

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

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 #,
classe : elles commencent par un .

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 meme nom.

Les paragraphes sont créés avec les balises <p>. Observez les lignes 26 et 28 du fichier index.html. Précisez la différence observée.

Déclarer une classe ec de tel sorte que la police de caractère soit cursive (font-family: cursive;)

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.
Editer avec notepad++ le fichier style_sombre.css qui est pour le moment identique au fichier style.css
Modifiez le lien du style dans le fichier html afin qu'il soit en lien avec le style sombre.
Modifiez les couleurs afin de créer un mode sombre inspiré de l'image du site représenté ci-dessous. Les couleurs modifiées sont :
- la couleur de fond du corps (body),
- la couleur de fond des contenus (#content),
- la couleur les paragraphes, des listes , du pied de page et du tableau (p li #footer #table_content),
- la balise h1 de l'entête et les liens vers les autres disciplines (#header a),
- la balise h2 du contenu (.content),
- la balise a du menu(a.menu_link),
- 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 suplémentaire :

Copiez les éléments nécessaires pour créer un nouvelle page html qui se nommera jo2024.html, dans la quelle vous mettrez les médaillés français des Jeux olympiques de Paris 2024.
Il faudra y intéger 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.
Les images doivent être stockées dans le dossiers images et leurs dimensions seront codés dans le fichier theme_sombre.css.
Implantez le menu et ajouter un lien vers cette nouvelle page, ainsi que dans toutes les autres pages html.
Bannière à télécherger :

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

6. Grille de notation :

La note affichée est provisoire et sera définitive losque la dernière question sera corrigée 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 (2 pts)	site (2 pts)	Médaillés (10 pts)	Total (24 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 suplé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 suplémentaire :

6. Grille de notation :

D
É
C
O
N
N
E
C
T
É