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
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>
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
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
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
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
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
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
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
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
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
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
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
FIN du cours 3