Ed Tittel et Jeff Noble

HTML XHTML

& CSS

2e édition

HTML XHTML & CSS pour les Nuls

(2e édition)

Titre de l’édition originale : HTML XHTML & CSS Edition For Dummies®

Pour les Nuls est une marque déposée de Wiley Publishing, Inc.

For Dummies est une marque déposée de Wiley Publishing, Inc.

Collection dirigée par Jean-Pierre Cano

Traduction : Patrici Moritz et Jean-Louis Gréco

Mise en page : maged

Edition française publiée en accord avec Wiley Publishing, Inc.

© Éditions First, un département d’Édi8, 2021

Éditions First, un département d’Édi8

92 avenue de France 75013 PARIS

75013 Paris

Tél. : 01 44 16 09 00

Fax : 01 44 16 09 01

E-mail : firstinfo@efirst.com

Web : www.editionsfirst.fr

ISBN : 9782412071106

Dépôt légal : 1er trimestre 2021

Cette œuvre est protégée par le droit d’auteur et strictement réservée à l’usage privé du client. Toute reproduction ou diffusion au profit de tiers, à titre gratuit ou onéreux, de tout ou partie de cette oeuvre est strictement interdite et constitue une contrefaçon prévue par les articles L 335-2 et suivants du Code de la propriété intellectuelle. L’éditeur se réserve le droit de poursuivre toute atteinte à ses droits de propriété intellectuelle devant les juridictions civiles ou pénales.

Ce livre numérique a été converti initialement au format EPUB par Isako www.isako.com à partir de l'édition papier du même ouvrage.

Introduction

Bienvenue dans le monde sauvage et merveilleux du World Wide Web, le grand Web mondial ou, plus simplement, le Web. Dans ce livre, nous allons vous révéler les mystères des langages de balisage qui sont au cœur du Web : le langage de balisage hypertexte (HTML) et son successeur, XHTML, ainsi que le langage des feuilles de style en cascade (CSS), utilisé pour contrôler plus finement la présentation des informations. Comme HTML, XHTML (nous utiliserons (X)HTML dans ce livre pour nous référer aux deux versions simultanément) et CSS permettent de créer des pages Web. Nous allons vous apprendre à les utiliser et vous mettre sur les rails pour devenir auteur ou développeur de contenu pour le Web.

Si vous avez déjà essayé de créer vos propres pages Web mais que vous avez trouvé cela trop intimidant, n’ayez plus peur. En effet, si vous savez composer un numéro sur un téléphone ou tourner une clé dans une serrure, c’est que vous disposez de tous les atouts pour devenir un auteur (X)HTML. Sans plaisanter !

Le recours au jargon technique est limité au minimum dans ce livre, qui s’en tient essentiellement à du français accessible à tous. Hormis le propos sur l’hypertexte, (X)HTML et le Web, nous avons inclus de nombreux exemples et des instructions, balise par balise, pour vous aider à créer vos propres pages Web le plus facilement possible. Nous présentons aussi des exemples de ce que vous pouvez faire une fois que vous avez créé vos pages pour les partager avec le monde entier. Nous expliquons également les différences entre HTML 4, HTML 5 et XHTML, afin que vous puissiez décider si vous souhaitez vous en tenir au plus connu et plus vieux des langages de balisage du Web (HTML) ou opter pour son excellent successeur (XHTML).

À propos de ce livre

Considérez ce livre comme un guide amical et accessible dont l’objet est de vous faire découvrir les outils de (X)HTML et de CSS pour créer des pages lisibles et attractives sur le Web. Toutes ces choses ne sont pas difficiles à comprendre mais elles fourmillent de détails que vous devez gérer quand vous créez vos propres pages Web. Parmi les thèmes abordés dans ce livre, vous trouverez :

• Concevoir et créer des pages Web.

• Télécharger et publier des pages Web que tout le monde peut consulter.

• Tester et déboguer des pages Web.

Vous pouvez créer des pages Web sans subir des années de formation, sans faire preuve d’un grand talent artistique, ni passer par des rituels d’initiation à base de jets d’eau glacée. Si vous pouvez indiquer à quelqu’un comment traverser la ville pour se rendre chez vous, alors vous pouvez créer un document Web. L’objet de ce livre n’est pas de faire de vous un Prix Nobel mais de vous présenter les éléments dont vous avez besoin pour créer une page Web lisible et présentable et de vous donner assez confiance pour vous y mettre !

Comment utiliser ce livre

Ce livre vous explique comment utiliser (X)HTML et CSS pour publier des pages fonctionnelles sur le Web. Nous vous exposons ce qu’impliquent la conception et la réalisation de documents Web efficaces qui peuvent vous permettre de partager vos idées et vos informations avec le monde entier (si c’est ce que vous souhaitez) et peut-être vous amuser comme un technicien s’amuserait en le faisant.

