XHTML : on continue Création Site Web - Licence 2 MASSverel/TEACHING/08-09/... · Début de chier Créer des liens Multimedia Les do ct yp es XHTML 1.0 t yp e transitional: p ro

XHTML : on ontinueCré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-Antipolis25,27 septembre 2009

Début de � hierCréer des liensMultimediaObje tifs de la séan e 21 Connaitre les di�érents types de do ument (DOCTYPE)2 Savoir asso ier des mots lés à une page, et donner d'autresinformations de e type3 Savoir é rire les di�érents types de liste4 réer des liens externes5 réer des liens vers des do uments spé i�ques6 réer des liens internes7 Savoir insérer une image et du multimedia8 réer des liens sur des éléments graphiques ou dé len hant unea tion Sébastien Verel CSW

Début de � hierCréer des liensMultimediaPlan1 Début de � hier2 Créer des liens3 Multimedia

Sébastien Verel CSW

Début de � hierCréer des liensMultimediaPremière page version non "xml"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head><title> houa super </tiltle><meta http-equiv="Content-type" ontent="text/html; harset=iso-8859-1" /></head><body> ommetn rien ?</body></html> Sébastien Verel CSW

Début de � hierCréer des liensMultimediaPremière page version "xml"<?xml version="1.0" en oding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head><title> houa super </tiltle></head><body> omment rien ?</body></html> Sébastien Verel CSW

Début de � hierCréer des liensMultimediaLes do typesXHTML 1.0 type transitional : pro he de l'html< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 type stri t : pro he de l'xml : sans balise en lienave la présentation< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd">XHTML 1.0 type frameset : pour mettre des adres dans lespages (beurk)< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 : très peu utliser< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >Sébastien Verel CSW

Début de � hierCréer des liensMultimediaValider une page en fon tion du typele W3C propose un site pour valider une page selon sesre ommandations :http://validator.w3.org


http://validator.w3.org

Début de � hierCréer des liensMultimediaEn-tête du do ument ontient informations utiles à l'a� hage :<base>, <link>, <meta>, <s ript>, <style> et <title>


Début de � hierCréer des liensMultimediaEn-tête du do ument ontient informations utiles à l'a� hage : <base>, <link>,<meta>, <s ript>, <style> et <title>< title > : ontient le titre de la page<base href="http ://www.i3s.uni e.fr" / > : ra ine des� hiers de la page (absolu ou relatif)< link/ > : permet de lier, d'in orporer virtuellement d'autresdo uments :rel : nom de la relation : stylesheet, hapter, et .type : type du ontenu du � hier : text/ ss, text/javas ript,text/html, et .href : url absolue ou relative du do ument<link rel="stylesheet"type="text/stylesheet"href="monStyle. ss" />Sébastien Verel CSW

Début de � hierCréer des liensMultimediaEn-tête du do ument<meta / > : informations destinées aux serveurs, auxnavigateurs, moteur de re her he.2 formes possibles :<meta name="nom" ontent="val" /><meta http-equiv="nom" ontent="val" />Ave name :<meta name="author" ontent="verel" /><meta name="keywords" ontent="genial super mega top" /><meta name="Des ription" ontent=" reation site web"/>Ave http-equiv :<meta http-equiv="Content-type" ontent="text/html; harset=iso-8859-1" /><meta http-equiv="refresh" ontent="10; http://www.i3s.uni e.fr/" />Sébastien Verel CSW

Début de � hierCréer des liensMultimediaEn-tête du do ument<s ript> : permet d'in lure des s ripts (javas ript, et .) :<s ript type="text/javas ript"></s ript><s ript type="text/javas ript" sr =" ode.js"></s ript>< style > : permet d'in lure des stylesSébastien Verel CSW

Début de � hierCréer des liensMultimediales listes non ordonnées<ul><li>mon premier</li><li>mon se ond</li><li>mon tout</li></ul>


Début de � hierCréer des liensMultimediaLes listes ordonnées<ol><li>mon premier</li><li>mon se ond</li><li>mon tout</li></ol>


Début de � hierCréer des liensMultimediaLes listes de dé�nition<dl><dt>idiot</dt><dd> elui qui regarde le doigt</dd><dt>moustique</dt><dd>animal piquant</dd></dl>


Début de � hierCréer des liensMultimediaLes listesQuels sont les attributs de liste ?


Début de � hierCréer des liensMultimediaCréer des liens ave l'hypertextel'hypertexte est l'essen e même du webhypertexte : une autre manière de on evoir des do umentsles do uments hypertexte ne réduisent pas (ou di� ilement) àun livre, sous entendu linéaire


