Vous êtes sur la page 1sur 10

HYPER TEXT MARKUP LANGUAGE HTML par Alexandre GOUVERNEUR, Universit de La Runion

INTRODUCTION Contrairement aux ides reues, HTML n'est pas un langage de programmation, mais un langage de description de pages, au mme titre que Postscript d'Adobe, par exemple. La diffrence rside dans le fait qu'HTML, invent par le Centre Europen de la Recherche Nuclaire, est un "produit" du domaine public et qu'il peut par consquent tre utilis par tous sans aucune royalty, ce qui l'a propuls standard mondial de la description de page sur Internet. L'autre diffrence est de taille. HTML ne se contente pas de dcrire les documents. Il permet au lecteur une approche non linaire : il est possible, par exemple de demander d'expliciter un terme cl de faon interactive en "basculant" sur le document point par celui-ci. Ainsi, il est possible d'tablir un rseau de documents se pointant les uns les autres. Sur Internet, l'utilisation d'un navigateur tel Netscape navigator a pour but premier d'interprter les descriptions de pages provenant des diffrents serveurs. Etant donn que l'accs un document, travers ce rseau, se fait par son Uniform Resource Locator (URL), HTML a t modifi afin de pouvoir pointer sur d'autres documents avec leur URL comme rfrence. Le rseau de documents est matrialis par un rseau informatique. Les liens ainsi tablis entre les documents peuvent tre assimils une gigantesque toile d'araigne au niveau mondial, d'o le nom de World Wide Web.

STRUCTURE D'UN DOCUMENT HTML Un document HTML est constitu de marqueurs et de textes. Ces marqueurs permettent l'application de styles (indications de paragraphes, italiques, fontes ...) mais aussi de liens vers d'autres ressources (en gnral d'autres documents HTML, locaux ou non). Toutefois, les ressources pointes peuvent tre de toute nature (sons, films, photographies, images ...). Les marqueurs s'utilisent (sauf exceptions) par paire : un marqueur de dbut, un marqueur de fin. Chaque marqueur de dbut est constitu du signe infrieur suivi du contenu explicatif puis du signe suprieur. Chaque marqueur de fin est constitu du signe infrieur suivi d'un slash, du contenu explicatif puis du signe suprieur. Par exemple si je dsire mettre du texte en italique, je dois utiliser la squence HTML suivante : <i>du texte</i>

Page 2 of 10

Les rgles sont : Les marqueurs peuvent tre imbriqus mais ne peuvent se chevaucher ; Le document HTML commence toujours par le marqueur <html> et se termine toujours par </html> ; Le titre du document HTML est plac entre les marqueurs <title> et </title> ; Le corp du document HTML est compris entre les marqueurs <body> et </body> ; Le corp du document HTML peut contenir autant de paragraphes que dsir. Les paragraphes sont matrialiss par les marqueurs <p> et </p> ; Les variations diacritiques (accentuation notamment) sont remplaces par des squences HTML commenant par une perlute suivie d'un code numrique ou alphabtique et termine par un point virgule. Par exemple "" se matrialise par la squence HTML "&eacute;" ; Les espaces successifs sont interprts en un espace unique. ; Les caractres "Retour chariot" ne sont pas interprts. Il faut utiliser les marqueurs de paragraphe, ou ventuellement le marqueur unique <br> (ce marqueur fait partie des exceptions qui ne ncessitent pas de fonctionner par paire) ; Les marqueurs non reconnus par un navigateur sont purement et simplement ignors.

LES STYLES DE CARACTERES Le style de caractres en "Gros titres" s'obtient par les marqueurs <h1> et </h1> ; h1 pouvant tre remplac par h2, h3, h4, h5 ou h6, suivant la taille de caractre de titre dsire. La taille est inversement proportionnelle la valeur de h ; Le style Italique s'obtient par les marqueurs <i> et </i> ; Le style Gras s'obtient par les marqueurs <b> et </b> ;

Page 3 of 10

