Chapitres de cette page

Contenu ->

Page mise à jour le : 12-08-2015

Paragraphes
Mise en forme des caractères
Liens et ancres
Images
Tableaux
Formulaires
Cadres en ligne
Inclusion générique
A suivre...

HTML éléments du corps

Paragraphes (et titres)

Voici un exemple :

<h1>Ici un titre de niveau 1</h1>
<h2>Et celui-ci est de niveau 2</h2>
<h6>On ne dépassera pas le niveau 6</h6>
<p>Maintenant un paragraphe de texte (ordinaire)<br>
s'étendant sur deux lignes.
</p>
<ul>
<li>Ici est la 1° ligne d'une liste à puce</li>
<li>et la 2°</li>
</ul>
<ol>
<li>Maintenant une liste numérotée dont la 1° ligne</li>
<li>et la 2°</li>
</ol>

Les éléments "h1" à "h6" sont prévus pour les niveaux de titre.

L'élément "p" correspond à un paragraphe ordinaire;

Remarquons la balise "<br>" ou "<br />" qui produit un saut de ligne dans un paragraphe.

Les listes encadrées par "<ul> </ul>" pour une liste à puce et "<ol> </ol>" pour une numérotation automatique. Dans les deux cas les éléments de liste sont encadrés par "<li> </li>".

Bien évidement, les styles peuvent s'appliquer à ces balises afin de réaliser la mise en forme souhaitée.

Mise en forme des caractères

Pour quelques attributs...

Gras	<b> </b>
Italique	<i> </i>
Exposant	<sup> </sup>
Indice	<sub> </sub>
Affichage préformaté : les espaces multiples, tabulations et saut de lignes sont préservés	<pre> </pre>

L'élément "font", autrefois très utilisée, supporte des attributs affectant la police, la taille et la couleur des caractères. Cette utilisation est déconseillée par le W3C pour qui il vaut mieux utiliser les styles.

Lien et ancre

Les liens et les ancres sont définis tout deux par l'élément "a".

Le lien se distingue de l'ancre car sa balise possède l'attribut "href" indiquant la destination du lien. L'élément support du lien (texte ou image) est entre les deux balises.

L'ancre doit avoir un attribut "name" ou "id" afin de l'identifier depuis un lien.

Voici un exemple auto-commenté.

<a href= "../page/nouveau.html"> Lien relatif, interne au site </a>
<a href= "http://www.ce_site.com/page2.html"> Lien absolu pouvant être vers un autre site web</a>
<a href="#definitions">Lien vers un ancre de la page</a>
<a name="definitions">Définition de l'ancre</a>

Dans le cas d'un lien, si l'on souhaite que la nouvelle page s'ouvre dans une autre fenêtre on ajoute l'attribut "target" indiquant le nom de la fenêtre cible du lien. Si une fenêtre de ce nom (différent de "_blank") existe déjà, elle accueillera la page. Sinon, ou si le nom est "_blank", une nouvelle fenêtre (ou onglet) et créée.

<a href= "http://web.icioula.org" target="maFenetre">Autre</a>
<a href= "http://web.icioula.org" target="_blank">Nouvelle</a>

Images

Une image est mise en place dans la page par une unique balise <img>, il n'y a pas de balise de fermeture.

L'attribut "src" indique l'adresse de l'image.

On devrait toujours avoir un attribut "alt" indiquant un texte de remplacement pour les navigateurs n'affichant pas les images.

Les attributs "width" et "height" devraient être toujours précisés pour fixer la taille de l'image et éviter un changement de mise en forme de la page au chargement de l'image. Si possible donnez à ces attributs les valeurs du format exact de l'image dans le fichier.

Voici un exemple illustré :

Alpes

Tableaux

La définition d'un tableau utilise au moins trois éléments :

<table> </table> pour le tableau,
<tr> </tr> pour chacune des lignes,
<td> </td> pour chaque cellule dans la ligne.

A nouveau un exemple illustré et une explication de quelques attributs :

Haut gauche	Haut milieu	Haut droite
	Bas milieu	Bas droite

<table bgcolor="#CCFFFF" border="1" cellpadding="3" cellspacing="2" width="100%">
    <tr>
      <td width="100">Haut gauche</td>
      <td width="40%">Haut milieu</td>
      <td>Haut droite</td>
    </tr>
    <tr>
      <td></td>
      <td bgcolor="#FFCCFF">Bas milieu</td>
      <td>Bas droite</td>
    </tr>
</table>

Pour <table>

"bgcolor" indique la couleur de fond du tableau, ici bleu clair ;
"border" est l'épaisseur de la bordure en pixels ;
"cellpadding" donne les marges dans les cellules en pixels ;
"cellspacing" correspond à l'espace entre les cellules en pixels.
"width" est la largeur du tableau en pixels ou en pourcentage / page ;

Pour <td>

"width" est la largeur de la cellule en pixels ou en pourcentage / tableau ;
"bgcolor" est la couleur de fond de la cellule, ici rose ;

Il existe d'autres balises pour la configuration des tableaux, notamment pour définir les fusions de cellules et les lignes d'en-tête...

De même d'autres attributs sont disponibles, par exemple pour spécifier les alignements dans les cellules.

Formulaires

Les formulaires sont utilisés pour permettre aux utilisateurs d'entrer des informations.

Celles-ci seront traitées par des programmes (scripts) situés sur le serveur ou parfois dans la page en JavaScript. Cette gestion n'est plus du ressort de HTML.

Cependant la mise en place des formulaires fait bien partie de la page et donc s'exprime en HTML.

