[xhtml]
[La base d'une page HTML]
les balises
En HTML, chaque instruction est composée d'une balise entrante, et d'une balise sortante.
exemple, la balise "p" qui désigne un paragraphe :
<p>Ceci est un paragraphe</p>
Chaque balise est encadrée par < et >
La balise sortante est précédée par le signe /
Les balises doivent être écrites en caractères minuscules.(elles sont écrites en majuscule dans ces pages pour des raisons de lisibilité).
Les balises HTML, TITLE, HEAD et BODY :
Il existe quatre balises essentielles :
- HTML = précise que c'est un document html.
- TITLE = affiche le nom de la page en haut de la fenêtre du navigateur.
- HEAD = délimite l'en-tête du document (qui contient des informations diverses).
- BODY = délimite le corps du document (qui contient le texte, les images, etc.).
Pourquoi un DOCTYPE ?
Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web.
Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE.
Les DOCTYPEs sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux normes, comme Mozilla, IE5/Mac, et IE6/Win.
Un DOCTYPE récent qui inclut une URI complète (une adresse web complète) commande à ces navigateurs d'afficher votre page en utilisant le "mode conforme" (NdT : "standard-complient mode" , vous pouvez retomber souvent sur le terme), traitant ainsi votre (X)HTML, CSS, et DOM de la manière que vous voulez.
La DOCTYPE ecrite ici sur deux lignes, ne doit être écrite que sur une seule ligne dans votre document pour être valable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
La balise HEAD :
Les informations qu'elle contient sont lues en premier pour afficher la page.
Quand on débute, il n'est pas nécessaire de s'intéresser au contenu de la balise HEAD.
On peut passer directement au contenu de la balise BODY (voir plus bas).
La balise HEAD contient essentiellement :
- des balises META,
- du code JavaScript,
- des références aux feuilles de style.
<head>
Les balises META :
Elles contiennent des informations sur le contenu de la page
Elles sont destinées essentiellement aux moteurs de recherche qui indexent les sites web.
Elles permettent de :
- donner des informations sur l'auteur, la langue utilisée,
- donner des informations sur le contenu de la page,
- donner des indications aux robots qui parcourent les sites.
Les balises META sont de différentes sortes :
Informations sur la nature du document, les caractères utilisés, l'auteur, la langue.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="votre nom" / >
<meta http-equiv="language" content="fr" />
Informations sur le contenu de la page :
<meta name="description" content="Le contenu de mon site / >
Les mots clefs séparés par une virgule
<meta name=Keywords" content="mot clef1,mot clef2,mot clef3" / >
Informations destinées aux robots :
<meta name="robots" content="index,follow" />
La balise BODY :
La balise BODY contient le code HTML de tout ce qui s'affiche à l'écran : textes, images, tableaux, liens hypertexte.
C'est là que se situe le véritable travail sur une page web
Composition d'une page web :
- le fond de page,
- le texte,
- les images,
- les liens hypertextes,
- les tableaux.
Le code de base :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<lttitle>le titre </title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="mot clef1,mot clef2,mot clef3" />
<meta name="robots" content="index,follow" />
</head>
<body>
<div id="global">
<div id="bandeau">
bandeau
</div>
<div id="menu">
menu
</div>
<div id="contenu>
<h1>accueil</h1>
<h2 class="titre">paragraphe 1 </h2>
<p>paragraphed</p>
<p>paragraphe</p>
<h2 class="titre">paragraphe 2</h2>
<p>paragraphe</p>
<p>paragraphed</p>
</div>
<div id="pied">
pied
</div>
</div>
</body>
</html>
