Présentation d’une page WEB
Introduction
Un site WEB est composé de pages écrites en langage (X)HTML (eXtensible Hyper Text Markup Language). La différence entre HTML et XHTML se fait sur la syntaxe beaucoup plus rigide du XHTML, visant à plus de compatibilité entre les différents navigateurs web (Firefox, IE, Konqueror, Safari…) qui interprètent le code. En effet, actuellement chaque navigateur ne proposera pas le même rendu pour un code identique. On peut créer des pages web avec n’importe quel éditeur de texte, à condition de les enregistrer avec une extension .html
Les Balises
Une page (X)HTML (code source) contient des balises et du texte. Les balises encadrent le texte et permettent définir ce qui sera affiché dans le navigateur : texte, liens, images… (sans se soucier de la mise en forme)
Les balises se présentent sous la forme . En XHTML (plus qu’en HTML) il est nécessaire de fermer les balises. On pourra différencier deux types de balises.
Les balises qui fonctionnent par paires
Ouverture par la balise <nom_de_la_balise>, fermeture par la balise </nom_de_la_balise>
Exemple : la balise de délimitation de paragraphes
Les balises qui n’ont pas de paire
Pour fermer ce type de balise, il faut simplement rajouter / (espace,slash) à la fin de la balise
Exemple : la balise d’insertion d’images.
<img src="img/monImage.png" alt="" /> Les noms des balises sont à saisir en minuscule, donc pas de <BODY> mais <body>
Les balises peuvent bien entendu s’imbriquer les unes dans les autres, cependant il faut veiller à bien les refermer dans l’ordre inverse de l’ordre d’ouverture…
Exemple :
Structure d’une page
Ces balises encadrent l’ensemble de la page web.
Ensuite la page se divise en deux parties : l’entête et le corps de la page.
Ces balises délimitent l’entête du document. On y trouve plusieurs autres balises :
Titre du document qui apparaît dans le bandeau supérieur (bleu) du navigateur
<meta name="keywords" content="motclé1, motclé2, ..." />
<meta name="description" content="description du contenu de la page..." />
<meta name="author" content="auteur" /> NB : les balises meta sont notamment utilisées pour le référencement du site…
Ces balises délimitent le corps du document, ce qui sera visible à l’écran.
Les attributs des balises
NB : auparavant le contenu était mis en forme directement en HTML. Maintenant la mise en forme du contenu se fait avec le language CSS
Les attributs vont donner des précisions, particularités aux balises.
Exemple : si on reprend l’exemple de la balise d’insertion d’images.
<img src="img/monImage.png" alt="" /> l’attribut src dont la valeur est égale à img/mon_image.png indique que l’image à insérer se trouve dans le répertoire « img » et que le nom de l’image est « mon_image.gif »
Les attributs et leur valeur sont à écrire en minuscule, donc pas de 
mais 
Définition du type de document
Il y a 2 version de XHTML
Transitional : version de transition plus permissive
< !DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
Strict : version rigoureuse (balises de mise en forme interdites, ex : font, center…)
< !DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
Page XHTML minimale
< !DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Bienvenue sur mon site !
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
un paragraphe...
</body>
</html>
)
