HTML Merzougui

Langage HTML Hyper Texte Markup Langage
M.MERZOUGUI
Prsentation et gnralits
Quest ce que HTML?
Le html HyperText Mark-Up Language est le langage qui va vous permettre de structurer une page Web l'aide de plusieurs balises, cest avec ces fameuses balises qu'on va crer une simple page Web avec des liens hypertextes, a veut dire des relations entre d'autre pages Web par un simple click, bien sur on peut faire plus que a "insrer des images" etc
M.MERZOUGUI 2
Prsentation et gnralits
La description dun document HTML passe par lutilisation de BALISES. Une balise est dlimit par les signes < et > entre lesquels figure le nom de la balise. Par exemple, la balise de retour la ligne est <BR>. La plupart du temps, on utilise une balise de dbut et une balise de fin, qui dfinissent les proprits de lintervalle. Exemple <B> criture en gras </B>
M.MERZOUGUI
Structure d'une page HTML:

Voici quoi ressemble le code d'une page HTML:  <html> <head> <title>le titre de la page</title> </head> <body> le corps de la page </body> </html>
M.MERZOUGUI
La balise - Commentaire
Commentaire
Les commentaires peuvent tre placs nimporte o dans un document HTML condition de ne pas tre imbriqus. Ils sont placs entre les chanes de caractres  .
Exemple 
M.MERZOUGUI
La balise - html - head

html Cest le premier marqueur ou balise que lon trouve dans un document HTML. Tout le document que sera crit par la suite (texte ou marqueur) sera entre la balise <html> et </html>.
En-tte <head> Len-tte du document est rserv aux mta-informations (les information relative au document) comme son titre. Ces mta-informations doivent tre places entre les balises <head> de dbut et </head> de fin.
M.MERZOUGUI
title
La balise - title <title> Titre </title>
Chaque document HTML, pour tre correct, doit disposer dun titre. Le titre apparat le plus souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un ensemble plus large comme index WAIS par exemple. Le titre sert aussi lorsquun navigateur World Wide Web dispose dune fonction hotlist ou bookmark pour fournir un accs rapide vos documents favoris.
M.MERZOUGUI
La balise - body Corps du document <body>

Le corps du document, ce qui sera effectivement affich par le navigateur Web, est balis par les commandes: <body> et </ body> .
Exemple
<body> <p> Ceci est le premier essai </p> </ body>
M.MERZOUGUI 8
Nous allons commencer par crer un document html trs petit. Lancez bloc note et recopiez le texte suivant:
<html> <head> <title> essai n1 </title> </head> <body>
Bonjour tout le monde </body> </html>
M.MERZOUGUI 9
La base : essai n1
Aprs avoir enregistrer le fichier vous n'avez qu' l'ouvrir pour voir le rsultat,
M.MERZOUGUI
10
La base : essai n1
Le titre
Le corps
M.MERZOUGUI
11
La base
Remarque 1
HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents.
Remarque 2
La page texte HTML est compose partir de balises qui peuvent tre dfinies avec des attributs prcisant les conditions d'utilisation de la balise. Elles sont ouvertes puis fermes et dfinissent comment le navigateur interprte le texte inclus dans la balise (<balise> texte </balise>).
M.MERZOUGUI
12
Balises trs utiles:

