Le langage HTML : Hy pe r Te xt Markup Language

Quelques rgles simples pour l'criture en langage HTML

Les com m andes HTML ont une m arque de dbut et une m arque de fin Certaines m arques de fin sont facultatives Les com m andes HTML ut ilisent les caract res < et > com m e dlim it eurs. Ex em ple :

< TITLE> Cette commande donne un titre au document HTML< / TITLE>

Les com m andes HTML peuvent t re crit es en m inuscules ou en m ajuscules. Un fichier rdig en HTML doit tre suffix par .ht m l ou .HTML ou .htm ou .HTM

Qu'est- ce qu'un URL (Uniform Resource Locator)

Un URL est le moyen de nommer un objet dans le monde WWW. La syntax e d'un URL est la suivante : type:/ / serveur:port/ chemin_d'acces/ fichier#etiquette?para metres

Le type de serveur : http : pour les URL provenant de serveurs WWW ftp : pour les fichiers transfrer telnet : pour ouvrir une session interactive news : pour accder aux forums

Les En- ttes - H.T.M.L.

< HTML> < / HTML> : Com m andes de dbut et de fin du docum ent HTML < HEAD> < / HEAD> : Inform ations non affiches concernant le docum ent < TITLE> < / TITLE> : Titre du docum ent . Cett e inform at ion apparait dans la barre de t it re du client WWW. < META ...> : Situes dans l'en- t t e de votre page HTML, ces com m andes guident les m oteurs de recherche pour index er votre page < BODY> < / BODY> : Corps du docum ent. Tout es les inform at ions affiches par le client WWW y sont contenues. < BASE HREF= "URL"> < / BASE> : URL(*) de base pour t out es les rfrences cont enues dans ce docum ent . Par dfaut l'URL de base est le serveur HTTP sur lequel se trouve le docum ent Pour insrer des com m ent aires :< !- - Com m entaires- - >

< BODY> - H.T.M.L.

< BODY BACKGROUND= BGCOLOR= TEXT= LINK= VLINK= > < / BODY>

BACKGROUND= "une image" : Cette image peut tre de petite taille (un logo par ex emple). Elle sera alors rpte sur tout le fond de l'cran par le client WWW BGCOLOR= "#RRGGBB" : Dfinit la couleur du fond de l'cran

RR, GG et BB sont les valeurs hex adcimales du Rouge(RR), Vert(GG)et Bleu(BB)

TEXT= "#RRGGBB" : Dfinit la couleur du tex te (par dfaut = noir) LINK= "#RRGGBB" : Dfinit la couleur des liens souligns (par dfaut = bleu) VLINK= "#RRGGBB" : Dfinit la couleur des liens souligns dj consults (par dfaut = rose) ALINK= "#RRGGBB" : Dfinit la couleur du lien au moment o l'on clique dessus. (par dfaut = rouge)

Structure d'un document HTML.

Les docum ent s HTML suivent une gram m aire appele DTD (Dclarat ion de Type de Docum ent ) crite en SGML (m t alanguage) Il ex iste trois DTD possibles pour HTML 4.0.1 :

strict : ex clut les lm ent s et att ributs de prsentation (DTD pour les feuilles de style CSS) t ransitional : DTD com plt e fram eset : pour les pages dcoupes en cadres. Identique t ransitional sauf pour la dclarat ion du cont enu de llm ent < HTML>

Perm et de vrifier la validit du ''code'' HTML crit : pas de chevauchem ents de balises, et c...

Structure d'un document HTML.

Dclarat ion :

< !DOCTYPE HTML PUBLIC "- / / W3C/ / DTD HTML 4.0.1/ / EN" " http:/ / www.w3.org/ TR/ htm l4/ strict.dt d">

< !DOCTYPE HTML PUBLIC "- / / W3C/ / DTD HTML 4.0.1 Transit ional/ / EN" "htt p:/ / www.w3.org/ TR/ ht m l4/ loose.dtd">

