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 :

Remettre les balises dans l'ordre

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

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

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