Embed Size (px)
DESCRIPTION
HTML5 ارائه درس مهندسی اینترنت عرفان عطارزاده. اردیبهشت 1393. استاد درس: مهندس زمانیان. 5 th revision of HTML. پنجمین استاندارد برای زبان HTML اهداف: پشتیبانی از آخرین فناوری های چند رسانه ای راحتی در استفاده برای برنامه نویس ها قابلیت اجرا در تمام مرورگرها و دستگاه ها - PowerPoint PPT Presentation
Citation preview
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> تعریف محتوای ویدئو و فیلم
… …
New Elements in HTML5 - Form
Tag Description
<datalist> inputتعریف امکانات از پیش تعریف شده برای <output> تعریف نتیجه محاسبات
… …
5
New Elements in HTML5 - Semantic/Structural
Tag Description
<article> (document)تعریف مقاله در مستند <aside> تعریف محتوایی کنار محتوای صفحه<figure> تعریف محتوای کامل نظیر تصاویر و نمودارها و ...
<figcaption>
>figure<توضیحات برای تگ
<header> برای محتوا یا صفحهheaderتعریف <footer> برای محتوا یا صفحهfooterتعریف
<nav> تعریف پیوندهای کنترلی در صفحه… …
6
7
Semantic/Structural Elements
ساختار جدید به جای
> 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 و نسخه های قدیمی تر با استفاده از کالس Sjoerd Visscher:
<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->
/http://code.google.com/p/html5shiv* دانلود از :
9
Removed Elements
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
حذف المنت هایی ازhtml 4:
10
New Input Types
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
<input type="color“ name="favcolor">
11
New Input Types
<input type="date" name="bday">
<input type="range" name="points" min="1" max="10">
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"(;
var ctx=c.getContext)"2d"(;
ctx.beginPath)(;
ctx.arc)95,50,40,0,2*Math.PI(;
ctx.stroke)(;
</script>
<script>
var c = document.getElementById)"myCanvas"(;var ctx = c.getContext)"2d"(;
// Create gradientvar grd = 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
<></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><> </><></><></><></><></><></><></><></>
?
