18ee
be2009 É ieS Bi Uiveiédei eShia Ai

Liene 3informatique

Sébastien Verel

vereli3s.unie.fr

www.i3s.unie.fr/

∼

ÉquipeSoBi-UniversitédeNieSophia-Antipolis

Objetifs de la séane 2

1

réerdes liensexternes

2

réerdes liensversdes doumentsspéiques

3

réerdes liensinternes

4

réerdes lienssurdeséléments graphiquesou délenhantune

ation

5

réerdes tableauxrégulierset irréguliers

6

savoir insérerdesobjets

7

savoir insérerduash, de lavidéo, dusonet desapplets

8

Savoirréer desformulairesaveles diérents modesd'envoie

Plan

1

Créer desliens

2

Créer dumultimédia

3

Créer destableaux

Créer des liens ave l'hypertexte

l'hypertexte est l'essenemême duweb

hypertexte :uneautremanièrede onevoirdesdouments

les doumentshypertexte ne réduisentpas (oudiilement) à

unlivre,sous entendu linéaire

Le web

Prinipeduweb

Système hypertexte publi fontionnantsur Internetet quipermet

de onsulter,aveun navigateur,despagesmisesen ligne dansdes

sites.

image de latoile:hyperlienentre lespages web

Les dernières dates du jour

XHTML :eXtensibleHyperTextMarkupLanguage

1986 :SGML, StandartGeneralized MarkupLanguage

1992 :HTML(TimBernes-Lee)

1996 :CSS (Casading StyleSheets)

1998 :XML

2000 :XHTML

l'alpha de l'hypertexte

élément

<

>

élémentde type ligne:

