SNT - Web - Les langages du Web

Le World Wide Web relie plus de 50 % de la population mondiale et on compte sans doute plus de 1,5 milliards de sites Web.

Crédits

Une partie de la structure css/js et du code html ont été réalisés par Nicolas Buyle-Bodin professeur au lycée Lacassagne, avec l'aide de Jean-Manuel Mény, professeur au lycée de la plaine de l'Ain. Ils ont travaillé pendant plusieurs centaines d'heures pour créer un site de formation à destination des enseignants du secondaire de l'académie de Lyon d'une grande qualité visible sur le portail Mathématiques du site académique. Ils ont eu la gentillesse de placer leur code source sous licence Creative Commons BY-NC-SA Respect de la Paternité - Pas d'utilisation commerciale - Partage des conditions initiales à l'identique..

Nous les en remercions chaleureusement.

Ce document est placé de même sous licence Creative Commons BY-NC-SA Respect de la Paternité - Pas d'utilisation commerciale - Partage des conditions initiales à l'identique..

Langage HTML

Les bases du langage HTML

Pour commencer, visionner la vidéo ci-dessous qui présente les fondements du langage HTML. Elle est aussi disponible en lienmini page 62 du manuel Delagrave.

Source : HTML contenus, structure, liens from Université Lille SHS on Vimeo.

Une page Web est écrite en langage HTML, acronyme de Hypertext Markup Language, qui est un langage de description de document créé par Tim Berners-Lee pour relier des documents sur le réseau mondial Internet à l'aide de liens hypertextes.

Le langage HTML est normalisé par le consortium W3C, qui définit les standards du Web, ainsi une page Web codée en HTML peut être affichée dans un navigateur récent (supportant les derniers standards) sur n'importe quelle machine.

Le code source en HTML est écrit dans un fichier texte qu'on peut éditer avec un logiciel éditeur de texte comme Notepad++ ou un éditeur spécialisé comme Brackets ou geany. Ce fichier texte est envoyé par le serveur au client dont le logiciel navigateur interprète le code et génère l'affichage.

Dans un navigateur, on peut obtenir le code source d'une page Web :

En HTML, un lien hypertexte s'écrit <a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee"> Tim Berners-Lee </a> : le texte du lien est entouré d'une balise ouvrante <a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee"> et d'une balise fermante </a>.

Un document HTML possède une structure arborescente définie par l'imbrication des différentes balises. Voici un document HTML de structure minimale. Ce document peut être téléchargé par ce lien de téléchargement :

  	
<!DOCTYPE html> 

<html lang="fr">

<head> 
<meta charset="UTF-8">
<meta name="author" content="Frederic JUNIER" > 
<title>Titre de la page - Lisible sur l'onglet du navigateur</title>
</head> 

<body> 

<h1>Le langage HTML </h1> 
<p> 
Il est <strong>important</strong> de respecter l'imbrication
des balises en <a href="https://fr.wikipedia.org/wiki/Hypertext_Markup_Language">HTML</a>.


Les saut de ligne précédents  figurent dans le fichier source mais ne sont pas affichés. <br>
Le dernier saut de ligne était marqué par une balise et il est affiché.
</p>
<p> Un autre paragraphe. </p>

<!-- Fermeture du corps de page, ceci est un commentaire-->
</body> 
</html>
  	
  
Voici l'affichage obtenu : Et voici la structure arborescente du document :

Détaillons cette structure de base :

Exploration d'une page Wikipedia

