- compléments HTML : balises, caractères spéciaux
Nous avons déjà complété un fichier HTML dont la structure était donnée. Nous allons maintenant découvrir différentes balises. Pour mémoire, un fichier HTML est du texte dont les catégories de mise en page et de mise en forme sont indiquées par des balises (appelées tag en anglais). Un exemple de fichier HTML simple est donné (cf. ex_html1.html).
La partie <head> contient, entre autre, les
informations destinées au navigateur pour qu'il affiche correctement
la page et pour faciliter le travail des moteurs de recherche. La
partie <body> contient le contenu de la page qui
est affiché par le navigateur.
Entêtes des fichiers HTML <head>
Une des informations donnée dans l'entête est le codage des caractères utilisé pour écrire la page web, grâce à la balise ci-dessous.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Elle indique que le codage de caractères utilisé pour le fichier est de l'UTF-8 dans cet exemple.
-
Ajoutez la balise de codage donnée précédemment dans le fichier exemple,
à l'intérieur de la balise
<head>, en première position. - Ouvrez le fichier dans votre navigateur. Est-ce que le texte est lisible ?
- Si non, pourquoi et comment faire pour qu'il s'affiche correctement ?
Caractères spéciaux
Nous venons de voir que le codage du fichier source HTML doit être le même que celui utilisé par le navigateur pour lire les informations, sinon l'affichage des lettres qui ne font pas partie du code ASCII n'est pas correct.
Une façon de s'affranchir du codage est de ne pas utiliser ces
caractères spéciaux, mais leur codage à l'aide des entités HTML. Par
exemple, le 'é' est codé par é où eacute est
le nom du caractère précédé de & et suivi de
;.
Dans les tableaux de la page http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
vous trouverez tous les noms des caractères spéciaux dans la colonne
"name". Il suffit de les entourer de & et
; pour les utiliser dans une page web. Dans les faits,
les entités ne sont pas utilisées pour représenter les caractères
accuentés, par contre d'autres caractères spéciaux doivient être
représentés à l'aide des entités comme les symboles <
et > qui sont les marqueurs des balises, mais qui
peuvent aussi être des caractères utilisés dans le texte d'une page
web.
En vous aidant des tableaux des entités HTML, faites en sorte que le texte suivant aparaisse dans votre page, affichée par votre navigateur :
5 > 4
Les balises des éléments de bloc
De nombreuses balises permettent de spécifier dans quelle catégorie de mise en page se trouve un texte (est-ce qu'il s'agit d'un titre, d'un paragraphe ou d'une liste… ?). Ces balises délimitent les éléments dit de bloc (ou boites). Tout texte ou élément présent dans une page HTML doit être dans une balise d'élément de bloc. Ces balises doivent être ouvertes et fermées. Les blocs ainsi générés par ces balises sont indépendants et structurent les pages web. Il y a un saut de ligne avant et après leur contenu. Par défaut, deux éléments de bloc sont l'un en dessous de l'autre. Exemples de balises HTML délimitant des éléments de bloc :
<h2>Ceci est un titre de niveau 1</h2> <h3>Ceci est un titre de niveau 2</h3> <h3>Ceci est un titre de niveau 3</h3> <p>Ceci est un paragraphe</p> <ul> <li>Ceci est un élément d'une liste non numérotée</li> <li>Ceci est un 2ème élément d'une liste non numérotée</li> </ul> <ol> <li>Ceci est un élément d'une liste numérotée</li> <li>Ceci est un 2ème élément d'une liste numérotée</li> </ol>
Copiez-collez ce texte avec balises dans votre page web et observez la mise en forme produite.
Les balises des éléments en ligne
D'autres balises viennent compléter les éléments de bloc, celles des éléments en ligne. Elles ont plusieurs fonctions comme préciser la mise en forme de parties du texte (mise en gras, en italique, en couleur…) ; la création de liens hypertextes ou encore l'insertion d'images. Leur contenu est en continu avec le contenu qui les contient, sans séparation. Vous avez pu constater lors de l'activité 1 que les images sont bien des éléments en ligne puisqu'elles s'insèrent au milieu du texte, sans retour à la ligne. Un élément en ligne est forcément inclu dans un élément en bloc. Exemples de balises HTML délimitant des éléments en ligne :
<p>Ceci est un paragraphe avec des éléments <b>en gras</b> ou <i>en italique</i>. Il y a un retour à la ligne à la fin de cette phrase <br />. C'est une balise qui ne se ferme pas. Il y a aussi un <a href="http://fr.wikipedia.org/wiki/URL">lien hypertexte</a> vers un autre site et une image <img src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" />. </p>
Copiez-collez ce texte avec balises dans votre page web et observez la mise en forme produite. Vous remarquerez que l'image apparait en grand dans la page. Les attributs
height="" et
width="" permettent de changer la taille d'une image, en
précisant les valeurs désirées en pixels. Essayez de donner à l'image
une taille raisonnable.
- Affichez le fichier ex_html2.html dans votre navigateur. Est-ce que l'affichage semble correct ?
- Ouvrez le fichier à l'aide de votre éditeur de texte et corrigez les erreurs de syntaxe HTML.
- Affichez de nouveau le fichier et vérifiez que l'affichage est conforme à ce qui est attendu.
- Une fois que vous pensez avoir corrigé toutes les erreurs, testez votre fichier à l'aide du validateur du consortium W3C : http://validator.w3.org/
- Au fur et à mesure de vos corrections, complétez la liste des conseils pour avoir une page web valide.
Arboresence des fichiers
Le lien interne et l'adresse relative: comment s'écrit une URL relative?
1. Ressource située dans le même répertoire que la page d'appel
La valeur prise par l'attribut href est simplement le nom du fichier, par exemple href="index.html".
2. Ressource située dans un sous-répertoire du répertoire contenant la page d'appel
Il suffit de citer la suite des sous-répertoires jusqu'au fichier ressource, par exemplehref="archives/2001/18072001.html".
3. Ressource située dans un répertoire contenant la page d'appel
Il faut remonter successivement chaque répertoire par "../". Dans cet exemple, le répertoire visé est le supérieur hiérarchique
de deuxième rang (le grand-père) : href="../../index.html".
4. Ressource située dans un répertoire situé dans une branche latérale
Il faut remonter au répertoire commun par "../" puis redescendre la bonne branche, par exemple href="../../produits/convecteurs/rh2200x.html".
5. Remarque importante: privilégier l'adresse relative
Lors de la création d'un site destiné à un seul serveur, tous les liens internes doivent être sous forme relative. En effet, on développe sur sa propre machine avant de transférer sur le serveur l'ensemble du site créé. Si les liens internes sont sous forme absolue, ils seront perdus après le transfert : les noms de répertoires ne seront peut-être pas les mêmes sur le serveur !
De plus, utiliser une adresse relative au lieu d'une adresse absolue permet au routeur de ne pas avoir à résoudre à chaque requête le chemin vers le serveur. Cette opération prend du temps, rendant ainsi la page plus longue à charger.
Reprendre la page html écrite la semaine précédente pour répondre à la question posée sur un des aspects des sciences du numériques et créer un répetoire IMG sur le bureau contenant les images de la page.
