معرفی سر فصل های HTML5

1. 1 HTML5
‫ٟٔش‬٩٨
‫زفشؿی‬ ٗ‫ضؼ‬ : ‫زاِیف‬
HTML5

2. 2 HTML5
‫اِىسشٚیٙىی‬ ‫وساب‬HTML5‫ػٙاكش‬ ‫عٛس‬ ٗ‫ٕٞی‬ ٚ ‫خذیذ‬ ‫ٞای‬ ً‫ز‬ ‫یا‬ ‫ػٙاكش‬ ‫ٔؼشفی‬ ٝ‫ت‬ ٝ‫خالك‬ ‫كٛسذ‬ ٝ‫ت‬
‫دس‬ ٝ‫یافس‬ ‫تٟثٛد‬HTML5‫ٔی‬‫خشداصد‬‫تاؿذ‬ ‫ٔی‬ ‫ٔخسّف‬ ‫ٔٙثغ‬ ‫زٙذ‬ ‫اص‬ ٕٝ‫زشخ‬ ‫تلٛسذ‬ ٝ‫و‬ ‫اِىسشٚ٘یىی‬ ‫وساب‬ ٗ‫ای‬ .ٚ
: ‫خشداصد‬ ‫ٔی‬ ‫صیش‬ ‫ٞای‬ ٖ‫ػٙٛا‬ ٝ‫ت‬
HTML5‫ز‬‫ی‬‫ؼر‬
ٖ‫ػاخسٕا‬ً‫ز‬HTML 5
HTML5ُٔ‫ؿا‬ٝ‫ز‬‫ٔٛاسد‬‫ی‬‫اػر‬‫؟‬
‫ػٙاكش‬‫خذ‬‫ی‬‫ذ‬‫ٔؼشف‬‫ی‬ٜ‫ؿذ‬‫دس‬HTML 5
ٜ‫اػسفاد‬‫اص‬HTML5‫تشا‬‫ی‬ٗ‫ػاخس‬ٖ‫آػا‬‫زش‬‫وذ‬HTML
‫واس‬ٖ‫وشد‬‫تا‬ْ‫فش‬HTML5
ٝ‫ز‬‫زغ‬‫یی‬‫ش‬‫دس‬ْ‫فش‬2.2HTMLٚ‫س‬‫ی‬ٜ‫داد‬‫اػر‬
َ‫وٙسش‬ٜ‫داد‬‫تٛػ‬‫ی‬ّٝHTML5
‫ٕ٘ا‬‫ی‬‫ؾ‬ٜ‫داد‬‫دس‬HTML5
‫رخ‬‫ی‬ٜ‫ش‬ٜ‫داد‬ٜٚ‫اػسفاد‬‫دس‬‫رخ‬‫ی‬‫شٞا‬‫ػاص‬‫ی‬‫ٞا‬‫ی‬ٜ‫داد‬‫دس‬‫ٚب‬
ٍٍ٘ٛ‫ز‬‫ی‬‫رخ‬‫ی‬ٜ‫ش‬ٜ‫داد‬‫ٞا‬‫تلٛسذ‬َ‫ِٛوا‬
ٚ‫ی‬ٌ‫ظ‬‫ی‬‫ٞا‬‫ی‬‫خذ‬‫ی‬‫ذ‬HTML5
ٝ‫ز‬‫ز‬‫ی‬‫ض‬‫ی‬‫دس‬HTML5‫خـس‬‫ی‬٘‫ثا‬‫ی‬ٕ٘‫ی‬‫ؿٛد‬‫؟‬
ٍٝ٘ٛ‫ز‬‫تا‬‫وٕه‬‫ػٙلش‬HTML5‫ی‬‫ه‬‫ػا‬‫ی‬‫ر‬‫خذ‬‫ی‬‫ذ‬‫تؼاص‬‫ی‬ٓ
‫ٔؼشف‬‫ی‬‫ػٙاكش‬‫واستشد‬‫ی‬ٝ٘‫سػا‬‫ا‬‫ی‬

3. 3 HTML5
HTML5‫زیؼر‬
HTML 5. ‫اػر‬ ْ‫٘ا‬ ‫یه‬ ٖ‫ػٙٛا‬ ‫زطر‬ ‫صیادی‬ ‫تؼیاس‬ ٝ‫یافس‬ ‫تٟثٛد‬ ‫ٞای‬ ‫٘مؾ‬ ٜ‫ٌیش٘ذ‬ ‫تش‬ ‫دس‬ ‫أا‬ ‫٘یؼر‬ ‫زیض‬ ‫یه‬
‫دیٍش‬ ‫ٞای‬ ٝ‫٘ؼخ‬ ٝ‫یافس‬ ٜ‫تٟثٛد‬HTML‫ٌفر‬ ٖ‫زٛا‬ ‫ٔی‬ ٝ‫و‬ ‫ی‬ ٌٝ٘ٛ ٝ‫ت‬ ‫تاؿذ‬ ‫ٔی‬ ‫ایٙسش٘ر‬ ‫دس‬ ٝ‫زٛػؼ‬ َ‫ضا‬ ‫دس‬ ‫ػشػر‬ ٝ‫ت‬ ٚ
‫ٔشٚسٌشٞا‬ ْ‫زٕا‬‫خذیذ‬‫و‬ ‫ٔی‬ ‫خـسیثا٘ی‬ ‫خذیذ‬ ‫اػسا٘ذاسد‬ ٗ‫ای‬ ‫اص‬. ‫ٙٙذ‬
ٝ‫تؼس‬‫ی‬HTML5‫افضاس‬ ْ‫٘ش‬ ‫دس‬Adobe® Dreamweaver® CS5٘‫تشٚصسػا‬‫ی‬ٜ‫ؿذ‬‫دس‬‫زاس‬‫ی‬‫خ‬August 31, 2010ُ‫لات‬ٜ‫اػسفاد‬ٚ
‫خـس‬‫ی‬٘‫ثا‬‫ی‬‫تشا‬‫ی‬‫وذ‬ٛ٘‫ی‬‫ؼ‬‫ی‬ٔ‫ی‬‫تاؿذ‬.
ً‫ز‬ ٖ‫ػاخسٕا‬HTML 5
ٜ‫ؿذ‬ ‫عشاضی‬ ‫ٞای‬ ‫ٚب‬ ْ‫زٕا‬ ٝ‫ٞؼس‬HTML‫اػر‬‫وذ‬ ُٔ‫ؿا‬ ٝ‫و‬‫ٞای‬‫ٚب‬ ٝ‫كفط‬ ‫ٞش‬ ٖٚ‫دس‬‫ػایر‬‫اػر‬.
‫ٞا‬ ‫أشٚص‬‫ٞا‬ ‫ػایر‬ ‫ٚب‬‫ٞای‬ ‫ٔٛخٛدیر‬‫خٛیا‬ ‫ٞای‬ ‫ٚب‬ ‫اص‬ ‫ٞا‬ ‫ػایر‬ ‫ٚب‬ . ‫ٞؼسٙذ‬ ‫ی‬ ٜ‫اِؼاد‬ ‫فٛق‬1
ٝ‫ٔدٕٛػ‬ ‫ػٕر‬ ٝ‫ت‬
‫ی‬‫واستشدی‬ ‫ٞای‬ ٝٔ‫تش٘ا‬ ‫اص‬2
‫وش‬ ‫ضشور‬ٖ‫صتا‬ ٝ‫ٞؼس‬ . ‫ا٘ذ‬ ٜ‫د‬HTMLٜ‫ٌیش٘ذ‬ ‫تش‬ ‫دس‬ّٕ‫ػ‬ ‫تیـسش‬ ٚ ‫تیـسش‬ ‫ٞای‬ ‫دسخٛاػر‬ٍ‫شدی‬
‫تاؿذ‬ ‫ٔی‬ ‫ٔا‬ ‫اضسیاخاذ‬ ٝ‫ت‬ ٖ‫سػیذ‬ ‫تشای‬‫خذیذ‬ ‫اػسا٘ذاسد‬ ٗ‫ای‬ .،HTML 5. ‫ؿٛد‬ ‫ٔی‬ ‫ٔؼشفی‬
‫وذ‬ ٖ‫زٛا‬ ‫ٔی‬ ‫ودا‬HTML‫وشد‬ ‫خیذا‬ ‫سا‬
ٍٝ٘ٛ‫ز‬ ‫ٌفر‬ ‫تایذ‬HTMLٜ‫ٔٛؿٛاس‬ ‫ساػر‬ ‫وّیه‬ ‫تا‬ ٚ ‫ٚب‬ ٝ‫كفط‬ ‫ٞش‬ ٝ‫ت‬ ٖ‫وشد‬ ٜ‫ٍ٘ا‬ ‫تا‬ ‫؟‬ ٓ‫وٙی‬ ‫خیذا‬ ‫سا‬3
‫سٚی‬ ‫تش‬
‫ا٘سخاب‬ ٚ ٝ‫كفط‬selecting View Page Source‫وذ‬ ‫زٛا٘یذ‬ ‫ٔی‬HTMLٙ‫و‬ ٜ‫ٔـاٞذ‬ ‫سا‬ ٝ‫كفط‬‫زلٛیش‬ . ‫یذ‬1-1
‫وذٞای‬ ‫ٕ٘ایؾ‬ ‫٘ٛع‬HTML‫ٚب‬ ‫ٔشٚسٌش‬ ‫٘ٛع‬ ٝ‫ت‬ ‫تؼسٍی‬4
ٝ‫ز‬ ‫ؿٕا‬ ‫٘یؼر‬ ٟٓٔ. ‫داسد‬ ‫ؿٕا‬ٝ‫زٛػؼ‬ ‫اص‬ ‫ٞذفی‬‫ٚب‬‫سا‬
ٝ‫ز‬ ‫اص‬ ٚ ‫وٙیذ‬ ‫ٔی‬ َ‫د٘ثا‬‫اػىش‬ ٖ‫صتا‬‫ی‬‫دس‬‫ی‬‫تشای‬‫خشیذ‬ ‫ػثذ‬ ‫ػایر‬ ‫یه‬ ٝ‫زٛػؼ‬‫اػىشیدسی‬ ٖ‫صتا‬ ‫تا‬PHP‫یا‬ ٚ‫ػاصی‬ ٜ‫خیذا‬
ّٝ‫تٛػی‬ASP.net‫تشای‬‫سػا٘ی‬ ‫سٚص‬َ‫اسػا‬‫ٞا‬‫تاصی‬ ‫تا‬ ‫تاصی‬ ‫یا‬ ٚ ‫الي‬ ‫ٚب‬ ‫ی‬‫ٞای‬ٗ‫آ٘الی‬‫ٔی‬ ٜ‫اػسفاد‬‫وٙیذ‬.َ‫ٞشضا‬ ٝ‫ت‬
1
- Static
2
- Application
3
-Mouse
4
-Browser

4. 4 HTML5
‫وٙیذ‬ ٜ‫اػسفاد‬ ٝ‫و‬ ‫اػىشیدسی‬ ٖ‫صتا‬ ‫ٞش‬ ‫اص‬‫دس‬‫عشاضی‬‫ٚب‬‫ػایر‬‫تایذ‬‫دس‬‫اص‬ ‫ٞا‬ ‫لؼٕر‬ ‫اص‬ ‫تشخی‬HTMLٙ‫و‬ ٜ‫اػسفاد‬‫ی‬‫دس‬ .‫ذ‬
‫تذٞذ‬ ‫ٕ٘ایؾ‬ ‫دسػسی‬ ٝ‫ت‬ ‫سا‬ ٝ‫كفط‬ ٝ‫و‬ ‫تٛد‬ ‫٘خٛاٞذ‬ ‫لادس‬ ‫ؿٕا‬ ‫ٔشٚسٌش‬ ‫ایٙلٛسذ‬ ‫غیش‬.
‫زلٛیش‬1-1‫وذ‬HTML‫ٚب‬ ‫ٔشٚسٌش‬ ‫ٞش‬ ‫زٛػظ‬ ‫زٛا٘ذ‬ ‫ٔی‬‫آیذ‬ ‫دس‬ ‫ٕ٘ایؾ‬ ٝ‫ت‬.ٝ‫ت‬ ‫ػایر‬ ‫وذ‬ ‫لؼٕر‬ ْٚ‫وش‬ ٌٌُٛ ‫ٔشٚسٌش‬ ‫وٕه‬ ٝ‫ت‬ ‫زلٛیش‬ ٗ‫ای‬ ‫دس‬
. ‫اػر‬ ٜ‫آٔذ‬ ‫دس‬ ‫ٕ٘ایؾ‬
HTML5‫؟‬ ‫اػر‬ ‫ٔٛاسدی‬ ٝ‫ز‬ ُٔ‫ؿا‬
‫تشخالف‬‫خیـشفر‬‫ٞای‬ ٝ‫٘ؼخ‬‫لثّی‬HTML،HTML5‫ٞای‬ ‫ٚیظٌی‬ ‫خذیذ‬‫اػر‬ ٜ‫آٚسد‬ ‫تذػر‬ٚ‫زٟاسزٛب‬
‫ٔٙاػثی‬٘‫خـسیثا‬ ‫تشای‬‫ی‬‫٘یاص‬ ‫اص‬ٜ‫د‬ ‫دس‬ ٖ‫٘ٛیؼا‬ ٝٔ‫تش٘ا‬ ٚ ‫ٚب‬ ٖ‫دٞٙذٌا‬ ٝ‫زٛػؼ‬‫اخیش‬‫اػر‬‫ٔٛثش‬ ُٔ‫ػٛا‬ .HTML5‫سا‬
‫ٞای‬ ‫لؼٕر‬ ٝ‫ت‬ ٖ‫زٛا‬ ‫ٔی‬‫وشد‬ ٓ‫زمؼی‬‫صیش‬ ‫ؿشش‬ ٝ‫ت‬:

