A. Les bases du (X)HTML

Une page web est un fichier contenant du texte, généralement dans le langage HTML ou XHTML.
Remarque sur le XHTML : XHTML est la nouvelle version de HTML.

A1Pour voir cela, faites un clic droit dans la page web du TP et cliquez sur Code source de la page (ou Menu Afficher → Code source de la page). Une fenêtre s'ouvre : elle contient le code de la page en langage HTML. A2Analysez le contenu du fichier HTML.

Le document est la page web telle que nous la visionnons. Il faut donc 2 outils : un outil d'édition qui permet d'éditer le texte du fichier et un outil de visualisation pour voir le document final.

Il existe différents outils d'édition comme les éditeurs de texte brut (gedit) ou des outils plus dédiés (comme KompoZer) qui permettent de taper le code HTML ou d'utiliser les assistants graphiques. Les outils de visualisation correspondent aux navigateurs tels que Firefox, Internet Explorer, ...

Récupérez le fichier pp.html et copiez-le dans un répertoire TP7 que vous créerez. Il contient certaines des principales balises (ou marqueurs) (X)HTML ainsi qu'un faux textele fameux lorem ipsum très utilisé comme texte de remplissage. destiné à remplir cette page de test. Ce fichier vous servira de canevas pour cette partie du TP.
Ouvrez-le avec l'éditeur gedit (Accessoires->gedit) et le navigateur firefox : l'éditeur vous montre le contenu du fichier et le navigateur affiche le résultat de son interprétation.
Pour plus de facilité, vous pouvez afficher les deux fenêtres en plein écran et dans deux bureaux distincts.
Remarque  : Pour voir l'effet d'une modification du texte (document ou marqueur) dans l'affichage, il faut sauver le fichier .html modifié (CTRL + s) puis rafraîchir l'affichage du navigateur avec la touche F5. De cette façon, il n'y a pas besoin de rouvrir ni l'éditeur, ni le navigateur.

a) Les principales balises du language

Le XHTML est un langage « à balises ». Un fichier XHTML a pour extension .htm ou .html et est de type « texte ». Les balises ont toujours la forme : < nom >. On distingue deux types de balises : les balises locales, indiquant un effet à un endroit donné, qui s'écrivent < nom / > (par exemple, < br / > pour un saut de ligne) et les balises qui ont une portée et qui ont donc un début et une fin : < nom >.....< / nom > (par exemple, < h1 >...< / h1 > pour un titre de niveau 1).

Essayez maintenant de répondre aux questions suivantes en utilisant différentes options des animations:
A2Remarquez la casse (majuscule ou minuscule) des différentes balises (head et body, par exemple): cette casse a-t-elle une importance?
A3Où retrouve-t-on ce qui est inscrit entre les marqueurs < title > et < / title >?
A4Quel est l'effet du marqueur < br >?
A5 Que trouve-t-on à l'intérieur du marqueur < !.... >?
A6A quoi correspond ``& copy;''?
A7 Enlever les marqueurs fermants < / html >, < / body> et < / head>): quel est l'effet de cette suppression sur l'affichage par le navigateur?
A8 Enlever les marqueurs ouvrants correspondants aux marqueurs fermants précédents: cela change-t-il l'affichage de la page sur le navigateur?
A9 Enlever à présent le marqueur < / h2 >: comment l'affichage est-il modifié? Jusqu'où s'étend cette modification?
A10À quelle structure correspond le marqueur < p >? Que remarquez-vous pour cette balise?
A11 Modifiez avec la souris la largeur de la fenêtre du navigateur: que constatez-vous?

Un language très tolérant  :On constate que le language HTML, contrairement à un language de programmation comme le JAVA est très tolérant et qu'un navigateur peut afficher correctement un fichier html très mal écrit. Il est bien évident cependant que dans ce cas, l'affichage est très aléatoire puisqu'il dépend de la tolérance de chaque navigateur. Il est donc vivement recommandé de toujours respecter au mieux la norme du language.

b) Les attributs des balises

Certaines balises possèdent des attributs pour indiquer des paramètres supplémentaires. Les attributs ne se mettent que dans la balise d'ouverture. Ils ont un nom (en minuscule) et une valeur (entre guillemets doubles, valeur « libre »). Exemple : < img src="photo.jpg" alt="Ma photo" / >.

A12Testez les attributs bgcolor et text de la balise body. Les valeurs que peuvent prendre ces deux attributs sont des couleurs écrites sous la forme #HHHHHH, où H est un nombre hexadécimal.

Des attributs dépréciés : les attributs des balises sont donnés à titre de la compatibilité avec les plus anciennes versions de HTML. Elles tombent peu à peu en désuétude et leur rôle est maintenant tenu par les feuilles de style.

c) Une apparence basée sur le contenu

Si le HTML est si tolérant, c'est qu'il n'est pas un language de programmation mais un language de présentation de documents. Il faut toujours avoir à l'esprit quand on écrit du HTML ou plus généralement quand on crée une page WEB, que tout doit être basé sur le contenu du document que l'on veut rendre public. En effet, le créateur des documents n'a qu'une influence relative sur la façon dont ses pages seront visualisées puisque cela dépend fortement du navigateur mais aussi du type de matériel de la personne qui visualise les documents.

Pour cela, il existe différents marqueurs qui vont correspondre à une fonction particulières de certaines parties du document (titres, sous-titres, listes, mise en exergue...) et qui vont chercher à mettre en évidence ces parties, par exmple en en changeant la fonte (mais pas toujours).


Il existe également des marqueurs qui ne modifient pas l'aspect du contenu sur la base de sa fonction. Ses styles physiques sont déconseillés mais parfois bien pratiques...


A13Testez ces différentes balises sur la page pp.html en ajoutant les balises de titre de différents niveaux, en metant en évidence certaines parties du texte (em, strong, gras, italiques...), en écrivant la formule chimique [NH4]+