logoSCIENCES NUMERIQUES ET TECHNOLOGIE

Niveau : Seconde SNT


  1. Maîtriser son environnement
  2. Le Web
  3. Internet
  4. Les données
  5. La géolocalisation
  6. Les images numériques
  7. Photographie numérique
  8. L'informatique embarquée
  9. Enjeux Sociétaux
Accueil

D
É
C
O
N
N
E
C
T
É

Le WEB - Le fond et la forme

1. Qu'est-ce que le Web ?

Répondre aux questions suivantes :

  • Que signifie les trois lettres www ?

  • Qui a créé le web et en quelle année ?

  • Comment peut-on naviguer entre plusieurs pages d'informations ?

  • qu'est-ce qu'une URL ?

  • Où sont stockés les sites web ?

  • Quel est le rôle d'un navigateur ?

  • 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 :

icone1
icone2
icone3
icone4
icone5
icone6

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.

En langage HTML, les chevrons < et > encadrent le nom de la balise. ceux-ci ne seront pas affiché dans la page web mais interprété par le navigateur pour donner un style.

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 : d’un fichier 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 suivant.

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 :

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

Depuis l'explorateur de fichier, se rendre dans le sous-dossier web, puis ouvrir le fichier index.html en faisant un double-clic. La page devrait s'afficher dans le navigateur Internet de votre PC.

Revenir dans l'explorateur de fichier, puis l'ouvrir avec Notepad++ en effectuant un clic droit de la souris sur index.html.

notepad

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 n° 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) Analyse de l’en-tête : head

  • 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 :

    • encodage

  • Indiquez l’encodage du fichier lu par Notepad++ (voir image ci-dessus), puis expliquer ce qui se passe sur la page web si vous le remplacer l'encodage "ISO-8859-1" par celui indiqué dans Notepad++.

d) Analyse du corps de la page web : body.

  • Indiquez les numéros des lignes correspondantes au corps de la page web.

  • Remplacer les balises <h1> par des balises <h2>, du titre "Le triathlon" de la ligne 24. Indiquez ce que vous observez sur la page web.

  • Dans le paragraphe entre les balises (<p> et </p>) commençant par "<p>L'enchaînement des trois épreuves sans pause ...", dites comment trois épreuve à été mis en gras.

  • Dans le code html ci-dessous, mettre en gras le mot obligatoire à la ligne 31, en ajoutant les bonnes balises.

  • Dans le navigateur Internet, cliquer avec le bouton droit de la souris, sur l'image de la banière, puis sélectionner inspecter. Indiquer quelle est la balise qui permet d’insérer une image.

    • chemin

  • déplacer la souris sur le texte souligné à côté de src (n°1 de la photo). D'après vous, à quoi sert l'attribut src ? Expliquer la différence entre un chemin relatif (n°1 de la photo) et le chemiin absolu (n°2 de la photo).

  • Dans index.html, remplacer l'extension du fichier source jpg par png et observez ce qui ce passe en rafraîchissant la page Internet. Quel attribut permet d'afficher un texte lorsque l'image source n'est pas chargée ?

    Remettre la bonne extention jpg à l'image

  • Dans la zone permettant d'inspecter le code html de la page, cliquer sur les balises <div>.vous pouvez aussi cliquer sur les petits triangles se trouvant à gauche de la balise div, pour en trouver d'autres. Indiquez à quoi elle servent.

    • triangle

    menu

  • Inspecter le conteneur du menu, puis indiquer quelle est la balise qui permet de naviguer vers d'autres pages html ?

  • Lorsqu'on clique sur le lien hypertexte "La natation" (attribut href, on reste sur la page du triathlon (index.html). Dans le code html, renseigner l'URL permettant d'accéder à la page natation.html lorsqu'on clique sur le texte "La natation" du menu.

    • Dans le menu, on souhaite maintenant ajouter le logo du triathlon et lorsqu'on clique dessus, on affiche la page d'accueil index.html.

    Pour insérer un lien hypertexte sur une image en HTML, on utilise la balise <a> (lien) autour de la balise <img> (image).

    Voici la structure :

    Explication :

    • <a href="ma_page.html"> → définit le lien hypertexte (l’URL vers laquelle on sera dirigé).
    • <img src="image.jpg" alt="Description de l'image"> → affiche l’image.
    • En plaçant la balise <img> à l’intérieur de <a> ... </a>, le clic sur l’image agit comme un clic sur le lien texte.
  • Placer l'image du logo du triathlon après "Les disciplines" et au-dessus du lien vers la page "Le cyclisme"
  • Les attributs de l'image du logo seront les suivantes :
    • src : la source de l'image logo_fftri.svg se trouvant dans le dossier images,
    • id : l'identifiant image_logo_fftri
    • alt : le texte alternatif suivant logo FFTRI (si la source n'est pas trouvée).

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

    resultat ancre

  • Ajouter cette même ligne de code dans les 3 autres pages html (Natation.html, cyclisme.html et course.html).
  • Dans le conteneur ayant l'identifiant "pied_de_page", remplacer Prénom Nom Classe 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 style.css.

  • 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_triathlon. 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 hashtag (#),
    • 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>.

  • Modifier la classe perso dans le fichier style.css comme suit :
    .perso {font-family: cursive; color:white; background-color:#0000C0;}, puis enregistrer le fichier.
  • Dans la page index.html, remplacer :
    • <p>Le triathlon est une discipline sportive constituée ...
    • par <p class="perso">Le triathlon est une discipline sportive constituée ...

    Enregistrer le fichier html, rafraîssissez la page dans le navigateur, puis observez et décrivez les modifications apportées à l'affichage.

    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

      1. Cliquer sur le rectangle (ou le cercle) qui se trouve après background,
      2. choisir la couleur désirée,
      3. copier le code de la couleur avec #,
      4. 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 conteneurs (#conteneur...),
      • 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),

      theme sombre

1 / 4
2 / 4
3 / 4
4 / 4

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

  1. Dans l'explorateur, copiez le fichier index.html et coller-le.
  2. Renommer la copie du fichier "jo2024.html"

  3. 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.
  4. 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.
  5. Bannière à télécharger :
  6. Les images doivent être stockées dans le dossier images et leurs dimensions seront codés dans le fichier theme_sombre.css.
  7. 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 :

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)		QCMTotal
(42 pts)		Note
(20 pts)
0 0