Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Dimension: px

Commencer à balayer dès la page:

Download "Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr"

Geoffroy Damours
il y a 8 ans
Total affichages :

1 Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

2 La balise <Objet> Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support des éléments dépend du navigateur.

3 pdf <objectdata="ca.pdf"type="application/pdf"width="400"height="600"> alt:<a href="data/test.pdf">test.pdf</a> </object>

4 flash <body bgcolor="gray"> <OBJECT WIDTH="500" HEIGHT="400"> <EMBED src="globe.swf WIDTH="300" HEIGHT="400" TYPE="application/x-shockwave-flash"> </EMBED> </OBJECT></body>

5 Audio <object type="audio/x-wav" data="belikeyou.wav" width="200" height="20"> <param name="autoplay" value="true"> alt: <a href="belikeyou">be like you.wav</a> </object>

6 HTML 5 Le nouveau standard HTML. Le projet est en cours. Problème de soutien de la part des navigateurs Projet: XHTML 2.0 Dirigeant: W3C 2006 Projet: Formulaires et application Dirigeant: Web Hypertext Application Technology (WHATWG) HTML 5

7 HTML 5 (objectifs) Les objectifs principaux: Les nouveaux traits se baseront sur html, csset javascript. Réduire les besoins des éléments externes (flash). Améliorer le traitement des erreurs. Plus de balises pour remplacer les scripts HTML 5 est indépendant du type d appareil. Le processus de développement doit être observable par le public.

8 HTML (Volets principaux). Canevas Audio video Stockage local Traitement de texte Composants du formulaire

9 HTML5: Traitement de texte <body> <article><h2>la tablette indienne bientôt disponible en Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait les frontières de l Inde? Si unités seront dans un premier temps fournies aux écoliers indiens, et des millions d autres dans les années à venir si tout va bien, le produit sera aussi disponible l an prochain en Europe, tout du moins au Royaume-Uni. Son tarif précis n a pas été dévoilé, mais il faut s attendre à un prix particulièrement compétitif.</header> Cette nouvelle n est guère étonnante. Même si nous parlons de tablette indienne, son fabricant est en fait DataWind, une société canadienne, qui dispose qui plus est de bureaux à Londres. Nommée Aakashen Inde, la tablette à bas prix est en fait l Ubislate7. <figcaption> Comment c'est possible?</figcaption> <figure> Pour atteindre des tarifs de quelques dizaines de $ à peine, trois solutions ont ainsi été trouvées : des caractéristiques bas de gamme (voir ci-dessous), une production massive et une fabrication en Inde. Le deuxième pays le plus peuplé au monde après la Chine va donc participer à tirer vers le bas le prix de l Ubislate7, que ce soit grâce à aux coûts de fabrications faibles et aux économies d échelle réalisées. </figure> <footer>rédigée par Nil Sanyas le mardi 11 octobre 2011 à 18h36 (13970 lectures) </footer> </article> </body>

Europe, tout du moins au Royaume-Uni. Son tarif précis n a pas été dévoilé, mais il faut s attendre à un prix particulièrement compétitif.</header> Cette nouvelle n est guère étonnante.

10 HTML5: Traitement de texte

11 <article> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body>

</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?

12 En-tête <Header> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body> a ne pas confondre avec la balise <head>

13 <mark> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body>

14 <figcaption> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body>

15 <figure> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body>

16 <footer> <body> <article><h2>la tablette Europe?</h2> <header>et si la <mark>tablette tactile à 35 $</mark>dépassait compétitif.</header> Cette nouvelle l Ubislate 7. <figcaption>comment c'est possible?</figcaption> <figure> Pour atteindre réalisées. </figure> <footer>rédigée (13970 lectures) </footer> </article> </body>

17 progresse <progress max="20" value="12"> </progress>

18 HTML5: MultiMedia -audio <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="bugs_mail.mp3" type="audio/mp3"/> invalide balise </audio>

19 HTML5: MultiMedia -video <video controls="controls" width="480" height="360"> <source src="stan.mp4" type="audio/mp4"/> invalide balise </video>

20 Canvas <canvasid="mycanvas">yourbrowser doesnot support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle= "rgb(200,0,0)"; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle= "rgba(0, 0, 200, 0.5)"; ctx.fillrect(30, 30, 55, 50); </script>

getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.

21 Elementsde formulaire <input list="villes"/> <datalist id="villes"> <option value="nancy"> <option value="paris"> <option value="lyon"> </datalist>

22 Input <input type="search" /><br/> <input type="datetime" /><br/> <input type="date" /><br/> <input type="month" /><br/> <input type="week" /><br/> <input type="time" /><br/> <input type="datetime-local" /><br/> <input type="number" /><br/> <input type="range" /><br/>

23 input <input type="url" /><br/> <input type=" " /><br/>

Documents pareils

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des