XHTML : toujours plus fortCréation Site WebLi en e 2 MASSSébastien Verelverel�i3s.uni e.frwww.i3s.uni e.fr/∼verelÉquipe S oBi - Université de Ni e Sophia-Antipolis01 et 03 o tobre 2009

Créer des liensMultimediaCréer des tableauxDébut en CSSObje tifs de la séan e 31 réer des liens internes2 Savoir insérer une image et du multimedia3 réer des liens sur des éléments graphiques ou dé len hant unea tion4 réer des tableaux réguliers et irréguliers

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSPlan1 Créer des liens2 Multimedia3 Créer des tableaux4 Début en CSSSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAttributs de l'élément <a>title : dé�ni un bref messagea esskey : ra our i lavier obtenu ave trl ou alttabindex : ordre de par ours des liens ave TAB harset : ode du jeu de ara tère du lien hreftype : type MIME du dou ment iblerel : nature de dépendan e entre les do ument sour e et ible(index, next, prev)shape : forme de la zone de li (re t, ir le, poly, default) oords : suite des oordonnées (à partir du oin sup gau he du ontenude l'élément) des points né essaires au pré edantSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAttributs "événement" de l'élément <a>onfo us : événement se dé len he sur le fo us (à éviter)onblur : événement par perte du fo us (à éviter)onmouseover : événement lors du survol de la sourisonmouseout : événement lors de l'abandon du survol

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple d'événements<a href="vide.html"id="lienfo us"onmouseover="getElementById('lienfo us').style. olor='red'"onmouseout="getElementById('lienfo us').style. olor='bla k'">vas y fo us</a><br/> f. ex03/lienAttribut.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSLien vers des do uments parti uliers<a href="../notes-03-printable.pdf"type="appli ation/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. ex03/lienSpe ifique.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSCréer des liens internesutile pour e dépla er à l'intérieur d'une même page webutile pour e dépla er à un endroit pré is d'une autre page web

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSCréer des liens internes : Prin ipemarquer un endroit pré is de la page : an refaire référen e à et "an re"

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple 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> f. ex03/lienInterne.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSLien qui utilise un boutonutilisation de l'élément <button> omme <a><button type="button"on li k="window.lo ation = 'vide.html'">en ore du vide</button>

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSLien pour l'envoie de ourriel<a href="mailto:verel�i3s.uni e.fr">quand vous voulez</a>

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSCréer du multimediaIl est possible d'inserer du multimedia dans les pages webimagesonvidéoanimation �ashapplet java

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSInsertion d'imageRe her her omment s'e�e tue l'insertion d'image

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSImage réa tiveil est possible de dé�nir des zones sur une arte référençant unliendé�nir les zones à l'aide de l'élément <map> et <area/ >Attributs :name : permet de référen er la arte à l'aide de usenameid : identi�ant de l'élément, obligatoire pour le w3 ave lemême nomalt (pour <area>) : des ription obligatoireAstu e : vous pouvez réaliser des images liquables à l'aide de gimp(�ltres->Web->image liquable web, ensuite enregistrer votretravail, le � hier ontient alors le xhtml)Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple de liens sur une image<div><map name=" arte" id=" arte"><area href="vide.html"alt="des r. ible re tangle"shape="re t" oords="0,0,30,30"/><area on li k="window.open('http://www.i3s.uni e.fr/~verel', 800, 600)"alt="des r. ible er le"shape=" ir " oords="100,100,50" /><area href="lienAttribut.html"alt="des r. ible"shape="poly" oords="0,50,0,100,50,75"/></map></div> f. ex03/lienImage.htmlSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSInsertion d'une en tant qu'objetSeul les formats gi�, jpeg et png peuvent être insérer à l'aidede l'élément <img>.pour les autres formats, il faut utiliser l'élément <obje t>peut être dans un blo k ou une ligneasso ié à l'élément <param/ > : pour dé rire les paramètresné essaire à l'"objet"

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAttribut d'objetdata : ontient l'URL de l'objet, équivalent de sr de <img / >type : type MIME de l'objetstandby : ontient le texte a� hé pendant le hargementwidth et height : dimensions

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple d'insertion d'image<obje t data="DSC00023.JPG"type="image/jpeg"standby="attendre un peu"title="Ouistreham"width="60%">Ouistreham bea h</obje t> f. ex03/insertionObjet.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSInsertion video<obje t data="MOV00621.3GP"title="jusqu'i i"type="video/3gpp"standby="la video arrive"width="320" height="255">ben alors ?</obje t> f. ex03/insertionObjet.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSInsertion mp3<obje t data="07GnossienneN5.mp3"type="audio/mp3"standby="attendre un peu le son"title="in onnu"width="30%">le son ne peut pas &e ir ;tre lu</obje t> f. ex03/insertionObjet.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSInsertion Flash<obje t data="vide.swf"type="appli ation/x-sho kwave-flash"standby="attendre un peu"title="vraimet vide"width="10%">N'existe pas !</obje t> f. ex03/insertionObjet.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSCréer un tableaune pas utiliser les tableaux pour faire la mise en page !possibilité de faire un tableau et même de fusionner les ellulesbrisure de symétrie : des ription ligne par ligne

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSBase de la réation d'un tableauun tableau est dé rit par un élément <table> ... < /table> :de type blo kune ligne est dé rite par un élément <tr> ... < /tr>une ellule est dé rite par un élément <td> ... < /td>

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple 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><td>ligne 2 olonne 1</td><td>ligne 2 olonne 2</td><td>ligne 3 olonne 3</td></tr></table> f. ex03/tableauReg.htmlSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAttributs de tableLes attributs lassiques :id : identi�ant unique de l'élément lass : indique l'ensemble auquel appartient l'élément

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAttributs de tableborder : largeur des bordures (externes et internes) en pixelobligatoirementwidth : largeur totale en pixel (px) ou pour entage (%) ellpading : espa ement entre bordure et ontenu (px | %) ellspa ing : espa ement entre bordures de ellules (px | %)frame : a� hage des bordures externesrule : a� hage des bordures internessummary : des ription non a� hée mais améliore l'a essibilitéSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple d'attributs<table border="2"width="80%" ellpading="5px" ellspa ing="3px"frame="box"rule="all"summary=" e tableau est un exemple dé rivant les attributs de table"> f. ex03/tableauAttribut.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSGrouper les lignesPossibiliter de grouper les lignes :les lignes d'en-tête : <thead>les ellules sont alors dans les éléments <th>les lignes entrales : <tbody>les lignes de pied : <tfoot>

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSGrouper les lignes<thead><tr><th>Nom</th><th>Pr&ea ute;nom</th><th>Note</th></tr></thead><tbody>...</tbody><tfoot align=" enter"><tr>... </tr><tfoot> f. ex03/tableauGrouperLigne.htmlSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAlignement du ontenuLes attributs align et valign permettent de gèrer l'alignementhorizontal et verti al du ontenu d'une ellulealign et valign sont des attributs de : table, thead, tfoot,tbody, tr, td, thl'attribut le plus "pro he" du ontenu s'appliquevaleur de align : right, left, enter, justify, harvaleur de valign : top, middle, bottom, baseline

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSGrouper les olonnesPossibiliter de grouper les olonnes pour appliquer les mêmes réglesà e groupeutilisation des éléments < olgroup> et < ol/ > (pas de réation de olonnes)à dé�nir dans l'élément <table> avant thead, tbody ou tfoot.span : nombre de olonnes du groupewidth : largeur de haque olonne du groupe (px ou %)Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSGrouper les olonnes< olgroup id="name" span="2" align="left">< ol width="40%" />< ol width="60%" /></ olgroup>< olgroup span="1" align=" enter"></ olgroup> f. ex03/tableauGrouperColonne.html

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSFusionner les ellules<td olspan="N"> fusionne moi les olonnes < /td> : ellule sur N olonnes<td rowspan="N"> fusionne moi les lignes < /td> : ellule sur N lignes

Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSExemple de Fusion<tr><td olspan="2">en haut</td><td rowspan="2">&agrave; droite</td></tr><tr><td rowspan="2">&agrave; gau he</td><td> et ann&ea ute;e l&agrave;</td></tr><tr><td olspan="2">en bas</td></tr> f. ex03/tableauFusion.htmlSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSAsso ier un style : � hier séparéUtiliser l'élément <link> (qui est �ls de l'élément <head>)Permet de hanger de toutes les pages web qui utiliseront lemême � hier de styleattribut media : s reen | print | proje tion | aural | braille | tv |all | handheld<link rel="stylesheet"type="text/ ss"href="monStyle. ss"media="s reen"title="mon style unique" />Sébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSRégles générales de dé laration de styleséle teur : détermine l'élément (et ondition) sur lequels'applique le styledé laration de propriétés : entre a oladespropriété

h1

Sélecteur

{ }color background−colorred: ; : ;blue

propriétésynthaxe on rète en rougeéléments grammati aux en gras italiqueSébastien Verel CSW

Créer des liensMultimediaCréer des tableauxDébut en CSSSéle tion d'élémentnom de l'élément orrespondantep { olor: blue ; ba kground- olor: red ; }plusieurs éléments :p { olor: red ; ba kground- olor: yellow ; }h1 { olor: red ; ba kground- olor: yellow ; }équivalent àp, h1 { olor: red ; ba kground- olor: yellow ; } f. ex03/baliseLink.htmlSébastien Verel CSW