Cours de (X)HTML / CSS

Les éléments de l'en-tête

Ces éléments doivent se trouver dans l'en-tête du document HTML (entre <head> et </head>). L'élement <script> peut aussi se trouver parfois dans le corps du document.

<title>

Donne un titre à la page.
Cet élément est obligatoire.

Exemple :

<title>PISE. Page d'accueil</title>
Haut de page

Eléments <meta /> principaux

Tous les éléments meta sont constitués de l'attribut name ou http-equiv et de l'attribut content.

http-equiv="Content-Type"

Indication du type de fichier et du jeu de caractères correspondant à l'encodage du document.
Les 3 principaux charset utilisés en France : iso-8859-1 (appellé Latin-1, correspondant à l'Europe occidentale), iso-8859-15 (proche de iso-8859-1 avec en plus les caractères € et œ), utf-8 (Unicode, comprend théoriquement tous les caractères).
Cet élément est obligatoire.

Exemple :

<meta http-equiv="Content-Type" Content="text/html; charset=iso-8859-15" />

name="author"

Indication du nom de l'auteur du document HTML.

Exemple :

<meta name="author" content="Jean Dupont" />

name="keywords"

Indication de mots-clés pour le document HTML, censée améliorer le référencement du site. Les mots ou expressions doivent doivent être séparés par une virgule.

Exemple :

<meta name="keywords" content="chaise, table, armoire à glace, vente, achat." />

name="description"

Donne une courte description de la page et / ou du site. Cette expression est généralement reprise dans l'affichage des résultats des moteur de recherche. Son utilisation est donc fortement recommandée.

Exemple :

<meta name="description"  content="Site de vente de meubles." />
Haut de page

Eléments <meta /> secondaires

Il existe de nombreuses autres types d'éléments meta (name="Reply-to", name="Copyright", name="Indentifier-URL", name="Date",...). Par exemple, sur le site Web Rank Info, on peut trouver un Guide des balises meta pour le référencement.

Haut de page

Etablit des liens entre le document HTML et un document externe associé à la page, en particulier les feuilles de style (extension ".css").

Attributs : href (obligatoire, URL de la ressource externe), rel (obligatoire , indique le nom de la relation : stylesheet, ...), type (de ressource : css,... ), media (indique le type de media de sortie : all, screen (écran), print (impression), ...).

Exemples :

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="impression.css" media="print" />
Haut de page

<script>

Sert à inclure du script, généralement Javascript, dans la page.
Le texte présent à l'intérieur des balises <script> et </script> n'est pas du (X)HTML.
Il est recommandé de placer le contenu dans des fichiers externes.

Attributs : type (famille du langage de script), version (version du langage de script), src (URL de ressource externe)

Exemple :

<script type="text/javascript" language="javascript1.2">
<!--
function bonj(){
	alert('Bonjour !');
}
//-->
</script>
<script type="text/javascript" src="librairie1.js"></script>
<script type="text/javascript" src="librairie2.js" />
Haut de page

<style>

Sert à inclure des feuilles de style css dans la page.
Le texte présent à l'intérieur des balises <style> et </style> n'est pas du (X)HTML.
Il est recommandé de placer le contenu dans des fichiers externes.

Attributs : type (obligatoire : text/css pour des styles CSS), media (indique le type de media correspondant : all, screen (écran), print (impression), ...)

Exemple :

<style type="text/css">
body {
	color:red;
}
</style>
Haut de page