mini-site tremblement de terre - imagmembres-lig.imag.fr/dubousquet/docs/td07-2010.pdf · 2014. 1....

INF 112 - TD7

UJF : L1- L2 1

2010-2011 INF112 - TD7 1

MODULE INF112

TD 7

2010 – 2011

2010-2011 INF112 - TD7 2

Rappel : INF112 partie 2

Publication d’information sur Internet

• Recherche d’information sur Internet• Notions de bases pour écrire des pages web

� Semaines 7 à 9� Mise en page, lien, image, tableau …� Mini-site « tremblement de terre »

� Réalisation d’un mini-site (CC2)� Semaines 10 et 11� Site à rendre (mise en ligne) semaine 11� Evaluation : respect des consignes, ergonomie, algo

2010-2011 INF112 - TD7 3

Attention

� Les diapositives marquées de ce symbole sont àtravailler par soi-même

� Le contenu figure à l’examen

� Si des problèmes de compréhension apparaissentinterroger votre enseignant

2010-2011 INF112 - TD7 4

Rappel :

Mini-site tremblement de terre

� Constitué de 2 parties

� Texte à organiser et mettre en forme

� Données à rechercher, mettre en forme index.html

intro.html page2.html page3.html

texte.rtftexte.rtf

2010-2011 INF112 - TD7 5

Rappel


� Constitué de 2 parties

� Texte à organiser et mettre en forme

� Données à rechercher, mettre en forme pour les afficher sur une carte

données.xlsdonnées.xls

2010-2011 INF112 - TD7 6


Positionner un séismeImage 360 points sur 180

0,0

360

180

INF 112 - TD7

UJF : L1- L2 2

2010-2011 INF112 - TD7 7


Positionner un séismeImage quelconque

0,0

longueur

hauteur

2010-2011 INF112 - TD7 8

1. Correction partiel

2. Réseaux et Internet

3. Le Web

4. Introduction à HTML

5. WebExpert

Plan

2010-2011 INF112 - TD7 9

1. Correction du partiel

2010-2011 INF112 - TD7 10

2. Rappels réseaux et Internet :

Un réseau

� Définition� Ensemble d'entités reliées qui peuvent communiquer selon un certain protocole

� Exemple : le réseau téléphonique� Appareils divers (téléphone, fax, …) avec identifiant (numéro de téléphone)

� Moyens de communication (fils téléphoniques, fibre optique, cable, satellite, …)

2010-2011 INF112 - TD7 11


Internet

� Qu'est ce que le réseau Internet ?� réseau mondial connectant des ordinateurs selon un protocole qui lui est propre : IP

� IP = Internet Protocol

� Réseau de réseaux

� Intérêt : pas de structure centrale� fonctionne en cas de problème local

� évite la saturation due au passage par un point central

2010-2011 INF112 - TD7 12

� Pour quoi ?� web, mail, telnet, ftp, chat IRC, news, etc..

� Par qui ?� universitaires, entreprises, particuliers.

� Quelques chiffres� ~110 00 000 internautes en Europe déc. 2006

� ~1 100 000 000 dans le monde en déc. 2006


Internet aujourd’hui

INF 112 - TD7

UJF : L1- L2 3

2010-2011 INF112 - TD7 13

� Web = "toile d'araignée"

� Web = "World Wide Web"

� Définition :

� document virtuel considérable constitué de pages d'informations (page web).

3. Le Web :

Définition

2010-2011 INF112 - TD7 14

� Définition « hypertexte » : � document non linéaire constitué de pages permettant de passer de l'une à l'autre par des liens (liens hypertexte)

� créé au CERN en 1989

� Web = hypertexte + réseau

� Web ≠ Internet !!

3. Le Web :

Hypertexte

2010-2011 INF112 - TD7 15

� Constituée d’une ou plusieurs ressources distinctes

� document textuel souvent écrit en HTML (HyperText Markup Language)

� Images, amimations, sons, programmes (applets)

3. Le Web :

Page web

2010-2011 INF112 - TD7 16

� Avec un programme informatique :

� Appelé : butineur, navigateur, browser, client, …

� Exemple : IE, Firefox, Safari, …

3. Le Web :

Page web : lecture

2010-2011 INF112 - TD7 17

� Avec un programme informatique

� Appelé : butineur, navigateur, browser, …

� Exemple : IE, Firefox, Safari, …

3. Le Web :