< !DOCTYPE HTML PUBLIC "- / / W3C/ / DTD HTML 4.0.1 Fram eset / / EN" "htt p:/ / www.w3.org/ TR/ ht m l4/ fram eset.dtd">

La validation se fait l'adresse : ht tp:/ / validat or.w3.org/ Plus d'infos :

http:/ / css.alsacreations.com/ Bases- et- indispensables/ DTD- comment- choisir

Exemple
< HTML> < HEAD> < TITLE> Ex emple de structure de document HTML< / TITLE> < META NAME= "Author" CONTENT= "R.O."> < BASE HREF= "/ home/ chezmoi"> < / BASE> < / HEAD> < BODY> ... ... Le document HTML ... < / BODY> < / HTML>

Les Dlimiteurs

< P ALIGN= (LEFT,RIGHT,CENTER,JUSTIFY)> bla bla bla < / P>

Exemple :
< P ALIGN= CENTER> Pour centrer un paragraphe.< BR> Facilement.< BR> Sans se poser trop de questions.< BR> < / P>

Les Dlimiteurs

< DIV ALIGN= (LEFT,RIGHT,CENTER,JUSTIFY)> bla bla < / DIV>

Exemple :
< DIV ALIGN= RIGHT> Pour centrer un paragraphe.< BR> Facilement.< BR> Sans se poser trop de questions.< BR> < / DIV>

Les Dlimiteurs

< BR CLEAR= ALL> < / BR> : saut de ligne CLEAR : Cet te ex t ension perm et d'annuler les alignem ents prcdents, en part iculier lors du positionnem ent d'une im age dans le tex te Ex em ple :
< IMG ALIGN= LEFT SRC= "chouetteG.gif"> chouette < BR> nom par lequel on dsigne couramment< BR> certains oiseaux rapaces nocturnes.< BR> < EM> Le Petit Robert< / EM> < BR CLEAR= ALL>

Les Dlimiteurs

< HR SIZE NOSHADE WIDTH> : ajout e une ligne horizont ale SIZE= + n : augm ent e l'paisseur de + n NOSHADE : perm et d'obt enir un t rait plein (non om br) WIDTH= n% : perm et de dfinir la largeur du t rait en fonct ion de la t aille de la page courante Ex em ples :
Une ligne ... < HR> Une ligne noire !!! < HR NOSHADE> Une ligne 4 fois plus paisse ... < HR SIZE= + 4> Une ligne 7 fois plus paisse et de taille rduite ...< HR SIZE= + 7 WIDTH= 50% >

Liste de description

< DL> < / DL> : Dbut et fin de liste de description < DT> < / DT> : Nom du t erm e < DD> < / DD> : Descript ion du t erm e dfini Ex em ple :
< DL> < DT> Premier terme< / DT> < DD> Description du premier terme< BR> Cette description peut continuer la ligne suivante< BR> ainsi de suite ...< / DD> < DT> Second terme< / DT> < DD> Description du second terme< / DD> < / DL>

Indentation de paragraphe

< BLOCKQUOTE> < / BLOCKQUOTE> : perm et de m ett re en avant un paragraphe par rapport au rest e du t ex te Ex em ple :
Je veux mettre en avant le paragraphe qui suit : < BLOCKQUOTE> Nous pourrions peut- tre tous bien nous entendre avec des gens parfaits. Mais notre tche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS) < / BLOCKQUOTE> ... grande vrit !

Les styles - H.T.M.L.

De < H1> < / H1> < H6> < / H6> : trs grande taille minuscule < STRIKE> < / STRIKE> ou < S> < / S> : pour barrer du tex te < U> < / U> : pour souligner du texte < BLINK> < / BLINK> : pour faire clignoter du tex te < TT> < / TT> : pour avoir du texte formatt < PRE> < / PRE> : pour avoir un paragraphe formatt (tiens compte des espacements)

Les styles - H.T.M.L.

Les styles physiques :

< B> < / B> : mettre en gras < I> < / I> : mettre en italique

Les styles logiques (dpend du browser) :