Un corrigé video partiel est accessible sur la chaîne https://tube.ac-lyon.fr/video-channels/lyc_parc_snt/videos

  1. Ouvrir dans un onglet la page Wikipedia du poète Arthur Rimbaud https://fr.wikipedia.org/wiki/Arthur_Rimbaud
  2. Dans la phrase Il entretient une aventure amoureuse tumultueuse avec le poète Paul Verlaine. , déterminer la balise HTML qui génère le lien hypertexte en faisant un clic droit sur le lien puis en sélectionnant Examiner l'élément, qui fait basculer dans l'onglet Inspecteur de la fenêtre des outils de développement (accessible aussi avec la touche F12). Modfier l'URL du lien pour le faire pointer sur page Wikipedia de Charles Baudelaire.
  3. Sélectionner le titre Arthur Rimbaud de la page, faire un clic droit, puis examiner l'élément.Remplacer la balise <h1> par <h2>, puis <h3>, puis <h4>. Que peut-on remarquer ?
    Les balises de titre sont présentées dans le point de cours 2 ci-dessous.
  4. chambre
  5. Sélectionner Arthur Rimbaud au début du premier paragraphe puis examiner cet élément. Dans quelle balise HTML est-il inséré ? Remplacer cette balise dans la fenêtre des outils de développement par <em> Arthur Rimbaud </em>. Quel est l'effet obtenu ?
  6. Dans le paragraphe Famille et enfance de la partie Biographie, on trouve la liste suivante. Examiner cet élément avec l'Inspecteur. Repérer la balise <ul> qui enveloppe la liste. Quelles balises contiennent les différents items de la liste ? Remplacer la balise <ul> par <ol>. Que remarquez-vous ? Les balises de titre sont présentées dans le point de cours 3 ci-dessous.
  7. Dans l'Inspecteur, déplier la balise d'en-tête <head> et remplacer Arthur Rimbaud par Charles Baudelaire dans la balise <title>. Quel changement peut-on observer ? (Regarder en haut de la fenêtre)
  8. Remplacer les deux premiers paragraphes de la page Wikipedia d'Arthur Rimbaud par ceux de la page Wikipedia de Charles Baudelaire. Chaque paragraphe est contenu dans une balise <p>. Pour copier un paragraphe, on procède ainsi :
    • On sélectionne le paragraphe çà copier dans la page de Charles Baudelaire, on fait un clic droit pour l'examiner puis dans l'inspecteur on fait un clic droit sur la balise <p> correspondante et on choisit l'option Copier l'extérieur du HTML.
    • On sélectionne le paragraphe à remplacer dans la page d'Arthur Rimbaud, on fait un clic droit pour l'examiner puis dans l'Inspecteur on fait un clic droit sur la balise <p> correspondante et on choisit l'option Coller l'extérieur du HTML.
  9. Dans la page Wikipedia d'Arthur Rimbaud , examiner avec l'Inspecteur la photo représentant Arthur Rimbaud en Octobre 1871. Quelle est la balise contenant l'image ? L'image est cliquable, pourquoi ? Ouvrir ce lien dans un nouvel onglet (clic droit puis choisir la bonne option). Qui est l'auteur de cette photo ? Sous quelle licence est placée cette image ? Quelles sont les autorisations données par cette licence ?
  10. Dans la page Wikipedia de Charles Baudelaire, examiner avec l'Inspecteur la photo représentant Charles Baudelaire vers 1862.
    Qui est l'auteur de cette photo ? Sous quelle licence est-elle placée ? Quelles sont les autorisations données par cette licence ?
    Dans la page Wikipedia d'Arthur Rimbaud , remplacer le portrait d'Arthur Rimbaud par celui de Baudelaire. Modifier également le lien Etienne Carjat en-dessous de la photographie pour qu'il pointe vers https://fr.wikipedia.org/wiki/%C3%89tienne_Carjat et non vers https://fr.wikipedia.org/wiki/Arthur_Rimbaud_par_Carjat.
    Ci-dessous un aperçu de la page Wikipedia modifiée (dans notre navigateur uniquement, les modifications disparaissent dès qu'on rafraîchit la page 🤣 🤩 🤪 !!!)
  11. Cliquer sur le lien Voir le texte source en haut de la page Wikipedia d'Arthur Rimbaud . Sous quelles conditions peut-on modifier cette page sur le serveur de Wikipedia ? Est-ce le cas également pour la page https://fr.wikipedia.org/wiki/Arthur_Rimbaud_par_Carjat ? A votre avis pourquoi ?
    Revenons sur la page Wikipedia d'Arthur Rimbaud , quelle est la dernière modification apportée à cette page ?
  12. baudelaire

Remettre les balises dans l'ordre

Un corrigé video partiel est accessible sur la chaîne https://tube.ac-lyon.fr/video-channels/lyc_parc_snt/videos

Lien vers le corrigé sur repl.it : https://repl.it/@fredericjunier/SNT-Web-Activite3-Exercice2

chambre Corriger les erreurs de syntaxe et d'imbrication de balises dans le code ci-dessous pour obtenir l'affichage précédent.

Code HTML possible

Voir

Cliquer dans l'encadré pour afficher le code.

Exemple d'affichage

Voir

Balises de mise en forme

Voici quelques exemples de balises de mise en forme.

Sémantique Syntaxe Affichage
Paragraphe <p>Paragraphe 1</p> <p>Paragraphe 2</p>

Paragraphe 1

Paragraphe 2

Titre de niveau 1 <h1>Titre</h1>

Titre

Titre de niveau 2 (il existe six niveaux de titre de 1 à 6 par ordre décroissant d'importance) <h2>Titre</h2>

Titre

Texte important (en gras par défaut) <strong>Texte</strong> Texte
Texte particulier (en italique par défaut) <em>Texte</em> Texte
Insertion d'un lien hypertexte à partir de son URL <a href="https://interstices.info/un-moteur-de-recherche-pour-le-meilleur-et-pour-le-pire/"> Lien </a> Lien
Insertion d'une image à partir de son URL <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png" alt="image absente"> Tux

Mise en forme du texte et insertion d'hyperliens dans une page HTML

Un corrigé video partiel est accessible sur la chaîne https://tube.ac-lyon.fr/video-channels/lyc_parc_snt/videos

Lien vers le corrigé sur repl.it : https://repl.it/@fredericjunier/SNT-Web-Activite3-Exercice3

moteur de recherche

Listes non ordonnées <ul>

Une liste non ordonnée ou liste à puces est délimitée par une balise ouvrante <ul> et une balise fermante </ul>.

Entre ces balises, on insère chaque item de la liste entre une balise ouvrante <li> et une balise fermante </li>.

On peut paramétrer les symboles précédant les items, voir la page listes de w3schools.

Listes ordonnées <ol>

Une liste ordonnée est délimitée par une balise ouvrante <ol> et une balise fermante </ol>.

Comme pour les listes non ordonnées, on insère entre ces balises chaque item de la liste entre une balise ouvrante <li> et une balise fermante </li>.

On peut paramétrer les symboles précédant les items, voir la page listes de w3schools.

Insertion de listes dans une page HTML

Un corrigé video partiel est accessible sur la chaîne https://tube.ac-lyon.fr/video-channels/lyc_parc_snt/videos

Lien vers le corrigé sur repl.it : https://repl.it/@fredericjunier/SNT-Web-Activite3-Exercice4

Langage CSS

Les bases du langage CSS

Pour commencer, visionner la vidéo ci-dessous qui présente les fondements du langage CSS. Elle est aussi disponible en lienmini page 62 du manuel Delagrave.

Source : 4.3 Mise en forme S3 from Université Lille SHS on Vimeo.

Le CSS pour Cascading Style Sheets est le langage qui permet de gérer l'apparence et le positionnement des éléments HTML d'une page web:

Le langage CSS est normalisé par le consortium W3C, qui définit les standards du Web, ainsi une page Web codée en HTML/CSS peut être affichée dans un navigateur récent (supportant les derniers standards) sur n'importe quelle machine.

Le

Sur cette page du site W3schools, on trouvera une démonstration de la puissance du CSS pour modifier l'apparence d'une même page HTML. Une démonstration similaire est disponible sur csszengarden

Un fichier texte au format CSS est un ensemble de blocs de déclaration de style qui s'appliquent un sélecteur selon la syntaxe suivante :

selecteur

Un fichier au format CSS s'appelle aussi une feuille de style.

Chaque bloc de déclaration de style délimite par des accolades, une ou plusieurs déclarations de styles de la forme propriete : valeur ; . Il ne faut pas oublier les deux points : pour séparer propriété et valeur et le point virgule pour terminer chaque déclaration de style.

Les propriétés CSS étant très nombreuses, on s'appuie sur des sites comme W3schools.

Avec le navigateur Firefox, on peut afficher dans une fenêtre de développement le style d'un élément de la page en le sélectionnant puis en choisissant Examiner cet élément. On peut aussi ouvrir la fenêtre de développement avec F12. Pour cet élément Firefox on pourrait observer la déclaration de style :

	
strong {
	text-decoration: none;
	font-weight: bold;
	color: #212529;
}

/* Ceci est commentaire en CSS
On peut l'écrire sur plusieurs lignes
*/

On peut insérer des commentaires multilignes dans un fichier CSS, ils sont délimités par les caractères /* et */ (voir ci-dessus).

Si on inspecte l'élément Firefox avec l'inspecteur, on observe des règles plus complexes car certaines sont héritées de ses éléments parents dans la structure HTML du document. Du fait de cette propriété d'héritage on parle de feuille de styles en cascades.

examiner element

Le langage CSS permet d'attribuer des propriétés à des éléments HTML mais il permet aussi de combiner les sélecteurs avec des opérateurs pour cibler finement les éléments. La page CSS Diner propose d'apprendre les opérateurs sur les sélecteurs CSS de façon ludique.

Une bonne pratique est de regrouper toutes les déclarations CSS associées à une page HTML dans fichier externe, par exemple mystyle.css qui est lié à la page HTML par l'insertion dans celle-ci d'une balise <link> dans la balise d'en-tête <head> du fichier HTML. L'attribut href prend pour valeur l'URL de la feuille de style CSS. On parle de feuille de style externe.


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 


Jouer avec les propriétés CSS

On considère la page Web définie par les codes HTML et CSS ci-dessous.

Associer une feuille de style CSS à un document HTML

Un corrigé video partiel est accessible sur la chaîne https://tube.ac-lyon.fr/video-channels/lyc_parc_snt/videos

Lien vers le corrigé sur repl.it : https://repl.it/@fredericjunier/SNT-Web-Activite3-Exercice6