Affichage du tutoriel
 Tutoriaux
> Programmation > XHTML > Les tutoriaux > Ma première page (X)HTML |
Ma première page (X)HTML
Vous venez de lire le cours sur les bases du HTML, de comprendre la différence entre le HTML et le XHTML, vous voulez enfin voir apparaître vos premières lignes de code interprétées par navigateur, alors suivez les étapes c'est très simple.
Chapitre 1 : Création du fichier XHTML
Vous avez suivi nos conseils dans le choix d'un bon éditeur de texte, pour pouvoir coder tranquilement avec une coloration syntaxique, vous l'avez installé, maintenant utilisons le.
Je vais procéder de manière générique et non pas de manière spécifique à un éditeur.
1. Vous créez un nouveau fichier, vous commencez par l'enregistrer sous, pour ceux qui utiliseraient le bloc-note, mettez la terminaison .html, pour les autres vous devrez avoir la possibilité de sélectionner le format voulu.
2. Maintenant on retourne sur l'éditeur, et la on prends le cas ou la page est blanche, même si c'est rare avec les éditeurs qui construisent d'office le corps du document HTML, mais expliquons en quelques lignes.
3. Comme je l'ai déja dis dans le cours, le XHTML est un document XML, il commence donc par une déclaration XML, elle indique la version et le jeu de caractère utilisé.
Code :
<?xml version="1.0" encoding="ISO-8859-1"?>
4. Vous devez ensuite préciser le Document Type Definition (DTD), notre portail propose l'apprentissage des nouvelles normes, donc restons dans cette optique, si toute fois vous voulez en savoir plus.
le DTD :
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Chapitre 2 : La structure de la page
1. J'ajoute à mon document les balises suivantes :
- <html xmlns="http://www.w3.org/1999/xhtml"></html> : C'est entre les balises <html> que se trouvera le contenu de votre document.
- <head></head> : Cette balise contient des éléments qui seront interprétés par le navigateur, ou des robots, mais qui ne seront généralement pas affichées.
- <body></body> : Cette balise contient tout ce qui s'affiche dans la fenêtre de votre navigateur.
Je dois obtenir après l'étape 1 et le début de ce chapitre :
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">
<head>
</head>
<body>
</body>
</html>
Ceci est la structure générique d'une page XHTML 1.0 strict !
Passons un peu plus en détails les différentes balises.
Chapitre 3 : La balise <head>
La balise <head> contient des informations qui ne s'afficheront pas dans a fenêtre du navigateur.
Quelques types d'informations :
- <title></title>: Permet de donner un titre à votre page, il s'affiche en haut de la fenêtre du navigateur, balise qui a un rôle important dans le référencement. A noter que cette balise est obligatoire pour le respect des normes XHTML.
- <meta />: Elles apportent une série d’informations relatives à la teneur de votre page, un rôle important dans le référencement.
- <link />: Elles permettent d'établir une liaison avec un document externe, une feuille de style,...
- <script />: Cette balise sert à établir un lien avec un script ou à déclarer un script dans le document XHTML.
- ...
Pour trouver d'avantage de renseignements sur la balise <link /> et les CSS rendez vous dans la rubrique CSS avec le didacticiel présentant la syntaxe et la liaison avec le document XHTML.
En ce qui conçerne les balises <meta /> un tutoriel devrait bientôt faire son apparition.
Chapitre 4 : La balise <body>
Une balise dans laquelle vous passerez la majorité de votre temps, puisque c'est à l'intérieur de celle-ci que se trouvera tout les éléments affichés à l'écran.
Le code générique d'une page WEB XHTML 1.0 strict :
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">
<head>
<title>Ma premiere page Internet </title>
</head>
<body>
</body>
</html>
Conlusion
Un petit bilan s'impose à la fin de ce tutoriel, après avoir pris connaissance du langage XHTML, de la structure générique d'une page, vous êtes en mesure d'attaquer les prochains tutoriaux conçernant la construction des différents éléments disponibles grâce aux nombreuses balises.
En ce qui conçerne les balise <meta /> de l'en-tête, un tutorial sera mis à votre disposition, mais rassurez-vous il ne vous sera utile que lorsque vous mettrez votre production en ligne.
Si toute fois, vous rencontrez des problèmes ou si vous souhaitez apporter une amélioration, modification, rejoignez-nous sur le forum dans la rubrique XHTML/CSS.
Commentaires
| Tutoriaux
> Programmation > XHTML > Les tutoriaux > Ma première page (X)HTML |