< STRONG> < / STRONG> : insister sur du tex te (gras) < EM> < / EM> : texte en valeur (italique) < CITE> < / CITE> : insrer une citation < ADDRESS> < / ADDRESS> : insrer une adresse

Les listes - H.T.M.L.

< UL TYPE= (DISC,SQUARE,CIRCLE)> < / UL> : list e non ordonne

TYPE : rond plein, carr plein, rond vide

< OL TYPE= a,A,i,I START= n > < / OL> : list e ordonne

TYPE :

a : let tres m inuscules A : let tres m ajuscules i : nom bres m inuscules I : nom bres m ajuscules

START : dbut de la num rot at ion

< LI> < / LI> : lm ent de la list e

Les listes - H.T.M.L.

Ex em ple : Ceci est une liste ordonne incluant une sous- liste non ordonne < OL> < LI> Terme A < UL TYPE= SQUARE> Sous- liste < LI> Terme A- 1 < LI> Terme A- 2 < / UL> < LI> Terme B < LI> Terme C < / OL>

Les caractres spciaux - H.T.M.L.

&lt : &gt : &amp : &quot :

< > & "

&egrave : &ecirc : &agrave : &iuml : &ccedil : &ntilde : &AElig :

&nbsp : force un blanc &eacute : &Eacute :

D'autres caractres utiles

&euro &copy &reg &deg &ordm &laquo &raquo

&#8364 &#169 &#174 &#176

&micro &para &frac14 &frac12 &frac34 &#156

&#181 &#182 &#188 &#189 &#190

&#171 &#187

Les images - H.T.M.L.

HTML perm et d'insrer des im ages dans du t ex t e. Ces im ages apparaissent dans le corps du tex t e, m ais aussi com m e ancre, ou m m e com m e docum ent rfrenc

Les client s WWW Netscape ou Int ernet Ex plorer acceptent les form ats :

XBM pour les im ages m onochrom es GIF pour les im ages couleurs JPEG pour les im ages couleurs

Les images - H.T.M.L.

Les im ages dans le t ex te : La com m ande < IMG> perm et d'insrer une im age dans le t ex t e < IMG SRC= "im age" ALIGN= "att ribut" ALT= "t it re" HSPACE= "hh" VSPACE= "vv" BORDER= "bb">

im age = adresse d'une im age at tribut = "MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT" t it re = "Un t itre" hh = nom bre de pix els de sparat ion droit e et gauche de l'im age. (par dfaut hh= 0) vv = nom bre de pix els de sparat ion en haut et en bas de l'im age. (par dfaut vv= 0) bb = nom bre de pix els de l'encadrem ent de l'im age. (par dfaut il n'y a pas d'encadrem ent)

Les images - H.T.M.L.

Ex em ples :

< IMG ALIGN= BOTTOM SRC= "france.gif"> carte de France

< IMG ALIGN= RIGHT SRC= "france.gif" ALT= "cart e" HSPACE= "10" VSPACE= "10" BORDER= "5"> cart e de France

Les images ractives - H.T.M.L.

On a besoin :

D' un fichier image .gif ou .jpg De dfinir les zones ractives :

Rectangle : coin suprieur gauche et coin infrieur droit Cercle : centre du cercle et rayon Polygone : liste de points

Les images ractives - H.T.M.L.

Synt ax e
< MAP NAME= "DEMO"> < AREA SHAPE= "RECT" HREF= "rect.html" COORDS= "0,0,50,50"> < AREA SHAPE= "CIRCLE" HREF= "cercle.html" COORDS= "100,100,10"> < AREA SHAPE= "POLY" HREF= "poly.html" COORDS= "0,0,0,100,100,100"> < AREA SHAPE= "DEFAULT" HREF= "nonDef.html"> < / MAP> < IMG ALIGN= MIDDLE SRC= "image.gif" USEMAP= "#DEMO">

NAME : identifiant de MAP SHAPE : parmis RECT,CIRCLE,POLY et DEFAULT HREF : la page charger COORDS : coordonnes des points suivant la figure USEMAP : identifiant du MAP associer l'image

