Download presentation
Presentation is loading. Please wait.
1
HTML5 ارائه درس مهندسی اینترنت عرفان عطارزاده
اردیبهشت 1393 استاد درس: مهندس زمانیان
2
5th revision of HTML پنجمین استاندارد برای زبان HTML اهداف:
پشتیبانی از آخرین فناوری های چند رسانه ای راحتی در استفاده برای برنامه نویس ها قابلیت اجرا در تمام مرورگرها و دستگاه ها پشتیبانی از HTML4 و XHTML
3
A Minimum HTML5 Document
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document </body> </html>
4
New Elements in HTML5 - Media
Tag Description <canvas> تعریف نقاشی گرافیکی به وسیله Javascript <audio> تعریف محتوای موزیک یا صدا <embed> تعریف محل محتوا برای اپلیکیشن های خارجی (نظیر پلاگین ها) <source> تعریف منبع (source) برای ویدئو یا صدا <video> تعریف محتوای ویدئو و فیلم …
5
New Elements in HTML5 - Form
Tag Description <datalist> تعریف امکانات از پیش تعریف شده برای input <output> تعریف نتیجه محاسبات …
6
New Elements in HTML5 - Semantic/Structural
Tag Description <article> تعریف مقاله در مستند (document) <aside> تعریف محتوایی کنار محتوای صفحه <figure> تعریف محتوای کامل نظیر تصاویر و نمودارها و ... <figcaption> توضیحات برای تگ <figure> <header> تعریف header برای محتوا یا صفحه <footer> تعریف footer برای محتوا یا صفحه <nav> تعریف پیوندهای کنترلی در صفحه …
7
Semantic/Structural Elements
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> ساختار جدید به جای <div id="nav"> <div class="header"> <div id="footer"> و ...
8
Problem With Old Browsers
استفاده از CSS برای نمایش صحیح Tag های معرفی شده: header, section, footer, aside, nav, main, article, figure { display: block; } رفع مشکل از IE 8 و نسخه های قدیمی تر با استفاده از کلاس Sjoerd Visscher : <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> * دانلود از :
9
Removed Elements حذف المنت هایی از html 4 : <acronym>
<applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
10
New Input Types color <input type="color“ name="favcolor"> range
date datetime datetime-local month number range search tel time url week <input type="color“ name="favcolor">
11
New Input Types <input type="range" name="points" min="1" max="10"> <input type="date" name="bday">
12
New Form & Input Attributes
New attributes for <form>: autocomplete novalidate New attributes for <input>: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step
13
New Form & Input Attributes
First name:<input type="text" name="fname"> <input type=" " name=" " autocomplete="off">
14
New Form & Input Attributes
<form action="demo_form.asp"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form>
15
Graphic <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>
16
Video <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
17
Audio <audio controls>
<source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
18
Be Careful معایب HTML5 و CSS3 ؟؟؟
عدم سازگاری با مرورگرهای قدیمی و به ویژه IE ( بسیاری از ورژن ها) در استفاده از Tag ها و خصوصیات این دو نسخه از این زبان ها به میزان به روز بودن مخاطبانتان توجه کنید. تفاوت طراحی سایت برای یک وزارتخانه و یک بِرند گران قیمت رفع نگرانی و مشکلات استفاده از کدهای سازگار کننده برای مرورگرهای مختلف و قدیمی نظیر –moz- و –o- در CSS برای موزیلا و اُپرا تغییر کدها با استفاده از Javascript و jQuery بعد از تشخیص نوع و ورژن مرورگر کاربر
19
Resource http://www.w3schools.com http://en.wikipedia.org/wiki/HTML5
اچ‌تی‌ام‌ال۵
20
Thank You <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> <></><></><></><></><></><></><></><> </><></><></><></><></><></><></><></> ?
Similar presentations