Voici une liste de balises et leurs fonctionnalit
<br> :pour retourner la ligne. <b> :pour mettre un texte en gras. <p> :pour dclarer un paragraphe. <hr> :inser une ligne horizontal. <center> :pour mettre un texte ou un objet au centre <font size=3 color="green">:pour dfinir la couleur et la taille d'un text
Et bien sur il faut insrer le texte ou l'objet en question entre la balise concerne. par exemple <b>ce texte est en gras</b> et la mme chose pour la balise font: <font size=3 color="green">ce texte est vert </font>
M.MERZOUGUI
13
Exemple 1
<html> <head> <title> Deuxime essai </title> </head> <body> <br>Retourner la ligne.</br> <b>Mettre un texte en gras.</b> <p> Dclarer un paragraphe.</p> <center>Mettre un texte ou un objet au centre.</center> <font size=3 color="green">Dfinir la couleur et la taille d'un text.</font> </body> </html>
M.MERZOUGUI 14
Exemple 2
<html> <head> <title> Deuxime essai </title> </head> <body bgcolor="red"> <hr></hr> <br>Retourner la ligne.</br> <b>Mettre un texte en gras.</b> <p> Dclarer un paragraphe.</p> <center>Mettre un texte ou un objet au centre.</center> <font size=3 color="green">Dfinir la couleur et la taille d'un text.</font> <hr></hr> </body> </html>
M.MERZOUGUI 15
Tailles de polices
Il existe 7 tailles de polices. La commande est <font size =n> </font> ou n prend les valeurs de 1 7. 1, petit caractres, 7, gros caractres. La police par dfaut possde la taille 3. La taille de la police peut tre fixe dans len-tte du document par la commande: <font size=n> ou n prend les valeurs de 1 7.
M.MERZOUGUI 16
Tailles de polices
Exemple 1 <html> <head> <title> Exemple 1 </title> </head> <body> <basefont size=5> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules 5<br> MAJUSCULES - minuscules </body> </html>
M.MERZOUGUI
17
Tailles de polices
Exemple 2 <html> <head> <title> Exemple 2 </title> </head> <body> <font size=7>MAJUSCULES - minuscules taille 7<br> <font size=6>MAJUSCULES - minuscules taille 6<br> <font size=5>MAJUSCULES - minuscules taille 5<br> <font size=4>MAJUSCULES - minuscules taille 4<br> <font size=3>MAJUSCULES - minuscules taille 3<br> <font size=2>MAJUSCULES - minuscules taille 2<br> <font size=1>MAJUSCULES - minuscules taille 1<br> <font size=3> La taille des lettres d'un mot peut <font size=7>V<font size=6>A<font size=5>R<font size=4>I <font size=3>E<font size=2>R </body> </html>
M.MERZOUGUI 18
Tailles de polices
M.MERZOUGUI
19
Couleurs
HTML propose deux faons de coder une couleur :
1. Par son nom
Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples sont donnes dans le tableau ci-dessous.
M.MERZOUGUI
20
Couleurs
2. Par le triplet RGB
Toute couleur peut tre dcompose en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'o RGB) d'intensit convenable. Cette intensit est exprime en un nombre compris entre 0 et 255. Ce nombre est cod en hexadcimal : il est alors compris entre 0 et FF. Par exemple, #BA1B85 code une intensit de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133) pour le bleu qui donne :
M.MERZOUGUI
21
Couleurs exemple 1
<HTML> <HEAD> <TITLE>Texte en couleurs</TITLE> </HEAD> <BODY> <FONT color="red">Rouge</FONT> <BR> <FONT color="#FF0000">Rouge</FONT> <BR> <FONT color="green">Vert</FONT> <BR> <FONT color="#008000">Vert</FONT> <BR> <FONT color="blue">Bleu</FONT> <BR> <FONT color="#0000FF">Bleu</FONT> <BR> <FONT color="yellow">Jaune</FONT> <BR> <FONT color="#FFFF00">Jaune</FONT> <BR> <FONT color="#magenta">Magenta</FONT> </BODY> </HTML> Autre ..\couleur.html
M.MERZOUGUI
22
Couleurs exemple 2
<html> <head> <title> Exemple 2 </title> </head> <body> <font size=7 color="red">MAJUSCULES - minuscules taille 7<br> <font size=6 color="blue">MAJUSCULES - minuscules taille 6<br> <font size=5 color="black">MAJUSCULES - minuscules taille 5<br> <font size=4 color="yellow">MAJUSCULES - minuscules taille 4<br> <font size=3 color="green">MAJUSCULES - minuscules taille 3<br> <font size=2 color="magenta">MAJUSCULES - minuscules taille 2<br> <font size=1 color=#990066>MAJUSCULES - minuscules taille 1<br> <font size=3 color=#9933CC> La taille des lettres d'un mot peut <font size=7 color=#999933>V<font size=6>A<font size=5>R<font size=4>I<font size=3>E<font size=2>R </body> </html>
M.MERZOUGUI 23
Les Enttes <Hx> avec x :16

Ces enttes servent diviser le texte en section de la mme manire quun livre. Le langage HTML reconnat six niveaux den-tte numrots de 1 6. Le niveau le plus lev est le 1, le plus petit est le 6.
Exemple :
<h1> TITRE PRICIPALE </h1>
M.MERZOUGUI
24
Les Enttes <Hx> exemple