Pour vous faciliter la lecture de ce livre, nous utilisons certaines conventions. Par exemple, le code (X)HTML et CSS apparaît en police non proportionnelle, comme ceci :

<head><title>Ceci est un titre</title></head>

Lorsque vous saisissez du code (X)HTML, CSS ou toute autre information, veillez à tout copier exactement à l’identique, y compris les crochets (< et >) ; chaque détail compte pour que la magie (X)HTML et CSS opère. Par ailleurs, nous vous proposons d’améliorer le contenu de vos pages pour les rendre spéciales et vous indiquons exactement la démarche à suivre pour intégrer les éléments de (X)HTML et de CSS dans votre propre travail.

Les marges de ce livre ne nous laissent pas beaucoup d’espace. Pour cette raison, il se peut que certaines lignes de code (X)HTML et CSS très longues ou certaines adresses de sites Web (aussi appelées URL, pour localisateur unique de ressource) s’étalent sur plusieurs lignes. Notez que votre ordinateur affiche ces lignes comme une seule ligne de (X)HTML ou de CSS ou une seule adresse URL. Si vous les copiez, faites-le sur une seule ligne et n’insérez pas de retour à la ligne. Pour signifier qu’il s’agit d’une seule ligne de code, nous scindons la ligne au niveau d’un caractère de ponctuation et indentons la suite, comme dans cet exemple :

http://www.infocadabra.transylvanie.com/nexus/plexus/lexus/
       praxis/bon/ça/doit/être/une/URL/peu/crédible/mais/
       certaines/sont/VRAIMENT/longues.html

HTML 4 se moque que vous écriviez en minuscules ou en majuscules, ou les deux (sauf pour les entités ou codes de caractères). En revanche, HTML 5, XHTML et CSS exigent que vous écriviez uniquement en minuscules pour être conforme aux règles en vigueur. Ainsi, pour que votre propre travail ressemble autant que possible au nôtre, saisissez tout le texte (X)HTML et CSS et tout autre code en minuscules uniquement.

Si vous disposez d’une version antérieure de ce livre, vous remarquerez que nous prenons le contre-pied de nos instructions d’alors. Les gardiens de la doctrine transcendantale du standard HTML, le consortium du Web (W3C), ont changé les règles et nous devons nous soumettre à leur volonté. Nous n’avons pas écrit les règles du jeu mais nous savons y jouer !

Trois suppositions présomptueuses

Inutile d’être un expert de la logique ou un maître des arcanes de la programmation, ni d’avoir un doctorat en informatique, ni même de savoir précisément ce qui se passe dans votre ordinateur pour aborder le contenu de ce livre.

Toutefois, nous devons faire quelques suppositions à votre sujet, gentil lecteur : vous savez allumer et éteindre votre ordinateur ; vous savez utiliser une souris et un clavier et vous souhaitez créer vos propres pages Web pour vous amuser, pour en tirer profit ou pour toute autre raison qui vous appartient. Nous supposons aussi que vous disposez d’une connexion à Internet et d’un navigateur Web.

Si vous savez écrire une phrase et faire la différence entre un titre et un paragraphe, vous pouvez créer et publier vos propres documents sur le Web. Le reste n’est que détails !

Comment ce livre est organisé

Ce livre contient six parties principales, rangées comme des poupées russes. Les parties contiennent au moins trois chapitres et chaque chapitre contient plusieurs sections modulaires. De la sorte, vous pouvez utiliser ce livre pour feuilleter quelques pages, trouver les sujets ou les mots-clés dans l’index ou dans la table des matières ou lire le livre du début à la fin.

Partie I : Découvrir (X)HTML et CSS

Cette partie pose le décor. Il s’agit d’un aperçu général et d’une introduction au Web et aux logiciels que les gens utilisent pour en extraire les trésors. Cette partie vous explique aussi comment le Web fonctionne et tout particulièrement (X)HTML et CSS dont il est question dans ce livre, ainsi que les logiciels et les services côté serveur qui fournissent les données aux utilisateurs finaux.

Les documents (X)HTML, aussi appelés pages Web, sont les unités fondamentales d’organisation et d’échange de l’information sur le Web. Vous apprendrez en quoi consiste HTML, comment l’hypertexte peut enrichir le texte ordinaire et ce que CSS permet pour modifier et gérer la manière dont le texte est affiché. Ensuite, vous serez invité à vous promener du côté du Web et à créer votre tout premier document (X)HTML.

Partie II : Mettre en forme des pages Web avec (X)HTML

HTML mélange le texte ordinaire avec des chaînes de caractères spéciales nommées balises, qui servent à indiquer aux navigateurs comment afficher les documents (X)HTML. Dans cette partie du livre, vous découvrirez le balisage en général et (X)HTML en particulier. Nous commençons par une discussion passionnante sur l’organisation et la structure d’un document (X)HTML (enfin… que nous trouvons fascinante du moins, en espérant que ce soit votre cas). Ensuite, nous expliquons comment le texte peut être organisé en blocs et en listes. Après cela, nous vous montrons comment trouver et utiliser des images dans vos pages Web et vous dévoilons quelques astuces de mise en forme pour les peaufiner.

