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.
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 :
avec la combinaison de touches CTRL + U ou en cliquant
sur le bouton droit de la souris à un endroit quelconque de la page avant de
sélectionner Voir le code source ;
avec l'inspecteur disponible dans la fenêtre d'outils de développement accessible après appui
sur la touche F12 ; on peut aussi inspecter un élément sélectionné avec la souris.
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 sauts 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 :
La première balise est toujours <!DOCTYPE html>,
elle indique qu'il s'agit d'un fichier écrit en HTML.
Ensuite, on trouve la balise balise ouvrante <html>
qui est la racine du document. Elle correspond à
une balise fermante </html>
qui termine obligatoirement le document.
A l'intérieur de la racine <html>,
on a forcément un en-tête, délimité
par la balise ouvrante <head>
et la balise fermante </head>.
Dans l'en-tête, sont placées des informations qui ne seront pas affichées par le navigateur.
Le titre, affiché dans l'onglet,
est inséré entre la balise ouvrante <title> et la balise fermante </title>.
L'encodage des caractères, l'auteur, mes mots clefs pour les robots d'indexation sont insérés
dans des balises <meta>. Dans Firefox, on peut lire ces metainformations, avec un clic droit
puis en choisissant Informations sur la page.
On remarque qu'il existe deux types de balises :
Des balises comme <head> constituées
d'une balise ouvrante
et d'une balise fermante,
elles s'utilisent comme des parenthèses et peuvent être imbriquées.
Une mauvaise imbrication de balises constitue une des erreurs de syntaxe les plus courantes.
Des balises bien imbriquées :
<a> ... <b> ... </b> ... </a>
Des balises mal imbriquées :
<a> ... <b> ... </a> ... </b>
Des balises de type marqueur comme <meta>,
qui s'utilisent toutes seules.
Dans la racine <html>, après l'en-tête<head>, le contenu affiché par le navigateur
va se trouver dans le corps du document, délimité par la
balise ouvrante <body>
et la balise fermante </body>.
Parmi les éléments les plus courants, qui structurent le corps du document,
on trouve des balises de type bloc qui se superposent
avec un saut de ligne par défaut entre deux blocs:
Les paragraphes délimités par une
balise ouvrante <p> et une balise fermante </p>.
Les titres délimités par une balise ouvrante
<h1>
et une balise fermante </h1>.
A l'intérieur d'une balise de type bloc, comme un paragraphe,
on peut insérer des balises de type en-ligne qui ne sont pas suivies de saut de ligne
et peuvent se juxtaposer sur la même ligne.
Un lien hypertexte est inséré avec une balise
<a> dont l'attribut href doit
être renseigné avec une chaîne de caractères entre guillemets
correspondant à l'URL
de la ressource liée.
Pour signaler un terme important, on peut le placer entre une balise ouvrante
<strong> et une balise fermante </strong>.
Dans un document HTML, Les indentations ainsi que les commentaires ne sont pas obligatoires (ils ne sont pas interprétés par le navigateur),
mais ils permettent de mieux se repérer dans le fichier source.
Par ailleurs les sauts de ligne dans le fichier source ne sont pas interprétés par le navigateur. Pour effectuer un saut de ligne, on utilise soit une balise de type bloc comme
un paragraphe <p> ou la balise <br> de type marqueur.
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.
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.
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 ?
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.
Jean Nicolas Frédéric (1853-1911) le ;
Jean Nicolas Arthur le ;
Victorine Pauline Vitalie, le (elle mourut le mois suivant) ;
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)
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.
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 ?
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 🤣 🤩 🤪 !!!)
Mise en forme du texte et insertion d'hyperliens dans une page HTML
Ouvrir le fichier https://repl.it/@fredericjunier/SNT-Web-Activite3-Eleve , et struturer le document HTML
avec les balises qui permettent d'obtenir le même affichage
que ci-dessus (cliquer sur l'image pour l'agrandir). Le fichier image a pour URL
https://frederic-junier.org/SNT/Theme1_Web/media/schema-index2.jpg (source https://interstices.info)
. Les URL des liens hypertextes sont dans l'ordre :
Lorsque le résultat est correct, télécharger le projet en tant qu'archive zip puis extraire l'archive dans un un dossier pertinent de son espace personnel sur le réseau pédagogique.
Éditer le fichier index.html avec Notepad++, modifier quelques caractères, puis ouvrir le même fichier avec un navigateur Web pour vérifier si l'affichage
a pris en compte le changement du code source.
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>.
Structurer l'énumération des moteurs de recherche de vérification d'information avec les balises adaptées.
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.
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:
l'apparence : : la couleur, l'épaisseur et le style du trait, l'encadrement ...
le positionnement : : l'organisation des blocs dans la page ...
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 :
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.
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.
A l'aide de la page
https://www.w3schools.com/css/css_text.asp
, changer les propriétés d'alignement et de décoration des textes contenus dans les différents éléments
HTML.
Lorsque le résultat est correct, copier le code CSS dans le fichier style.css du projet
https://repl.it/@fredericjunier/SNT-Web-Activite3-Exercice4
et l'enregistrer dans le fichier style.css.
Ensuite, insérer une
balise <link rel="stylesheet" type="text/css" href="style.css">
dans la balise <head> de
index.html et enregistrer.
Vérifier qu'en ouvrant
index.html, les déclarations de style sont bien prises en compte.
Télécharger le projet en tant qu'archive zip puis extraire l'archive dans un un dossier pertinent de son espace personnel sur le réseau pédagogique.
Éditer le fichier index.html avec Notepad++, modifier quelques caractères, puis ouvrir le même fichier avec un navigateur Web pour vérifier si l'affichage
a pris en compte le changement du code source. Tester de même des modifications du fichier de style style.css.
Et voici la structure arborescente du document :
Corriger les erreurs de syntaxe et d'imbrication de balises dans le code ci-dessous pour obtenir l'affichage précédent.