<html> <head> <title> essai n3 </title> </head> <body> <h1> TITRE PRICIPALE </h1> <h2> TITRE SECONDAIRE </h2> <h3> paragraphe principale </h3> <h4> paragraphe secondaire </h4> <h5> titre paragraphe 1 secondire </h5> <h6> texte1, texte1, texte1, texte1, texte1, </h6> <h5> titre paragraphe 2 secondire </h5> <h6> texte2, texte2, texte2, texte2, texte2, </h6> </body> </html>
M.MERZOUGUI
25
Sparateurs
Contrairement tous les autres systmes de traitement de texte, le retour de chariot na aucune valeur en HTML. Cest le navigateur Web lui-mme qui dfinira le passage la ligne en fonction de facteurs comme la taille des polices de caractres, la largeur de la fentre de visualisation etc. De mme, plusieurs espaces dans un document HTML seront ramens un seul.
<P> Cette commande </P> (fin de paragraphe) termine un paragraphe et insre une ligne vide aprs le paragraphe.
M.MERZOUGUI 26
Sparateurs (suite)
Exemple :
<HR WIDTH=75%> trace une ligne sur 75% de la largeur de la fentre.
<HR SIZE="5"> trace une ligne dpaisseur 5 pixels.
<HR WIDTH=75% & ALIGN=LEFT> trace une ligne sur 75% de la largeur de la fentre avec un alignement gauche. NOSHADE Lorsquil est prsent dans le marqueur <HR> leffet est une ligne pleine sans ombrage.
M.MERZOUGUI
27
Sparateurs (suite)
<NOBR> </NOBR> cette commande permet de mettre du texte sans retour la ligne. <WBR> cette commande permet de forcer un retour la ligne dans un texte encadr par <NOBR>.
<HR> pour une ligne horizontale de sparation:
WIDTH fait varier la largeur de la ligne en % (valeur par dfaut 100%) SIZE fait varier lpaisseur de la ligne en pixel (valeur par dfaut 1)
ALIGN fait un alignement de la ligne suivant les 3 possibilits: CENTER par rapport au centre de la fentre, LEFT par rapport la gauche de la fentre, RIGHT par rapport la droit de la fentre.
Le paramtre ALIGN a un effet que lorsque la longueur de la ligne est infrieur 100%.
M.MERZOUGUI 28
Sparateurs (exemple 1)
<html> <head> <title> essai n4 </title> </head> <body> <H4> HR<HR> HR WIDTH="75%" <HR WIDTH="75%"> HR WIDTH="25%" <HR WIDTH="25%"> HR WIDTH="50%" & SIZE="5" <HR WIDTH="50%" & SIZE="5"> HR WIDTH="50%" & SIZE="20" <HR WIDTH="50%" & SIZE="20"> HR WIDTH="50%" & SIZE="5" ALIGN=LEFT HR WIDTH="50%" & SIZE="5" <HR WIDTH="50%" & SIZE="5" ALIGN=LEFT>
M.MERZOUGUI
HR WIDTH="50%" & SIZE="5" ALIGN=LEFT NOSHADE HR WIDTH="50%" & SIZE="5" <HR WIDTH="50%" & SIZE="5" ALIGN=LEFT NOSHADE> </H4> </body> </html>
29
M.MERZOUGUI
30
<HTML> <HEAD> <TITLE>Sparateurs</TITLE> </HEAD> <BODY> Placons quelques sparateurs <BR><BR> Sparateur par dfaut (largeur 100% et centr) <BR> <HR> <BR> Largeur du sparateur : 300 pixels <BR> <HR width=300> <BR> Largeur du sparateur : 50% de la largeur de l'cran <BR> <HR width="50%"> <BR> Taille du sparateur : 10 pixels <BR> <HR size=10> <BR>
M.MERZOUGUI
Couleur du sparateur : rouge et la largeur est de 30% <BR> <HR color="#FF0000" width="30%"> <BR> Sparateur align droite d'une largeur de 30 pixels <BR> <HR align="right" width=30> <BR> Sparateur align gauche d'une largeur de 50 pixels en bleu <BR> <HR align="left" width=50 color="#0000FF"> <BR> </BODY> </HTML>
31
M.MERZOUGUI
32
Pointeurs vers un autre documents

