Le langage Html

(1)

Objectifs :

✓ Connaitre les bases du langage Html et de ses satellites CSS et JavaScript

✓ Identifier les différents composants graphiques permettant d’interagir avec une application Web

En 1989, Tim Berners-Lee a proposé à ses collègues chercheurs au CERN (Organisation européenne pour la recherche nucléaire) un moyen de partager de grandes quantités d’informations : insérer dans des textes des liens vers d’autres textes, situés sur d’autres ordinateurs, auxquels on accède à travers le réseau Internet. Cette toile d’araignée fut assez rapidement dénommée Web. Il est l’auteur du langage Html.

Le principe du langage HTML

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et d’organiser un contenu. C'est donc en HTML que sont développées les pages Web devant afficher du texte, des liens, des listes, des tableaux, des images…

HTML est un markup language. Il permet d'enrichir un texte avec des informations structurelles, sémantiques et de présentation. Le principe de HTML, commun à ce type de langages, consiste à utiliser des éléments délimités par des balises. Il permet de décrire simplement des pages destinées au World Wide Web et sera interprété pour l’affichage par le navigateur choisi par l’utilisateur final.

Les principaux navigateurs Web lisent de la même manière les pages HTML, les interprètent et affichent dans leur fenêtre principale le résultat en mode « graphique ».

Activité 1 : examiner le code source d’une page Web

Rendez-vous sur la page d’accueil site du lycée http://www.lyc-stex-mantes.ac-versailles.fr avec le navigateur Mozilla Firefox. Sur la page affichée, faites clic droit puis Code source de la page

1. Que remarquez-vous ?

Recherchez dans le code affiché l’écran le texte correspondant au premier article présenté en Une. Pour effectuer une recherche sur une page donnée, vous pouvez utiliser la combinaison de touches Crtl + F.

2. Quelles autres informations sont présentes dans le code affiché ? 3. Toutes les informations du code sont-elles visibles sur la page du site ?

Le langage Html

(2)

LGT Saint-Exupéry, Mantes-la-Jolie

Les balises

Les éléments sont délimités par des balises. On place une balise de début avant le contenu de l'élément et une balise de fin après le contenu. Dans certains cas, la balise de fin n'est pas nécessaire. Le symbole / (caractère typographique « barre oblique » ou « slash » en anglais) permet de faire la différence entre une ouverture et une fermeture de balise.

Une balise est formée en encadrant le nom de l'élément avec les symboles < et >. Cela donne par exemple pour un élément nommé element :

✓ Ouverture : <element>

✓ Contenu : laissé à la libre appréciation du concepteur du site

✓ Fermeture : </element>

Dans l'exemple suivant on définit un titre ou en-tête principal (élément ^h1). Seul le texte balisé constitue l'élément h1. Les navigateurs courants utilisent pour ce genre d'éléments une typographie plus visible.

<h1>La spécialité NSI</h1>

La spécialité NSI ou Numérique et Sciences Informatiques est l’une des 12 spécialités présentes au lycée...

Ce code produit l'affichage suivant dans un navigateur graphique :

Un certain nombre de balises n'ont pas besoin de marqueur de fin. La fin de l'élément sera déterminée automatiquement par le logiciel de navigation. Nous y reviendrons ultérieurement.

Les attributs

Les attributs permettent d'apporter certaines précisions à des éléments. Il peut s'agir par exemple d'un nom de fichier (pour placer une image) ou d'une référence à une adresse HTML (lorsqu'on crée un lien). On place les attributs dans la balise de début de l'élément concerné. La syntaxe est simple : "nom de l'attribut"="valeur de l'attribut".

Dans l'exemple suivant, on place une image (élément img). Deux attributs permettent l'un de déterminer le nom du fichier contenant l'image bandeau01.jpg et l'autre de placer une brève description de cette image.

Remarque :

✓ l'élément img n'a pas besoin de balise de fin.

✓ l'attribut alt de l'élément img est indispensable pour construire des pages accessibles.

Convention

Les noms des balises comme les attributs peuvent être écrits indifféremment en majuscules ou en minuscules. Dans l’ensemble de ce document, nous avons choisi de les écrire en minuscules.

(3)

La structure générale d’un document HTML prend la forme suivante :

D’après www.pixelcrea.com Document 1 : structure générale d’un document HTML5

Exemple

Voici un exemple de texte au format HTML :

<html>

<head>

<title>Un exemple</title>

</head>

<body>

<h1>Un titre</h1>

<h2>Un sous-titre</h2>

<b>Un passage important</b>

</section>

</body>

</html>

L’en-tête situé entre les deux balises <head> et </head> indique :

✓ que le texte est exprimé en UTF-8, c’est l’objet de la ligne <meta … </meta>

✓ que le titre de la page est « Un exemple ».

(4)

LGT Saint-Exupéry, Mantes-la-Jolie Dans un navigateur, le texte s’affiche :

L'en-tête d'un document HTML

L'en-tête <head> sert à indiquer un certain nombre d'informations relatives au document dont le logiciel de navigation ou tout autre agent logiciel peut tirer parti. En général ses informations ne sont pas affichées directement.

Quelques exemples :

✓ Indiquer une feuille de style. Cette information sera utilisée par les logiciels de navigation pour construire la mise en page du document.

✓ Fournir des mots-clés. Ceux-ci sont très utiles aux moteurs de recherche.

✓ Donner un titre au document. Ce que HTML appelle titre du document n'est pas comme beaucoup s'y attendent un paragraphe placé en haut de la page en gros caractères et séparé du texte suivant par un espacement important. Il s'agit en fait du nom du document, qui est souvent utilisé par les navigateurs comme titre de fenêtre ou d’onglet.

Le corps d'un document HTML

Il s'agit du contenu du document à proprement parler, de ce qui sera présenté à l'utilisateur. C'est un élément HTML délimité par des balises <body>.

Balises usuelles

Voici la liste des balises usuelles que vous serez susceptibles d’utiliser lors de la création de site Web.

(5)

D’après www.pixelcrea.com Document 2 : balise usuelles HTML5

(6)

Activité 2 :

Réaliser un fichier (utiliser pour cela l’éditeur de texte NotePad++) mapagehtml.html permettant d’afficher la page Web suivante :

Remarque : utilisez Wikipedia pour le texte de référence au poète…

(7)

Utiliser un même fichier pour toutes les pages d’un site Web présente plusieurs avantages :

✓ La présentation est homogène sur toutes les pages

✓ Changer de couleur tous les titres de toutes les pages se fait en un seul changement de CSS

Ajouter un peu de style : le langage CSS

Le CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») est le code utilisé pour mettre en forme une page Web.

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Il vient donc en complément du script HTML.

Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont des listes à puces et afficher leurs textes en rouge avec ce code CSS :