Page web : lecture

2010-2011 INF112 - TD7 18

3. Le Web :

Page web : serveur web

� Pour être visible sur Internet, une page doit être installée sur un ordinateur connecté à Internet

� La machine doit avoir un programme spécial appelé serveur HTTP

� Par extension, on parle de serveur web

INF 112 - TD7

UJF : L1- L2 4

2010-2011 INF112 - TD7 19

INTERNET

Serveurhttp

Clienthttp

Butineur

HTML

HTML HTML

HTML

HTML

HTML

http://java.sun.com/jdk1.3/demo/applets/Clock/examp le1.html

1. Demande de chargement d ’une page web

Example1.html

3. Chargement de la page html<HTML>

<HEAD><TITLE>A Clock (1.1)</TITLE>

</HEAD><BODY>

<h1>A Clock (1.1)</h1><hr><applet code="Clock2.class"

width=170 height=150><param bgcolor="C0C0C0">

</applet>....

</BODY>

HTML

4. Affichage

2. Recherche localedu document

3. Le Web :

Une architecture client serveur

2010-2011 INF112 - TD7 20

3. Le Web :

URL = Uniform Ressource Locator

� Localisation d'un document : � par le nom du protocole permettant d’y accéder,

� le nom de la machine (serveur),

� le chemin pour accéder au document (répertoires),

� nom du document.

� Syntaxe: méthode://nomserveur/répertoires/fichier

� méthode : http, mailto, ftp, file, news

� nomserveur : nom d’identification de la machine

� fichier : nom de fichier

2010-2011 INF112 - TD7 21

3. Le Web :

Des protocoles pour échanger les fichiers

� HTTP� Hyper Text Transfer Protocol

� Pour échanger des pages web

� HTTPS� HTTP sécurisé

� FTP� File Transfer Protocol

� Pour récupérer des fichiers distants

2010-2011 INF112 - TD7 22

1. Correction partiel

2. Réseaux et Internet

3. Le Web

4. Introduction à HTML1. Principes généraux

2. Balises élémentaires

3. Les liens

4. Les images

5. Les chemins

6. Les tableaux

5. WebExpert

Plan

2010-2011 INF112 - TD7 23

4. Introduction à HTML

Principes généraux

� Documents textuels� peuvent être produits par un simple éditeur (ex: bloc note )

� pas de mise en forme

� consignes de présentations avec des « balises »

� HTML = langage de balisage

� Le CLIENT http interprète les balises et réalise mise en forme et les liens

� Client HTTP = butineur, navigateur, browser

2010-2011 INF112 - TD7 24

4.1 Introduction à HTML – Principes généraux

Structure du document

� Doit commencer par <HTML> et finir par </HTML>

<html >

<head ><title >Mon premier document HTML</ title ></ head ><body ><H1 ALIGN=" CENTER">Ma page HTML</ H1><HR><p><b>DUPONT</b> Laurent</ p><p><i >filière : DEUG SV-ST</ i >à l'< a href ="http://www.ujf-grenoble.fr ">université

Joseph Fourier</ a></ p><p>Mes moteurs de recherche …</ body ></ html >

INF 112 - TD7

UJF : L1- L2 5

2010-2011 INF112 - TD7 25

<HTML><HEAD>

<TITLE >La page à toto</ TITLE ></ HEAD><BODY>Bienvenue dans la page a toto.</ BODY>

</ HTML>


Structure du document

� Une entête, délimitée par <HEAD> et </HEAD>

� Un corps, délimité par <BODY> et </BODY>� Même s’il n’y a pas de contenu

2010-2011 INF112 - TD7 26


L’entête

� contient des informations qui ne sont pas affichées dans la fenêtre

� contient un titre (même vide) � délimité par <TITLE> et </TITLE>

� titre = � ce qui apparaît dans la barre de titre

� utilisé pour nommer la page lorsque l'on fait un "favori" (ou "signet")

� parfois utilisé par les moteurs de recherches

� contient parfois des informations « meta »� information qui décrit le contenu du document � date création, auteur, mots-clefs…

2010-2011 INF112 - TD7 27


L’entête : exemple

<HEAD><TITLE>Guide pratique et progressif du langage HTML</TITLE><META NAME="description" CONTENT="Guide pratique et progressif du langage HTML pour les nuls, explique comment créer facilement de belles pages WEB avec un simple éditeur - Point d'entrée du guide.">