Grce au langage HTML, vous pouvez crer un hyperlien vers un Document local, un document distant ou un signet dans ces deux types.
Lhyperlien est cr par la balise <A> Les attributs possibles sont: HREF La syntaxe complte est <A HREF= " document"> texte </A>
O HREF est un raccourci pour " Hypertexte rfrence, document dsigne le document vers lequel on pointe et texte reprsente le texte qui sera affich pour reprsenter le lien hypertexte.
Exemple :
<A HREF= fichier2.html"> pour charger le fichier2.html </A>
M.MERZOUGUI
33
Pointeurs vers un autre documents

<html> <head> <title> fichier 1 </title> </head> <body> Ce fichier permet de lancer le suivant <A HREF="fichier2.html"> texte d'appel </A> </body> </html>
<html> <head> <title> fichier 2 </title> </head> <body> Nous somme dans le fichier2.html </body> </html>
M.MERZOUGUI 34
Pointeurs: Chemin daccs relatif

Dans ce cas, relativement par rapport lendroit ou vous vous situez dans une arborescence, vous exprimez le chemin daccs vers le fichier li.
HREF="fichier2.html" HREF=tempo/version1/fichier2.html" HREF=../../fichier2.html" <html> <head> <title> fichier 3 </title> </head> <body> Ce fichier permet de lancer le suivant <A HREF="tempo/version1/fichier2.doc"> texte d'appel </A> </body> </html>
M.MERZOUGUI 35
Dans le rpertoire courant Dans le rp. 2 niveaux en dessous Dans le rp. 2 niveaux au dessous
Pointeurs: lien vers un autre site distant

Pour cela il suffit de remplacer dans lexpmle prcdent document Par une U.R.L.
Exemple :
<html> <head> <title> fichier 4 </title> </head> <body> Ce fichier permet de lancer le site suivant <A HREF="http://www.yahoo.fr"> www.yahoo.fr </A> </body> </html>
M.MERZOUGUI
36
Lien externes vers dautres protocoles

Lien pour lenvoie dun E- mail: <A HREF="mailto:aaaa@yahoo.fr"> Envoyez moi un message</A> Lien pour la lecture dun newsgroup : <A HREF="news:comp.info.systems.www.authoring.html"> groupe de discussion sur l'dition en HTML</A>
<html> <head> <title> mail </title> <body> <A HREF="mailto:aaaa@yahoo.fr"> Envoyez moi un message</A> <br> <A HREF="news:comp.info.systems.www.authoring.html"> groupe de discussion sur l'dition en HTML</A> </body> </html>
M.MERZOUGUI 37
Liens page1
vers page2
<html> <head> <title>Ma page d'accueil</title> </head> <body bgcolor=#ccccdd> <center> <h2> Ici le texte...</h2> <p> <a href="page2.html">Cliquez ici</a> </center> </body> </html>
M.MERZOUGUI
38
Liens page
<html> <head> <title>Mes premier liens</title> </head> <body bgcolor=#bababa> <center><a name="Top"> <h2> Ma seconde page </h2> <p><p> <a href="page1.htm">retour accueil</a> liens vers une page du mme dossier <p><a href="http://www.google.fr">Mon moteur de recherche...</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a href="#Top">Allez au sommet de la page</a> liens au sein d'une mme page. </center> </body> </html> ..\page1.htm
M.MERZOUGUI 39
Listes
HTML dfinit 5 types de listes: 1. Les listes numrotes ou ordonnes, 2. Les listes non numrotes dites listes puces dont les entes sont signales par un signe typographique, 3. Les listes de glossaire, 4. Les listes de menu, 5. Les listes de rpertoire.
M.MERZOUGUI
40
Listes numrotes
<html> <head> <title> Listes numrotes </title> </head> <body> <H1> <ol> <lh> Voitures allemandes <li> BMW <li> MERCEDES <li> PORSCHE </ol> </H1> </body> </html>
M.MERZOUGUI 41
Listes non numrotes

<html> <head> <title> Listes numrotes </title> </head> <body> <H1> <ul> <lh> Voitures allemandes <li> BMW <li> MERCEDES <li> PORSCHE </ul> </H1> </body> </html>
M.MERZOUGUI 42
Listes
<HTML> <HEAD> <TITLE>Listes</TITLE> </HEAD> <BODY> Chapitre 1 : type disque plein (par dfaut) <UL type="disc"> <LI>Page 1</LI> <LI>Page 2</LI> <LI>Page 3</LI> </UL> <br> Chapitre 2 : type disque vide <UL type="circle"> <LI>Page 4</LI> <LI>Page 5</LI> <LI>Page 6</LI> </UL> <br> Chapitre 3 : type carr <UL type="square"> <LI>Page 7</LI> <LI>Page 8</LI>
M.MERZOUGUI
<LI>Page 9</LI> </UL> <br> Chapitre 4 : liste numrote <OL> <LI>Page 10</LI> <LI>Page 11</LI> <LI>Page 12</LI> </OL> <br> Chapitre 5 : liste numrote avec les lettres de l'alphabet <OL type="a"> <LI>Page 13</LI> <LI>Page 14</LI> <LI>Page 15</LI> </OL> </BODY> </HTML> Test: ..\liste numrote.html
43
Deux types de listes emboter

