Donnée N°1 Donnée N°2 Exemple :
Paris Lille
Marseille Lyon
">

La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Cours n° 3 Le langage HTML Prof. : E. BAKKI

Présentations similaires


Présentation au sujet: "Cours n° 3 Le langage HTML Prof. : E. BAKKI"— Transcription de la présentation:

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

15


Télécharger ppt "Cours n° 3 Le langage HTML Prof. : E. BAKKI"

Présentations similaires


Annonces Google