li {

color: red;

}

Exemple : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

Dans votre fichier mapagehtml.html de l’activité précédente, copiez la ligne suivante entre les balises <head> et

</head> au même niveau que vos balises <title>Ma première page Web</title>

De la même manière, si vous souhaitez modifier tous les titres de niveau 1 et les passer en vert, il vous suffit d’ajouter dans votre fichier style.css précédent les lignes :

h1 {

color: green;

}

Une même page HTML peut être interprétée différemment sur deux navigateurs distincts et peut s’adapter à tous les types d’écrans : smartphones, tablettes, ordinateurs.

(8)

D’après www.pixelcrea.com Document 3 : principales syntaxes du CSS3

(9)

Activité 3 :

1. Dans le texte ci-dessous, vers quel site web pointe le lien ? Quel en est l’affichage produit à l’écran.

Commentez la différence observée et précisez ce qu’il convient de faire avant de cliquer sur un lien.

Votre ordinateur présente une anomalie qu’il convient de corriger. Cliquer <a href="http://belle_arnaque.com">ici</a> pour avoir de l’aide.

2. Donner le code source HTML sur texte suivant sachant que le texte en bleu et souligné est un lien vers la page d’accueil du site du lycée.

Pour plus d’informations, consulter notre site.

3. Modifier le code source ci-dessous pour que :

✓ Le titre soit visible en plus gros

✓ La rubrique 1 soit inscrite en gras

✓ La rubrique 3 soit inscrite en italique

Titre de la page<br/>

Rubrique 1<br/>

Rubrique 2<br/>

4. Ecrire une page HTML qui présente la liste des objets ajoutés dans votre frise historique depuis le début de l’année (voir sur l’ENT). Cette page devra suivre le cahier des charges suivant :

✓ La page principale doit comporter un titre et un rapide descriptif des informations qui seront disponibles sur l’ensemble du site.

✓ Une image bandeau sera présente en entête de site.

✓ Une liste à puces avec le nom des différents objets. L’utilisateur pourra cliquer sur chaque objet (lien) et accéder à une nouvelle page.

✓ Pour chaque objet, vous créez une petite page en recopiant le texte présent dans votre frise de l’ENT et vous ajouterez la photo correspondante.

✓ Vous ajouterez une feuille de style CSS globale à l’ensemble du site permettant de définir votre charte graphique. Vous monopoliserez toutes vos qualités graphiques et esthétiques afin d’avoir un rendu agréable à la vue.

✓ En fonction du temps à votre disposition, vous pouvez personnaliser votre page à l’aide du fichier CSS pour obtenir un rendu plus professionnel.

(10)

Le Web est géré au niveau mondial par le W3C – Word Wild Web Consorsium – organisme international indépendant qui définit les standards permettant aux machines connectées de communiquer ensemble.

Le W3C définit ainsi les normes officielles de l’HTML5 et du CSS3.

Validation de votre code HTML5 et CSS

Si valider sa page web ne doit pas être un but, c'est souvent une étape primordiale pour éviter les problèmes d'affichage. En cas de problème de rendu, toujours commencer par vérifier la validité du code HTML