Les liens - H.T.M.L.

Il ex ist e quat re t ypes principaux de liens :

Les liens vers un docum ent com plet dist ant

< A HREF= "htt p:/ / cm i.univ- m rs.fr"> sit e du CMI < / A>

Les liens vers un docum ent com plet local

< A HREF= "/ hom e/ durand/ Fichiers/ index .ht m l"> m enu < / A>

Les liens vers une part ie du docum ent courant

< A NAME= "et iquet t e"> nom < / A> : pour dfinir un point de branchem ent < A HREF= "nom _de_fichier_local#etiquet te"> ancre < / A> : pour faire le lien.

Les liens - H.T.M.L.

Les liens vers une part ie d'un docum ent local

< A NAME= "etiquet te"> nom < / A> : pour dfinir un point de branchem ent < A HREF= "nom _de_fichier_local#etiquett e"> ancre < / A> : pour faire le lien

Ex em ple : < A NAME= "[3 ]"> < / A> : m et tre dans le fichier ex em ple_notes.ht m l < A HREF= "exemple_notes.html# [3 ]"> Note [3 ] < / A>

Les liens - H.T.M.L.

Adresser un message lectronique

< A HREF= "MAILTO:destinataire"> ancre < / A> < A HREF= "MAILTO:destinataire?Subject= Objet_du_message"> ancre < / A>

Exemples :
< A HREF= "MAILTO:r.o@cmi..?Subject= TP1 exo1 "> cette adresse pour me rendre le tp !!< / A>

< A HREF= "MAILTO:r.o@cmi..?cc= a.h@cmi...fr&bcc= g.g@cmi..&Subject= rien"> Ecrivez- nous < / A>

Les tableaux - H.T.M.L.

< TABLE BORDER= CELLPADDING= CELLSPACING= WIDTH= HEIGHT= BGCOLOR= > < / TABLE> : dclarat ion d'un t ableau

BORDER= n le t ableau a un cont our d'paisseur n CELLPADDING= Dfinit l'espace ent re l'objet et le cont our d'une cellule CELLSPACING= Dfinit l'paisseur du t rait entre les cellules WIDTH= Fix e la largeur du t ableau HEIGHT= Fix e la haut eur du t ableau BGCOLOR= BGCOLOR= "#RRGGBB"

Les tableaux - H.T.M.L.

< TR ALIGN= BGCOLOR= > < / TR> : Dfinit le dbut et la fin d'une ligne

ALIGN=

ALIGN= LEFT (par dfaut) toutes les cellules de la ligne sont cadres gauche ALIGN= CENTER toutes les cellules de la ligne sont centres ALIGN= RIGHT toutes les cellules de la ligne sont cadres droite BGCOLOR= BGCOLOR= "#RRGGBB" : couleur de la ligne

Les tableaux - H.T.M.L.

< TH COLSPAN= ROWSPAN= ALIGN= VALIGN= WIDTH= BGCOLOR= > < / TH> : Dfinit chaque lm ent de la ligne t it re < TD COLSPAN= ROWSPAN= ALIGN= VALIGN= WIDTH= BGCOLOR= > < / TD> : Dcrit chaque lm ent du t ableau

COLSPAN= n (par dfaut n= 1) la cellule occupe n colonnes. ROWSPAN= n (par dfaut n= 1) la cellule occupe n lignes. ALIGN= LEFT (valeur par dfaut) alignement gauche de la cellule. ALIGN= RIGHT alignement droite de la cellule. ALIGN= CENTER centrage dans la cellule. VALIGN= BOTTOM (valeur par dfaut) alignement au bas de la cellule. VALIGN= TOP alignement au sommet de la cellule. VALIGN= CENTER centrage dans la cellule. WIDTH= largeur de la cellule en pourcentage ou en pix el. BGCOLOR= BGCOLOR= "#RRGGBB"

Les tableaux - H.T.M.L.

< CAPTION ALIGN= > < / CAPTION> : Dcrit le t itre du t ableau

