LE GUIDE DU HTML
version 1.0                                            par eVr

Ce guide est un compromis entre brièveté, clarté et précision. Vous trouverez ici toutes les commandes principales et quelques autres utiles, classées par type.

     1. Introduction
     2. Principes de base
     3. Balises principales
     4. Présentation
     5. Formatage du texte
     6. Images & couleurs
     7. Sons
     8. Liens
     9. Tableaux
     10. Listes
     11. Formulaires
     12. Caractères spéciaux
     13. Cadres
     14. Diverses autres commandes
     15. Effets de style (scripts CSS)
     16. D'autres sites & conclusion



1. Introduction :
Le langage html permet de présenter un document au format ".html" ou ".htm", et peu être lu par n'importe quel navigateur (browser). Ce langage est un passage obligé pour la mise à la disposition d'un document sur le web. Pour voir la source d'un document, il suffit lorsqu'il est affiché par votre browser de faire un clic droit/afficher la source Vous trouverez ci-dessous les principales balises utilisées pour la construction d'un document html.
L'idéal serait pour commencer à comprendre de regarder la source d'un site assez petit en guise d'illustration de ce qui va suivre.


^ TOP ^

2. Principes de base :
  • les balises sont de la forme <???> </???>
  • la cible des balises se situe entre celles-ci
  • les balises peuvent être écrites en majuscules ou pas


    ^ TOP ^

    3. Balises principales :
    Un document html comporte toujours un squelette stéréotypé. En effet, celui-ci facilite la lecture du document par le navigateur, et il dessine des zones différentes ayant un contenu spécifique. Le squelette est de la forme :
    <html>
    <head>
    <title></title>
    </head>
    <body>
    mise en forme du document
    </body> </html>
    <html> et </html> délimite tout le document.
    <head> et </head> délimite l'entête du document
    <title> et </title> délimite la zone d'entrée du titre du document
    <body> et </body> délimite le corps du document c'est à dire là ou vous trouverez la mise en forme


    ^ TOP ^

    4. Présentation :
    <br> : Aller à la ligne
    <div>texte</div> : Sert à aligner le texte à droite, gauche ou au centre : ces attributs sont left, right et center. A noter qu'on peut centrer du texte simplement par la commande <center>texte</center>
    <p>texte</p> : Pour faire un paragraphe
    <blockquote>texte</blockquote> : Bloc en retrait
    <hr> : Définit une ligne horizontale. Les attributs possibles sont :
         <hr width=50%> : définit la largeur de la ligne, en % de l'écran ou en pixels
         <hr size=10> : définit l'épaisseur de la ligne, en % ou en pixels
         <hr color=red> : définit la couleur de la ligne
         L'attribut noshade sert à produire une ligne pleine (sans effet 3D) : <hr noshade>


    ^ TOP ^

    5. Formatage du texte :
    <hX>titre</hX> : définit la taille d'un titre, avec X de 1 à 6 du plus petit au plus grand.

    exemple de titre de niveau 4 (<h4></h4>)


    exemple de titre de niveau 5 (<h5></h5>)

    La définition des paramètre de taille, de couleur, de fonte,... du texte est désignée par <font> :
    <font face="???">texte</font> : désigne la police de caractère utilisée (fonte)
    <font color="???">texte</font> : désigne la couleur du texte. Celle ci peut être écrite en anglais (ex : black, blue, red) pour les plus simples et les navigateurs relativement récents. Sinon, on doit écrire les couleurs en hexadécimal. <font size="X">texte</font> : désigne la taille du texte, ou X vaut de 1 à 7
    On peut également faire varier la taille du texte de la manière suivante : <font size="+2">texte</font> ou le texte sera plus grand de 2 unités.
    La grandeur de base du texte se note <basefont> auquel on peut ajouter les attributs color, size et face comme avec <font>
    On peut mettre plusieurs attributs derrière une balise <font> :
    <font size="2" color="blue" face="arial">texte</font>
    Pour la taille de la police, on peut simplement utiliser les balises <small> et <big>.

    Il existe aussi d'autres balises de mise en forme du texte :
    <b>texte</b> : pour mettre le texte en gras (bold)
    <i>texte</i> : texte en italique
    <u>texte</u> : texte souligné
    <em>texte</em> : texte en italique également
    <cite>texte</cite> : citation (en italique)
    <tt>texte</tt> : imprimé
    <strike>texte</strike> : texte barré (on utilise aussi <s>texte</s>)
    <blink>texte</blink> : texte clignotant; ça marche pas forcément par contre
    <sup>texte</sup> : texte en exposant
    <sub>texte</sub> : texte en indice
    <pre>texte</pre> : texte préformaté


    ^ TOP ^

    6. Images & couleurs :
    Pour insérer une image, on utilise la balise <img src="URL">
    On peut préciser également :
         la taille des bords : <img src="URL" border=5>
         le texte en alternative (qui apparaît lorsqu'on laisse le curseur longtemps sur l'image) : <img src="URL" alt="coucou !">
    Pour accélérez l'affichage de la page, on peut définir les dimensions de l'image : <img src="URL" width=100 height=200>. Cette image aura les dimensions 100*200 pixels.
    On peut définir l'espace environnant de l'image (par rapport au texte avant et après elle) par les attributs hspace (espace horizontal) et vspace (espace vertical).

    <embed src="URL"> : définit un objet encastré.

    Pour définir une couleur à la page, on utilisera un attribut de <body> :
    <body bgcolor=red> : La page aura la couleur rouge en arrière-plan
    De même, une image en arrière plan sera déclarée ainsi : <body background="URL de l'image">
    ^ TOP ^




    ^ TOP ^

    7. Sons :
    Cette partie sera pas très longue car on ne peut pas faire grand chose avec des sons.
    <bgsound src="URL du son"> définit le son qui se lancera lorsque la page s'ouvrira.
    Les attributs sont :
    <bgsound src="URL" loop=X>. Si X vaut -1, le son se répètera en boucle à l'infinie, sinon il se répètera X fois.
    On peut également utiliser un lien pour ouvrir un son : <a href="blabla.mid">écoutez ici un son</a>


    ^ TOP ^

    8. Liens :
    Un lien est du texte introduit par la balise<a>.
    L'adresse se note par "href" :     ce lien mène vers la page d'accueil. La syntaxe est : <a href="URL">texte</a>. Tout ce qui se trouve entre ces 2 balises sont des liens. On peut y mettre une image par exemple.

    On peut définir la couleur des liens avec des attribut de <body> :
    <body link=red alink=blue vlink=green> : signifie que les liens seront rouge, les liens actifs seront bleu et les liens visités seront vert. On peut simplifier la saisie des liens : si toutes vos pages sont dans le même répertoire, pour aller à la page "???.html", il suffira de taper <a href="???.html">la page ???</a>.

    Si on veut donner l'URL de base pour faire ce type de raccourci, on utilisera <base href="URL">
    Par exemple, la page à l'adresse "http://www.domaine.com/mapage.html" est accessible par les commandes :
    <base href="http://www.domaine.com/">
    ...
    <a href="mapage.html">ma page perso</a>

    On peut, comme pour les images donner un titre ou un intitulé aux liens ; celui-ci s'affichera en laissant qq temps le curseur sur le lien.
    Pour cela, on utilise le code title="titre du lien..."
    ex : lien


    ^ TOP ^

    9. Tableaux :
    Un tableau se définit par les balises <table>...</table>, les lignes du tableau se définissent par les balises <tr>...</tr> et les cellules se définissent par <td>...</td> ou <th>...</th>. Chaque cellule du tableau doit contenir au moins un caractère pour être affichée.
    A noter cependant : les balises </tr> et </td> sont recommandées par un soucis de lisibilité mais par indispensables.

    Exemple de tableau "basique" :
    <table>
    <tr><td>coucou</td>
        <td>c'est un exemple !</td>
    </tr>
    <tr><td>essayez</td>
        <td>aussi</td>
    </tr>
    </table>

    Cela donnera :
    coucou c'est un exemple !
    essayez aussi

    Voila, ça c'est la base d'un tableau... On peut rajouter les attributs suivants :
       <table border="X"> : définit la taille des bords du tableau (X en pixels)
       <table bordercolor="?"> : définit la couleur des bord du tableau (avec ? la couleur)
       <table bgcolor="?"> : définit la couleur du tableau (avec ? la couleur)
       <table background="URL de l'image"> : pour mettre une image en arrière-plan
    (à noter que cet attribut peut être mis également à la suite de <td>)
       <table cellspacing="X"> : définit l'espace entre les cellules (X en pixels)
       <table cellpadding="X"> : définit l'espace entre les bords et le texte (X en pixels)
       <table width="X"> : définit la largeur du tableau (X en pixels)
    (on peut mettre X en pourcentage en rajoutant % : X%)

    On peut faire des tableaux améliorés avec des cellules qui ont la taille de 2 autres cellules : on utilise comme attribut de <td> ou <th> les commandes rowspan pour une cellule qui a sa largeur modifiée et colspan pour une cellule qui a sa hauteur modifiée :

    largeur=2
    hauteur=3 cellule normale
    cellule normale
    cellule normale


    Code source du tableau ci-dessus :
    <table>
    <tr><td colspan=2>largeur=2
    <tr><td rowspan=3>hauteur=3
    <td>cellule normale
    <tr><td>cellule normale
    <tr><td>cellule normale
    </table>

    Voila, c'est à peut près tout sur les tableaux...


    ^ TOP ^

    10. Listes :
    Ce sera un petit paragraphe car les listes sont assez faciles à faire. On peut simplement créer une alternance de texte précédé d'un point :
  • premier
  • second
  • troisième Mais ce n'est pas une liste à proprement dit.
    Il existe 2 sortes de listes : les listes ordonnées et les listes non-ordonnées. Seules leurs apparences changent.

       -liste non-ordonnée :
    Elle est définit entre les balises <ul> et </ul>. Chaque point est ensuite précédé de la balise <li>.

       -liste ordonnée :
    Elle est définit entre les balises <ol> et </ol>. Comme les listes non-ordonnées, chaque point est précédé par <li>.

    Dans les 2 cas, on peut choisir la forme pour li, en lui ajoutant un des attributs suivants :
  • <li type=disc>
  • <li type=circle>
  • <li type=square>

    Dans le cas de la liste ordonnée, on peut choisir également parmis les attributs suivants :
    <ol type="I", "i", "1", "A" ou "a">


    ^ TOP ^

    11. Formulaires :
    Les formulaires sont établis dans une zone de définition qui est entre les balises <form></form>. On doit définir la méthode (POST ou GET) à employer, en l'occurence ici la méthode POST. Donc, les commandes du formulaire seront placées entre <form method=post></form>.

    La commande input :

  • <input type="text" name="nom"> : sert à insérer dans la page un champ d'entrée de données. Ces attributs sont :
       -name="nom" : obligatoire ; sert à donner le nom du champ
       -value="valeur par défaut" : donne la valeur par défaut du champ
       -size="X" : donne la taille du champ (avec X le nombre de caractères maximum)

    Exemple de formulaire :
    <form method=post>
    NOM : <input type="text" name="nom" value="entrez votre nom" size="50"><br>
    PRENOM : <input type="text" name="prenom" value="entrez votre prénom" size="50">
    </form>
    Cela donne à l'écran :
     NOM :
     PRENOM :
  • <input type="radio"> : sert à insérer des choix de réponses à cocher. Ces attributs sont les mêmes que ci-dessus, sauf pour size qui n'existe pas pour cette commande.
    <input type="radio" name="info">monsieur
    <input type="radio" name="info">madame
    Le code ci-dessus par exemple donnera à l'écran : monsieur madame

    On peut ajouter au formulaire un champ de texte sur plusieurs lignes par la commande <textarea></textarea>.
    Cette balise nécessite que l'on attribut la taille du champ, ce qui ce fait par les sous-balise cols et rows, respectivement pour le nombre de caractère sur une ligne et le nombre de lignes.


    On peut utiliser la commande wrap="off", "virtual" ou "physical" qui joue sur les ascenseurs horizontaux du champ de texte.
    On lui attribut également un nom avec la commande name="nom"

    Pour créer un menu déroulant, on utilise la balise <select></select>. Pour pouvoir sélectionner plusieurs options, il faut rajouter la commande <select multiple></select>
    Chaque item du menu sera précédé par la balise <option> et éventuellement </option>. L'option par défaut est notée <option selected>

    <select>
    <option selected> premier
    <option> deuxième
    <option> troisième
    </select>



    Voila de quoi faire un formulaire consequent. Maintenant il faut pouvoir envoyer les données à votre e-mail par exemple. On utilise pour cela un bouton :
    Pour envoyer les réponses d'un internaute, on utilise un bouton qui a pour fonction "submit" c'est à dire envoyer.
    <input type="button" name="submit" value="envoyer">


    Il existe aussi un bouton qui annule les données des champs du formulaire :
    <input type=button name="reset" value="annuler">


    ^ TOP ^

    12. Caractères spéciaux :
    Les anciens navigateurs ne supportent pas certains caractères spéciaux (&, " par exemple). De plus, certains caractères sont réservés au language html (<, > par exemple) ; il faut donc utiliser un code spécial pour les insérer dans une page.
    Voici quelques caractères pouvant poser problème et leur code :

       &nbsp; : sert à faire un espace
       &amp; : &
       &lt; : <
       &gt; : >
       &quot; : "
       &oelig; : œ
       &agrave; : à
       &ccedil; : ç
       &eacute; : é
       &ecirc; : ê
         		   &egrave; : è
       &euml; : ë
       &ugrave; : ù
       &reg; : ®
       &copy; : ©
       &trade; : ™
       &brvbr : ¦
       &hellip : …
       &sup2; : ²
       &sect; : §



    ^ TOP ^

    13. Cadres :
    Les pages affichant les cadres sont des pages affichant plusieurs sources html en même temps. Créer une page vierge. A la place de <body>, mettez la commande <frameset> pour définir la zone de définition des cadres.
    Supposons que vous vouliez créer une barre de titre à droite, et la page principale à droite. Vous allez donc diviser la page en 2 cadres dans le sens vertical. Vous allez donc déterminer une séparation verticale à X pixels du bord de droite (cols=X). Ensuite il faut déterminer les 2 pages à afficher dans les cadres, comme suit :

    <frameset cols="150">
    <frame name="nom_1" src="URL_1">
    <frame name="nom_2" src="URL_2">
    </frameset>

    A noter que vous donner le nom que vous voulez aux cadres, mais c'est indispensable d'en donner un.
    Pour afficher les pages dans le cadre de droite (sur la page "nom_2"), il faut ajouter dans chaque lien du cadre de gauche target="_nom_2" :
    Par exemple : <a href="http://www.domaine.com" target="_nom_2">domaine.com</a>
    Mais le plus simple c'est d'utiliser un éditeur html pour les cadres car c'est vraiment emm... de les faire soi-même.


    ^ TOP ^

    14. Diverses autres commandes :
    <marquee>text</marquee> : le texte défile à l'écran
    On peut ajouter les attributs height, width, bgcolor.
    texte défilant


    ^ TOP ^

    15. Effets de style (scripts CSS):
    On peut faire changer la couleur, la taille et autre des liens : dans la partie <head>, ajoutez les commandes <style></style>.
    Entre ces balises, vous pouvez mettre :
       -a:link {paramètres} : détermine les paramètres des liens simples
       -a:visited {paramètres} : paramètres des liens visités
       -a:hover {paramètres} : paramètres des liens lorsque le curseur est dessus

    Les paramètres sont : (vous n'êtes pas obligé de tout mettre bien sur : )
          -text-decoration: underline|overline|none; : texte souligné, avec une ligne au dessus ou sans rien
          -color: ???; : couleur du texte
          -background-color: ???; : couleur du surlignage
          -font-style: italic; : met le texte en italique
          -font-weight: bold; : met le texte en gras
          -font-size: ???; : défini la taille de la police
          -font-family: ???; : défini la police du texte
          -letter-spacing: X; : espacement, en pixel, entre les lettres
          -background-attachment: fixed; : définit le papier peint de la page comme statique
          -background-position: center|right\left|top|bottom; : position du papier peint
          -background-repeat: no-repeat|repeat-x; : répétition du papier peint
          -background-image: URL; : URL de l'image de fond
          -letter-spacing: x; : espacement des lettres dans les phrases

    A noter que les ";" sont indispensables !!!
    Ceci n'est qu'un apercu de ce qu'on peut faire avec les scripts CSS... la suite est     là.


    ^ TOP ^

    16. Conclusion :
    'tain c'est long à écrire...
    On dira que c'est la beta-version de ce guide, alors soyez indulgents pour les fautes et oublis (vous pouvez me les signaler en m'écrivant).
    Conclusion : voilà, c'est fini, j'suis crevé ! (et bossez bien le html : c'est en regardant la source (clic droit/afficher la source) des pages intéressantes qu'on progresse !)


    ^ TOP ^


    • *** © eVr - 2ooo ***