[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Officiels > Site Web > Liste de toutes les notes

Apprenez à créer votre site web !

Auteur : M@teo21
Créé : le 20/07/2005 23:22:56
Modifié : le 26/09/2007 11:48:45
Avancement : 100%
Imprimer tout le tutoriel

Comment on fait un site web ? C'est compliqué ? C'est long ? C'est pour les pros ?

Que nenni !

Faire un site web aujourd'hui, c'est facile et passionnant. Pas besoin d'être un expert pour en faire un, il suffit juste d'avoir un tutoriel qui vous explique depuis le début comment ça fonctionne, à votre rythme.

Ca tombe bien, car j'ai créé ce tutoriel spécialement pour vous qui n'y connaissez rien.
Ici, pas de connaissances requises. On part de Zér0, depuis le début, et on apprend au fur et à mesure comment ça fonctionne.

Faites chauffer vos claviers, vous allez bientôt impressionner vos proches !

Ce cours est composé des parties suivantes :

Les bases du XHTML
C'est plus joli avec du CSS !
XHTML & CSS, toujours plus forts !
Annexes

Partie 1 : Les bases du XHTML

Vous aimez ce cours ?
Alors vous aimerez le livre
du même auteur !
Découvrez ce qu'est le XHTML...

Et apprenez à vous en servir pour faire votre site web !
Partie 2 : C'est plus joli avec du CSS !

Maintenant que vous connaissez les bases du XHTML
Donnez du "style" à votre page !
Partie 3 : XHTML & CSS, toujours plus forts !

Non, vous n'avez pas encore tout vu,
Combinez XHTML et CSS, c'est magique !
Partie 4 : Annexes

Les annexes contiennent d'autres informations qui vous seront utiles lors de la création de votre site web, comme des Mémos (résumé), ou encore des explications sur la façon dont on envoie un site sur le web.
Vous n'êtes pas obligés de lire ces informations à la fin, vous pouvez vous en servir n'importe quand lors de votre lecture du cours.

Partie 1 : Les bases du XHTML

Vous aimez ce cours ?
Alors vous aimerez le livre
du même auteur !

Découvrez ce qu'est le XHTML...

Et apprenez à vous en servir pour faire votre site web !

Avant de commencer...

Bonjour et bienvenue à toutes et à tous !
Voici donc le premier chapitre de ce cours pour débutants, qui va vous apprendre à créer votre site web !

Nous allons passer quelques temps ensemble, tout dépendra de la vitesse à laquelle vous apprendrez. Si vous lisez ce cours régulièrement et à une bonne vitesse, vous l'aurez terminé en une semaine. Mais si vous avez besoin d'un peu plus de temps, ne vous inquiétez pas : le principal est que vous y alliez à votre rythme, en prenant du bon temps.

Ah, mais je parle, je parle, et je ne me suis pas encore présenté

Donc moi, c'est M@teo21 (du moins c'est mon pseudo, vous vous doutez bien que ce n'est pas mon vrai nom

)
Je serai votre guide tout au long de ce cours... Je vais essayer de faire en sorte que l'apprentissage soit pour vous un vrai plaisir

Ce tutoriel va donc vous apprendre à créer un site web de A à Z.
Vous allez y découvrir 2 langages informatiques, appelés XHTML & CSS. Ce sont eux qui vous permettront de créer votre site web.

Commençons tout de suite par voir ce que sont ces langages au nom... plutôt imprononçable o_O

XHTML ? CSS ? C'est quoi ça ?

Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc...
Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.

Il existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques connaissances en informatique.
Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Mon rôle sera de vous apprendre à vous en servir.

Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ?

C'est vrai que, quand je vous dis que vous allez apprendre 2 langages à la fois, vous vous demandez si ce n'est pas déjà trop pour vous.
Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure que tout a été très bien pensé. Chacun de ces 2 langages sert à faire quelque chose de précis, et les deux se complètent naturellement pour au final donner un site web :

XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir
Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".

