Les formulaires


Les formulaires sont des éléments utilisés principalement pour des sites conçus avec
des technologies dynamiques (tel que le PHP).

La première balise est la balise <form> </form>. C'est une balise de
type block qui admet plusieurs attributs obligatoires (ou presque).


  • id : nous verrons plus en détail cet attribut prochainement. On donne un identifiant unique à un élément HTML, il ne doit pas contenir d'espaces et doit commencer par une
    lettre ou un "_" (underscore).

  • action : définit l'adresse du fichier (ou script) auquel le formulaire envoie les données.

  • method : cet attribut admet uniquement deux valeurs post et get. Ce sont les deux méthodes d'envoi des données. La méthode get enverra les valeurs par l'url (exemple : action.php?nom=martin&prenom=simon), cette métode est la moins sécurisée.

    La métode post, est beaucoup plus sécurisée puisqu'elle envoie
    les variables de manière transparente et invisible.

  • enctype : cet attribut n'est pas obligatoire, et il fonctionne uniquement quand la méthode est post, il admet trois valeurs text/plain, application/x-www-form-urlencoded et multipart/form-data.
    Par défaut, le type est text/plain. Cet attribut n'est pas à préciser si vous n'utilisez pas de format particulier.
    La seconde balise à connaître est la balise <fieldset> </fieldset>.

    Cette balise contient un ou plusieurs champs du formulaire. On lui associe la balise <legend> </lengend>,     qui contiendra la légende des champs contenus dans fieldset.
    Note : vous pouvez simplement utiliser une balise <div> à la place du fieldset, mais le résultat sera différent, et l'utilisation de la balise legend sera interdite.

    Retenez également qu'il est interdit par la norme XHTML de mettre directement les champs après la     balise form, puisque ce n'est pas son but.


Préparons un formulaire servant à répondre à un sondage : 


    1  <form id="sondage" action="sondage.php" method="post">
    2    <fieldset><legend>Votre nom :</legend>
    3      <!-- champ nom -->
    4    </fieldset>
    5    <fieldset><legend>Votre pr&eacute;nom :</legend>
    6      <!-- champ prenom -->
    7    </fieldset>
    8    <fieldset><legend>Votre adresse email :</legend>
    9      <!-- champ email -->
   10    </fieldset>
   11    <fieldset><legend>Question :</legend>
   12      Intitul&eacute; question :<br />
   13      <!-- champs reponse -->
   14    </fieldset>
   15  </form>


Ce premier essai est volontairement incomplet, nous allons le compléter au fur et à mesure.

La balise suivante est la plus importante du formulaire : c'est la balise qui correspond au champ : <input />.

Elle admet plusieurs attributs aussi, dont l'un est essentiel : l'attribut type.

Vous pouvez voir la liste des champs sur la page d'exemple.


En regardant cet exemple, vous avez remarqué que le champ de type hidden
(qui signifie caché) ne se voyait pas.
Il sert é transmettre des valeurs que l'utilisateur ne voit pas et donc, par conséquent, ne peut pas modifier.

Note : evitez de mettre des informations à risque comme un mot de passe dans ce champ,
car sa valeur sera visible en affichant la source de la page.