Un code invalide sera traité par chaque navigateur selon ses propres processus de traitement d'erreur, potentiellement variables de l'un à l'autre, car ils ne sont soumis à aucune spécification : on s'en remet donc au hasard pour déterminer l'arbre du document, c'est à dire la structure finale réelle de son document telle que le navigateur va l'utiliser pour le rendre à l'écran avec le CSS et le manipuler avec JavaScript. Les styles CSS, on l'ignore trop souvent, ne sont en effet pas appliqués au code HTML que vous avez écrit, mais au code tel qu'il a été interprété et corrigé par le navigateur, qui s'efforcera de rétablir un code valide et donc utilisable. Le résultat peut être très loin des attentes du concepteur du site.

Pour pallier ces problèmes, il existe de nombreux sites de validation du code HTML5 et CSS3 en ligne permettant de tester ses codes et d’en indiquer les erreurs. Charge ensuite au concepteur de les corriger.

Par exemple :

✓ https://validator.w3.org/

✓ http://jigsaw.w3.org/css-validator/

À la suite de la validation de votre code, vous pouvez souvent apposer un logo montrant que votre code est conforme aux normes. Cela donne un aspect plus professionnel et plus sérieux à vos projets.

Document 4 : les logos de validations W3C

Activité 4 :

1. Reprendre le code produit à l’activité 3 question 4 – HTML et CSS – et utiliser un validateur afin de détecter toutes les erreurs.

2. Corriger ensuite les erreurs mentionnées dans les fichiers HTML et CSS.

3. Apposer enfin, en bas de votre page principale, les logos « page conforme » HTML5 et CSS3.

(11)

Rendre dynamique sa page : le langage JavaScript

1. Encadrez votre titre de niveau 1 (repéré par <h1> dans votre code) car une balise <div> de cette manière :

<h1>St-Exupéry</h1>

</div>

✓ L’attribut Id d’une balise permet de lui attribuer un identifiant utile ensuite lorsque vous voudrez effectuer une action sur cette zone de <div>.

✓ L’attribut de style indique ici que l’élément doit être visible au lancement de la page 2. Ajouter un bouton sur votre page conformément à ce code :

<input type="button" id='boutonTitre' value="Masquer le titre" onclick="

if (document.getElementById('DivLeTitre').style.display == 'none') {

document.getElementById('DivLeTitre').style.display = 'block';

document.getElementById('boutonTitre').value = 'Masquer le titre';

} else {

document.getElementById('DivLeTitre').style.display = 'none';

document.getElementById('boutonTitre').value = 'Afficher le titre';

} " />

L’attribut onclick permet de définir ce qui doit être exécuté lors d’un clic sur le bouton dont le nom est donné par son Id.

Les lignes présentent entre les deux " du onclick se lisent de la manière suivante :

✓ Si l’élément dont l’Id est 'DivLeTitre' est masqué (display == 'none') alors l’afficher et changer la valeur du bouton en « Masquer le titre »

✓ Sinon, masquer l’élément et changer la valeur du bouton en « Afficher le titre »

3. Implémenter le code précédent et le tester.

Le langage ajouté comme action du onclick est du JavaScript. Il sert à gérer les actions sur des pages Web et les rendre plus dynamiques. Il peut être inséré à l’intérieur d’attribut de balise ou être géré dans un fichier séparé (fichier d’extension .js) qu’il faudra appeler dans le code de votre page Web.

Exemple :

1. Ajouter une liste déroulante avec le script suivant :

<option>Sélectionnez votre sexe</option>

<option>Homme</option>

<option>Femme</option>

(12)

Nous allons gérer le JavaScript dans un fichier séparé qu’il faudra appeler dans votre page principale grâce à :

Les listes déroulantes possèdent elles aussi leurs propres propriétés. Nous allons en retenir seulement deux parmi toutes celles qui existent :

✓ selectedIndex, qui nous donne l'index (l'identifiant) de la valeur sélectionnée

✓ options qui liste dans un tableau les éléments <option> de notre liste déroulante. Leur principe de fonctionnement est le suivant (à implémenter dans votre fichier actions.js :

var list = document.getElementById('choix');

list.addEventListener('change', function() {

// On affiche le contenu de l'élément <option>

// ciblé par la propriété selectedIndex

alert(list.options[list.selectedIndex].innerHTML);

});

Nous ne détaillerons pas plus l’usage du Javascript cette année. Si vous souhaitez plus d’informations ou vous entrainer à développer vos sites Web dynamiques, fouillez un peu sur Internet. Vous y trouverez, par exemple, les sites suivants qui vous guident pas à pas dans le développement :

✓ https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript

✓ https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript

Activité 5 :

1. Reprendre le code produit à l’activité 4 et transformer votre liste à puce en liste déroulante (balises

<select> et <option>)

2. Ajouter une zone d’affichage <div Id=’ZoneAffichage’></div>

3. Ajouter une action JavaScript qui, à chaque changement de sélection dans la liste déroulante, modifiera le contenu de la div précédente pour qu’elle affiche le nom de l’objet sélectionné.

En résumé

Les 3 langages vus précédemment sont complémentaires et permettent d’obtenir un site complet, tant sur le contenu que la forme.