<META NAME="keywords" CONTENT="guide, pratique, progressif, langage, html, editeur, faire, créer, creer, création, creation, conception, facile, belles, page, web, site, homepage, simple, pour, les, nul, nuls, frontpage, dreamweaver, homesite, webexpert, webedit, hotdog, golive, activex, entrée, entree, guide" LANG="fr">

<META NAME="author" CONTENT="[email protected] (Richard R. BAUD)">

<META NAME="copyright" CONTENT="© 1998-2000 Richard R. BAUD">

</HEAD>2010-2011 INF112 - TD7 28

4.2 Introduction à HTML – Balises élémentaires

Corps du texte : balises simples

� Niveaux de titre (Headers)� <H1> … </H1> : Exemple de header de niveau 1� <H2> … </H2> : Exemple de header de niveau 2

� Paragraphe : <P> … </P> insère automatiquement une ligne blanche

� Retour à la ligne : <BR> (break row) � Trait horizontal occupant la largeur de la fenêtre : <HR> (horizontal row)

� Style du texte<B> … </B> : texte en gras<I> … </I> : texte en italique<U> … </U> : soulignés (underline)<S> … </S> : caractères barrés (strike)

2010-2011 INF112 - TD7 29


Corps du texte : balises simples

� Marqueurs physiques :� contraint le client à modifier l'aspect physique des caractères� inconvénient: si le client ne possède pas la police demandée, il n'a pas

d'alternative� Exemples <B> et </B>, <I> et </I>, <U> et </U> …

� Marqueurs sémantiques :� dépendent du contexte� permettent un plus large choix pour la « programmation » par feuilles de

style� laissent au client une possibilité de s'adapter� Exemples :

� <DFN> et </DFN> définition , <CITE> et </CITE> source de citation� <BLOCKQUOTE> et </BLOCKQUOTE> citation� <ADDRESS> et </ADDRESS> adresse, habituellement en italique � <EM> … </EM> (emphasis) met en valeur, hab. en italique � <STRONG> et </STRONG> met en valeur, hab. en gras

2010-2011 INF112 - TD7 30


Corps du texte : caractères spéciaux

� Pour coder les lettres accentuées et d’autres symboles, on utilise un codage spécial

� Quelques exemples: � â â � é é� & & (ampersand) "et" commercial � > > (greater than) � < < (less than) � " " (quotation) double guillemet � (non-breaking space) espace insécable

� Pour les accents, on indique� la lettre accentuée (a,e,i,o,u) � puis le type d'accent (circ,acute,grave,…)

INF 112 - TD7

UJF : L1- L2 6

2010-2011 INF112 - TD7 31


Exercice<html> <head>

<meta name="auteur" content="Monsieur P."><title>MrPresse</title>

</head><body text="#000000" bgcolor="#CEF0F0"><h1>Carnet d'adresses :</h1>Ce paragraphe ne présente <b> pas grand intérêt </b>si ce n'est celui d'être constitué de suffisamment de caractères pour dépasser la <i> longueur standard </i> d'une ligne.<br><hr WIDTH="100%"><p>abracadabra <br><br></body> </html> 2010-2011 INF112 - TD7 32


Corps du texte : listes sans numéro

Titre de la liste� premier point

� deuxième point

� premier point

� deuxième point � premier point sec.

� deuxième point sec.

<LH> Titre de la liste </ LH> <UL>

<LI >premier point</LI><LI >deuxième point</LI>

</ UL>

<UL><LI >premier point<LI >deuxième point<UL>

<LI >premier point sec.</LI><LI >deuxième point sec.</LI>

</ UL></ UL>

2010-2011 INF112 - TD7 33


Corps du texte : listes avec numéro

<OL><LI >premier point</LI><LI >deuxième point</LI><OL>

<LI >premier point sec. </LI><LI >deuxième point sec.</LI>

</ OL></ OL>

� Numérotation réalisée automatiquement par le client1. premier point

2. deuxième point 1. premier point sec.

2. deuxième point sec.

2010-2011 INF112 - TD7 34


Exercice<ul><li>Chapitre 1 : geometrie<ol><li>le carre</li><li>le losange</li><li>le rectangle</li>

</ol></li><li>Chapitre 2 : algebre<ol><li>les entiers</li><ul><li>naturels</li><li>relatifs</li>

</ul><li>les reels</li>

</ol></li></ul>

