Africa Computing -

Chapitre 2 : Introduction à la création de pages web

Avant toute chose il faut savoir à quoi va servir votre site web, autrement dit comment allez-vous utiliser le média Internet ?

Il existe différents types de sites qu’on peut classer en trois grandes catégories :

• Les sites vitrines : Ce sont des sites qui servent de carte de visite améliorée, ou de book en ligne. Généralement, l’aspect graphique du site est privilégié au contenu, la fréquence de mise à jour est assez réduite et le site est géré par une seule personne. La fonction essentielle de ce genre de sites est d’être présent sur Internet et de rendre accessible son travail ou autre à l’ensemble des internautes...

• Les sites marchands : Ce sont des sites de vente en ligne, généralement de grosses centrales de vente, spécialisées dans différents domaines, par exemple amazon.fr. Ces sites sont généralement gérés par un ou plusieurs webmestres, et reposent sur l’emploi de bases de données et de systèmes comme le paiement sécurisé, la gestion de comptes clients etc. Généralement le graphisme est assez simple et le contenu mis en avant.

• Les web-zines : Ce sont des sites à fort contenu rédactionnel (presse électronique, sites communautaires...) qui sont gérés et mis à jour par différentes personnes, ayant des statuts différents. On parle soit de rédacteur, soit d’administrateur, avec des restrictions en fonction du statut. On peut comparer ce genre de site à une application en ligne, qui génère automatiquement les pages du site sans avoir de connaissances poussées sur la création de site Internet.

Avant de prendre une décision sur le type de site que vous allez développer, il est conseillé d’aller voir ce qui se fait sur Internet, par les autres structures ou organismes qui travaillent dans le même domaine que vous. On appelle cela une étude concurrentielle, cela vous permettra d’avoir une vision plus concrète de ce que vous allez intégrer dans votre site et les différents moyens techniques à mettre en oeuvre.

Quel type de contenu allez-vous intégrer dans votre site ?

Un site web se construit en fonction de son contenu. Il faut savoir de quels types de documents vous disposez pour alimenter votre site. Cela peut être du texte, des images, des animations, de la vidéo ou du son.

Sous quelles formes sont ces données ?

CD-rom, disquette, papier, photos, etc. Cela vous permet d’estimer le temps éventuel de numérisation des données.

Comment classer et ordonner ces données pour les rendre facilement accessibles ?

Il faut définir des rubriques dans lesquels vous allez répartir le contenu en fonction du type ou du sujet. C’est ce qu’on appelle l’arborescence du site. Cette partie est très importante. Vous devez organiser votre contenu de manière logique, il faut que les internautes puissent accéder à l’information le plus rapidement et le plus simplement possible, sans êtres perdus au bout de trois clics (voir Définir la structure du site).

À qui s’adressent votre site et son contenu ?

Savoir à qui vous vous adressez est primordial pour définir un certain nombre d’éléments liés à l’aspect graphique et au ton rédactionnel qu’il convient d’employer. Par exemple si vous concevez un site destiné à la musique visant une publique jeune, avec des images, des vidéos et du son comme contenu, vous pouvez vous permettre d’utiliser un graphisme dynamique, recherché, avec des couleurs vives, des animations etc. Vous pouvez aussi employer un ton rédactionnel plus amicale, voire humoristique. Par contre s’il s’agit d’un site d’information par exemple, visant une public adulte avec essentiellement du texte et des images comme contenu, le graphisme sera traité plus sobrement pour mettre en avant le contenu. Le ton rédactionnel sera beaucoup plus classique, le but étant d’aller à l’essentiel : le fond.

Quelle sera la fréquence des mises à jour ? Dans quelles parties du site ? Qui sera responsable des mises à jour ?

Il est conseillé de définir les parties ou rubriques du site qui vont être souvent modifiées. Par exemple la rubrique Présentation dont le but sera de présenter l’organisme ou le site ne changera pas souvent, tandis que la rubrique Actualité, devra être mise à jour régulièrement. Le fait de définir ainsi des parties distinctes à mettre à jour, permet d’une part d’avoir une notion du travail d’entretien qu’il va falloir effectuer et d’autre part d’estimer quelle sera la fréquence des mises à jour. Vous pouvez fixer par exemple une mise à jour du site tout les quinze jours. Il est important que les internautes puissent connaître la fréquence des mises à jours pour savoir quand revenir et avoir accès aux nouveautés, ce qui permet d’en fidéliser un certain nombre. Serez-vous la personne qui va mettre le site à jour ? Ou bien ce sera le propriétaire du site ? Ou encore différentes personnes qui travaillent pour le site ? La réponse à ces questions est primordiale pour savoir dans quelle optique vous allez travailler. Cela vous permettera de savoir quels type d’outils et de technologie vous allez utiliser ainsi que la manière de présenter votre contenu.

