HTML5 & CSS3 - maihami.maad.ac.irmaihami.maad.ac.ir/teaching/Web/html5.pdf · بلاطم تسرهف...

طراحی صفحات وب

HTML5 & CSS3

وفا میهمی : مدرس

1

فهرست مطالب–HTML5

تاریخچه•HTMLتگ ها و المان های اضافه شده به •مالتی مدیا•گرافیک••...–CSS3

CSSالمان های جدید و اضافه شده به •نمایش متن و گرادیان•متحرک کردن••...

2

History of Web Standards

3

91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14

HTML 1

HTML2

HTML 4

XHTML 1

HTML 5

CSS 1 CSS 2 CSS3

JS Ajax DOM,APIs

HTML5 , CSS3 آخرین استاندارد ها ازHTML , CSSهستند.

HTML5

4

HTML5جهانیوبسازمانبینهمکارینتیجهWorld Wide Web

Consortium (W3C)کاربردابرمتنوبکاریگروهفناوریوWeb Hypertext

Application Technology Working Group (WHATWG)است.

چراHTML5:خارجیهایپالگینبهنیازعدمراحتراشکالرفعدرجدیدهایویژگیبهنیازHTML،واسکریپتجاوا...و...

The HTML5 <!DOCTYPE>

5

درHTML5تعریفیکفقط<!DOCTYPE>داردوجود.

حداقل تگهای مورد نیاز برایHTML5

مرورگرهایی که ازHTML5

:پشتیبان می کنندInternet Explorer 9+

Firefox

Chrome

Safari

Opera

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>Title of the document</title>

</head>

<body>

Content of the document......

</body>

</html>

New Semantic Elements in HTML5

6

Many of existing web sites today contains HTML code like

this: <div id="nav">, <div class="header">, or <div

id="footer">, to indicate navigation links, header, and footer.

HTML5 offers new semantic elements to clearly define different parts of a web page:

<header>

<nav>

<section>

<article>

<aside> <footer>

....

New Semantic Elements in HTML5)example)

7

<!DOCTYPE html>

<body>

<p>My family and I visited The Epcot center this summer.</p>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT.....</p>

</article>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

</body>

</html> view page

8

Semantic Tagging: Before & AfterHTML 4.01 HTML5

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>The United States Constitution</title>

</head>

<body>

<h1>THE UNITED STATES CONSTITUTION</h1>

<div class="section">

<h2>Preamble</h2>

<p>We the People of the United States, in Order

to form a more perfect Union...</p>

</div>

<div class="article">

<h2>Article I</h2>

<div class="section">

<h3>Section 1</h3>

<p>All legislative Powers herein granted shall

be vested in a Congress of the United States,

which shall consist of a Senate and House of

Representatives.</p>

</div>

</div>

<div class="figure">

<img src="bald_eagle.jpg"/>

<div class="caption">The eagle has landed</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>The United States Constitution</title>

</head>

<body>

<h1>THE UNITED STATES CONSTITUTION</h1>

<section>

<h2>Preamble</h2>

<p>We the People of the United States, in

Order to form a more perfect Union...</p>

</section>

<article>

<h2>Article I</h2>

<section>

<h3>Section 1</h3>

<p>All legislative Powers herein granted

shall be vested in a Congress of the United

States, which shall consist of a Senate and

House of Representatives.</p>

</section>

</article>

<figure>

<img src="bald_eagle.jpg"/>

<figcaption>The eagle has landed</figcaption>

</figure>

</body>

</html>

9

Semantic Tagging: Before & AfterHTML 4.01 HTML5

HTML5 Media: Video

10

قبل ازhtml5ن استانداردی برای نمایش فیلم بر روی وب وجود نداشت و برای ای.کار از پالگین هایی شبیه فلش استفاده می شد

تگ<video> </video>برای نمایش فیلم استفاده می شود. فرمت 3در حال حاضرmp4،ogg وWebMتوسط مرورگرها پشتیبانی می شود.

<!DOCTYPE html>

<body>

<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>

</body>

</html> view page

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as <video> and <audio>

http://www.w3schools.com/tags/tag_video.asp

http://www.w3schools.com/tags/tag_source.asp

HTML5 Media: Audio

11

قبل ازhtml5 استانداردی برای پخش صدا بر روی وب وجود نداشت و برای این.کار از پالگین هایی شبیه فلش استفاده می شد

تگ<audio> </audio>برای پخش صوت استفاده می شود. فرمت 3در حال حاضرmp3،ogg وWavتوسط مرورگرها پشتیبانی می شود.

<!DOCTYPE html>

<body>

<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>

</body>

</html>view page

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as <video> and <audio>

http://www.w3schools.com/tags/tag_video.asp

http://www.w3schools.com/tags/tag_source.asp

HTML5 : Canvas

12

تگ<canvas> </canvas>برای کارهای گرافیکی از طریق اسکریپت نویسی.استفاده می شود( معموال جاوا اسکریپت)

<!DOCTYPE html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html> view page

HTML5 : Canvas

13

و از متد x,yبرای انتقال مختصات به نقطه moveTo(x,y)برای کشیدن خط ،از •lineTo(x,y) برای کشیدن خط استفاده می شود.

.می شوداستفاده arc(x,y,r,start,stop)دایره و کمان، از برای کشیدن •

.استفاده می شودstrokeTextو fillTextبرای نوشتن متن تو خالی و تو پر از•

fillText(text,x,y) - Draws "filled" text on the canvas

strokeText(text,x,y) - Draws text on the canvas (no fill)