doit êtreontenu dansunautre élément(

<

>

<

>

ne ontient pasd'autreélément

<

>

Liens externes

prinipalattribut:href (hypertexte referene)

lavaleurest alorsl'adresseloaleou nond'unautredoument.

Exemple de liens externes

<p>

Ce soir, je vais au inema et

voii le <a href="http://www.alloine.fr">programme</a> <br />

Par ontre, le <a href="vide.html">vide</a> me fait peur.

</p>

Attributs de l'élément

<

>

Les attributslassiques:

id :identiantunique de l'élément

lass:indique l'ensembleauquelappartientl'élément

Attributs de l'élément

<

>

title:déni unbrefmessage

aesskey:raourilavierobtenu avetrlou alt

tabindex :ordre de parours desliensaveTAB

harset :ode dujeu de aratère dulien href

type :type MIMEdudoument ible

rel:nature de dépendane entre lesdoument soureetible

(index, next, prev)

Exemple de liens externes

<a href="vide.html" shape="ret" oords="20,30,40,50">ah ah ah</a>

<a href="vide.html" shape="ir" oords="20,10,15">oh oh oh</a>

<a href="vide.html" shape="poly" oords="20,30,20,50,35,40,20,30">ih ih ih</a>

f. lienExterne.html

Attributs "événement" de l'élément

<

>

onfous:événement se délenhesur lefous

onblur :événementparpertedufous

onmouseover :événementlorsdusurvolde lasouris

onmouseout:événementlorsde l'abandon dusurvol

Exemple d'événements

<a href="vide.html"

id="lienfous"

onfous="alert('jettez-vous')"

onblur="alert('partez alors')"

onmouseover="getElementById('lienfous').style.olor='red'"

onmouseout="getElementById('lienfous').style.olor='blak'">vas y fous</a><br/>

f. lienExterne.html

Lien vers des douments partiuliers

Il sutde préiserle typeMIMEdansl'attribut type.

<a href="m02.pdf"

type="appliation/pdf">les slides</a><br />

<a href="joeLaStar.mpg"

type="video/mpeg">The video</a><br />

<a href="son.mp3"

type="audio/mp3">joli</a><br />

f. lienSpeifique.html

Créer des liens internes

utile poure déplaer àl'intérieur d'unemêmepage web

utile poure déplaer aubon emplaemntd'uneautre page

web

Créer des liens internes : Prinipe

marquer unendroit préisde lapage :anre

faireréférene àet "anre"

Exemple de lien interne

<a name="fin">Non</a> ! Rien de rien<br />

<a href="#fin">fin</a>

<a href="lienInterne.html#fin">fin de Piaf</a>

Lien qui utilise un bouton

utilisation de l'élément

<

>

<

>

<button type="button"

onlik="window.loation = 'vide.html'">

enore du vide

</button>

Lien qui l'envoie de ourriel

<a href="mailto:vereli3s.unie.fr">quand vous voulez</a>

Créer du multimedia

Il est possibled'insererdumultimedia dansles pagesweb

image

son

vidéo

animationash

applet java

Insertion d'image

Julien Champalbert

Image réative

ilest possiblede dénir deszonessur unearteréférençantun

lien

dénir leszones àl'aidede l'élément

<

>

<

/ >

Attributs:

name :permetde référenerlaarteàl'aidede usename

id :identiantde l'élément,obligatoirepour lew3 avele

même nom

alt(pour

<

>

Exemple de liens sur une image

<div>

<map name="arte" id="arte">

<area href="vide.html"

alt="desr. ible retangle"

shape="ret"

oords="0,0,30,30"/>

<area onlik="window.open('http://www.i3s.unie.fr/~verel', 800, 600)"

alt="desr. ible erle"

shape="ir"

oords="100,100,50" />

Insertion d'une en tant qu'objet

Seul les formatsgi, jpeget pngpeuvent êtreinsérer àl'aide

de l'élément

<

>

pourles autres formats, ilfaututiliserl'élément

<

>

peut êtredansun blok ou uneligne

assoié àl'élément

<

/ >

néessaire àl'"objet"

Attribut d'objet

data:ontientl'URLde l'objet,équivalent desrde

<

/ >

type :type MIMEde l'objet

standby :ontientletexteahé pendant lehargement

width et height:dimensions

Exemple d'insertion d'image

<objet data="DSC00023.JPG"

type="image/jpeg"

standby="attendre un peu"

title="Ouistreham"

width="60%">

Ouistreham beah

</objet>

f. insertionObjet.html

Insertion Flash

<objet data="vide.swf"

type="appliation/x-shokwave-flash"

standby="attendre un peu"

title="vraimet vide"

width="10%">

N'existe pas !

</objet>

Insertion video

<objet data="Chalmeton-Ennabli-Guillaume.mp4"

type="video/mp4"

standby="attendre un peu"

title="tp de SAC"

width="30%">

<param name="autostart" value="true" />

<param name="autoplay" value="true" />

<param name="loop" value="true" />

Vidéo problème...

</objet>

Insertion mp3

<objet data="07GnossienneN5.mp3"

type="audio/mp3"

standby="attendre un peu le son"

title="inonnu"

width="30%">

le son ne peut pas &eir;tre lu

</objet>

Insertion d'une applet java

<objet odetype="appliation/java"

lassid="java:nomDeLaClass.lass"

title="inonnu"

width="30%">

<param name="size" value="300" />

<param name="i" value="10" />

</objet>

f. insertionObjet.html

Créer un tableau

ne pas utiliserles tableauxpourfairelamise en page!

possibilitéde faireuntableauet même de fusionnerles ellules

brisurede symétrie:desriptionlignepar ligne

Base de la réation d'un tableau

untableau est déritparunélément

<

>

< /

>

de typeblok

une ligneest dérite par unélément

<

>

< /

>

une elluleestdérite par unélément

<

>

< /

>

Exemple de tableau simple

<table>

<aption>Tableau simple</aption>

<tr>

<td>ligne 1 olonne 1</td>

<td>ligne 1 olonne 2</td>

<td>ligne 1 olonne 3</td>

</tr>

<tr>

Attributs de table

Les attributslassiques:

id :identiantunique de l'élément

lass:indique l'ensembleauquelappartientl'élément

Attributs de table

border:largeurdesbordures(externes et internes)en pixel

obligatoirement

width :largeurtotale en pixel(px)ou pourentage(

%

| %

| %

Exemple d'attributs

<table border="2"

width="80%"

ellpading="5px"

ellspaing="3px"

frame="box"

rule="all"

summary="e tableau est un exemple dérivant les attributs de table">

f. tableauAttribut.html

Grouper les lignes

Possibiliterde grouperles lignes:

les lignesd'en-tête:

<

>

les ellulessontalors dansles éléments

<

>

les lignesentrales :

<

>

les lignesde pied:

<

>

Grouper les lignes

<thead>

<tr>

<th>Nom</th>

<th>Pr&eaute;nom</th>

<th>Note</th>

</tr>

</thead>

<tbody>

...

</tbody>

<tfoot align="enter">

Alignement du ontenu

Les attributsalignet valign permettentde gèrerl'alignement

horizontalet vertialduontenu d'uneellule

align etvalign sontdesattributsde :table,thead, tfoot,

tbody,tr,td,th

l'attribut leplus"prohe" duontenu s'applique

valeur de align:right, left,enter,justify,har

Grouper les olonnes

Possibiliterde grouperles olonnes pour appliquerles mêmesrégles

à e groupe

utilisation deséléments

<

>

<

/ >

réation de olonnes)

àdénir dansl'élément

<

>

span:nombre de olonnes dugroupe

width :largeurde haqueolonne dugroupe (px ou

%

Grouper les olonnes

<olgroup id="name" span="2" align="left">

<ol width="40%" />

<ol width="60%" />

</olgroup>

<olgroup span="1" align="enter">

</olgroup>

Fusionner les ellules

<

>

< /

>

ellulesur N olonnes

<

>

< /

>

ellulesur N lignes

Exemple de Fusion

<tr>

<td olspan="2">en haut</td>

<td rowspan="2">&agrave; droite</td>

</tr>

<tr>

<td rowspan="2">&agrave; gauhe</td>

<td>et ann&eaute;e l&agrave;</td>

</tr>

<tr>

Créer des formulaires

permetl'éhange de données entrele navigateur(lient) et

l'hébergeur(serveur)

utiliseleprotoole http

ontient destextes, motde passe, boutons radios, ase à

oher,liste de séletion

élément

<

>

élémentblok,maisne peut ontenird'autre

<

>

Balises prinipales ave

<

>

élément

<

>

regroupe dansleformulaire

élément

<

>

légende dugropede formulaire

élément

<

/ >

hamp simplede formulaire

élément

<

/ >

étiquette expliatived'un hamp

élément

<

/ >

Attribut de form

ation (obligatoire):hier,mode de traitementduformulaire

method :méthode d'envoiesur leserveur(post ou get)

id :identiation duformulaire

entype:type desdonnéestransmises

Envoie par email

<FORM NAME="nom_du_formulaire" ACTION="mailto:votre_e-mail" METHOD="post" ENCTYPE="text/plain">

Bouton d'envoie

<form ation="page.php" method="post">

<p><label>Votre prénom : <input type="text" name="prenom" /></label></p>

<p><input type="submit" value="Envoyer le formulaire" /></p>

</form>

Objetifs de la séane 2

1

réerdes liensexternes

2

réerdes liensversdes doumentsspéiques

3

réerdes liensinternes

4

réerdes lienssurdeséléments graphiquesou délenhantune

ation

5

réerdes tableauxrégulierset irréguliers

6

savoir insérerdesobjets

7

savoir insérerduash, de lavidéo, dusonet desapplets

8

Savoirréer desformulairesaveles diérents modesd'envoie