html5 persian-lan-hassan-tafreshi
TRANSCRIPT
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 & Video</a></li><li><a
title=‚Animation, 3D, and Games‛
href=‚/animation_3d.aspx‛>Animation & 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/‛>« 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/‛>« 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