Tous ces champs doivent avoir une autre série d'attributs essentiels pour faire
fonctionner le formulaire :


  • name : il sert à indiquer le nom du champ. Généralement, dans le script qui traitera le
    formulaire, c'est ce nom qui servira à appeller le contenu du champ.

  • id : cet attribut n'est pas obligatoire, mais est bien utile, non seulement pour la mise en forme (voir chapitre n°3) mais aussi pour effectuer des tests sur ce champ en javascript. Par commodité name et id : ont souvent une valeur assez semblable.

  • value : Cet attribut peut rester vide, mais est indispensable. Il sert à indiquer la valeur par défaut du champ. (Sur notre page d'exemple, la valeur par déefaut du premier champ texte est "Champ de type text")

  • maxlength : cet attribut n'est pas obligatoire, mais il permet de définir la limite de caractères qui peuvent être saisis (pour un champ de type text ou password).

  • disabled="disabled" :
    Cet attribut n'admet aucune autre valeur que "disabled", en raison de la norme
    de syntaxe XML. Il permet de griser le champ et d'en interdire sa modification.

  • readonly="readonly" :
    Cet attribut est assez semblable à disabled. à l'exception qu'il
    ne grise que la case (pas le texte).

  • checked="checked" : même restriction de sa valeur que pour disabled. Utilisable uniquement pour les champs de type checkbox et radio, quand cet attribut est précisé, la case est déjà cochée au chargement de la page.

Il existe encore deux types de champs, mais qui ne fonctionnent pas avec la balise input.

Le premier est <textarea><textarea>, cette balise admet aussi l'attribut
name, mais pas value. Le contenu par défaut de la case est placé entre les deux balises.

Cette dernière fonctionne de la même manière qu'un champ de type text, mais il fonctionne sur plusieures lignes de texte.

Il admet encore deux attributs obligatoires :


  • cols : qui correspond au nombre de lettres par lignes

  • rows : qui correspond au nombre de lignes du champ


Le dernier attribut que nous allons voir est plus complexe, mais pas plus difficile
à utiliser, c'est l'attribut <select> </select> qui permet de créer des listes déroulantes.

Un simple attribut modifie le comportement de cette balise. c'est l'attribut multiple="multiple".
En l'activant la liste permet de selectionner plusieurs options en même temps. Et l'affichage est
aussi différent (voir la page d'exemple).


Pour indiquer les valeurs que ce champ admet, on utilise la balise enfant <option> </option>. On indique sa valeur avec l'attribut value et on peu le sélectionner par défaut
avec selected="selected". 

    1  <select name="equipement" [multiple="multiple"]>
    2    <option value="television">
    3      T&eacute;l&eacute;vision
    4    </option>
    5    <option value="telephone">
    6      T&eacute;l&eacute;phone
    7    </option>
    8    <option value="ordinateur">
    9      Ordinateur
   10    </option>
   11  </select>



> retour au sommaire

> voir la suite

Les trois types de balises


Nous l'avons vu, il existe donc trois syntaxes de balises.

Mais il existe un autre "classification", celle ci ne concerne pas la syntaxe
mais le sens de ces balises.


// Les balises de type bloc

une balise de type bloc entoure un bloc texte, par exemple un paragraphe, un texte
préformaté, une citation... 


    1  <paragraphe>
    2      ..........
    3  </paragraphe>

ce type de balise crée une séparation avec le bloc précédant.


// Les balises éléments de texte :

Ce type de balise appelé plus souvent "inline", sert à mettre en valeur un petit morceau
dans un bloc : 


    1  <paragraphe>
    2    je ve faire ressortir ce <important>mot</important>
    3  </paragraphe>


Voir exemple n°2 : pour bien faire la différence entre un bloc et un "inline".


Il est interdit, selon les normes du w3c, d'avoir une balise bloc dans l'une de ces balises.


// Les balises "invisibles"

ce type de balise n'a pas d'influence directe sur le contenu. 


    1  <javascript>
    2    .........
    3  </javascript>

Il est difficile de décrire ce type de balise maintenant, mais la page suivante va vite
vous eclairer. Vous allez créer votre première vraie page HTML.


> retour au sommaire

> voir la suite



Langage pour décrire


Le HTML est un langage servant à structurer les textes. On présentera le contenu de la page de manière ordonnée avec des titres, des paragraphes, des listes à puces...

Le résultat d'une page contenant uniquement du HTML ressemblera en quelque
sorte à un document de traitement de textes sans changer la police, la couleur, ni rajouter d'images. Voir exemple n°1

On peut très nettement distinguer l'arborescence de cette page.


Pour définir le type de contenu et créer cette arborescence, on entoure le contenu de balises.

C'est ce dont nous parlerons sur la prochaine page. Nous commencerons donc à produire du code.

> retour au sommaire

> voir la suite

Les tableaux


Les tableaux ont longtemps été utilisés pour mettre en forme les pages web. Les designers
s'en servaient sans respecter réellement le sens des tableaux : ils servent à contenir des données tabulaires, et c'est tout.
Aujourd'hui, il existe une méthode de mise en forme beaucoup plus poussée, et qui à été conçue dans ce but : les css, que nous étudirons dès le chapitre suivant. Les tableaux ne sont donc plus à utiliser n'importe comment.

Dans le but d'éviter de s'embrouiller avec des balises qui ne sont plus réellement utiles,
seules les balises les plus simples seront évoquées.

La balise fondamentale est la balise <table>. Elle est bien évidement
de type bloc.

La balise suivante est la balise <tr> </tr>, cette dernière encadre une ligne du tableau.

La troisième est la balise <td> </td>, elle correspond à une cellule.

On peut en ajouter une quatirème : <th> </th> qui correspond à une cellule d'entête de tableau. 


   1  <table>
   2    <tr>
   3      <th>
   4        Colone 1 :
   5      </th>
   6      <th>
   7        Colone 2 :
   8      </th>
   9    </tr>
  10      <td>
  11        ligne 1, cellule 1.
  12      </td>
  13      <td>
  14         ligne 1, cellule 2.
  15      </td>
  16    </tr>
  17      <td>
  18        ligne 2, cellule 1.
  19      </td>
  20      <td>
  21        ligne 2, cellule 2.
  22      </td>
  23    </tr>
  24  </table>


le résultat sera :



Collone 1 :Collone 2 :
Ligne 1, Cellule 1Ligne 1, Cellule 2
Ligne 2, Cellule 1Ligne 2, Cellule 2

Il peut arriver que le nombre de cellules de chaque ligne soit différent. En imaginant que la
première ligne ait 3 cellules, et la seconde seulement 2, la deuxième cellule de la deuxième ligne s'arretera au même endroit que la seconde cellule de la première ligne.

nous utiliserons alors l'attribut colspan que nous mettrons à la valeur 2, puisque notre cellule de la deuxième ligne doit s'étendre sur les deux dernières cases du dessus.

Remarque : la ligne prise en compte est toujours la ligne qui contient le plus de cellules. 


    1  <table>
    2  <caption>Titre de ce tableau (caption)</caption>
    3    <tr>
    4      <td>
    5        ligne 1, cellule 1.
    6      </td>
    7      <td>
    8         ligne 1, cellule 2.
    9      </td>
   10      <td>
   11        ligne 1, cellule 3.
   12      </td>
   13      <td>
   14        ligne 1, cellule 4.
   15      </td>
   16    </tr>
   17      <td>
   18        ligne 2, cellule 1.
   19      </td>
   20      <td colspan="3">
   21         ligne 2, cellule 2.
   22      </td>
   23    </tr>
   24    </tr>
   25      <td>
   26        ligne 2, cellule 1.
   27      </td>
   28      <td colspan="2">
   29        ligne 2, cellule 2.
   30      </td>
   31      <td>
   32        ligne 2, cellule 3.
   33      </td>
   34    </tr>
   35  </table>


le résultat sera :








Titre de ce tableau (caption)
Ligne 1, Cellule 1Ligne 1, Cellule 2Ligne 1, Cellule 3Ligne 1, Cellule 4
Ligne 2, Cellule 1
Ligne 3, Cellule 1Ligne 3, Cellule 2Ligne 3, Cellule 3

Il existe encore une balise qui concerne les tableaux, même si elle est un peu à part.

C'est la balise <caption> </caption>. Elle sert à donner un titre au tableau. Ce titre sera placé au dessus du tableau par le navigateur, même si on la place tout de suite après la balise <table>.


> retour au sommaire

> voir la suite

Les éléments courants


Nous allons à présent étudier une série de balises usuelles.


// <span> </span>

Balise de type inline.

C'est une balise universelle, qui sert quand aucune autre balise inline ne convient.

Cette balise est un peu l'équivalent de la balise div, à l'exception que celle-ci est de
type inline. Elle ne produira donc pas de retour à la ligne.


// <strong> </strong>

Balise de type inline.

Cette balise sert à mettre en relief un mot dans un texte. Pour les navigateurs graphiques, le mot sera affiché en gras.

Note aux utilisateurs de l'HTML 4 : cette balise remplace la balise <b>
(bold).


// <em> </em>

Balise de type inline.
Cette balise signifie "emphase". Pour les navigateurs graphiques, le mot sera affiché en italique

Note aux utilisateurs de l'HTML 4 : cette balise remplace la balise <i> (italic).



// <acronym> </acronym>

Balise de type inline.

On l'utilisera par exemple pour encadrer un sigle. 


    1  <acronym title="Federal Bureau of Investigation">FBI
       </acronym>


L'attribut title servira à contenir le terme complet.


// <abbr> </abbr>

Balise de type inline.

On l'utilisera pour signaler une forme abrégée. 


    1  <abbr title="Et caetera">etc</abbr>


// <br />

Balise de type inline.

Affichera un retour à la ligne forcé dans un paragraphe.


// <code> </code>

Balise de type inline.

Exprime un terme correspondant à une instruction informatique. Elle est souvent utilisée dans ce tutorial.



// <hr />

Balise de type bloc.

Affiche une barre de séparation, comme celle-ci :




// <blockquote> </blockquote>

Balise de type bloc.

Cette balise sert à encadrer un texte cité.

En temps normal, le navigateur affiche une marge supplémentaire à gauche.


// <pre> </pre>

Balise de type bloc.

Cette balise sert à afficher du texte préformaté. En clair, pour chaque espace dans le code, le navigateur l'affichera, alors qu'en temps normal, plusieurs espaces à la suite n'en affichent qu'un
seul.


// Note sur les balises bloc

Nous ne détaillons que très peu de balises de type bloc. Car les autres balises connues sont plus spécifiques. Comme il a déjà été dit, la balise la plus souvent utilisée pour décrire un texte est la balise <p>


> retour au sommaire

> voir la suite

Votre première page HTML


Votre première page HTML


Maintenant que nous avons la structure d'une page HTML, nous allons construire le contenu de la page.

Tout ce que nous allons apprendre ici se localise entre les balises <body>,
sauf exeption possible que nous signalerons.


Comme nous avons tenté de l'expliquer avant, chaque balise doit décrire ce
qu'elle entoure. Il existe un grand nombre de balises, vous pourrez vous référer à une ressource très complète répertoriant toutes les balises xhtml, ainsi que leur description, leurs principaux attributs...

Je vous invite à vous remettre en mémoire les différences entre les balises bloc et inline (voir "Les trois types de balises").


// Les balises courantes

On encadre toujours une partie de contenu d'une balise de type bloc, ce sont les
balises que l'on utilise le plus couramment. La balise la plus utilisée est la balise <div>.

C'est la balise bloc universelle, qui sert à contenir tout type de donnée que l'on ne peut pas
vraiment décrire. On l'utilise par exemple pour encadrer la totalité de la page, ou encadrer des
grandes parties de l'organisation (lemenu, l'entête...).
Nous allons commencer par faire trois grandes parties :

l'entête qui contiendra notamment le logo, la zone du contenu de la page qui contiendra le
menu, le texte de la page et le pied de page avec le copyright et les informations diverses... 


     1  <div>
     2    <!-- Entête de la page : logo -->
     3  </div>
     4  <div>
     5    <div>
     6      <!-- Menu -->
     7    </div>
     8    <div>
     9      <!-- contenu de la page -->
    10    </div>
    11  </div>
    12  <div>
    13    <!-- Pied de page -->
    14  </div>


> Liste des attributs pour la balise <div>


Travaillons en premier l'entête :

Le logo est une image : 

    1  <div>
    2    <img src="./images/logo.jpg" alt="Logo du site" />
    3  </div>

L'image est un élément inline, il contient deux attributs obligatoires :


  • src : correspond à
    "source", on indique le chemin relatif
    de l'image, par rapport
    à la page.

  • alt : correspond à texte
    alternatif, cet attribut sert à décrire l'image, dans le cas où l'image serait
    absente ou que la page serait lue par un navigateur textuel.


il existe de nombreux autres attributs pour l'image, mais pas obligatoires, tel que :


  • title : On indique le
    titre de l'image (souvent affichée dans une bulle d'aide). Il est utile et
    souvent à mettre pour des images illustrant un texte.