2010-2011 INF112 - TD7 35

Ce titre est au centre

<H1 align = center > Ce titre est au centre </ H1>

<H2 align = left > Cette ligne est justifiée à gauche </ H2>

<P align = right > Ce paragraphe justifié à droite. Bla bla bla bla bla bla bla. Ce paragraphe justifié àdroite. Bla bla bla bla bla bla bla. Ce paragraphe justifié à droite. Bla bla bla bla bla bla bla. </ P>

Cette ligne est justifiée à gauche

Ce paragraphe est justifié à droite. Bla bla bla bla bla bla bla. Ce paragraphe est justifié à droite. Bla bla bla bla bla bla bla. Ce

paragraphe est justifié à droite. Bla bla bla bla bla bla bla.


balises paramétrées : notion d’attribut

2010-2011 INF112 - TD7 36

<BODY background =" le_chemin_unix/mon_image.jpeg " >

permettra d'utiliser comme fond d'écran un pavage constitué à partir de l'image indiquée.


balises paramétrées : notion d’attribut

INF 112 - TD7

UJF : L1- L2 7

2010-2011 INF112 - TD7 37

4.3 Introduction à HTML – Les liens

Les liens

un lien surl’< a href = " http://www.ufj-grenobel.fr/index.html ">Université Joseph Fourier</A>

index.html

exemple2.html

2010-2011 INF112 - TD7 38


Les liens

<A HREF="adresse_cible"> texte ou image cliquable </A> texte du lien ou image cliquable

� L'adresse cible peut être: � un document distant :

� <a href="http://www.ujf-grenoble.fr">

� <a href="http://www-valence.ujf-grenoble.fr/~girod/COURS">

� <a href="http://www.grr.ulaval.ca/grrwww/manuel/ manuel.html">

� un document local (sur le même serveur) � <a href="../repertoire/monFichier.html">

2010-2011 INF112 - TD7 39


Les liens internes

2010-2011 INF112 - TD7 40


Les liens internes

� Définir une ancre = point de référence

<A NAME="ancre"> </A>

� Définir le lien

<a href="#ancre"> texte du lien</A>

Cf. Lien en WORD - TP2

2010-2011 INF112 - TD7 41


Les liens internes

Recherches de toutes sortes : moteurs, annuaires, e ncyclopédies,...

<a href="#annuaires"> Annuaires </a> * <a href="#moteur"> Moteursde Recherche </a> *<a href="#recherche"> Recherches spécialisées </a> * <a href="#encyclopedie">Encyclopédies</a> * <a href="#revues">Périodiques scientifiques</a>

<a NAME="annuaires"></a> Annuaires :

Annuaire Universitaire : ...Annuaire de l'Enseignement et de la Recherche (UREC ) : ...Les pages blanches : ...Les spectacles : ...

<a NAME="moteur"></a> Moteurs de Recherche :

Google : ...AltaVista : ...

2010-2011 INF112 - TD7 42


Les liens internes

Une ancre à l'intérieur d'un fichier local …<a href="../repertoire/monFichier.html#ancre">

… ou distant :<a href="http://www-valence.ujf-

grenoble.fr/~girod/COURS/Cours.html#Heading4">

<a href=" ../repertoire/monFichier.html#ancre ">

<a name=" #ancre "> < a>

monFichier.html

INF 112 - TD7

UJF : L1- L2 8

2010-2011 INF112 - TD7 43


Les liens mailto

� Pour envoyer un mail<A href="mailto:[email protected]"> Envoyer un mail à Toto </A>

Envoyer un mail à Toto

2010-2011 INF112 - TD7 44

4.4 Introduction à HTML – Les images

Les images et HTML

� Les fichiers HTML sont des fichiers textes

� Pour insérer une image, il faut faire un lienavec un fichier contenant une image

<IMG SRC="adr " ALIGN=" attribut " height= xx width= yy >

adr = adresse d'une image

Les attribut facultatifs :

"MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT"

La taille imposée de l’image est donnée par xx, yy en pixels.

2010-2011 INF112 - TD7 45

<IMG ALIGN=BOTTOMSRC="chouetteG.gif"> La chouette

<IMG ALIGN=RIGHT SRC="chouetteG.gif"> chouette < BR>nom par lequel on désigne couramment< BR>certains oiseaux rapaces nocturnes.< BR><EM>Le Petit Robert< /EM> < BR CLEAR=ALL>