Définir la structure du site

En règle générale définir la structure du site ou l’arborescence, c’est définir comment les internautes vont accéder au contenu. La structure que l’on retrouve le plus souvent est :
  Page d’accueil, c’est la première page du site, cette page renvoie sur les différentes rubriques contenues dans le site.
  Page présentation, page servant à présenter le site et son contenu.
  Pages rubrique, ce sont les autres rubriques du site.
  Page contact, pour que les internautes vous contactent, soit par mail soit par voie classique.

La présentation la plus classique est un bandeau de titre en haut, un menu de navigation à gauche, et un menu de navigation en bas avec le contact.

Définir la charte graphique du site

C’est l’élaboration et la description des différents éléments graphiques qui composent l’aspect de votre site Internet. L’ensemble comprend le logo, une bannière, les boutons, les en-têtes, les images, les couleurs, les polices de caractères utilisées, le système de navigation. Elle se doit d’être uniforme, afin de donner une image cohérente de votre site et de renforcer l’originalité et la crédibilité de ce qui va être présenté sur le site. On peut adapter une charte graphique papier à l’Internet, en reprenant le logo, les couleurs du logo, la typo utilisée, etc. Le graphisme est un élément important pour la fréquentation de votre site et la compréhension de votre contenu. Quand vous recherchez une information sur Internet, vous obtenez une multitude de réponses. Le graphisme peut être un élément décisif dans le choix de l’internaute.

Il existe deux méthodes complémentaires qui permettent de créer des sites Web :

• Le code HTML brut est celle qu’il faut connaître en premier lieu. Le webmestre tape le code HTML dans un éditeur de textes, et connaît les balises qui composent sa page. Il est capable de mettre le site à jour et faire des modifications à partir de n’importe quel ordinateur connecté à Internet. En cas de problème, il sait corriger les erreurs. De plus, le code généré est clair et léger.
• Les éditeurs WYSIWYG (What You See Is What You Get - ce que vous voyez est ce que vous obtenez. La conception est facilitée puisqu’on voit l’aspect de la page au fur et à mesure qu’elle est construite), qu’ils soient commerciaux (DreamWeaver) ou libres (Amaya) permettent de faciliter la conception une fois qu’on connaît les bases de la programmation HTML. Le code généré est plus lourd et difficile à comprendre, bien que les versions récentes de ces logiciels ne posent plus ce problème.

Présentation du HTML

Le HTML est un système qui formalise l’écriture d’un document avec des balises de formatage indiquant la façon dont doit être présenté le document et les liens qu’il établit avec d’autres documents. Il permet, entre autres, la lecture de documents sur Internet à partir de machines différentes grâce au protocole HTTP. En effet le Web est une énorme archive vivante de textes formatés, d’images, de sons, de vidéo... Ces documents sont organisés autour d’une page d’accueil qui guide les visiteurs vers d’autres pages HTML grâce à des liens hypertexte.

Le HTML est un langage à balises

Le HTML n’est pas un langage de programmation, c’est un simple fichier texte contenant des balises permettant de mettre en forme le texte, les images... Une balise est une commande (un nom) encadrée par le caractère inférieur < et le caractère supérieur > par exemple <H1>.

Le HTML est un langage statique