> Liste des attributs pour la balise <img>


Nous allons maintenant faire le menu avec une liste à puces. 


    1  <div>
    2    <div>
    3    <!-- Menu -->
    4      <ul>
    5        <li>Accueil</li>
    6        <li>Produits</li>
    7      <li>Nos Prix</li>
    8      <li>Contact</li>
    9    </ul>
   10    <div>
   11  <div>

Les balises <ul> entourent les différentes lignes de la liste.

Chaque ligne est entourée de la balise <li>. Il est possible de faire une sous liste en imbriquant une autre liste entre <li> et </li>. 

   
    1  <ul>
    2    <li>
    3      Liste 1
    4      <ul>
    5        <li>Sous liste</li>
    6        <li>Sous liste</li>
    8      </ul>
    9    </li>
   10  </ul>

// Le lien hypertexte

Le lien hypertexte est le morceau de texte sur lequel vous cliquez pour voir apparaître
une autre page.

En voici le code : 


    1  <a href="suivant.html" title="Titre de la prochaine page"
       hreflang="fr" accesskey="s" tabindex="1">Page suivante</a>


L'attribut obligatoire est href dans lequel vous indiquez le chemin vers la page qui s'affichera.

Les autres attributs sont optionnels :


  • title : Donnez un titre
    à la prochaine page, il sera affiché dans une bulle d'aide au survol du lien
    par la souris

  • hreflang : définissez la
    langue de la page qui sera affichée (fr,en,...).

  • accesskey : vous pouvez
    indiquer une lettre de raccourci, en tapant Alt+cette lettre, la page
    s'affiche

  • tabindex : c'est aussi
    un attribut d'accessibilité vous pouvez définir dans quel ordre les liens ont
    le focus (sont pointés) en tapant sur la touche tab.