Les attributs de « img »

2010-2011 INF112 - TD7 46

<IMG ALIGN=BOTTOMSRC="chouette.gif"> La chouette

<IMG ALIGN=TOP SRC="chouette.gif"> La chouette



2010-2011 INF112 - TD7 47

<IMG ALIGN=RIGHT SRC="chouette.gif"> chouette < BR>nom par lequel on désigne couramment< BR>certains oiseaux rapaces nocturnes.< BR><I >Le Petit Robert< /I >

<IMG ALIGN=LEFT SRC="chouette.gif"> chouette < BR>nom par lequel on désigne couramment< BR>certains oiseaux rapaces nocturnes.< BR><I >Le Petit Robert< /I >



2010-2011 INF112 - TD7 48

Syntaxe générale d'un lien :<A HREF="adresse_cible "> texte du lien ou image

cliquable </ A>

Exemple :<a href=" CV-anglais.html ">

<img SRC="drapeauAnglais.jpg " height= 68 width= 52>

</a >

Syntaxe générale d'une image cliquable :<a href=" adresse_cible ">< img SRC="adresse_image ">< /a >


Les images cliquables

INF 112 - TD7

UJF : L1- L2 9

2010-2011 INF112 - TD7 49

4.5 Introduction à HTML – adresses relatives et absolues

Les chemins d’accès

<A href ="../repertoire/monFichier.html">< img source ="repertoire/maPhoto.jpg">

Entre guillemets : un chemin désignant l'emplacement d'un fichier.

monFichier.html, maPhoto.jpg : noms de fichiersrepertoire/ : noms de dossiers (ou répertoire)../ : désigne le répertoire père du répertoire

courant./ : désigne le répertoire courant

2010-2011 INF112 - TD7 50

Répertoire Fichier.htm Image.jpg

Home.html

PageToto1.htmlPageFifi1.html

PageFifi2.html

PageFifi3.html

PageToto2.html

PageToto3.html

Z:\

PagesWeb

MonSite

totofifi

Poste de travail (votre PC)

CHEMIN ABSOLU : Z:/PagesWeb/MonSite/home.htmlZ:/PagesWeb/MonSite/fifi/PageFifi3.html


Les chemins d’accès absolus

2010-2011 INF112 - TD7 51



Home.html


PageFifi2.html

PageFifi3.html

PageToto2.html

PageToto3.html

Z:\

PagesWeb

MonSite

totofifi

CHEMIN RELATIF (à partir de MonSite) : home.htmlfifi/PageFifi3.html


Les chemins d’accès relatifs

2010-2011 INF112 - TD7 52



Home.html


PageFifi2.html

PageFifi3.html

PageToto2.html

PageToto3.html

Z:\

PagesWeb

MonSite

totofifi

CHEMIN RELATIF (à partir de fifi) : ../home.html../toto/PageToto3.html


Les chemins d’accès relatifs

2010-2011 INF112 - TD7 53


Les chemins d’accès

� Exprimer les chemins en relatifs permet

� de déplacer les sites web facilement

� de modifier le noms de certains répertoire

UTILISER DES CHEMINS RELATIFS

� Vous allez déplacer vos répertoires vers un serveur web

2010-2011 INF112 - TD7 54


Les chemins d’accès: exerciceZ:\

HomeSurSarado

index.html

photo.jpg

MonSite

images

Page1.html

pages

drapeau.gif

répertoire

fichier

Page2.html

Quel lien de "index.html" vers "Page1.html" ? <A HREF="../pages/Page1.html"> Vers la page 1 </A><A HREF="../../pages/Page1.html">Vers la page 1 </A><A HREF="pages/Page1.html"> Vers la page 1 </A><A HREF="../Page1.html"> Vers la page 1 </A>

INF 112 - TD7

UJF : L1- L2 10

2010-2011 INF112 - TD7 55



HomeSurSarado

index.html

photo.jpg

MonSite

images

Page1.html

pages

drapeau.gifPage2.html

Lien de "Page1.html« vers index ?<A HREF="../pages/index.html"> Accueil </A><A HREF="../../pages/index.html"> Accueil </A><A HREF="pages/index.html"> Accueil </A><A HREF="../index.html"> Accueil </A>

répertoire

fichier

2010-2011 INF112 - TD7 56

Z:\

HomeSurSarado

index.html

photo.jpg

MonSite

