Les outils
Vous pouvez réaliser vos pages avec un simple éditeur de texte comme le bloc-notes ou WordPad sous Windows Il existe aussi de nombreux utilitaires Gratuits tel que Notepad++, qui a pour avantage de reconnaître les mots-clés.Il les affiche en couleur et dispose de la numérotation des lignes, un avantage lorsque l' on fait du PHP, du java etc...
|
Si vous n'avez pas encore choisi votre éditeur, je vous le recommande, il est
gratuit et en Français. |
Pour créer votre premier document ouvrez votre éditeur préféré et enregistrer sous le nom de index.htm
Vous saisissez votre code et enregistrer la modification. Vous double-cliquez sur votre page index
et elle s'ouvre dans votre navigateur. Si vous effectuez des modifications dans votre source,
faîtes CTRL+R pour rafraîchir l'affichage de votre navigateur.
Conseil concernant l'affichage :
Les navigateurs réagissent de manières différentes. Je vous conseille donc de tester vos pages avec trois navigateurs au moins pour vérifier l'affichage de votre travail. Internet Explorer est le plus utilisé. Vous trouverez aussi Firefox (que vous pouvez télécharger gratuitement dans la rubrique téléchargement du site), Nescape, Safari ou Opéra...
|
IMPORTANT : La première page de votre site doit être nommée: index.htm , index.html ou index.php et être placée à la racine du site. |
Le langage
Le HTML et le XML sont des langages de balises.
C'est à dire que l'on ouvre une balise et ensuite on la referme. Exemple :
j'ouvre la balise
titre
<titre>je mets mon titre et je referme ma balise</titre>
Sauf exception telle que la balise image(<img>) dont je reparlerai plus loin.
La structure du document
Composition d'une page
Une page est composée de plusieurs niveaux. La DTD, la balise <html> pour indiquer le début du document, la tête du document <head> et le corps du document <body>. Ces balises sont imbriquées de la manière suivante :
<La DTD> <!--Ici la Déclaration de type de document--><html> <!--Ici ouverture de la balise HTML-->
<head> <!--Ici l'ouverture de la tête-->
<!--On met les balises META, le titre de la page, les appels des feuilles de style et codes JavaScript-->
</head> <!--Fermeture de la tête-->
<body> <!--Ici ouverture du corps du document-->
<!--Ici le contenu de votre page-->
</body> //Femeture du corps du document-->
</html> <!--Fermeture du document HTML-->
Déclaration de type de document (DTD)
Votre document devra respecter les normes de validation d'une des trois DTD XHTML : strict, transitional ou frameset. Une déclaration de type de document doit apparaître dans le document juste avant l'élément html (qui est l'élément racine de tout document XHTML).
- La DTD stricte n'autorise pas l'utilisation des anciens éléments de présentation (<s>, <u>, etc.) mais elle a l'avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte. Voir
- La DTD transitionnelle est plus permissive et plus proche des anciennes habitudes liées à HTML 3.2. Les balises dépréciées en XHTML strict y sont autorisées : le recours à cette DTD est donc plus facile dans un premier temps, mais avec le défaut de mêler encore partiellement structure et présentation. Voir
- la DTD frameset permet l'utilisation des cadres. Ceux-ci tombent en désuétude, mais peuvent se réveler encore utiles dans certains cas très exceptionnels. Voir
La racine du document
L'élément racine du document XHTML
L'élément racine d'un document doit impérativement être l'élément <html utilisant l'attribut "xmlns" et une déclaration de la langue utilisée principalement dans le document.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
Gabarit d'une page
Si vous n'avez pas envie de remplacer les caractères accentués par des codes (ê par ê) utilisez l'encodage ISO-8859-1
Gabarit d'une page déclarée en strict avec un encodage iso-8859-1 : Cliquez ici pour voir
Gabarit d'une page déclarée en strict avec un encodage UTF-8 ou UTF-16 : Cliquez ici pour voir
Gabarit d'une page déclarée en transitional avec un encodage ISO-8859-1 : Cliquez ici pour voir
Gabarit d'une page déclarée en transitional avec un encodage UTF-8 ou UTF-16 : Cliquez ici pour voir