Sie sind auf Seite 1von 24

HTML

Le HTML est un langage de description de contenu. Il est le seul qui est interprt par un navigateur Web standard pour produire de laffichage. Le HTML dcrit le document et ses constituants.

H.Sahsah - WEB

HTML
Principes du langage :
Un langage balises :
Balises dimension 0 : <br>, <img> Balises dimension 1 : <a></a>, <p></p>

Les lments ainsi forms peuvent se contenir les uns les autres :
<html><head></head><body></body></html>

Des attributs plus ou moins obligatoires pour prciser des proprits des lments :
<a href="http://...">un lien</a>

H.Sahsah - WEB

HTML
Une balise est une suite de caractre majuscule ou minuscule sans aucun espace placs entre deux chevrons :
<HTML> <TITLE> <BODY> Certains de ces balises sont uniques <BR> ON les appelle gnralement des marqueurs
H.Sahsah - WEB

HTML
La plupart des balises vont par paires (conteneurs) : <B> et </B> On peut imbriquer des conteneurs condition que le conteneur le plus intrieur soit tout entier compris dans celui de niveau suprieur et ainsi de suite.. <B> <I> ..texte </I> </B> <I> <B> ..texte </B> </I>
H.Sahsah - WEB

HTML
Les attributs
Une balise peut contenir des attribut : Certains sont obligatoires La commande <img> : <IMG SRC = image.gif > Dautres sont facultatifs : lattribut ALIGN de cette mme commande

H.Sahsah - WEB

HTML
Les sparateurs
Les sparateurs usuels : espace, tabulation et retour chariot sont interprts comme un seul et unique espace, quil soit unique ou rpts

H.Sahsah - WEB

HTML
Les deux divisions dun fichier HTML
Tout le fichier HTML est situ dans un conteneur <HTML> lintrieur duquel on trouve deux parties : Len-tte plac dans un conteneur <HEAD> dans lequel on trouve : Le plus souvent la seule commande <TITLE> Parfois la commande <META> Le corps plac dans un conteneur <BODY>. Cest cette partie qui va contenir les lments (texte, images.) qui seront affichs.

H.Sahsah - WEB

HTML
EXEMPLES

<html> <head> <title>Mon premier document HTML</title> </head>


<body> <p>Bonjour tout le monde!</p> </body> </html> exemple1
H.Sahsah - WEB

HTML
Exemples
<html> <head> <title>Mon premier document HTML</title> </head> <body> <p>Bonjour tout le monde !</p> </body> </html>
H.Sahsah - WEB

exemple2

HTML
Exemples La place des commandes
<html><head><title>Mon premier document HTML</title> </head><body><p>Bonjour tout le monde !</p></body></html> exemple2

H.Sahsah - WEB

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
Le marqueur <BR> : cest lquivalent dun vritable retour chariot. <html> <head> <title>Mon premier document HTML</title> </head> <body> Bonjour<BR> tout<BR> <BR> <BR> le monde ! </body> </html> exemple6
H.Sahsah - WEB

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
La balise <P> : marqueur et conteneur , il a le mme effet que <BR> mais rajoute une ligne vierge. <html> <head> <title>Mon premier document HTML</title> </head> <body> Bonjour<P> le monde ! </body> </html> exemple7
H.Sahsah - WEB

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
La balise <P> : marqueur et conteneur , il a le mme effet que <BR> mais rajoute une ligne vierge. <html> <head> <title>Mon premier document HTML</title> </head> <body> <P ALIGN=left>Bonjour <P ALIGN = center> le <P ALIGN = right> monde ! </body> </html> H.Sahsah - WEB exemple8

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
La balise <HR> : Elle spare deux paragraphes conscutifs par un trait horizontale. Elle reconnait plusieurs attributs : WIDTH=suivi dun nombre indique la largeur du trait exprim en pixel (si ce nombre est suivi du caractre %, il reprsente le pourcentage de la largeur de la fentre) SIZE=suivi dun nombre indique lpaisseur du filet NOSHADE supprime lombrage