Le XHTML est le langage qui remplace l'ancien, appelé HTML, dont vous avez peut-être entendu parler. Il y ressemble assez, mais le fonctionnement du XHTML est beaucoup mieux pensé. Bref, c'est lui le plus récent, c'est donc lui que nous allons apprendre.
CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en rouge et sont soulignés, mon texte est dans la police arial, mon nom est centré, mon menu a un fond blanc..." etc etc.
Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page de votre site. Nous pourrons ainsi lui donner une belle présentation, sans pour autant être des experts en graphisme (et ça tombe bien, parce que côté graphisme je suis carrément nul )

En résumé, on se sert de :

XHTML pour écrire le contenu de nos pages web.
CSS pour présenter ce contenu.

Ces langages sont donc complémentaires, l'un ne va pas sans l'autre. Si vous retenez que XHTML sert à taper le contenu, et CSS à présenter ce contenu, alors croyez-moi : vous avez déjà compris 95% du principe !

Dans la première partie de ce cours pourtant, on ne va pas parler de suite de CSS. On ne va faire que du XHTML, parce que c'est par là qu'il faut commencer.
Sans CSS, vous allez donc pouvoir faire vos premières pages web. Elles seront assez moches, mais patience... Une fois que vous arriverez à la partie II de ce cours, on introduira le CSS, et vous allez voir tout d'un coup vos pages web s'embellir (presque) sans effort

L'éditeur

Une question que vous devez certainement vous être déjà posée, c'est : "De quel logiciel je vais avoir besoin pour créer mon site web ?"

En fait, des logiciels qui permettent de créer un site web, il y en a des tonnes.
Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?

Eh oui, accrochez-vous bien parce que... il s'agit de Bloc-Notes !

Croyez-moi si vous voulez, mais ce logiciel suffit amplement à créer un site web !
Si vous avez un Mac, vous avez certainement un logiciel similaire : un éditeur de texte tout simple.

Bon, en théorie donc, Bloc-Notes suffit. C'est avec lui que j'ai réalisé mon premier site web (en fait, il s'agit de ce site, le Site du Zér0, j'en ai fait qu'un seul

)
Mais avec un peu de recherche, j'ai découvert un logiciel vraiment utile et qui aide pas mal en colorant automatiquement le code XHTML / CSS.

Ce logiciel est simple, en français et gratuit. Il s'appelle Notepad++, et je vous invite à le télécharger :

Page de téléchargement de Notepad++
Prenez la version avec installeur (.exe) et non le .zip

Notez qu'il n'est pas indispensable de prendre Notepad++, si vous gardez Bloc-Notes vous pouvez très bien vous en sortir. Mais bon, comme Notepad++ est gratuit et qu'il va un peu vous aider, ça serait dommage de s'en priver.

Si vous êtes sous Mac OS, sachez qu'il existe de nombreux éditeurs du même genre pour les Mac. Je peux vous recommander Smultron.
Sous Linux, les éditeurs ne manquent pas. Vous avez d'ailleurs sûrement déjà vim ou emacs installé.

Lorsque vous aurez installé Notepad++, je vous conseille de faire la manipulation suivante : allez dans le menu "Langages" et choisissez "HTML". Cela permettra au logiciel de savoir que l'on va taper du XHTML.

Lorsque vous utiliserez le logiciel, il colorera votre code comme ça :

Pour l'instant, ne vous préoccupez pas de savoir ce que signifie tout ce charabia que vous pouvez voir. C'était juste pour vous donner un aperçu de ce à quoi servait ce logiciel.

Bien, maintenant que nous sommes au point et que nous avons notre éditeur de pages web, nous allons pouvoir parler du dernier élément indispensable (que vous avez déjà là encore) : le navigateur.

Les navigateurs

Savez-vous ce qu'est un navigateur ?
Cela peut paraître évident pour certains, mais comme je vous avais promis qu'on partait de Zér0 (après tout c'est le principe de ce site), je vais expliquer rapidement ce que c'est pour ceux qui ne seraient pas sûrs...

Le navigateur, c'est le programme qui vous permet de voir des sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux

Le travail du navigateur, c'est de lire le code XHTML / CSS que vous avez écrit, et d'afficher ce qu'il représente. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge.

Parmi les navigateurs qui existent, citons :

Internet Explorer
Mozilla Firefox
Opéra
Netscape
Konqueror (pour Linux)
Lynx (pour Linux)
Apple Safari (pour Mac, et depuis peu pour Windows)
etc...