Tout au long de cette partie, nous discutons des balises (X)HTML et de leur fonctionnement. Lorsque vous aurez terminé de lire la partie II, nous espérons que vous aurez une bonne idée de ce qu’est HTML et de la manière dont vous pouvez l’utiliser.

Partie III : Prendre le contrôle des pages Web et des styles

Le premier chapitre de la partie III traite des balises qui ne sont plus recommandées ou obsolètes afin que vous puissiez les identifier et éviter de les utiliser. S’ensuit une discussion sur les feuilles de styles en cascade (CSS), une autre forme de langage de balisage qui laisse (X)HTML contrôler le contenu tandis que ce langage contrôle l’apparence des pages Web dans le navigateur Web ou sur d’autres dispositifs (PDA, téléphone mobile et tout dispositif permettant aux déficients visuels de lire). Après avoir exploré la syntaxe et les structures de CSS et découvert comment les utiliser, vous apprenez à manipuler la couleur et la police d’un texte, des arrière-plans et autres éléments de vos pages Web. Vous découvrez aussi des collections plus complexes de balises, en particulier les tables, en observant leurs possibilités dans le détail. Nous vous donnons beaucoup d’exemples pour vous aider à concevoir et créer des documents (X)HTML de qualité professionnelle. Vous pouvez commencer à travailler avec la syntaxe et les structures du (X)HTML que vous devez connaître pour créer des pages Web complexes.

Partie IV : Intégrer des scripts avec (X)HTML

(X)HTML ne permet qu’une mise en forme relativement limitée du texte et des graphiques (alors que CSS excelle dans ce domaine). Les concepteurs de sites Web créent souvent des pages Web interactives et dynamiques en utilisant du script qu’ils insèrent dans ces pages.

Dans cette partie, vous découvrez à quoi correspondent les langages de script qui permettent aux pages Web d’interagir avec les utilisateurs en fournissant les moyens de répondre à leurs actions et de traiter leurs données. Nous vous présentons les principaux langages de script, avant de nous focaliser sur le plus populaire d’entre eux : JavaScript. Vous découvrez alors les éléments de base de ce langage de script et comment l’utiliser pour ajouter de l’interactivité dans vos pages Web. Nous vous présentons aussi quelques scripts typiques que vous pouvez reprendre et modifier pour les ajouter à votre propre site Web. Ensuite, nous vous apprenons à insérer du contenu de tiers dans vos pages Web, à utiliser du contenu dynamique d’autres personnes, à affiner votre site sans gros effort et à recevoir des tas de retours intéressants de services tels que Flickr, Twitter, YouTube et Google Maps.

Tout au long de cette partie, nous multiplions les exemples, les conseils et les détails pour vous montrer comment des scripts peuvent améliorer les capacités de vos pages Web et enrichir l’expérience des utilisateurs qui les consultent.

Icônes utilisées dans ce livre

Cette icône symbolise une indication qui facilite la compréhension d’une balise HTML ou de toute autre information importante.

Cette icône pointe une information à ne pas négliger : ne faites pas l’impasse sur ces petits rappels.

Faites attention lorsque vous rencontrez cette icône. Elle vous signale les choses que vous ne devez pas faire ; les conséquences peuvent être graves si vous n’en tenez pas compte.

L’information mise en valeur à l’aide de cette icône correspond aux meilleures pratiques : des conseils dont nous aurions été heureux de bénéficier avant de commencer ! Ces techniques peuvent vous faire gagner du temps, de l’argent et vous épargner de sévères migraines.

Par où commencer ?

C’est maintenant que vous choisissez votre chemin et que vous vous mettez en route ! Peu importe d’où vous partez. Ne vous inquiétez pas, vous y arriverez. Nous savons que vous êtes prêt à vous instruire et surtout à vous amuser. Profitez-en bien !

Partie I Découvrir (X)HTML et CSS

Dans cette partie

Dans cette partie, nous explorons et expliquons les structures et les liens dans les documents HTML de base. Nous décrivons aussi le rôle essentiel que les navigateurs Web jouent pour afficher tout cela sur l’ordinateur d’un utilisateur. Nous expliquons même d’où provient le (X) (une réécriture de la description des balises HTML qui utilise la syntaxe XML pour créer XHTML) et nous vous aidons à comprendre pourquoi XHTML est différent (et éventuellement meilleur, d’après certains) du bon vieux HTML. Nous jetons aussi un œil à l’anatomie générale d’une page Web, aux différentes parties qui la composent ainsi qu’à la manière dont CSS aide à gérer leur présentation, leur placement et même leurs couleurs.