> voir la liste des attributs pour <a>


Note aux utilisateurs de HTML 4 : l'attribut target est devenu obsolète, pour ouvrir une page dans une nouvelle fenêtre, il faut utiliser un javascript.


// Titres et paragraphes

Nous allons maintenant structurer le texte : 


   1  <h1>1. Documentation du Produit</h1>
   2    <h2>1.1. Spécificité</h2>
   3      <p>
   4        Lorem ipsum dolor sit amet, consectetuer adipiscing
   5        elit. Vestibulum sollicitudin, neque blandit
   6        elementum nonummy, massa wisi hendrerit dolor,
   7        quis commodo enim risus in velit.
   8      </p>
   9    <h2>1.2. Fonctions avancées</h2>
  10      <p>
  11        Praesent sodales. Vestibulum faucibus, ipsum non
  12        convallis auctor, leo arcu porttitor velit, id
  13        lobortis justo augue a dui. Pellentesque laoreet
  14        ligula eu eros. Donec at felis in dui aliqu.
  15      </p>

Nous définissons les titres avec les balises <h1>,<h2>,... jusqu'à <h6>.

Le titre le plus important étant <h1> et <h6> le sous-titre le plus bas
dans l'organisation du document.


la balise <p> correspond à un paragraphe. C'est une balise encore plus
souvent utilisée que la balise <div>