La liste est longue, mais je vous ai cité les principaux.
Je vais vous présenter deux d'entre eux:

Internet Explorer
Mozilla Firefox

Vous allez voir que si je prends le temps de vous parler de ces deux-là, c'est qu'il y a bien une raison...

Internet Explorer

Le plus connu et le plus répandu de tous les navigateurs est Internet Explorer. Et je pense que j'ai très peu de chances de me tromper en disant que c'est celui que vous êtes en train d'utiliser...
Il y a une raison à cela : c'est le navigateur livré par défaut avec tous les Windows. Et comme Windows est le système d'exploitation le plus répandu... bref, pas besoin d'être un génie pour comprendre pourquoi Internet Explorer est le logiciel le plus utilisé.

Internet Explorer, le navigateur le plus répandu

Oui mais voilà, ce logiciel est à la traîne.
Côté XHTML, ok ça va il suit. Mais dès qu'il s'agit de faire du CSS, vous allez voir qu'il ne connaît pas tout, et que parfois il l'affiche différemment des autres navigateurs... ce qui est assez ennuyeux.

La version présentée ci-dessus est la dernière en date (Internet Explorer 7). Cependant, la version précédente (Internet Explorer 6) est toujours largement utilisée par de nombreux internautes qui ne se sont pas mis à jour :

Internet Explorer 6, une ancienne version encore utilisée

En résumé, les versions les plus utilisées d'Internet Explorer (abrégé "IE") sont :

IE 6 : livré avec Windows XP
IE 7 : livré avec Windows Vista

Les deux ont des lacunes, mais comme vous pouvez vous en douter, IE 6 est le pire parce que c'est le plus vieux.

Seulement voilà, on ne peut pas faire d'un coup de baguette magique que toutes les personnes qui ont Internet Explorer utilisent un navigateur plus récent (quoique des fois, on aimerait :p)
Le problème est que IE est le seul navigateur vraiment à la bourre, tous les autres fonctionnent de la même manière et suivent les mêmes règles.

Pour pouvoir faire correctement du XHTML / CSS, il est indispensable que vous ayez un autre navigateur en plus d'Internet Explorer.
Je vais vous présenter celui qui, à mon goût, est le meilleur : Mozilla Firefox.

Mozilla Firefox

Mozilla Firefox est un programme gratuit et disponible en français. Il va nous être aussi utile car, comme tous les autres sauf IE, il est à jour et va vous permettre de profiter des dernières possibilités du CSS.

En fait, quand on crée un site web aujourd'hui, on a généralement 2 navigateurs ouverts en même temps : Firefox, car il indique comment la page s'affiche sur tous les autres navigateurs... et Internet Explorer, qui est un cas particulier, il faut parfois faire des retouches pour que ça fonctionne aussi sur ce navigateur.

Voici à quoi ressemble Mozilla Firefox :

Mozilla Firefox, un navigateur de plus en plus utilisé

Je vous invite vivement à télécharger Firefox. Si vous ne le faites pas maintenant, vous verrez que vous en aurez besoin après de toute manière, donc autant prendre les devants

Cliquez sur le lien ci-dessous pour télécharger Firefox équipé de la Google Toolbar pour vos recherches :

Comme vous le voyez, c'est très simple. Vous avez juste à cliquer sur "Télécharger Firefox" et c'est fait.
Le logiciel est bien entendu disponible intégralement en français, mais vous pouvez aussi choisir une autre langue si vous le désirez

Outre le fait qu'il affiche les pages web correctement (ce qui doit être une raison à elle seule suffisante pour vous décider à changer de navigateur), Firefox dispose de fonctionnalités très intéressantes :

