[XHTML] La première page

Et maintenant, je vous autorise à ouvrir votre éditeur de site, Notepad++ ou Bloc Note, Haz' (le jeu de mot, pour les fans de McFLY qui passeront par ici xD) you want.

Déjà, pour avoir une page web, il vous faut un code de début qui va définir que vous construisez une page web. Il faut le placer à chaque fois que vous créez une page. Sinon ça ne marchera pas. (:

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>

Après avoir mis ce code dans un nouvelle page, enregistrez en .html (.htm marche aussi). Choisissez le dossier que vous souhaitez. Je conseille d'en créer un nouveau où vous allez mettre toutes vos pages. Avec NotePad++, j'obtiens ceci :

Ma page a pour nom essai.html mais vous pouvez mettre n'importe quel nom sans espaces, sans accents et sans caractères spéciaux (sauf _). Allez dans le dossier où se trouve votre page. Vous avez quelque chose comme l'image qui va suivre. L'icône change en fonction de votre navigateur par défaut (ici Mozilla Firefox).

Faites un double-clic sur l'icône et... Oh ! Votre navigateur s'ouvre ! (: Sauf que bah... Votre page est vide. Normal ! Elle ne contient rien. (:

Je vous entends râler... Tout ça pour rien ! Bah non ! Ce qu'on a fait est nécessaire car la page contient des informations essentielles pour le navigateur. Le code que vous avez mis lui indique que vous faites une page web et pas un clafoutis au fenouil. Et en plus, votre page à un titre ! Regardez donc plus haut dans le cadre bleu. (:

Vous pouvez réouvrir votre fichier de cette manière après son enregistrement :

Maintenant, je vais vous expliquer le machin que vous avez collé dans votre page. (:
Je le remets ici pour que ce soit plus simple. (:

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>

Le Doctype est une balise qui n'est pas comme celles que je vous ai montré dans mon tutoriel précédent. C'est un autre type. (: Là, elle explique au navigateur que l'on fait du XHTML dans la version 1.0 qui est la version la plus récente.
Ensuite, on a la balise <html> qui est très importante. (: J'oublie souvent de la fermer, mais je crois que ça ne change rien. Évidemment, vous devez la fermer ! Sinon vous pouvez avoir des erreurs. Elle contient deux attributs.
xmlns : ça indique qu'on a une page en xHTML. On ne va pas s'en occuper.
xml:lang : elle indique qu'elle est la langue de votre site web. Pour une page en anglais, on met "en", en italien "it"...
La balise <head> </head>. Elle contient plusieurs choses. On retrouve la balise <title> </title> qui contient le titre de votre site. Une des nombreuses balises <meta /> qu'on vera plus tard. Ici, elle indique que l'on va utiliser des caractères spéciaux français notamment les accents.
Et juste après on a la balise <body> </body> c'est comme son nom l'indique le corps de la page. Elle contient le contenu du site web et c'est ici qu'on va passer le plus clair de notre temps.

Vous n'êtes pas obligé de savoir exactement ce que ça signifie. Mais, vous êtes obligés de l'utiliser. (:
Je vais terminer ce tuto en faisant un petit point sur les commentaires. Et non, je ne parle pas de l'ajout de commentaire sur le site... No-life de skyrock va ! T.T Je parle des commentaires invisibles pour le lecteur que l'on place dans le code de la page web.

On utilise pour le mettre un type de balise spécial commençant par .

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>

Vous pouvez enregistrer la page et comparer avec celle d'avant dans votre navigateur. Aucune différence !
On s'en sert peu en général, mais je risque de m'en servir dans mes explications plus tard. (:

Have fun !