Ensuite, nous vous présentons un exercice consistant à créer et visualiser une page Web simple pour que vous puissiez comprendre ce que cela implique. Nous vous expliquons comment apporter des modifications à une page Web déjà existante et comment répercuter ces changements en ligne.

Cette partie se termine par une exhortation à comprendre ce que vous faites avant de poser inconsidérément des balises. Tout comme une maison solide commence par des plans et des dessins architecturaux, une page Web devrait commencer par un plan ou une carte recensant quelques idées sur l’endroit où vos pages vont résider dans le cyberespace et comment les hordes d’utilisateurs pourront se frayer un chemin jusqu’à elles.

DANS CE CHAPITRE

Créer du HTML dans des fichiers texte.

•

Présenter et naviguer dans des pages Web.

•

Comprendre les liens et les URL.

•

Comprendre la syntaxe de base HTML.

•

Comprendre les bases de CSS.

Chapitre 1 Ce qu’il faut savoir sur HTML, CSS et le Web

Bienvenue dans le monde merveilleux du Web, de (X)HTML et de CSS. Avec un tout petit peu de connaissances, de pratique et un message à transmettre, vous pouvez créer votre petit morceau de cyberespace ou agrandir celui dont vous disposez déjà.

Notez que nous utilisons (X)HTML tout au long de ce livre. Il s’agit d’un acronyme qui désigne simultanément HTML et XHTML, HTML signifiant langage de balisage hypertexte et XHTML langage de balisage hypertexte extensible. Même si HTML et XHTML ne sont pas totalement identiques, ils sont assez ressemblants pour que cette référence ait du sens.

Ce livre est votre guide de survie pour comprendre les documents Web, affiner une page déjà existante ou créer des pages complexes et excitantes qui intègrent design, multimédia et script.

La meilleure méthode pour commencer à travailler avec HTML est de se jeter dans le bain et c’est exactement ce que ce chapitre vous propose : il vous permet de comprendre rapidement comment (X)HTML et CSS fonctionnent dans les coulisses des pages Web en vous présentant leurs blocs de construction sous-jacents. Lorsque vous aurez terminé ce chapitre, vous aurez saisi ce fonctionnement et pourrez immédiatement commencer à créer ou modifier vos propres pages Web.

Les pages Web dans leur habitat naturel

Les pages Web peuvent contenir de nombreux types de contenu, comme du texte, des graphismes, des formulaires, des fichiers audio et vidéo et même des jeux interactifs.

Il suffit de naviguer sur le Web un court instant pour être confronté à un tas d’informations et de contenus affichés de diverses manières. Tous les sites Web sont différents mais la plupart ont une chose en commun : le langage de balisage hypertexte (HTML). Vous risquez aussi de rencontrer assez souvent du langage de balisage hypertexte extensible (XHTML) et des feuilles de styles en cascade (CSS).

Quelle que soit l’information qu’une page Web contient, elle est créée avec du HTML (ou une pâle copie). HTML est le ciment qui maintient l’ensemble d’une page Web. Les graphismes, le contenu et les autres informations sont les briques tandis que CSS indique à quoi les pages Web doivent ressembler à l’écran.

Toutefois, les pages Web ne sont pas seulement des documents texte. Elles sont composées d’un texte spécial au goût étrange venu d’ailleurs nommé HTML, XHTML ou CSS. Chacun utilise son propre jeu d’instructions que vous pouvez inclure (avec votre contenu) dans le fichier texte pour spécifier comment la page correspondante doit s’afficher et se comporter.

Restez avec nous pour découvrir tous les détails que vous devez connaître sur (X)HTML et CSS !

L’hypertexte

Des instructions spéciales en HTML permettent à des lignes de texte de pointer (autrement dit, de faire un lien vers) un autre endroit dans le cyberespace. De tels pointeurs sont nommés hyperliens. Les hyperliens sont comme la colle qui tient ensemble toutes les pages qui composent le Web. Dans votre navigateur Web, les hyperliens apparaissent généralement en bleu et sont soulignés. Lorsque vous cliquez sur l’un d’entre eux, il vous emmène quelque part.

Hypertexte ou non, une page Web est un fichier texte, ce qui signifie que vous pouvez créer et modifier une page Web dans n’importe quelle application pouvant créer un fichier texte (telle que Bloc-notes ou TextEdit). Quelques outils logiciels proposent des options et des applications pour vous aider à créer des pages Web mais ils génèrent les mêmes fichiers texte que ceux que vous créez à l’aide d’éditeurs de texte de base. Toutefois, nous pensons que les débutants en HTML feraient mieux de se servir d’un éditeur de texte simple. Lancez donc Bloc-notes sur votre PC (ou TextEdit sur Mac) et vous êtes prêt à vous lancer.