Définition d'un formulaire, élément 'form'

Le formulaire est défini encadré par le jeu de balises ' <form> ... </form>'.

L'attribut 'action' de cet élément indique le traitement à réaliser à la soumission du formulaire. Souvent, il s'agit de l'adresse d'une page qui contient le script de traitement.

Généralement on utilise aussi l'attribut 'method' qui indique la méthode de transmission des données du formulaire à la page de traitement.

method="get" indique que les données du formulaire seront transmises comme informations complémentaires dans l'URL de la page appelée.
method="post" dans ce cas les données du formulaire seront transmises de façon interne par le protocole "http".

Champs de formulaire

Voici un tableau des champs de formulaire possibles, notez que chaque élément doit avoir aussi un attribut 'name' sans quoi il ne sera pas possible d'exploiter le formulaire. On peut utiliser l'attribut "value=" qui donne une valeur à ces éléments.

On remarque que seuls les éléments 'textarea' et 'select' ont des balises de fermeture.

Balise d'élément	Exemple
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio" name="br" value="1"> <input type="radio" name="br" value="2" checked="checked"> <input type="radio" name="br" value="3">
<input type="submit">
<input type="reset">
<input type="file">
<input type="button">
<input type="hidden" value="secret">	Champ caché, il a une information qui n'est pas visible
<textarea cols="20" rows="2"> </textarea>
<select> <option value="1" > Valeur 1 </option> .... </select>

Des éléments de type "checkbox" peuvent avoir l'attribut 'checked=" checked" ' qui indique que la case est cochée d'origine

Tous les éléments de type "radio" d'un même groupe doivent avoir la même valeur d'attribut 'name' et disposer d'une valeur afin de pouvoir connaitre celui sélectionné.

Un élément de type "radio" doit avoir l'attribut ' checked="checked" ', il indique qu'il est sélectionné par défaut.

Dans le cas de l'élément 'select', l'exemple ci-dessus est pour une liste déroulante simple. Cette balise accepte des attributs qui modifient son apparence voire son comportement :

Attribut	Rôle
size="nombre"	La boîte de liste affiche nombre éléments;
multiple="multiple"	Il sera possible de sélectionner plusieurs éléments de la liste, en utilisant "Ctrl"+clic.

Un des éléments 'option' de 'select' peut avoir l'attribut ' selected= "selected" '. Il indique la sélection par défaut.

De plus, le jeu de balises '<optgroup>...</optgroup>' autorise les listes déroulantes à plusieurs niveaux.

  <select name="test" size="5" multiple="multiple">
    <optgroup label="chapitre 1">
      <option value="1-1">
        1- paragraphe
      </option>
      <option value="1-2">
        2- paragraphe
      </option>
    </optgroup>
    <optgroup label="chapitre 2">
      <option selected="selected" value="2-1">
        1- paragraphe
      </option>
      <option value="2-2">
        2- paragraphe
      </option>
    </optgroup>
  </select>

Cadres en ligne

L'élément <iframe> insère à cet emplacement un cadre qui contiendra une page HTML.

Voici un exemple :

L'attribut "src=" indique la page à afficher dans le cadre, "width" et "height" fixent sa taille (en pourcentage ou pixels), "Scrolling" concerne les barres de défilement et "frameborder" son encadrement.

L'information placée entre la balise d'ouverture et celle de fermeture est affichée si le navigateur ne gère pas cet élément;

Kompozer ne connait pas l'élément "iframe".

Inclusion générique

L'élément <object> insère à cet emplacement un contenu qui ne peut pas être traité par le navigateur lui-même mais par une application externe. Cet élément est souvent utilisé pour inclure dans la page un son, une vidéo, une application....

Malheureusement, ce fonctionnement est très dépendant de la configuration du système de l'utilisateur.

Exemple (si votre système est configuré pour lire les vidéos "Flash") :

<object type="application/x-shockwave-flash"
        data="http://web.icioula.org/player_flv_maxi.swf"
        width="240" height="180">
  <param name="movie"
    value="http://web.icioula.org/player_flv_maxi.swf" />
  <param name="FlashVars"
    value="config=http://web.icioula.org/pages/nichoir.txt" />
  <param name="wmode" value="transparent" />
  Votre système ne permet pas de lire cette vidéo
</object>

L'attribut "type=" indique le type de l'objet inclus.
"data=" est l'adresse de cet objet, on le retrouve aussi dans l'élément "param", dessous.. En l'occurrence, il s'agit du lecteur de vidéo.
On a aussi les attributs de taille d'affichage.

La série d'éléments "<param name='...' value= '...'>" donne des informations complémentaires sur la restitution.

La partie entre "<object>" et </object> sera utilisée si le navigateur est incapable d'utiliser cet objet.

Le cas des vidéos "Flash" est intéressant car ce n'est pas la vidéo qui est définie dans l'objet mais le lecteur.
On remarque que le paramètre "FlashVars" fait référence à un fichier texte. C'est lui qui contient les informations sur la vidéo (son nom de fichier) ainsi que sur l'apparence du lecteur.

Kompozer ne connait pas l'élément "object".

A suivre...

Pour approfondir, voici un site très bien documenté sur l'HTML (et le JavaScript)
SELFHTML : http://fr.selfhtml.org/index.htm

Ceux qui aiment la précision et ne sont pas rebutés par la documentation technique trouveront la traduction de la référence officielle du langage sur :
http://www.la-grange.net/w3c/html4.01/

Mais on peut passer à l'étape suivante qui consiste à rendre les pages HTML plus interactives en utilisant la programmation JavaScript
Le JavaScript