Le contenu d’une page HTML ne dépend pas d’un contexte spécifique. C’est toujours le même tant que le webmestre ne fait pas de modification (mise à jour) : on dit qu’une page HTML est statique. Une page HTML a toujours l’extension .htm ou .html, on peut reconnaître les pages dynamiques grâce à leur extension (.php ou .php3 pour les pages écrites en PHP (Processeur HyPertexte (http://www.php.net) - est un langage de scripts côté serveur (c’est le serveur qui interprète le script, et le transforme en langage HTML pour être lu par le client) par exemple).

Un document HTML a toujours la structure suivante :

<HTML>
<HEAD>
<TITLE>
 Titre de la page
</TITLE>
|
| (balises d'en-tête)
|
</HEAD>
<BODY>
|
| (corps de la page)
|
</BODY>
</HTML>

Balises d’en-tête

En plus de la balise de titre, on place dans la balise d’en-tête (entre <HEAD> et </HEAD>) les balises META et les fonctions de script.

• Balise de titre - le texte placé entre <TITLE> et </TITLE> sera le nom de la fenêtre du navigateur (texte de la barre de titre)
• Balises META - ce sont des balises destinées aux robots. Par exemple, on peut mettre une description, des mots-clé, le nom de l’auteur du site afin de référencer son site dans les moteurs de recherche tels que http://google.fr automatiquement.
• Fonctions de script - il est possible d’écrire des scripts côté client en utilisant un langage tel que javascript afin de dynamiser le site web.

Corps de la page

C’est le contenu de la page Web. Tout ce qu’on y écrit est affiché ou interprété sur la page. Si on place du texte brut, il est affiché tel quel. Les retours à la ligne sont considérés comme les espaces ; et plusieurs espaces équivalent à un seul.

On utilise les balises pour la mise en forme.

Les balises de base

Une balise est entre signes inférieur < et supérieur > , par exemple <B>. Il faut fermer certaines balises à l’aide du signe slash, par exemple </B>.

• <BR> - retour à la ligne
• <!-- commentaires -->
• <P ...>texte</P> - texte est un paragraphe. La fermeture de cette balise est facultative. Les paramètres (facultatifs) peuvent être :
  • ALIGN="left|center|right|justify" - alignement à gauche, au centre, à droite ou justifié (à gauche et à droite)
  • TITLE="texte" - texte de l’infobulle qui apparaît lorsqu’on place la souris sur le paragraphe
• <B>texte</B> - formate texte en gras
• <I>texte</I> - formate texte en italique
• <U>texte</U> - souligne texte
• <SUB>Texte en indice</SUB> - Texte indice
• <SUP>Texte en exposant</SUP> - Texte exposant
• <FONT ...>texte</FONT> - formate texte selon les paramètres :
  • FACE="police" - détermine la police
  • SIZE="taille" - détermine la taille (2 à 7)
  • COLOR="couleur" - détermine la couleur :
    • soit par un nom de couleur en anglais (red, lightblue, darkgray...)
    • soit par un code de couleur #RRVVBB où RR est l’intensité du rouge en code hexadécimal, VV du vert et BB du bleu. Exemple : #FF0000 correspond à une intensité FF (soit 255) en rouge, 0 en vert et 0 en bleu, ce qui donne rouge pur.

A l’aide d’un éditeur de textes simples tel que le Notepad (Bloc-notes), nous allons voir le contenu d’une page HTML. Créez une page vierge, puis tapez le code suivant :

<HTML>
<HEAD>
 <TITLE>Mon site personnel</TITLE>
</HEAD>
<BODY>
Bienvenue sur mon site personnel
</BODY>
</HTML>

Vous obtenez une page très simple avec simplement le texte Bienvenue sur mon site personnel. Vous pouvez constater que la conception de pages web serait rapidement très rébarbative si nous ne disposions pas de logiciels WYSIWYG tels que DreamWeaver.

Nous allons utiliser DreamWeaver afin de créer la même page web. Vous pouvez constater qu’il suffit de cliquer sur la page et d’écrire le texte pour qu’il s’affiche tel que vous l’obtiendrez dans votre page web.
La structure classique d’un site web est un tableau de 3 lignes. La hauteur de ce tableau doit être définie à 100% de la taille de l’écran afin d’être extensible et indépendante de la résolution de l’utilisateur.
Cliquez sur Insérer puis Tableau. Choisissez 3 lignes, puis cliquez sur OK.

Cliquez dans le tableau qui apparaît avec le bouton droit de la souris. Choisissez Tableau puis Sélectionner le tableau

Dans la zone hauteur (H), tapez 100 puis choisissez % dans la liste afin que le tableau occupe 100% de la hauteur de l’écran. Vous pouvez aussi choisir une nouvelle couleur d’arrière-plan.

Vous pouvez remarquer que le tableau n’occupe pas toute la taille de l’écran. C’est à cause des marges. Cliquez sur Modifier puis Propriétés de la page afin de les régler à 0 comme indiqué sur la figure suivante. Profitez-en pour modifier le Titre de la page (qui apparaîtra dans la barre de titre de la fenêtre du navigateur).

Nous allons maintenant taper le titre dans la première ligne ; et les contacts dans la dernière ligne du tableau. Cliquez dans la première ligne. Réglez la hauteur de la cellule à 60 pixels. Choisissez une couleur de texte et réglez la taille à 7, choisissez l’alignement centré puis tapez votre texte : Mon site personnel.

Recommencez dans la 3ème ligne en tapant le nom de l’auteur. Vous choisirez la taille de texte 2 points et une hauteur de cellule 15 px.
La ligne du milieu est celle où vous allez taper votre texte. Tapez le texte suivant :

Je m’amuse avec DreamWeaver C’est très amusant

Cliquez sur Fichier puis sur Aperçu dans le navigateur et choisissez un navigateur afin de voir un aperçu de votre page. Si aucun navigateur n’apparaît dans la liste, cliquez sur Définir les navigateurs et choisissez un navigateur pour afficher un aperçu. A l’avenir, vous pourrez cliquer sur la touche F12 pour cela.

Il est intéressant de redimensionner la fenêtre de votre navigateur afin de bien comprendre l’effet de la taille du tableau réglée à 100% en hauteur comme en largeur. C’est de cette façon qu’on rend un site indépendant de la résolution de l’utilisateur. Il faut prévoir en règle générale que l’utilisateur utilise une résolution de 800x600 ou plus, donc concevoir son site pour fonctionner en 800x600.
Pour afficher un menu à gauche dans le tableau, il suffit de cliquer avec le bouton droit dans la 2ème ligne puis de choisir Tableau > Ajouter une colonne. Redimensionnez la nouvelle colonne puis tapez texte suivant :

Accueil Présentation Contact

Enregistrez votre travail (Fichier > Enregistrer ou Ctrl+S), enregistrez-le dans le répertoire formation dans Mes documents et appelez-le index.html.
Créez un nouveau fichier (Fichier > Nouveau ou Ctrl+N), tapez Présentation du site - en construction puis enregistrez dans le même dossier sous presentation.html
Attention : ne mettez jamais d’accent ni de caractères spéciaux dans un nom de fichier ou de répertoire faisant partie d’un site web.

Maintenant, ouvrez de nouveau index.html. Sélectionnez Présentation et tapez presentation.html dans la zone lien. Validez en appuyant sur Entrée. Le texte du lien est souligné. Le mot Présentation est maintenant un lien vers le fichier presentation.html.

Pour cela, il est aussi possible de cliquer sur l’icône en forme de dossier jaune et de parcourir les fichiers à la recherche de celui désiré - presentation.html.
Rendez vous dans le répertoire Mes documents\Formation puis double-cliquez sur l’icône du fichier index.html. Essayez le lien. Vous remarquez que le curseur de la souris se transforme en main au passage sur le texte du lien. Cliquez pour afficher le fichier presentation.html.
Exercice 1
Construisez un site de 3 pages contenant les rubriques Accueil, Présentation et Contact à partir de cette structure.
Exercice 2
Ajoutez maintenant un menu de navigation dans la 3ème ligne sous la forme d’une ligne de liens du type : Accueil :: Présentation :: Contact dans chaque page de votre site.

Imaginez qu’on veuille maintenant ajouter une rubrique Actualités. Il va falloir modifier les 2 menus de navigation pour chaque page... Cela deviendrait vite pénible sur un site comportant plusieurs dizaines de pages !
Nous allons voir la notion de modèles qui permet d’utiliser un gabarit dans lequel seules les zones modifiables changeront. Les modèles permettent de séparer le fond de la forme, puisqu’une modification du modèle affecte toutes les pages.
Définir un site

Tout d’abord, nous allons définir le site dans lequel nous allons travailler.
Cliquez sur Sites > Modifier les sites et choisissez Nouveau dans la boite de dialogues.
Les seules valeurs à changer sont le nom du site (Site avec modèle) et le dossier racine local (créez un sous répertoire modele).

Cliquez sur OK puis sur Terminé. Créez un nouveau fichier comportant :
Un tableau de hauteur et largeur 100% composé de 3 lignes et 1 colonne, de fond pâle.
Un tableau de hauteur et largeur 100% composé d’1 ligne et de 2 colonnes
Un titre et des marges de 0
Tapez un titre et les 2 menus de navigation avec les 3 rubriques de l’exercice 1 (un menu à gauche et un en bas).
Nous allons définir cette page comme modèle. Cliquez sur Fichier > Enregistrer comme modèle. Tapez le nom modele dans la boite de dialogue, puis cliquez sur OK.

Choisissez la zone modifiable (ligne 2, colonne 2) puis cliquez sur Modifier > Modèles > Marquer la sélection comme modifiable. Tapez corps puis cliquez sur OK.

Note : à partir de la version MX, la procédure pour créer une région modifiable est de cliquez successivement sur Insertion > Objets de modèle > Région modifiable.

Enregistrez puis cliquez sur Fichier > Nouveau à partir du modèle. Choisissez le modèle modele puis cliquez sur OK.
Créez vos 3 fichiers accueil.html, presentation.html et contact.html sur ce modèle. Ajoutez maintenant la rubrique Actualités et le fichier actualites.html basé sur ce modèle. Vous devez modifier le modèle. Lorsqu’il vous proposera de mettre les fichiers à jour, cliquez sur Mettre à jour afin que les modifications soient prises en compte par tous les fichiers utilisant ce modèle. Constatez les résultats dans le répertoire modele