<html> <head> <title> Deux types de listes emboter </title> </head> <body> <ol> <li> BMW <ul> <li> srie 3 <li> srie 5 </ul> <li> MERCEDES <dl> <dt> classe C <dd>180, 200, 220. <dt> classe E <dd>250, 300 </dl> <li> FIN
</ol> </body> </html>
M.MERZOUGUI
44
Style
Lutilisation de diffrents styles de polices de caractres permet de varier la prsentation dun texte. Les commandes de styles physiques sont les suivantes: <I>texte</I> <B>texte</B> <U>texte</U> <S>texte</S> <SUB>texte</SUB> <SUP>texte</SUP>
M.MERZOUGUI
met le texte en italique. met le texte en gras. souligne le texte. barre le texte. indice. exposant.
45
Style (exemple)
<html> <head> <title>Styles</title> </head> <body> <I>texte</I> met le texte en italique.<br> <B>texte</B> met le texte en gras.<br> <U>texte</U> souligne le texte.<br> <S>texte</S> barre le texte.<br> <SUB>texte</SUB> indice.<br> <SUP>texte</SUP> exposant. </body> </html>
M.MERZOUGUI
46
Style
<HTML> <HEAD> <TITLE>Texte en gras, italique, centr</TITLE> </HEAD> <BODY> <B>texte en gras</B> <BR> <I>texte en italique</I> <BR> <U>texte soulign</U> <BR> <CENTER>texte centre</CENTER> <BR>  <B><CENTER>texte centr en gras</CENTER></B>  <BR>  <B><CENTER><FONT color="red" size=2>texte en rouge, gras, centr de taille 2</FONT></CENTER></B> <BR> </BODY> </HTML> ..\format de text.html
M.MERZOUGUI 47
Style
<HTML> <HEAD><TITLE>Paragraphes et retraits</TITLE> </HEAD> <BODY> Paragraphes : <BR> Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permettra d'aligner du texte soit gauche (alignement par dfaut) soit droite, au centre ou encore en justifi <P align="right">texte align droite</P> <BR> <P align="center">texte align au centre</P> <BR> <P align="left">texte align gauche</P> <BR> <P align="justify">texte justifi : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla</P> <BR><BR> retrait de texte : <BR> <BLOCKQUOTE>votre texte</BLOCKQUOTE> <BR><BR> Titres : <BR> <H1>Titre en 1</H1> <H2>Titre en 2</H2> <H3>Titre en 3</H3> <H4>Titre en 4</H4> <H5>Titre en 5</H5> <H6>Titre en 6</H6> </BODY> </HTML> ..\format de text2.html
M.MERZOUGUI 48
TEXTE pr-format
Les espaces (plusieurs la suite), tabulations, retour chariot nont pas de valeur en HTML. La commande <PRE> </PRE> est utilise pour inclure un texte pr-format dans un document HTML. Les espacements, tabulations et retour chariot gardent alors leur sens initial.
Attention: les commandes HTML existant dans le texte pr-format seront interprtes.
M.MERZOUGUI
49
TEXTE pr-format (exemple)

<html> <head>
<title>Texte prformat</title> </head> <body> Apprendre le langage HTML :<br> <PRE> - ------- - - --- - - - Un mot d'encouragement ou un compliment fait toujours un palisir. </PRE> </body> </html>
M.MERZOUGUI 50
Les couleurs utilises dans BODY

Par dfaut le fond du document est grais clair, les caractres sont noirs, les prises dhypertextes sont bleus Il est possible de modifier ces couleurs en rajoutant la commande les options suivantes: BGCOLOR=c pour le font du document TEXT=c pour la couleur du caractres LINK=c Hypertextes non utilises VLINK=c Hypertextes utilises ALINK=c Hypertextes en slection c de #000000 # FFFFFF (hexadcimal)
M.MERZOUGUI 51
Les couleurs utilises dans BODY

