CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML

CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 1. AVERTISSEMENT L objectif de ce support de cours n est pas de faire un catalogue exhaustif de toutes les fonctionnalités ou de toutes les balises du HTML. Ce support n est qu une initiation au langage HTML, il présente les concepts de base ainsi qu un ensemble réduit de balises. Pour plus de précisions, je vous conseille de vous référer aux ouvrages et sites spécialisés que vous découvrirez tout au long de l année. 2. INTRODUCTION Le langage HTML est destiné à la production de documents électroniques diffusés par l intermédiaire du WEB. Au delà de la publication web, le HTML propose un format portable de documents, pouvant être lus et visualisés à l aide de nombreux logiciels et sur de nombreuses systèmes d exploitation (Windows, MacOS, Solaris, Linux,...). Bien que le HTML ne permette pas la création de programme dynamique, il est tout de même considéré comme un langage : un langage de description de mise en forme de données. Comme dans tous les langages informatiques, le HTML a une syntaxe et une structure propres qu il est impératif de respecter. La multiplicité des moyens de visualisation peut rendre l écriture d un document HTML difficile : tous les navigateurs n interprètent pas toujours de la même façon les différentes séquences du langage et certains navigateurs sont bien plus «susceptibles» que d autres. Ce document est composé de sept chapitres, chaque chapitre présentant un aspect particulier du langage HTML : 1. LA STRUCTURE D UN DOCUMENT AU FORMAT HTML : présente rapidement le principe d interprétation, par un navigateur, d un document au format HTML. 2. CRÉER UN DOCUMENT AU FORMAT HTML : introduction des principales balises permettant la création d un document contenant des liens hypertextes et des images. 3. LES BALISES META ET L INDEXATION D UN SITE WEB : pour attirer des visiteurs sur le nouveau site que nous venons de développer, il est nécessaire de bien le référencer auprès des principaux moteurs de recherche. Pour atteindre cet objectif, l utilisation des balises META est indispensable. De plus, ces balises autorisent la définition de l encodage utilisé pour représenter les caractères accentués et spéciaux. 4. LES TABLEAUX : la maîtrise des tableaux en HTML est indispensable. Nous introduirons dans ce chapitre les balises permettant la création d un tableau, et nous étudierons différentes utilisations possibles des tableaux afin de faciliter la lecture d un document HTML. 5. LES FEUILLES DE STYLE : les feuilles de style ont été introduites par HTML 3.2 et leur développement est fortement encouragé par la norme 4.0. Elles permettent en effet une présentation uniforme de l ensemble des pages d un même site. 6. LES CADRES ET LES IMAGES MAPPÉES : ce chapitre présente le principe de navigation à l aide de cadres (frames en anglais) ainsi que l utilisation des images mappées. 7. LES FORMULAIRES : les formulaires offrent la possibilité à un visiteur de transmettre des informations de façon conviviale au webmestre du site qu il est en train de visiter. Copyright c 2000-2002 Centre d Enseignement A Distance du CNAM Champagne-Ardenne Reproduction et Diffusion interdite sans l accord de l auteur 1/ 9

Visualisation Document Formaté Interpréteur HTML lecture du fichier entée de texte FIG. 1 Interprétation d un document HTML 3. MOYENS ET LOGICIELS L écriture des pages HTML peut se faire de plusieurs façons : en utilisant un éditeur WYSIWYG (What You See Is What You Get) permettant de créer des pages sans connaître le HTML ; en utilisant un éditeur de texte. La première solution ne fait pas l objet de ce cours. On citera notamment quelques logiciels permettant la création de page selon cette technique : FrontPage, Netscape Composer, DreamWeaver... Dans le cadre de ce cours, nous nous concentrerons sur la seconde solution : pour créer des pages HTML, un simple éditeur de textes suffit, comme le bloc-notes de Windows. Il est toutefois possible d utiliser des éditeurs plus évolués comme UltraEdit ou Ace Html sous Windows, Xemacs sous Windows ou Linux. Il est également possible d utiliser des outils de développement «assistés» comme Bluefish ou Quanta sous Linux. Pour plus d informations, vous pouvez consulter les sites de ces différents éditeurs : 1st Page 2000 : http://www.evrsoft.com/ Ace HTML : http://freeware.acehtml.com/ Bluefish : http://bluefish.openoffice.nl/ Quanta Plus : http://quanta.sourceforge.net/ Topstyle : http://www.bradsoft.com/topstyle/ UltraEdit : http://www.ultraedit.com/index.html Xemacs : http://www.xemacs.org/ 3.1. VISUALISATION À L AIDE D UN NAVIGATEUR Nous avons déjà précisé qu un document HTML est un document texte qui est interprété par un navigateur (ou butineur, browser en anglais), aussi appelé client WEB. Ce client récupère donc ce fichier par l intermédiaire d un média comme internet ou un cd-rom, l interprète, c est à dire l évalue, et en transforme les «directives» d affichage en affichage graphique (voir figure 1). Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 2/ 9