Début de � hierCréer des liensMultimediaLe webPrin ipe du webSystème hypertexte publi fon tionnant sur Internet et qui permetde onsulter, ave un navigateur, des pages mises en ligne dans dessites. image de la toile : hyperlien entre les pages web(rappel) web : toile Sébastien Verel CSW

Début de � hierCréer des liensMultimedial'alpha de l'hypertexteélément <a>élément de type ligne :doit être ontenu dans un autre élément (<p>, <div>, et .)ne ontient pas d'autre élément <a>


Début de � hierCréer des liensMultimediaLiens externesprin ipal attribut : href (hypertexte referen e)la valeur est alors l'adresse lo ale ou non d'un autre do ument.


Début de � hierCréer des liensMultimediaExemple de liens externes<p>Ce soir, je vais au inema etvoi i le <a href="http://www.allo ine.fr">programme</a> <br />Par ontre, le <a href="vide.html">vide</a> me fait peur.</p> f. ex02/lienExterne.html


ex02/lienExterne.html

Début de � hierCréer des liensMultimediaAttributs de l'élément <a>Les attributs valables pour toutes les balises :id : identi�ant unique de l'élément lass : indique l'ensemble auquel appartient l'élémentpermet d'appliquer des styles ou des a tions parti ulières enjavas ript


Début de � hierCréer des liensMultimediaAttributs 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

Début de � hierCréer des liensMultimediaExemple de liens externes<a href="vide.html" shape="re t" 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. ex02/lienExterne.html



Début de � hierCréer des liensMultimediaAttributs "événement" de l'élément <a>onfo us : événement se dé len he sur le fo usonblur : événement par perte du fo usonmouseover : événement lors du survol de la sourisonmouseout : événement lors de l'abandon du survol


Début de � hierCréer des liensMultimediaExemple d'événements<a href="vide.html"id="lienfo us"onfo us="alert('jettez-vous')"onblur="alert('partez alors')"onmouseover="getElementById('lienfo us').style. olor='red'"onmouseout="getElementById('lienfo us').style. olor='bla k'">vas y fo us</a><br/> f. ex02/lienExterne.html



Début de � hierCréer des liensMultimediaLien vers des do uments parti uliersIl su�t de pré iser le type MIME dans l'attribut type.


Début de � hierCréer des liensMultimediaExemples<a href=" m02.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. ex02/lienSpe ifique.html


ex02/lienSpecifique.html

Début de � hierCréer des liensMultimediaCré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


Début de � hierCréer des liensMultimediaCréer des liens internes : Prin ipemarquer un endroit pré is de la page : an refaire référen e à et "an re"


Début de � hierCréer des liensMultimediaExemple 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. ex02/lienInterne.html


ex02/lienInterne.html

Début de � hierCréer des liensMultimediaLien 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>


Début de � hierCréer des liensMultimediaLien qui l'envoie de ourriel<a href="mailto:verel�i3s.uni e.fr">quand vous voulez</a>


Début de � hierCréer des liensMultimediaCréer du multimediaIl est possible d'inserer du multimedia dans les pages webimagesonvidéoanimation �ashapplet java


Début de � hierCréer des liensMultimediaInsertion d'imageRe her her omment s'e�e tue l'insertion d'image


Début de � hierCréer des liensMultimediaImage 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

Début de � hierCréer des liensMultimediaExemple 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. ex02/lienImage.htmlSébastien Verel CSW

ex02/lienImage.html

Début de � hierCréer des liensMultimediaInsertion 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"


Début de � hierCréer des liensMultimediaAttribut 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


Début de � hierCréer des liensMultimediaExemple 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. ex02/insertionObjet.html


ex02/insertionObjet.html

Début de � hierCréer des liensMultimediaInsertion 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. ex02/insertionObjet.html



Début de � hierCréer des liensMultimediaInsertion video<obje t 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...</obje t> f. ex02/insertionObjet.htmlSébastien Verel CSW


Début de � hierCréer des liensMultimediaInsertion 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. ex02/insertionObjet.html



Début de � hierCréer des liensMultimediaInsertion d'une applet java<obje t odetype="appli ation/java" lassid="java:nomDeLaClass. lass"title="in onnu"width="30%"><param name="size" value="300" /><param name="i" value="10" /></obje t> f. ex02/insertionObjet.html

Documents

XHTML : on continue Création Site Web - Licence 2 MASSverel/TEACHING/08-09/... · Début de chier Créer des liens Multimedia Les do ct yp es XHTML 1.0 t yp e transitional: p ro