même si elle se limite à un type de contenu plus précis.

Vous pouvez voir l'exemple n°1 construit avec ces balises courantes.


// Les caractères spéciaux

Certains caractères en html, tel que les é è ê, ne sont pas admis dans le code, pour les
taper, il faut utiliser des codes de substitution.

Chacun de ces codes commence par le symbole & et se termine par ; (point-virgule).

Par exemple, pour é le code sera &eaute;.

La syntaxe sera : 


    1  &eacute;
    2  & [lettre accentuée] [accent] ;
    3  ex : à => &agrave; ou œ = &oelig;...

On aura :



  • Accent aigü : acute;
    : é = &eacute;

  • Accent grave :
    grave; : è = &egrave;

  • Accent circonflexe :
    circ; : ê = &ecirc;

  • Tréma : uml; : ë = &euml;

Il existe d'autres caractères spéciaux, les plus courants sont :


  • € = &euro;

  • © = &copy;

  • ™ = &trade;

  • < = &lt; : ne les remplacez que dans un texte, pas pour une balise.

  • > = &gt;

  • " = &quot; : ne les remplacez pas dans une balise.

  • & = &amp; : vous devez aussi remplacer ce signe dans une
    adresse web.



> Liste des caractères spéciaux



Vous venez d'étudier les bases fondamentales de la création de pages web.

Nous allons approfondir et alimenter notre liste de balises connues. Ces dernières vous
seront très utiles dans de nombreux cas. Il est assez important de les connaître.


> retour au sommaire

> voir la suite

Une page HTML


Nous allons maintenant pas à pas, concevoir notre première page web. Pour commencer, nous allons établir une structure très simple et la complexifier au fur et à mesure.


Je vous recommande de garder précieusement les pages que vous allez concevoir, elles
peuvent vous servir de modèle ou même être utilisées dans les autres cours (PHP notamment).


// Le DTD : DocType Definition

En premier lieu, il est obligatoire de définir le DocType (ou DTD pour DocType Definition).
Cette ligne de code sert à définir la version de HTML que vous utilisez pour coder votre site. Les versions que l'on peut trouversont souvent HTML 4 et XHTML.

Il existe trois DTD qui correspondent à trois déclinaisons de XHTML :

- Le XHTML Strict : n'autorise aucune erreur de code, néanmoins, c'est celui qui
donnera un résultat le plus proche du code, car l'interprétation sera, elle aussi, stricte. Cette variante n'autorise aucune balise de mise en page (comme <font>), uniquement les balises de structure.

- Le XHTML Transitional : ce code est plus permissif, il autorisera notamment
certaines balises de mise en page. Mais il faut essayer de l'éviter, car cette variante est vouée à disparaitre : elle est présente principalement pour faire la transition entre HTML 4 et XHTML plus facilement.

- Le XHTML frameset : cette variante est équivalente à Transitional, mais accorde
l'utilisation des balises Frameset. Ces frames (ou cadres) sont déconseillées, c'est pourquoi nous ne les traiterons pas dans ce tutorial.


Voici les trois doctypes : 


     1  XHTML 1.0 Strict :
     2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     3  XHTML 1.0 Transitional :
     4  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     5  XHTML 1.0 Frameset  :
     6  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Note : A partir de la version XHTML 1.1, il n'existe plus qu'un Doctype Strict.


     1  XHTML 1.1 :
     2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Nous préférerons le DTD XHTML 1.0 Strict ou le DTD XHTML 1.1.


// Les trois premières balises

Voici les trois premières balises présentes sur toutes les pages : 


   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2  <html>
   3    <head>
   4      <!-- contenu de la balise head -->
   5    </head>
   6
   7    <body>
   8      <!-- contenu de la balise body -->
   9    </body>
   10   </html>


