Tous les documents des pages Web HTML commenceront par la balise de début <HTML> et se termineront par la balise de fin </HTML>.
N'oublions pas la balise de la première ligne de début du document type qui doit commencer comme ceci <!doctype HTML> et qu'on verra les explications par la suite de nos leçons.
La structure de premier niveau du document aura donc la forme suivante :
<!DOCTYPE HTML> (1ère ligne)
<HTML>
Corps du document
. . .
</HTML>
Aperçu du premier niveau. Vous verrez une page blanche qui n'a pas de contenue, ce qui est tout à fait normal jusqu'à présent. Puisque nous n'avions pas ordonné les instructions au microprocesseur, ou que votre navigateur n'exécute pas les instructions qu'on lui donne, ce qui est très juste jusqu'à cette leçon puisque rien ne lui permette d'afficher un contenu quelconque. ...
Nous vous rappelons que pour visualiser le code HTML dans un document Web :
Il suffira de cliquer avec le bouton droit de votre souris, afin d'ouvrir le menu contextuel, puis de pointer sur "Afficher le code source de la page".
<HEAD> :
Le titre du document, les Scripts JavaScript seront généralement inclus dans une zone de prologue ou d'en-tête de la balise de début :<HEAD>. Cette zone se termine par une balise de fin </HEAD>. Nous verrons par la suite que nous pouvons trouver d'autres termes dans cette zone d'en-tête.
<!DOCTYPE HTML> (1ère ligne)
<HTML>
<HEAD>
Prologue ou d'en-tête
</HEAD>
Corps du document
. . .
</HTML>
Aperçu du premier niveau. Là encore, vous verrez une page blanche qui n'a pas de contenue, ce qui est tout à fait normal jusqu'à présent. Puisque rien ne lui permette d'afficher un contenu quelconque dans votre Browser. ...
Nous allons maintenant s'occuper de la balise de début du titre <TITLE> et de la balise de fin du titre </TITLE>
<TITLE> :
Un texte qui apparaît dans la zone titre du browser est défini par <TITLE>. Il faut noter que ce titre est souvent négligé au détriment d'une zone de titre enrichie d'images et de logos, que l'auteur situe au début du document. Le titre défini entre les balises de début <TITLE> et de fin </TITLE> a, outre un caractère informatif, au moins deux raisons d'être soigné :
C'est ce texte qui sera stocké dans le fichier "Bookmark" (signet) que gère le browser pour le compte du lecteur. On préférera donc un texte du style « Bienvenue chez les Policiers » à « Bienvenue », qui ne sera jamais capable de fournir une indication pertinente sur la destination.
Dans un contexte XWindows, lorsque l'on "iconifie" la fenêtre, c'est ce titre qui sera pris en compte comme nom par l'icône.
"Bookmark" : Ce fichier permet, lorsqu'on est connecté à un document, de conserver son URL dans un fichier de type annuaire afin de pouvoir s'y connecter ultérieurement d'un simple clic.
Le titre doit être suffisamment court pour tenir entièrement dans l'espace que le Browser lui réserve, sous peine d'être tronqué et ainsi de perdre son sens.
<!DOCTYPE HTML> (1ère ligne)
<HTML>
<HEAD>
<TITLE>Bienvenue chez les Policiers</TITLE>
</HEAD>
Corps du document
. . .
</HTML>
Aperçu du premier niveau. Là encore, vous verrez une page blanche qui n'a pas de contenue, sauf en haut de votre navigateur, ce qui est tout à fait normal jusqu'à présent.
Aperçu de l'image selon votre navigateur comme ci-après :
<BODY> :
Nous allons entreprendre la balise de début <BODY> et la balise de fin de </BODY>, réside dans toutes les pages HTML des documents Web. Nous verrons par la suite qu'il y a d'autres attributs de ces mêmes balises et que, des extensions permettent de compléter l'utilisation de cette balise.
<!DOCTYPE HTML> (1ère ligne)
<HTML>
<HEAD>
<TITLE>Bienvenue chez les Policiers</TITLE>
</HEAD>
<BODY>
Corps du document
. . .
</BODY>
</HTML>
Aperçu du premier niveau. Là encore également, vous verrez une page blanche qui n'a pas de contenue, sauf en haut de votre navigateur concernant le titre, ce qui est tout à fait normal jusqu'à présent.
Aperçu de l'image selon votre navigateur comme ci-après :
Ce dernier exemple donne la structure minimale que doit posséder tout document HTML. Dans ces exemples ci-dessus, on a présenté le code HTML, en décalant les divers niveaux de la structure. Cette indentation n'est pas obligatoire, mais elle est fortement recommandée afin de faciliter la lecture et la maintenance du code source. Les Browsers qui exécutent le code HTML ne tiennent pas compte des retours à la ligne et l'on aurait très bien pu écrire le code HTML de la façon suivante, qui aurait produit le même affichage dans le Browser :
EXEMPLE "à ne pas faire" :
<html> <head> <title> Bienvenue chez les Policiers </title> </head>
<body>
document
. . . </body> </html>
Voici un exemple du même aperçu dans votre Navigateur, à éviter de faire ainsi !En cliquant ici.
Image correspondante selon votre navigateur ci-après :
<ADDRESS> :
Le bloc ou balise adresse est un élément prévu pour indiquer toute information concernant l'auteur du document Web (Adresse, Téléphone, E-Mail, etc.). Il peut être inséré à n'importe quel endroit du document ou de la page HTML ; l'habitude sur le Web est de mettre cette zone adresse à la fin du document. Les Browsers affichent généralement le texte compris entre les balises de début <ADDRESS> et de fin </ADDRESS>en italique.
EXEMPLE :
<address>
Jean-Claude - Tél. : 95 - 90 - 13 - 78 - 14.
E-Mail : jeanc@orange.fr ; (le tout en minuscule).
</address>
Voir l'aperçu de votre Browser concernant l'adresse, en cliquant ici.
Aperçu de l'image :
<!-- COMMENTAIRES --> :
Nous pensons que vous aviez pu vous rendre compte que tout texte commençant <!-- et se terminant par --> dans votre navigateur, ne sera pas interprété par le Browser, donc pas affiché. Cela sert à l'auteur du document pour commenter son fichier source.
EXEMPLE :
<!-- Document à ne diffuser qu'aux machines appartenant au domaine de la mécanique générale .mecanique.fr -->
Aperçu de l'image sur le (s) Browser (s) ci-après :
ATTRIBUTS D'UNE BALISE :
Nous verrons, au cours de l'étude des différentes balises HTML, que certaines peuvent admettre des attributs, chacun d'eux pouvant avoir une valeur. Au niveau syntaxique, le premier attribut est séparé de la balise par un espace, ainsi que les attributs entre eux. Si l'attribut doit prendre une valeur, elle est spécifiée après le signe = (égale) suivant l'attribut.
La valeur de l'attribut sera écrite entre double guillemets ("), si cette valeur est alphanumérique.
Nous avons maintenant défini suffisamment d'éléments de structure du langage HTML pour lister l'ossature type que nous trouverons toujours dans un document ou toutes les pages HTML de votre site :
*** Ossature *** = Squelette, Armature, Structure, Assemblage régulier d'éléments, qui soutient un ouvrage et en assure la rigidité.
La finalité d'un fichier contenant une page HTML par exemple, et son installation dans les répertoires du serveur afin qu'il soit offert à la consultation. Ce n'est pas envisageable pendant la phase d'apprentissage du langage ou pendant la mise au point d'un document.
On éditera donc ces fichiers HTML de test et on les stockera dans un répertoire personnel si l'on travaille sur une machine Unix, ou dans un dossier de test, si l'on travaille sur un PC ou un Macintosh.
N.B. : On pourra utiliser n'importe quel éditeur : un bloc note, ou encore Teachtext (ancien) comme Word feront l'affaire sur un Macintosh ; cependant, si l'on prend un traitement de texte évolué comme Word, on aura soin de sauvegarder le fichier en format "TEXT".
C'est préférable d'avoir "son propre éditeur HTML", comme Web - Expert par exemple, on vous laisse le soin de travailler avec votre éditeur que vous eûtes l'habitude ... FrontPage, que nous avions travaillé longtemps, est un très bon éditeur HTML, mais chacun à ses propres logiciels et ses inconvénients, à vous de voir ...
Il suffit que soit installé sur cette machine d'apprentissage un logiciel client comme Opéra, Chrome ou encore Internet Explorer. Il n'est absolument pas nécessaire pendant cette période d'avoir accès à un serveur Web ni même d'être connecté au réseau.
En effet, les Browsers offrent la possibilité d'ouvrir et d'interpréter un fichier local, "selon votre navigateur". Il suffit de cliquer sur le menu déroulant File du browser et de sélectionner l'option Open file. On reçoit alors une nouvelle fenêtre permettant de sélectionner le fichier à tester.
MÉTHODE DE TRAVAIL :
Voici les étapes à suivre pour tester les fichiers HTML avant de les installer dans les répertoires du serveur :
Appeler l'éditeur de texte,
Écrire le code HTML,
Enregistrer sous un Nom avec le suffixe .html,
Appeler le Browser Chrome ou autres par exemple,
Utiliser le menu Open file selon votre navigateur,
Sélectionner votre document ou page HTML, qui s'affichera dans le browser, selon votre navigateur.
Si vous n'êtes pas satisfait...
Retourner dans l'éditeur de texte sans quitter le Browser,
Corriger ou modifier votre code HTML,
Utiliser la commande reload (selon votre navigateur) et juger vos modifications.
RÉSUMÉ DE NOS DEUX LEÇONS (PREMIÈRE ET DEUXIÈME) :
HTML est un langage balisé où chaque balise s'inscrit entre les caractères <(inférieur à) et >(supérieur à). Les balises peuvent avoir des attributs spécifiant éventuellement des valeurs ou des caractéristiques. On ne peut pas saisir des caractères accentués directement au clavier ; il faut les remplacer par les codes HTML équivalents ; il en va de même pour certains symboles. Les délimiteurs pour ces codes sont le caractère &(et commercial) au début du code et le caractère ; (point virgule) à la fin de ce même code. Ainsi, é signifie é(e accent aigu).
Les éléments de structure définis dans cette leçon sont de deux sortes :
Obligatoires
<HTML>
Premier élément encadrant tout le fichier ou de la page HTML.
<HEAD>
Zone d'en-tête.
<TITLE>
Définition d'un titre.
<BODY>
Corps du document ou de la page HTML
Optionnels
<ADDRESS>
Bloc d'information sur l'auteur du document
<!--COMMENTAIRES-->
Commentaires
Fin de cette deuxième leçon, la prochaine sera consacrée aux Divisions concernant le langage HTML.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page