Vous trouverez sur cette page de l'information pour vous aidez à créer vos propres pages Web ou pour rafiner vos pages déjà existantes. Vous pourrez utiliser tout le code et les exemples contenus dans mes pages dans vos propres pages. Vous pouvez toujours visiter ma page de liens pour d'autres sites.






Vue d'ensemble de la composition d'un document HTML

Toute page H.T.M.L. doit commencer avec <HTML> et se terminer avec </HTML>. Chaque pdocument est composé de son entête <HEAD> et de son contenu <BODY> chacune de ces sections doivent de terminer par leurs 'Tags' respectifs soit: </HEAD> et </BODY>. tout les commentaires, dans le code HTML, doivent être insérés de cette façon: <!-- commentaires -->, on peut également les insérer ou l'on veut dans le code. Les titres doivent être placés dans l'entête et le reste du document doit être placé dans le contenu.

EXEMPLE DE PAGE TRÈS SIMPLE :

<HTML> 

<!-- Vous pouvez insérer vos commentaires içi -->

   <HEAD>
	<TITLE> Le titre de votre document. </TITLE>
   </HEAD>

   <BODY>
	Le contenu de votre page se retrouve içi !!!
   </BODY>
</HTML> 

Retour au sommaire


Comment structurer son code et l'apparence de sa page

Pour obtenir des paragraphes dans notre page html, on utilise les 'Tags': <P> (qui marque le début) </P> (qui marque la fin). Entre les deux 'Tags' on peut alors écrire le texte qu'on veut afficher.

Il est également possible d'insérer un saut de ligne où l'on veut dans notre code en utilisant la commande <BR>.

EXEMPLE:

Il est possible d'insérer<BR>
un saut de ligne où l'on veut dans<BR>
notre code en utilisant la commande <BR>.

GROSSEUR DU LETTRAGE de <H1>..</H1> à <H6>..</H6>

Ceci définit en fait la taille du lettrage de 1 ( le plus large ) à 6 ( le plus petit ).

EXEMPLE :

<H6> Titre de taille H6 </H6>
<H5> Titre de taille H5 </H5>

<H4> Titre de taille H4 </H4>

<H3> Titre de taille H3 </H3>

<H2> Titre de taille H2 </H2>

<H1> Titre de taille H1 </H1>


Alignement du texte et des paragraphes

On peut aligner le texte et les paragraphes à gauche, à droite, au centre de la page ou les justifier, ce qui signifie que nos paragraphes sont toujours égaux des deux cotés, beaucoup plus beau.

EXEMPLES:

<P ALIGN=LEFT> paragraphe à gauche </P>

<P ALIGN=CENTER> paragraphe au centre </P>

<P ALIGN=RIGHT> paragraphe à droite </P>

<P ALIGN =JUSTIFY > paragraphe justifié (comme Word, WordPerfect)</P>

<H5 ALIGN=LEFT> texte à gauche </H5>
<H5 ALIGN=CENTER> texte centré </H5>
<H5 ALIGN=RIGHT> texte à droite </H5>