N’utilisez pas des traitements de texte comme WordPad ou Word pour créer du HTML car ils introduisent toutes sortes de codes supplémentaires dans les pages Web dont vous n’avez pas envie ni besoin.

Le Web porte bien son nom. C’est littéralement une toile de pages en ligne hébergées sur des serveurs Web dans le monde entier, connectées de milliards de manières par des hyperliens qui relient une page à une autre. Sans ces liens, le Web ne serait qu’un ensemble de pages isolées.

L’atout principal du Web est la possibilité de relier des pages et d’autres ressources (telles que des images, des fichiers à télécharger et des présentations multimédia) se trouvant sur le même site Web ou sur un autre. Par exemple, service-public.fr (www.service-public.fr) est un site Web portail ; sa seule fonction est de fournir un accès à d’autres sites. Si vous ne savez pas quelles démarches administratives effectuer en cas de déménagement ou si vous allez vous marier, visitez le site représenté dans la Figure 1.1.

Les navigateurs Web ont été créés spécifiquement pour lire les instructions HTML (ou encore balises) et afficher la page Web résultante.

Les balises sont stockées dans un fichier texte (avec votre contenu). Elles donnent des ordres au navigateur. Par exemple, regardez la page représentée dans la Figure 1.2. Vous pouvez comprendre comment la page est constituée et comment elle est mise en forme en observant son HTML sous-jacent.

Figure 1.1 service-public.fr utilise des hyperliens pour aider les visiteurs à trouver des informations sur leurs démarches administratives.

Figure 1.2 Pour avoir cette apparence, cette page Web compte plusieurs parties et de nombreuses balises HTML et CSS.

Cette page contient une image, un titre qui décrit la page, plusieurs paragraphes de texte dont l’un porte sur vos auteurs et un bloc d’adresses comprenant des liens vers un CV et une liste de publications.

Cependant, les diverses parties de la page sont mises en forme différemment :

• Le titre en haut de la page est plus grand que le texte dans les paragraphes.

• Les blocs de texte sont séparés par plus d’espace que les lignes de texte dans les blocs en question.

• Certains textes sont blancs, d’autres orange, d’autres encore bleu clair.

Le navigateur sait comment afficher les différents éléments de la page grâce au balisage HTML, représenté dans le Listing 1.1 (vous pourrez consulter le Listing dans toute sa splendeur à la fin du chapitre).

Tout texte qui est compris entre les signes inférieur et supérieur (< >) est une balise HTML. Par exemple, un p entre crochets (<p>… <p>) identifie le texte affiché comme un paragraphe. Le texte placé entre les balises <style> et </ style> au début du fichier correspond à des instructions CSS qui déterminent l’apparence de divers éléments HTML présents dans la page. C’est vraiment tout ce qu’il faut savoir. Vous ajoutez les balises dans le fichier texte avec le texte que vous souhaitez présenter aux utilisateurs pour indiquer au navigateur comment il doit afficher votre page Web.

Les balises et le contenu qu’elles délimitent forment ce qui est appelé un élément. Les signes < et > délimitent les balises XHTML et HTML, les accolades { et } délimitent les balises CSS.

Les navigateurs

Le morceau que l’utilisateur détient dans le puzzle du Web, c’est le navigateur. Les navigateurs Web peuvent lire les instructions écrites en HTML et les utiliser pour afficher le contenu d’une page Web sur votre écran.

Vous devriez toujours écrire votre HTML en gardant à l’esprit que les gens qui vont regarder le contenu utilisent un navigateur Web. N’oubliez pas qu’il existe plusieurs sortes de navigateurs dans la nature et que chacun existe en plusieurs versions.

Généralement, les navigateurs Web interrogent et affichent les pages Web mises à disposition sur Internet via des serveurs Web. Vous pouvez aussi afficher des pages HTML que vous avez sauvegardées sur votre propre ordinateur avant de les rendre disponibles via un serveur Web sur Internet. Lorsque vous développez vos propres pages Web, vous visualisez ces dernières (appelées pages locales) dans votre navigateur. Vous pouvez utiliser les pages locales pour vous faire une idée de ce que les gens verront lorsque la page sera en ligne sur Internet.

Une foule de navigateurs

Le monde du Web est plein de navigateurs de différentes tailles et de formes ou plutôt de différentes versions et jeux de fonctionnalités. Les navigateurs les plus populaires sont Internet Explorer de Microsoft, Firefox de Mozilla, Safari d’Apple et Chrome de Google. D’autres navigateurs sont très utilisés, tels que Opera et Lynx. En tant que développeur HTML, vous devez penser à ceux qui vont consulter vos pages et non seulement à votre propre navigateur et à vos préférences. Chaque utilisateur ajuste ses préférences personnelles dans son navigateur.

