Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
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.
pdf <objectdata="ca.pdf"type="application/pdf"width="400"height="600"> alt:<a href="data/test.pdf">test.pdf</a> </object>
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>
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>
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
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.
HTML (Volets principaux). Canevas Audio video Stockage local Traitement de texte Composants du formulaire
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 100000 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>
HTML5: Traitement de texte
<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>
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>
<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>
<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>
<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>
<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>
progresse <progress max="20" value="12"> </progress>
HTML5: MultiMedia -audio <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="bugs_mail.mp3" type="audio/mp3"/> invalide balise </audio>
HTML5: MultiMedia -video <video controls="controls" width="480" height="360"> <source src="stan.mp4" type="audio/mp4"/> invalide balise </video>
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>
Elementsde formulaire <input list="villes"/> <datalist id="villes"> <option value="nancy"> <option value="paris"> <option value="lyon"> </datalist>
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/>
input <input type="url" /><br/> <input type="email" /><br/>