FIG. 2 Lynx La visualisation d un document HTML se fait à l aide d un navigateur WEB. Comme nous l avons déjà mentionné précédemment, il existe de nombreux navigateurs WEB. Certains de ces navigateurs sont «liés» à un système d exploitation, alors que d autres existent sous différentes plates-formes matérielles ou systèmes. On peut classer les navigateurs WEB selon deux critères, les navigateurs graphiques et les navigateurs non graphiques. 3.1.1. Navigateur non graphique Nous ne présenterons qu un seul navigateur non graphique. Il s agit de Lynx. Ce navigateur, bien que semblant très limité, a la particularité de ne nécessiter que peu de mémoire. Son interface peu conviviale (les images ne sont pas acceptées) en fait un navigateur peu utilisé (figure 2). Lynx est distribué avec toutes les versions de Linux et est disponible pour Windows, on pourra trouver plus d informations à l adresse : http://lynx.browser.org/ 3.1.2. Navigateurs graphiques Amaya est un navigateur réputé pour être «limité». En effet il ne dispose pas d un ensemble de «plugins» permettant la visualisation de toutes les pages web. Il est pourtant le navigateur le plus proche de la norme HTML (figure 3). Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 3/ 9

FIG. 3 Amaya Amaya est disponible pour Windows et Linux. On pourra trouver plus d informations à l adresse : http://www.w3.org/amaya/. Netscape est un des navigateurs les plus utilisés. On trouve principalement deux versions : les versions 4.x (4.73 à 4.77) et la version 6 (6.1 et bientôt 7). Cette dernière apporte de nombreuses modifications et une refonte complète de l interface, ainsi que de l interpréteur HTML. Cette dernière est basée sur le projet logiciel libre Mozilla (http://www.mozilla.org/). Netscape accepte de nombreux «plugins» qui lui permettent de visualiser la quasi totalité des pages du web (figure 4). Netscape est disponible pour Windows et Linux. On pourra trouver plus d informations à l adresse http://www.netscape.com/. Internet Explorer est le navigateur proposé par Microsoft. Ce navigateur est inclus dans Windows. Comme dans le cas de Netscape, il est capable de visualiser la quasi totalité des pages du web. On notera quelques différences d interprétation du code HTML entre Netscape et Internet Explorer, ce qui complique le travail de développement d un site (figure 5). Opera est un navigateur web disponible pour les systèmes d exploitation Windows et Linux. Il supporte parfaitement la norme HTML actuelle. Par contre il souffre d un léger manque de «plugins» et de programmes additionnels (figure 6). Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 4/ 9

FIG. 4 Netscape version 4.77 en FIG. 5 Internet Explorer Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 5/ 9

FIG. 6 Opéra On pourra trouver plus d informations à l adresse http://www.opera.com/. Konqueror est un navigateur web/explorateur de fichier que l on trouve sous Linux. Il fait partie de l interface graphique KDE (figure 7). On pourra trouver plus d informations à l adresse http://www.konqueror.org/. La liste des navigateurs WEB ne s arrête pas ici. Il existe d autres navigateurs distribués, dans la majorité des cas, gratuitement sur internet. 4. LA STRUCTURE D UN DOCUMENT HTML Les informations échangées sur internet ne respectent pas toutes le même format électronique. Ainsi, un document écrit peut être échangé sous forme d un simple fichier texte (au format ASCII), ou bien sous la forme d un fichier au format pdf (comme ce support de cours). De même, une information sonore peut être diffusée par l intermédiaire de plusieurs formats : fichier WAV, MIDI ou MP3. Tous ces formats électroniques n ont pas été spécialement conçus pour une diffusion par l intermédiaire d internet. Le format HTML a été proposé spécifiquement pour la diffusion de documents contenant des liens hypertextes sur le WWW (World Wide Web). HTML est un langage qui a été défini à l aide de SGML (Standard General Markup Langage) qui est un système de définition de langages créé pour la diffusion de documents électroniques. Le langage HTML est beaucoup plus simple que SGML, ce qui explique en partie son succès. Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 6/ 9

