1 / 20

HTML5 ارائه درس مهندسی اینترنت عرفان عطارزاده

HTML5 ارائه درس مهندسی اینترنت عرفان عطارزاده. اردیبهشت 1393. استاد درس: مهندس زمانیان. 5 th revision of HTML. پنجمین استاندارد برای زبان HTML اهداف: پشتیبانی از آخرین فناوری های چند رسانه ای راحتی در استفاده برای برنامه نویس ها قابلیت اجرا در تمام مرورگرها و دستگاه ها

beau-wells
Download Presentation

HTML5 ارائه درس مهندسی اینترنت عرفان عطارزاده

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  5. New Elements in HTML5- Form

  6. New Elements in HTML5- Semantic/Structural

  7. Semantic/StructuralElements • ساختار جدید به جای <div id="nav"> <div class="header"> <div id="footer"> و ... <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

  8. Problem With Old Browsers • استفاده از CSS برای نمایش صحیح Tag های معرفی شده: header, section, footer, aside, nav, main, article, figure{ display: block; } • رفع مشکل از IE 8 و نسخه های قدیمی تر با استفاده از کلاس SjoerdVisscher : <!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]--> * دانلود از : http://code.google.com/p/html5shiv/

  9. Removed Elements • حذف المنتهایی از html 4 : • <acronym> • <applet> • <basefont> • <big> • <center> • <dir> • <font> • <frame> • <frameset> • <noframes> • <strike> • <tt>

  10. New Input Types • color • date • datetime • datetime-local • email • month • number <input type="color“ name="favcolor"> • range • search • tel • time • url • week

  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"> E-mail: <input type="email" name="email" 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"); varctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> <script> varc = document.getElementById("myCanvas");varctx = c.getContext("2d");// Create gradientvargrd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80); </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 • http://fa.wikipedia.org/wiki/اچ‌تی‌ام‌ال۵

  20. Thank You <></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><> </><></><></><></><></><></><></><></> ?

More Related