Tutoriel XHTML

SOMMAIRE

1. XHTML ? C'est quoi ?
2. Créer une page web
3. Ecrire un paragraphe
4. Lier une page
5. Afficher une image
6. Autres balises utiles

1. XHTML ? C'est quoi ?
Le XHTML, abréviation de eXtensible HyperText Markup Language (pas besoin de le retenir), c'est un code (n___n) qui va vous servir à taper le contenu de votre page web. C'est en gros le corps de votre page. Pour pouvoir monter un design, il vous faudra apprendre un autre language, le CSS, mais ces deux codes se complètent si biens que ça serait dommage d'apprendre l'un sans l'autre (je ferai un tuto sur le CSS prochainement)

1.1 Vocabulaire
XHTML : eXtensible HyperText Markup Language
CSS : Cascading Style Sheets
Balises : Sur les pages XHTML, en plus du texte, vous aurez besoin de balises (un peu comme sur le forum avec les balises BBcode), entourées par < et >. Il en existe deux types : les balises par paire, qui entourent un texte, une image, etc, et les balises dites seules, qui servent à afficher, par exemple, une image dans un paragraphe.

2. Créer une page web
Oui, on va créer une page web ! Mais pas avec un quelconque éditeur WYSIWYG (What You See Is What You Get), mais avec le bloc-notes fournis avec toutes les versions de Windows ! Donc vous ouvrez votre bloc-notes, et vous copiez ce code dans le document vierge ouvert :

Code:: <!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>

*Oulalalala !!! Mais c'est quoi ce truc incompréhensible ?!!*

Bah ce truc incompréhensible, c'est le code qui vous servira à afficher une page web. Enregistrez votre document en choisissant "Tous format", et en le nommant "index.html" dans le dossier que vous voulez (le nom ne doit pas contenir d'espace ni de caractères spéciaux, remplacez les espaces par "_"). Puis rouvrez la page HTML en double-cliquant dessus.

*Bah ! C'est tout blanc !*

Bah oui c'est tout blanc, vous n'avez pas écrit de texte, non ? ;)

*Et le truc énorme que j'ai copié alors ?*

Ca sers justement à afficher une page ! et à afficher un titre dans la barre de votre navigateur, vous pouvez d'ailleurs le changer en effaçant le "Bienvenue sur mon site !" et en remplaçant par ce que vous voulez.

3. Ecrire un paragraphe
Bon maintenant qu'on a une page web, autant mettre du texte dedans, non ? ^^
D'abord, on va créer un paragraphe, car sans ça, vous ne pouvez pas écrire de texte. Entre les balises <body> et </body>, vous tapez celle-ci :

Code::

Ce sont les balises les plus importantes, il est impératif de les retenir si vous voulez avancer.
Ensuite, tapez le texte que vous voulez entre ces balises, et enregistrez votre doc.

*Ouais ! Ca affiche ce que j'ai écris !*

Oui, et si vous voulez décoré votre texte, faudra passer par la case CSS, mais pas pour l'instant ^^

4. Lier une page
Avec notre SUPERBE page web que nous venons de créer, on va faire un peu de pub pour le fofo WOAH

Oui mais comment ? Bah il vous suffit de copier ce code dans votre corps de page (entre les balises <body> et </body>, je le répète, faut que ça rentre !)

Code:: <a href="http://ayunoheaven.1fr1.net">Voila mon forum préféré !</a>

Explication :

Code:: <a href="L'url de votre lien">le texte sur lequel on clique</a>

Vous pouvez aussi lier une page HTML qui se trouve dans le même dossier ou dans un sous-dossier de celuii qui contient la age ouverte, par exemple :

Code:: <a href="page_deux.html">Et voila la deuxième page de mon site !</a>

Et si elle se trouve dans un sous-dossier :

Code:: <a href="nom_du_sous_dossier/page_trois.html">Et la troisième !</a>

5. Afficher une image
Afficher une image, ça marche un peu comme faire un lien, sauf que la balise est de type seule ^^

Donc voici la balise :

Code:: <img src="http://www.cretin.fr/image.png" alt="Crétin.FR"/>

Explication :

Code:: <img src="l'url de l'image" alt="le nom de l'image (ne s'affiche qu'avec IE)"/>

Bon quand je disais que c'est u peu pareil que les liens, c'est que vous pouvez aussi afficher des images qui sont dans votre dossier, de la même façon que les liens (pas besoin d'explication je suppose ^^)

6. Autres balises utiles
Mettre en exposant :

Code:: votre texte

Les acronymes :

Code:: <acronym title="la version complète de l'acronyme">abréviation</acronym>

Mettre en valeur votre texte :

Code:: votre texte

Dites moi si ya quelque chose qu'est pas très clair !

Le tutoriel sur le CSS arrive dans très peu de temps (demain sûrement !)

PFIOU ben j'ai qu'une chose a dire O_O merci

Ben de rien ^^ ça m'a occupé, pis j'aime bien servir à quelque chose =D

Merci! ^o^

Pour ma part, j'ai un logiciel qui me fait tout automatiquement (Expression web designer), par conséquent, sur le code source de mon site, c'est un peu le bazar... >__<

wouahh o_o, merci beaucoup

De rien ^^

bordoray a écrit:: Pour ma part, j'ai un logiciel qui me fait tout automatiquement (Expression web designer), par conséquent, sur le code source de mon site, c'est un peu le bazar... >__<

C'est pour ça que j'aime pas ce type d'éditeur, de 1, ils font jamais exactement ce qu'on veut, de 2, ils foutent le bordel sur le code source !

Moi j'ai nvu mais c'est une crotte pour moi. Puis je suis bien capable de faire un site, mais j'ai vraiment trop de mal avec les i-frames. Je comprendrais jamais ce machin. '__'

Il est super ton tuto!!!!

Merciiiiiiiiiiiiiii =)) je sens que ses vacances je vais m'éclater

Moi je préfère mon logiciel où je fais mes pages directement comme vous les voyez sans passer par le code, ça c'est le logiciel qui convertit tout seul!

Merci beaucoup et bravo pour ce tuto clair !

De rien ^^ je fis celui sur le CSS ce soir, promis =) Si vous rencontrez des problèmes, n'hésitez pas !

Tuto CSS en ligne, hier soir y avait une panne de courant T___T'

J'ai oublié de préciser : pour aller à la ligne, utilisez la balise seule

Code::

et pour passer une ligne, créer un nouveau paragraphe.

» Tutoriel CSS
» Tutoriel Photofiltre