5. 5 HTML5
ٝ‫كفط‬ ٖ‫ػاخسٕا‬ ٝ‫ٞؼس‬
‫تلشی‬ ٝ‫اسائ‬
‫ٌشافیىی‬ ‫اتضاس‬
ٝ٘‫سػا‬ ‫اص‬ ‫تیـسش‬ ‫خـسثیا٘ی‬5
‫اص‬ ٜ‫اػسفاد‬ ‫تٟثٛد‬‫خاٚا‬‫اػىشیدر‬
‫ضشور‬‫تؼٛی‬ً‫ز‬ ٖ‫صتا‬
ٝ‫و‬ ‫وؼی‬ ‫ٞش‬‫وذ‬HTML‫دػسؾ‬ ٝ‫٘ٛؿس‬‫دس‬ ٖ ‫ٞایـا‬ ‫دػر‬ ٖ‫اال‬ ٕٝٞ ‫خٛب‬ ‫؟‬ ‫تاال‬ ‫تثش‬ ‫سا‬. ‫ٞٛاػر‬‫ضمیمسا‬
‫وذ‬ ٖ‫ػاخسٕا‬ ‫اص‬ ٜ‫اػسفاد‬ ٚ ‫ػاخر‬ ٚ ‫سؿذ‬ ‫ٔا‬ ‫اوثشیر‬HTML4/XHTML‫ا‬ ٜ‫داد‬ ْ‫ا٘دا‬ ‫سا‬‫ی‬ٓ.‫آیا‬ٖ‫اال‬‫دس‬HTML5
ٞ ٗ‫ٌشفس‬ ‫یاد‬ ٜ‫دٚتاس‬ ٝ‫ت‬ ‫٘یاص‬ ‫ٚالؼا‬ٝ٘ ‫؟‬ ‫ٞؼر‬ ‫زیض‬ ٕٝ. ‫اػر‬ ‫خٛتی‬ ‫خثش‬ ٗ‫ای‬ ٚHTML5‫تلٛسذ‬ُٔ‫وا‬‫ٞای‬ ‫وذ‬ ‫اص‬
َ‫ٔثا‬ ‫تلٛسذ‬ . ‫دٞذ‬ ‫ٔی‬ ‫سا‬ ‫دیٍشی‬ ‫اػسا٘ذاسد‬ ٝ‫ت‬ ‫وذی‬ ‫اص‬ ‫ٟٔاخشذ‬ ٜ‫اخاص‬ ‫ؿٕا‬ ٝ‫ت‬ . ‫وٙذ‬ ‫ٔی‬ ‫خـسیثا٘ی‬ ‫لذیٕی‬ َٕٛ‫ٔؼ‬
‫وذ‬ ‫اص‬ ‫خـسیثا٘ی‬ ٜ‫اخاص‬XHTML‫دس‬ ‫سا‬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.
‫دس‬ ‫سا‬ ‫تاال‬ َ‫ٔثا‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ ٗ‫تٙاتشای‬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. 6 HTML5
‫تاال‬ َ‫ٔثا‬ ‫ٞای‬ ‫خظ‬ ‫دس‬‫واسوسش‬/ً‫ز‬ ‫دس‬<br>‫دس‬HTML5‫اػر‬ ٜ‫افساد‬ ّٓ‫ل‬ ‫اص‬.‫ٔشٚسٌشٞای‬ ‫دس‬ ‫وذ‬ َ‫ضا‬ ‫ٞش‬ ٝ‫ت‬
XHTML. ‫وٙذ‬ ‫ٔی‬ ‫واس‬
‫دس‬ ‫ٔٛضٛع‬ ٗ‫ای‬ ٝ‫اِثس‬HTML5‫دس‬ ‫خذیذ‬ ‫ػٙاكش‬ ‫اص‬ ‫تؼیاس‬ . ‫دٞذ‬ ‫ٕ٘ی‬ ‫ٔؼٙی‬HTML5‫ٕ٘ی‬ ‫خـسیثا٘ی‬ ‫ٚب‬ ‫لذیٕی‬ ‫ٔشٚسٌشٞای‬ ‫دس‬
‫ؿٛد‬.
‫اص‬ ‫زٛا٘ٙذ‬ ‫ٔی‬ ٝ‫و‬ ‫ٔشٚسٌشٞای‬HTML5: ‫وٙٙذ‬ ‫خـسیثا٘ی‬
‫فایشفٛوغ‬6
ٝ‫٘ؼخ‬3‫تاال‬ ٝ‫ت‬(ٔ‫ػا‬ ٓ‫ػیؼس‬ ْ‫زٕا‬‫ٞا‬ ُ7
)
‫ػفشی‬8
ٝ‫٘ؼخ‬3( ‫تاال‬ ٝ‫ت‬‫ٚیٙذٚص‬ ‫ٞای‬ ُٔ‫ػا‬ ٓ‫ػیؼس‬9
‫ایىغ‬ ٚ10
ٖٛ‫ایف‬ ٚٝ‫٘ؼخ‬ ُٔ‫ػا‬ ٓ‫ػیؼس‬ ‫تا‬1‫تاال‬ ٝ‫ت‬11
)
ْٚ‫وش‬ ٌٌُٛ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. 7 HTML5
‫دس‬ ‫ٔطسٛا‬ ‫تٙذی‬ ‫تّٛن‬HTML‫ٔٛسد‬ ٚ‫د‬ ‫اص‬ ‫یىی‬ ‫ضمیمر‬ ‫دس‬،ٚ ٜ‫خیسیذ‬ َٚ‫خذا‬‫ی‬‫ػٙلش‬ ‫ا‬DIV. ‫تاؿذ‬ ‫ٔی‬ ‫ٔفسضص‬
HTML5ٞ‫د‬ ‫ٔی‬ ٜ‫اخاص‬ ‫ؿٕا‬ ٝ‫ت‬ ٝ‫و‬ ‫خشداصد‬ ‫ٔی‬ ‫خذیذ‬ ‫ػٙلش‬ ‫زٙذ‬ ‫ٔؼشفی‬‫ذ‬‫ٞا‬ ‫تّٛن‬ ‫ساضسش‬‫ی‬‫ٚاسد‬ ٝ‫كفط‬ ‫دس‬ ‫سا‬ ‫ٔطسٛا‬ ‫اص‬
.‫وٙیذ‬‫تّٛن‬ ‫اص‬ ‫ٞای‬ ْ‫٘ا‬ ‫تلٛسذ‬ ‫خذیذ‬ ‫ػٙاكش‬ ٗ‫ای‬‫ٞای‬‫ٔطسٛا‬ٝ‫ٔشتٛع‬: ‫اػر‬ ٜ‫ؿذ‬ ‫زؼشیف‬
 HEADER
 SECTION
 ARTICLE
 ASIDE
 FOOTER
 NAV
‫تٟسش‬ ‫تؼیاس‬ ‫یی‬ ٝ‫الی‬ ‫ی‬ ٝ‫كفط‬ ‫ػٙاكش‬ ‫ٞای‬ ٝ‫٘مـ‬‫اص‬‫ٞای‬ ً‫ز‬ ‫سفساس‬ ٝ‫ت‬ ‫وٙیذ‬ ‫فىش‬ . ‫تاؿذ‬ ‫ٔی‬ ‫ػٙذ‬ ‫اص‬ ‫ی‬ ٜ‫خاس‬ ٖ‫وشد‬ ‫ٚكف‬
‫ٚٚسد‬ ‫ٔاوشٚػافر‬ ‫ػٙذ‬ ‫یه‬ ‫زِٛیذ‬ ‫سٚؽ‬ ٝ‫ؿثی‬ ٝ‫و‬ ‫خذیذ‬13
، ‫ٔطسٛا‬ ‫اص‬ ‫ٞای‬ ‫تخؾ‬ ‫اص‬ ‫ؿٛد‬ ‫ٔی‬ ‫ػاخر‬ ‫ٚٚسد‬ ‫ػٙذ‬ . ‫تاؿذ‬ ‫ٔی‬
. ‫تاؿذ‬ ‫خذا‬ ‫ٞای‬ ‫خاسٌشاف‬ ُٔ‫ؿا‬ ‫زٛا٘ذ‬ ‫ٔی‬‫دس‬ ‫خذیذ‬ ‫تٙذی‬ ‫تّٛن‬ ‫ػٙلش‬HTML5‫وذ‬ ‫سٚؽ‬ ‫سٚ٘ذ‬HTMLٕ‫لؼ‬ ‫دس‬‫ر‬
‫وٙذ‬ ‫ٔی‬ ‫خیشٚی‬ ‫تّٛن‬ ‫ٔٙغمی‬‫دٞذ‬ ‫ٔی‬ ٝٔ‫ادا‬ ‫سا‬ ‫سٚؽ‬ ٗ‫ای‬ ‫خذیذ‬ ‫سٚیىشد‬ ‫تا‬ ٝ‫و‬ ‫زفاٚذ‬ ٗ‫ای‬ ‫تا‬ ‫أا‬.
‫دس‬ ْ‫فٛس‬ ‫ػٙلش‬HTML5‫دس‬ ٜ‫ػٕذ‬ ‫تلٛسذ‬ ‫تاس‬ ٗ‫اِٚی‬ ،HTML2َ‫ػا‬ ‫دس‬ ٖ‫آ‬ ‫اص‬ ‫تؼذ‬1994ٝ‫ت‬‫تؼذ‬ٖ‫صتا‬ ‫دس‬HTML
ٖ‫أىا‬ ٗ‫ای‬ . ‫ٌشفر‬ ‫لشاس‬ ٜ‫اػسفاد‬ ‫ٔٛسد‬‫دس‬ْ‫فٛس‬ٝ‫٘ؼخ‬214
ٔ ‫دٞذ‬ ‫ٔی‬ ٜ‫اخاص‬ ‫ؿٕا‬ ٝ‫ت‬ٚ ٝ‫اضاف‬ ‫سا‬ ٜ‫ؿذ‬ ٜ‫فشػساد‬ ‫غاِة‬
ْ‫فٛس‬ ‫فیّذ‬ ٝ‫ت‬ ‫تلشی‬ ‫افىر‬ ‫تلٛسذ‬ ‫وٙیذ‬ َ‫د٘ثا‬‫٘ظیش‬ ‫وٙیذ‬ ‫اعالق‬:
‫فمظ‬ ٖ‫وشد‬ ٝ‫اضاف‬ ‫تشای‬ ْ‫فٛس‬ ‫یه‬ ‫ػاخساس‬‫ٔمذاس‬. ‫ٞا‬ ٗ‫زّف‬ ٜ‫ؿٕاس‬
ٗ‫خزیشفس‬ ‫تشای‬ ‫فیّذ‬ ‫یه‬ ‫ػاخساس‬‫خؼر‬‫اِىسشٚ٘یىی‬15
. ‫كطیص‬
‫اعالػاذ‬ ‫ا٘سخاب‬ ٚ ٝ‫ٔطاػث‬ ‫تشای‬ ْ‫فٛس‬ ‫ٚسٚدی‬ ‫تشای‬ ‫ػاخساس‬ ‫زٛا٘ایی‬
‫تاؿذ‬ ‫فشم‬ ‫خیؾ‬ ٗ‫اِٚی‬ ‫تلٛسذ‬ ْ‫فٛس‬ ‫اص‬ ‫ی‬ ‫فیّذ‬ ‫وشد‬ ‫ٔدثٛس‬
( ٖ‫وشد‬ ٖ‫٘ـا‬‫ٕ٘ایی‬ ‫تضسي‬)16
. ‫٘ظش‬ ‫ٔٛسد‬ ‫ٞای‬ ‫فیّذ‬
13
- Document Microsoft Word
14
- Forms 2.0
15
- Email address