images

Page1.html

pages


Quel code pour afficher drapeau.gif dans "Page2.html" ? <IMG SRC="images/drapeau.gif"><IMG SRC="../images/drapeau.gif"><IMG SRC="../drapeau.gif"><IMG SRC="../../images/drapeau.gif">

répertoire

fichier


Les chemins d’accès: exercice

2010-2011 INF112 - TD7 57



HomeSurSarado

index.html

photo.jpg

MonSite

images

Page1.html

pages


Sachant que la page web doit être installée sur un serveur web, quel est le meilleur lien pour accéder à la page index.html de la Page2.html ? <A HREF="MonSite/index.html"> page accueil </A> <A HREF = "Z:/HomeSurSarado/MonSite/index.html"> page accueil </A> <A HREF="../index.html" >

répertoire

fichier

2010-2011 INF112 - TD7 58

Z:\

HomeSurSarado

index.html

photo.jpg

MonSite

images

Page1.html

pages


L'auteur du site veut ajouter un lien sur les mots "Page 2" du fichier "Page1.html" permettant d'accéder au fichier "Page2.html".Doit-il ajouter quelque chose dans Page1.html ? Si oui, quoi ?Doit-il ajouter quelque chose dans Page2.html ? Si oui, quoi ?

répertoire

fichier


Les chemins d’accès: exercice

2010-2011 INF112 - TD7 59


Les noms des fichiers

Les noms des fichiers doivent être transmissans modification par des ordinateurs utilisant des systèmes et des langues très variés.

N'utiliser ni lettre accentuée ou particulière au français, ni espace, ni barre oblique ou inverse dans un nom de fichier ou de dossier pour site Web.

2010-2011 INF112 - TD7 60

4.6 Introduction à HTML – Les tableaux

Les tableaux en HTML

� Un tableau se définit avec 3 couples de balise

� <TABLE></TABLE> pour créer un tableau

� <TR></TR> pour définir des rangées du tableau (« Table Row »)

� <TD></TD> pour définir des cellules à l'intérieur des lignes (« Table Data »)

<TABLE><TR>

<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>

</TR><TR>

<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>

</TR></TABLE>

INF 112 - TD7

UJF : L1- L2 11

2010-2011 INF112 - TD7 61

COLSPAN donne à une cellule une largeur qui est un multiple des autres colonnes

<TABLE width="200" border="2"><TR>

<TD colspan="4" >1</TD></TR><TR>

<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>

</TABLE>

ROWSPAN donne à une cellule une hauteur qui est un multiple des autres lignes <TABLE width="200" border="2">

<TR> <TD rowspan="2" >1</TD><TD>2</TD><TD>3</TD><TD>4</TD>

</TR><TR>

<TD>6</TD><TD>7</TD><TD>8</TD></TR>

</TABLE>


Attributs des balises du tableaux

2010-2011 INF112 - TD7 62



� Pour les tableaux,� On définit les cellules lignes par lignes

� Pour les cellules sur plusieurs lignes ou colonnes� On définit chaque cellule une seule fois

� On définit la cellule sur la ligne du coin supérieur gauche

Cellule définieligne 1

2010-2011 INF112 - TD7 63



L’attribut BORDER permet :1- d'afficher une ligne entourant chaque cellule du tableau

2- définir un encadrement d'épaisseur variable autour du tableau

Avec <TABLE BORDER=1> l'exemple précédent devient :

Avec <TABLE BORDER=10>l'exemple précédent devient :

2010-2011 INF112 - TD7 64



L’attribut WIDTH permet de spécifier la largeur totale d'un tableau

� en pourcentage de la largeur de la fenêtreAinsi, si vous redimensionnez cette fenêtre plus large ou plus étroite, le tableau se recalculera en conséquence

� en nombre de pixelsLa largeur du tableau est alors fixe

Exemple avec <TABLE border cellpadding=10 width="100%">

Exemple avec <TABLE border cellpadding=10 width=100>

Ne Fonctionne pas toujours comme on veut !

2010-2011 INF112 - TD7 65



L’attribut BGCOLOR="#RRGGBB" définit la couleur de

fond de la cellule.

RR, GG et BB sont les valeurs hexadécimales des

composantes Rouge(RR), Verte(GG) et Bleu(BB).

L’ attribut s'applique aussi à <body>, <TR> et <TD>