la première des balises après le DTD est la balise qui entoure la totalité du
code : La balise <html>.

puis vient <head> : le contenu de ces balises ne sera jamais affiché à
l'écran. Dans ces balises, nous mettrons exclusivement des informations destinées à définir la page (son titre, ses mots clés pour les moteurs de recherche, ...).

c'est l'entête de la page (ou head en anglais...).
La balise <body> est celle dans laquelle nous passerons le plus de temps. En effet, c'est dans cette balise que l'on devra inscrire tout le contenu visible qui constitue le corps de la
page (body en anglais...).


// Les autres balises et attributs essentiels

Il y a quelques attributs à ajouter à la balise <head> :



  • l'attribut xmlns : cet attribut est
    obligatoire, il correspond à une norme
    XML. Cet attribut sert à
    donner l'adresse d'une page sur le fonctionnement du XHTML.

    On met toujours l'adresse d'une page précise du w3c, on la verra dans un
    prochain exemple.

  • L'attribut xml:lang : on indique dans quelle
    langue est rédigée la page. pour nous, sa valeur est "fr".


   1  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Entre les balises head, il faut mettre le titre de page que l'on mettra entre les balises title. 


   1  <head>
   2  <title>Titre de ma page</title>
   3  </head>


D'autres balises, appelées Meta-tags (ou meta, balises méta...), servent à definir les informations sur la page destinées aux navigateurs et aux moteurs de recherche.

Ces balises ont deux attributs :

  • name ou http-equiv
    : on définit le type d'information que l'on va préciser

  • content : contient la
    valeur de l'élément que l'on précise. 


   1  <meta name="keywords" content="mot clé, mot clé 2" />

Il existe un méta obligatoire : il contient des informations éssentielles pour la
page, comme le type de caractères utilisés (Français avec accents, anglais, ...).

Il se présente comme ceci : 


   1  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Pour faire simple, text/html indique au navigateur que le contenu du fichier est du texte, et que le langage employé est
html, et l'attribut charset indique les caractères utilisés (iso-8859-1 correspond aufrançais avec les accents "é è à"...).


// Notre structure de page est terminée

Nous avons donc programmé la structure d'une page html.

Ce qui donne au final :


    1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    3  <head>
    4  <title>Titre de ma page</title>
    5  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6  </head>
    7
    8  <body>
    9    <!-- contenu de la balise body -->
   10  </body>
   11  </html>


Précision : La balise commentaire, que l'on affiche : 


    1  <!-- Commentaire -->

sert à insérer dans le code des notes pour le webmaster, afin qu'il puisse mieux se
repérer dans son code. Les commentairesn ne sont pas lus par le navigateur, donc pas interprétés.

Cette structure n'affiche rien d'autre qu'un fond blanc, normal car nous n'avons rien
inscrit dans la balise body.

Nous allons maintenant voir comment structurer le contenu de notre page.


> retour au sommaire

> voir la suite

Introduction a la syntaxe : Un langage à balises


// Qu'est ce qu'une balise ?

Une balise commence par le signe < et se termine par le signe >.

Un exemple de balise : 


    1  < balise >

Il existe 3 types de balises :

les balises ouvrantes :


   1  <ouvrante>
   2  < [nom de balise] >

les balises fermantes : 


   1  </fermante>
   2  <  / [nom de balise]  >

le symbole / (slash), indique que cette balise est fermante.


et les balises qui se suffisent à elles-mêmes : 


    1  <balise />
    2  < [nom de balise] [un espace]  / >


on décrit le contenu avec une balise ouvrante et une balise fermante : 


    1  <paragraphe>
    2    le contenu de ce paragraphe
    3  </paragraphe>

On utilise une balise qui se suffit à elle-même dans le cas d'un élément particulier, une
image par exemple : 


    1  <image />

// Décrire et préciser cette balise