8. 8 HTML5
ٝ‫٘ؼخ‬ ‫ٞای‬ ْ‫فٛس‬ ‫دس‬2ْ‫فٛس‬ ‫یه‬ ‫ػاخر‬ ‫تشای‬ ‫ؿٕا‬ ٝ‫و‬ ‫غٙی‬ ‫ػّٕیاذ‬HTML‫داس‬ ْ‫الص‬‫ی‬ٚ ‫آخاوغ‬ ٝ‫ت‬ ‫٘یاص‬ ٖٚ‫تذ‬ ‫سا‬ ‫ذ‬‫ی‬‫ا‬
‫٘ظیش‬ ٖ‫صتا‬ ‫ٞش‬ ‫یا‬ ‫فّؾ‬ٜ‫آٔاد‬ٜ‫ؿذ‬. ‫اػر‬
‫دس‬ ‫ٔطسٛا‬ ‫تٙذی‬ ‫تّٛن‬ٝ‫كفط‬
ٖ‫ػاخسٕا‬ ‫سػا٘ی‬ ‫تشٚص‬ ‫دس‬HTML5‫دس‬ ‫ٔطسٛا‬ ‫یه‬ ‫زٛضیطاذ‬ ‫فضاٞای‬ ‫اص‬ ٝ‫و‬ ‫اػر‬ ٝ‫ٌشفس‬ ‫لشاس‬ ٝ‫زٛخ‬ ‫ٔٛسد‬ ٝ‫٘ىس‬ ٗ‫ای‬
‫دس‬ ‫ٔطسٛا‬ ‫تٙذی‬ ‫تّٛن‬ ٖ‫ػٙٛا‬ ‫زطر‬ ‫ٔٛضٛع‬ ٗ‫ای‬ . ‫ؿٛد‬ ٜ‫اػسفاد‬ ‫دسػسی‬ ٝ‫ت‬ ٝ‫كفط‬HTML5. ‫ٌیشد‬ ‫ٔی‬ ‫لشاس‬ ‫خغاب‬ ‫ٔٛسد‬
‫وٙی‬ ‫ٔی‬ ٜ‫اػسفاد‬ ‫ٚب‬ ‫ٞای‬ ٝ‫كفط‬ ٝ‫زٛػؼ‬ ‫دس‬ ‫تٙذی‬ ‫تّٛن‬ ‫اص‬ ‫ٔا‬ ٕٝٞٓ‫ٚب‬ ‫ٔغاِة‬ ٖ‫زٛا‬ ‫ٔی‬ ‫خٙغ‬ ٗ‫ای‬ ‫اص‬ َ‫ٔثا‬ ‫تلٛسذ‬ .
: ‫٘ظیش‬ ‫ٔغاِثی‬ ُٔ‫ؿا‬ ‫الي‬ ‫ٚب‬ ‫یه‬ ٖ‫ػاخسٕا‬ .‫تشد‬ ْ‫٘ا‬ ‫سا‬ ‫الي‬
‫ٔغّة‬ ‫ٔٛضٛع‬‫ت‬‫الي‬17
.
‫ٔغّة‬ ‫تشای‬ ‫زاسیخ‬.
‫ٔطسٛا‬ ٗ‫تی‬ ٝ‫ساتغ‬ ‫ٞا‬ ‫ِیٙه‬ ٖ‫وشد‬ ٝ‫اضاف‬.
‫تالي‬ ‫ٔطسٛا‬ ٖ‫وشد‬ ٝ‫اضاف‬.
‫ؿٕا‬ ‫ٔغّة‬ ‫تشای‬ ‫٘ظش‬ َ‫اسػا‬ ‫تشای‬ ٖ‫واستشا‬ ٝ‫ت‬ ٜ‫اخاص‬.
ُٔ‫ؿا‬ٛ‫خؼسد‬ ‫لؼٕر‬.
ٝ‫ػشكفط‬ ٗ‫ػاخس‬18
ٝ‫خاكفط‬ ٚ19
‫كفطاذ‬ ‫تشای‬.
‫تا‬HTML4‫خشاٌشف‬ ‫ػٙاكش‬ ٚ ٜ‫خیسیذ‬ َٚ‫خذا‬ ‫ػاخر‬ ‫تا‬ ‫سا‬ ‫تاال‬ ‫ِیؼر‬ ْ‫زٕا‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ ‫٘یض‬(<p>)‫اص‬ ٜ‫اػسفاد‬ ‫تا‬ ‫ٚیا‬
‫ػٙلش‬DIVٜ‫اػسفاد‬ ‫ٔٛسد‬ ‫دس‬ ‫خذیا‬ ‫ٚیىی‬ ‫زٛضیطاذ‬ ‫اص‬ ‫صیش‬ َ‫.ٔثا‬ ‫وٙیذ‬ ‫ایداد‬ ٝ‫كفط‬ ‫یه‬ ‫دس‬ ‫ٔطسٛا‬ ‫تٙذی‬ ‫تّٛن‬ ‫تشای‬
HTML5‫تا‬‫زىٙیه‬HTML4‫زلٛیش‬ ( ‫تاؿذ‬ ‫ٔی‬1.3‫ػٙاكش‬ . )HTML‫تاؿذ‬ ‫ٔی‬ ‫وح‬ ‫ضشٚف‬ ‫تلٛسذ‬
16
- Highlight
17
- Blog post
18
- Header
19
- Footer

9. 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‫زل‬‫ٛی‬‫ش‬‫ٔؼٙی‬ ‫ٔٛسد‬ ‫دس‬ ‫دسػسی‬‫وذٞای‬ٜ‫ؿذ‬ ٜ‫اػسفاد‬٘ ‫یه‬ ‫تا‬ ‫واستش‬ ٝ‫ت‬ ‫سا‬ٜ‫ٍا‬‫ٕ٘ی‬
. ‫دٞذ‬HTML5. ‫اػر‬ ٜ‫وشد‬ ٓٞ‫فشا‬ ‫تٟسش‬ ‫دسن‬ ‫تشای‬ ‫داس‬ ‫ٔؼٙی‬ ‫زشویة‬ ‫اص‬ ‫تٟسشی‬ ‫٘مؾ‬‫تا‬‫اص‬ ٜ‫اػسفاد‬‫ػٙلش‬ATICLE‫دس‬
HTML5ٝ‫ت‬‫زٛا٘ا‬ ‫ؿٕا‬‫ی‬‫ی‬‫خّك‬ ٚ‫تّٛو‬ ‫تلٛسذ‬‫ی‬‫ك‬ ‫اص‬‫ف‬‫ط‬‫زؼشیف‬ ‫تشای‬ ِٝٝ‫ٔما‬‫دٞذ‬ ‫ٔی‬.

10. 12 HTML5
ٔ ‫اص‬ ‫لؼٕسی‬ ‫صیش‬ ‫دس‬‫طس‬‫ٛا‬‫خیذا‬ ‫ٚیىی‬‫زىٙیه‬ ‫تا‬HTML5ٜ‫ؿٕاس‬ ‫(زلٛیش‬ ‫داسد‬ ‫لشاس‬1.4)
<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. 11 HTML5
‫اص‬ ‫زٛضیطاذ‬ ٚ ‫لٛذ‬ ٝ‫٘مغ‬ ٖ‫ػاخسٕا‬ ‫٘ٛع‬ ٗ‫ای‬ ‫دس‬ٍ‫دی‬ ‫خٙغ‬‫ش‬‫ی‬ٚ‫ػٙاكش‬ ‫وٕه‬ ‫تا‬ ٚ ‫تاؿذ‬ ‫ٕ٘ی‬ ٜ‫خیسیذ‬ ‫ٔطسٛا‬
ARTICLEٚMARKٚTIME‫ؿذ‬ ُ‫زثذی‬ ٜ‫ػاد‬ ‫ػاخساسی‬ ٝ‫ت‬‫ٔطسٛا‬ ٚ ٖ‫خٛا٘ذ‬ ‫تشای‬ ‫زش‬ ٜ‫ػاد‬ ‫تؼیاس‬ ‫وذ‬ . ‫اػر‬ ٜٚ
. ‫تاؿذ‬ ‫ٔی‬ ‫زش‬ ‫ٔؼٙی‬ ‫تا‬
‫تا‬ ‫واس‬DOCTYPE‫اػر‬ ‫ساضسش‬
ٝ‫كفط‬ ‫ٞش‬ ‫خظ‬ ٗ‫اِٚی‬‫ٚب‬HTMLٝ‫٘ؼخ‬ ‫زؼشیف‬ ٝ‫ت‬HTML. ‫خشداصد‬ ‫ٔی‬ ‫اػر‬ ٝ‫ٌشفس‬ ‫لشاس‬ ٜ‫اػسفاد‬ ‫ٔٛسد‬ٗ‫ای‬
‫سا‬ ‫ٔٛضٛع‬DOCTYPE‫خٛا٘ٙذ‬ ‫ٔی‬.‫دس‬XHTML‫ٔخسّف‬ ‫٘ٛع‬ ٝ‫ػ‬DOCTYPEٖ‫زٛا‬ ‫ٔی‬‫ؿذ‬ ‫آؿٙا‬‫داسای‬ ‫أا‬
‫خیسیذ‬‫ٌی‬‫ٔذیشیر‬ ‫تشای‬‫تاؿذ‬ ‫ٔی‬ ٖ‫آ‬ ‫اص‬ ٜ‫اػسفاد‬ ٚ.
‫دس‬HTML5‫یه‬ ‫ؿٕا‬‫٘ٛع‬DOCTYPEٜ‫ػاد‬ٝ‫ت‬ ٚ ‫داسیذ‬ٗ‫ای‬ ‫اص‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ػادٌی‬<!DOCTYPE html>
ٗ‫ای‬ . ‫وٙیذ‬ ٜ‫اػسفاد‬DOCTYPEٛ‫از‬ ‫تلٛسذ‬ ‫خذیذ‬‫وٙذ‬ ‫ٔی‬ ٜ‫آٌا‬ ‫سا‬ ‫ٚب‬ ‫ٔشٚسٌش‬ ‫ٔازیه‬،ٝ‫كفط‬ ‫ٔطسٛای‬HTML5
( . ‫تاؿذ‬ ‫ٔی‬‫وذ‬ ٝ‫ؿثی‬<? ?>. )‫ؿٛد‬ ‫ٔی‬ ٜ‫اػسفاد‬ ‫خی‬ ‫اذ‬ ‫خی‬ ‫ٞای‬ ‫وذ‬ ٖ‫خایا‬ ٚ ‫آغاص‬ ‫دس‬ ٝ‫و‬DOCTYPEٝ‫ت‬ ‫ضؼاع‬
ٕ٘ ‫ضشٚف‬ ٖ‫تٛد‬ ‫وٛزه‬ ٚ ‫تضسي‬‫تاؿذ‬ ‫ی‬.
‫وذ‬ ٖ‫داد‬ ٖ‫ػاصٔا‬ ‫تشای‬ ‫تٙذی‬ ‫تّٛن‬ ‫ػٙاكش‬ ‫اص‬ ٜ‫اػسفاد‬
‫دس‬ ‫ا٘ذوی‬ ‫ٞای‬ ٜ‫سا‬HTML4‫تشای‬ ٜ‫اػسفاد‬ ‫ٔٛسد‬ ‫ػٙلش‬ ٖ‫زشیا‬ ‫ٔؼشٚف‬ . ‫تاؿذ‬ ‫ٔی‬ ‫ٔٛخٛد‬ ‫ٔطسٛا‬ ‫زؼشیف‬ ‫تشای‬
‫زؼشیف‬<p>ٝ‫و‬ ‫تاؿذ‬ ‫ٔی‬‫ػٙلش‬ ‫یا‬ ٚ ‫ٌیشد‬ ‫ٔی‬ ‫لشاس‬ ‫خاسٌشاف‬ ٖ‫خایا‬ ٚ ‫ؿشٚع‬<DIV>ٖ‫خایا‬ ٚ ‫ؿشٚع‬ ‫دس‬ ‫زؼشیف‬ ‫تشای‬
‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ . ‫تاؿذ‬ ‫ٕ٘ی‬ ‫وافی‬ ‫ٔطسٛا‬ ‫زٛضیص‬ ‫تشای‬ ‫آٟ٘ا‬ ‫دٚی‬ ‫ٞش‬ َ‫ضا‬ ‫ٞش‬ ٝ‫ت‬ . ‫ٌیشد‬ ‫ٔی‬ ‫لشاس‬ ‫ٔطسٛا‬ ‫اص‬ ‫لؼٕسی‬
‫زلٛیش‬ ‫دس‬ ‫سا‬ ‫ٚب‬ ‫كفطاذ‬ ‫تٙذی‬ ‫تّٛن‬ ‫واستشد‬ ٗ‫تـسشی‬1.5‫تثٙیذ‬‫ػایر‬ ‫زلٛیش‬ ‫ٔٙثغ‬www.focalpress.com‫ٔی‬
.‫تاؿذ‬
‫دس‬HTML5‫ػٙلش‬ْ‫٘ا‬ ٝ‫ت‬ ‫خذیذ‬SECTION‫داسد‬ ‫ٚخٛد‬‫دس‬ . ‫اػر‬ ‫ٔطسٛا‬ ‫اص‬ ‫تّٛن‬ ‫یه‬ ٜ‫وٙٙذ‬ ٗ‫ٔؼی‬ ‫ٚاضص‬ ‫تلٛسذ‬
HTML5.‫اػر‬ ٜ‫ؿذ‬ ٝ‫ٌشفس‬ ‫٘ظش‬ ‫دس‬ ‫ٔطسٛا‬ ‫تّٛن‬ ‫تشای‬ ‫ی‬ ٝ٘‫خذاٌا‬ ‫ػٙاكش‬

12. 12 HTML5
 SECTION
 ATICLE
 HEADER
 FOOTER
 ASIDE
 FIGURE
 NAV
ْ‫٘ا‬‫ٞای‬‫اػا‬ ‫تش‬ ‫تاال‬ ‫ػٙاكش‬ ‫اص‬ ْ‫وذا‬ ‫ٞش‬ ‫تشای‬ ‫خذیذ‬‫خٙغ‬ ‫ع‬‫ت‬ ‫دس‬ ٝ‫و‬ ‫ٔطسٛای‬‫ٔشتٛط‬ ‫ّٛن‬ٝ‫ت‬‫ٔی‬ ٜ‫داد‬ ‫ٕ٘ایؾ‬ ٝ‫كفط‬ ‫دس‬ ٖ‫آ‬
‫ؿٛد‬. ‫اػر‬ ٜ‫ؿذ‬ ‫زؼشیف‬

13. 13 HTML5
ٜ‫ؿٕاس‬ ‫زلٛیش‬1.5

14. 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>
‫زلٛیش‬ ‫دس‬ ‫سا‬ ‫فٛق‬ ‫وذ‬ ٜ‫ؿذ‬ ‫اخشا‬1.6‫تثٙیذ‬ ‫زٛا٘یذ‬ ‫ٔی‬ٝ‫و‬‫ػٙلش‬ ‫وٕه‬ ‫تا‬ ٝ‫و‬ ‫خاسٌشاف‬ ٚ‫د‬ ‫داسای‬<p>ٚ‫د‬ ٚ ٜ‫ؿذ‬ ‫ػاخر‬
‫ٌزاسی‬ ‫ػالٔر‬ ‫آغاصی‬ ٝ‫٘مغ‬ ‫تا‬ ٝ‫و‬ ‫ؿٛد‬ ‫ٔی‬ ‫ٔـاٞذ‬ ‫خظ‬‫اػر‬ ٜ‫ؿذ‬‫ػٙلش‬ ّٝ‫تٛػی‬<LI>‫ػٙاكش‬ ٗ‫ای‬‫ػٙلش‬ ٖٚ‫دس‬ ‫دس‬
SECTION‫ا٘ذ‬ ٝ‫ٌشفس‬ ‫لشاس‬.
‫ػٙلش‬SECTION‫ػا‬ ‫تشای‬ ‫ٔٛثش‬ ٜ‫سا‬ ‫یه‬‫وذ‬ ‫دس‬ ‫ٔطسٛا‬ ‫دٞی‬ ٖ‫صٔا‬‫ٞا‬.‫تاؿذ‬ ‫ٔی‬

