Rechercher
Boîte à outils
LANGUAGES

HTML

De Wiki_Libre

Cette page regroupe une liste non exhaustive de balises XHTML :

Sommaire

Balises principales

<html>

Code HTML avec 2 attributs :

  • xmlns : liste des balises html existentes
  • xml:lang : langue du site web
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"></html>


<head>

En-tête de page


<body>

Corps de la page


Code minimal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>


Balises d'en-tête

<title>

Titre de la page

<style>

Insérer du code

<style type="text/css">
   /* Code CSS */
</style>


<script>

Insérer un script


<meta>

Propriétés de la page avec ces attributs :

  • author : auteur de la page
  • description : description de la page
  • keywords : mots-clés
  • reply-to : adresse de contact
  • pragma : mise en cache
  • content-type : table des caractères
  • refresh : rafraîchissement de la page
 <meta http-equiv="pragma" content="no-cache" />  <!-- empêche la mise en cache-->
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="refresh" content="10; URL=http://www.monsite.com" /> <!-- rafraîchit /10s -->


<link>

Relation entre un lien et une ressource

  • feuille de style
<link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />
  • page d'accueil
<link rel="start" title="Accueil" href="index.html" />
  • page d'aide
<link rel="help" title="Politique d'accessibilité" href="accessibilite.html" />
  • fil RSS
<link rel="alternate" type="application/rss+xml" title="News de mon site" href="news.xml" />
  • icône du site
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />


Balise de Structuration de texte

<p>

Insérer un paragraphe


<br />

Retour à la ligne


<a>

Insérer un lien hypertexte

  • lien externe (absolu)
<a href="http://www....fr"> nom du site</a>
  • lien interne (relatif)
<a href="cible.html"> cible</a>
  • info bulle
<a href="http://www....fr" title="bienvenue sur ce site"> nom du site</a>
  • envoyer un mail
<a href="mailto:nom@domaine.fr"> nom</a>
  • ancre
<h1 id="partie1"> Partie 1</h1>
  • lien vers ancre
<a href="#partie1"> aller à la partie 1</a>
  • lien vers une ancre d'une autre page
<a href="page2.html#partie1"> aller à la partie 1 de la page 2</a>
  • lien à partir d'une image
<a href="http://www...fr"><img src="../images/guitare.jpg" alt="gibson" title="ca donne envie hein?"/> </a>


<img />

  • src : chemin de l'image
  • alt : texte alternatif
<img src="../images/photo1.jpg" alt="photo de vacances" />


<h1>

Titres de T1 (grand) à T6 (petit)


<em>

Mise en valeur faible


<strong>

Mise en valeur forte


<sub>

Mise en indice


<sup>

Mise en exposant


<q>

Citation courte


<cite>

Citation moyenne


<blockquote>

Citation importante


<acronym>

Créer un acronyme

<acronym title="Extensible HyperText Markup Language"> XHTML</acronym>


<hr />

Ligne horizontale


<address>

Définir l'adresse d'un auteur


<del>

Barrer un texte


<ins>

Indiquer un texte inséré (souligné)


<dfn>

Donner une définition d'un terme


<kbd>

Indiquer ce que doit taper le lecteur


<pre>

Préformater le texte (conserver le code tapé)


Balises de listes

<ul>

Créer une liste à puces non numérotées


<ol>

Créer une liste à puces numérotées


<li>

Elément de la liste à puces (puce)


<dl>

Créer une liste de définitions


<dt>

Terme de la liste de définitions


<dd>

Définition du terme de la liste de définitions


Balises de tableau

<table>

Insérer un tableau


<caption>

Donner un titre à un tableau


<tr>

Créer une ligne du tableau


<th>

Créer un en-tête de tableau


<td>

Créer une cellule du tableau


<thead>

Permet d'insérer l'en-tête du tableau


<tbody>

Permet d'insérer le corps du tableau


<tfoot>

Permet d'insérer le pied du tableau


<colspan>

Fusionner en ligne


<rowspan>

Fusionner en colonne


Balises de formulaire

<form>

Insérer un formulaire, 2 attributs :

  • method : envoi de données (post)
  • method : adresse de la page ou du programme qui va traiter les données (php)
<form method="post" action="traitement.php"></form>


<fieldset>

Organiser le formulaire en plusieurs zones


<legend>

Titre d'une zone dans le formulaire (à utiliser avec <fieldset>)


<label>

Titre d'un élément de formulaire (zone de texte) avec l'attribut :

  • for' : lier avec une autre balise
<label for="pseudo"> Votre pseudo</label>  : <input type="text" name="pseudo" id="pseudo" />


<input>

Champ de formulaire. L'attribut "type" permet :

  • zone de texte d'une ligne
<input type="text" name="pseudo" id="pseudo" />
  • mot de passe
<input type="password" name="pass" id="pass" />
  • envoi de fichier
<input type="file" name="file" id="file" />
  • case à cocher
<input type="checkbox" name="choix1" id="choix1" />
  • bouton d'option
<input type="radio" name="continent" id="Europe" />
  • bouton d'envoi
<input type="submit" />
  • bouton de remise à zéro
<input type="reset" />
  • champ caché
<input type="hidden" />


<textarea>

Taille définissable par le CSS ou par les attributs :

  • rows : nombre de lignes
  • cols : nombre de colonnes

<select>

Liste déroulante

<select name="prenoms">
<option value="isabelle">Isabelle</option>
<option value="bob">Bob</option>
<option value="franck">Franck</option>
</select>

<option>

Elément d'une liste déroulante


<optgroup>

Groupe d'éléments d'une liste déroulante

<optgroup label="noms">
</optgroup>

Balises génériques

<span>

Permet de baliser un texte qui ne possède pas sa propre balise au sein d'une balise block (inline) 3 attributs :

  • class : nom de la classe CSS
  • id : nom unique de la balise
  • style : insérer le CSS dans le code XHTML


<div>

Permet de baliser un texte qui ne possède pas sa propre balise (block)


autres

  • <!-- --> : commentaire
  • & amp; : &
  • & lt; : <
  • & gt; : >
  • & nbsp; : espace

Note  : il n'y a pas d'espace entre le & et le reste