Une barre de recherche Google est en place dès le départ
Il bloque les popups
Il dispose d'un gestionnaire de téléchargements très pratique
On peut changer son apparence à volonté (il dispose d'un système de "skins")
On peut naviguer avec des onglets.
Pour ouvrir un nouvel onglet vide, faites Ctrl + T. Pour ouvrir un lien dans un nouvel onglet, cliquez dessus en maintenant Ctrl appuyé. C'est très très pratique !
On peut rajouter des plugins pour lui ajouter une infinité de fonctionnalités.
Je peux déjà vous conseiller de prendre Web Developer qui ajoutera une barre d'outils qui vous sera certainement utile lorsque vous créerez votre site web. Elle ressemble à ceci :

Bref, en ce qui me concerne j'ai adopté Firefox, et je fais en sorte d'en parler au maximum autour de moi (la preuve).
Non pas que j'aie une dent envers Internet Explorer, pas du tout. Mais vous allez bientôt vous rendre compte dans ce cours du retard qu'il a, et de la nécessité d'avoir un navigateur à jour comme Firefox quand on crée un site web aujourd'hui.

Vous pouvez installer Firefox sans désinstaller Internet Explorer. Les 2 navigateurs peuvent tourner en même temps sans souci.

N'hésitez pas à parler de Firefox autour de vous. Tous les webmasters (dont moi !) vous en seront reconnaissants

Ainsi se termine notre premier chapitre

On n'a fait que se préparer, voir de quoi on allait parler, et télécharger les programmes qui nous seront utiles.
Le blabla s'arrête là, dans le prochain chapitre on commence à rédiger notre première page en XHTML !

Votre première page XHTML

C'est bon, vous avez tous les logiciels qu'il faut ?
Alors ne traînons plus, on va maintenant passer à l'attaque et réaliser notre première page en XHTML. Comme je vous l'ai dit dans le chapitre précédent, il n'y aura pas de CSS pour le moment.

Et c'est partiii !

Les balises et attributs

Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.
Par exemple, pour écrire "Bienvenue sur mon site !" en XHTML, comment on fait ? Bah, il suffit de le taper :
Bienvenue sur mon site !

Jusque-là, pas trop dur... Oui mais attendez, si c'était ça, ça serait trop simple et forcément ça serait pas rigolo

Les balises

En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.
Une balise commence par "<" et se termine par ">". Par exemple :
<balise>

Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page, cet autre texte est une citation etc etc...

Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.

Les balises existant par paire : ce sont les plus courantes. On écrit la première balise, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/". Par exemple :

Code : XML
1
<titre>Bienvenue sur mon site !</titre>
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre> .
Le navigateur comprend que ce qui est entre <titre> et </titre> est le titre de votre site web, et que celui-ci est "Bienvenue sur mon site !"
Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s'en sert en général pour insérer un élément dans une page.
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise. Par exemple la balise qui permet d'insérer une image :

Code : XML
1
<image />
Cette balise indique juste qu'il y a une image à cet endroit.

Il est donc facile de reconnaître à quel type de balise on a affaire :

Si vous voyez <truc> , c'est qu'il s'agit forcément d'une balise existant par paire, et donc que vous allez trouver un </truc> un peu plus loin, pour indiquer la fermeture de la balise.
Si vous voyez <truc /> , c'est une balise seule.

Les attributs

Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seules).
Par exemple, prenons la balise seule <image /> . C'est bien beau de dire qu'on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut :

Code : XML

1	<image nom="soleil.jpg" />

Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela indique que l'image que l'on veut insérer s'appelle "soleil.jpg" tout simplement.

Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :

Code : XML

1
2
3

<citation auteur="Neil Armstrong" date="21/07/1969">
C'est un petit pas pour l´homme` un bond de géant pour l´humanité.
</citation>

Comme vous le voyez, on ferme la balise en mettant simplement </citation> sans répéter les attributs (ça ne servirait à rien).

Ce qu'il faut retenir

Bon, tout ce que je viens de vous dire là, c'est le seul moment de théorie pure que vous trouverez dans ce cours. Vous ne savez pas encore faire une page web, mais rassurez-vous nous allons commencer dans 2 minutes.

Je tenais à vous montrer un peu ce que sont ces "balises" que vous allez rencontrer tout le temps par la suite, histoire que vous tiriez pas trop la tronche quand vous allez en voir (un peu comme ça => o_O

)
Bien entendu, j'ai inventé des noms de balises, en réalité <image /> et <citation> n'existent pas. Mais vous allez avoir tout le temps d'apprendre les vrais noms.