15. 15 HTML5
ٜ‫ؿٕاس‬ ‫زلٛیش‬1.6
‫ػٙلش‬ ‫اص‬ ٜ‫اػسفاد‬ARTICLE
‫ٔطسٛا‬ ٖ‫وشد‬ ‫ٔـخق‬ ‫تشای‬20
‫ٚب‬ ٝ‫كفط‬ ‫یه‬ ‫دس‬‫ػٙلش‬ARTICLEٜ‫ؿٛد‬ ‫ٔی‬ ٜ‫اػسفاد‬َ‫ٔثا‬ ‫یه‬ ‫تالي‬ .‫خٛب‬
‫ػٙلش‬ ‫اص‬ ٜ‫اػسفاد‬ . ‫تاؿذ‬ ‫ٔی‬ ‫ٔطسٛا‬ ‫ٌیش‬ ‫لشاس‬ ُ‫ٔط‬ ٖ‫ؿذ‬ ٗ‫سٚؿ‬ ‫تشای‬section‫وٕه‬ ‫تا‬ ، ‫ٔطسٛا‬ ‫اص‬ ٝ‫كفط‬ ‫یه‬ ‫دس‬‫ٔی‬ ٖ‫آ‬
‫ػٙلش‬ ‫اص‬ ٚ ‫وٙیذ‬ ‫تٙذی‬ ‫لاِة‬ ‫زٛا٘یذ‬ARTICLE‫دیٍش‬ ‫ػٙاكش‬ ‫اص‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ . ‫وٙیذ‬ ٜ‫اػسفاد‬ ٖٚ‫دس‬ ‫دس‬HTML‫دس‬
‫ػٙلش‬ ُ‫داخ‬ARTICLE‫الي‬ ‫ٚب‬ ‫اص‬ ٝ‫و‬ ‫سا‬ ‫صیش‬ ‫.وذ‬ ‫وٙیذ‬ ٜ‫اػسفاد‬blog.whatwg.org‫ػٙلش‬ ‫اص‬ ٜ‫اػسفاد‬ ‫ٕ٘ایؾ‬ ‫تشای‬
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>
‫زلٛیش‬ ‫دس‬1.7‫اص‬ ٜ‫اػسفاد‬ ‫ٕ٘ایؾ‬ ٝ‫٘سید‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ARTICLEٚ‫ٔش‬ ‫دس‬ ‫سا‬. ‫وٙیذ‬ ٜ‫ٔـاٞذ‬ ‫ٚب‬ ‫سٌش‬‫زٛا٘یذ‬ ‫ٔی‬‫زٙذ‬ ‫اص‬
ARTICLE‫دس‬ٝ‫كفط‬ ‫یه‬‫ٚب‬‫وٙیذ‬ ٝ‫اضاف‬‫ػٙلش‬ ّٝ‫تٛػی‬ ‫ٔطسٛا‬ ٜ‫وٙٙذ‬ ‫خذا‬ ٝ‫ؿثی‬ .ARTICLE‫ػٙلش‬ ‫یه‬ ٖٚ‫دس‬ ‫دس‬ ٖ‫زٛا‬ ‫ٔی‬ ٝ‫و‬
20
- content

16. 16 HTML5
SECTION‫ػٙلش‬ ٝ‫ت‬ ‫تایذ‬ ‫ؿٕا‬ .‫وشد‬ ٜ‫اػسفاد‬ARTICLE‫وٙیذ‬ ٜ‫ٍ٘ا‬ ‫ٔطسٛا‬ ٝ‫زدضی‬ ‫تشای‬ ‫ٔٙغمی‬ ‫اتضاس‬ ‫یه‬ ‫دیذ‬ ‫اص‬.
‫ز‬‫لٛیش‬1.7

17. 17 HTML5
‫ػٙاكش‬ ‫اص‬ ٜ‫اػسفاد‬FOOTERٚHEADER
‫خای‬ ٚ ‫تاال‬‫ی‬‫دسج‬ ‫تشای‬ ‫ٔطّی‬ ‫داسای‬ ، ‫زایح‬ ‫تشای‬ ‫واستشدی‬ ‫افضاس‬ ْ‫٘ش‬ ‫ٞش‬ ‫دس‬ ‫یا‬ ٚ ‫ٚٚسد‬ ‫ٔاوشٚػافر‬ ‫دس‬ ٜ‫ؿذ‬ ‫زِٛیذ‬ ٝ‫كفط‬ ‫یه‬ ٗ
ٝ‫كفط‬ ‫ٞش‬ ٗ‫خایی‬ ٚ ‫تاال‬ ‫دس‬ ٝ‫كفط‬ ‫اعالػاذ‬‫ٚخٛد‬‫داسد‬.‫اعالػاذ‬ ٗ‫ای‬ٝ‫كفط‬ ‫ٞش‬ ‫دس‬ِٕٗٛ‫ٔؼ‬‫ؿٕاس‬ ُٔ‫ؿا‬ٚ ‫٘ـش‬ ‫ضك‬ ٗ‫ٔس‬ ‫یا‬ ٚ ٝ‫كفط‬ ٜ
. ‫تاؿذ‬ ‫دیٍش‬ ‫خضئیاذ‬ ‫ٞش‬ ‫یا‬‫دس‬‫ك‬‫زفاٚزی‬ ‫ٚب‬ ‫ٞای‬ ٝ‫فط‬ُ‫فای‬ ٌٝ٘ٛ ٗ‫ای‬ ‫تا‬‫ػش‬ . ‫٘ذاسد‬‫خا‬ ٚ ٝ‫كفط‬ٝ‫كفط‬‫اعالػاذ‬ ُٔ‫ؿا‬ ‫ٔؼٕٛال‬
‫زلٛیش‬ ‫دس‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ . ‫تاؿذ‬ ‫ٔی‬ ‫ٚب‬ ‫ٞای‬ ٝ‫كفط‬ ‫وّیذی‬ ‫ٚیا‬ ‫وّی‬1.8‫ٚب‬ ٝ‫كفط‬ ‫دس‬ ٝ‫ػشكفط‬ ‫ٌیشی‬ ‫لشاس‬ ُ‫ٔط‬. ‫وٙیذ‬ ‫ٔـاٞذ‬
‫زلٛیش‬1.8
. ‫وٙیذ‬ ٜ‫اػسفاد‬ ‫ٚب‬ ‫ٞای‬ ٝ‫كفط‬ ‫دس‬ ‫سا‬ ٝ‫كفط‬ ‫ػش‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬‫كفطاذ‬ ٝ‫ت‬ ‫ِیٙه‬ ، ٌِٛٛ ُٔ‫ؿا‬ ٝ‫كفط‬ ‫ػش‬ ‫ٔطسٛای‬ ‫فٛق‬ ‫زلٛیش‬ ‫دس‬
. ‫تاؿذ‬ ‫ٔی‬ ‫ػایر‬ ٖٚ‫دس‬ ‫خؼسدٌٛش‬ ‫یه‬ ٚ ‫دیٍش‬HTML5‫خا‬ ٚ ٝ‫كفط‬ ‫ػش‬ ‫لؼٕر‬ ٚ‫د‬ ‫ٞش‬ ‫تشای‬ ‫وٙذ‬ ‫ٔی‬ ٓٞ‫فشا‬ ‫سا‬ ٖ‫أىا‬ ٗ‫ای‬ٝ‫كفط‬
‫ت‬ ٚ ٗ‫سٚؿ‬ ‫تلٛسذ‬ ‫ٔطسٛا‬ ‫فضا‬ ‫اص‬ ٖ‫تسٛا‬ ٝ‫و‬ٖ‫ؿذ‬ ‫ػفاسؿی‬ ‫لاتّیر‬ ‫ا‬‫وشد‬ ٜ‫اػسفاد‬ٝ‫ػشكفط‬ .ٚٝ‫كفط‬ ‫خا‬‫ػٙاكش‬ ‫زٛػظ‬HEADER
ٚFOOTER‫ؿٛد‬ ‫ٔی‬ ٜ‫اػسفاد‬‫ػٙلش‬ ‫یه‬ ‫تلٛسذ‬ ٜ‫ؿذ‬ ٝ‫سفس‬ ‫تىاس‬ ٝ‫ػشكفط‬ ‫وذ‬ ‫یه‬ ٕٝ٘ٛ٘ ‫تلٛسذ‬ .HEADER‫دس‬HTML5

18. 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>
‫اػسا٘ذاسد‬ ٗ‫ای‬‫ػٙاكش‬ ، ‫٘یؼر‬ َ‫٘شٔا‬ ‫ی‬ ٝ‫كفط‬ ٝ‫الی‬ ٝ‫ؿثی‬HEADERٚFOOTER‫دس‬HTML5ٚ ٝ‫ػشكفط‬ ٝ‫ت‬ ‫ٔٙطلش‬ ‫فمظ‬
‫ػٙاكش‬ ‫اص‬ ْ‫وذا‬ ‫ٞش‬ ‫تشای‬ ٝ‫خاكفط‬ ٚ ٝ‫ػشكفط‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ . ‫تاؿذ‬ ‫ٕ٘ی‬ ‫ٚب‬ ٝ‫كفط‬ ‫تشای‬ ٝ‫خاكفط‬ARTICLEٚ‫ی‬‫ا‬
SECTIONٞ ‫تشای‬‫ش‬. ‫وٙیذ‬ ‫زؼشیف‬ ٝ٘‫خذاٌا‬ ْ‫وذا‬

