HTML : HyperText Markup Language
Liens hypertextes
Langage à base de balises
XHTML (the eXtensible Hyper Text Markup Language) 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. signifie langage de balisage hypertexte extensible.
Elément : nom, notion abstraite
Ex. Document html : html
Balise : forme concrète d’un élément
Ex. de balise ouvrante : <html>
Ex. de balise fermante : </html>
Attribut : propriété d’un élément (nom, valeur)
EX. <html xmlns="[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
Cette ligne de code sert à définir la version de HTML utilisée pour coder le site.
<html xmlns="[Link] xml:lang="fr">
L'attribut xmlns : attribut 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.
L'attribut xml:lang : on indique dans quelle langue est rédigée la page. pour nous, sa valeur
est "fr".
<head>
<!-- En-tête (note : ceci est un commentaire) -->
<!-- Jeu de caractères accentués -->
<meta http-equiv="Content-Type" Content="text/html; charset=iso-8859-1" />
<!-- Titre -->
<title> Exemple de page XHTML </title>
<!-- Autres métadonnées -->
<meta name="Author" content="Kaghat" />
<meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page XHTML" />
</head>
<body>
<!-- Corps du document -->
<h1>1. Documentation du Produit</h1>
<h2>1.1. Spécificité</h2>
<p>
Un premier paragraphe
</p>
<h2>1.2. Fonctions avancées</h2>
<p>
Un deuxième paragraphe
</p>
(Séparateurs :Retour à la ligne (sans espace) : <br /> , Ligne horizontale : <hr />)
<a href="[Link] site officiel de PHP</a>
Définition dans une page : attribut id
Ex. <h1 id="menu">MENU</h1>L’attribut id Permet d'affecter à une balise, un identifiant
unique au document.
Référence depuis la même page
Ex. <a href="#menu">Aller au menu</a>
Référence depuis une autre page
Ex. <a href="[Link]#menu">retour menu</a>
<img src="URL" alt="description" />
Listes ordonnées et non ordonnées
<ol> Listes numérotées
<li>1er élément</li>
<li>2ème élément</li>
<li>3ème élément</li> e
</ol> ou <ul> Listes à puces ou <dl> Liste de définitions : <dt>(Definition list).et <dd> (pour
definition definition...).
<ul>
<li>Elément non ordonné 1
<ol>
<li>Sous-élément ordonné 1.1</li>
<li>Sous-élément ordonné 1.2</li>
</ol>
</li>
<li>Elément non ordonné 2</li>
</ul>
<table>
<caption>Mes totaux</caption> titre
<tr>
<th>Jour de la semaine</th><th>Montant</th><th>Total</th> cellule d’en-tête
</tr> ligne
<tr>
<td colspan="2">Lundi</td><td>456 dirhams</td><td>456 dirhams</td> cellule normale
</tr> la cellule s’étend sur n celluel
<tr>
<td rowspan="2">Mardi</td><td>200 dirhams</td><td>656 dirhams</td>
</tr> la cellule s’étend sur n lignes
</table>
</body>
</html>
Informations qui ne sont pas affichées mais qui sont utilisées à des fins diverses.
Titre : <title>… </title>
Métadonnées : < meta />