free_ads


 

This is an exported picture

Table:    
Le code

Structure

Titre

Body

BGColor

 

Son

Mise en forme

Insérer

Le Texte

Marqueurs

Liens

 

Mailto

Liste

Tableaux

Frames

Compléments

Aide:

Si vous avez besoin d'aide, consultez notre page "HOTLINE"

 

Code Html

Cette page se veut une aide pour ceux qui veulent s'initier aux outils HTML, elle n'est donc pas exhaustive, vous y trouverez les principales commandes et quelques astuces.

Le HTML (Hypertext Markup Language) est le langage utilisé pour construire des documents hypertextes pouvant être visualisés sur le Web. Un document HTML peut incorporer du texte, des images, de l'animation et du son.

Le langage HTML fonctionne selon le principe suivant :

  • des commandes HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci

Lorsqu'un navigateur traite le document en question, il formate le texte suivant la signification des commandes HTML.

Il y a donc des commandes qui indiquent qu'il s'agit d'un titre, d'une liste d'éléments ou d'un simple paragraphe. Il est également possible d'inclure des objets de nature autre que du texte, tels des images, de l'animation et du son.

Un document HTML peut être créé à l'aide d'un simple éditeur de texte ou encore en employant un éditeur spécialisé qui vous offre une gamme complète d'outils, vous rendant ainsi la tâche beaucoup plus facile.

Un document html "standard" doit impérativement commencer par <HTML> et finir par </HTML>.

Les commandes HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives.

Les commandes HTML utilisent les caractères < et > comme délimiteurs.

Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considéré comme du texte à afficher.  


 

STRUCTURE D'UN DOCUMENT HTML

 

<HTML> <HTML/> : Commandes de début et de fin de document

<HEAD> </HEAD> : Informations non affichées concernant le document (Date et auteur par exemple)

<TITLE> </TITLE> : Titre du document. Cette information apparaît dans la barre de titre du client WWW.

<BODY> </BODY> : Corps du document. Toutes les informations affichées par le client WWW y sont contenues.

 

Exemple d'une structure de document HTML :

<HTML>
<HEAD>
<TITLE>Exemple de structure de document HTML</TITLE>
</HEAD>
<BODY>
Les données propres au document HTML
</BODY>
</HTML>


TITRE DE LA PAGE

 

Ce texte apparaîtra dans la barre de titre du navigateur lorsqu'un utilisateur affichera votre page sur son écran.

Exemple : pour cette page il s'agit de Guide HTML.

<HEAD><TITLE>Guide HTML</TITLE>
</HEAD>


BODY

 

    Tout ce qui est contenu entre <BODY> et </BODY> sera affiché à l'écran, c'est la partie intégrante de votre document, c'est là que vous saisirez votre texte, insérerez vos images et établirez vos liens.

     

    OPTIONS DE BODY

     BACKGROUND

    Permet de mettre une image dans le fond de la page.
    Attention à la couleur d'écriture et celle des liens, en fonction de la couleur du fond. On peut également choisir une couleur de fond proche de celle de l'image.

    <BODY BACKGROUND="nom_de_fichier.ext">

    Exemple :

    <BODY BACKGROUND="cahier.gif">


  •  

    BGCOLOR

    Permet de changer la couleur de l'arrière plan sans avoir à charger une image, là aussi, il faudra veiller à ce que le texte et les liens soient visibles dans tous les cas.

    Par défaut, le fond de page est en blanc, le texte en noir, les liens en bleu souligné, les liens activés en rouge et les liens visités en violet.

    TEXT
    Permet de changer la couleur du texte, par défaut cette couleur est en principe le noir, mais elle peut-être changée dans les préférences du browser.

    LINK
    Permet de changer la couleur des liens.

    ALINK
    Permet de changer la couleur des liens sélectionnés.

    VLINK
    Permet de changer la couleur des liens déjà visités.

     

    <BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur" ALINK="couleur"> VLINK="couleur">


    COULEUR

    La couleur que vous voulez obtenir peut être décrite de deux façons:

    • avec le nom anglais de la couleur,
    • ou beaucoup plus précisément au moyen d'un symbole # et de 6 chiffres (en hexadécimal - base16).

    Tout d'abord le format de la commande de couleur est: "#RRVVBB"
    # est le symbole qui permet de différencier une valeur d'un nom de couleur.
    RR la quantité de rouge contenue dans la couleur.
    VV la quantité de vert contenu dans la couleur.
    BB la quantité de bleu contenu dans la couleur.

    La couleur: #000000 correspond au noir (00 de rouge, 00 de vert et 00 de bleu).
    La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)

    La séquence de numérotation hexadécimale est (de min. à max.): 0 1 2 3 4 5 6 7 8 9 A B C D E F.

    Exemple:

    <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF">

    Le fond sera noir, le texte blanc et les liens en rose.


     

    SON

     

    Insérer un son en fond de page

     

    <EMBED SRC="son.wav" AUTOSTART="true" LOOP="-1">
    <BG SOUND="son.wav" AUTOSTART="true" LOOP="-1">

    AUTOSTART="True or False" : permet de déclarer le lancement du son à l'ouverture de la page.

    LOOP=" " permet de déterminer le nombre de fois où le son va être joué. La valeur -1 signifie que le son sera répété à l'infini.


     

    MISE ENFORME

     

    Le texte peut avoir plusieurs polices et attributs.

     

    Mise en forme de caractères

 

    Option Style B (gras), I (italique), U (souligné), S (barré)...

    Option FONT SIZE pour gérer la taille de la police

     Exemple :

    Bienvenue sur ma page

    <B><FONT SIZE=+1>Bienvenue….</FONT></B>

     Le texte est centré, en gras avec une police d'une taille supérieure à la taille standard.

    Aucune police n'est spécifié ce qui signifie que c'est la police choisie par défaut dans le menu Préférences qui sera affichée.

     

    <FONT> Ce marqueur permet de changer la fonte, et aussi d'autres paramètres, comme la taille et la couleur.

     Exemple :

    <FONT FACE="arial" SIZE="3"> : type et taille de police

    <FONT COLOR="YELLOW">ou COLOR="#RRVVBB" </FONT> : couleur de police

    <FONT SIZE="-1">Ou +2, +3, -2, -3, ou encore 3, 4, 5</FONT> : La taille des caractères en pixels

    <FONT SIZE="x">) : taille de police