19. 19 HTML5
‫اػسف‬‫ػٙلش‬ ‫اص‬ ٜ‫اد‬ASIDE
‫٘مؾ‬‫ی‬‫ه‬‫ػٙلش‬ASIDE‫ٔطسٛا‬ ‫زٛكیف‬‫اػر‬‫تاؿذ‬ ‫ٔی‬ ‫ٔطسٛا‬ ‫تشای‬ ٜ‫وٙٙذ‬ ُ‫٘م‬ ‫یه‬ ‫ایداد‬‫اكّی‬ ‫ٔطسٛای‬ ‫اص‬ ‫لؼٕسی‬ ‫أا‬
‫ػٙلش‬ ٝ‫و‬ ‫تٍیشیذ‬ ‫٘ظش‬ ‫دس‬ ٍٝ٘ٛٙ‫ای‬ ‫ؿٕا‬ . ‫٘یؼر‬ ‫ٚب‬ ٝ‫كفط‬ ‫یه‬ASIDE‫دٞٙذ‬ ‫خیٛ٘ذ‬‫ی‬‫ه‬‫٘مؾ‬)‫ػّٕی‬ ‫(یا‬‫تشای‬‫ٔٙثغ‬ ٝ‫ت‬ ٖ‫وشد‬ ٜ‫اؿاس‬
‫ا‬ ‫عشص‬ ‫صیش‬ َ‫ٔثا‬ ‫دس‬ . ‫تاؿذ‬ ‫ٔی‬‫ػٙلش‬ ٜ‫ػسفاد‬ASIDE‫ػٙلش‬ ‫یه‬ ‫دس‬ARTICLE. ‫اػر‬ ٜ‫ؿذ‬ ٜ‫داد‬ ‫ٕ٘ایؾ‬
<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>
‫یه‬ ‫اص‬ ‫خـسیا٘ی‬ ٚ ٝ‫كفط‬ ‫اكّی‬ ‫ٔطسٛا‬ ‫تاال‬ ‫وذ‬ ‫دس‬aside‫ػٙلش‬ ‫اص‬ ‫اخسلای‬ ‫تلٛسذ‬ASIDE‫زلٛیش‬ ‫دس‬ .‫اػر‬ ٜ‫ؿذ‬ ٜ‫اػسفاد‬1.9
(‫زلٛیش‬ ‫دس‬1.9‫ٕ٘ایؾ‬ ُ‫ٔط‬ ‫زغییش‬ ‫تشای‬‫تلشی‬ASIDE‫اص‬CSS‫اػر‬ ٜ‫ؿذ‬ ٜ‫اػسفاد‬). ‫وٙیذ‬ ‫ٔـاٞذ‬ ‫ٔشٌٚش‬ ‫سٚی‬ ‫تش‬ ‫سا‬ ‫تاال‬ ‫وذ‬

20. 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. 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
‫ػٙلش‬ ‫زٛػظ‬ ٍٛ‫ٌفس‬ ٖ‫وشد‬ ٝ‫تؼس‬ ٚ ‫تاص‬DIALOG‫ٞش‬ ٚ ‫ؿذ‬ ‫ٔی‬ ْ‫ا٘دا‬‫ٔٛخٛدیر‬‫ػٙلش‬ ‫زٛػظ‬ ‫كطثر‬ ٜ‫وٙٙذ‬ ٍٛ‫ٌفس‬DT‫زؼشیف‬
‫ٔد‬ ‫صیش‬ ‫وذ‬ ‫دس‬ ٕٝ٘ٛ٘ ‫ی‬ ‫تشا‬ ‫ؿٛد‬ ‫ٔی‬‫ی‬‫ػٙلش‬ ‫زٛػظ‬ ‫تاؿذ‬ ‫ٔی‬ ٜ‫وٙٙذ‬ ‫كطثر‬ ٝ‫و‬ ‫زٛوّی‬ ‫ذ‬DT‫اػر‬ ٜ‫ؿذ‬ ‫ٔـخق‬
<DT> Majid Tavakoli </DT>

22. 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>
‫ػٙلش‬ ‫وٕه‬ ‫تا‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬DD‫ػٙلش‬ ‫دس‬DIALOG.‫تاؿذ‬ ٝ‫داؿس‬ ِٝ‫ٔما‬ ‫یه‬ ‫دس‬ ‫سا‬ ‫زیضی‬ ‫یا‬ ‫خاسٌشاف‬ ‫اص‬ ‫ِیؼسی‬
‫ػٙلش‬ ‫اص‬ ٜ‫اػسفاد‬FIGURE
‫٘ؼ‬ ‫دس‬ . ‫تاؿذ‬ ‫ٔی‬ َٕٛ‫ٔؼ‬ ٝ‫سٚی‬ ‫یه‬ ‫ٚب‬ ‫كفطاذ‬ ٝ‫ت‬ ‫زلاٚیش‬ ٖ‫ٕ٘ٛد‬ ٝ‫اضاف‬‫لذیٕی‬ ‫ٞای‬ ٝ‫خ‬HTML‫زلٛیش‬ ٖ‫داد‬ ‫ٞٛیر‬
‫ٔـىّی‬ ‫تؼیاس‬ ‫واس‬ ‫زلٛیش‬ ٖ‫آ‬ ٝ‫ت‬ ‫ٔشتٛط‬ ٗ‫ٔس‬ ‫وٕه‬ ‫تا‬‫تاؿذ‬ ‫ٔی‬‫دس‬ ‫أا‬ .HTML5‫ػٙلش‬ ‫وٕه‬ ‫تا‬FIGURE‫زٛضیطاذ‬ ٚ ‫زلٛیش‬
ٝ‫ٔدٕٛػ‬ ٗ‫ای‬ . ‫ٌیشد‬ ‫ٔی‬ ‫لشاس‬ ٝ‫ٔدٛػ‬ ‫اص‬ ‫تخـی‬ ٖ‫ػٙٛا‬ ٝ‫ت‬ ‫اِطالی‬،‫زلٛیش‬ ٝ‫ٔدٕٛػ‬‫ؿٛد‬ ‫ٔی‬ ٜ‫خٛا٘ذ‬: ‫وٙیذ‬ ٝ‫زٛخ‬ ‫صیش‬ ‫وذ‬ ٝ‫ت‬ .
<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>
‫ػٙلش‬FIGUREٛ‫ز‬ ‫ٔی‬ ‫ؿٕا‬ ‫سا‬ ‫دیٍش‬ ‫ػٙاكش‬ ٚ‫ػٙلش‬ ‫دس‬ ‫ا٘یذ‬DIALOG‫ػٙلش‬ . ‫وٙیذ‬ ٜ‫اػسفاد‬LEGEND‫ٞٛیر‬ ٜ‫وٙٙذ‬ ٗ‫ٔؼی‬
. ‫تاؿذ‬ ‫ٔی‬ ‫زلٛیش‬ ‫یه‬ ٝ‫ت‬ ‫ٔشتٛط‬ ٗ‫ٔس‬

23. 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>
‫دس‬ ‫تٙذی‬ ‫تّٛن‬ ‫ػٙاكش‬ ْ‫زٕا‬ ٖ‫ٔیا‬ ‫اص‬HTML5‫ػٙلش‬NAV. ‫تاؿذ‬ ‫ٔی‬ ‫زش‬ ٜ‫ػاد‬ ٜ‫اػسفاد‬ ‫تشای‬ ‫ػٙاكش‬ ‫دیٍش‬ ‫اص‬ ‫تٙذی‬ ‫تّٛن‬ ‫تشای‬
ٗ‫ٔس‬ ‫ػغص‬ ‫دس‬ ‫زغییش‬ ٚ ‫افضایؾ‬
HTML5‫ٔؼٙایی‬ ‫تلٛسذ‬‫دس‬ٗ‫ٔس‬ ‫ػغص‬،‫٘ٛیؼی‬ ‫وذ‬‫سا‬‫ٔـخق‬ ‫ػٙاكش‬ ٗ‫ای‬ ٖ‫وشد‬ ٝ‫اضاف‬ ‫اص‬ ‫ٔملٛد‬ . ‫اػر‬ ٜ‫داد‬ ‫زغییش‬
‫ُؼذ‬‫ت‬ ٖ‫وشد‬‫٘ظیش‬ ‫ٔٛخٛدیر‬ ‫ٞش‬ ‫اكّی‬time , number , progress , emphasis‫دس‬ ‫ػٙاكش‬ ٗ‫ای‬ ٝ‫و‬HTML4‫ٔی‬ ‫ٔٛخٛد‬
‫٘ظیش‬ ‫ا٘ذ‬ ٝ‫یافس‬ ُ‫زىٕی‬ ٚ ‫تٟثٛد‬ ٖٛٙ‫او‬ ‫أا‬ ‫تاؿذ‬VAR,CODE,KBT,SAMP.

24. 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>
. ‫اػر‬ َٛ‫لث‬ ُ‫لات‬ ‫لاِة‬ ٗ‫ای‬‫ػٙلش‬ ‫اص‬ ٜ‫اػسفاد‬ ‫دیٍش‬ ‫ٔسذ‬TIMEٖ‫وشد‬ ٝ‫اضاف‬‫ٚیظٌی‬22
datetime‫تشای‬ .‫تاؿذ‬ ‫ٔی‬
: ‫وٙیذ‬ َ‫د٘ثا‬ ‫سا‬ ‫صیش‬ ‫وذ‬ َ‫ٔثا‬
<TIME datetime=‛2009-12-24T23:00:00‛>11:00 O’Clock on
Christmas Eve</TIME>
‫ػٙلش‬ ٜ‫اػسفاد‬ ‫اص‬ ‫ٞذف‬TIME‫ٔس‬ ‫یه‬ ‫دس‬ ‫ٔٛسد‬ ٖ‫صٔا‬ / ‫زاسیخ‬ ‫زٛضیص‬ٗ‫دٞذ‬ ‫ٔی‬ ٖ‫٘ـا‬ ‫سا‬.
21
- Highlight
22
- Attribute

25. 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ٚmax‫ػٙلش‬ ‫تشای‬PROGRESS. ‫داسد‬ ‫ٚخٛد‬value‫ٔمذا‬ٖ‫صٔا‬ ‫یه‬ ‫دس‬ ‫داّ٘ٛد‬ ٖ‫خشیا‬ ‫اص‬ ‫ی‬ ٜ‫ٚیظ‬ ‫س‬
‫ٔمذاس‬ ٕٓ‫.ٔاوؼی‬ ‫تاؿذ‬ ‫ٔی‬ ‫ٔـخق‬value‫ٔدٕٛع‬valueٓ‫ضد‬ ‫ٔمذاس‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬ َ‫ٔثا‬ ‫تشای‬ . ‫تاؿذ‬ ‫ٔی‬
: ‫وٙیذ‬ ٜ‫ٔـاٞذ‬ ‫صیش‬ َ‫ٔثا‬ ‫دس‬ ‫سا‬ ُ‫فای‬ ‫اص‬ ٜ‫ؿذ‬ ‫داّ٘ٛد‬

26. 26 HTML5
>PROGRESS value=‛245998‛ max=‛100000‛>25%</PROGRESS<
‫ػٙلش‬PROGRESS‫ثا‬ ‫خٛد‬ ٝ‫ت‬ ‫خٛد‬‫خاٚا‬ ٝٔ‫تش٘ا‬ ٝ‫ت‬ ‫تایذ‬ ‫ؿٕا‬ ‫وٙیذ‬ ٜ‫اػسفاد‬ ‫ػٙلش‬ ٗ‫ای‬ ‫اص‬ ‫خٛاٞیذ‬ ‫ٔی‬ ‫اٌش‬ ‫اػر‬ ‫تر‬
. ‫وٙیذ‬ ُ‫ٔسل‬ ‫سا‬ ٖ‫آ‬ ‫واس‬ ‫ٌضاسؽ‬ ‫اص‬ ‫خیـشفر‬ ‫ٕ٘ایؾ‬ ‫تشای‬ ‫اػىشیدر‬
‫اص‬ ٜ‫اػسفاد‬HTML5ٗ‫ػاخس‬ ‫تشای‬ٖ‫آػا‬‫زش‬‫وذ‬HTML
. ‫تاؿذ‬ ‫ٔی‬ ‫الي‬ ‫ٚب‬ ‫یه‬ ‫ػاخر‬ ‫ؿشٚع‬ ‫زؼشیف‬ ٜٛ‫٘ط‬ ‫صیش‬ َ‫ٔثا‬‫دس‬‫ز‬ ‫زٍٍٛ٘ی‬ ‫ٕ٘ایؾ‬ ٝ‫ت‬ ‫لؼٕر‬ ٗ‫ای‬‫تٛخٛد‬ ‫غییشاذ‬
‫دس‬ ٜ‫آٔذ‬HTML5‫تا‬ ٝ‫و‬ ‫الٌی‬ ‫ٚب‬ ٕٝ٘ٛ٘ ٖ‫وشد‬ َ‫د٘ثا‬ ‫تا‬ . ‫خشداصد‬ ‫ٔی‬HTML4‫تا‬ ٖ‫آ‬ ‫زفاٚذ‬ ‫اػر‬ ٜ‫ؿذ‬ ‫ػاخر‬
‫یىذیٍش‬: ‫ؿٛد‬ ‫ٔی‬ ‫تٙذی‬ ٓ‫زمؼی‬ ‫صیش‬ ‫لؼٕر‬ ٗ‫زٙذی‬ ٝ‫ت‬ ‫الي‬ ‫ٚب‬ َ‫ٔثا‬ ‫ٞا‬ ‫وذ‬ . ‫وشد‬ ‫خٛاٞیذ‬ ‫دسن‬
ٝ‫ػشكفط‬ ‫ٔطسٛا‬
‫الي‬ ‫ٚب‬ ٝ‫ت‬ ‫ِیٙه‬‫اكّی‬
‫الي‬ ‫ٚب‬ ‫ٔغاِة‬
‫الي‬ ‫ٚب‬ ‫ٞای‬ ‫وأٙر‬
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. 27 HTML5
‫تا‬‫تا‬ ٝ‫و‬ ‫اػر‬ ‫ٚب‬ ‫ٞای‬ ٝ‫كفط‬ ‫اص‬ ‫ٔطسٛا‬ ٝ‫ػشكفط‬ ‫تاالی‬ ‫اص‬ ‫تخؾ‬ ٗ‫ای‬ ٖ‫وشد‬ َ‫د٘ثا‬HTML4‫ؿٕا‬ . ‫ا٘ذ‬ ٜ‫ؿذ‬ ‫٘ٛیؼی‬ ‫وذ‬
‫ٔی‬ ‫صیش‬ ‫وذ‬ ‫دس‬ً‫ز‬ ‫اص‬ ٜ‫اػسفاد‬ ُ‫دِی‬ ٝ‫ت‬ ‫اخثاسی‬ ‫لغغ‬ ٝ‫ت‬ ‫ٞا‬ ‫وذ‬ ٝ‫و‬ ‫تٙیذ‬DIV‫اعالػاذ‬ ‫اِطالاذ‬ ّٝ‫تٛػی‬ID‫زٛضیص‬ ‫تشای‬
. ‫ا٘ذ‬ ٜ‫ؿذ‬ ‫ٔطسٛا‬
<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. 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. 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>
‫ك‬ ‫دس‬ ‫اكّی‬ ‫ٔطسٛای‬‫ف‬‫ط‬‫تا‬ ‫أا‬ ‫تاؿذ‬ ‫ٔی‬ ٜ‫خیسیذ‬ ٝ‫ػٙلش‬ARTICLE‫تا‬ ‫سا‬ ‫زفاٚذ‬ ٚ ‫وٙیذ‬ َ‫د٘ثا‬ ‫سا‬ ‫صیش‬ ‫وذ‬ .HTML4
. ‫وٙیذ‬ ٝ‫ٔمایؼ‬

30. 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>
‫ػٙلش‬ ‫اص‬ ‫الي‬ ‫ٚب‬ ‫خذیذزش‬ ٚ ‫خیـسش‬ ‫ٔغاِة‬ ٗ‫تی‬ ‫خاتدای‬ ‫تشای‬NAV‫دس‬ ٖ‫داد‬ ‫ِیٙه‬ ‫تشای‬HTML5. ‫ؿٛد‬ ‫ٔی‬ ٜ‫اػسفاد‬
‫و‬ َ‫د٘ثا‬ ‫سا‬ ‫صیش‬ ٕٝ٘ٛ٘ ‫وذ‬: ‫ٙیذ‬
<nav>
<a href=‚/blog/page/2/‛>&laquo; Previous Entries</a>
</nav>
‫ػٙلش‬ ٖ‫خایا‬ ‫دس‬ ٚSECTION. ‫یاتذ‬ ‫ٔی‬ ٕٝ‫خاز‬ ‫صیش‬ ‫تلٛسذ‬
</section>
‫ك‬ ٗ‫خایی‬‫ف‬‫كف‬ ‫خا‬ ‫تخؾ‬ ٝ‫ط‬‫اِطااذ‬ ٜ‫ٕٞشا‬ ‫تا‬ ٝ‫و‬ ‫تاؿذ‬ ‫ٔی‬ ٝ‫ط‬navigation‫تاؿذ‬ ‫ٔی‬ ‫صیش‬ ‫تلٛسذ‬ً‫ز‬ ٝٔ‫ادا‬ ‫دس‬ ٚbody
ٚhtmlٕٝ‫خاز‬ ‫زشزیة‬ ٝ‫ت‬. ‫یاتذ‬ ‫ٔی‬
<footer>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href=‚/blog/comment-policy/‛>Comment
Policy</a></li>

31. 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‫ا‬ ٖ‫آ‬ ‫اص‬ ٝ‫و‬‫تخـ‬ ‫وٙیذ‬ ‫ٔی‬ ٜ‫ػسفاد‬‫ی‬‫ػٙلشٞای‬ ‫اص‬
‫دس‬ ٜ‫ؿذ‬ ٝ‫اضاف‬HTML2َ‫ػا‬ ‫دس‬1994‫ؿٕا‬ ٜ‫اػسفاد‬ ٗ‫ای‬ ٝ‫ٔمایؼ‬ ‫دس‬ ‫ِٚی‬ . ‫اػر‬ ٜ‫٘ىشد‬ ‫زغییش‬ ٖ‫آ‬ ‫اص‬ ‫خغ‬ ٚ ‫اػر‬‫اص‬
. ‫اػر‬ ٝ‫داؿس‬ ‫ٌیشی‬ ٓ‫زـ‬ ‫زغییشاذ‬ ‫ٚب‬
‫تا‬HTML5. ‫اػر‬ ٜ‫ؿذ‬ ‫تشٚص‬ ٜ‫داد‬ ‫ٔذیشیر‬ ٚ ‫ٚب‬ ‫ٞای‬ ْ‫فش‬ ‫اص‬ ٜ‫اػسفاد‬ ‫تشای‬ ‫ؿٕا‬ ‫٘یاصٞای‬ ْ‫زٕا‬W3C‫آٔاد‬ٜ‫ؿذ‬ ٜ
‫تشای‬ ‫اػر‬ْ‫فش‬ ‫سا‬ ٗ‫ای‬ ٝ‫و‬ ْ‫فش‬ ‫ػٙلش‬ ٖ‫وشد‬ ٗ‫٘ٛی‬2.1‫تشای‬HTML5ٔ‫ی‬‫دس‬ ‫تؼاصی‬ ‫٘مغ‬ ‫داسی‬ َ‫ضا‬ ‫ٞش‬ ٝ‫ت‬ . ‫خٛا٘ٙذ‬
HTML5. ‫تاؿذ‬ ‫ٔی‬ٚ ‫اػىشیدر‬ ‫خاٚا‬ ‫زٛػظ‬ ‫لثال‬ ٝ‫و‬ ‫ٞا‬ ‫ٚیظٌی‬ ‫اص‬ ‫خـسیثا٘ی‬ ُٔ‫ؿا‬ ‫ٞای‬ ْ‫فش‬ ‫اص‬ ‫خذیذ‬ ‫واستشد‬
. ‫اػر‬ ٜ‫ؿذ‬ ْ‫ا٘دا‬ ‫آخاوغ‬

32. 32 HTML5
ْ‫فش‬ ٜ‫وٙٙذ‬ ٖ‫خـسثا‬ ‫ٔشٚسٌشٞای‬2.1
‫اخشا‬ ‫ٔشٚسٌش‬ ٚ ‫اػر‬ ‫ٌشفر‬ ‫كٛسذ‬ ‫زاصٌی‬ ٝ‫ت‬ ْ‫فش‬ ‫ػٙلش‬ ‫سػا٘ی‬ ‫سٚص‬ ٝ‫ت‬ٝ‫٘ؼخ‬11ٝ‫ت‬ٝ‫٘ؼخ‬ ‫فایشفٛوغ‬ ٚ ‫تاال‬4ْ‫فش‬ ‫اص‬ ‫تاال‬ ٝ‫ت‬ ‫تسا‬2
‫وٙٙذ‬ ‫ٔی‬ ‫خـسثا٘ی‬ٖ‫ؿذ‬ ‫ٌیش‬ ٕٝٞ ‫زا‬ ‫كثش‬ ‫خض‬ ٜ‫زاس‬ ٖ‫صٔا‬ ٗ‫ای‬ ‫دس‬ْ‫فش‬ ‫اص‬ ‫صٚدی‬ ٝ‫ت‬ ‫ػفشی‬ ٚ ْٚ‫وش‬ ‫صٚدی‬ ٝ‫ت‬ َ‫ضا‬ ‫ٞش‬ ٝ‫ت‬ . ‫٘یؼر‬2.1
. ‫وشد‬ ‫خٛاٞٙذ‬ ‫خـسیثا٘ی‬
ٝ‫ز‬ْ‫فش‬ ‫دس‬ ‫زغییش‬0.2HTML‫اػر‬ ٜ‫داد‬ ‫سٚی‬
‫ٞای‬ ْ‫فش‬ ‫زغییش‬ ٗ‫تضسٌسشی‬HTML5‫ػٙلش‬ ٝ‫ٞؼس‬ ‫اص‬ ‫اِطالی‬ ‫لؼٕر‬INPUT‫خٙغ‬ ٜ‫ٕٞشا‬ ٝ‫ت‬ )‫(ٚسٚدی‬‫ٚیظٌی‬‫ٞای‬
‫دس‬ ٖ‫زٛا‬ ‫ٔی‬ ٝ‫و‬ ٝ‫آ٘س‬ ‫اص‬ ، ‫سا‬ ‫صیش‬ ‫ِیؼر‬ . ‫اػر‬ ‫خذیذ‬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. 33 HTML5
‫ٚسٚدی‬ ‫ٚیظٌی‬ ٗ‫ای‬‫سا‬. ‫ؿٛد‬ ‫ٔی‬ ‫زاسیخ‬ ٜ‫وٙٙذ‬ ‫ا٘سخاب‬ ‫یه‬ ٝ‫ت‬ ُ‫زثذی‬ ‫خٛدواس‬ ‫تلٛسذ‬
 <input type=“month”>
. ‫وٙذ‬ ‫ٔی‬ ٜ‫ٔا‬ ٜ‫وٙٙذ‬ ‫ا٘سخاب‬ ‫یه‬ ٝ‫ت‬ ُ‫زثذی‬ ‫خٛدواس‬ ‫تلٛسذ‬ ‫سا‬ ‫ٚسٚدی‬ ‫ٚیظٌی‬ ٗ‫ای‬
 <input type=“week”>
. ‫وٙذ‬ ‫ٔی‬ ٝ‫ٞفس‬ ٜ‫وٙٙذ‬ ‫ا٘سخاب‬ ‫یه‬ ٝ‫ت‬ ُ‫زثذی‬ ‫خٛدواس‬ ‫تلٛسذ‬ ‫سا‬ ‫ٚسٚدی‬ ‫ٚیظٌی‬ ٗ‫ای‬
 <input type=“time”>
. ‫دٞذ‬ ‫ٔی‬ ‫سا‬ ٖ‫صٔا‬ ‫تلٛسذ‬ ٜ‫داد‬ ‫دسیافر‬ ٜ‫اخاص‬ ‫ٚیظٌی‬ ٗ‫ای‬
 <input type=“datetime”>
‫دٞذ‬ ‫ٔی‬ ‫سا‬ ‫زاسیخ‬ ٚ ٖ‫صٔا‬ ‫تلٛسذ‬ ٜ‫داد‬ ‫دسیافر‬ ٜ‫اخاص‬ ‫ٚیظٌی‬ ٗ‫ای‬
 <input type=“datetime-local”>
. ‫تاؿذ‬ ‫ٔی‬ ‫ٔطّی‬ ٖ‫صٔا‬ ٚ ‫زاسیخ‬ ‫تشای‬ ‫ٚیظٌی‬ ٗ‫ای‬
ْ‫فش‬2.1‫ٞای‬ ‫ٚیظٌی‬ ‫اص‬ ٖ‫ٕٞسٙا‬textٚpasswordٚsubmit‫ٚسٚدی‬ ‫ػٙاكش‬ ‫ٞای‬ ‫ٚسٚدی‬ ‫اص‬ . ‫وٙذ‬ ‫ٔی‬ ‫خـسیثا٘ی‬
‫ا‬ ‫دس‬ ‫خذیذ‬ ‫ٞای‬. ‫وشد‬ ٓ‫خٛاٞی‬ ٜ‫اػسفاد‬ ْ‫فش‬ ‫ػاخر‬ ‫تشای‬ ٝٔ‫دا‬
<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. 34 HTML5
<input name=‚SurfWeb‛ type=‚range‛ min=‚1‛ max=‚20‛
value=‚0‛><output name=‚result‛ onforminput=‚value=a.
value‛>0</output>
</FORM>
‫زلٛیش‬ ‫دس‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫سا‬ ‫تاال‬ ‫وذ‬ ٝ‫٘سید‬1.11‫دس‬ ‫ٚسٚدی‬ ‫ٔخسّف‬ ‫ٞای‬ ‫ٚیظٌی‬ ‫ٔخسّف‬ ‫ا٘ٛاع‬ ‫ٌیشی‬ ‫تىاس‬ . ‫تثٙیذ‬HTML5ٖ‫آػا‬ ‫تؼیاس‬
. ‫اػر‬
ٛ‫زل‬‫ی‬‫ش‬1.11
Autofocus
‫وٕه‬ ‫تا‬autofocus: ‫وٙیذ‬ ٝ‫زٛخ‬ ‫صیش‬ َ‫ٔثا‬ ٝ‫ت‬ . ‫تذٞیذ‬ ‫٘ظش‬ ‫ٔٛسد‬ ‫ٚسٚدی‬ ٝ‫ت‬ ‫سا‬ ‫فٛوٛع‬ ‫زٛا٘یذ‬ ‫ٔی‬
<input name=‚FirstName‛ type=‚text‛ autofocus>
‫تا‬ ‫ٚسٚدی‬ ‫ٌزاسی‬ ‫ػالٔر‬required
‫ٚیظٌی‬ ‫وٕه‬ ‫تا‬required. ‫٘ثاؿذ‬ ‫خاِی‬ ٚ ‫تٍیشد‬ ‫لشاس‬ ‫ٚسٚدی‬ ‫دس‬ ‫ٔمذاسی‬ ‫ضسٕی‬ ٝ‫و‬ ‫وٙیذ‬ ٗ‫زؼیی‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬
>input name=‚FirstName‛ type=‚text‛ required<
‫ٔی‬ ٜ‫داد‬ ‫ٕ٘ایؾ‬ ‫خیغأی‬ ٝ‫ِطظ‬ ٖ‫ٕٞا‬ ‫دس‬ ‫تاؿذ‬ ‫خاِی‬ ‫ٚسٚدی‬ ‫ٔمذاس‬ ‫اٌش‬. ‫ؿٛد‬

35. 35 HTML5
‫اص‬ ٜ‫اػسفاد‬ٝ‫اِطالی‬Placeholder
‫وٕه‬ ‫تا‬Placeholder‫زلٛیش‬ ‫ٔا٘ٙذ‬ ‫دٞیذ‬ ‫ٕ٘ایؾ‬ ‫خٛد‬ ‫ٚسٚدی‬ ٖٚ‫دس‬ ‫دس‬ ‫سا‬ ‫ٔمذاسی‬ ‫زٛا٘یذ‬ ‫ٔی‬ ‫ؿٕا‬11.12‫ٔمذاس‬ ٝ‫و‬
google search:‫داسد‬ ‫لشاس‬ ٖ‫آ‬ ‫دس‬
ٛ‫زل‬‫ی‬‫ش‬12.12
‫دس‬‫ت‬‫ی‬‫ـسش‬‫خؼسدٌٛشٞا‬‫ی‬‫ٚب‬‫زٛض‬‫ی‬‫ط‬‫ی‬‫ی‬‫ا‬‫ٔمذاس‬‫ی‬‫تلٛسذ‬‫خ‬‫ی‬‫ؾ‬‫فشم‬‫دس‬ٖٚ‫دس‬‫ٚسٚد‬‫ی‬ٟ٘‫آ‬‫ا‬‫لشاس‬‫داسد‬ٝ‫و‬‫تا‬ّ‫و‬‫ی‬‫ه‬‫تش‬ٚ‫س‬‫ی‬
‫ٚسٚد‬‫ی‬ٗ‫ٔس‬‫ٔمذاس‬‫خ‬‫ی‬‫ؾ‬‫فشم‬‫خان‬‫خٛاٞذ‬‫ؿذ‬‫ٔا٘ٙذ‬ٛ‫زل‬‫ی‬‫ش‬‫تاال‬.‫وذ‬‫ص‬‫ی‬‫ش‬‫سا‬َ‫د٘ثا‬ٙ‫و‬‫ی‬‫ذ‬‫زا‬‫واستشد‬‫ا‬‫ی‬ٗٚ‫ی‬ٌ‫ظ‬‫ی‬‫سا‬ٙ‫تث‬‫ی‬‫ذ‬:
<FORM>
<input name=‚search‛ type=‚text‛ placeholder=‚Google
Search‛>
<input type=‚submit‛ value=‚Search‛>
</FORM>

36. 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
.‫تاؿذ‬ ‫ٔی‬ ٖ‫وشد‬ ‫خان‬ ٚ ‫تشسػی‬ ٚ ٝ‫اضاف‬ ‫ٔٙظٛس‬ ٝ‫ت‬ ‫ٞا‬ ٜ‫داد‬ ٜ‫اػسفاد‬ ‫تشای‬ ‫ٞای‬ ْ‫فش‬HTML5‫اص‬ ٝ‫٘ؼخ‬ ٗ‫اِٚی‬HTML
‫تاؿذ‬ ‫ٔی‬ ‫اػسا٘ذاسد‬ٓٞ‫فشا‬ ‫ؿٕا‬ ‫وأدیٛزشی‬ ‫سٚی‬ ‫تش‬ ‫سا‬ َ‫ِٛوا‬ ٚ ‫ػشٚسی‬ ‫سٚی‬ ‫تش‬ ٜ‫داد‬ ‫ٔذیشیر‬ ٝ‫ت‬ ‫٘یاص‬ ‫دایشوسشی‬ ‫آدسع‬ ٝ‫و‬
‫دس‬ ‫سا‬ ٜ‫داد‬ ٖ‫تسٛا‬ ٝ‫و‬ ٜ‫داد‬ ‫٘ٛع‬ ‫ٞش‬ ‫تشای‬ ٜ‫سا‬ ٝ‫ػ‬ ‫صیش‬ ‫دس‬ . ‫وٙذ‬ ‫ٔی‬HTML5‫وشد‬ ‫ٔذیشیر‬‫ؿٛد‬ ‫ٔی‬ ‫ٔؼشفی‬:
ّٝ‫تٛػی‬ ٖ‫داد‬ ٝ‫زٛػؼ‬‫ٞای‬ ْ‫فش‬HTML5
ٜ‫داد‬ ‫ٕ٘ایؾ‬
ٜ‫داد‬ ‫ػاصی‬ ٓ‫ٔٙظ‬
ٔ ‫زفاٚذ‬. ‫اػر‬ ٜ‫ؿذ‬ ٜ‫داد‬ ‫زٛضیص‬ ‫صیش‬ ‫دس‬ ‫فٛق‬ ‫ٞای‬ ‫سذ‬

37. 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
‫ٔمذاس‬ٚ‫ی‬ٌ‫ظ‬‫ی‬mylist‫دس‬‫ػٙلش‬‫ٚسٚد‬‫ی‬ٜ‫اػسفاد‬ٔ‫ی‬‫ؿٛد‬.‫ٔمذاس‬‫ٞا‬‫ی‬DATALIST‫سا‬ٔ‫ی‬‫زٛا٘ذ‬‫ت‬‫ی‬ٗ‫ػٙاكش‬‫د‬‫ی‬‫ٍش‬٘‫ی‬‫ض‬ٝ‫ت‬‫اؿسشان‬
ٝ‫ٌزاؿس‬‫ؿٛد‬.

38. 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. 39 HTML5
ٛ‫زل‬‫ی‬‫ش‬1.14
‫دس‬‫ا‬‫ی‬ٗٛ‫زل‬‫ی‬‫ش‬‫اص‬‫سٚؽ‬‫خ‬‫ی‬‫ؾ‬‫فشم‬‫ضاِر‬ِ‫ی‬‫ؼر‬‫تشا‬‫ی‬‫ٕ٘ا‬‫ی‬‫ؾ‬‫ٔطسٛا‬ٜ‫اػسفاد‬ٜ‫ؿذ‬‫اػر‬.
‫تشا‬‫ی‬‫فشٔر‬‫تٙذ‬‫ی‬٘‫ی‬‫ض‬‫دس‬‫ا‬‫ی‬ٗ‫ػٙلش‬ٔ‫ی‬‫زٛا٘ذ‬‫اص‬‫ػ‬‫ی‬‫اع‬‫اع‬٘‫ی‬‫ض‬ٜ‫اػسفاد‬‫وشد‬.

40. 42 HTML5
‫رخ‬‫ی‬ٜ‫ش‬ٜ‫داد‬ٜٚ‫اػسفاد‬‫دس‬‫رخ‬‫ی‬‫شٞا‬‫ػاص‬‫ی‬‫ٞا‬‫ی‬ٜ‫داد‬‫دس‬‫ٚب‬
‫وٛو‬‫ی‬‫ٞا‬23
‫ی‬‫ه‬‫سٚؽ‬‫تشا‬‫ی‬ٗ‫ٍٟ٘ذاؿس‬ٚ‫رخ‬‫ی‬ٜ‫ش‬ٜ‫داد‬‫ٞا‬‫تلٛسذ‬‫ِٛو‬َ‫ا‬24
‫تشا‬‫ی‬‫ی‬‫ه‬‫ٚب‬‫ػا‬‫ی‬‫ر‬ٔ‫ی‬‫تاؿذ‬.‫دس‬
HTML5‫ٔمذاس‬‫اص‬ٜ‫داد‬‫ؿٕا‬ٔ‫ی‬‫زٛا٘ذ‬‫تلٛسذ‬ٓ‫زـ‬ٌ‫ی‬‫ش‬‫افضا‬‫ی‬‫ؾ‬‫ی‬‫اتذ‬ٚ‫دس‬َ‫ِٛوا‬‫رخ‬‫ی‬ٜ‫ش‬‫ؿٛد‬.‫رخ‬‫ی‬ٜ‫ش‬‫اػسا٘ذاسد‬‫ٚب‬
‫خذ‬‫ی‬‫ذ‬HTML5ٜ‫اخاص‬‫رخ‬‫ی‬ٜ‫ش‬‫ػاص‬‫ی‬‫ٔمذاس‬‫ػظ‬‫ی‬ٓ‫اص‬ٜ‫داد‬‫سا‬ٔ‫ی‬‫دٞذ‬.‫دس‬‫ػٛم‬ٜ‫اػسفاد‬‫اص‬‫ت‬‫ی‬‫غ‬ٗ‫ٔس‬‫تشا‬‫ی‬‫وٛو‬‫ی‬‫ٞا‬،
‫رخ‬‫ی‬‫ش‬ٜ‫ٚب‬‫ی‬‫ه‬‫خ‬‫ا‬‫ی‬ٜ‫ٍا‬ٜ‫داد‬25
َ‫ِٛوا‬ٔ‫ی‬‫تاؿذ‬ٚ‫دس‬ُ‫داخ‬‫ٔشٚسٌش‬‫ٚب‬‫لشاس‬ٔ‫ی‬ٌ‫ی‬‫شد‬.
‫ػٛد‬ّ‫اك‬‫ی‬‫ا‬‫ی‬ٗ‫سٚؽ‬‫تشا‬‫ی‬ٗ‫داؿس‬‫ی‬‫ه‬‫خا‬‫ی‬ٜ‫ٍا‬ٜ‫داد‬‫دس‬‫ی‬‫ه‬ٔ‫ش‬‫ٚسٌش‬‫ٚب‬‫اػر‬‫ؿٕا‬ٔ‫ی‬٘‫زٛا‬‫ی‬‫ذ‬ٝٔ‫تش٘ا‬‫ی‬‫سا‬‫تلٛسذ‬ٜ‫داد‬
َ‫ِٛوا‬‫رخ‬‫ی‬ٜ‫ش‬ٚٝ‫ت‬‫اخشا‬‫ی‬ٝٔ‫تش٘ا‬ٝٔ‫ادا‬ٞ‫د‬‫ی‬‫ذ‬ٚ‫ٕٞس‬‫ی‬ٗ٘‫صٔا‬‫ی‬ٝ‫و‬‫اسزثاط‬‫تا‬‫ا‬‫ی‬‫ٙسش٘ر‬‫لغغ‬ٔ‫ی‬‫تاؿذ‬ٔ‫ی‬ٖ‫زٛا‬‫اص‬ٜ‫داد‬
ٜ‫اػسفاد‬‫وشد‬.‫ا‬‫ی‬ٗ‫سٚؽ‬‫دس‬ٚ‫ػش‬‫ی‬‫غ‬‫ٞا‬‫ی‬‫خ‬‫ی‬ٔ‫ی‬ُٚٛ‫زم‬‫ی‬ٓٚ‫ٔؼسٙذاذ‬ٌٌُٛ‫دس‬َ‫ضا‬ٜ‫اػسفاد‬‫اػر‬.ٕٞ‫ا‬‫ی‬‫ر‬
ٜ‫اػسفاد‬‫اص‬ٝٔ‫تش٘ا‬‫ٞا‬‫ی‬‫ٚب‬‫تلٛسذ‬‫آفال‬‫ی‬ٗ‫دس‬‫وأد‬‫ی‬‫ٛزشٞا‬‫ی‬‫ؿخل‬‫ی‬‫ص‬‫ی‬‫اد‬‫خذ‬‫ی‬٘‫ی‬‫ؼر‬‫أا‬٘‫صٔا‬‫ی‬ٝ‫و‬ٝٔ‫تش٘ا‬‫ٞا‬‫ی‬‫ٚب‬‫تش‬
ٚ‫س‬‫ی‬ٜ‫دػسٍا‬‫ٞا‬‫ی‬‫ٔٛتا‬‫ی‬ُ‫اخشا‬ٔ‫ی‬‫ؿٛد‬ٕٞ‫ا‬‫ی‬‫ر‬ٚ‫ی‬ٜ‫ظ‬‫ی‬ٔ‫ی‬‫ی‬‫اتذ‬.ٚ‫ػش‬‫ی‬‫غ‬‫خ‬‫ی‬ٔ‫ی‬ٌٌُُٛ‫تشا‬‫ی‬‫ٌٛؿ‬‫ی‬‫ا‬‫ی‬ٖٛ‫ف‬‫ا‬‫ی‬ٗ
‫ؿشا‬‫ی‬‫ظ‬‫سا‬ٓٞ‫فشا‬ٜ‫وشد‬‫اػر‬ٝ‫و‬٘‫صٔا‬‫ی‬ٝ‫و‬‫اسزثاط‬ٝ‫ت‬‫ا‬‫ی‬‫ٙسش٘ر‬‫تشالشاس‬ٕ٘‫ی‬‫تاؿذ‬ٜ‫اخاص‬‫واس‬ٖ‫وشد‬‫تا‬ٚ‫ػش‬‫ی‬‫غ‬‫سا‬ٔ‫ی‬‫دٞذ‬.
‫تشا‬‫ی‬َ‫ٔثا‬،‫ؿٕا‬‫ٔٙسظش‬‫تشا‬‫ی‬‫ػٛاس‬ٖ‫ؿذ‬ٚ‫ٔسش‬ٖٚ‫ٕٞضٔا‬‫دس‬َ‫ضا‬‫زه‬ٖ‫وشد‬‫اوا٘ر‬‫خ‬‫ی‬ٔ‫ی‬ُ‫ٞؼس‬‫ی‬‫ذ‬‫دس‬‫ٔٛتا‬‫ی‬ُ‫خٛد‬‫دس‬
َ‫ضا‬ٖ‫خٛا٘ذ‬‫ی‬‫ه‬‫ا‬‫ی‬ٕ‫ی‬ُٕٚ‫زل‬‫ی‬ٓٝ‫ت‬‫خاػخ‬ٖ‫داد‬ٝ‫ت‬‫خ‬‫ی‬ْ‫ا‬‫سا‬ٔ‫ی‬ٞ‫د‬‫ی‬‫ذ‬ٚ‫ؿشٚع‬ٝ‫ت‬‫زا‬‫ی‬‫ح‬ٖ‫وشد‬‫خ‬‫ی‬ْ‫ا‬ٔ‫ی‬ٙ‫و‬‫ی‬‫ذ‬ٖٚٓٞ‫صٔا‬
‫ػٛاس‬ٚ‫ٔسش‬ٔ‫ی‬‫ؿ‬ٛ‫ی‬‫ذ‬ٚ‫ؿشٚع‬ٝ‫ت‬‫ضشور‬ٔ‫ی‬‫وٙذ‬ٚ٘‫صٔا‬‫ی‬ٝ‫و‬‫اص‬ٝ‫ؿثى‬EDGE‫ی‬‫ا‬3G‫خاسج‬‫ؿذ‬‫ی‬‫ذ‬ٚ‫اسزثاط‬‫ا‬‫ی‬‫ٙسش٘ر‬‫سا‬‫اص‬
‫دػر‬‫داد‬ٜ‫ا‬‫ی‬‫ذ‬ٖ‫ٕٞسٙا‬‫ؿٕا‬ٔ‫ی‬٘‫زٛا‬‫ی‬‫ذ‬‫اعالػاذ‬‫سا‬ٝ‫داؿس‬‫تاؿ‬‫ی‬‫ذ‬ٚٗ‫ٔس‬‫خٛد‬‫سا‬‫زا‬‫ی‬‫ح‬ٙ‫و‬‫ی‬‫ذ‬.‫ٚب‬HTML5‫ا‬‫ی‬ٗٚ‫ی‬ٌ‫ظ‬‫ی‬
‫سا‬‫داسد‬ٝ‫و‬ٝ‫ت‬ٝٔ‫تش٘ا‬‫ٞا‬‫ی‬‫دس‬َ‫ضا‬ٜ‫اػسفاد‬ٜ‫اخاص‬ٔ‫ی‬‫دٞذ‬‫دس‬ٖ‫صٔا‬‫اص‬‫دػر‬ٖ‫داد‬‫اسزثاعر‬‫دس‬َ‫ضا‬‫اخ‬‫ش‬‫ا‬‫تٕا٘ٙذ‬.‫ؿٕا‬ٔ‫ی‬
٘‫زٛا‬‫ی‬‫ذ‬ٝ‫ت‬‫ا‬‫ی‬ٕ‫ی‬ُ‫خٛد‬‫خاػخ‬ٞ‫د‬‫ی‬‫ذ‬ٖٚ‫تذ‬‫ا‬‫ی‬ٝ‫ٙى‬‫دس‬‫ض‬‫ی‬ٗ‫خا‬‫ػ‬‫خ‬ٝ‫ٔسٛخ‬ٛ‫ؿ‬‫ی‬‫ذ‬‫اسزثاط‬‫خٛد‬‫سا‬‫تا‬ٝ‫ؿثى‬‫ا‬‫ی‬‫ٙسش٘ر‬‫اص‬‫دػر‬ٜ‫داد‬
‫ا‬‫ی‬‫ذ‬.٘‫صٔا‬‫ی‬ٝ‫و‬‫اسزثاعاذ‬‫ٔٛتا‬‫ی‬ُ‫تا‬ٝ‫ؿثى‬‫تش‬‫لشاس‬‫ؿذ‬‫خ‬‫ی‬ْ‫ا‬‫ؿٕا‬َ‫اسػا‬ٚ‫خ‬‫ی‬ْ‫ا‬‫ٞا‬‫ی‬‫خذ‬‫ی‬‫ذ‬‫سا‬ٔ‫ی‬٘‫زٛا‬‫ی‬‫ذ‬‫دس‬‫ی‬‫افر‬ٙ‫و‬‫ی‬‫ذ‬.
23
- Cookies
24
- Local
25
- Database

41. 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>
‫اكّی‬ ‫وذ‬‫وذ‬ ٗ‫خایی‬ ‫دس‬ . ‫ؿٛ٘ذ‬ ‫ٔی‬ ٜ‫داد‬ ‫زشزیة‬ ‫اػىشیدر‬ ‫خاٚا‬ ‫زٛػظ‬HTML‫ػٙاكش‬ ‫ٞای‬SCRIPT‫ٔی‬ ٝ‫اضاف‬ ‫سا‬-
ٓ‫وٙی‬‫ػٙلش‬ ‫اص‬ ‫اػىشیدر‬ ‫وذٞای‬ ٖ‫وشد‬ ٝ‫اضاف‬ ‫تشای‬ .SCRIPT. ٓ‫وٙی‬ ‫ٔی‬ ٜ‫اػسفاد‬
<script>
</script>
. ‫وٙیذ‬ ٝ‫اضاف‬ ‫وذ‬ ِٝ‫د٘ثا‬ ‫دس‬ ‫سا‬ ‫اػىشیدر‬ ‫خاٚا‬ ‫زاتغ‬
function getStorage(type) {
var storage = window[type + ‚Storage‛],
delta = 0,
li = document.createElement(‚li‛);
if (storage.getItem(‚value‛)) {

42. 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-َ‫ِٛوا‬ ‫تیغ‬ ‫دیسا‬ ‫یه‬ ٗ‫ػاخسس‬ٜ‫رخیش‬ ‫فشاخٛا٘ی‬ ٚ
2-‫ی‬ٝ‫و‬ ‫فیّذ‬ ‫ه‬value. ‫ؿٛد‬ ‫ٔی‬ ٝ‫اضاف‬ ‫تیغ‬ ‫دیسا‬ ‫دس‬ ‫ؿٛد‬ ‫ٔی‬ ٜ‫خٛا٘ذ‬
3-. ‫تیغ‬ ‫دیسا‬ ٝ‫ت‬ ‫ؿٛد‬ ‫ٔی‬ ٝ‫اضاف‬ ‫٘یض‬ َّٛ‫ػ‬ ٚ‫د‬ ٗ‫تی‬ ‫خاتدای‬ ٖ‫صٔا‬ ‫فیّذ‬
‫خذیذ‬ ‫ٞای‬ ‫ٚیظٌی‬HTML5
‫ی‬‫ه‬‫اص‬‫ٚیظٌی‬26
‫اغّة‬ ‫ػٙاكش‬ . ‫دٞذ‬ ‫ٔی‬ ‫سا‬ ‫واستشدی‬ ‫ٞای‬ ٝٔ‫تش٘ا‬ ‫ػٙلش‬ ٝ‫ت‬ ‫اِطافاذ‬ ٗ‫خیٛػس‬ ٜ‫اخاص‬ ‫اػر‬ ٗ‫ای‬
‫ٞای‬ ‫ػٙلش‬ ‫٘ظیش‬ ‫ٚیظٌی‬ ‫داسای‬INPUT‫ٚیظٌی‬ ‫اص‬ ٝ‫و‬requiredٝ‫اِٚی‬ ‫ٔمذاس‬ ٖ‫وشد‬ ٗ‫زؼیی‬ ‫تشای‬requiredٜ‫اػسفاد‬
‫وٙذ‬ ‫ٔی‬‫دس‬ ‫آٟ٘ا‬ ‫اص‬ ‫زٛا٘یذ‬ ‫ٔی‬ ٝ‫و‬ ‫داسد‬ ‫ٚخٛد‬ ‫خذیذی‬ ‫ٞای‬ ‫ٚیظٌی‬ ‫ایٙدا‬ ‫دس‬ َ‫ضا‬ ‫ٞش‬ ٝ‫ت‬ .HTML5.‫وٙیذ‬ ٜ‫اػسفاد‬
‫خذیذ‬ ‫ٚیظٌی‬draggable( ‫دسػر‬ ‫ٔمذاس‬ ‫یه‬ ‫داسای‬True‫غّظ‬ ‫یا‬ )(False‫تاؿذ‬ ‫ٔی‬ ).‫تا‬ ‫اسزثاط‬ ‫دس‬ ‫ٚیظٌی‬ ٗ‫ای‬
API‫وـی‬ٖ‫وشد‬ ‫سٞا‬ ٚ ٖ‫ذ‬27
HTML5. ‫دٞذ‬ ‫ٔی‬ ‫سا‬ ٝ‫كفط‬ ٝ‫ت‬ ‫ػٙلشی‬ ‫ٞش‬ ٖ‫وـیذ‬ ‫تشای‬ ‫دٞذ‬ ‫ٔی‬ ٜ‫اخاص‬
‫ٚیظٌی‬contenteditable. ‫داسد‬ ‫ٚیشایؾ‬ ٝ‫ت‬ ‫٘یاص‬ ‫ٚب‬ ٝ‫كفط‬ ‫دس‬ ‫ٔطسٛای‬ ‫اٌش‬ ٖ‫وشد‬ ‫ٔـخق‬ ‫تشای‬ ‫دٞذ‬ ‫ٔی‬ ٜ‫اخاص‬ ‫ؿٕا‬ ٝ‫ت‬
‫ؿ‬ ٝ‫ت‬ ‫سا‬ ٜ‫اخاص‬ ٗ‫ای‬ ‫صیش‬ َ‫ٔثا‬‫ػٙلش‬ ٖٚ‫دس‬ ‫دس‬ ‫ٔطسٛا‬ ْ‫زٕا‬ ‫ٚیشایؾ‬ ‫ٕا‬SECTION. ‫دٞذ‬ ‫ٔی‬ ‫سا‬
26
- Attribute
27
- Drag and Drop

43. 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،ْ‫زٕا‬ . ‫ػاخر‬ ‫ػفاسؿی‬ ُ‫اػسای‬
‫دس‬ ٝ‫و‬ ‫ٞای‬ ‫ٚیظٌی‬XHTMLٚHTML4‫٘ظیش‬id،classٚStyle‫دس‬HTML5. ‫تاؿذ‬ ‫ٔی‬ ‫دػسشع‬ ‫دس‬
‫دس‬ ‫زیضی‬ ٝ‫ز‬HTML5‫؟‬ ‫ؿٛد‬ ‫ٕ٘ی‬ ‫خـسیثا٘ی‬
HTML5‫اص‬‫خـسیثا٘ی‬‫خیـسش‬ ٚ ‫لذیٕی‬ ‫ٞای‬ ٝ‫٘ؼخ‬ ‫ػٙاكش‬ ‫اص‬ ‫تشخی‬HTML‫خـسیث‬‫ا٘ی‬٘‫وٙذ‬ ‫ٕی‬‫دیذ‬ ‫خٛاٞیذ‬ ‫ِٚی‬
‫دس‬ ‫خذیذ‬ ‫ػٙاكش‬ ٍٝ٘ٛ‫ز‬HTML‫ؿذ‬ ‫خٛاٞذ‬ ٝ‫كفط‬ ‫دس‬ ‫ؿی‬ ‫یه‬ ‫عشاضی‬ ‫یا‬ ٚ ‫تٙذی‬ ‫فشٔر‬ ٖ‫ؿذ‬ ‫ساضسش‬ ‫تاػث‬ٕٝ٘ٛ٘ ‫تشای‬ .
‫ػٙلش‬MARQUEE)ٗ‫ٔس‬ ‫تشای‬ ٜ‫(٘ٛاسِغض٘ذ‬ ٗ‫ٔس‬ ‫عٛٔاس‬ ‫یه‬ ‫خّك‬ ٜ‫اخاص‬ ‫ؿٕا‬ ٝ‫ت‬28
. ‫دٞذ‬ ‫ٔی‬ ‫ؿٕا‬ ٝ‫كفط‬ ‫دس‬ ‫سا‬ٚ
ٜ‫ؿذ‬ ‫سٞا‬ ‫ػٙاكش‬‫٘ٛاس‬ ‫اص‬ ٜ‫اػسفاد‬ ‫تشای‬، ‫اػىشیدر‬ ‫خاٚا‬ ‫اص‬ ٜ‫ِغض٘ذ‬HTMLٚ ‫اػسا٘ذاسد‬CSSٜ‫اػسفاد‬‫اػر‬ ٜ‫ؿذ‬ ‫ٔی‬.
‫تشای‬ ‫سا‬ ‫صیش‬ ‫ِیؼر‬‫دس‬ ٝ‫و‬ ‫ػٙاكشی‬ ٖ‫دیذ‬HTML5: ‫وٙیذ‬ َ‫د٘ثا‬ ‫ؿٛد‬ ‫ٕ٘ی‬ ‫خـسیثا٘ی‬
 BASEFONT
 BIG
 CENTER
 FONT
 S
 STRIKE
 TT
 U
 FRAME
 FAMESET
28
- scrolling

44. 44 HTML5
 NOFRAMES
 APPLET
 ISINDEX
 DIR
HTML5ٝ‫دػس‬ ‫اص‬‫ا‬‫ی‬‫ٞا‬ ٝ‫٘ؼخ‬ ‫ػٙاكش‬ ‫اص‬‫ٕ٘ی‬ ‫خـسیثا٘ی‬ ‫لذیٕی‬ ‫ی‬‫ٔٛسد‬ ‫ٚب‬ ‫ٔشٚسٌش‬ ٝ‫و‬ ‫تاؿذ‬ ‫ٕ٘ی‬ ‫ٔؼٙا‬ ٗ‫ای‬ ٝ‫ت‬ ‫وٙذ‬
‫ؿٕا‬ ٝ‫ػالل‬‫وٙذ‬ ‫خـسیثا٘ی‬ ‫ػٙاكش‬ ٗ‫ای‬ ‫اص‬ ‫زٛا٘ذ‬ ‫ٕ٘ی‬‫تایذ‬ ‫ؿٕا‬ .‫٘ظش‬ ‫ٔٛسد‬ ‫ػٙاكش‬ ٖ‫وشد‬ ‫زه‬ ‫تا‬‫ٔشٚسٌشٞای‬ ‫تیغ‬ ‫تشٚی‬
‫زٛػظ‬ ‫ؿذ‬ ‫سٞا‬ ‫ٞا‬ ‫ػٙاكش‬ ‫اص‬ ‫خـسیثا٘ی‬ ‫تشای‬ ‫ٔخسّف‬HTML5‫سٚی‬ ‫تش‬ ‫ٚب‬ ‫كفطاذ‬ ‫كطیص‬ ٖ‫داد‬ ‫ٕ٘ایؾ‬ ‫تشای‬
‫ٚب‬ ‫ٔشٚسٌشٞای‬ٝ‫ٔشتٛع‬.
: ‫اػر‬ ٜ‫ؿذ‬ ٜ‫آٚسد‬ ‫ا٘ذ‬ ٜ‫ؿذ‬ ‫اكالش‬ ٝ‫و‬ ‫ػٙاكش‬ ‫اص‬ ‫تؼضی‬ ‫صیش‬ ‫دس‬ . ‫ا٘ذ‬ ٜ‫ؿذ‬ ‫ضزف‬ ٝ‫و‬ ‫ػٙاكشی‬ ‫تشای‬ ‫اِطالاذ‬
‫ػٙلش‬ ‫دس‬A‫ٚیظٌی‬“placeholder link”‫ٚیظٌی‬ ٗ‫خایٍضی‬HREF
‫ػٙلش‬ADDRESS‫تٙذی‬ ‫تخؾ‬ ْٟٛ‫ٔف‬ ‫تشای‬
‫ػٙلش‬B‫ضاؿی‬ ‫تشای‬ ٗ‫ٔس‬ ‫اص‬ ‫ی‬ ٜ‫ٔطذٚد‬ ٝ‫اسائ‬ ‫تشای‬‫زماضا‬ ‫ٞش‬ ٝ‫ت‬ ُ‫زثذی‬ ٚ ٜ‫ؿذ‬ ‫خاسج‬ َٕٛ‫ٔؼ‬ ‫٘ثشٞای‬ ‫اص‬ ‫ٍ٘اسی‬ ٝ
‫اػر‬ ٜ‫ؿذ‬ ‫خاسخی‬
‫ػٙلش‬HR‫اػر‬ ٜ‫ؿذ‬ ‫ٔغاِة‬ ‫دس‬ )‫(خاسٌشاف‬ ‫تٙذ‬ ‫ػغص‬ ٜ‫خذاوٙٙذ‬ ‫یه‬ ٍٗ‫خایضی‬ ٖٛٙ‫او‬
‫ػٙلش‬MENUٜ‫دٚتاس‬‫فؼّی‬ ‫ٔٙٛٞای‬ ٖ‫تٛد‬ ‫ٔفیذ‬ ‫تشای‬ ‫اػر‬ ٜ‫ؿذ‬ ‫زؼشیف‬
‫ػٙلش‬SMALL‫ا‬ٖٛٙ‫و‬‫وٛزه‬ ٖ‫وشد‬ ‫زاج‬ ٝ‫اسائ‬ ‫تشای‬‫ؿٛد‬ ‫ٔی‬ ٜ‫اػسفاد‬
‫دس‬ ٝ‫و‬ ‫ٞای‬ ‫ٚیظٌی‬ ‫اص‬ ‫ِیؼر‬ ‫صیش‬ ‫دس‬HTML5‫سٞا‬ ‫ٞای‬ ‫ٚیظٌی‬ ‫اص‬ ٜ‫اػسفاد‬ ‫تدای‬ ‫ؿٕا‬ . ‫اػر‬ ٜ‫آٔذ‬ ‫ؿٛ٘ذ‬ ‫ٕ٘ی‬ ‫خـسیثا٘ی‬
ٜ‫ؿذ‬‫دس‬HTML5‫ػاخساس‬ ‫اص‬ ‫تایذ‬CSS. ‫وٙیذ‬ ٜ‫اػسفاد‬
‫ٚیظٌی‬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. 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. 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. ‫ایذ‬ ٜ‫ؿذ‬ ‫آؿٙا‬