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