و createLinearGradienکشیدن اشکال به صورت گرادیان از برای •createRadialGradienاستفاده می شود.

There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - Creates a linear gradient

createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

HTML5 Canvas: Example

14

<!DOCTYPE html>

<body>

<canvas id="myCanvas" width="350" height="200" style="border:5px solid

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("Hello World",170,51);

ctx.beginPath();

ctx.arc(95,50,100,0,1*Math.PI);

ctx.stroke();

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html> view page

HTML5 : Web Storage

15

با استفاده ازwindow.localStorage می توان داده را بدون استفاده از کوکی و ....بر روی سیستم کاربر ذخیره کرد

<div id="result"></div>

<script>

// Check browser support

if (typeof(Storage) != "undefined")

{

// Store

localStorage.setItem("lastname",

"MAAD");

// Retrieve

document.getElementById("result").inner

HTML=localStorage.getItem("lastname");

}

else

{

document.getElementById("result").inner

HTML="Sorry, your browser does not

support Web Storage...";

}

</script> view page

Earlier, this was done with cookies.

However, Web Storage is more secure

and faster. The data is not included with

every server request, but used ONLY when asked for.

It is also possible to store large amounts

of data, without affecting the website's

performance.

The data is stored in name/value pairs,

and a web page can only access data

stored by itself.

Unlike cookies, the storage limit is far

larger (at least 5MB) and information is

never transferred to the server.

CSS3

16

CSS3جهانیوبسازمانتوسطWorld Wide Web Consortium (W3C)

.استCSSنسخهآخرینوکردپیداگسترش

چراCSS3:ترپیچیدههایطراحیرویبرآسانترکنترلمختلفمرورگرهایرویبریکساننمایشجدیدهایویژگیبهنیازو...

CSS3:Text Effects

17

CSS3چندین ویژگی جدید برای متن ارائه داده است.

باtext-shadowمی توان متن را به صورت سایه دار در آورد.

باword-wrapمتن های طوالنی به صورت اجباری در یک ناحیه قرار می گیرند .<!DOCTYPE html>

<html><head>

<style>

h1

{text-shadow: 5px 5px 5px #FF0000;}

p.test{width:11em;

border:1px solid #000000;

word-wrap:break-word;

}

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

<p class="test"> This paragraph ...</p>

</body>

</html> view page

CSS3:Animations

18

درcss3 واند جایگزینی برایتمی توان انیمیشن های ساده ایجاد کرد که می.باشد.. تصاویر متحرک، فلش متحرک و

The @keyframes rule is where the animation is created. Specify a CSS style inside

the @keyframes rule and the animation will gradually change from the current

style to the new style.

<!DOCTYPE html>

<head>

<style>

div

{

width:100px;height:100px;

background:red;position:relative;

animation:myfirst 20s;

-webkit-animation:myfirst 20s;/* Safari and

Chrome */

}

@keyframes myfirst

{0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}}

@-webkit-keyframes myfirst /* Safari

and Chrome */

{0% {background:red; left:0px;

top:0px;}

25% {background:yellow; left:200px;

top:0px;}

50% {background:blue; left:200px;

top:200px;}

75% {background:green; left:0px;

top:200px;}

100% {background:red; left:0px;

top:0px;}

}</style>

</head>

<body>

<div></div> </body>

</html> view page

CSS3:2D/3D Transformations

19

با استفاده ازcss3ادمیتوان تبدیالت دو بعدی و سه بعدی را بر روی المانها انجام د.

ام دادبا استفاده از دستورات زیر میتوان تبدیالت را بر روی مرورگرهای مختلف انج. transform: تبدیالت(50px,100px);

-ms-transform: تبدیالت(50px,100px); /* IE 9 */

-webkit-transform: تبدیالت(50px,100px); /* Safari and Chrome */

تبدیالت:•translate() :برای انتقال-translateY(n)وtranslateX(n)وtranslate (x,y)

•rotate() :برای چرخشrotate(angle)-

•scale() :برای تغییر اندازه-scaleY(n) وscaleX(n) وscale (x,y)

•skew() :برای کشش-skewY(angle) وskewX(angle)وskew (x-angle, y-angle)

•matrix() :تبدیل همه ترکیبات دو بعدی

CSS3:2D/3D Transformations

20

<!DOCTYPE html>

<head>

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

margin:100px;

transform:scale(2,4);

-ms-transform:scale(2,4); /* IE 9 */

-webkit-transform:scale(2,4); /* Safari and Chrome */

}

</style>

</head>

<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>

</html>view page

CSS3: Borders

21

با استفاده ازcsss3 هتر و جذابتری می توان ایجاد کردبحاشیه های.border-image A shorthand property for setting all the border-image-* properties

border-radius A shorthand property for setting all the four border-*-radius properties

box-shadow Attaches one or more drop-shadows to the box

<style>

div

{border:15px solid transparent;width:250px;padding:10px 20px;}

div#d1

{border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;

width:300px;border-radius:25px;}

#round

{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */

-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */

border-image:url(border.png) 30 30 round;

}

</style>

</head>

<body>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>

<br>

<div id="d1">Here,border-radius </div>

view page

http://www.w3schools.com/cssref/css3_pr_border-image.asp

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

HTML5 & CSS3 - maihami.maad.ac.irmaihami.maad.ac.ir/teaching/Web/html5.pdf · بلاطم تسرهف...

Documents

Transcript of HTML5 & CSS3 - maihami.maad.ac.irmaihami.maad.ac.ir/teaching/Web/html5.pdf · بلاطم تسرهف...