<html> <head> <title>Essai de couleurs</title>
</head> <body bgcolor=#80FFFF text=blue Link=red alink=green vlink=yellow> La couleur du font est bleu clair,<br> la couleur du texte est bleu.<br> La pise d'hypertexte est rouge.<br> <a href="aaaa.html">ici</a><br> Retour: cliquer <a href="javascript:history.back()">ici</a> </body> </html>
FONT1.html
M.MERZOUGUI
52
Image dans le texte

Des images peuvent tre insres dans le texte dun document HTML, et elles sont au format GIF ou JPG.
<html> <head> <title>Image</title> </head> <body> Exemple dimage <img src="IMG_0702.gif" align=middle border=5 hspace=20 width=200 height=220> </body> </html>
M.MERZOUGUI 53
Image dans le texte

<html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<body> <A href="java.gif"><IMG src=clip_image001.gif alt="photo"></A> Cliquer ici pour voir une photo <STRONG>photo</STRONG> </body> </html> ..\image1.html
M.MERZOUGUI
54
Image dans le texte

<html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <A href="horreur-frankenstein-00004.gif"><IMG src=horreur-frankenstein00002.gif alt="photo"></A> Cliquer sur l'image pour voir une autre <STRONG>image</STRONG> </body> </html>
image3.html
M.MERZOUGUI
55
Dfilement dun objet

<html> <head>
<title></title> </head>
<body bgcolor=#bababa> <font face="Garamond" size="7" color=#9933FF><b><i></i></b> <marquee>Dfilement d'un texte :1</marquee> <marquee direction="right">Dfilement d'un texte :2</marquee direction="up"> <marquee direction="up">Dfilement d'un texte :3</marquee direction="up"> <marquee direction="down">Dfilement d'un texte :4</marquee direction="up"> </font> </body>
</html> Dfilement.html
M.MERZOUGUI 56
Tableaux
Les commandes sont les suivantes: <TABLE> </TABLE> Pour cette commandes les options suivantes sont possibles:
BORDER: trace un cadre en trait fin
BORDER =n:
trace un trait de n pixels dpaisseur
CELLSPACING=n espacement en n pixels entre les cellules CELLPADDING=n espacement autour de lcriture dans les cellules WIDTH=n ou n%
M.MERZOUGUI
largeur en pixels ou largeur relative du tableau

