| Paris | Lille | Marseille | Lyon |
| Paris | Lille | Marseille | Lyon |
Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Cours n° 3 Le langage HTML Prof. : E. BAKKI
وزارة التربية الوطنية والتعليم العالي وتكوين الأطر والبحث العلمي الأكاديمية الجهوية للتربية و التكوين لجهة وادي الذهب وأوسرد ثانوية للا خد يجة المرجعية Lycée Lala Khadija Référentiel Le langage HTML Prof. : E. BAKKI Année scolaire 2008/2009
2
Les tableaux (Méthode)
Forme canonique de la balise TABLE : <TABLE Border=N Align="center"> <TR> <TD>Donnée N°1</TD> <TD> Donnée N°2</TD> </TR> </TABLE> Exemple : <TABLE> <TR> <TD>Paris</TD> <TD>Lille</TD> </TR> <TD>Marseille</TD> <TD>Lyon</TD> </TABLE>
3
Les tableaux Exemple <TABLE border=2 ALIGN="center"> <TR>
<TD align="center">Paris</TD> <TD align="center">Lille</TD> </TR> <TD align="center">Marseille</TD> <TD align="center">Lyon</TD> </TABLE> <TR> correspond à une ligne du tableau <TD> correspond à une donnée (une cellule) du tableau tablo.html
4
Les tableaux Exemple tablo.html
<TABLE WIDTH=80% border=10 ALIGN="center"> <COL ALIGN="center" SPAN=2> <TR> <TD>Paris</TD> <TD>Lille</TD> </TR> <TD>Marseille</TD> <TD>Lyon</TD> </TABLE> NB : Cette autre manière de centrer utilise la balise COL (que pour IE). L’attribut SPAN de la balise COL définit le nombre de colonnes qui seront affectées par l'attribut ALIGN. tablo.html
5
Les tableaux (avec en-tête)
Les balises <TH> et </TH> permettent de spécifier un en-tête Exemple : <TR> <TH> En-tête 1 </TH> <TH>En-tête 2 </TH> </TR> Exercice : Reproduire ce tableau, avec en-tête tablo.html
6
Solution de l’exercice
Les tableaux (avec en-tête) Solution de l’exercice <Table border=1 align="center"> <COL align="center" span=3> <TR> <TH> Pizza </TH> <TH> Prix (d'une Moyenne) en Frs </TH> <TH> Prix (d'une Grande) en Frs </TH> </TR> <TR> <TD>5 Fromages </TD> <TD> 50 </TD> <TD> 81 </TD> </TR> <TR> <TD> Cantal </TD> <TD> 43 </TD> <TD> 70</TD> </TR> <TR> <TD> Reblochon </TD> <TD> 45 </TD> <TD> 69 </TD> </TR> <TR> <TD> Chèvre </TD> <TD> 43 </TD> <TD> 72 </TD> </TR> <TR> <TD> Bleu </TD> <TD> 45 </TD> <TD> 69 </TD> </TR> </Table> tablo.html
7
Les tableaux (cellules non proportionnelles)
<TABLE WIDTH=40% BORDER=5> <TR> <TH COLSPAN=2>En-tête tablo</TH> </TR> <TD>A</TD> <TD>B</TD> <TR > <TD COLSPAN=2 align="center">C</TD> </TABLE> tablo.html
8
Espace entre la bordure et le contenu de la cellule du tableau de 15
Les tableaux (CELLPADDING) Espace entre la bordure et le contenu de la cellule du tableau de 15 <TABLE CELLPADDING=15 WIDTH=80% border=10 BORDERCOLOR="blue" ALIGN="center"> <COL ALIGN="center" span=2> <TR> <TD>Paris</TD> <TD>Lille</TD> </TR> <TD>Marseille</TD> <TD>Lyon</TD> </TR> </TABLE> tablo.html
9
Tableau avec espace de 18 entre les cellules
Les tableaux (CELLSPACING) Tableau avec espace de 18 entre les cellules <TABLE CELLSPACING=18 CELLPADDING=15 WIDTH=80% border=10 BORDERCOLOR="blue" ALIGN="center"> <COL ALIGN="center" span=2> <TR> <TD>Paris</TD> <TD>Lille</TD> </TR> <TD>Marseille</TD> <TD>Lyon</TD> </TR> </TABLE> tablo.html
10
Contenu de Cadres (Frameset) et Cadres (Frame)
Les balises <FRAMESET> et </FRAMESET> permettent de définir un contenu de cadre dans une page HTML. On indique ainsi la structure de la page. Exemple : <FRAMESET COLS="20%, 80%"> </FRAMESET> NB : Dans un document utilisant des cadres, il n'y a pas de section BODY (donc, aucune autre balise ne sera prise en compte). La balise <FRAME> définit un cadre à l'intérieur d'un Frameset. Exemple : <HTML> <HEAD> <TITLE> Les cadres </TITLE> </HEAD> <FRAMESET COLS="40%,*"> <FRAME NAME="ZoneA" SRC="Page1.html"> <FRAME NAME="ZoneB" SRC="Page2.html"> </FRAMESET> </HTML> cadres1.html
11
Les principaux attributs de Frameset et de Frame
COLS = « liste de valeurs de largeur des colonnes » (en pixel ou en %) ROWS = « liste de valeurs de la hauteur des rangées » BORDER = nombre Frame : NORESIZE = Noresize | Resize SCROLLING = Auto | No | Yes <HTML> <HEAD> <TITLE> Les cadres, 4 pages </TITLE> </HEAD> <FRAMESET COLS="60%,*" ROWS="70%,*"> <FRAME NAME="nom1" SRC="Page1.html"> <FRAME NAME="nom2" SRC="Page2.html"> <FRAME NAME="nom3" SRC="Page3.html"> <FRAME NAME="nom4" SRC="Page4.html"> </FRAMESET> </HTML> cadresX4.html
12
Imbrication de Frameset
<HTML> <HEAD> <TITLE> Les cadres </TITLE> </HEAD> <FRAMESET COLS="33%,*"> <FRAME NAME="nom1" SRC="Page1.html"> <FRAMESET ROWS="25%,*"> <FRAME NAME="nom2" SRC="Page2.html" SCROLLING="no"> <FRAME NAME="nom3" SRC="Page3.html" SCROLLING="yes"> </FRAMESET> <NOFRAMES> <BODY> Contenu de votre document pour les utilisateurs qui naviguent sans les cadres. </BODY> </NOFRAMES> </HTML> 25% 33% 67% 75% Cadres-imbric.html
13
Cadres avec pages cibles
<HTML> <HEAD> <TITLE> Les cadres, avec target</TITLE> </HEAD> <FRAMESET COLS="40%,*"> <FRAME NAME="gauche" SRC="menu.html" SCROLLING="yes" NORESIZE> <FRAME NAME="droite" SRC="vide.html" SCROLLING="yes"> </FRAMESET> </HTML> <html> <head> <title>Page de Menu</title> </head> <body> <center> <H3> Page de Menu </H3> </center> Faites votre choix : <br> <A Href="vide.html" Target="droite"> Voir la Page de départ</A> <ol> <li> <A Href="Page1.html" Target="droite"> Voir la Page N°1</A> <li> <A Href="Page2.html" Target="droite"> Voir la Page N°2</A> <li> <A Href="Page3.html" Target="droite"> Voir la Page N°3</A> <li> <A Href="Page4.html" Target="droite"> Voir la Page N°4</A> </ol> </body> </html> page1.html, etc. cadres5.html vide.html
14
FIN du cours 3
Présentations similaires