Avant de terminer cette petite partie théorique, je vais vous donner ici quelques règles pas bien compliquées qu'il faudra retenir si vous voulez faire une parfaite petite page web :

Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules, mais dans ce cas il faut mettre un / à la fin de la balise (ex. : <balise /> )
Les noms des balises et attributs s'écrivent toujours en minuscules (ex. : "citation, auteur, date")
Les valeurs des attributs peuvent contenir des majuscules (ex. : "Neil Armstrong")
S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante (cf : exemple ci-dessus).

Allez, maintenant on passe à la pratique !

Une page XHTML

C'est le moment d'ouvrir votre éditeur (Bloc-Notes, Notepad++ ou un autre), et de tester avec moi votre première page web

Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Recopiez ce code dans votre éditeur, et enregistrez la page avec l'extension .html (ou .htm ça marche aussi). Par exemple avec Notepad++, allez dans le menu "Fichier / Enregistrer", et en bas pour le champ "Type" choisissez "HTML File (*.html)" :

J'ai appelé ma page "essai.html", mais vous pouvez lui donner le nom que vous voulez.

Rendez-vous ensuite dans le dossier où vous avez enregistré la page. Vous devriez voir votre fichier (x)HTML :

L'icône du fichier est peut-être différente selon le navigateur que vous utilisez. Personnellement, j'utilise Mozilla Firefox, donc ce que vous voyez est l'icône d'un fichier HTML si vous avez Firefox.
Avec Internet Explorer, l'icône est assez similaire, sauf qu'à la place il y a le "e" bleu d'Internet Explorer.

Double-cliquez sur l'icône pour l'ouvrir dans votre navigateur. Suspense, votre première page web s'ouvre pour la première fois sous vos yeux. Et que voyez-vous ???

Eh oui, la page est vide ! Il a fallu écrire tout ce code pour créer... une page vide !

Mais rassurez-vous quand même, la page n'est en fait pas si vide que ça : elle contient des tonnes d'informations dont votre navigateur aura besoin. En plus, le titre de la page apparaît déjà dans la barre de titre de la fenêtre (si si, regardez tout en haut à gauche de la fenêtre : "Bienvenue sur mon site !")

Si vous le désirez, vous pouvez voir comment je fais pour créer le fichier XHTML et le tester dans cette animation :

Enregistrer et tester sa première page web (873 Ko)

Notez qu'une fois votre fichier XHTML créé, vous pouvez toujours le réouvrir en faisant un clic droit sur l'icône et en cliquant sur "Notepad++" comme ceci :

Quelques explications ?

Je vous dois quelques explications sur le code que je vous ai donné un peu plus haut. Je veux que vous compreniez que tout cela n'est pas du charabia et que ça sert vraiment à quelque chose !

Je me permets de copier ce code à nouveau pour que vous l'ayez bien sous les yeux (c'est le même que tout à l'heure, il n'y a pas de différence) :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Voici les explications ligne par ligne :