57
Tableaux (exmple1)
<html> <head> <title>Tableau1</title></head> <body> <center> <table border> <caption align=top>Premier tableau</caption> <tr> <td> ligne 1 ; cellule 1</td> <td> ligne 1 ; cellule 2</td> </tr> <tr> <td> ligne 2 ; cellule 1</td> <td> ligne 2 ; cellule 2</td> </tr> </table> </center> </body> </html>
M.MERZOUGUI 58
Tableaux (exmple2)
<html> <head><title>Tableau2</title></head> <body> <table border="8" CELLPADDING=10> <caption align=bottom>Deuxieme tableau</caption> <tr><th colspan=5> LETTRES</th> </tr> <tr> <td>Aa</td><td>Bb</td><td>Cc</td> <td>Dd</td><td>Ee</td> </tr> <tr> <td>Ff</td><td>Gg</td><td>Hh</td> <td>Ii</td><td>Jj</td> </tr> </table> </body> </html>
M.MERZOUGUI 59
Tableaux (exmple3)
<html> <head><title>Tableau3</title></head> <body> <table border=12 CELLSPACING=10 CELLPADDING=10> <caption align=bottom> <h1>Tableau 3</h1></caption> <tr> <th rowspan=2><font size=7> LETTRES</font></th> <td><font size=6>Aa</font></td> <td valign=top>Bb</td> <td valign=bottom>Cc</td> </tr> <tr align=right > <td align=left><font size=6>Dd</td> <td>Ee</td><td>Ff</td> </tr> </table> </body> </html>
M.MERZOUGUI 60
Tableaux (exmple4)
<html> <head><title>Tableau4</title></head> <body> <table border=12 CELLSPACING=10 CELLPADDING=10> <tr> <th rowspan=2><img src="java.jpg" width=70 height=50></th> <td><img src="java.jpg" width=70 height=50></td> <td><img src="java.jpg" width=70 height=50></td> <td><img src="java.jpg" width=70 height=50></td> </tr> <tr> <td><h1>rien</h1></td> <td><img src="java.jpg" width=70 height=50></td> <td><img src="java.jpg" width=70 height=50></td> </tr> </table> </body> </html>
M.MERZOUGUI 61
Formulaires
La commande FORM
Des formulaires peuvent tre prpars afin de saisir des donnes et les traiter au niveau du serveur.
Pour rdiger un questionnaire, il faut:
1. tablir une zone ddition en utilisant <FORM> </FORM> 2. Dfinir la mthode employer pour transmettre au serveur linformation. 3. Identifier lemplacement et le nom du programme qui devra traiter linformation. 4. Fournir, sil y a lieu, les arguments au programme de traitement des donnes.
M.MERZOUGUI
62
Formulaires(suite)
Toute cette information se trouve dans la commande suivante: <FORM METHOD="POST" ACTION="www.google.fr?xxx " >
La mthode utilise est POST, le programme de traitement se nomme www.google.fr un seul argument est fourni xxx.
M.MERZOUGUI
63
Formulaires (exemple 1)
<html><body> <form method="post" action="www.google.fr?xxx"> <p> <h4><center>Essai Formulaire</center></h4> <pre><b> <li>NOM: <input type="text" name="name" size=30> <li>ADRESSE: <input type="text" name="street.address" size=30> <li>VILLE: <input type="text" name="city" size=30> <li>PROVINCE: <input type="TEXT" name="state" size=15> <li>CODE POSTAL: <input type="text" name="ZIP" size=10> <li>PAYS: <input type="text" name="country" size=20> <li>TELEPHONE: <input type="text" name="phone" size=10> <li>COURRIER ELECTRONIQUE: <input type="text" name="email" size=30> </b></pre> <input type="submit" value="Soumettre"> <input type="reset" value="Effacer et recommencer"><p> </form><p> </html>
M.MERZOUGUI 64
<html><body><form method="post" action="www.google.fr?xxx"> <p><h4><center>Essai 2 Formulaire</center></h4> <pre><b> <li>NOM: <input type="text" name="name" size=30> <li>ADRESSE: <input type="text" name="street.address" size=30> <li>VILLE: <input type="text" name="city" size=30> <li>PROVINCE: <input type="TEXT" name="state" size=15> <li>CODE POSTAL: <input type="text" name="ZIP" size=10> <li>PAYS: <input type="text" name="country" size=20> <li>TELEPHONE: <input type="text" name="phone" size=10> <li>COURRIER ELECTRONIQUE: <input type="text" name="email" size=30> As bien lu? <dl><dt>A.<input type="radio" name="refer" value="par_hasard.">oui <dt>B.<input type="radio" name="refer" value="par_ancien.">non </b></pre> <input type="submit" value="Soumettre"> <input type="reset" value="Effacer et recommencer"><p> </form><p></html>
M.MERZOUGUI 65
<html> <body> <form> <h4>Essai 3 Formulaire<br><br> SCOLAIRE<input name="Formation" type=checkbox value="SCOLAIRE"><br> BAC<input name="Formation" type=checkbox value="BAC"><br> DEUG<input name="Formation" type=checkbox value="DEUG"> </h4> </form> </html>
M.MERZOUGUI
66
<html> <body> <form> <h4>Essai 4 Formulaire<br><br> <select name><option selected> SCOLAIRE<option> BAC<option> DEUG</select> </h4> </form> </html>
M.MERZOUGUI 67
LES FRAMES
Cette fonctionnalit est apparue avec NETSCAPE 2.0 ce qui a permit de crer des nannires, des notes de bas page, des fentres latrales etc. Ce partage de la fentre en cadres ou cellules autonomes, revient diviser la fentre en plusieurs zones appeles frames. Chaque zone est gre indpendamment des autres par un document HTML diffrent. Chaque zone porte un nom.
Attention: Le corps du fichier nest plus inclus dans

<BODY> </BODY> mais dans: <FRAMESET> </FRAMESET>
Trois commandes permettent de grer cette fonctionnalit.
M.MERZOUGUI
68
LES FRAMES (suite)

<FRAMESET ROWS COLS > </FRAMESET> permet de diviser une zone en cellules horizontales ou verticales.
ROWS ="n,n%,*, " divise la zone en cellules horizontales. n = hauteur en nombre de pixels, n%= hauteur de la cellule en pourcentage de lcran, * = hauteur restante. COLS ="n,n%,*, " divise la zone en cellules verticales. n = hauteur en nombre de pixels, n%= hauteur de la cellule en pourcentage de lcran, * = hauteur restante.
M.MERZOUGUI
69
LES FRAMES (exemple 1)