Vous pouvez vous faire des listes d'éléments en utilisant les 'Tags':<UL> (indique le début d'une liste), <LI> (indique les élément de la liste) </UL> (indique la fin d'une liste)

EXEMPLE:

  • premier item
  • deuxième item
  • troisième item
  • tant que vous en voulez

<UL>
<LI> premier item
<LI> deuxième item
<LI> troisième item
<LI> tant que vous en voulez
</UL>

Si Vous désirez faire une liste d'éléments numérotés, vous devrez utilisé les 'Tags':<OL> (indique le début d'une liste numérotée), <LI> (indique les élément de la liste numérotée) </OL> (indique la fin d'une liste numérotée)

EXEMPLE:

  1. premier item
  2. deuxième item
  3. troisième item
  4. tant que vous en voulez

<OL>
<LI> premier item
<LI> deuxième item
<LI> troisième item
<LI> tant que vous en voulez
</OL>


Retour au sommaire


Comment créer des liens hypertexte


Les ANCRES <A>...</A> sont la base pour les liens hypertexte

On peut utiliser ces ANCRES pour créer un lien vers une autre page HTML, une section de notre document, un site Web ou une adresse de courriel avec soit du texte ou une image. Elles peuvent être combiné avec deux paramêtres:

    1- HREF
    2- NAME

HREF indique la page, la section du document, le site web à atteindre ou l'adresse de courriel à laquelle on désire envoyer un message. NAME indique la section du document que l'on veut atteindre. On peut s'en servir pour faciliter la navigation à l'intérieur de la même page, comme c'est le cas avec mon menu du début et le "Retour au sommaire " que j'insère à la fin de chaque section. Voici comment faire avec comme exemple un petit menu:

Voici diverses façon avec des exemples et le code pour travailler avec ces outils :

1- Un menu pour naviguer à l'intérieur de votre page

Pemièrement: Vous créez une liste d'item qui sera votre menu comme celle là

<UL>
<LI> <A HREF = #Nom1> Titre de la première section</A>
<LI> <A HREF = #Nom2> Titre de la deuxième section</A>
</UL>

Ensuite vous ajouter ces lignes n'importe où dans votre code HTML, ce qui va se passer est simple: chaque fois que vous allez cliquer sur un des liens dans votre menu, votre document va se placer automatiquement à la ligne correspondante.

<A NAME = nom1> Titre de la première section</A>
Vous mettez votre texte içi et continuer votre page.

<A NAME = nom2> Titre de la deuxième section</A>
Vous mettez votre texte içi et continuer votre page.

2- Un lien avec une autre page de votre site (bon pour faire un lien RETOUR À LA PAGE D'ACCUEIL

<A HREF = Nom de votre page.html>Texte qui apparaît pour cliquer dessus</A>

Comme exemple: Cliquez içi pour ma page d'aide HTML

3- Un lien vers un autre site Web

<A HREF = adresse du site Ex: HTTP://www.yahoo.com>Texte qui apparaît pour cliquer dessus</A>

4- Un lien pour que les visiteurs puissent nous envoyer un courriel

<A HREF = "mailto:Votre adresse de courriel">Texte qui apparaît pour cliquer dessus</A>

Comme exemple: Envoyer un courriel à Denis Lévesque (Le Concepteur de ce site magnifique!!!)

5- Un lien avec image pour les courriels et un lien vers une autre page ou un autre site

  1. <A HREF = "mailto:Votre adresse de courriel"><IMG SRC="Le nom de l'image à utiliser"> Texte optionel</A>

         Comme exemple: Courriel

  2. <A HREF = adresse du site Ex: HTTP://www.yahoo.com><IMG SRC="Le nom de l'image à utiliser"> Texte optionel</A>


Retour au sommaire .


Comment formater son texte à l'affichage

Vous pouvez formater votre texte de plusieurs façons, voici les principales façons:

  • <EM> ITALIQUE </EM> ----> ITALIQUE
  • <I> ITALIQUE </I> ----> ITALIQUE
  • <STRONG> GRAS </STRONG> ----> GRAS
  • <b> GRAS </b> ----> GRAS
  • <U> SOULIGNÉ </U> ----> SOULIGNÉ
  • <CITE> CITATION </CITE> ----> CITATION
  • <STRIKE> BARRÉ </STRIKE> ----> BARRÉ
  • <S> BARRÉ </S> ----> BARRÉ
  • <BIG> GROS </BIG> ----> GROS
  • <SMALL> PETIT </SMALL> ----> PETIT
  • <DD><DD> DEUX TABULATIONS ---->
    DEUX TABULATIONS

Pour laisser plusieurs espaces entre des mots vous devez utiliser cette commande &nbsp; le code html voit plusieurs espace normal comme seulement une alors si vous voulez en avoir plusieurs vous devez utilisez cela.

Retour au sommaire .


Comment insèrer des images, des images de fond et autres

Il est très simple en HTML d'insérer des images, de les mettre comme 'backgroud' (image de fond) de votre page Web, de faire jouer de la musique: je parle de fichier MIDI ou WAVE, de faire des tableaux, des lignes etc...

Pour les images

Pour afficher une image GIF ou JPEG il suffit d'écrire ce bout de code: <IMG SCR = "le chemin/le nom de l'image.gif ou jpg">

EXEMPLE : <IMG SRC = "image/email1.gif" >

Pour mettre une image de fond il suffit d'écrire ce bout de code dans la partie <BODY> vous rajouter le mot BACKGROUND. Exemple:

<BODY BACKGROUND = "le chemin/le nom de l'image à utiliser.gif ou jpg">

Pour faire jouer un son il suffit d'écrire ce bout de code entre la partie <HEAD> et </HEAD> de votre page. Exemple:

<BGSOUND src="le chemin/le nom du son .wav ou .mid">

ce code est supporté par Internet Explorer seulement pour Netscape et Internet Explorer il faut:

<EMBED src="le chemin/le nom du son.wav ou mdi"></EMBED>

Pour insérer des ligne, rien de plus facile:

Vous tapez <HR> ou vous voulez dans la section <BODY> et vous avez une ligne


Les tableaux

Il est aussi très facile d'insérer des tableaux. On doit commencer par <TABLE> et finir par </TABLE>. On peut définir la taille des bordures en commençant par <TABLE BORDER= taille voulue>. Pour passer à la ligne on tape <TR>, pour passer à la case suivante on écrit <TH>.

Exemple de tableau
  Titre 1 Titre 2 Titre 3
qualité 1 valeur 1 valeur2 valeur 3
qualité 2 valeur 4 valeur5 valeur 6


Et le code
<TABLE BORDER=6>
<CAPTION> Exemple de tableau </CAPTION>
<TR><TH><TH>Titre 1<TH>Titre 2 <TH>Titre 3
<TR><TH>qualité 1<TH> valeur 1<TH> valeur2<TH> valeur3
<TR><TH>qualité 2<TH> valeur 4<TH> valeur5<TH> valeur6
</TABLE>


Retour au sommaire .


Comment faire des formulaires

Il est très facile de créer des formulaires en HTML, mais recueillir l'information des ces formulaires n'est pas aussi facile qu'on le croit, je reviendrai sur ce sujet plus loin. Il est possible de faire un formulaire pour qu'un visiteur puisse émettre un commentaire, des suggestions, envoyer un courriel et autre...

Tout formulaire doit obligatoirement commencer par <FORM> et se terminer par </FORM>.

Pour chaque boite de texte, boutton, case à cocher ou autre, on doit leur passer quelques paramètres. Dans la majorité des cas on doit leur dire, le type, le nom qui lui est associé, le texte qui apparaîtra près de ce boutton ou autre, la grandeur, la hateur .... et beaucoup d'autres paramêtre possible. J'aborderez seulement les plus communs. Texte il existe aussi le type PASSWORD pour les mots de passe le type CHECKBOX pour choisir un certain nombre de paramètres et le type RADIO qui fonctionne de la même manière.

Voici quelques exemples:

Premier exemple, boite de texte

 
<FORM>
Entrez votre nom : <INPUT NAME="Nom que vous voulez lui donner" 
TYPE=TEXT size=24><BR>
Entrez votre mot de passe : <INPUT NAME="MotPasse" 
TYPE=PASSWORD size=24><BR> 
</FORM> Vous obtiendrez : 

Entrez votre nom :

Entrez votre mot de passe :

Notez qu'en ce moment ça ne sert absolument à rien de faire cela car l'usager peut seulement tapez du texte dans les cases mais il ne peut pas vous envoyer l'information qu'il a entrée! Pour l'instant, je vais seulement vous montrer les différents types de contrôle que l'on retrouve dans un formulaire et on verra le reste après.

Deuxième exemple, case à cocher

<FORM>
Cochez vos activités préférées:<BR><BR> 
<INPUT NAME="var_1" TYPE=CHECKBOX > Ski 
<INPUT NAME="var_2" TYPE=CHECKBOX > Écouter la télé<BR>
<INPUT NAME="var_3" TYPE=CHECKBOX > Golf
<INPUT NAME="var_4" TYPE=CHECKBOX > BasketBall<BR>
<INPUT NAME="var_5" TYPE=CHECKBOX > Hockey
<INPUT NAME="var_6" TYPE=CHECKBOX > Tricoter<BR>
<INPUT NAME="var_7" TYPE=CHECKBOX > Relaxer
<INPUT NAME="var_8" TYPE=CHECKBOX > Autre 
</FORM>

Vous obtiendrez :

Cochez vos activités préférées:

Ski             Écouter la télé
Golf           BasketBall
Hockey    Tricoter
Relaxer    Autre

Ceci permet de cocher plusieurs cases, par contre si vous désirez que l'utilisateur puisse seulement choisir une case parmi celles proposés vous devrez utiliser ceci.

Troisième exemple, buttons de type 'radio'

<FORM>
Question: Quelle(s) langue(s) parlez-vous?:<BR><BR>
<INPUT NAME="NomIdentique" TYPE=RADIO > Français 
<INPUT NAME="NomIdentique" TYPE=RADIO > Anglais 
<INPUT NAME="NomIdentique" TYPE=RADIO > Les deux 
</FORM> 

Vous obtiendrez :

Question: Quelle(s) langue(s) parlez-vous?:

Français Anglais Les deux

Notez qu'en donnant le même nom à ces trois contrôles, vous pouvez seulement en choisir un des trois, ce qui est utile quand c'est un choix multiple avec la possibilité d'une réponse seulement.

Quatrième exemple, liste déroulante

<FORM>
Faites un choix:<BR><BR> 
<SELECT name="ListeDéroulante" style="HEIGHT: 22px; WIDTH: 200px"> 
<OPTION value=1>Vous entrez le choix numéro 1 </OPTION> 
<OPTION value=2>Vous entrez le choix numéro 2</OPTION> 
<OPTION value=3>Vous entrez le choix numéro 3</OPTION>
<OPTION value=4>Vous entrez le choix numéro 4</OPTION>
<OPTION value=5>Vous entrez le choix numéro 5</OPTION> 
<OPTION value=3>Vous entrez le choix numéro 6</OPTION> 
</SELECT> 
</FORM> 

Vous obtiendrez :

Faites un choix:

Notez que vous pouvez seulement faire un choix, ce qui peut être utile quand c'est un choix multiple avec possibilité d'une réponse seulement, on peut même remplacer les bouttons de type 'radio' avec ça.

Je pense que c'est assez pour vous donner un apperçu, passons maintenant à l'autre questions: comment l'utilisateur peut nous faire parvenir le formulaire? Bonne question vous dirai-je, la meilleure façon est d'utiliser un script CGI (Common Gateway Interface) c'est un programme qui est capable de gèrer les informations qui vous sont envoyé par le biais d'un formulaire. Vous devez placer ce programme dans un répertoire nommé "cgi-bin" et vous l'appelé pour qu'il soit exécuté.

Par contre si vous utilisez un service gratuit pour votre page ou site, il y a de forte chance que vous ne puissiez pas utiliser des programmes comme ça, car certaines personnes pourrait s'en servir pour des virus et autre. Il est fort possible également que n'ayez pas de répertoire "cgi-bin". Si c'est le cas, il est possible d'envoyer le contenu d'un formulaire par courriel en utilisant le Javascript (très limité comme méthode).

Si vous avez un répertoire "cgi-bin", vous pouvez trouver plusieur programme sur l'internet qui vous permettrons de faire ce que vous désirez. (Parlez-en avec votre fournisseur internet, il arrive assez souvent qu'il soit capable de vous offrir un service semblable) Les script ou programme CGI peuvent également servir pour les livres d'invités, les compteurs de visite, les service de messages, les 'chat rooms' et bien plus...

Voici deux sites en anglais ou vous trouverez de l'information sur les scripts CGI

The CGI Resource
CGI-Factory.com

Cinquième exemple,envoie par courriel

<action='mailto:Votre adresse de courriel' method=GET>
Entrez vos commentaires et faites moi parvenir le formulaire<BR><BR>
<input name=subject type=hidden value="Le%20sujet%20du%20courriel%20">
<TextArea name=body cols=40></textarea> 
<input type=submit value="Envoyer par courriel"
</FORM> 

Vous obtiendrez :

Entrez vos commentaires et faites moi parvenir le formulaire. Lorsque vous cliquez votre fenêtre de courriel s'ouvrira et vous devrez cliquez sur envoyer ou send pour me le faire réellement parvenir.

C'est dans la section action que vous entrez votre adresse de courriel après mailto:. Vous ne devez pas changer les noms des contrôles dans ce cas. Celui qui s'appelle subject sert à identifier le sujet du courriel, dans la partie value=" vous entrez le sujet en remplaçant les espaces par des %20. Le TextArea doit s'appeler body, il contient le texte que l'utilisateur entrera et qui sera envoyé avec le courriel. Ensuite, le Input type=submit, indique qu'il y aura un boutton qui exécutera l'action "mailto:votre adresse courriel" lorsque l'utilisateur cliquera dessus. Le mot value=", permet d'entrer le texte qui sera affiché sur ce boutton. Comme je vous l'ai dit, cette méthode est très limitée essayez l'exemple et vous verrez ce que je veut dire....

Bonne chance!!!


Retour au sommaire .

Pour obtenir une copie d'un document qui parle du HTML assez en détail, cliquez sur ce lien pour le télécharger HtmlGuide.zip Ce document est offert en anglais seulement


Pour obtenir une copie d'un document qui parle du HTML assez en détail, cliquez sur ce lien pour vous rendre à ce site Un manuel illustré de programmation en HTML Ce document est offert en français seulement




Ce site est à son meilleur avec une résolution de 800 X 600 et avec
internet explorer 4 ou 5, Compatible Netscape

Conçu le 7 mars 2000, dernière mise à jour le 31 mai 2001

Copyright InfoHtml-Java.com ©