Chaque navigateur affiche le HTML un peu différemment des autres. De même, chaque navigateur gère le JavaScript, le multimédia, les feuilles de styles et autres extensions du HTML différemment. Ajoutez à tout cela les différents systèmes d’exploitation pour que cela commence vraiment à devenir amusant.

Généralement, les différences entre navigateurs sont mineures. Parfois, une combinaison de HTML, de texte et de multimédia peut mettre un navigateur à genoux. Lorsque vous travaillez avec HTML, testez vos pages sur autant de navigateurs différents que possible. Installez au moins trois navigateurs différents sur votre propre système d’exploitation pour effectuer les tests. Nous vous recommandons d’utiliser au moins les dernières versions d’Internet Explorer, de Firefox et de Chrome.

Yahoo! dispose d’une liste plutôt complète des navigateurs sur :

http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/Browsers

Chaque navigateur interprète le HTML d’une manière qui lui est propre. Le même HTML peut ne pas être représenté à l’identique d’un navigateur à un autre. Lorsque vous travaillez avec du HTML de base, les variations sont mineures mais lorsque vous intégrez d’autres éléments (tels que du script et du multimédia), le résultat à l’écran peut considérablement varier.

Le Chapitre 2 vous montre comment utiliser un navigateur Web pour visualiser une copie locale de votre première page Web.

Certaines personnes utilisent des navigateurs Web qui n’affichent que du texte, tels que Lynx, car :

• Ils sont déficients visuels et ne peuvent pas utiliser un affichage graphique.

• Ils apprécient les navigateurs Web simples et rapides qui n’affichent que du texte.

Les serveurs Web

Vos pages HTML ne valent pas grand-chose si vous ne pouvez pas les partager avec le reste du monde. C’est pourquoi il existe des serveurs Web. Un serveur Web est un ordinateur qui :

• Se connecte à Internet.

• Fait tourner un logiciel de serveur Web.

• Répond aux requêtes des pages Web des navigateurs Web.

Presque tout ordinateur peut être un serveur Web, y compris votre ordinateur personnel. Toutefois, les serveurs Web sont généralement des ordinateurs dédiés à cette tâche. Vous n’avez pas besoin d’être un gourou de l’informatique ou d’Internet pour publier vos pages Web mais vous devez trouver un serveur Web pour servir vos pages :

• Si vous créez des pages pour le site Web d’une entreprise, votre département informatique peut disposer d’un serveur Web (renseignez-vous auprès de votre gourou informatique local).

• Si vous commencez un nouveau site, vous aurez besoin d’un hôte pour héberger vos pages.

Il est très facile de trouver un hébergeur bon marché avec une simple recherche Google. GoDaddy (www.godaddy.com) est un hôte peu cher qui héberge vos pages pour moins de 2 € par mois. Si vous cherchez bien, vous pouvez même trouver des hébergeurs gratuits. Free Web Hosts dispose d’une liste d’hébergeurs gratuits que vous pouvez consulter sur www.free-webhosts.com. Le Chapitre 3 montre comment déterminer vos besoins en hébergement et trouver le prestataire le mieux adapté.

Anatomie d’une URL

Le Web est constitué de milliards de ressources vers lesquelles il est possible de créer des liens. La localisation exacte d’une ressource est la clé pour s’y connecter. Sans une adresse exacte (une URL, ou identifiant unique de localisation), vous ne pouvez pas utiliser la barre d’adresse d’un navigateur Web pour visiter directement la page.

Les URL sont un système d’adressage standardisé des ressources du Web. Chaque ressource (page Web, site, fichier individuel) dispose d’une URL unique. Les URL fonctionnent à peu près comme votre adresse postale. La Figure 1.3 détaille les composants d’une URL.

http://www.sun.com/developers/evangcentral/bios.html

Figure 1.3 Les composants d’une URL permettent de définir exactement la localisation d’un fichier sur le Web.

Chaque composant de l’URL aide à définir l’emplacement d’une page ou d’une ressource Web :

Les protocoles d’Internet

Les interactions entre les navigateurs et les serveurs sont rendues possibles par un jeu d’instructions de communication entre ordinateurs : HTTP (protocole de transfert hypertexte). Ce protocole définit la manière dont les navigateurs devraient interroger les pages Web et comment les serveurs Web devraient répondre à ces requêtes.

HTTP n’est pas le seul protocole qui fonctionne sur Internet. Le protocole simple de transfert de courrier (SMTP) et le protocole de boîte postale (POP) permettent l’échange de courrier électronique et le protocole de transfert de fichiers (FTP) vous permet de télécharger, déplacer, copier et supprimer des fichiers et des dossiers sur Internet. La bonne nouvelle, c’est que les navigateurs Web et les serveurs font tout le travail HTTP pour vous, si bien que vous n’avez qu’à stocker vos pages sur un serveur ou saisir une adresse Web dans un navigateur.

