Page HTML

Structure d'une page

La structure d'une page HTML devrait être celle-ci:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
   	<title>Le titre de votre page</title>

		<link rel="stylesheet" type="text/css" href="MonStyle.css">
		<script type="text/javascript" src="../ScriptsJS/MonScript.js"></script> (ou idem mais pour vbscript par exemple) et/ou (attention, à éviter comme la peste)
		<script language="javascript"> ou <script language="VBScript"> ou autres... >

			... Fonctions JavaScript ... ou suivant VBSCRIPT (pourquoi pas...) ou autres ...

 		</script>
	</head>
	<body>

		... corps du document ...

	</body>
</html>

Document Type Definition (DTD)

Lorsque vous créez une page, il y a une ligne à ajouter au tout début du fichier:Il s'agit de la déclaration de type du document (également nommée "doctype"):

Cette ligne va permettre d'indiquer à quelles règles d'écriture obéit le code d'une page aux validateurs (X)HTML comme le validateur W3C. Pour le commun des mortels, elle ne sert théoriquement à rien...

Mais, les navigateurs utilisent aussi cette ligne comme astuce pour différentier les anciennes pages internet des pages actuelles. En effet, lorsque les navigateurs sont apparues, il arrivait très souvent que ceux-ci n'interprètent pas de la même manière une page (X)HTML. De plus, ces navigateurs pouvaient utilisées des balises propriétaires. Cela rendait incompatible les navigateurs ! De nos jours, les navigateurs sont donc obligés d'essayer d'interpréter au mieux ces pages (X)HTML afin de permettre leur affichage à l'écran. Cependant, les pages actuelles respectant bien mieux les normes, il n'est alors plus nécessaire de mettre en oeuvre des usines pour afficher leur contenu. Les navigateurs pour déterminer qu'une page est ancienne ou moderne utilise alors cette ligne pour switcher dans tel ou tel mode : c'est le doctype switching.

La ligne à mettre au début du fichier est la suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "la règle...">

Cette ligne indiquant simplement que ce fichier est un fichier HTML dont la version utilisée est la 4.01.

La commande Transitional//EN indiquant la langue utilisée pour développer cette page: Ici l'anglais. Il ne faut pas confondre avec le contenu de votre fichier (qui lui sera certainement en français) et le HTML qui utilise bien l'anglais comme nom pour ses balises.

"la règle...": qui peut prendre une des valeurs suivantes: 3 DTD existent pour le HTML:

- Strict DTD : DTD Stricte (respect du HTML 4.01)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> ou

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

- Transitional DTD : DTD transitionnelle (autorisant l'usage des balises obsolètes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

- Frameset DTD : DTD supportant les frames (autorise l'emploi des frames dans la page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Du HTML

la balise <html> (n'oubliez pas </html>) est un élément dit structurel. Elle n'est pas une balise obligatoire, mais il est préférable de la mettre. Elle indique simplement au navigateur que le contenu du fichier et bien du HTML.

L'entête

la balise <head> (</head>) est un élément dit structurel. C'est ici que vous pourrez définir le titre de votre page, le fichier CSS à utiliser ou les scripts comme javascript

Le titre

La balise <TITLE> (</TITLE>) permet de donné un titre à votre document HTML qui sera affiché dans la barre de titre de votre navigateur. Si elle n'est pas renseignée, le navigateur lui en attribuera un automatiquement. Elle ne peut se mettre que dans le bloc HEAD et doit être unique. Le titre étant un texte compris entre la balise de début et de fin, vous pourrez aussi insérer les caractères spéciaux...

Emplacement des ressources comme le CSS

La balise <link> et </link> permet d'indiquer l'emplacement d'une ressource. Particulièrement utilisée pour définir une feuille de style (ou css), la syntaxe est alors la suivante:

où seul le contenu de href sera modifié pour indiquer l'emplacement du fichier css.

Les scripts

Il s'agit d'une balise particulière permettant d'insérer des scripts autres que du HTML. Par exemple JavaScript ou VBSCRIPT.

Elle est donc expliquée dans les chapitres concernées. Si vous êtes débutant en HTML, ne regardez pas tout de suite cette balise...Entrainez vous d'abord avec simplement le HTML !

Il fortement conseillé de ne pas mettre de script directement dans un fichier HTML (risque de perdre le code en intervenant sur le fichier HTML), mais de passer plutôt par un fichier intermédiaire (sorte d'include). C'est même carrément interdit en XHTML (strict) ou HTML 4.01 strict.

Le corps du document

La balise <body> (</body>) est un élément structurel et va contenir tous ce qui va permettre d'afficher du texte, des images, des liens, ...

Les attributs qui pouvaient exister pour cette balise ne sont plus vraiment utilisées. Remplacés par en autre la feuille de style.

L'arrière plan

Il est possible de définir la couleur ou une image de fond, ... sur une page web.

Par exemple, vous utiliserez l'attribut background-color à la balise <body> en passant par un fichier CSS:

body {

background-color:#B3B3FF

}

Avant le HTML 4.01, vous pouviez trouver ceci - Evidemment à éviter:

<body bgcolor="#B3B3FF"> en indiquant alors les niveaux de RVB en hexadécimal.

<body style="background-color: rgb(255, 179, 255)">

<body style="background-image:url(arrplan.jpg)"> pour mettre une image en arrière plan (voir exemple)

On peut aussi trouver des pourcentages de RVB...