KoffeeWeb

Les bases et principales balises du XHTML

Schéma d'une page XHTML

[entête XML]
<html>
	<head>
	...
	</head>

	<body>
	...
	</body>
</html>

Les balises

Syntaxe

<element>contenu</element>
<elt1><elt2>contenu</elt1></elt2>
<element></element> équivaut à <element />

Les attributs

<element attribut1="valeur1">
contenu
</element>

Balises texte

<p> définit un paragraphe.
<h1> définissent des titres de section (headings). Ex:
CodeRésultat
<h1>Titre 1</h1>

Titre 1
<h2>Titre 2</h2>

Titre 2
<h3>Titre 3</h3>

Titre 3
<br /> force le retour à la ligne. nb: un retour à la ligne simple est interprété comme un espace.
<em> (emphasys) met en évidence une portion de texte.
Ex: Mise en évidence d'un texte.
<code> met en forme le texte pour l'insertion de code.
<pre> (préformaté) conserve la mise en forme du texte (espaces, retours à la ligne, tabulations...).

Balises de liste

<li> (list item) Item.

<ul> (unordered list) Liste non-ordonnée:

CodeRésultat 
<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
  • item 1
  • item 2
  • item 3


<ol> (ordered list) Liste ordonnée:

CodeRésultat 
<ol>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ol>
  1. item 1
  2. item 2
  3. item 3

Balises de liens

Balise <a> .
Attributs:
  • href : URL ou #nom_ancre.
  • name : nom de lien ou nom_ancre (Ex: "paragraphe1").
  • title : descriptif.
Ex: lien "retour au début":
CodeRésultat
<a href="debut" title="retour au début">Lien</a> Lien
<a name="debut" />
ou <h1 id="debut">Titre1</h1>		 Ancre de destination

Balises images

<img src="source" width="largeur" height="hauteur" alt="descriptif" />

Ex:
<img src="images/tasse.jpg" width="200" height="150" alt="Logo de KoffeeWeb!" />
Logo de KoffeeWeb!

Tables HTML

Balises: <table> tableau.
<caption> légende.
<tr> (table row) ligne.
<th> (table header).
<td> (table data) cellule.
Ex:
CodeRésultat 
<table>
	<tr>
		<td>Cellule1</td>
		<td>Cellule2</td>
	</tr>
	<tr>
		<td>Cellule3</td>
		<td>Cellule4</td>
	</tr>
</table>
Cellule1 Cellule2
Cellule3 Cellule4
Attributs de <table> :
  • border: bord des cellules.
  • cellspacing: espacement entre cellules.
  • cellpadding: espacement entre le texte et la bordure de cellule.
Attributs de <td> :
  • rowspan: fusion de lignes (nombre de lignes à fusinner en valeur)
  • colspan: fusion de colonnes (nombre de colonnes à fusinner en valeur)

boites HTML

Balises: <div> boite.

Les formulaires HTML

Balise <form> .
<form action="http://www.google.com/search" method="get">
...
</form>

Un formulaire contient:
  • Champs de saisie: champ texte, mot de passe.
  • Champs de sélection: listes, boutons et cases à cocher.
  • Champs de validation: boutons de validation et réinitialisation.

Champs de saisie

Mode de passe, texte ou fichier:
<input type="nom_type" name="nom_champ" value="valeur_par_défaut" />

Entrée texte:
CodeRésultat
type="text"

Entrée mot de passe:
CodeRésultat
type="password"

Entrée fichier:
CodeRésultat
type="file"

Zone de texte:
<textarea name="nom_champ" rows="nb_ligne" cols="nb_colonnes">
valeur par défaut
</textarea>
Ex:

nb: La fin de balise se trouve à la ligne car cela permet une entrée avec retour chariot.

Champs de sélection

Boite à cocher
CodeRésultat
<input type="checkbox" value="valeur1" name="nom_boite" />
Bouton radio
CodeRésultat
<input type="radio" value="valeur1" name="nom_bouton" />

Un seul bouton (ayant tous le même nom) peut être coché dans une liste. Ex:

CodeRésultat
<input type="radio" value="valeur1" name="liste" checked="checked" />
<input type="radio" value="valeur2" name="liste" />
<input type="radio" value="valeur3" name="liste" />


nb: Si l'attribut checked est présent, la boite ou le bouton sera coché par défaut.
Séparer la balise de début et de fin par un label pour intégrer à l'entrée. Ex:
CodeRésultat
<input type="radio">label</input> label

Champs de sélection

Listes déroulantes et défilantes
<select name="nom_liste" size="taille">
<option label="label1" value="value1">Valeur1</option>
<option label="label2" value="value2">Valeur2</option>
</select>

Liste déroulante: size="1"
CodeRésultat
<select size="1">
<option label="label1" value="value1">Valeur1</option>
<option label="label2" value="value2">Valeur2</option>
</select>

Liste défilante: size > 1
CodeRésultat
<select size="2">
<option label="label1" value="value1">Valeur1</option>
<option label="label2" value="value2">Valeur2</option>
<option label="label3" value="value3">Valeur3</option>
<option label="label4" value="value4">Valeur4</option>
</select>

nb: Pour les listes défilantes, l'attribut multiple="multiple" permet de sélectionner plusieurs valeurs.
l'attribut multiple ou checked seul, sont valides jusqu'à HTML 4.01.

Champs de validation

Bouton de validation et réinitialisation
Bouton de validation:
CodeRésultat
<input type="submit" value="nom_bouton" />

Bouton de réinitialisation:
CodeRésultat
<input type="reset" value="nom_bouton" />

Génération d'une URL avec paramètres

Exemple: google search: test
http://www.google.com/search?q=test
q=test: champ de formulaire envoyé par la méthode GET.
paramètres de formulaire:
  • Couple (nom, valeur)
  • 2 méthodes d'envoi: GET (encodage dans l'URL) et POST (encodage dans le flux vers le serveur)
Encodage par la méthode GET:
URL?nom=valeur&nom2=valeur2... (? : séparateur)
/!\ Nombre de paramètres limité par le navigateur avec GET (illimité avec POST).

Caractères spéciaux

&entité;

&nbsp; (non-breakable space) pour forcer un espace.
&lt; pour afficher "<".
&gt; pour afficher ">".
&amp; force l'affichage d'un "&".

Commentaires HTML

<!-- commentaire
bla
bla
-->

Séparateur (ligne horizontale)

CodeRésultat
<hr />

Exercice

Créer un formulaire de recherche Google:
Mots clés
Langue


Solution:
<form action="http://www.google.com/search" method="get">
<table>
<tr>
	<td>Mots clés</td>
	<td><input type="text" name="q" value="Recherche..." /></td>
</tr>
<tr>
	<td>Langue</td>
	<td>
		<select name="hl" size="1">
		<option value="fr">Français</option>
		<option value="en">Anglais</option>
		</select>
	</td>
</tr>
<tr>
	<td><input type="submit" value="Rechercher" /></td>
</tr>
</table>
</form>
N.B.: Ce cours est tiré du cours dispensé par Mr Charles KOLBOWICZ.