Pour comprendre comment HTTP fonctionne, référez-vous au chapitre de David Gourley et Brian Totty sur les messages http, disponible sur Google en recherchant « understanding http transactions ». Commencez votre recherche sur http://books.google.com puis faites défiler les résultats jusqu’au lien « http: the definitive guide » et reportez-vous à la page 80.

• Protocole : Spécifie le protocole que le navigateur doit respecter pour interroger le fichier.

Le protocole pour interroger des pages Web est http:// (le préfixe classique de la plupart des URL).

• Domaine : Correspond au site Web (tel que www.sun.com) où se trouve le fichier. Un domaine peut contenir quelques fichiers (comme un site Web personnel) ou des millions (comme le site d’une entreprise, tel que www.sun.com).

• Chemin d’accès : Enumère la série de dossiers qu’il faut parcourir pour atteindre un fichier spécifique.

Par exemple, pour atteindre un fichier dans le répertoire evangcentral qui se trouve dans le répertoire developers, vous devez utiliser le chemin d’accès developers/evangcentral/.

• Nom de fichier : Désigne le fichier qui se trouve dans le répertoire auquel le navigateur accède.

Bien que l’URL de la Figure 1.3 ne soit pas accessible au public, elle renvoie au domaine de Sun et contient un chemin d’accès qui permet d’atteindre un fichier spécifique nommé bios.html :

http://www.sun.com/developers/evangcentral/bios.html

Le Chapitre 6 explique comment utiliser HTML et les URL pour ajouter des hyperliens à vos pages Web et le Chapitre 3 montre comment obtenir une URL pour votre site Web une fois que vous êtes prêt à vous installer sur un serveur Web.

Les parties du composant (X)HTML

La section suivante lève le mystère sur le X. Cette section explique :

• Les différences entre HTML et XHTML.

• Comment le HTML est écrit (sa syntaxe).

• Les règles qui régissent l’utilisation du HTML (et XHTML).

• Les noms des éléments importants des balises HTML (et XHTML).

• Comment utiliser au mieux les possibilités de (X)HTML.

HTML et XHMTL : quelle est la différence ?

HTML, c’est le langage de balisage hypertexte, une notation développée vers la fin des années 1980 et au début des années 1990 pour décrire les pages Web. HTML est dorénavant gravé dans le marbre de nombreuses descriptions de standards (spécifications) par le World Wide Web Consortium (W3C). La dernière spécification de HTML a été finalisée en 1999.

Lorsque vous ajoutez un X devant HTML pour XHTML, vous obtenez une version améliorée de HTML, fondée sur le langage de balisage extensible (XML). XML est conçu pour fonctionner correctement et être compris par les ordinateurs, les logiciels et Internet.

La formulation initiale du HTML présente quelques imperfections qui peuvent tourmenter les logiciels qui lisent les documents HTML. A l’inverse, XHTML utilise une syntaxe extrêmement régulière et prévisible que les logiciels gèrent plus facilement. XHTML remplacera HTML un jour mais HTML reste d’actualité. Ce livre traite des deux versions et vous montre les étapes à suivre pour ajouter le X devant vos documents HTML et les convertir en documents XHTML.

• La plupart des balises HTML et XHTML sont identiques.

• Dans certains cas, les balises HTML et XHTML sont un peu différentes.

• Dans certains cas, les balises HTML et XHTML doivent être utilisées différemment.

Ce livre vous montre comment créer du code qui fonctionne en HTML et en XHTML.

La syntaxe et les règles

Chaque élément de balise HTML et/ou XHTML qui décrit le contenu d’une page Web comprend une combinaison d’éléments, d’attributs et d’entités.

Ce chapitre traite de la forme et de la syntaxe de base des éléments, des attributs et des entités. Les parties II et III du livre exposent comment les éléments et les attributs :

• décrivent des types de texte (comme des paragraphes ou des tableaux) ;

• créent un effet dans la page (comme modifier le style de la police) ;

• ajoutent des images et des liens dans la page.

Les éléments

Les éléments sont les blocs de base de (X)HTML. Vous les utilisez pour décrire chaque morceau de texte dans votre page. Les éléments sont faits de balises et du contenu qu’elles délimitent. Il existe deux grands types d’éléments :

• Les éléments dont le contenu est fait d’une paire de balises et du contenu qui se trouve entre la balise d’ouverture et la balise de clôture.

• Les éléments qui insèrent quelque chose dans la page en utilisant une seule balise.

Les balises appariées

Les éléments qui décrivent le contenu utilisent des paires de balises pour marquer le début et la fin de l’élément. Les paires ressemblent à ceci :

<balise>...</balise>

Le contenu, comme les paragraphes, les titres, les tableaux et les listes, utilisent toujours des balises appariées :

• La balise ouvrante (<balise>) dit au navigateur : « L’élément commence ici. »

• La balise fermante (<balise>) dit au navigateur : « L’élément se termine là. »

