Architecture des fichiers html - Training on line


	• Tableaux à angles arrondis • Créer une barre de scroll colorée • Les Roll-Over • Créer un calque • Créer un tableau • Créer un calque • Créer un tableau • Créer un calque • Créer un tableau • Créer un calque • Créer un poulet • Créer un calque • Créer un tableau • Créer un formu


	• Monter une page • Déplacer une image • Manipuler un calque

Comment saisir le code ?

Structure et En-tête d'un document HTML

Le corps du document

Les options de base de la mise en forme

Insérer un commentaire dans le code HTML

Enregistrer son fichier au format HTML

Exercice pratique : créer votre 1^ère page

1. Saisie du code

Il existe trois méthodes pour coder en langage HTML

La première consiste à utiliser un simple éditeur de texte (ASCII) comme le bloc-notes de Windows ou de petits softs comme Ultra Edit.
Vous devez tout faire "à la main", mais c'est une excellente façon de progresser et c'est de loin, la meilleur méthode pour vous familiariser avec les subtilités du code HTML.

Une solution intermédiaire consisterait à utiliser un éditeur HTML pur comme HomeSite d'Allaire( vous pouvez l'essayer gratuitement en vous rendant sur le site d'Allaire).
Ce type d'éditeur propose un environnement d'édition ASCII avec de nombreux supports d'aide à la saisie de balises. C'est un bon choix pour les débutants que le Bloc-notes rebute, la saisie est plus simple, le code apparaît dans différentes couleurs.

Si vous souhaitez comprendre et connaître toutes les finesses d'utilisation du code HTML, je vous déconseille, en tant que débutant, les éditeurs de type WYSIWYG ( What you see is what you get ).
On utilise ces logiciels ( GOLive, Dreamweaver, FrontPage ) dans un cadre professionnel car cela permet d'améliorer considérablement la productivité.
Par contre, une fois les connaissances de base en HTML acquises, je vous conseille d'utiliser l'éditeur Dreamweaver 4; il s'utilise comme un traitement de texte, vous pouvez scinder l'écran en deux parties, l'une pour le code et l'autre pour le rendu.
D'autre part, le code qu'il génère est très proche du code standard recommandé par le W3C, le Word Wide Web Consortium, organe international qui se charge de proposer dans des recommandations les standards des langages pour l'Internet : HTML, CSS, XML, XSL...

2. L'En-tête d'un document HTML

Pour créer une page web, plusieurs balises vous seront indispensables.
Elles constituent la structure de base d'une bonne bonne page HTML.
Une balise est une commande codée qui indique au navigateur comment afficher une partie de votre page web.

les balises sont facilement identifiables, car encadrées des signes < et >.
La majorité des balises HTML sont composées de deux parties : une balise d'ouverture (<), qui signale le début d'un morceau de texte, et une balise de fin(</) pour en signaler la fin.

Voici les paires de balises correspondantes pour la structure de base :

<HTML> et </HTML> : On rencontre cette balise en tout début et à la fin de votre document; elle permet au navigateur de reconnaître votre page HTML.
<HEAD> et </HEAD> : La balise HEAD va regrouper toutes les balises HTML et les informations associées qui s'appliquent à la page. On n'y mettra notamment la balise TITLE.
<TITLE> et </TITLE> : cette balise spécifie un nom pour votre page et le titre apparaîtra au-dessus de la barre de menu dans l'interface du navigateur. C'est ausi le titre qui apparaît dans les favoris du visiteur s'il vous ajoute à sa liste des favoris.
<BODY> et </BODY> : C'est dans cette balise que débute réellement votre page HTML, en tout cas visuellement.

Petit exemple :

<HTML>
<HEAD>
<TITLE>Page d'accueil de mon site</TITLE>
</HEAD
<BODY>
Voila, je commence ma page web !!
C'est vraiment très simple.
</BODY>
</HTML>

Pour voir le résultat dans votre navigateur, Cliquez ici:

3. Le corps du document

Les véritables données que le navigateur va afficher vont se trouver dans la balise BODY.
Cette balise détermine le corps du document, c'est ici que vous allez intégrer titres, textes, images, tableaux, bref toutes les informations de votre page HTML.

La balise BODY possède de nombreux attributs
On affectera des valeurs à ces attributs.

Voici les principaux attributs de la balise BODY :

BGCOLOR : Définit la couleur du fond de votre page.
BACKGROUND : Définit l'image ( gif ou jpeg ) à utiliser comme fond d'écran.
TEXT : Définit la couleur du texte.
STYLE : Permet d'attribuer une police d'écriture, une couleur d'écriture, une taille de police à l'ensemble de votre page.
TOPMARGIN (IE seulement): Nombre de pixels qui séparent le bord haut de votre document du début de votre page.
LEFTMARGIN (IE seulement): Nombre de pixels qui séparent le bord gauche de votre document du début de votre page.
MARGINWIDTH (Netscape seulement): Pixels qui séparent le bord gauche de votre document de votre texte.
MARGINHEIGHT (Netscape seulement): Pixels qui séparent le bord haut de votre document de votre texte.
LINK : Définit la couleur de tous les liens.
ALINK : Définit la couleur des liens actifs.
VLINK : Définit la couleur des liens visités.

Reprenons l'exemple plus haut en rajoutant des attributs à la balise BODY.

<HTML>
<HEAD>
<TITLE>Page d'accueil de mon site</TITLE>
</HEAD
<BODY BGCOLOR="yellow" TEXT="RED" STYLE="font-family: Verdana;font-size=10px" TOPMARGIN="30" LEFTMARGIN="30" MARGINWIDTH="30" MARGINHEIGHT="30">
<B>Voila, je continue ma page web !!
C'est vraiment très simple.</B>
</BODY>
</HTML>