pour décrire la balise, on lui ajoute un attribut. 


   1  <balise attribut="valeur de l'attribut">
   2  < [nom de balise] [espace] [nom d'attribut] = " [valeur] " >

on peut mettre un nombre illimité d'attribut : 


   1  <balise attribut1="valeur1" attribut2="valeur2">
   2  [espace] [nom d'attribut] = " [valeur] "

par exemple :


   1  <citation auteur="Bernard Maingot">
   2      Parfois je balise avec le langage html ou les liens hypertextes.
   3  </citation>

// Bien hiérarchiser

Il est important d'utiliser les tabulations pour hiérarchiser son code. Un élément parent est
toujours plus près du bord de gauche qu'un élément enfant : 


    1  <parent>
    2    <enfant>
    3      Contenu
    4    </enfant>
    5  </parent>

Il y a quelques régles de syntaxe à respecter :

Il est interdit de faire chevaucher deux balises : 


    1  <balise1>
    2      <balise2>
    3  </balise1>
    4      </balise2>

est faux, 


    1  <balise1>
    2      <balise2>
    3      </balise2>
    4  </balise1>

est correct


> retour au sommaire

> voir la suite

Le W3 Consortium


Il existe un organisme qui fixe les normes et fait évoluer le HTML.
Cet organisme s'appelle le W3C (World Wide Web Consortium).

Vous pouvez suivre régulièrement les communiqués du W3C à cette adresse :
http://www.w3c.org/.

Vous pourrez faire valider vos pages web pour vérifier qu'elles sont aux normes
à ces adresses : - validateur HTML : http://validator.w3.org/
 - validateur CSS : http://jigsaw.w3.org/css-validator/

Les inconvenients des wysiwyg

Les wysiwygs (What You See Is What You Get : Ce que vous voyez est ce que vous
obtenez) sont des logiciels servant à générer automatiquement du code HTML en fonction de ce que l'utilisateur tape et met en forme dans une fenêtre de prévisualisation. L'utilisateur crée des pages web comme il ferait un document de traitement de texte.

Cette solution a un avantage (et peut-être le seul) : la simplicité. Mais aussi de
nombreux défauts. En effet, le code produit est généralement très lourd et mal construit, ce qui entraine des problèmes de respect des normes.

La lourdeur du code (évoquée plus haut) est un grand fléau : pour les petites
connexions, encore nombreuses, le chargement de la page peut devenir très long. Mais ceci cause aussi des soucis au webmaster : les hébergeurs limitant souvent le trafic en fonction de leurs
offres, plus la page est lourde, plus le nombre de visiteurs potentiels se réduit, car en effet, le quota de traffic se réduit plus vite. Il est donc important de réduire le poids de ses pages, images, etc...

Certains éditeurs de pages de ce type vont même jusqu'à produire un code compatible uniquement avec le navigateur associé (FrontPage et Internet Explorer pour ne pas les citer...).

L'utilisation de ces solutions "vite-faites" génère souvent des erreurs que les utilisateurs ne comprennent pas, erreurs graves mais très simples à corriger pourtant. Erreur que l'on évite forcément en codant soi- même les pages.
Vous l'aurez donc compris, il est fortement déconseillé de produire des pages avec ce type de logiciels et d'opter pour la seule solution efficace : la conception manuelle.


> retour au sommaire

> voir la suite

L'évolution d'internet, Pourquoi les normes ?

L'évolution d'internet, pourquoi les normes ?

Plus les technologies évoluent, plus les configurations des utilisateurs varient. Avec les déviances de l'évolution du HTML, chaque configuration est susceptible d'interpréter diffèremment chaque page.


Les normes ont été mises en place dans le but de créer un code permettant à tous de
pouvoir consulter les pages selon leur configuration. Ainsi, le contenu d'une page affichée sous par exemple Internet explorer, Mozilla ou Lynx (navigateur textuel) sera lisible. Le nombre de
visiteur potentiel est plus large.

C'est ce que l'on appelle "accessibilité" :

par exemple, avec un code aux normes, des outils synthétisant des voix sont capables de lire
le contenu des pages pour les personnes mal-voyantes.


Respecter les normes c'est à la fois permettre une pérénité de ces pages de manière ascendante et descendante.
Une page correctement construite permet à l'utilisateur d'un vieux navigateur de
voir tout le contenu, mais aussi, dans le futur, de permettre la consultation de cette page par un
navigateur respectant de plus en plus les normes.


> retour au sommaire

> voir la suite

Historique de l'HTML


Historique du HTML


// 1989 - 1992


HTML a été inventé pour le World Wide Web, afin de pouvoir écrire des documents hypertextes liant les différentes ressources d'Internet. En août 1991, lorsque Tim Berners-Lee annonce publiquement le Web sur Usenet, il ne cite que le langage SGML, mais donne l'URL d'un document ayant l'extension de fichier HTML.

Les premiers éléments du langage HTML sont le titre du document, les hyperliens, la mise en forme du texte en titres, sous-titres, listes ou texte brut, et un mécanisme basique de recherche par index. La description de HTML est alors assez informelle, elle est principalement définie par le support des divers
navigateurs Web contemporains.

// 1993

L'état de HTML correspond alors à ce que l'on pourrait appeler HTML 1.0. Il n'existe cependant aucune spécification portant ce nom, notamment parce que le langage était alors en pleine évolution. Un effort de normalisation était cependant en cours. À partir de fin 1993, le terme HTML+ sera utilisé pour désigner la version future de HTML.


Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures : l'invention de l'élément IMG permet d'intégrer des images (GIF ou XBM) aux pages Web (Mosaic 0.10) ; les formulaires rendent le World Wide Web interactif (Mosaic 2.0pre5).


// 1994

Avec l'apparition de Netscape Navigator 0.9 le 13 octobre, le support de nombreux éléments de présentation est ajouté : styles de texte, clignotement, centrage... Le développement de HTML
prend alors deux voies divergentes. D'une part, les développeurs de navigateurs s'attachent à maximiser l'impact visuel des pages Web. D'autre part, les concepteurs du Web proposent
d'étendre les capacités de description sémantiques (logos, notes de bas de page...) et les domaines d'applications (formules mathématiques, tables) de HTML. En ceci, ils suivent les principes de
SGML consistant à laisser la présentation à un langage de style. En l'occurrence, CSS est prévu
pour HTML.

Seul le support des tables est rapidement intégré aux navigateurs, notamment parce qu'il
permet une très nette élaboration de la présentation. Le manque de structure
du HTML alors mis en œuvre par Netscape Navigator, puis Microsoft Internet Explorer, est parfois dénoncé
comme étant de la « soupe de balises » (« tag soup » en anglais).


// 1995 - 1996

En mars 1995, le W3C nouvellement fondé propose le résultat de ses recherches sur
HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes.


Fin 1995, le RFC 1866 décrivant HTML 2.0 est finalisé. Ce document décrit HTML tel qu'il existait avant juin 1994, donc sans les nombreuses additions de Netscape Navigator.


// 1997

Le 14 janvier, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996, donc avec une partie des additions de Netscape Navigator et Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation.

Le 18 décembre, le W3C publie la spécification HTML 4.0 qui standardise notamment le support les styles, les cadres (frames) et les objets (généralisation des images et des applets).


// 1998 - 1999

La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n'apporte que des corrections mineures à la version 4.0.


// 2000 à nos jours

Le développement de HTML en tant qu'application de SGML est abandonné au profit de
XHTML, application de XML. La première étape est la spécification XHTML 1.0, publiée le 26 janvier 2000. Il s'agit d'une reformulation de HTML 4.01 basée sur XML au lieu de SGML. La seconde étape est la
spécification XHTML 1.1, publiée le 31 mai 2001. Il s'agit d'un classement des fonctionnalités de
XHTML 1.0 en modules. En outre les fonctionnalités de présentation et quelques redondances sont supprimées.


> retour au sommaire

> voir la suite




introduction

Dans ce tutorial, pas à pas nous allons apprendre deux langages informatiques complémentaires appelés HTML et CSS.

La création d'un site internet ne se fait pas simplement en tapant le contenu comme dans un logiciel de traitement de texte. Le concepteur doit indiquer au navigateur (Internet Explorer, Firefox...) à quoi correspond ce texte, lui indiquer comment le placer et le mettre en forme.

Afin de permettre au navigateur de comprendre ces informations, il faut utiliser un
langage informatique, une sorte de compromis entre le langage des hommes et le langage de l'ordinateur (composé uniquement de 0 et de 1)... La première moitié du travail, le travail du
concepteur de pages, est donc de créer la page avec ce langage compromis. Le navigateur, lui, aura pour tâche l'autre moitié du travail : transformer ce code en code ordinateur.

Nous allons, dans une première partie, traiter du code HTML. Ensuite parler de son lien avec les CSS pour ne pas trop nous embrouiller.

Le code html se traduit par HyperText Markup Language, qui signifie litéralement lagage hyper-texte à balises. Barbare...

Le langage HTML ne sert pas à mettre en forme réellement le contenu du site. Ce
code a pour vocation d'indiquer au navigateur quel type de contenu vous tapez : un paragraphe, une liste, une citation...


> retour au sommaire

> voir la suite


De HTML a XHTML


De HTML à XHTML


Le langage HTML est fondé sur le modè du langage à balise SGML.


Recemment, un nouveau format issu lui aussi du SGML est apparu, on le nomme XML. Ce langage permet de structurer et d'exprimer le type de donnée, comme le TML mais avec un gros avantage : celui de ne pas posséder de balises définies. Le concepteur est donc libre de nommer ces balises, de décrire le contenu qu'il veut.


Le XHTML n'est qu'une reformulation du HTML (en SGML) en XML. tout ceci dans le but
de conduire progressivement les webmasters à utiliser le XML à la place du HTML.


HTML




Introduction au XHTML/CSS re de ce tutorial sur le XHTML/CSS.

  • Chapitre 1 : La création de site internet se fait en html
  • Chapitre 2 : Les bases de l'HTML


    • Index


    --Apprendre le langage--


    HTML et CSS

    Inscription à : Articles (Atom)