H.Sahsah - WEB

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
La balise <HR> : <html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body>
. Ceci est la fin dun paragraphe. <HR> cela est un autre paragraphe <HR WIDTH=25%> cela est un autre paragraphe <HR SIZE=10%> cela est un autre paragraphe <HR NOSHADE> cela est un autre paragraphe

</body> </html>
H.Sahsah - WEB

exemple9

HTML
LES COMMANDES RELATIVES AU PARAGRAPHE
La balise <Hn> : n est ombre allant de 1 6, elle permet dafficher 6 niveaux de titres diffrents <html> <head> <title>Mon premier document HTML</title> </head> <body> <H1>Bonjour <H2> le <H3> monde ! </body> </html> H.Sahsah - WEB exemple10

HTML
LE TEXTE ET SES ENRICHISSEMENTS
<STRONG></STRONG> ou <B></B> pour le gras. <EM></EM> ou <I></I> pour lItalique. <U></U> pour le soulign <html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body> <H2>Ceci est la fin dun paragraphe.</H2> cela <u>est un</u> autre <B>paragraphe</B> <P align=right> <I>cela est un autre paragraphe</I> <HR > </body> </html>
exemple11
H.Sahsah - WEB

HTML
TEXTE PREFORMATE
<PRE></PRE> <html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body> <PRE> |Ceci est la fin dun paragraphe. |cela est un autre paragraphe |cela est un autre paragraphe <HR > </PRE> </body> </html>
H.Sahsah - WEB

exemple12

HTML
TEXTE PREFORMATE
<PRE></PRE> <html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body> <PRE> |Ceci est la fin dun paragraphe. |cela est un autre paragraphe |cela est un autre paragraphe <HR > </PRE> </body> </html>
H.Sahsah - WEB

exemple12

HTML
TEXTE PREFORMATE

Il existe des conteneurs permettant dafficher ce quils renferment avec une police pas fixe <code></code> <KBD></KBD> <SAMP></SAMP> <TT></TT> <html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body> <code> Ceci est la fin dun paragraphe. </code> <KBD> Ceci est la fin dun paragraphe. </KBD> <SAMP> Ceci est la fin dun paragraphe. </SAMP> <TT> Ceci est la fin dun paragraphe. </TT> <HR > </body> </html>
H.Sahsah - WEB
exemple13

HTML
VARIATION DE LA TAILLE DE LA POLICE
<BIG></BIG> permet daugmenter dun point la taille daffichage de la police <SMALL></SMALL> permet de diminuer dun point la taille daffichage de la police <FONT></FONT> accepte lattribut SIZE=n o n reprsente soit une valeur absolue (comprise entre 1 et 7) soit une valeur relative (comprise entre -2 et +4) par rapport la taille normale (valeur par dfaut gale 3). Il accepte aussi lattribut COLOR=suivi dun nom ou dune valeur de la couleur.
H.Sahsah - WEB

HTML
HTML et les couleurs HTML possde deux faons de reprer les couleurs :
Par leurs nom : il existe une liste des diffrentes couleurs. On peut trouver par exemple MistyRose, PaleGoldnrod, LightSeaGreen, PeachPuff.. Par un triplet RGB : rouge verre bleu avec une intensit exprime par un nombre hexadcimal compris entre ox00 et oxff (0 et 255)

H.Sahsah - WEB

HTML
HTML et les couleurs

<html> <head> <title> Le marqueur &lt;HR&gt;</title> </head> <body> ..Ceci est la fin dun paragraphe. . <BIG> Ceci est la fin dun paragraphe. </BIG> <FONT SIZE=6> Ceci est la fin dun paragraphe. </FONT> <HR > </body> </html> exemple14

H.Sahsah - WEB

HTML
HTML et les couleurs

Si on veut que larrire plan de lcran soit de teinte unique (jaune ple) et le texte (rose fan teinte en brun), on pourra crire: <BODY BGCOLOR= "BlancheAlmond" TEXT="RosyBrown"> Ou <BODY BGCOLOR= " 0xFFEBCD " TEXT= " #bc8F8F " >
Exemple15 exemple16

H.Sahsah - WEB