La grammaire de base
Quelques règles de conduite
- Une page HTML est constitué de texte, délimité par des balises
- un commentaire HTML s’écrit avec les caractères ‘<!– ‘ et ‘–>’ :
<!– mon commentaire ici –> - Chaque balise est encadrée par des caractères obligatoires « < » et « > »:
« <BODY> » « <HEAD> » « <TABLE> » ou « </B> » - chaque balise peut être écrite avec des majuscules ou des minuscules
- certaines balises (pas toutes) peuvent être personnalisées avec un ATTRIBUT optionnel. La syntaxe est la suivante : <NOM_BALISE NOM_ATTRIBUT = « valeur »> :
<BODY BACKGROUND= »jennifer.jpg »>
ici la balise est ‘BODY’, l’attribut est « BACKGROUND » et a la valeur jennifer.jpg. - Les balises vont en général par paire. Une balise de début, une balise de fin. Cette dernière commence par un « / » :
<BODY> et </BODY>
<TABLE>et </TABLE>
<HEAD> et </HEAD>
entre les deux on met du texte et éventuellement d’autres balises… - on peut imbriquer hiérarchiquement des balises, mais pas les intercaler
<balise1>…<!– début balise 1 –>
<balise2>…<!– début balise 1 –>
</balise2>…<!– fin balise 2 –>
</balise1>…<!– fin balise 1 –>
est correct car la paire de balises 2 est imbriquée entièrement � l’intérieur de la paire de balises 1. Le code suivant est par contre incorrect
<balise1>…
<balise2>…
</balise1>…
</balise2>
- une page DOIT commencer par lla balise <HTML>� et finir par la balise </HTML>
- une page DOIT contenir 2 parties dans l’ordre :
– l’entête (ou HEAD) qui contiendra des informations plus ou moins cachées, comme le titre de la page, des descripteurs du documents, etc.
– et la partie principale ou corps (BODY) qui contiendra ce qu’on verra effectivement dans le navigateur. - On peut mettre plein d’espace entre les mots d’un document HTML, ils sont ignorés.
De même, les sauts de lignes et les retours � la ligne dans le texte (touche ‘ENTER’ du clavier) sont ignorés éga lement.
Par exemple
<HTML>
<BODY>
bonjour
cher
ami
</BODY>
</HTML>
donnera exactement le même résultat que :
<HTML>
<BODY> bonjour cher ami <BODY>
</HTML>
notes :
– on peut mettre � peu près n’importe quel texte entre 2 balises HTML, mais il faut quand même prêter une attention particulière aux caractères spéciaux, comme les caractères accentués ou les caractères ‘<‘ et ‘>’ utilisés eux-mêmes dans les balises : voir le chapitre sur les jeux de caractères et les entités, pour plus d’information
– certaine balises unitaires n’ont pas au départ de balises de fermeture </…> correspondante. Une� notation spéciale permet d’ouvrir et de fermer une balise unique, et de rester ainsi conforme aux spécifications XHTML.
on a ainsi :
<BR /> (qui remplacerait un hypothétique <BR></BR>)
<HR />
<IMG …/>
La plus petite page qu’on puisse faire, avec juste UNE lettre par exemple, s’écrira comme ca en HTML :
<html>
<head>
</head>
<body>
A
</body>
</html>
Ca affiche cela (remarquez le titre de la fenêtre) :
cette page est correcte. Elle obéit aux règles de grammaire qu’on vient de dire. Elle permet juste d’afficher « A » dans un navigateur…;-(
remarque : ceratins navigateurs supportent qu’on omette la partie HEAD, on aurait donc pu faire une page HTML encore + petite…, mais il est intéressant de mettre un titre. Il apparaitra dans la barre en haut de la fenêtre du navigateur, et pourra aussi servir aux moteurs de recherche (google, yahoo ou autre)
Une page avec des liens
Dans les 2 pages vues précédemment il y avait juste du texte et une image et pas de « lien » ou autrement dit de zone sur laquelle on pouvait cliquer pour accéder � une autre ressource.
Les liens cliquables sont la base de la navigation HYPERTEXTE sur le web !
Pour rajouter un lien on a une balise spéciale qui s’appelle une ancre, dans laquelle on mettra du texte ou une image : <A href=…> …</A>
L’attribut « HREF » est très utile puisque c’est lui qui va dire où on va quand on clique sur le lien.
exemple
<html>
<head>
<title>ma page avec 2 liens </title>
</head>
<body>
Pour aller sur la deuxieme page, qui se trouve au même endroit (dans le même dossier du serveur) que celle-ci, <BR>
<A href=page2.htm> cliquer sur ce lien </A>
<BR><BR>
On peut aussi se servir d’un lien qui parle de lui même et accéder � une page externe sur le net. Auquel cas on utilisera le protocole http, avec l’URL complet du site.
<BR>On peut par exemple
<A href=http://dd.estsurinternet.com> aller sur le site Internet de DD</A>
</body>
</html>
A l’écran cela nous donne …
remarque : on ne met entre les 2 balises <A…> et </A> que la partie ‘cliquable’ du texte
une page avec des images
Pour insérer des images on utilise la balise <IMG> avec un certain nombre d’attribut. Au minimum l’attribut SRC qui précise où trouver l’image, qui peut être comme pour les liens locale ou distante.
<IMG src= »mon_image.jpg »>
<IMG src= »http://serveur_exterieur.domaine.fr/images/autre_image.jpg>
Seul l’attribut « SRC » est obligatoire pour définir l’image mais d’autres peuvent être utiles:
NAME="le nom_de_l’image"sa largeur en pixel
WIDTH=""sa hauteur
HEIGHT=" en pixel"commentaire alternatif
ALT=""l’épaisseur de la bordure
BORDER=" (0,1,...)"son alignement
ALIGN=" (LEFT, RIGHT, CENTER)" L’image peut être cliquable, il suffit pour cela de l’inclure entre les 2 balises <A..> et </A> vues précédemment.
<html>
<head>
<title>ma troiseme page </title>
</head>
<body>
l’image suivante est statique et est stockée sur un site distant<BR>
<IMG src= »http://didier.deleglise.free.fr/images/dad.jpg »>
<BR><BR>
On peut aussi cliquer sur une image locale pour aller sur le site � DD…
<A href=http://dd.estsurinternet.com>
<IMG src= »/images/uploads/mum.jpg » >
</A>
<BR><BR>
Cette dernière image utilise un certain nombre d’attributs spécifiques
<IMG src= »/images/mum.jpg » WIDTH= »100″ HEIGHT= »100″ BORDER= »1″>
</body>
</html>
sur ce dernier exemple l’image est redimensionnée, quelle que soit sa taille d’origine, au format 100×100 pixels et est entourée par un cadre de 1 pixel de large !
et maintenant à vous ! vous pouvez lors de ce premier exercice : créer votre page HTML