FIG. 7 Konqueror 4.1. HTML ET LES DTD (DÉFINITION DE TYPE DE DOCUMENT) La structure de base d un document HTML s appuie sur quelques balises (également appelées marqueurs) fondamentales. Ce sont des commandes HTML, écrites entre les signes < et > pour que le navigateur puisse les exécuter. Une balise se présente ainsi : <commande> : de nombreuses balises exigent d être fermées lorsque leur action est achevée. Elles sont alors terminées par la balise correspondante, précédée par une barre oblique : </commande> ; peu importe que les commandes soient écrites en majuscules ou en minuscules, mais il est aujourd hui conseillé d employer des lettres minuscules. En effet, l utilisation de minuscules sera probablement rendu obligatoire par HTML 5.0. Chaque document doit commencer par la balise <html>. Le navigateur est ainsi averti qu il s agit d un document HTML valide. Mais, lorsque cette balise est omise, la plupart des navigateurs s en dispensent, car l extension du fichier traité (.html ou.htm) suffit à caractériser un document HTML valide. Avant la balise <html>, il vous est conseillé de définir l information <!DOCTYPE> (abréviation pour document type declaration) pour préciser quelle est la version de HTML que vous utilisez. Cette information est indispensable au navigateur pour lui permettre de réaliser un rendu conforme à la version de HTML choisie. Une DTD est un fichier (ou plusieurs fichiers à utiliser ensemble), écrit en XML, qui contient une définition formelle d un type particulier de document. Elle définit les noms qui peuvent être utilisés pour les types d éléments, où ils peuvent apparaître et comment ils s arrangent les uns par rapport aux autres. La première ligne doit donc mentionner cette information. Les informations de définition peuvent se trouver dans un fichier séparé d extension.dtd. Elles peuvent aussi être placées à l intérieur du document HTML, avant la balise <html>. On distingue alors les fichiers DTD publics et les fichiers privés disponibles sur le même ordinateur. Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 7/ 9

FIG. 8 Affichage du titre dans la barre, Netscape 4.77fr, Linux En pratique, nous allons définir des documents en utilisant la version 4 de HTML. La première ligne de vos documents devra alors être : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Il s agit dans ce cas d utiliser un DTD public défini par l organisme de normalisation de HTML, le W3C (World Wide Web Consortium). Si vous souhaitez approfondir ce sujet, vous pouvez consulter les pages de la FAQ et du site XML Francophone, ainsi qu une page en anglais : http ://www.gutenberg.eu.org/pub/gutenberg/publications/html/faqxml/faqxml-fr.html http ://www.chez.com/xml/ http ://www.alistapart.com/stories/doctype/ 4.2. L ENTÊTE D UN DOCUMENT HTML Après la déclaration de la nature du document, on trouve son en-tête, introduit par la balise <head>. À l intérieur de l en-tête, on trouve le titre, qui correspond à la balise <title>. Le titre représente le nom du document, tel qu il apparaît généralement dans la barre de titre du navigateur (voir figure 8), ou dans une barre d état séparée. Il est recommandé de résumer le contenu du document en quelques mots expressifs, car le titre sera mémorisé dans les signets. Le titre est refermé par </title>. De la même manière, l en-tête se termine par </head>. 4.3. LES SCRIPTS JAVASCRIPT L emplacement suivant est généralement occupé par les scripts Javascript, que l on dispose dans la partie supérieure du document pour une meilleure lisibilité. Il est également possible d inclure les scripts dans l en-tête. Enfin, il est parfaitement possible de placer les scripts dans le corps du document. Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 8/ 9

4.4. LE CORPS DU DOCUMENT Le corps (body en anglais) du document HTML, c est-à-dire le contenu proprement dit, est annoncé par la balise <body>. Toutes les informations que vous souhaitez voir apparaître sur votre page (textes, images, listes, tableaux, liens hypertexte, etc...) y sont rassemblées. Lorsque tous ces éléments auront été spécifiés, le corps du document est refermé par </body>. Puis le document entier est terminé par </html>. Voici donc le document html minimum incluant le DTD utilisé que vous pouvez créer : <!DOCTYPE HTML PUBLIC " / /W3C/ / DTD HTML 4.01 T r a n s i t i o n a l / / EN" > <html> <! début du document > <head> <! début de l entête > < t i t l e > <! t i t r e de l a page > Mon premier document </ t i t l e > </ head> <! f i n de l entête > <body> <! début du corps du document > V o i c i mon premier document HTML! </ body> <! f i n du corps du document > </ html> Nous reprendrons plus précisément la structure d un document dans le prochain chapitre intitulé créer un document au format HTML. 5. BIBLIOGRAPHIE Vous trouverez dans ce paragraphe quelques liens de sites consacrés au langage HTML ainsi que les références de trois livres qui traitent également de ce sujet. Nous découvrirons tout au long de l année d autres sites WEB (référencés directement dans le support de cours où dans les séances associées) traitant plus spécifiquement d un sujet précis concernant la programmation du coté client. 5.1. Références WEB http://www.w3c.org/ site de l organisme de normalisation du HTML Vous trouverez sur ce site l ensemble des documents décrivant la norme du HTML, ainsi que l ensemble des évolutions de la norme. Bien que ce site soit en anglais, il propose des traductions de certains documents. http://www.commentcamarche.net/ Ce site contient des explications claires ainsi que des tutoriaux présentant différents aspects de la programmation sur Internet. http://guide.ungi.net/ Un nouveau guide internet Ce site est un point de départ intéressant et contient un foule de «trucs» et de réponses. 5.2. Références bibliographiques Programmation HTML et Javascript, Philippe CHALÉAT & Daniel CHARNAY, Eyrolles Webmaster in a nutshell, Stephen SPAINHOUR & Robert ECKSTEIN, O REILLY HTML : The definitive Guide, Chuck MUSCIANO & Bill KENNEDY, O REILLY Chapitre 1- LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 9/ 9