# ALIGN= TOP (par dfaut) la lgende du t ableau est en haut # ALIGN= BOTTOM la lgende du t ableau est en bas

Ex em ple : < TABLE BORDER BGCOLOR= "# ccffaa"> < CAPTION> Comparatif modle conomique< / CAPTION> < TR> < TH COLSPAN= 3 > Modle < TH ROWSPAN= 2 > Vitesse< BR> en km/ heure < TH ROWSPAN= 2 > Consommation< BR> en litre/ 1 0 0 km < / TR> < TR>

Les tableaux - H.T.M.L.

< TR> < TH> Marque< / TH> < TH> Type< / TH> < TH> Numero de srie< / TH> < / TR> < TR> < TD> Peugeot 1 0 6< / TD> < TD> B2 < / TD> < TD ALIGN= MIDDLE> 2 3 4 .3 4< / TD> < TD> 1 3 2 < / TD> < TD> 5 ,7 < / TD> < / TR>

Les tableaux - H.T.M.L.

< TR> < TD> Citron AX< / TD> < TD> AT6 7 B8 < / TD> < TD ALIGN= MIDDLE> 67 8 9 < / TD> < TD> 1 2 6< / TD> < TD> 5 ,5 < / TD> < / TR> < / TABLE>

< FRAMESET> - H.T.M.L.

Netscape a implment le partage de la fentre en "cadres" ou "cellules" autonomes Trois commandes permettent de grer cette fonctionnalit, mais attention le corps du fichier n'est plus inclus dans < BODY> et < / BODY> mais dans < FRAMESET> et < / FRAMESET>

< FRAMESET ROWS= COLS= BORDER= > < / FRAMESET> : permet de diviser une zone en cellules horizontales ou verticales

< FRAMESET> - H.T.M.L.

ROWS= "n,n% ,* ,..."

divise la zone en cellules horizontales.

n = hauteur en nom bre de pix els n% = hauteur de la cellule en pourcentage de l'cran * = haut eur restant e

COLS= "n,n% ,*,..."

divise la zone en cellules verticales.

n = largeur en nom bre de pix els n% = largeur de la cellule en pourcentage de l'cran * = largeur rest ant e

BORDER : perm et de supprim er (BORDER= 0) ou d'agrandir la valeur du sparat eur de cellules.

< FRAMESET> - H.T.M.L.

< FRAME NAME= SRC= SCROLLING= MARGINWIDTH= MARGINHEIGHT= NORESIZE= BORDER= FRAMEBORDER= FRAMESPACING= BORDERCOLOR= > : caractrise la cellule

NAME= "nom_de_la_zone" SRC= "URL" SCROLLING= "yes" ou "no" ou "auto" MARGINWIDTH= nombre de pix els de la marge verticale MARGINHEIGHT= nombre de pix els de la marge horizontale NORESIZE vite la modification de la taille par l'utilisateur BORDER= nombre de pix els du bord FRAMEBORDER= "yes" ou "no" par dfaut = "yes" "yes" le sparateur est en 3- D "no" le sparateur est plat FRAMESPACING= nombre de pix els de la sparation BORDERCOLOR= "#RRVVBB" couleur de la sparation

< FRAMESET> - H.T.M.L.

< NOFRAME> < / NOFRAME> : partir de cette commande, le texte ne sera

affich que par les Browsers ne sachant pas grer les frames

Exemple :
< HTML> < FRAMESET COLS= "25%,*"> < FRAME SCROLLING= "yes" NAME= "cel- g" SRC= "frame- 1.html"> < FRAMESET ROWS= "50%,50%"> < FRAME SCROLLING= "yes" NAME= "cel- d- h" SRC= "frame- dh.html"> < FRAME SCROLLING= "yes" NAME= "cel- d- b" SRC= "frame- dg.html"> < / FRAMESET> < / FRAMESET> < NOFRAME> Dommage, votre < I> Browser< / I> ne permet pas les < I> frames< / I> . < / NOFRAME> < / HTML>