Document dappel:
<html> <head>
Doc.html
<html> <head>
<title>frame1</title> </head> <frameset cols="30,50,50"> <frame src="doc.html"> <frame src="doc.html"> <frame src="doc.html"> </frameset> </html>
<title>doc</title> </head> <body> <I>texte</I> met le texte en italique.<br> <B>texte</B> met le texte en gras.<br> <U>texte</U> souligne le texte.<br> <S>texte</S> barre le texte.<br> <SUB>texte</SUB> indice.<br> <SUP>texte</SUP> exposant. </body> </html>
70
M.MERZOUGUI
LES FRAMES (exemple 2)

<html> <head> <title>frame2</title> </head> <FRAMESET COLS="80%,*"> <FRAMESET ROWS="*,*"> <FRAME SCROLLING="no" NAME="doc1" SRC="doc1.htm"> <FRAME SCROLLING="no" NAME="doc3.htm" SRC="doc3.htm"> </FRAMESET> <FRAME SCROLLING="yes" NAME="doc2.htm" SRC="doc2.htm"> </FRAMESET> </html>
M.MERZOUGUI
71
Fichier son
Pour lancer un fichier son on utilise la balise suivante: <Embed SRC="fichier_son" LOOP="n" > </ Embed > SRC= le nom du fichier son faire jouer pendant l'affichage de la page Les types de fichiers accepts sont : midi Wav au LOOP= "n" spcifie que le morceau de musique sera jou n fois
M.MERZOUGUI
72
Exemple de fichier son

<html> <head> <title>Exemple de fichier son</title> </head> <body> <center><h1></center>Exemple de fichier son</h1></center> <embed src="hamster.wav" width="500" height="40" LOOP ="1" ></embed> </body> </html> son1.html
M.MERZOUGUI
73
Fichier vido
<EMBED SRC="fichier_video" > WIDTH="largeur" HEIGHT="hauteur" ALIGN="BOTTOM" LOOP="false" </EMBED> SRC= le nom du fichier vido. Les types de fichiers accepts sont 1. mpeg 2. mpg WIDTH= largeur en pixels de la fentre HEIGHT= hauteur en pixels de la fentre ALIGN= alignement du texte et de la fentre : "TOP", "BOTTOM", "LEFT", "RIGHT", "CENTER", "ABSMIDDLE", "ABSBOTTOM" LOOP= "true" ou "false"
M.MERZOUGUI
74
Exemple de fichier vido

<html> <head> <title>Exemple de fichier vedio</title> </head> <body> <center><h1></center>Exemple de fichier vedio</h1></center> <embed src="hallway_races.mpg" width="450" height="450"></embed> </body> </html>
vedio1.html
M.MERZOUGUI 75
LA page finale.html
FIN
M.MERZOUGUI 76

HTML Merzougui

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Merzougui

Hochgeladen von

Copyright:

Verfügbare Formate

Langage HTML Hyper Texte Markup Langage

Structure d'une page HTML:

La balise - html - head

La balise - title <title> Titre </title>

La balise - body Corps du document <body>

Balises trs utiles:

Les Enttes <Hx> avec x :16

<h1> TITRE PRICIPALE </h1>

Les Enttes <Hx> exemple

<HR SIZE="5"> trace une ligne dpaisseur 5 pixels.

Pointeurs vers un autre documents

Pointeurs vers un autre documents

Pointeurs: Chemin daccs relatif

Pointeurs: lien vers un autre site distant

Lien externes vers dautres protocoles

Listes non numrotes

Deux types de listes emboter

</ol> </body> </html>

TEXTE pr-format (exemple)

Les couleurs utilises dans BODY

Les couleurs utilises dans BODY

Image dans le texte

Image dans le texte

Image dans le texte

Dfilement dun objet

trace un trait de n pixels dpaisseur

largeur en pixels ou largeur relative du tableau

Attention: Le corps du fichier nest plus inclus dans

Trois commandes permettent de grer cette fonctionnalit.

LES FRAMES (suite)

LES FRAMES (exemple 1)

LES FRAMES (exemple 2)

Exemple de fichier son

Exemple de fichier vido

Das könnte Ihnen auch gefallen