LES TABLEAUX En HTML, il est possible de crer des tableaux trs facilement avec les marqueurs suivants : <table border=1> et </table> dterminent le dbut et la fin du tableau, ainsi que l'paisseur du trait ; <tr> indique la cration d'une nouvelle ligne ; <th> indique que ce qui suit est un en-tte de ligne ou de colonne ; <td> indique que ce qui suit est une donne ; Les marqueurs <tr>, <th> et <td> font partie des exceptions qui ne fonctionnent pas par paire. Par exemple, la table suivante : x Ligne 1 Ligne 2 Ligne 3 Colonne 1 Valeur 1.1 Valeur 1.2 Valeur 1.3 Colonne 2 Valeur 2.1 Valeur 2.2 Valeur 2.3 Colonne 3 Valeur 3.1 Valeur 3.2 Valeur 3.3

est obtenue de la faon suivante : <table border=1> <tr><th>x<th>Colonne 1<th>Colonne 2<th>Colonne 3 <tr><td>Ligne 1<td>Valeur 1.1<td>Valeur 2.1<td>Valeur 3.1 <tr><td>Ligne 2<td>Valeur 1.2<td>Valeur 2.2<td>Valeur 3.2 <tr><td>Ligne 1<td>Valeur 1.3<td>Valeur 2.3<td>Valeur 3.3

LES IMAGES ET LES FONDS Les navigateurs HTML interprtent nativement deux formats d'image : le GIF (Graphic Interchange Format) de Compuserve, car c'tait le format le plus courant des BBS (Bulletin Board Services) mais ne supporte que 8 bits (256 couleurs) et le JPEG (Joint Pictures Expert Group) qui est le champion toute catgorie de la compression d'images 24 bits (16,7 millions de couleurs). Il est noter que les images GIF peuvent supporter quelques options comme l'entrelacement, la transparence avec le fond ou encore l'animation, c'est pour cela que ce format est prfrable pour les lments de dcor alors que le JPEG l'est pour le reste, notamment les illustrations de qualit.
Page 4 of 10

L'affichage d'une image se fait par le marqueur unique <img src="URL de l'image"> Par exemple, l'image "truc.gif" se trouvant dans le rpertoire courant : <img src="truc.gif"> ou encore, l'image "truc.gif" se trouvant dans le rpertoire "/usr/local/etc/httpd/htdocs" du serveur "andromeda" de la NASA : <img src="http://andromeda.nasa.gov/usr/local/etc/httpd/htdocs/truc.gif"> Il est, en outre, possible d'afficher une image en fond d'cran du navigateur : la plupart des sites Web utilisent des fichiers de textures pour rendre les pages plus attrayantes et donner l'impression que le document est grav dans la pierre ou crit sur du parchemin. Ceci se concrtise par une option du marqueur de dbut du corps du document : <body background="URL de l'image"> ... </body> Par exemple, la texture "papier.jpg" se trouvant dans le rpertoire courant : <body background="papier.jpg"> ... </body>

LES LIENS ENTRE DOCUMENTS Comme nous l'avons vu prcdemment, le principal intrt du langage HTML rside dans les possibilits hypertextes. Pour crer un lien entre un mot cl (ou une ressource cl : une image par exemple) et une ressource, il faut appliquer la paire de marqueurs "Anchors" signale par le couple <a href="URL du document pointer">Mot cl</a> par exemple pour relier le mot "ASCII" de mon texte avec le document local "ascii.html" du rpertoire courant, j'utilise la squence HTML suivante : <img src="ascii.html">ASCII</a> en revanche, pour relier le mot "ASCII" avec le fichier "ascii.html" se trouvant sur le serveur "graffiti" de l'Universit de Lille I, dans le rpertoire "/pub" vous utiliserez la squence HTML suivante : <a href="http://graffiti.univ-lille1.fr/pub/ascii.html">ASCII</a>

Page 5 of 10

LES CENTRAGES D'OBJET ET LES SEPARATIONS Jusqu' prsent, les ressources textes ou images taient alignes gauche ; si vous souhaitez les centrer, encapsulez l'objet dans un paragraphe et utilisez l'option "align=center". On obtient alors : <p align=center>L'objet centrer</p> Vous pouvez aussi utiliser plus prosaquement la paire de marqueurs <center> et </center> Si vous dsirez sparer les paragraphes par un trait continu, utilisez le marqueur unique <hr>

