Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Créer une page Web

Créer une page Web

Voilà l'heure que vous attendez impatiemment. Cette fois-ci on va se comporter d'une façon plus pragmatique. Notre mission n'est pas assez dure à accomplir. On va seulement créer une modeste page Web qui sera un fil conducteur pour nos prochains chapitres.

Affichage du code source XHTML

A présent vous avez tous les outils nécessaires pour créer une page web et la faire afficher : les éditeurs ASCII (Bloc-notes et Notepad++) ou les éditeurs WYSIWYG (Dreamweaver ou FrontPage) et les agents utilisateurs (navigateurs ou browsers) pour visualiser la page web, donc il est grand temps de passer à la pratique.

Avant de créer votre première page web, je vous invite à afficher le code source de la présente page (ou toute autre page web) que vous êtes en train de lire, pour avoir une petite idée sur le code XHTML, donc après avoir ouvert une page web. Vous pouvez afficher son code source sous n'importe quel navigateur, en cliquant sur le bouton droit de la souris au-dessus du texte ou une zone blanche qui ne contient rien, puis choisissez l'option "Afficher le code source" (ou équivalent).

Je vois que ce charabia vous a choqué xhtml mais soyez sûr et certain que vous allez vous y habituer seulement si vous suivez mes conseils à la lettre xhtml

Maintenant retrousser vos manches car on va accélérer un petit peu le rythme xhtml Ouvrez l'un des éditeurs qui vous semble bon, Dans l'état actuel des choses, moi je vais me servir du Bloc-notes, recopiez le code ci-après, si vous préférez le taper faites attention à la casse surtout pour la première ligne qui contient des majuscules et minuscules :

Code xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>salut tout le monde</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> </body> </html>

Après cela vous devez enregistrer ce bout de code, pour ce faire utilisez le raccourci "CTRL + s", une fenêtre va apparaître.

xhtml

Dans la zone "Nom du fichier" encadrée par le bleu où vous trouverez par défaut la valeur "*.txt", mentionnez un nom de votre choix qui sera attribué à votre page web puis ajoutez l'extension html ou htm pour signaler au navigateur qu'il s'agit d'un fichier xhtml vous allez taper quelque chose de ce genre "votrenom.html" ou "maPage.htm", choisissez l'endroit où il sera sauvegardé le 'bureau' ou 'mes documents', enfin validez en cliquant sur enregistrer.

Maintenait rendez-vous à l'endroit ou vous avez enregistré votre page. Vous allez trouvez quelque chose de ce genre :

Firefox Internet Explorer Netscape Navigator

Votre fichier XHTML prend l'icône de votre navigateur par défaut, donc vous pouvez aussi avoir l'icône du navigateur Netscape ou Opera, dans le cas où vous aurez installé plusieurs navigateurs, le fichier prendra l'icône du navigateur utilisé par défaut c'est-à-dire qui s'exécute lorsque vous double-cliquez sur le fichier XHTML.

Maintenant jetons un coup d'œil sur notre travail, double-cliquez sur la page XHTML, vous allez trouvez :

xhtml

Quoi une page vierge xhtml pour tout ce travail xhtml Du calme la page n'est pas aussi vide que vous le croyez il comporte des éléments très importants :

Vous pouvez toujours rouvrir votre page web pour la mettre à jour ou l'alimenter par des titres et des paragraphes voir l'embellir par des images. Pour cela clic droit sur votre fichier puis "ouvrir avec" et enfin choisissez un éditeur, bloc-notes, Notepad++ ou carrément Dreamweaver.

Vous pouvez laisser votre navigateur ouvert, puis apporter des modifications au code source, enfin revenir sur votre browser et cliquer sur l'icône actualiser (reload en anglais) xhtml pour que les nouvelles modifications prennent effet.

Explication du code xhtml

Vous constatez que la première ligne contient des majuscules ce qui n'est pas conforme à la syntaxe du XHTML, eh bien retenez une chose très importante c'est la seule balise qui échappe à cette règle. Ne posez pas beaucoup de questions à propos de cette ligne, par contre je veux que vous fassiez attention à la valeur "strict" qui peut se substituer par deux autres valeurs :

La deuxième ligne correspond à la balise HTML qui va contenir toute notre page web, sa balise de fermeture se trouve tout en bas de la page.

A l'intérieur des deux balises HTML se trouve la balise <head> (entête) qui contient des informations très importantes sur la page et qui ne sont pas destinées à être visualisées, comme le titre de la page <title></title>, le type d'encodage <meta /> etc.
Enfin la balise <body> (corps) celle-ci va contenir tout le corps de notre page (titres, paragraphes, images, liens, tableaux, etc.).

Bref, faites attention à la casse de la première ligne (majuscules et minuscules), votre document doit contenir les deux balises HTML un entête et le corps c'est la structure minimale d'un fichier XHTML.

Chaque page web doit comporter cette structure minimale, puis vous ajoutez d'autres balises dans l'en-tête (entre les deux tags <head> </head>) et dans le corps (entre les deux tags <body></body>) de votre page.

A vrai dire, la page Web qu'on vient de concevoir n'a rien de si intéressant Mais ne vous en faites pas, c'est en forgeant qu'on devient forgeron et puis ce n'est que la première expérience. Donc patience les gars l'univers du Web est très vaste et pourtant cernable. Dans le chapitre suivant vous allez apprendre la syntaxe XHTML (balises, attributs et commentaires).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau