1 HTML5

٩٨ ش

زایف : ضؼ زفشؿی

HTML5

2 HTML5

ت كسذ خالك ت ؼشفی ػاكش یا ز ای خذیذ ی عس ػاكش HTML5وساب اىسشیىی

. ای وساب اىسشیىی و تلسذ زشخ اص زذ ثغ خسف ی تاؿذ خشداصد ی HTML5تثد یافس دس

ت ػا ای صیش ی خشداصد :

HTML5 ؼریز

ز ػاخسا HTML 5

HTML5 ؟ اػر یاسد ز ؿا

دس ؿذ یؼشف ذیخذ ػاكش HTML 5

اص اػسفاد HTML5 وذ زش آػا ػاخس یتشا HTML

فش تا وشد واس HTML5

2.2 فش دس شییزغ ز HTML اػر داد یس

یتػ داد وسش HTML5

دس داد ؾیا HTML5

ب دس داد یا یػاص شایرخ دس اػسفاد داد شیرخ

وا تلسذ ا داد شیرخ یز

ذیخذ یا یظی HTML5

دس یضیز ز HTML5 ؟ ؿد ی یثایخـس

ػلش وه تا ز HTML5 یتؼاص ذیخذ ریػا هی

یا سػا یواستشد ػاكش یؼشف

3 HTML5

HTML5 زیؼر

HTML 5 . یه زیض یؼر اا دس تش یشذ مؾ ای تثد یافس تؼیاس صیادی زطر ػا یه ا اػر

ت ػشػر دس ضا زػؼ دس ایسشر ی تاؿذ ت ی و ی زا فر HTMLتثد یافس ؼخ ای دیش

ذ . اص ای اػساذاسد خذیذ خـسیثای ی و خذیذ زا شسشا

اػسفاد لات August 31, 2010 خیزاس دس ؿذ یتشصسػا Adobe® Dreamweaver® CS5دس ش افضاس HTML5 یتؼس

. تاؿذ ی یؼی وذ یتشا یثایخـس

HTML 5ػاخسا ز

. اػر ػایر دس ش كفط ب ای و ؿا وذ اػر HTMLؼس زا ب ای عشاضی ؿذ

ت ػر دػ 1فق اؼاد ی ؼسذ . ب ػایر ا اص ب ای خیا خدیر ای ب ػایر ا اشص ا

شدیدسخاػر ای تیـسش تیـسش ػدس تش یشذ HTMLد اذ . ؼس صتا ضشور وش 2اص تشا ای واستشدی ی

ؼشفی ی ؿد . HTML 5 ، . ای اػساذاسد خذیذتشای سػیذ ت اضسیاخاذ ا ی تاؿذ

سا خیذا وشد HTMLودا ی زا وذ

تش سی 3سا خیذا وی ؟ تا ا وشد ت ش كفط ب تا ویه ساػر ؿاس HTMLتایذ فر ز

1-1یذ . زلیش كفط سا ـاذ و HTMLی زایذ وذ selecting View Page Sourceكفط اسخاب

سا ب ذفی اص زػؼؿا داسد . یؼر ؿا ز 4 تؼسی ت ع شسش ب HTMLع ایؾ وذای

خیذا ػاصی یا PHPتا صتا اػىشیدسی زػؼ یه ػایر ػثذ خشیذتشای یدسیصتا اػىشدثا ی ویذ اص ز

ت شضا . ویذ اػسفاد ی آالی ای ی ب الي یا تاصی تا تاصیااسػا سص سػای تشای ASP.net تػی

1 - Static

2 - Application

3 -Mouse

4 -Browser

4 HTML5

ذ. دس یاػسفاد و HTMLتشخی اص لؼر ا اص دس تایذػایر ب عشاضی دس اص ش صتا اػىشیدسی و اػسفاد ویذ

.غیش ایلسذ شسش ؿا لادس خاذ تد و كفط سا ت دسػسی ایؾ تذذ

دس ای زلیش ت وه شسش وش لؼر وذ ػایر ت .ت ایؾ دس آیذ ی زاذ زػظ ش شسش ب HTMLوذ 1-1زلیش

ایؾ دس آذ اػر .

HTML5 ؿا ز اسدی اػر ؟

زاسزب تذػر آسد اػر خذیذ یظی ای HTML ،HTML5 لثی ؼخ ای خیـشفر تشخالف

سا HTML5. ػا ثش اػراخیش زػؼ دذا ب تشا یؼا دس د اص یاص یتشای خـسیثااػثی

: ت ؿشش صیشزمؼی وشد ی زا ت لؼر ای

5 HTML5

ؼس ػاخسا كفط

اسائ تلشی

اتضاس شافیىی

5خـسثیای تیـسش اص سػا

اػىشیدرخاا تثد اػسفاد اص

صتا زتؼی ضشور

ضمیمسا اػر . سا تثش تاال ؟ خب اال دػر ایـا دس ؿس دػسؾ HTMLوذ ش وؼی و

HTML5 دس االآیا . یسا ادا داد ا HTML4/XHTMLاوثشیر ا سؿذ ػاخر اػسفاد اص ػاخسا وذ

اص وذ ای وا تلسذ HTML5 ای خثش ختی اػر . زیض ؼر ؟ الؼا یاص ت دتاس یاد شفس

ؼ لذیی خـسیثای ی وذ . ت ؿا اخاص اخشذ اص وذی ت اػساذاسد دیشی سا ی دذ . تلسذ ثا

سا ی دذ . HTML5سا دس XHTMLاخاص خـسیثای اص وذ

<BR/>Lorem ipsum dolor sit amet, nec a ultricies.

<BR/>Egestas ipsum in, praesent ut et, vulputate vel.

<BR/>Dapibus magna a.

<BR/>Felis sit, vestibulum pede.

آ سا ـاذ ی شسشای لذیی ب اخشا ویذ طسای HTML5تاتشای ؿا ی زایذ ثا تاال سا دس

ؿس ؿذ اػر HTML5سذ دس ثا تؼذی تل ویذ .

<br>Lorem ipsum dolor sit amet, nec a ultricies.

<br>Egestas ipsum in, praesent ut et, vulputate vel.

<br>Dapibus magna a.

<br>Felis sit, vestibulum pede.

5 - Media

6 HTML5

ت ش ضا وذ دس شسشای .اص ل افساد اػر HTML5دس <br>دس ز /واسوسش دس خظ ای ثا تاال

XHTML . واس ی وذ

دس شسشای لذیی ب خـسیثای ی HTML5ؼی ی دذ . تؼیاس اص ػاكش خذیذ دس HTML5اثس ای ضع دس

. ؿد

خـسیثای وذ : HTML5شسشای و ی زاذ اص

( 7 ازا ػیؼس ػا ) ت تاال 3ؼخ 6فایشفوغ

( 11ت تاال 1 تا ػیؼس ػا ؼخ ایف 10 ایىغ 9ػیؼس ػا ای یذص ت تاال ) 3ؼخ 8ػفشی

زا ػیؼس ػا ا( 12 وش(

ت تاال ) زا ػیؼس ػا ا( 9.5اخشا ؼخ

HTML 5ػاكش خذیذ ؼشفی ؿذ دس

HTML5 و ت واستش اخاص وسش وذ سا تلسذ ػیغ ی دذ ، ػاكش خشداصدی ت ؼشفی ػاكش خذیذ ی

سا خؿؾ ی دذ :صیش اكی تخؾ ای ایخذیذ

تن تذی طسا دس كفط

ذیشیر سػا

ػاخسا فس

6 - Firefox Browser

7 - Operating System (OS)

8 - Safari Browser

9 - Windows

10 - OS X

11- iPhone OS 1.0 +

12 - Google Chrome

7 HTML5

فسضص ی تاؿذ . DIVا ػلش یخذا خیسیذ ، دس ضمیمر یىی اص د سد HTMLتن تذی طسا دس

HTML5 اص طسا سا دس كفط اسد یساضسش تن ا ذؼشفی زذ ػلش خذیذ ی خشداصد و ت ؿا اخاص ی د

زؼشیف ؿذ اػر : شتع طساای ای ػاكش خذیذ تلسذ ا ای اص تن ویذ.

HEADER

SECTION

ARTICLE

ASIDE

FOOTER

NAV

كف وشد خاس ی اص ػذ ی تاؿذ . فىش ویذ ت سفساس ز ای اص مـ ای ػاكش كفط ی الی یی تؼیاس تسش

ی تاؿذ . ػذ سد ػاخر ی ؿد اص تخؾ ای اص طسا ، 13خذیذ و ؿثی سؽ زیذ یه ػذ اوشػافر سد

ر دس لؼ HTMLسذ سؽ وذ HTML5ػلش تن تذی خذیذ دس ی زاذ ؿا خاسشاف ای خذا تاؿذ .

.اا تا ای زفاذ و تا سیىشد خذیذ ای سؽ سا ادا ی دذ غمی تن خیشی ی وذ

HTMLدس صتا تؼذ ت 1994تؼذ اص آ دس ػا HTML2، ای تاس تلسذ ػذ دس HTML5ػلش فس دس

غاة فشػساد ؿذ سا اضاف ت ؿا اخاص ی دذ 214ؼخ فسدس سد اػسفاد لشاس شفر . ای اىا

: اعالق ویذ ظیش دثا ویذ تلسذ افىر تلشی ت فیذ فس

ؿاس زف ا . مذاس ػاخساس یه فس تشای اضاف وشد فمظ

كطیص . 15اىسشیىی خؼرػاخساس یه فیذ تشای خزیشفس

زاایی ػاخساس تشای سدی فس تشای طاػث اسخاب اعالػاذ

دثس وشد فیذ ی اص فس تلسذ ای خیؾ فشم تاؿذ

( تضسي اییـا وشد) فیذ ای سد ظش . 16

13

- Document Microsoft Word 14

- Forms 2.0 15

- Email address

8 HTML5

ا ی ذ سا تذ یاص ت آخاوغ یالص داس HTMLػیاذ غی و ؿا تشای ػاخر یه فس 2دس فس ای ؼخ

اػر . ؿذ آادفؾ یا ش صتا ظیش

كفطتن تذی طسا دس

ای ىس سد زخ لشاس شفس اػر و اص فضاای زضیطاذ یه طسا دس HTML5دس تشص سػای ػاخسا

سد خغاب لشاس ی یشد . HTML5كفط ت دسػسی اػسفاد ؿد . ای ضع زطر ػا تن تذی طسا دس

. تلسذ ثا اص ای خغ ی زا غاة ب ا اص تن تذی دس زػؼ كفط ای ب اػسفاد ی وی

الي سا ا تشد. ػاخسا یه ب الي ؿا غاثی ظیش :

17اليت ضع غة .

زاسیخ تشای غة .

اضاف وشد یه ا ساتغ تی طسا .

اضاف وشد طسا تالي .

اخاص ت واستشا تشای اسػا ظش تشای غة ؿا .

لؼر خؼسدؿا .

تشای كفطاذ 19 خاكفط 18ػاخس ػشكفط .

یا تا اػسفاد اص (<p>)یض ؿا ی زایذ زا یؼر تاال سا تا ػاخر خذا خیسیذ ػاكش خشاشف HTML4تا

تشای تن تذی طسا دس یه كفط ایداد ویذ .ثا صیش اص زضیطاذ یىی خذیا دس سد اػسفاد DIVػلش

HTML5 زىیه تاHTML4 ( . ػاكش 1.3ی تاؿذ ) زلیشHTML تلسذ ضشف وح ی تاؿذ

16

- Highlight

17 - Blog post

18 - Header

19 - Footer

9 HTML5

<p><b>HTML5</b> is the next major revision of <a

href=‚/wiki/HTML‛ title=‚HTML‛>HTML</a> (Hypertext Markup

Language), the core <a href=‚/wiki/Markup_language‛

title=‚Markup language‛>markup language</a> of the <a

href=‚/wiki/World_Wide_Web‛ title=‚World Wide Web‛>World

Wide Web</a>. The <a href=‚/wiki/Web_Hypertext_

Application_Technology_Working_Group‛ title=‚Web Hypertext

Application Technology Working Group‛>Web Hypertext

Application Technology Working Group</a> (WHATWG) started

work on the specification in June 2004 under the name Web

Applications 1.0<sup id=‚cite_ref-0‛ class=‚reference‛><a

href=‚#cite_note-0‛><span>[</span>1<span>]</span></a><

/sup>. The <a href=‚/wiki/W3C‛ title=‚W3C‛ class=‚mw-

redirect‛>W3C</a> adopted the draft in May 2007 as its

basis for review. The specification was published as a

First Public Working Draft at the W3C on January 22,

2008.</p>

1.3زلیش

ی اسا ت واستش تا یه اػسفاد ؿذ وذایدسػسی دس سد ؼی شیزل HTML4ساػفا سؽ واس زىیه

دس ATICLE ػلش اػسفاد اص تا مؾ تسشی اص زشویة ؼی داس تشای دسن تسش فشا وشد اػر . HTML5دذ .

HTML5 ی دذما تشای زؼشیف طفاص ك یتلسذ تو خك ییؿا زاا ت .

12 HTML5

(1.4لشاس داسد )زلیش ؿاس HTML5تا زىیه یىی خیذاا طسدس صیش لؼسی اص

<article>

<m>HTML5</m> is the next major revision of <a href=‚/

wiki/HTML‛ title=‚HTML‛>HTML</a> (Hypertext Markup

Language), the core <a href=‚/wiki/Markup_language‛

title=‚Markup language‛>markup language</a> of the

<a href=‚/wiki/World_Wide_Web‛ title=‚World Wide Web‛>

World Wide Web</a>. The <a href=‚/wiki/Web_Hypertext_

Application_Technology_Working_Group‛ title=‚Web Hypertext

Application Technology Working Group‛>Web Hypertext

Application Technology Working Group</a> (WHATWG) started

work on the specification in <time>June 2004</time>

under the name Web Applications 1.0<m><a href=‚#cite_

note-0‛></m></a>. The <a href=‚/wiki/W3C‛ title=‚W3C‛

class=‚mw-redirect‛>W3C</a> adopted the draft in <time>May

2007</time> as its basis for review. The specification was

published as a First Public Working Draft at the W3C on

<time>January 22, 2008</time>.</article>

1.4زلیش ؿاس

11 HTML5

طسا خیسیذ ی تاؿذ تا وه ػاكش یشخغ دی دس ای ع ػاخسا مغ لذ زضیطاذ اص

ARTICLE MARK TIME اػر . وذ تؼیاس ػاد زش تشای خاذ طسا ت ػاخساسی ػاد زثذی ؿذ

تا ؼی زش ی تاؿذ .

ساضسش اػر DOCTYPE واس تا

ای سد اػسفاد لشاس شفس اػر ی خشداصد . HTMLت زؼشیف ؼخ HTMLب ای خظ ش كفط

اا داسای آؿا ؿذی زا DOCTYPEػ ع خسف XHTML دس. ی خاذ DOCTYPEضع سا

. اػسفاد اص آ ی تاؿذ تشای ذیشیر ی خیسیذ

<DOCTYPE html!> ػادی ی زایذ اص ایداسیذ ت ػاد DOCTYPE ع ؿا یه HTML5 دس

HTML5طسای كفط ، ازیه شسش ب سا آا ی وذخذیذ تلسذ از DOCTYPEاػسفاد ویذ . ای

ضؼاع ت DOCTYPEو دس آغاص خایا وذ ای خی اذ خی اػسفاد ی ؿد( . <? ?>ؿثی وذ ی تاؿذ . )

.ی تاؿذ تضسي وزه تد ضشف

اػسفاد اص ػاكش تن تذی تشای ػاصا داد وذ

تشای زؼشیف طسا خد ی تاؿذ . ؼشف زشیا ػلش سد اػسفاد تشای HTML4سا ای اذوی دس

تشای زؼشیف دس ؿشع خایا <DIV>ؿشع خایا خاسشاف لشاس ی یشد یا ػلش ی تاؿذ و <p>زؼشیف

لؼسی اص طسا لشاس ی یشد . ت ش ضا ش دی آا تشای زضیص طسا وافی ی تاؿذ . ؿا ی زایذ

ی www.focalpress.comثغ زلیش ػایر تثیذ 1.5تـسشی واستشد تن تذی كفطاذ ب سا دس زلیش

تاؿذ.

تلسذ اضص ؼی وذ یه تن اص طسا اػر . دس خد داسد SECTIONخذیذ ت ا ػلش HTML5دس

HTML5 .ػاكش خذاا ی تشای تن طسا دس ظش شفس ؿذ اػر

12 HTML5

SECTION

ATICLE

HEADER

FOOTER

ASIDE

FIGURE

NAV

آ دس كفط ایؾ داد ی ت ن شتططسای و دس ت ع خغخذیذ تشای ش وذا اص ػاكش تاال تش اػا ای ا

زؼشیف ؿذ اػر . ؿد

13 HTML5

1.5زلیش ؿاس

14 HTML5

SECTIONاػسفاد اص ػلش

یه تخؾ اص دػ ػاكش تشای زضیص داد طسای دس یه كفط ی تاؿذ . ؿا SECTIONػلش

، ت ػی یه تخؾ اص یه یه تخؾ تاسصؽ اص یه كفط دس ظش تیشیذ سا زاسزب SECTIONػلش ی زایذ

وذ صیش سا دثا ویذ . SECTIONتشای ثا ػلش وساتی و تخؾ تا اسصؿی اص وساب تاؿذ .

<SECTION>

<ARTICLE>

<P>Nulla facilisis egestas nulla id rhoncus. Duis

eget diam nisi, quis sagittis nulla. Fusce lacinia

pharetra dui, a rhoncus sapien egestas ut. Ut lacus

ante, semper sed interdum a, posuere egestas ante. Nullam

luctus arcu sed sapien dignissim quis posuere ipsum

placerat.</P>

</ARTICLE>

<ARTICLE>

<P>Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nunc vehicula ipsum sit amet eros

adipiscing volutpat. Sed gravida urna vel sapien commodo

pretium.</P>

</ARTICLE>

<UL>

<LI>Praesent ut sapien quam. </LI>

<LI>Aliquam erat volutpat. </LI>

</UL>

</SECTION>

ػاخر ؿذ د <p>داسای د خاسشاف و تا وه ػلش وی زایذ تثیذ 1.6اخشا ؿذ وذ فق سا دس زلیش

دس دس ػلش ای ػاكش <LI>تػی ػلش ؿذ اػرخظ ـاذ ی ؿد و تا مغ آغاصی ػالر زاسی

SECTION لشاس شفس اذ .

ی تاؿذ.ا صا دی طسا دس وذ یه سا ثش تشای ػا SECTIONػلش

15 HTML5

1.6زلیش ؿاس

ARTICLEاػسفاد اص ػلش

خب . تالي یه ثا اػسفاد ی ؿد ARTICLEػلش دس یه كفط ب 20تشای ـخق وشد طسا

آ ی دس یه كفط اص طسا ، تا وه sectionتشای سؿ ؿذ ط لشاس یش طسا ی تاؿذ . اػسفاد اص ػلش

دس HTMLدس دس اػسفاد ویذ . ؿا ی زایذ اص ػاكش دیش ARTICLEزایذ لاة تذی ویذ اص ػلش

تشای ایؾ اػسفاد اص ػلش blog.whatwg.orgاػسفاد ویذ .وذ صیش سا و اص ب الي ARTICLEداخ ػلش

ARTICLE دسHTML5 . شفس ؿذ اػر سا دثا ویذ

<ARTICLE>

<H1>Spelling HTML5</H1>

<P> <TIME>September 10th, 2009</TIME> by Henri Sivonen</P>

<P> What’s the right way to spell ‚HTML5‛? The short

answer is: ‚HTML5‛ (without a space).</P>

</ARTICLE>

اص زذی زایذ سش ب ـاذ ویذ .سا دس ش ARTICLEؿا ی زایذ سید ایؾ اػسفاد اص 1.7دس زلیش

ARTICLE ؿثی خذا وذ طسا تػی ػلش اضاف ویذ ب یه كفط دس .ARTICLE و ی زا دس دس یه ػلش

20

- content

16 HTML5

SECTION اػسفاد وشد. ؿا تایذ ت ػلشARTICLE اص دیذ یه اتضاس غمی تشای زدضی طسا ا ویذ .

1.7لیش ز

17 HTML5

FOOTER HEADER اػسفاد اص ػاكش

یه كفط زیذ ؿذ دس اوشػافر سد یا دس ش ش افضاس واستشدی تشای زایح ، داسای طی تشای دسج یتاال خای

كفط یا س ضك ـش ؿا ؿاس ؼ دس ش كفط ای اعالػاذ. داسد خد اعالػاذ كفط دس تاال خایی ش كفط

ؼال ؿا اعالػاذ كفط كفط خا ذاسد . ػشتا ای فای فط ای ب زفازی ك دس یا ش خضئیاذ دیش تاؿذ .

ـاذ ویذ .ط لشاس یشی ػشكفط دس كفط ب 1.8وی یا ویذی كفط ای ب ی تاؿذ . ؿا ی زایذ دس زلیش

1.8 زلیش

دس زلیش فق طسای ػش كفط ؿا ، یه ت كفطاذ ؿا ی زایذ ػش كفط سا دس كفط ای ب اػسفاد ویذ .

كفط ای اىا سا فشا ی وذ تشای ش د لؼر ػش كفط خا HTML5دیش یه خؼسدش دس ػایر ی تاؿذ .

HEADERزػظ ػاكش خا كفط . ػشكفط اػسفاد وشدا لاتیر ػفاسؿی ؿذ و تسا اص فضا طسا تلسذ سؿ ت

FOOTER تلسذ یه وذ ػشكفط تىاس سفس ؿذ تلسذ یه ػلش اػسفاد ی ؿد .HEADER دسHTML5

18 HTML5

اػر . تشداؿر ؿذ Focal Pressدس زى وذ صیش خد ی تاؿذ . ای زى وذ اص ب ػایر

<HEADER>

<SECTION><a href=‚/‛><img src=‚/images/fplogo.png‛

border=‚none‛ alt=‚Focal Press logo‛ title=‚Focal Press

Home‛/></a> learn | master | create</b>SECTION>

<NAV>

<ul><li><a title=‚Digital Imaging and Photography‛

class=‚first‛

href=‚/photography.aspx‛>Photography</a></li><li><a

title=‚Production, Postproduction, and Motion Graphics‛

href=‚/film_video.aspx‛>Film &amp; Video</a></li><li><a

title=‚Animation, 3D, and Games‛

href=‚/animation_3d.aspx‛>Animation &amp; 3D</a></li><li><a

title=‚Audio Engineering and Music Technology‛

href=‚/audio.aspx‛>Audio</a></li><li><a

title=‚Broadcast and Digital Media‛

href=‚/broadcast.aspx‛>Broadcast</a></li><li><a

title=‚Theatre and Live Performance‛

href=‚/theatre.aspx‛>Theatre</a></li><li><a class=‚offsite

last‛

href=‚http://www.elsevierdirect.com/imprint.jsp?iid=100001‛

>Bookstore </a></li> </ul>

</NAV>

</HEADER>

صیشا ـاذ ویذ : HTML5تشای یه كفط زى وذ خا كفطتشای لؼر

<FOOTER>

<P>Copyright © 2009 Focal Press, Inc.</P>

</FOOTER>

فمظ طلش ت ػشكفط HTML5 دس HEADER FOOTERؿثی الی كفط ی شا یؼر ، ػاكش ای اػساذاسد

ا ی ARTICLEخاكفط تشای كفط ب ی تاؿذ . ؿا ی زایذ ػشكفط خاكفط تشای ش وذا اص ػاكش

SECTION وذا خذاا زؼشیف ویذ . ش تشای

19 HTML5

ASIDEاد اص ػلش اػسف

اا لؼسی اص طسای اكی ایداد یه م وذ تشای طسا ی تاؿذ اػر زكیف طسا ASIDEػلش ه یمؾ

اؿاس وشد ت ثغ تشای )یا ػی( مؾه یخیذ دذ ASIDEیه كفط ب یؼر . ؿا ای دس ظش تیشیذ و ػلش

ایؾ داد ؿذ اػر . ARTICLEدس یه ػلش ASIDEػسفاد ػلش ی تاؿذ . دس ثا صیش عشص ا

<ARTICLE>

<P> Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Vivamus sed eros at metus pulvinar convallis id quis

purus. Sed lacinia condimentum viverra.</P>

<P>Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Vivamus sed eros at metus pulvinar convallis id quis

purus. Sed lacinia condimentum viverra.</P>

<ASIDE>

<H1>What is Lorem Ipsum?</H1>

<P>Lorem Ipsum is simply dummy text of the printing and

typesetting industry.</P>

</ASIDE>

</ARTICLE>

1.9اػسفاد ؿذ اػر. دس زلیش ASIDEتلسذ اخسلای اص ػلش aside دس وذ تاال طسا اكی كفط خـسیای اص یه

وذ تاال سا تش سی شش ـاذ ویذ . (اػسفاد ؿذ اػر CSSاص ASIDEتلشی تشای زغییش ط ایؾ 1.9دس زلیش )

22 HTML5

1.9زلیش

DIALOGاػسفاد اص ػلش

تشای ؿا ای اىا سا فشا ی وذ و DIALOGشای فس ا ظشاذ دس فضای ب اػسفاد ی ؿد . ػلش ت

دس صیش زكیص داد ؿذ اػر : DIALOGضار فس سا دس یه كفط فشا ویذ . ػ لؼر اكی ػلش

لاة تذی ػلشDIALOG . تشای ایداد ضار فس

ػلشDT ف یذ ی خشداصدت زؼشی

ػلشDD ت زؼشیف كطثر ی خشداصد

تشای فس اػسفاد ی ؿد دس صیش اص اػسفاد آ دس دػسشع ی تاؿذ . DIALOGػلش

<DIALOG>

<DT>Josie Smith </DT>

<DD>HTML5 is a great way to block semantic elements on

a page. </DT>

<DT>Ian Jones </DT>

<DD>Yes, you are absolutely right. </DD>

<DT>Josie Smith </DT>

21 HTML5

<DD>Conversation can now be easily identified. </DT>

<DT>Ian Jones </DT>

<DD>

<P>Blocking allows you to accomplish several things

such as:</P>

<UL>

<LI>Clearly identifying blocks of content on a page</LI>

<LI>Making it easier to construct page designs</LI>

</UL>

</DD>

</DIALOG>

ی زایذ ـاذ ویذ . 1.11وذ تاال دس زلیش زی ایؾ

1.11زلیش

زؼشیف DTفس وذ كطثر زػظ ػلش خدیر ادا ی ؿذ ش DIALOG تاص تؼس وشد فس زػظ ػلش

ـخق ؿذ اػر DTذ زوی و كطثر وذ ی تاؿذ زػظ ػلش یی ؿد تشا ی دس وذ صیش د

<DT> Majid Tavakoli </DT>

22 HTML5

دس وذ لشاس ی یشد تشای ت وذ صیش زخ ویذ . DDكطثر ای ػی تی ػلش س طسای

<DD><P>Blocking allows you to accomplish several things

such as:</P>

<UL>

<LI>Clearly identifying blocks of content on a page</LI>

<LI>Making it easier to construct page designs</LI>

</UL>

</DD>

یؼسی اص خاسشاف یا زیضی سا دس یه ما داؿس تاؿذ. DIALOGدس ػلش DDؿا ی زایذ تا وه ػلش

FIGUREاػسفاد اص ػلش

یر داد زلیش HTMLخ ای لذیی اضاف د زلایش ت كفطاذ ب یه سی ؼ ی تاؿذ . دس ؼ

زلیش زضیطاذ FIGUREتا وه ػلش HTML5. اا دس ی تاؿذتا وه س شتط ت آ زلیش واس تؼیاس ـىی

. ت وذ صیش زخ ویذ : خاذ ی ؿد دػ زلیش، اطالی ت ػا تخـی اص دػ لشاس ی یشد . ای دػ

<FIGURE>

<LEGEND>Figure 12. Using the FIGURE element </LEGEND>

<IMG alt=‚The FIGURE element is another example

of block semantics in HTML5‛ src=‚figure_element.jpg‛

border=‚0‛ height=‚140‛ width=‚240‛/>

</FIGURE>

ؼی وذ یر LEGENDاػسفاد ویذ . ػلش DIALOGایذ دس ػلش ػاكش دیش سا ؿا ی ز FIGUREػلش

س شتط ت یه زلیش ی تاؿذ .

23 HTML5

NAVاػسفاد اص ػلش

دػس تذی یه ا دس كفطاذ Navigation تاسصزشی ظیف تشای ش ب ػایسی ی تاؿذ . Navigationفشآیذ

ب داؿس تاؿذ . خغ ای خسف ی طفمؾ ای تؼیاس سفازی سا دس یه كی زاذ Navigationب ی تاؿذ اا

خد ذاسد . تشای سؿ ؿذ ای ضع تشای اػسفاد طذدیسی Navigation ؿااص طسا ی زاذ تلسذ ش ی

س صیش سا دثا ویذ :

دیش ب ػایر یه ای خد دس ب ػایر ا تشای دػسشػی ت كفطاذ -1

یه ای تشای اسخاع داد ت كفطاذ لثی یا تؼذی -2

یه ای خد دس خاكفط ب ا -3

دثا ویذ : NAVثا صیش سا تشای واستشد ػلش

<NAV>

<a href=‛/home.html‛>Home</a> | <a

href=‛aboutUs.html‛>About Us</a> | <a

href=‛contactUs.html‛>Contact Us</a>

</NAV>

تشای تن تذی اص دیش ػاكش تشای اػسفاد ػاد زش ی تاؿذ . NAVػلش HTML5اص یا زا ػاكش تن تذی دس

افضایؾ زغییش دس ػغص س

HTML5 زغییش داد اػر . ملد اص اضاف وشد ای ػاكش ـخق سا وذ یؼی، ػغص س دس تلسذ ؼایی

خد ی HTML4و ای ػاكش دس time , number , progress , emphasisاكی ش خدیر ظیش وشد تؼذ

. VAR,CODE,KBT,SAMPتاؿذ اا او تثد زىی یافس اذ ظیش

24 HTML5

MARKاػسفاد اص ػلش

اص زغییش دس فسر فادتذ اػس دس سویذ 21(تضساییصای و تخایذ یه لؼر اص یه س سا خشس )

و ی تاؿذ ایذػایر یىی خ تش شفس اص ویذ .ای ػ سا ادا دیذ . وذ صیش سا دثا MARKس ی زایذ تا ػلش

.)تضسایی( خاذ تد خشسدس صا ایؾ دس ای وذ HTML5 و

<P><M>HTML5</M> is the proposed next standard for HTML

4.01, XHTML 1.0, and DOM Level 2 HTML. <M>HTML5</M> has

been said to become a game-changer in Web application

development, making obsolete such plug-in-based rich

Internet application (RIA) technologies as Adobe Flash,

Microsoft Silverlight, and Sun JavaFX.</P>

سا CSSتشای ـاذ زفاذ آ تایذ تا ـاذ ویذ زغییش ـاذ ی ؿد اا CSSصای و وذ تاال تذ اػسفاد اص

. تشای وذ زؼشیف ویذ

TIMEاػسفاد اص ػلش

اػسفاد ی ؿد ؿا ی زایذ MARKتشای یه تخؾ اص س اص ػلش ایؾ تشای افضایؾ لذ

اػسفاد ویذ . ثا صیش اص عشص اػسفاد ػلش TIMEصا دس وذ ای خد اص ػلش تشای زؼشیف خدیر

TIME . ی تاؿذ

<TIME>April 23, 2010</TIME>

ی تاؿذ. تشای datetime 22یظیاضاف وشد TIMEسذ دیش اػسفاد اص ػلش ای لاة لات لث اػر .

ثا وذ صیش سا دثا ویذ :

<TIME datetime=‛2009-12-24T23:00:00‛>11:00 O’Clock on

Christmas Eve</TIME>

.سا ـا ی دذ زضیص زاسیخ / صا سد دس یه س TIMEذف اص اػسفاد ػلش

21

- Highlight

22- Attribute

25 HTML5

METERاػسفاد اص ػلش

سصؽ زاسی ثا صیش ا تشای زؼشیف مذاس ػذدی دس یه تاص ـخق اػسفاد ی ؿذ . METERػلش

كسذ شفر اػر METERای ز تا وه ػلش

<P>Tuna is going on sale today for the amazing price of

just <METER>$2.00<METER>!</P

ـخق ی زا اص ای یتاص دسمادیش تشای ایؾ داد METERیظی ای اطالی و ی زای ت ػلش

. صیش اػسفاد وشد یظی ای

Value

min.

max

low

high

optimum

سا ـا ی دذ METTERثا صیش ط ایؾ یظی ای

<P>The distance you swam in the contest was<METER

value=‚120‛ min=‚0‛ max=‚200‛ low=‚80‛ high=‚200‛

optimum=‚200‛>120 yards</meter></P>

PROGRESSػلش اػسفاد اص

تشای ایؾ داد خیـشفر ذا یه فشآیذ ی تاؿذ . ؿا ی زایذ واستشد آ PROGRESSػلش

داد خذیذ ـاذ ویذ . (loading) ب یا تاسزاسی طفاد یه ػىغ یا یه فای اص یه كسا دس د

س یظ ی اص خشیا داد دس یه صا مذا value خد داسد . PROGRESSتشای ػلش value maxد یظی

ی تاؿذ . تشای ثا ؿا ی زایذ مذاس ضد valueدع valueـخق ی تاؿذ .اوؼی مذاس

داد ؿذ اص فای سا دس ثا صیش ـاذ ویذ :

26 HTML5

>PROGRESS value=‛245998‛ max=‛100000‛>25%</PROGRESS<

تر اػر اش ی خایذ اص ای ػلش اػسفاد ویذ ؿا تایذ ت تشا خاا خد ت خد ثا PROGRESSػلش

اػىشیدر تشای ایؾ خیـشفر اص ضاسؽ واس آ سا سل ویذ .

HTMLوذ زش آػا تشای ػاخس HTML5اػسفاد اص

غییشاذ تخد ای لؼر ت ایؾ زی ز دس ثا صیش ط زؼشیف ؿشع ػاخر یه ب الي ی تاؿذ .

ػاخر ؿذ اػر زفاذ آ تا HTML4ی خشداصد . تا دثا وشد ب الی و تا HTML5آذ دس

دسن خایذ وشد . وذ ا ثا ب الي ت زذی لؼر صیش زمؼی تذی ی ؿد : یىذیش

طسا ػشكفط

اكی یه ت ب الي

غاة ب الي

وار ای ب الي

Navigation

اكالػاذ ػشكفط خاكفط

زى وذ صیش ت زؼشیف طسا ػشكفط طسای زضیطی دس سد ؼسذاذ كفط ب ی خشداصد

<?xml version=‚1.0‛ encoding=‚UTF-8‛?>

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

<head>

<title>Example Blog in HTML4</title>

</head> <?xml version=‚1.0‛ encoding=‚UTF-8‛?>

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

<head>

<title>Example Blog in HTML4</title>

</head>

<body>

27 HTML5

وذ یؼی ؿذ اذ . ؿا HTML4دثا وشد ای تخؾ اص تاالی ػشكفط طسا اص كفط ای ب اػر و تا تا

تشای زضیص IDتػی اطالاذ اعالػاذ DIVتیذ و وذ ا ت لغغ اخثاسی ت دی اػسفاد اص ز دس وذ صیش ی

طسا ؿذ اذ .

<div id=‚page‛>

<div id=‚header‛>

<h1><a href=‚www.someblogpost.com‛>HTML

Element Language is Awesome</a></h1>

</div>

اػسفاد ؿذ DIVػلش ب الي ی تاؿذ . دتاس دس ای وذ اص اسػاتشای یه وذ صیش ، طسا اكی یه غة

ت تن ای ز دس ز زثذی ؿذ اػر DIVت دی یاص ت اػسفاد اص ػلش یذیاػر . دس ای وذ ی ت

<div id=‚container‛>

<div id=‚center‛ class=‚column‛>

<div class=‚post‛ id=‚html_element_language‛>

<h2><a href=

‚/blog/html/html_element‛>

HTML Elements are Awesome</a></h2>

<div class=‚entry‛>

<p>Yesterday I started to write in Word and

realized that everything uses markup to separate content,

we simply don’t always see it. For instance, in Word you

define the start and end of content; if you want to create

a table of contents you define specific content to be for

a TOC; you define specific content for figures and page

structure. This is the same as HTML5!</p>

</div>

</div>

!!!! DIVدس صیش ؿا ی زایذ لؼر ؿثی ػاصی وار دس ب الي سا تثیذ . ا تاص تن ز دس ز ػلش

28 HTML5

<div id=‚comments‛>

<div id=‚speaker‛>

<p id=‚comment‛>You bring up a great point. </p>

<p id=‚comment‛>It is great that you take time to make

these comments. </p>

<p id=‚comment‛>You hit the nail on the head. </p>

</div>

</div>

</div>

خد دس یه ب الي اػر تشای خاتدای ؿا ت تاصـر ػمة خ تی طسای navigationصیش یض زى وذ

<div class=‚navigation‛>

<div class=‚alignleft‛>

<a href=‚/blog/page/2/‛>&laquo; Previous

Entries</a>

</div>

<div class=‚alignright‛></div>

</div>

</div>

ت فضای اس واسی تالي تشای تالي ی خشداصد navigationدس صیش

<div id=‚right‛ class=‚column‛>

<ul id=‚sidebar‛>

<li><h2>Info</h2>

<ul>

<li><a href=‚/blog/comment-policy/‛>Comment

Policy</a></li>

<li><a href=‚/blog/keywords/‛>Keyword List

List</a></li>

</ul> </li>

</ul>

</div>

29 HTML5

ب ػایر ی تاؿذ . طفدس ایر تخؾ خاكفط اص یه ك

<div id=‚footer‛>

<p>Copyright 2009 Matthew David</p>

</div>

</div></body></html>

زی اػسفاد آ دس ػاخساس طسا ـاذ ویذ . DIVا ی زایذ تشای ثا ػلش دس وذای تاال ؿ

آػا ی تاؿذ . ضاال ت تشای اؼا خاذ دسن ذاسد ت ش ضا طسا داسای یر ؼای ػاصاذی

ا ویذ . HTML5ػاخسا طسا تشای

<!doctype html>

<head>

<title>Example Blog in HTML4 </title>

</head>

<body>

اػسفاد ؿد ی خشداصد : HEADER دس ػلش طفو تایذ دس تاالی ك ییدس وذ صیش ا واس ت زؼشیف طسا

<header>

<h1><a href=‚www.someblogpost.com‛>HTML

Element Language is Awesome</a></h1>

</header>

وذ صیش سا دثا ویذ تشای دیذ . . . SECTIONاكی تالي لؼر ظشاذ تا خیسیذ اػر ی تا وه ػلش لؼر

خاكیر ؿشور خزیشی طسا :

<section><h2><a href=

‚/blog/html/html_element‛>

HTML Elements are Awesome</a></h2>

HTML4. وذ صیش سا دثا ویذ زفاذ سا تا ARTICLEػلش خیسیذ ی تاؿذ اا تا طفطسای اكی دس ك

مایؼ ویذ .

32 HTML5

<article>

<p>Yesterday I started to write in Word and

realized that everything uses markup to separate content,

we simply don’t always see it. For instance, in Word you

define the start and end of content; if you want to create

a table of contents you define specific content to be for

a TOC; you define specific content for figures and page

structure. This is the same as HTML5!</p>

</article>

وذ صیش خاذ تد . ت تلسذ DIALOGلؼر ظشاذ تا وه ػلش

<dialog>

<dt>John Smith</dt>

<dd> It is great that you take time to make

these comments.</dd>

</dialog>

اػسفاد ی ؿد . HTML5تشای یه داد دس NAVتشای خاتدای تی غاة خیـسش خذیذزش ب الي اص ػلش

یذ : وذ صیش سا دثا و

<nav>

<a href=‚/blog/page/2/‛>&laquo; Previous Entries</a>

</nav>

تلسذ صیش خاز ی یاتذ . SECTION دس خایا ػلش

</section>

body دس ادا ز تلسذ صیش ی تاؿذ navigationط ی تاؿذ و تا شا اطااذ ط تخؾ خا كففخایی ك

html ی یاتذ .ت زشزیة خاز

<footer>

<nav>

<ul>

<li><h2>Info</h2>

<ul>

<li><a href=‚/blog/comment-policy/‛>Comment

Policy</a></li>

31 HTML5

<li><a href=‚/blog/Keywords/‛>Keyword List</a>

</li>

</nav>

<p>Copyright 2009 Matthew David</p>

</footer>

</body>

</html>

تؼس ARTICLEی خسف طسا لات زـخیق ی تاؿذ ؿشع خایا غاة تا وه ػلش تلسذ اضص لؼر ا

خذا ؿذ اػر . ت ا اذاص لؼر ای DIALOGتذی ؿذ اػر اضص اػر لؼر وذ ظشاذ زػظ ػلش

navigation ػشكفط خاكفط لات زـخیق ی تاؿذ . یر اثشی اص ز DIV ـاذ ی ؿد تذ دس ثا تاال

یر خیسیذی خاف وذ یؼی ی تاؿذ .

HTML5 واس وشد تا فش

اص فشی تشای ثثر ی اص ایسشر ثثر ا وشد تاؿیذ طفآالی خشیذ وشد تاؿیذ یا دس ك اش ؿا تلسذ

اص ػلشای یػسفاد ی ویذ تخـو اص آ ا FORMاعالػاذ ظیش ا ا خاادی اػسفاد وشد ایذ . ػلش

اص اػر خغ اص آ زغییش ىشد اػر . ی دس مایؼ ای اػسفاد ؿا 1994دس ػا HTML2اضاف ؿذ دس

ب زغییشاذ زـ یشی داؿس اػر .

ؿذ آاد W3Cزا یاصای ؿا تشای اػسفاد اص فش ای ب ذیشیر داد تشص ؿذ اػر . HTML5تا

خاذ . ت ش ضا داسی مغ تؼاصی دس ی HTML5تشای 2.1ی وشد ػلش فش و ای سا فش اػر تشای

HTML5 . واستشد خذیذ اص فش ای ؿا خـسیثای اص یظی ا و لثال زػظ خاا اػىشیدر ی تاؿذ

آخاوغ ادا ؿذ اػر .

32 HTML5

2.1شسشای خـسثا وذ فش

2تسا ت تاال اص فش 4تاال فایشفوغ ؼخ ت 11ؼخ ت سص سػای ػلش فش ت زاصی كسذ شفر اػر شسش اخشا

2.1یؼر . ت ش ضا ت صدی وش ػفشی ت صدی اص فش دس ای صا زاس خض كثش زا یش ؿذ خـسثای ی وذ

خـسیثای خاذ وشد .

سی داد اػر HTML 0.2زغییش دس فش ز

ای یظی )سدی( ت شا خغ INPUT لؼر اطالی اص ؼس ػلش HTML5تضسسشی زغییش فش ای

ویذ : ی ی زایذ ـاذ سا اػسفاد وشد HTML5خذیذ اػر . یؼر صیش سا ، اص آس و ی زا دس

<input type=“search”>

. ویذ ی وشد اػسفاد دخذیذ ؿا ی زایذ تلسذ ـخق اص ػلش شتط تشای خؼسیظی وه ای تا

<input type=“number”>

تاص ادای اػذاد سدی سا طذد ویذ.ت ؿا اخاص ی دذ تشای زثذی خغ سدی یظی ای

<input type=“range”>

طذد وشد واسوسش سدی سا ی دذای یضی ت ؿا اخاص

<input type=“color”>

ای یظی ت ؿا اخاص تشای زثذی سدی ت خغ اسخاب وذ س سا ی دذ .

<input type=“tel”>

لاة سدی سا تشای ؿاس زف اػسفاد ویذ . ذای یظی ت ؿا اخاص ی د

<input type=“url”>

ت ؿا اخاص ی دذ زؼیی ویذ سدی یه آدسع ایسشسی تاؿذ.ای یظی

<input type=“email”>

ای یظی ت ؿا اخاص ی دذ زؼیی ویذ سدی یه آدسع ایی تاؿذ .

<input type=“date”>

33 HTML5

تلسذ خدواس زثذی ت یه اسخاب وذ زاسیخ ی ؿد . ساای یظی سدی

<input type=“month”>

ای یظی سدی سا تلسذ خدواس زثذی ت یه اسخاب وذ ا ی وذ .

<input type=“week”>

ای یظی سدی سا تلسذ خدواس زثذی ت یه اسخاب وذ فس ی وذ .

<input type=“time”>

ای یظی اخاص دسیافر داد تلسذ صا سا ی دذ .

<input type=“datetime”>

ای یظی اخاص دسیافر داد تلسذ صا زاسیخ سا ی دذ

<input type=“datetime-local”>

ای یظی تشای زاسیخ صا طی ی تاؿذ .

خـسیثای ی وذ . اص سدی ای ػاكش سدی text password submitسا اص یظی ای 2.1فش

دا تشای ػاخر فش اػسفاد خای وشد . ای خذیذ دس ا

<FORM>

<label >First Name </label>

<input name=‚FirstName‛ type=‚text‛>

<label >Last Name </label>

<input name=‚LastName‛ type=‚text‛>

<label >Date Of Birth </label>

<input name=‚DOB‛ type=‚date‛>

<label >Email Address </label>

<input name=‚email‛ type=‚email‛>

<label >Your Personal Web Site</label>

<input name=‚WebSite‛ type=‚URL‛>

<label >How Many Hours Do You Surf The Web Each Week?

</label>

34 HTML5

<input name=‚SurfWeb‛ type=‚range‛ min=‚1‛ max=‚20‛

value=‚0‛><output name=‚result‛ onforminput=‚value=a.

value‛>0</output>

</FORM>

تؼیاس آػا HTML5تثیذ . تىاس یشی ااع خسف یظی ای خسف سدی دس 1.11سید وذ تاال سا ی زایذ دس زلیش

اػر .

1.11 شیزل

Autofocus

ی زایذ فوع سا ت سدی سد ظش تذیذ . ت ثا صیش زخ ویذ : autofocusتا وه

<input name=‚FirstName‛ type=‚text‛ autofocus>

requiredػالر زاسی سدی تا

ؿا ی زایذ زؼیی ویذ و ضسی مذاسی دس سدی لشاس تیشد خای ثاؿذ . requiredتا وه یظی

>input name=‚FirstName‛ type=‚text‛ required<

ؿد . اش مذاس سدی خای تاؿذ دس ا طظ خیغای ایؾ داد ی

35 HTML5

Placeholderاطالی اػسفاد اص

و مذاس 11.12ؿا ی زایذ مذاسی سا دس دس سدی خد ایؾ دیذ اذ زلیش Placeholderتا وه

google search :دس آ لشاس داسد

12.12 شیزل

یس تش هیو تا و داسد لشاس اآ یسد دس دس فشم ؾیخ تلسذ یمذاس ای یطیزض ب یخؼسدشا ـسشیت دس

: ذیتث سا یظی یا واستشد زا ذیو دثا سا شیص وذ. تاال شیزل اذ ؿذ خاذ خان فشم ؾیخ مذاس س یسد

<FORM>

<input name=‚search‛ type=‚text‛ placeholder=‚Google

Search‛>

<input type=‚submit‛ value=‚Search‛>

</FORM>

36 HTML5

ؿا ی اػسفاد ویذ . HTML5فش آسد اص سؽ ای خسفی تشای تخد ا ا ی زایذ تشای سدیؿ

ذ یدس ز HTML5زفاذ آ تا اا HTML5تذ اػسفاد اص تیؼیذ تػی خاااػىشیدر صیش سا ثا زایذ

. اػر ؿس ؿذ وذ ای وسش دس ایدا و زیذ ؿا اػر تسید

<FORM>

<label >First Name </label>

<input name=‚FirstName‛ type=‚text‛ autofocus required>

<label >Last Name </label>

<input name=‚LastName‛ type=‚text‛ required >

<label >Date Of Birth </label required>

<input name=‚DOB‛ type=‚date‛>

<label >Email Address </label>

<input name=‚email‛ type=‚email‛>

<label >Your Personal Web Site</label>

<input name=‚WebSite‛ type=‚URL‛ placeholder=‚Enter

your own Web site address‛>

<label >How Many Hours Do You Surf The Web Each Week?

</label>

<input name=‚SurfWeb‛ type=‚range‛ min=‚1‛ max=‚20‛

value=‚0‛><output name=‚result‛ onforminput=‚value=a.

value‛>0</output>

</FORM>

HTML5 وسش داد تػی

HTMLای ؼخ اص HTML5فش ای تشای اػسفاد داد ا ت ظس اضاف تشسػی خان وشد ی تاؿذ.

و آدسع دایشوسشی یاص ت ذیشیر داد تش سی ػشسی وا سا تش سی وادیزشی ؿا فشا اػساذاسد ی تاؿذ

:ؼشفی ی ؿد ذیشیر وشد HTML5ی وذ . دس صیش ػ سا تشای ش ع داد و تسا داد سا دس

فش ای زػؼ داد تػیHTML5

ایؾ داد

ظ ػاصی داد

سذ ای فق دس صیش زضیص داد ؿذ اػر .زفاذ

37 HTML5

HTML5ػا فش زػؼ زػظ

. تا دسػر ؿذ خدتشای اسخاب یه سد اص اسد یؼر خایی آذی دس یه فش ب طلش

HTML5 یظی ه تا وتششدایذ . سامذاسا اسخاتی ػلش سا تا وه یؼر خایی آذی ذیزا یؿا

DATALIST ( . ثا صیش سا 1.13ت ؿا اخاص ی دذ آسای اص ػاكش دس یؼر خایی آذی خك ویذ )زلیش

. DATALISTدثا ویذ تشای دیذ عشص اػسفاد اص

<label>Select a color</label>

<input list=‚mylist‛ type=‚text‛>

<datalist id=‚mylist‛>

<option label=‚Red‛ value=‚Red‛>

<option label=‚Blue‛ value=‚Blue‛>

<option label=‚Green‛ value=‚Green‛>

</datalist>

1.13 شیزل

اؿسشان ت ضی شید ػاكش یت زاذ ی سا DATALIST یا مذاس. ؿد ی اػسفاد یسد ػلش دس mylist یظی مذاس

. ؿد زاؿس

38 HTML5

HTML5 دس داد ؾیا

DETAILS DATAGRID د ػلش ت ظس اػسفاد اص د سا تشای اضاف وشد زؼا تشای داد

اخاص اطاق وشد داد سا ت طسا ی دذ تشای ثا صیشا سا تشای اطاق داد DETAILSػلش ی تاؿذ .

دثا ویذ .

<p>Click for Additional Information.

<details open=‚open‛>

<p>The details for this content will be shown when you

select it with the mouse.</p></details>

</p>

DATAGRID ی زایذ ای ػلش وه تا ی خشداصد ت ؿا زؼا تا سادی و زای ت دیذ آ سا داسیذ

ػاخساس تذی داد اػر . سید داد ی تشای اػرسای . ای سؽ ا فشا آسیذاتضاسی ظیش اوشػافر اوؼض س

( : 1.14ذ تلسذ دسخسی یا یؼر یا فشزؼی ایؾ داد ؿد . ت كسذ ثا )زلیش یزا

<datagrid>

<p>HTML5</p>

<p>Ajax</p>

<p>XHTML</p>

<p>HTML 4</p>

</datagrid>

39 HTML5

1.14 شیزل

. اػر ؿذ اػسفاد طسا ؾیا یتشا ؼری ضار فشم ؾیخ سؽ اص شیزل یا دس

. وشد اػسفاد ضی اع اع یػ اص زاذ ی ػلش یا دس ضی یتذ فشر یتشا

42 HTML5

ب دس داد یا یػاص شایرخ دس اػسفاد داد شیرخ

دس. تاؿذ ی ریػا ب هی یتشا 24او تلسذ ا داد شیرخ ذاؿس یتشا سؽ هی 23ا یوو

HTML5 ب اػساذاسد شیرخ. ؿد شیرخ وا دس اتذی ؾیافضا شی زـ تلسذ زاذ ی ؿا داد اص مذاس

، ا یوو یتشا س غیت اص اػسفاد ػم دس. دذ ی سا داد اص یػظ مذاس یػاص شیرخ اخاص HTML5 ذیخذ

. شدی ی لشاس ب شسش داخ دس تاؿذ ی وا 25داد ایاخ هی ب شیرخ

داد تلسذ سای تشا ذیزا ی ؿا اػر ب سشش هی دس داد ایخا هی داؿس یتشا سؽ یا یاك ػد

داد اص زا ی تاؿذ ی لغغ سشریا تا اسزثاط و یصا یس ذید ادا تشا یاخشا ت شیرخ وا

ریا. اػر اػسفاد ضا دس ؼسذاذ یزم ی یخ یا غیػش دس سؽ یا. وشد اػسفاد

تش ب یا تشا و یصا اا ؼری یخذ ادیص یؿخل یزشایواد دس یآفال تلسذ ب یا تشا اص اػسفاد

یا ف یا یؿ یتشا ی یخ غیػش. اتذی یی ظی ریا ؿد ی اخشا یتا یا دػسا یس

. دذ ی سا غیػش تا وشد واس اخاص تاؿذ ی تشالشاس سشریا ت اسزثاط و یصا و اػر وشد فشا سا ظیؿشا

دس خد یتا دس ذیؼس ی یخ اوار وشد زه ضا دس ضا سش ؿذ ػاس یتشا سظش ؿا ، ثا یتشا

صا ذیو ی ایخ وشد حیزا ت ؿشع ذید ی سا ایخ ت داد خاػخ ت یزل ییا هی خاذ ضا

اص سا سشریا اسزثاط ذیؿذ خاسج 3G ای EDGE ؿثى اص و یصا وذ ی ضشور ت ؿشع ذیؿ ی سش ػاس

یظی یا HTML5 ب. ذیو حیزا سا خد س ذیتاؿ داؿس سا اعالػاذ ذیزا ی ؿا سا ذیا داد دػر

ی ؿا. تاذ اشاخ ضا دس اسزثاعر داد دػر اص صا دس دذ ی اخاص اػسفاد ضا دس یا تشا ت و داسد سا

داد دػر اص سشریا ؿثى تا سا خد اسزثاط ذیؿ سخ خػخا یض دس ىیا تذ ذید خاػخ خد ییا ت ذیزا

. ذیو افریدس ذیزا ی سا ذیخذ یا ایخ اسػا ؿا ایخ ؿذ لشاس تش ؿثى تا یتا اسزثاعاذ و یصا. ذیا

23

- Cookies 24

- Local 25

- Database

41 HTML5

؟ وا تلسذ ا داد شیرخ یز

هی سد دس ـسشیت اعالػاذ یتشا. فوغ شیفا اخ اخشا یشسشا دس اػسفاد ت ؿشع وا غیت ساید

. ذیو شاخؼ SQLite ریػا ت تاص س غیساتید

تا و یصا ، داد وشد اسد یتشا اػر یفش شیص ثا. ؿد ی ضاك دریاػىش خاا اص سفاداػ تا ب یػاص شیرخ

تلسذ ا داد . ذیؼس اػسفاد ضا دس و یشسش غیت ساید دس ذیو هیو یسد ػاكش اص شیت یفضا دس ع

ؿذ خاذ شیرخ وا

<section>

<header> <h1>Using Web Storage</h1> </header>

<article>

<section>

<p>Enter a value and then click out of the INPUT

field for the value to be stored</p>

<label for=‚local‛>Enter a Value </label>

<input type=‚text‛ name=‚local‛ value=‚‛

id=‚local‛ required autofocus>

</section>

</article>

</section>

-سا اضاف ی SCRIPTای ػاكش HTMLزػظ خاا اػىشیدر زشزیة داد ی ؿذ . دس خایی وذ وذ اكی

اػسفاد ی وی . SCRIPT. تشای اضاف وشد وذای اػىشیدر اص ػلش وی

<script> </script>

زاتغ خاا اػىشیدر سا دس دثا وذ اضاف ویذ .

function getStorage(type) {

var storage = window[type + ‚Storage‛],

delta = 0,

li = document.createElement(‚li‛);

if (storage.getItem(‚value‛)) {

42 HTML5

delta = ((new Date()).getTime() - (new Date()).

setTime(storage.getItem(‘timestamp’))) / 1000;

li.innerHTML = type + ‚Storage: ‛ + storage.

getItem(‚value‛) + ‚(last updated: ‛ + delta + ‚s ago)‛;

} else {

li.innerHTML = type + ‚Storage is empty‛;

}

document.querySelector(‚#previous‛).appendChild(li);

}

ػ واس سا ادا ی دذ : خاا اػىشیدر

فشاخای رخیش ػاخسس یه دیسا تیغ وا -1

خاذ ی ؿد دس دیسا تیغ اضاف ی ؿد . valueه فیذ و ی -2

فیذ صا خاتدای تی د ػ یض اضاف ی ؿد ت دیسا تیغ . -3

HTML5یظی ای خذیذ

ای اػر اخاص خیػس اطافاذ ت ػلش تشا ای واستشدی سا ی دذ . ػاكش اغة 26یظی اص هی

اػسفاد requiredتشای زؼیی وشد مذاس ای requiredو اص یظی INPUTداسای یظی ظیش ػلش ای

اػسفاد ویذ. HTML5. ت ش ضا دس ایدا یظی ای خذیذی خد داسد و ی زایذ اص آا دس ی وذ

ای یظی دس اسزثاط تا .( ی تاؿذ False)( یا غظ Trueداسای یه مذاس دسػر ) draggableیظی خذیذ

API 27ذ سا وشدوـی HTML5 . اخاص ی دذ تشای وـیذ ش ػلشی ت كفط سا ی دذ

ت ؿا اخاص ی دذ تشای ـخق وشد اش طسای دس كفط ب یاص ت یشایؾ داسد . contenteditableیظی

سا ی دذ . SECTION ا یشایؾ زا طسا دس دس ػلش ثا صیش ای اخاص سا ت ؿ

26

- Attribute

27 - Drag and Drop

43 HTML5

<section contenteditable=‚true‛>

<h1>Edit this content</h1>

<p>You can select, edit, and create your own content

in this space</p>

</section>

اضاف وشد اػسای ت ػاكش :

اػسای ػفاسؿی ػاخر . زا ، CSS تا ی زاضیص داد ی ؿد زا ػاكش و دس ای فل ز

دس دػسشع ی تاؿذ . HTML5دس id ،class Styleظیش XHTML HTML4یظی ای و دس

خـسیثای ی ؿد ؟ HTML5ز زیضی دس

HTML5 تشخی اص ػاكش ؼخ ای لذیی خیـسش خـسیثایاص HTML ی خایذ دیذ ی وذای خـسیث

. تشای تاػث ساضسش ؿذ فشر تذی یا عشاضی یه ؿی دس كفط خاذ ؿذ HTMLز ػاكش خذیذ دس

سا دس كفط ؿا ی دذ . 28ت ؿا اخاص خك یه عاس س )اسغضذ تشای س( MARQUEEػلش

. ی ؿذ اػراػسفاد CSSاػساذاسد HTMLغضذ اص خاا اػىشیدر ، تشای اػسفاد اص اس ػاكش سا ؿذ

خـسیثای ی ؿد دثا ویذ : HTML5دیذ ػاكشی و دس یؼر صیش سا تشای

BASEFONT

BIG

CENTER

FONT

S

STRIKE

TT

U

FRAME

FAMESET

28

- scrolling

44 HTML5

NOFRAMES

APPLET

ISINDEX

DIR

HTML5 وذ ت ای ؼا ی تاؿذ و شسش ب سد ی لذیی خـسیثای ی اص ػاكش ؼخ ا یااص دػس

تشی تیغ شسشای تا زه وشد ػاكش سد ظش . ؿا تایذ ی زاذ اص ای ػاكش خـسیثای وذػالل ؿا

تشای ایؾ داد كطیص كفطاذ ب تش سی HTML5خسف تشای خـسیثای اص ػاكش ا سا ؿذ زػظ

. شتع شسشای ب

اطالاذ تشای ػاكشی و ضزف ؿذ اذ . دس صیش تؼضی اص ػاكش و اكالش ؿذ اذ آسد ؿذ اػر :

دس ػلشA یظی“placeholder link” خایضی یظیHREF

ػلشADDRESS تشای ف تخؾ تذی

ػلشB اسی اص ثشای ؼ خاسج ؿذ زثذی ت ش زماضا تشای اسائ طذد ی اص س تشای ضاؿی

خاسخی ؿذ اػر

ػلشHR او خایضی یه خذاوذ ػغص تذ )خاسشاف( دس غاة ؿذ اػر

ػلشMENU زؼشیف ؿذ اػر تشای فیذ تد ای فؼی دتاس

ػلشSMALL اػسفاد ی ؿد تشای اسائ زاج وشد وزه وا

خـسیثای ی ؿذ آذ اػر . ؿا تدای اػسفاد اص یظی ای سا HTML5دس صیش یؼر اص یظی ای و دس

اػسفاد ویذ . CSSتایذ اص ػاخساس HTML5دس ؿذ

یظیalign دسCAPTION, IFRAME, IMG, INPUT ,OBJECT, LEGEND, TABLE, HR,

DIV, H1, H2, H3, H4, H5, H6, P ,COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

یظی ایalink , link , text , vlink دسBODY

یظیbackground دسBODY

45 HTML5

یظیbgcolor دسTABLE , TR ,TD,TH,BODY

یظیborder دس TABLE ,IMG,OBJECT

ای یظی cellpadding charoff دسCOL, COLGROUP, TBODY, TD, TFOOT, TH,

THEAD, TR

یظیclear دسBR

یظیcompact دسDL ,MENU, OL, UL

یظیframe دسTABLE

یظیframeborder دسIFRAME

یظیheight دسTD, TH

یظی ای hspace vspace دسIMG, OBJECT

یظی ایmarginheight marginwidth دسIFRAME

یظیnoshade دسHR

یظیnowrap دسTD, TH

یظیrules دسTABLE

یظیscrolling دسIFRAME

یظیsize دس HR, INPUT, SELECT

یظیtype دسCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD , TR

یظیwidth دسHR, TABLE, TD, TH, COL, COLGROUP ,PRE

ه ػایر خذیذ تؼاصی ی HTML5 ز تا وه ػلش

HTML5 ی زاذ تاػث زشع تشای زػؼ ت ؼشفی مذاس اص خلیل ای خذیذ ی خشداصد . ای

سا دس ظش تیشذ . آا ت یه سا تا زش تشای IE 6-8دذا ب ی و تایذ دس وذ یؼی اص شسشای ظیش

یاص داسذ . HTML5اسما ب ػایر ا ت زىطی خذیذ دس

تخلفی خشداصد ؿا تشای اػسفاد اص زىطی ای ضع خؿثخسا ت ؿى یی یه س تاص ػای ت ض

HTML5 زی وشد اسخاب ای تشای شسشایHTML5 تشای اػسفاد اص زىطیHTML4 تشای ایؾ

داد ویذ . modernizrیذ فای خاا اػىشیدر سا اص ػایر كطیص یه كفط ی خشداصذ . تشای ی وشد ی زا

46 HTML5

. فای وی تایر ی تاؿذ فضای صیادی اص ب ػایر ؿا سا اؿغا ی وذ 7فای فـشد ؿذ آ فمظ

modernizr ذ . اذ وذ صیش خظ اػىشیدر سا دس ز ؽ سیـ ب ػایسا اضاف ویسا دس آدسhead . لشاس دیذ

<!DOCTYPE html>

<html>

<head>

<title>Detecting HTML5 content with Modernizr</title>

<script src=“modernizr.min.js”></script>

</head>

<body>

ت كفط ؿا ای اىا زػظ اػىشیدر فشا ی آیذ و صای و تاصدیذ تػی خاااػىشیدر اضاف ؿذ

خـسیثای وذ تشای واس ت ا اػساذاسد سا ت ایؾ ی HTML5ذ اص شسشی اػسفاد وذ و تساذ اص و

ؿا طفدس ك HTML5تشای ، ػلش سدی تا اػساذاسد زاسد تشای شسشای لذیی ؼخ ای لذیی .

خد داسد :

<input type=‚date‛ name=‚DOB‛ id=‚DOB‛>

شسش ای لذیی ب خاذ زاؼر تذ یظی Modernizrتا اضاف وشد خشیا خاااػىشیدر ت شخغ

تػی آخاوغ خایضی ؿذ . HTML5ای

if (!Modernizr.inputtypes.date){

createDatepicker(document.getElementById(DOB));

}

ؿا زا واستشای و اص ب ػایر ؿا تاصدیذ ی وذ سا خؿؾ ی modernizrاتضاسای ظیش اػسفاد اصتا

ت ػا صتا یضتا تشای ایؾ طسا اػسفاد ی ویذ . HTML5دیذ اص

ی یاد شفس ایذ ز زیض

یافر ی ؿد آؿا ؿذ ایذ . ـس زشی ػاكش شتط ت HTML5دس ای فل ؿا تا ػاكش اكی خذیذی و دس

SECTION, ARTICLE, NAV ,DIALOG, ASIDE, FIGURE, HEADER, FOOTERس ػاكش

آؿا ؿذ ایذ . HTML5ذیشیر داد دس ر ی عس تا اطالاذ شتط . یض تا ػاكش فش ا اتضاس خذیذ اػ

47 HTML5

: ػاخر یه ب ػایر تا اػسفاد اص ػاكش لاة تذی 1خشط

,SECTION, ARTICLE, NAVIGATIONدس ای غة اص ای فل تا تىاس یشی خذیذ ػاكش

ASIDE, HEADER FOOTER دسHTML5 ساضسش آؿا ی ؿیذ . ای ػاكش ای اىا سا تشای تىاس تشد

ی وذ . دس ای خشط ؿا ی زایذ یه ب ػایر تذ فشا سا ؿا لات خاذ تد ػاخسا عشاضی ب

تؼاصیذ تشای سؿ ؿذ زی ؿا ی زایذ تا HTML5مق تا اػسفاد اص ػاكش خذیذ تن تذی خذیذ

ة زخ ویذ . ػاخساس تن تذی وذ ب ػایر تؼاصیذ ت ادا غ

ه ب ػایر ػاخر ؿذ ؼال ؿا خح تخؾ صیش اػر :ی

كفط اكی

كفط زیذاذ یا طل

اخثاسطفك

زاع تا اطفك

دس عشاضی ب ػایر ؿا آسد ؿذ اػر . HTML5ش وذا اص كفطاذ فق تشای ؿشش داد زی اػسفاد اص

سفازی ؼسذ . تا زا ؿذ ای خشط ؿا تایذ لادس ت واس تؼس ػاخساس ػایر ا تش اػاع یاص داسای ػاخساس

لاة تذی تشای عشاضی ب ػایر تاؿیذ .

( تشای ب ػایر ؿا templateػاخر یه لاة )

تشای ؿشع ساضر تیـسش اػسفاد ی ؿذ . HTML5تشای ش وذا اص كفط ای ای ػایر تؼضی ػاكش

. و تسا اص آ تشای ػاخر لاثی دیش تشای كفطاذ ای خشط لات اػسفاد تاؿذ ی خشداصی ػاخر یه كفطتا

تاؿذ لات اػسفاد دس ش كفط دیش یض HTMLو وذای اػر ب ػایر ؿا صای آػا ػاخر ذیشیر

یاص تشای یه ب ػایر اػر . . تشای ای خشط تلسذ خیؾ فشم كفط خا ؿا زا ػاكش ػاخساس سد

تشای ػاخر كفط اكی تایذ اص لاة اػسفاد وشد .

تسش اػر صای تشای تشای ؿشش ػاخسا خیؾ فشم كفط خا كشف وی . ؿا HTMLتشای ؿشع وذ یؼی

ى ز طسای ( تشی یه كفط تشای ایؾ تلشی تغس ایblockای ) ی خایذ اص اتضاسی تشای عشاضی لاة

48 HTML5

خشط ) تا اػسفاد اص خاسخیر تن تذی ایؾ داد ؿذ 1.1ودای كفط لشاس یشد اػسفاد ی ویذ . زلیش

اػر (

ی تاؿذ . CSSشا اػسای زا وذ ای تىاس سفس دس ای خشط ت

خیؾ فشم ػاخساس كفط

ت ؿا ای اىا سا ی دذ و تشای HTML5ش كفط ب لات ـاذ اػر . خشط : دس ای زلیش زاس تخؾ اكی 1.1زلیش

عشاضی اص تن تذی اػسفاد ویذ :

Header

Section

Navigation

Foote

49 HTML5

ت ؿى صیش اػر : HTML5وذ ػاخسا ای تشای كفط تاال دس

<!DOCTYPE html>

<head>

<meta content=‚en-us‛ http-equiv=‚Content-Language‛/>

<meta content=‚text/html; charset=utf-8‛ http-equiv=

‚Content-Type‛/>

<link href=‚style.css‛ rel=‚stylesheet‛ type=‚text/

css‛/>

<title>Company Home Page</title>

</head>

<body>

<header> </header>

<navigation> </navigation>

<section> </section>

<footer> </footer>

</body>

</html>

دس ا وذ یؼی اػر . دس DOCTYPEؼشفی ػلش HTML5 ی تا اػساذاسد طفخیؾ فشم تشای تاص وشد ك

ص ؿشع ت ـخق ؿذ اػر . TITLEػا ػایر تا وه ز CSS ط آدسع فای HEADز

ط خا ىشد ایذ .خك طسا تشای كف

ت زضیص ای ضع ی خشداصد و ش طسای دس ودا لشاس ی یشد . دس HTML5ػاكش خذیذ تن تذی دس

HTML4 XHTML ؿا فمظ ی زایذ تشای تن تذی اصDIV اػسفاد ویذ و وسش ذیشیر آ ػخر

و تشای تن تذی اػسفاد ی ویذ طسای ط و اػر . ای ضع آػا ؿذ اػر صای و ش ػلشی

,HEADER,FOOTERلشاس اػر اص آ اػسفاد ؿد ت ػا ا ػلش غشش ی ؿد تلسذ ػاكش ،

SECTION, NAVIGATION .

ویذ ت خش ا عس و دس وذ ـاذ ی ویذ ؿا خای ای ػاخساس كفط سا ػاخس ایذ ضاال ی زایذ ؿشع

وشد تخؾ ا تا طسای شتط .

52 HTML5

HEADERػفاسؿی وشد ػلش

، دس ای خشط تلسذ آسد ؿذ اػر . تشای اضاف وشد خؼسد ش HEADERػلش

زسخؼسدش ظیش ت ػشكفط تایذ وذ صیش سا اسد ویذ .

<header id=‚header‛ class=‚headerStyle‛>

<form method=‚get‛ action=‚http://www.google.

com/search‛>

<input type=‚text‛ name=‚q‛ size=‚15‛

maxlength=‚255‛ value=‚‚ placeholder=‚Search‛/>

<input type=‚submit‛ value=‚GO‛/>

<input type=‚hidden‛ name=‚sitesearch‛ value=

‚www.focalpress.com‛/>

</form>

</header>

ت ظس اسزثاط تی idاػسفاد ؿذ اػر و مذاس id classاص د یظی اطالی یؼی HEADERدس ػلش

cssیض تشای اسزثاط داد اػسای classكفط زؼشیف ؿذ اػر مذاس HEADERخاا اػىشیدر تا ػلش

ت ظس شفس طسای FORMداسد . ػلش خد FORM، ػلش HEADERاػسفاد ی ؿد . دس دس ػلش

اػر و ای placeholderسدی اسػا آ ت اػر .ای سدی زؼشیف ؿذ دس فش تاال داسای یظی

1.2یظی دس دس سدی دس صا ایؾ مذاس لشاس شفس خی ای یظی سا ت ایؾ ی زاسد . اذ زلیش

خشط

51 HTML5

. داسد لشاس Search مذاس یسد دس ذیت ی شیزل دس و اغس. خشط 1.2 شیزل

NAVIGATION ػلش اص اػسفاد

سا شیص HTML وذ. اػر ریػا دس ؿذ اػسفاد ی ا هی ذیش تش دس NAVIGATIONطسا تن

. ذیو دثا سا تاؿذ ی ػلش یا اص اػسفاد یز یتشا صیزض

<navigation id=‚NavigationLink‛

class=‚navigationStyle‛>

<a href=‚default.html‛>Home</a>|<a

href=‚products.html‛>Products</a>|<a href=‚news.

html‛>News</a>|<a href=‚contactUs.html‛>Contact Us</a>

</navigation>

سفساس ی HEADERاػر و اذ یظی ای ػلش id classداسای یظی ای NAVIGATIONػلش

NAVIGATIONخشط زخ ویذ دس آدا زاس تخؾ اكی طسا خد داسد و یىی اص آا 1.3وذ . ت زلیش

اػر .

52 HTML5

. ذیآ ی دس ؾیا ت كفط زح ػر دس خشط یا دس NAVIGATION ػلش ذیو ی ـاذ شیزل دس و اغس – خشط 1.3 شیزل

(ؿد ی ییزؼ CSS وه تا تخؾ ش ؾیا ط)

SECTIONاػسفاد اص ػلش

ػاخس ی ؿد دس SECTIONشوض فضای اكی كفط ب و تشای طسای اكی اػر تا وه ػلش

HTML تشای زؼشیفSECTION . ت ؿى صیش اػسفاد ی ؿد

<section> </section>

د فضا دس ظش شفس اػر و دس ای دفضا طسا ػایر ایؾ داد ی SECTIONدس لؼر دس لاة كفط

د فضا دس ARTICLEاغس و دس زلیش ی تیذ تا وه ػلش خشط سا ـاذ ویذ 1.3ؿد . زلیش

سا تشسػی ویذ . صیش وذ ایداد دؿ اػر دس ادا SECTIONلؼر

<section>

<div id=‚section_articleOneIdentifier‛ style=‚position:

absolute; left: 355px; top: 105px; width: 1px; height:

60px; z-index: 3‛>

<hr class=‚style2‛ style=‚height: 60px; width:

53 HTML5

1px‛/></div>

<article id=‚article_one‛ style=‚position: absolute;

left: 420px; top: 100px; width: 315px; height: 195px;

z-index: 2‛>

<h1>Header 1</h1>

<p>Add Content here</p></article>

<div id=‚section_articleOneIdentifier‛ style=‚position:

absolute; left: 355px; top: 355px; width: 1px; height:

60px; z-index: 3‛>

<hr class=‚style2‛ style=‚height: 60px; width:

1px‛/></div>

<article id=‚article_two‛ style=‚position: absolute;

left: 420px; top: 350px; width: 315px; height: 195px;

z-index: 2‛>

<h1>Header 2</h1>

<p>Add Content here</p>

</article>

<hr class=‚HRstyle‛ style=‚position: absolute; left:

420px; top: 320px; width: 315px; height: 2px; z-index: 3‛/>

</section>

idاػسفاد ؿذ اػر و ش دی آا داسای یظی ARTICLEد تاس اص ػلش SECTIONدس فضای ا تی ای

اػسفاد ؿذ اػر . CSSتىاس یشی ی تاؿذ و ای یظی تشای styleی تاؿذ ی عس داسی یظی

FOOTERػفاسؿی وشد ػلش

: ذیو دثا سا شیص وذ. تاؿذ ی FOOTER ػلش سفس تىاس ػلش یآخش

<footer id=‚footer‛ class=‚footerStyle‛>

<hr class=‚HRstyle‛/>

<p class=‚Copyright‛>Copyright © 2010 Focal

Press</p>

</footer>

54 HTML5

دس ـش ضك شیظ یاعالػاز ؼال . تاؿذ ی یادیص یطسا اعالػاذ یداس FOOTER ػلش ذیت ی تاال وذ دس و یساغ

خشط 1.5 شیزل اذ. شذی ی یخا تخؾ یا

. ذیوشد ـاذ تاال سد سا آ وذ و اػر شفس لشاس ـش ضك یطسا آ دس ذیت ی شیزل ییخا لؼر دس اغس خشط 1.5 شیزل

55 HTML5

: یا سػا یواستشد ػاكش یؼشف

ذئی ػلش

ؾیا ت زا ی VIDEO ػلش وه تا تاؿذ ی ذئی اشص ب دس اػسفاد سد 29یا سػا اص یىی اشص

ذیو زخ شیص وذ ت. ذیخشداص ب دس ذئی

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />

<source src="movie.mp4" type="video/mp4" />

Your browser does not support the audio element.

</video>

دس و ػ د خغش دس . اػر خشداخر وسش ع اسزفاع ػشم یزظ ت video ػلش دس دس ، تاال وذ دس

خشداصد ی ذئی ؾیا ثغ یؼشف ت مریضم

.ذئی ػلش دس اػسفاد سد یا یظی

Autoplay یظی

مذاس ؿد . ت اخشا ی تا اػسفاد اص ای یظی دس ػلش یذئ تؼذ اص د ؿذ كفط یذئ تلسذ خدواس ؿشع

اػر. autoplayای یظی

controlsیظی

اػر تا وه ای یظی ی زایذ وسش یذئ سا دس صا د و ؿا دو ای controlsای یظی مذاس

اخشا غیش ی تاؿذ سا دس اخسیاس واستش تزاسیذ.

29

- Media

56 HTML5

heightیظی

. ( تشای زظی اسزفاع ایؾ یذئ ی تاؿذی)مذاس ػذد pixelsمذاس ای یظی

loopیظی

اػر تا وه ای یظی ی زایذ تؼذ اص زا ؿذ ایؾ یذئ دتاس یذئ سا loopظی مذاس ای ی

تلسذ ازازیه ایؾ دیذ .

preloadیظی

یذئ یض تاس زاسی ی طفك دس تاص زاسی اػر صا تا طفاػر صای و ك preloadمذاس ای یظی

غیش لات اػسفاد ی ؿد . "autoplay"ظی اػسفاد ی ویذ یظی . ىس صای و اص ای یؿد

srcیظی

یا آدسع ط یذئ ی تاؿذ . تا وه ای یظی ط رخیش یذئ سا ت وذ ی دی . URLمذاس ای یظی

MPEG 4 ، Flash Video ، Ogg ، WebM ، dio Video InterleaveAuفشر ای داص یذئ تشای اػسفاد :

57 HTML5

widthیظی

ئ ی تاؿذ . )مذاس ػذدی( تشای زظی خای ایؾ یذ pixelمذاس ای یظی

، Firefox 4 beta ،Chrome 3.0.182.2دس شسشای ، خـسیثای تلسذ وا لات HTML5دس اػساذاسد ػلش یذئ

Opera 10.60 ،Internet Explorer 9: H.264 ی تاؿذ ؼخ ای خذیذزش.

ایدا سا ویه ویذ .خضئیاذ ػلش یذئ تشای اعالػاذ تیـسش دس سد

ػلش كذا

یض زػظ خخؾ زا ت اشص سؽ اػساذاسد ـخلی تشای اػسفاد اص كذا دس كفطاذ خد ذاؿر . اشص یض كذا

تلسذ اػساذاسد اص سؿی ـخق تشای كذا اػسفاد ی وذ . ت وذ صیش زخ HTML5 . 30ای ظیش فؾ خیش وذ

ویذ :

<audio src="song.ogg" controls="controls">

Your browser does not support the audio element.

</audio>

یظی ای ػلش كذا :

autoplayی یظ

ی ؿذ خخؾ ت ؿشع خدواس تلسذ كذا كفط ؾیا صا دس یظی یا وه تا اػر autoplay یظی یا مذاس

.وذ

controls یظی

ذیتاصد اسیاخس دس ب ؾیا صا دس سا وذ وسش اتضاس اس ذیزا ی یظی یا وه تا اػر controls یظی یا مذاس

. ذیتزاس وذ

58 HTML5

loop یظی

. ؿد ی خخؾ ا اص دتاس كذا ، كذا یاخشا ذیسػ ییخا ت اص تؼذ ذیزا ی یظی یا وه تا loop یظی مذاس

preload یظی

یظی لشػ یا اص اػسفاد صا دس وذ ی كذا د ت ؿشع كفط د صا دس یظی یا. preload یظی یا مذاس

autoplay ؿد ی اػسفاد لات شیغ .

src یظی

. ؿد ی ـخق سا كذا یفا آدسع یظی یا تا url مذاس

. تاؿذ ی شیص ؿشش ت كذا ػلش دس اػسفاد لات یا فشر

Ogg Vorbis

MP3

Wav

Vorbis

. تاؿذ ی شیص ششؿ ت داسذ سا كذا ػلش اص یثایخـس یزاا و یشسشا ؼری

Browser Ogg Vorbis MP3 WAV

FireFox 4 beta ✓ ✓ ✓

Safari 4 ✓ ✓ -

Chrome 3 (beta) ✓ ✓ -

Opera 10 (beta) ✓ - ✓

IE 8 - - -

30

- Flash player

59 HTML5

Canvasػلش

HTML5 ت زؼشیف ػلشCanvas ی ای شافیىی تا خشداخس اػر تا وه ای ػلش ی زایذ فا

ایداد ویذ . ای ػلش ی زاذ تشای خك شاف یا تاصی ای شافیىی یا ش ع زلیش داصی bitmapػاخساس

ب تا وه خاا اػىشخیر اػسفاد ویذ طفػلش ی زایذ اص زه زه ماط ك اػسفاد ؿد . تا اػسفاد اص ای

زلیش تىـیذ . ش زیضی سا و تخایذ ت

HTML5 زطر ػا خشداخر اػر 31ت زؼشیف دػ ی اص زاتغ“canvas API” خظ ، تشای وـیذ اؿىا ،

.صایا اػا زغییش ؿى

. تشای دیذ ا ی و دس ادا ای ایدا سا تشای ـاذ ویه ویذ APIتشای خضئیاذ زی اػسفاد اص

10 ، 10 ، 10 خ آاد اذ سا ویه ویذ

شسشای خـسیثا وذ اص ای ػلش ت ؿشش صیش ی تاؿذ :

FIRFOX 3.0 +

CHROME 3.0 +

OPERA 10.0 +

IE 7.0 +

IPHONE 1.0 +

ADROID 1.0 +

اص خاا اػدىشیدر تشای وـیذ زلایش شافیىی اػسفاد ی وذ . ت ثا صیش زخ ویذ : canvasػلش

<canvas id="myCanvas" width="200" height="100"></canvas>

یظی یتشا myCanvas مذاس تا ىؼیخ 122 ع ىؼیخ 222 ػشم تا یعشاض یتشا ط هی تاال وذ وه تا

id مذاس و اػر ؿذ دادیا id خد شیص دس شتط دریاػىش خاا وذ. خاذ ی فشا سا شتط دریاػىش خاا زاتغ

. تاؿذ ی

31

- Functions

62 HTML5

<script type="text/javascript">

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

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

cxt.fillStyle="#FF0000";

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

</script>

هیو سا دایا وذ یواس دػر دیس ذید یتشا ذیزا ی ؼری ػلش یا اص یثایخـس ت لادس ؿا شسش اش

. ذیو

. ذیو هیو سا دایا دایا ذیزا ی ػلش یا سد دس ـسشیت اعالػاذ یتشا

61 HTML5

اتغ :

HTML5 : designing rich Internet applications / Matthew David

Adobe® Dreamweaver® CS5 HTML5 Pack

Modernizr

HTML5 video From Wikipedia, the free encyclopedia

Video on the Web

HTML5 Video

Introduction to HTML5 video - Opera Developer Community

HTML5 video in Internet Explorer 9: H.264 and H.264 alone

Google Chrome gets HTML video support

Using audio and video in Firefox

Native Audio in the browser

Canvas

HTML5 Canvas