Page 6 of 10

TABLE DES CARACTERES SPECIAUX ET VARIATIONS DIACRITIQUES


Squence HTML &#32; &#33; &#34; &#35; &#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; &#57; &#58; &#59; &#60; &#61; &#62; &#63; &#64; &#65; &#90; &#91; &#92; &#93; &#95; &#97; &#122; &#123; &#124; &#125; Signification Espace Point d'exclamation Double guillemet Signe dise Signe dollar Signe de pourcentage Signe et commercial Apostrophe Parenthse gauche Parenthse droite Astrisque Signe plus Virgule Trait d'union Point de ponctuation Barre de fraction (slash) Nombres de 0 9 Deux points de ponctuation Point-virgule Signe infrieur , Signe gal Signe suprieur , Point d'interrogation Arobasque (a commercial) Lettres majuscules Parenthse gauche (bracket) Barre de fraction inverse (antislash) Parenthse droite (bracket) Tiret de soulignement Lettres minuscules Parenthse cursive gauche Barre verticale Parenthse cursive droite ! " # $ % & ' ( ) * + , . / 09 : ; < = > ? @ AZ [ \ ] _ az { | }
Page 7 of 10

Caractre correspondant

&#126; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#174; &#176; &#177; &#178; &#179; &#181; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199;

Signe tilde Point d'exclamation invers Signe cent amricain Signe livre sterling Signe monnaie Signe Yen Barre verticale brise Marqueur de paragraphe Trma Signe Copyright Premier signe ordinal Guillemets franais gauche Signe de ngation Signe marque dpose Signe degr Signe positif/ngatif Exposant 2 Exposant 3 Signe micron Signe point de ponctuation mdian Cdille Exposant 1 Second signe ordinal Guillemet franais droit Fraction un quart Fraction un demi Fraction trois quart point d'interrogation invers Majuscule A accent grave Majuscule A accent aigu Majuscule A accent circonflexe Majuscule A tilde Majuscule A trma Signe Angstrm Majuscules A et E ligatures Majuscule C cdille

~
Page 8 of 10

&#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237;

Majuscule E accent grave Majuscule E accent aigu Majuscule E accent circonflexe Majuscule E trma Majuscule I accent grave Majuscule I accent aigu Majuscule I accent circonflexe Majuscule I trma Majuscule N tilde Majuscule O accent grave Majuscule O accent aigu Majuscule O accent circonflexe Majuscule O tilde Majuscule O trma Signe de multiplication Majuscule O barre Majuscule U accent grave Majuscule U accent aigu Majuscule U accent circonflexe Majuscule U trma Majuscule Y accent aigu Bta grec minuscule Minuscule a accent grave Minuscule a accent aigu Minuscule a accent circonflexe Minuscule a tilde Minuscule a trma Angstrm minuscule Minuscules a et e ligatures Minuscule c cdille Minuscule e accent grave Minuscule e accent aigu Minuscule e accent circonflexe Minuscule e trma Minuscule i accent grave Minuscule i accent aigu


Page 9 of 10

&#238; &#239; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#255;

Minuscule i accent circonflexe Minuscule i trma Minuscule n tilde Minuscule o accent grave Minuscule o accent aigu Minuscule o accent circonflexe Minuscule o tilde Minuscule o trma Signe de la division Minuscule o barre Minuscule u accent grave Minuscule u accent aigu Minuscule u accent circonflexe Minuscule u trma Minuscule y accent aigu Minuscule y trma

Il est aussi possible d'utiliser l'perlute puis la lettre soumise la variation diacritique puis le type de variation et enfin le point-virgule : Par exemple, le est un "E" accent grave donc &egrave;

LE CONSEIL LE PLUS IMPORTANT ! On apprend rapidement le langage HTML lorsqu'on s'inspire de pages dj ralises par autrui sur Internet. Sachez que la plupart des navigateurs HTML proposent une option "VIEW SOURCE" qui vous permet d'afficher le source du document HTML courant. Alors parcourez Internet et analysez les sources des pages qui vous plaisent.
Created by Alexandre GOUVERNEUR, University or Reunion Island

Page 10 of 10