Conception du site ...44 Création de la page d’accueil ...47 Résumé ...69
Vous avez choisi un ou plusieurs éditeurs de pages Web, avez téléchargé et installé éventuellement quelques navigateurs complémentaires à fin de test : vous êtes prêt à passer à la conception de votre site.
Éléments étudiés dans ce chapitre :
j !DOCTYPE
j HTML
j HEAD,TITLE,META
j BODY,Hn,P,A,BR
3.1. Conception du site
Tout d’abord, prenez un peu de temps pour réfléchir, si possible avec une feuille de papier et un stylo. Pour bien concevoir votre site dès les premiers instants, vous devez en prévoir dès le début sa structure et son contenu. Il sera bien sûr toujours possible de procéder à des modifications par la suite (vous n’y manquerez d’ailleurs pas), mais le temps consacré à cette réflexion initiale sera largement amorti !
Un site peut être considéré comme une arborescence contenant les éléments suivants :
j Une page d’accueil, avec une barre de navigation.
j Une ou plusieurs pages secondaires, dont certaines peuvent également comporter une nouvelle barre de navigation : cela correspond à une nouvelle ramification de l’arborescence.
j Éventuellement des pages tertiaires, et ainsi de suite…
Le site le plus simple ne comporte qu’une page, tandis que les sites complexes peuvent posséder de très nombreuses ramifications. Dans ce dernier cas, le site propose souvent une carte du site, destinée à faciliter la navigation des utilisateurs (voir Figure 3.1).
Sur votre feuille de papier, commencez à tracer l’arborescence de votre site, en figurant chaque page par un rectangle (pas trop petit !). Dans chaque rectangle, donnez un titre à la page, puis notez un aperçu du contenu prévisionnel.
N’hésitez pas à répartir des informations trop abondantes en plusieurs pages. Les questions à se poser à ce stade sont les suivantes :
j Quel est le but de ce site ?
j L’information proposée est-elle utile ?
j Une même page ne comporte-t-elle pas trop d’informations ? Si oui, est-il possible de diviser logiquement ces informations ?
j La structure obtenue est-elle équilibrée et pertinente ?
Dans le cadre de l’exemple de ce livre, le site envisagé est présenté dans la figure suivante.
Figure 3.1: Page de plan du site du portail de l’administration française (www.service-public.fr/aide/plan.html)
Page d’accueil
Ma région
Ma famille
Mes
passions Figure 3.2: Ébauche du plan de notre site présenté dans l’ouvrage
Cela fait, vous êtes prêt à débuter réellement la création de la première page de votre site Web. Vous allez commencer par la page la plus importante, la page d’accueil. À la fin de ce chapitre, vous aurez créé une page identique à celle de la figure qui suit, dont le code est présenté dans le listing suivant.
Listing 3-1 : Page d’accueil telle que conçue à la fin de ce chapitre (version 1.3.3)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.3.3">
</HEAD>
<BODY>
<H1 align="center">Ma page d’accueil</H1>
<H2 align="center">Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations :<BR>
sur ma <A href="region.html">région</A> ;<BR>
sur ma <A href="famille.html">famille</A> ;<BR>
sur mes <A href="passions.html">passions</A>.</P>
<P align="center"><A href="mailto:votre_nom@votre_FAI">
Ecrivez-moi !</A>.</P>
</BODY>
</HTML>
Nous allons procéder pas à pas pour la création de cette page, en expliquant à chaque étape les instructions et éléments employés.
Figure 3.3:
Page d’accueil telle que conçue à la fin de ce chapitre
3.2. Création de la page d’accueil
La page d’accueil est la page la plus importante d’un site : c’est elle qui incitera le visiteur à examiner plus en détail le site ou à le quitter immédiatement. Il existe de nombreuses façons de rendre attrayante une page d’accueil (ou d’ailleurs toute page) : vous les découvrirez peu à peu au fil de la lecture de ce livre.
Il est fréquent de se contenter d’une ébauche de page d’accueil au moment de la construction du site, pour la fignoler en dernier lieu. Il ne s’agit donc pour le moment que de créer une première page relativement simple. Gardez bien présent à l’esprit que, à partir de HTML 4, le plus important concerne la structure de la page. La majorité des enjolivements sont facilement ajoutés par la suite.
La démarche est ici très similaire à celle recommandée lors de la rédaction d’un document à l’aide d’un traitement de texte : vous commencez par une frappe « au kilomètre », en privilégiant la structure (les phrases, paragraphes, chapitres et autres subdivisions) par rapport aux enrichissements qui ne seront apportés qu’ultérieurement, généralement à l’aide d’une feuille de style.
En effet, une page Web n’est en réalité guère plus qu’un fichier texte pourvu d’un ensemble de balises de spécification permettant l’affichage dans un navigateur Web (il en va de même dans votre traitement de texte, mais ces balises internes sont masquées).
Pour insister sur ce fait, les premiers travaux seront effectués uniquement à l’aide du Bloc-Notes. Nous vous conseillons de créer sur votre disque dur, à l’emplacement de votre choix, un nouveau dossier nommé par exempleMonSiteWeb: vous y rassemblerez tous les fichiers du site Web. Sinon, par défaut, le Bloc-notes devrait créer vos fichiers dansMes Documents.