Exemple avec :<TABLE border cellpadding=10 width=100 bgcolor="#CEF0F0">

2010-2011 INF112 - TD7 66



� VALIGN permet d'aligner le contenu

� en haut VALIGN = TOP

� au centreVALIGN = MIDDLE

� au bas VALIGN = BOTTOM

� ou sur la même ligne BASELINE

Par défaut : alignement au centre

(VALIGN=MIDDLE).

<TABLE width="200" height="200" border="2"><TR>

<TD valign="top">1</TD><TD valign="middle">2</TD><TD valign="bottom">3</TD><TD baseline>4</TD></TR>

<TR><TD VALIGN="TOP">5</TD><TD VALIGN="MIDDLE">6</TD><TD VALIGN="BOTTOM">7</TD><TD BASELINE>8</TD>

</TR></TABLE>

INF 112 - TD7

UJF : L1- L2 12

2010-2011 INF112 - TD7 67


Exemple

2010-2011 INF112 - TD7 68

<TABLE BORDER CELLSPACING=1 CELLPADDING=3 WIDTH=487><TR><TD COLSPAN=2 ALIGN="CENTER">Dérouleme nt</TD><TD COLSPAN=5 ALIGN="CENTER">Modules</TD></TR><TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 1</T D><TD> Semestre 1</TD><TD >BIO110</TD><TD >CHI110</TD><TD >TUE110</TD><TD >INF112</TD><TD >OUV110</TD></TR><TR><TD >Semestre 2</TD><TD >BIO121</TD><TD >BIO122</TD><TD >CHI120</TD><TD >TUE121</TD><TD >OUV120</TD></TR><TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 2</TD ><TD >Semestre 1</TD><TD >BIO231</TD><TD >BIO232</TD><TD >STA210</TD><TD >TUE231</TD><TD >OUV230</TD></TR>

<TR><TD >Semestre 2</TD><TD >BIO241</TD><TD >BIO242</TD><TD >BIO243</TD><TD >BIO244</TD><TD >CHI242</TD></TR><TR><TD >Année 3</TD><TD COLSPAN=6 ALIGN="CENTER">Licence biologie</TD></TR></TABLE>


Exemple

2010-2011 INF112 - TD7 69

<HTML>

<HEAD>

<TITLE>ABC</TITLE>

</HEAD>

<BODY>

<table BORDER=1 >

<tr>

<td><center>Température</center></td>

<td COLSPAN="2"><center>Saison</center></td>

</tr>

<tr>

<td>Ville</td>

<td>Hiver</td>

<td>Eté</td>

</tr>

<tr>

<td>Montréal</td>

<td>-20</td>

<td>30</td>

</tr>

</table></BODY></HTML>


Exercice : résultat de … ?

2010-2011 INF112 - TD7 70

<HTML>

<HEAD>

<TITLE>ABC</TITLE>

</HEAD>

<BODY>

<TABLE BORDER CELLSPACING=1 CELLPADDING=10>

<TR>

<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

</TR>

<TR>

<TD>L</TD>

<TD COLSPAN=2 ROWSPAN=2> </TD>

<TD>E</TD>

</TR>

<TR>

<TD>K</TD>

<TD>F</TD>

</TR>

<TR>

<TD>J</TD>

<TD>I</TD>

<TD>H</TD>

<TD>G</TD>

</TR>

</TABLE>

</BODY>

</HTML>


Exercice : résultat de … ?

2010-2011 INF112 - TD7 71


Exercice : code pour … ?

Compétiti on de Curling

2010-2011 INF112 - TD7 72

5. Pour éditer des Pages Web

WebExpert

INF 112 - TD7

UJF : L1- L2 13

2010-2011 INF112 - TD7 73

5. Pour éditer des Pages Web

WebExpert

Dans le Guide de l'environnement, deslogiciels et des langages utilisés, lire :

� Le chapitre « Web Expert »

� Le chapitre « lexique HTML »

2010-2011 INF112 - TD7 74

Exercice

2010-2011 INF112 - TD7 75

<ul><li>Chapitre 1 : geometrie<ol>

<li>le carre</li><li>le losange</li><li>le rectangle</li>

</ol></li><li>Chapitre 2 : algebre<ol>

<li>les entiers</li><ul>

<li>naturels</li><li>relatifs</li>

</ul><li>les reels</li>

</ol></li></ul>

Exercice

2010-2011 INF112 - TD7 76

Exercice