Définition
Il y a eu quelques modifications par rapport à SGML :
Caractéristiques et conséquences
De plus, les documents sont liés les uns aux autres par des liens hypertextes. Avec un moyen de les faire circuler dans le monde entier, c'est-à-dire avec Internet, la somme des documents et des liens constitue un véritable réseau d'information mondiale qui porte le nom de World Wide Web, WWW ou W3.
Le langage HTML est simple à apprendre et à utiliser. Seule la connaissance des balises et de leur positionnement dans le document est importante.
Le travail du webmaster (administrateur du site) ou du concepteur lui-même, consiste donc à placer intelligemment les bonnes balises aux bons endroits. Ce travail se fait au moyen d'un éditeur de texte ASCII sur un ordinateur quelconque. Certains de ces logiciels se sont spécialisés dans la création de documents HTML, les balises sont insérées grâce à des raccourcis-clavier ou au moyen de clics avec la souris et les accents sont directements convertis en caractères spéciaux conformes à SGML.
D'autres outils servant à l'édition de documents HTML sont apparus : les éditeurs wysiwyg (what you see is what you get) ou composeurs HTML. Au lieu d'écrire "à la main" le code HTML pour voir ensuite le document à l'aide d'un browser, on place à la souris les différents éléments du document, ce qui apparaît à l'écran est (plus ou moins) ce qu'on obtiendra en le visionnant plus tard sur un browser. Ceci permet de s'affranchir totalement de la connaissance du langage.
Pour finir, il existe des convertisseurs de documents, ainsi que des possibilités de sauvegarde dans divers logiciels de publication, au format HTML.
Syntaxe
Les balises peuvent donner une propriété au texte, comme par exemple :
ce mot est en italique <i>Pharmacie</i>
"<i>" est la balise définissant la propriété italique, la fin de la propriété est signifiée par la même balise mais avec un "/" (slash) juste après le signe inférieur. Si la balise n'était pas là, tout le texte qui suivrait aurait un style italique.
Une balise peut être aussi un élément. Par exemple, la balise "<img>" sert à insérer une image dans le document.
HTML ne fait pas la distinction entre majuscule et minuscule, on peut donc écrire <IMG> ou <img> indifféremment.
On distingue dans une balise le nom de l'attribut. Le nom suit l'ouverture d'une balise et
peut comporter jusqu'à 74 caractères. Le ou les attributs d'une balise suivent
le nom et sont séparés chacun par une espace, la longueur totale des attributs
ne doit pas dépasser 1024 caractères. De plus un attribut peut se voir
affecter une valeur associée, qui explicite l'attribut ou lui fait prendre une
préférence et est exprimée en mot, pourcentage, pixel (cas le plus
fréquent)...
Par exemple :
<IMG SRC="../images/caducee.jpg" ALIGN=RIGHT>
La balise correspond à l'insertion d'une image dont les attributs sont : la source est le fichier caducee.jpg auquel on accède par un chemin relatif, l'alignement est à droite. Dans le document apparaîtra donc entre les lignes de texte un caducée qui se trouve à droite de l'écran.
Un point particulier : on peut placer des commentaires n'importe où dans le code HTML. Ceux-ci sont placés dans une ou plusieurs balises dont le nom a été remplacé par un point d'exclamation. Ils ne sont jamais affichés dans le navigateur, et on ne peut les lire qu'avec un éditeur ASCII. Exemples :
lt&;!-- j'emploie ce commentaire pour expliquer ce que je fais -->
ou encore, sur plusieurs lignes...
<!--
// j'insère ici un script de programmation JavaScipt:
function message(texte) { window.status = texte }
// qui respectera les vieux browsers parce que caché-->
Structure du document
Tout comme n'importe quel fichier informatique, le document est séparé en deux parties un entête contenant diverses informations et une zone correspondant aux données affichables. L'entête sera délimité entre les balises <HEAD> et </HEAD>, la zone des données ou corps de la page entre <BODY> et </BODY>.
Tout document HTML est donc de la forme :
<HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>
</HTML>
Une particularité s'est ajoutée au langage à partir de la version 3.2 de HTML, il s'agit des frames. Cette fonctionnalité, d'origine Netscape, permet de fragmenter l'affichage en plusieurs zones ou cadres, et d'y placer ainsi plusieurs documents HTML.
A l'aide de la balise <FRAMESET>, on construit deux ou plusieurs cadres soit en colonnes, soit en bandeaux. Ces parties sont ensuite explicitées avec <FRAME> qui possède plusieurs attributs. Le premier, SRC, définit quel document HTML sera placé dans le cadre, ce document ayant la structure décrite ci-dessus, le second attribut, NAME, permet de donner un nom au cadre, ce qui sera utile lorsque, plus tard, on voudra y faire afficher un autre document HTML avec l'attribut TARGET.
Certains navigateurs ne peuvent pas gérer les frames. Une balise <NOFRAME> contenant un <BODY> a donc été prévue pour fournir un document de remplacement.
Un exemple de document utilisant les frames sera donc :
<HTML>
<HEAD> ... </HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="textes/menu.html" NAME="icones">
</FRAMESET>
<FRAME SRC="textes/welcome.html" NAME="principal">
<NOFRAME>
<BODY> ... </BODY>
</NOFRAMES>
</HTML>
Si le navigateur reconnaît les frames alors deux colonnes seront définies, une de 120 pixels de large, une autre ayant le reste de largeur. Dans la première sera affiché le document menu.html, dans la seconde le document welcome.html. Le nom du premier cadre est "icones", le nom du second "principal".
Si le navigateur ne reconnaît pas les frames, on retrouve la première structure, et ce qui sera contenu dans la balise
sera affiché.NB : l'indentation (décalage par rapport à la ligne du dessus) n'est pas obligatoire. HTML ne tient pas du tout compte des espaces, ni des tabulations et des retours à la ligne. Tout le formatage, fait au moyen des caractères ASCII 9 (tabulation), 13 (retour chariot), 10 (fin de line) ou 32 (espace) qu'utilisent les éditeurs ASCII, est abandonné au profit de balises spéciales.
Tout le document pourrait tenir sur une seule ligne ASCII si on le voulait. Il est néanmoins préférable pour la lisibilité du code de conserver un formatage (qui ne sera pas pris en compte à l'affichage dans le browser) et d'indenter pour éviter les confusions.
Conception de l'entête
<TITLE> permet de définir un titre pour le document. Cette balise ne doit être employée qu'une seule fois et ne pas comporter de balises à l'intérieur : on n'y place que du texte brut avec des caractères spéciaux si nécessaire. Le titre s'affichera dans le titre de la fenêtre d'affichage du browser. S'il n'y a pas de <TITLE> dans l'entête, le nom du fichier HTML sera affiché à la place.
En code HTML, cela donne :
<TITLE>Faculté de Pharmacie de Lyon</TITLE>
<META> fournit diverses informations au browser. Cette balise possède trois
attributs :
NAME, HTTP.EQUIV et CONTENT. Le dernier attribut sert à expliciter les deux premiers.
HTTP.EQUIV sert à modifier l'entête HTTP lors du transfert HTTP. On peut ainsi indiquer la date d'expiration, le type d'objet transféré, des mots clés, etc...
NAME ne modifiera pas l'entête HTTP, l'attribut ne sert donc qu'à donner des informations. On y place généralement le nom de l'auteur, le nom du logiciel générant le code HTML, la date de publication, etc...
Voici des exemples en HTML :
Si la modification par HTTP.EQUIV de l'entête HTTP ne paraît pas importante au
premier abord, elle est néanmoins utile pour les robots.
Ce sont des logiciels dont la fonction principale est de parcourir jour et nuit les sites Web
et analyser l'entête <HEAD> des documents HTML. Ainsi scrutés, ces derniers
sont ajoutés dans des bases de données ou des annuaires qui serviront pour les
moteurs de recherche sur le Web. L'attribut HTTP.EQUIV="Keywords" est donc important si
l'on veut être référencé quelque part sur un moteur de recherche.
Conception du corps
La balise <BODY> peut accepter quelques attributs dont :
La couleur est spécifiée par une valeur hexadécimale (unités de 0 à 9 puis A à F) et codée en Rouge Vert Bleu selon le format : rrvvbb. 256 niveaux pour chaque composante sont permis, ce qui donne un choix de 16 millions de couleurs.
Un corps serait donc délimité de cette manière :
<BODY BACKGROUND="../images/fondvert.gif" BGCOLOR="#FFFFFF" TEXT="#003300" LINK="#994400"> ... </BODY>
En image de fond sera donc affichée l'image au format GIF "fondvert", sinon une couleur blanche la remplacera. Le texte est dans un vert très foncé et les liens dans un rouge bordeau.
Rajah Lone, le 21 Octobre 1997