Mise en forme de paragraphes

 

    Le texte peut être positionné à gauche, au centre, ou à droite de l'écran.

    Option ALIGN avec RIGHT (droit), CENTER (centre) et LEFT (gauche).

     

    Bienvenue sur ma Page.

    <ALIGN=right><B><FONT SIZE=+1>Bienvenue….</FONT></B></CENTER></ALIGN>

    Le texte est aligné à droite avec une police d'1 taille supérieure et en gras.


    Insérer une image

     

    IMG SRC : insertion d'image

 

  •  

    <CENTER><IMG SRC="belle.gif"></CENTER>

    Marqueur CENTER , RIGHT ou LEFT pour positionner l'image horizontalement.

    On peut modifier la taille initiale d'une image :

    HEIGHT ="valeur" pour modifier la hauteur

    WIDTH="valeur" pour modifier la largeur

     

     

    Pour plusieurs images et texte

     

    Bienvenue 

     

    <CENTER><IMGSRC="welcome1.gif" HEIGHT="39" WIDTH="50"> <ALIGN=ABSCENTER>Bienvenue <IMG SRC="welcome2.gif" HEIGHT="39" WIDTH="50"> ALIGN=ABSCENTER </CENTER>

    On peut contrôler l'alignement vertical grâce aux valeurs TOP (haut), MIDDLE (centre) et BOTTOM (bas) de l'option ALIGN.


     

    LE TEXTE DU DOCUMENT

     

     Le texte se saisit comme sur un traitement de texte le passage à la ligne est automatique.

    Marqueur <BR> : Pour créer un nouveau paragraphe

    Marqueur <P> : Changer l'alignement du paragraphe avec les options d'alignement:

    <P ALIGN="RIGHT"> (ou LEFT CENTER JUSTIFY) gauche/centre/aligné.

     

    MARQUEURS

    <B> et </B> : Caractères gras (<STRONG> </STRONG> aussi).

    <I> et </I> : Italiques (<EM> </EM> aussi).

    <U> et </U> : Souligné

    <S> et </S> : Barré (ne fonctionne pas avec tous browsers).

    <SUB> et </SUB> : indice.

    <SUP> et </SUP> : exposant.

    <CENTER> et </CENTER> : Centrage horizontal (texte et images).

    <DIV ALIGN=""> et </DIV> : Positionnement horizontal,

    ALIGN peut valoir LEFT/CENTER/RIGHT/JUSTIFY (gauche/centre/droite/aligné).

    <BLINK> et </BLINK> Clignotant

    <IMG ALIGN="position">

    SRC="fichier"

    ALT="nom de l'image"

    HEIGHT="hauteur">

    WIDTH="largeur">

     

    Insérer une ligne horizontale:

    <p>&nbsp;</p>

    <hr>

    <p>&nbsp;</p>

     


     

    LES LIENS

     

     Un lien vers une autre partie du document ou vers un autre document peut être de plusieurs nature, du texte, de l'image, une partie d'une image voire même le document tout entier...

    <A HREF="xxx">
    Début de lien qui finit par </A>

    Tout ce qui se trouve entre les deux est considéré comme zone sensible, et un click sur les objets situé entre ces deux bornes provoquera l'action contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page)

 

 Lien vers une page en local

 

    Exemples : Pour retourner au sommaire de ce site

    <A HREF="index2.htm">Sommaire</A>