Le contenu correspond à ce qui se trouve entre les balises ouvrante et fermante. Par exemple, la page d’Ed Tittel, représentée dans le Listing 1.1, utilise un élément paragraphe (<p>) pour délimiter le texte d’un paragraphe (nous avons éliminé le CSS pour plus de clarté) :

<p>Ed a commencé à écrire sur l’informatique en 1986 pour un magazine
traitant de Macintosh. Vers 1989, il a contribué à des publications telles
que LAN Times, Network World, Mac World et LAN Magazine. Il a travaillé sur
notre premier livre en 1991 et en 1994 il avait contribué à une dizaine de
 titres différents.</p>

Les balises isolées

Les éléments qui insèrent quelque chose dans une page sont nommés éléments vides (car ils ne délimitent aucun contenu) et utilisent une balise unique, comme ceci :

<balise />

Les images et les sauts de lignes insèrent quelque chose dans le fichier HTML et c’est pourquoi ils utilisent des balises isolées.

L’une des différences essentielles entre XHTML et HTML, c’est qu’en XHTML tous les éléments vides doivent se terminer par une barre oblique placée avant le signe supérieur. Ceci s’explique par le fait que XHTML est basé sur XML et que XML exige de fermer tous les éléments avec une barre oblique, comme ceci :

<balise/>

Cependant, pour que ce type de balise soit lisible par les navigateurs plus anciens, il faut insérer un espace avant la barre oblique, comme ceci :

<balise />

Cet espace permet aux vieux navigateurs d’ignorer la barre oblique finale (puisqu’ils ne connaissent pas XHTML). Les navigateurs plus récents qui comprennent XHTML ignorent l’espace et interprètent la balise comme il se doit, c’est-à-dire <balise/> (conformément aux règles de XML).

Le Listing 1.1 utilise l’élément image (<img />) pour inclure une image dans la page :

<img src="images/header.gif" alt="Image" width="794" height="160" />

L’élément <img /> fait référence à une image. Lorsque le navigateur affiche la page, il remplace l’élément <img /> par le fichier vers lequel ce dernier renvoie (pour cela, il utilise un attribut qui est présenté dans la section suivante). D’après les règles XHTML présentées plus tôt, ce qui apparaît en HTML comme <img> apparaît en XHTML comme <img /> (et cela s’applique à tous les éléments à base de balise isolée).

Vous ne pouvez pas fabriquer vos propres éléments HTML ou XHTML. Les éléments de (X)HTML forment un ensemble très spécifique. Si vous utilisez des éléments qui ne font pas partie de cet ensemble, les navigateurs les ignoreront. La liste des éléments que vous pouvez utiliser est définie dans les spécifications HTML 4.01 ou XHTML 1.0 (les spécifications pour HTML 4.01 se trouvent sur www.w3.org/TR/html4 et celles de XHTML 1.0 sont disponibles sur www.w3.org/TR/xhtml1/).

L’imbrication

De nombreuses structures de pages combinent des éléments imbriqués. Vous pouvez vous représenter les éléments imbriqués comme des enveloppes rangées les unes dans les autres.

Par exemple, une liste à puces utilise deux types d’éléments :

• L’élément <ul> spécifie que la liste n’est pas triée (à puces).

• L’élément <li> désigne un élément de la liste.

Lorsque vous combinez les éléments en utilisant cette méthode, n’oubliez pas de fermer complètement l’élément intérieur avant de fermer l’élément extérieur :

<ul>
  <li>élément 1</li>
  <li>élément 2</li>
</ul>

Les attributs

Les attributs d’un élément permettent de varier la manière dont cet élément décrit son contenu ou fonctionne. Par exemple, l’élément <img /> utilise l’attribut src pour spécifier l’endroit où se trouve l’image que vous souhaitez inclure dans votre page :

<img src="images/header.gif" alt="Image" width="794" height="160" />

Dans cette partie de HTML, l’élément <img /> lui-même signale au navigateur que vous souhaitez inclure une image ; l’attribut src fournit des informations spécifiques à l’image, header.gif dans cet exemple. D’autres attributs (tels que width ou height) fournissent des informations sur la manière d’afficher l’image, tandis que l’attribut alt fournit un texte à afficher à la place de l’image dans les navigateurs qui n’affichent que du texte (ou qu’un logiciel de conversion de texte en paroles peut prononcer, pour les déficients visuels).

Le Chapitre 7 décrit l’élément <img /> et ses attributs en détail.

Les attributs doivent figurer dans la balise ouvrante de l’élément souhaité, après le nom de l’élément mais avant le signe supérieur, comme ceci :

<balise attribut="valeur" attribut="valeur">

Les règles de syntaxe XML imposent que les valeurs des attributs figurent toujours entre guillemets mais vous pouvez faire figurer les attributs et leurs valeurs dans l’ordre que vous souhaitez à l’intérieur de la balise.