Pour voir le résultat dans votre navigateur, Cliquez ici:

4. Les options de base de mise en forme.

Si on regarde le résultat de l'exemple précédent dans un navigateur, on s'apercoit qu'il écrit le texte en un seul bloc, sans aucun retour à la ligne.

Ce problème se résout avec les balises suivantes :

<P> : La balise paragraphe permet le découpage du texte en ajoutant un retour à la ligne suivi d'une ligne vide dans un traitement de texte.
<BR> : La balise break permet de passer à la ligne suivante; on l'utilise afin de revenir à la ligne sans introduire d'espace dans le texte.

Remarque : Ces deux balises ne se referment pas.
<B> et </B> : La balise Gras permet de formater le texte en gras.
<I> et </I> : La balise Italique permet de formater le texte en italique.

<HTML>
<HEAD>
<TITLE>Page d'accueil de mon site</TITLE>
</HEAD
<BODY BGCOLOR="yellow" TEXT="RED" STYLE="font-family: Verdana;font-size=10px" TOPMARGIN="30" LEFTMARGIN="30" MARGINWIDTH="30" MARGINHEIGHT="30">
<B>Voila, je continue ma page web !!</B><BR>
Comment insérer des retours à la ligne<BR>
ou des sauts de ligne<P>
C'est vraiment très <I>simple</i>.
</BODY>
</HTML>

Pour voir le résultat dans votre navigateur, Cliquez ici:

Autres balises utiles pour la mise en forme :

Les balises à en-tête : les en-têtes sont destinés à retenir votre attention sur les sections importantes du texte, le texte apparaissant avec une police plus grande et plus grasse que le reste du document.

Pour les en-têtes de premier niveau, vous devez utiliser la balise <H1> en début et </H1>en fin de texte.
Les balises <H2> et </H2> permettent d'obtenir un en-tête de taille légèrement inférieure ainsi de suite jusqu'à <H6> et </h6> ( à déconseiller car très petit !)

Les attributs d'alignement :

A la balise de paragraphe <P>, vous pouvez spécifier l'attribut d'alignement ALIGN avec les valeurs "LEFT", "CENTER" et "RIGHT".
Ainsi, tout le paragraphe sera aligné à gauche, à droite ou centré.

La balise <DIV> possèdent les mêmes attributs ALIGN="LEFT", "CENTER" ou "RIGHT", à la différence près que cela s'applique à tous les éléments compris entre cette balise.

Exemple :

<HTML>
<HEAD>
<TITLE>Page d'accueil de mon site</TITLE>
</HEAD
<BODY BGCOLOR="#FFFFCC" TEXT="#990000" STYLE="font-family: Arial;font-size=11px" TOPMARGIN="5" LEFTMARGIN="5" MARGINWIDTH="5" MARGINHEIGHT="5">
<H1 ALIGN="CENTER">Premier commentaire sur le web</H1><P>
<H2>Voici mon texte</H2><P>
<H3>Un peu plus petit encore...</H3><P>
<B>Voila, je continue ma page web !!</B><BR>
Comment insérer des retours à la ligne<BR>
ou des sauts de ligne<P>
C'est vraiment très simple.<BR>
<P ALIGN="RIGHT">On peut également très simplement aligner son texte à droite</P>
<DIV ALIGN="CENTER">et centrer son texte sur plusieurs lignes.<BR>
etc..................<BR>
etc..................<BR>
etc..................<BR>
etc..................<BR>
etc..................<BR>
</DIV>
</BODY>
</HTML>

Pour voir le résultat dans votre navigateur, Cliquez ici:

5. Insérer un commentaire dans le code HTML

Il est possible d'insérer un commentaire dans le code source de vos fichiers HTML sans que le navigateur affiche ce commentaire.

Cette action est très utile surtout si vous travaillez à plusieurs sur un même document; vous pouvez ainsi expliquez comment vous avez construis votre code HTML.
On utilise cette instruction égalemment lors de l'écriture d'un script Javascript afin de cacher le code aux navigateurs qui ne supporte pas le Javascript.

Tout ce qui est situé entre la balise d'ouverture  sera ignoré par les différents navigateurs.

Exemple : 

6. Enregistrement au format HTML

La méthode la plus simple est d'utiliser le bloc-notes de Windows.

a ) Ouvrez le Bloc-Notes de Windows

Saisissez votre code en reprenant l'exemple de la section précédente.
N'hésitez pas à bien espacer votre code, çà n'a aucune incidence sur le rendu dans le navigateur et la visibilité de la syntaxe HTML est bien meilleure.

b ) Sauvegardez votre fichier par la commande Enregistrer sous

c ) Enregistrez le fichier avec l'extension .html ou .htm ( pour les vieux serveurs )

d ) Ouvrez le fichier HTML avec votre navigateur; la page est interprétée.

Pour modifier votre page, allez dans le menu "Affichage", "source" et vous retombez sur le code source de la page.
Modifiez-le au besoin, enregistrez ces modifications, et Actualisez l'affichage de votre navigateur.

7. Exercice récapitulatif

En cliquant sur le bouton ci-dessous, vous pourrez visualiser le résultat à atteindre :

Le but de ce petit exercice est de parvenir à saisir le code HTML afin de reproduire le résultat obtenu au dessus. Vous vous aiderez pour cela des balises et des attributs vus jusque là.

Vous pouvez télécharger le texte au format .txt en cliquant ici:


	Recherche par mots-clés :


	• Les feuilles de style • Les popups • Des liens spéciaux


	• Test HTML • Test DHTML • Test Javascript


	• Scripts dhtml


	• Lien n°1