Lien vers un site extérieur

 

Exemple : Pour aller sur le site Bizportail

<A HREF="http://www.bizportail.com/index.html">Allez voir ce site</A>


Lien vers un e-mail

 

Exemple : Pour m'envoyer un courrier électronique

<A HREF="mailto:personne@technet-france.com">Écrivez-moi</A>

 

    Pour faire un lien à partir d'une image remplacez le texte par le marqueur IMG SRC="image.gif".

    Votre message est le bienvenu!!

    <A HREF="mailto:personne@azekb12.com"><IMG SRC="mail.gif" BORDER="0"></A>  

    Petite astuce, si vous ne voulez pas qu'un lien image ait une bande de couleur autour de lui, mettez l'option border du marqueur image à zéro.


     

    Lien dans la même page

     

    Il faut utiliser les cibles ou ancrages.

    Positionnez vous à l'endroit que vous souhaitez atteindre, dans cet exemple le haut de cette page.

    Identifier la cible avec <A NAME="Codes HTML">Texte ou image</A>

    et utiliser le marqueur: <A HREF="#Codes">pour  aller sur Codes</A>

 

    Pour sauter dans une section particulière d'une autre page Web, il suffit tout simplement de rajouter le nom de la section après le nom de la page dans le lien, exemple:

    <A HREF="page2.html#sectionX"> Texte</A>

    Modifier l'apparence des liens

    Il est possible de modifier l'apparence des liens de façon à ne pas les faire apparaître en bleu souligné et modifier la couleur au survol.

    Vous devez incorporer les lignes de commande suivante dans la partie <HEAD> de votre page :

    <STYLE>

    A:LINK { color: #000000; text-decoration: none }

    A:VISITED { color: #000000; text-decoration: none }

    A:HOVER { color: #ffffff; text-decoration: none }

    </STYLE>

    Dans cet exemple les liens apparaissent en noir non souligné, au survol ils se transforment en blanc et ils restent en noir après avoir été visités.


     

    LES LISTES

     

    Il est possible de créer des listes d'objets numérotées ou non avec quelques marqueurs.

     

    Liste non numérotée :

    <UL>

    <LH>Entête en option</LH>

    <LI>Point numéro1

    <LI>Point numéro2

    <LI>Point numéro3

    <LI>Point numéro4

    </UL>


      

    Liste numérotée

    <OL>

    <LH>Entête en option</LH>

    <LI>texte

    <LI>texte

    </OL>

    Le type de numérotation peut être changé avec: <OL TYPE=""> avec a et A, la numérotation est alphabétique, avec i et I, elle est romaine (majuscules ou minuscules dans les deux cas).

    Pour continuer ou changer la numérotation:

    <OL START="x">

    <LH>Entête en option</LH>

    <LI>texte

    <LI VALUE="y">texte>

    </OL>


     

    TABLEAUX

     

    C'est la seule façon de gérer convenablement la présentation.

    Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des objets.

    Ces tables peuvent avoir un fond et des bords visibles ou non.

     

    Insérer un tableau

    <TABLE> et </TABLE> : pour définir un tableau

    <TR> et </TR> : pour définir une rangée

    <TH> et </TH> : pour les cellules de haut de colonne (facultatif)

    <TD> et </TD> : pour une cellule

     

    Exemples :

      Cellule2

     

<TABLE WIDTH=50%><TR><TD><IMGSRC="welcome1.gif"></TD><TD>Cellule2</TD>
</TR></TABLE></CENTER>

 Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première cellule l'image et dans la seconde le texte, le tout étant centré.

 

 

Bienvenue

 

<TABLE BORDER COLS=2 WIDTH="100%" >
<TR>
<TD>
<CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER>
<TD>
<CENTER>Bienvenue</CENTER>
</TD>
</TR>
</TABLE>

 Mise en forme d'un tableau

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc...

   

<TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%" bordercolor="#000080">

<tr>

<td width="50%" align="left" bgcolor="#008080" bordercolor="#FF0000">&nbsp;</td>

<td width="50%" align="left" background="fonkraft.jpg">&nbsp;</td>

</tr>

</table>

 

<table bgcolor="#008080"> : mettre un fond de couleur

<table width="50%"> : Occupation en % de la page

<table border="1"> Taille des bords (0=pas de bords)

border color="#FF0000" couleur des bordures

cellpadding="2" Marge intérieure des cellules

 cellspacing="3" Espacement entre les cellules

Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""), ou les deux.


 FRAMES  CADRES Exemples pris avec MS Front Page

 

Il est possible de scinder verticalement ou horizontalement une fenêtre en 2 ou plusieurs parties.

Dans chacune de ces parties viendra s'insérer un fichier html.

 

Création d'un fichier Cadre à division verticale

<HEAD>

<TITLE>Guide HTML de base</TITLE>

</HEAD>

<FRAMESET COLS="20%,80%">

<NOFRAMES>

<FRAME SRC="sommhtm.htm">

<FRAME SRC="guidehtml.htm" NAME="droite">

</FRAMESET>

</HTML>

 

<FRAME SRC="fichier.htm"> permet d'insérer un fichier dans les cadres créés précédemment.

 

 Création d'un fichier Cadre à division horizontale

L'attribut COLS peut être remplacé par ROWS pour avoir une séparation horizontale. La valeur attribuée correspond à la taille du cadre par rapport à la largeur de la page.

 

<FRAMESET ROWS="20%,80%">

<NOFRAMES>

<FRAME SRC="fichier1.htm">

<FRAME SRC="fichier2.htm" NAME="bas">

</FRAMESET>

</HTML>

 

Création d'un cadre avec bannière et sommaire

<FRAMESET ROWS="64,*">

<FRAME NAME="banniere" SCROLLING="no" NORESIZE TARGET="sommaire">

<FRAMESET COLS="150,*">

<FRAME NAME="sommaire" TARGET="principal">

<FRAME NAME="principal">

</FRAMESET>

La commande Scrolling avec l'attribut Yes ou No permet d'autoriser ou non une barre de défilement.

 


TRES IMPORTANT

Attribuer un nom à un cadre

 

Pour pouvoir faire des liens d'un cadre vers un autre, il faut leur donner des noms. Il est conseillé d'attrIbuer un nom significatif (haut, bas, gauche, droite...).

<FRAME SRC="fichier.htm" NAME="droite">


Liens entre cadres  target

 

Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.

Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.

Exemple : <A HREF="fichier.htm" TARGET="droite">

TARGET indique le nom du cadre cible où va s'afficher le fichier html.

_blank : ouvre une nouvelle fenêtre pour afficher la page

_self : affiche dans la même fenêtre (souvent utilisé par défaut)

_parent : affiche dans le cadre supérieur.( Pas d'origine)


COMPLÉMENTS

 

 

Afficher un message d'alerte

 

Pour afficher un message d'alerte en cliquant sur l'image qui sert de lien.

 

Exemple : 

 

<p><a href="http://imarketing.fr" onclick="window.alert('vous voulez aller sur Imarketing ? Click OK')"><i><font color="#fd0f09" face="Trebuchet MS"><img align="bottom" border="0" src="image.jpg" width="100" height="113"></font></i></a></p>

 

ou

 

<A HREF ="fichier.htm" TARGET=""
ONCLICK="window.alert('mettre votre message ici!')">
<IMG SRC="image.gif" BORDER=0 ALIGN= middle START="fileopen">
</A>

 

Créer une image à zone Clickable

Cette image s'appelle également une image mappée c'est à dire que chacune des zones est sensible et permet d'accéder par un lien vers d'autres pages. Les bon logiciels de traitement d'images vous permettent ce mapping assez facilement.

 

Détails:

<P><MAP NAME="FPMap0">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="133, 261, 199, 320">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="27, 261, 89, 319">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="256, 172, 334, 240">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="125, 168, 217, 241">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="17, 170, 91, 237">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="351, 87, 434, 145">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="255, 88, 317, 149">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="129, 89, 218, 154">

<AREA HREF="unlien.htm" SHAPE="rect" COORDS="20, 89, 99, 155">

</MAP><IMG RECTANGLE="(256,172) (334,240) unlien.htm" RECTANGLE="(125,168) (217,241) unlien.htm" RECTANGLE="(17,170) (91,237) unlien.htm"
RECTANGLE="(351,87) (434,145) unlien.htm"
RECTANGLE="(255,88) (317,149) unlien.htm"
RECTANGLE="(129,89) (218,154) unlien.htm"
RECTANGLE="(20,89) (99,155) unlien.htm"

SRC="menuv.gif" X-SAS-USEIMAGEWIDTH X-SAS-USEIMAGEHEIGHT BORDER="0" ALIGN="bottom" USEMAP="#FPMap0" WIDTH="470" HEIGHT="357"></P>

 

<AREA HREF="unlien.htm" permet de désigner vers quel fichier doit pointer le lien de cette zone

SHAPE permet de définir la forme de la sélection (rect

COORD précise les coordonnées géographiques de la zone