Sur la toute première ligne se trouve la déclaration "Doctype". C'est une balise un peu particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données tout à l'heure.
Concrètement, cette balise sert à dire au navigateur que ce que vous faites est une page XHTML, et que vous utilisez la version 1.0 du langage XHTML (eh oui, comme dans les programmes il y a des versions !).
Pourquoi je vous apprends à utiliser le XHTML 1.0 ? Parce que c'est une des version les plus récentes, et que votre site sera ainsi à jour
Vient ensuite la balise <html> . C'est la balise principale qui englobera toute votre page (x)HTML. Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html> , qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html> .
La balise <html> contient 2 attributs :
- xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en préoccupez pas et laissez comme ça, ça ne nous intéresse pas particulièrement.
- xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en italien "it", espagnol "es" etc etc...
La balise <head> contient quelques informations d'en-tête pour votre page web. Elle est refermée un peu plus loin.
1. A l'intérieur de la balise <head> , vous trouvez notamment la balise <title>. Elle est très importante : c'est elle qui contient le titre de votre page web. Ici, le titre est "Bienvenue sur mon site !", mais c'est à vous de mettre le bon titre de votre page
2. Ensuite, vous pouvez voir une balise <meta> . Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard parce qu'elles ne sont pas indispensables. Seule celle que je vous ai donnée est indispensable : elle sert à indiquer que vous allez taper des caractères spécifiques au français (éèàê etc...).
Enfin (ouf!), après la fermeture de la balise <head> commence une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web. En clair, c'est entre ces 2 balises que nous allons passer 99% de notre temps
Pour le moment, il n'y a rien entre ces 2 balises, donc la page n'affiche rien (il y a un fond blanc comme vous avez pu le constater tout à l'heure).

Pfiou !
Voilà, je vous ai donné le sens de tout ce bazar

Encore une fois, retenir ce que ça signifie exactement n'est pas indispensable. Ce qui est indispensable, c'est de se servir de ce modèle à chaque fois que vous créerez une nouvelle page web.

Les commentaires

Avant d'en terminer avec ce chapitre riche en nouvelles connaissances, je voudrais rapidement vous parler des "commentaires".

Les commentaires sont des informations que vous écrivez pour vous. Les commentaires n'apparaissent pas aux yeux des visiteurs.
Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page XHTML est très grosse, ou pour vous servir de rappel.

Un commentaire est une balise un peu spéciale commençant par 
Voici un exemple de commentaires dans le code de tout à l'heure :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <!-- Rappel : c'est ici que l'on écrit le contenu de notre page web -->
   </body>
</html>

Essayez d'enregistrer cette page web et de voir ce qu'elle donne dans votre navigateur : il n'y a aucune différence avec le code de tout à l'heure. Ce qu'il y a dans le commentaire n'apparaît nulle part.

En général, on utilise assez peu les commentaires, mais je tenais à vous montrer comment on s'en sert pour que vous ne soyez pas surpris si vous en voyez.
Il se pourrait que j'en utilise dans certains de mes exemples pour vous donner des explications au milieu du reste du code XHTML.

Vous ne vous attendiez pas à avoir à écrire tout ce code pour faire une simple page web, non ?

C'était pourtant un passage obligé si vous voulez faire une vraie page web.
Mais rassurez-vous, à partir de maintenant tout ce que nous allons faire va apparaître à l'écran, et dès le prochain chapitre vous allez pouvoir faire afficher du texte à votre navigateur !

Organiser son texte

Bon, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça

La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :

Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour.

Motivés ? Allez, vous allez voir c'est pas compliqué

Les paragraphes

Vous avez donc envie d'écrire du texte dans votre page web, mais vous ne savez pas comment procéder ?
En XHTML, les choses sont plutôt simples : ça fonctionne en paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
Regardez ce bout de code, c'est un petit paragraphe écrit en XHTML :

Code : HTML

<p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test, alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment ça marche à l'aide des tutoriels du Site du Zér0. Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>

<p> signifie "Début du paragraphe"
</p> signifie "Fin du paragraphe"

Comme je vous l'ai dit dans le chapitre précédent, on écrit le contenu de notre site web entre les balises
<body></body>
Il nous suffit donc de mettre notre paragraphe entre ces deux balises, et nous aurons enfin notre première page web avec du texte !

Je reprends donc exactement le même code que dans le chapitre précédent, et j'y ajoute mon paragraphe :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Bienvenue sur mon site !</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>
        <body>
                <p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test, alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment ça marche à l'aide des tutoriels du Site du Zér0. Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>
        </body>
</html>

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Apprenez à créer votre site web !

Partie 1 : Les bases du XHTML

Partie 2 : C'est plus joli avec du CSS !

Partie 3 : XHTML & CSS, toujours plus forts !

Partie 4 : Annexes

Partie 1 : Les bases du XHTML

Avant de commencer...

XHTML ? CSS ? C'est quoi ça ?

L'éditeur

Les navigateurs

Internet Explorer

Mozilla Firefox

Votre première page XHTML

Les balises et attributs

Les balises

Les attributs

Ce qu'il faut retenir

Une page XHTML

Quelques explications ?

Les commentaires

Organiser son texte

Les paragraphes

Sauter une ligne

Les titres

Mettre en valeur le texte

Mettre un peu en valeur

Mettre bien en valeur

Quelques balises plus rares (mais utiles !)

Mettre en exposant ou en indice

Les citations

Les acronymes

Créer des liens

Relatif ou absolu ?

Un lien vers une autre page

Une bulle d'aide sur le lien

Le cas des liens ouvrant une nouvelle fenêtre

Un lien pour envoyer un mail

Un lien vers une ancre

Lien vers une ancre située dans une autre page