Hyper Text Markup Language

1. ‫وب‬ ‫بر‬ ‫مبتنی‬ ‫نویسی‬ ‫برنامه‬
Web Programming
‫خدا‬ ‫نام‬ ‫به‬
1
HTML
HyperText Markup Language

2. ‫گزاسی‬ ًِ‫ًـا‬ ‫ّای‬ ‫صتاى‬
‫صتاى‬‫ّای‬ًِ‫ًـا‬‫گزاسی‬(Markup Language)‫ًَػی‬‫اص‬‫صتاى‬‫ّای‬‫تَصیفی‬،‫ّؼتٌذ‬ِ‫ک‬‫هتي‬ٍ
‫اعالػاتی‬‫دس‬‫هَسد‬َُ‫ًح‬َُ‫ًح‬‫تفؼیش‬‫هتي‬‫سا‬‫تا‬‫ّن‬‫ادغام‬‫هی‬‫کٌٌذ‬.
SGML(Standard Generalization Markup Language)
XML(Extensible Markup Language)
HTML(HyperText Markup Language)
2

3. HTML‫چیؼت؟‬
HTML‫هخفف‬‫کلوات‬Hyper Text Markup Languageِ‫ت‬‫هؼٌای‬‫صتاى‬ًِ‫ًـا‬‫گزاسی‬‫اتش‬‫هتي‬
‫اػت‬.‫دس‬‫ایي‬‫صتاى‬ِ‫هحوَػ‬‫ای‬‫تشچؼة‬‫ّا‬(Tag)‫هـخص‬‫هی‬‫کٌٌذ‬‫هحتَای‬ِ‫صفح‬‫دس‬ِ‫چ‬‫قالثی‬
‫ًوایؾ‬ُ‫داد‬‫ؿَد‬.
3

4. ‫ّای‬ ‫ٍسطى‬ ِ‫تاسیخچ‬HTML
4

5. HTML 5.2
5
 Release Candidate
 Proposed Recommendation
 W3C Recommendation

6. HTML 5.2
6
Abstract
 This specification defines the 5th major version, second minor revision of the
core language of the World Wide Web: the Hypertext Markup Language
(HTML). In this version, new features continue to be introduced to help Web
application authors, new elements continue to be introduced based on research
into prevailing authoring practices, and special attention continues to be given
to defining clear conformance criteria for user agents in an effort to improve
interoperability.

7. Timeline
7

8. HTML 5
HTML 5‫آخشیي‬ِ‫ًؼخ‬‫اص‬‫ایي‬‫صتاى‬ًِ‫ًـا‬‫گزاسی‬‫اػت‬ِ‫ک‬‫حاٍی‬‫اهکاًات‬‫خذیذی‬،‫اػت‬‫تشخی‬‫اص‬
‫اهکاًاتی‬ِ‫ک‬‫دس‬ِ‫ًؼخ‬‫قثلی‬‫هَخَد‬‫تَد‬‫دس‬‫ایي‬ِ‫ًؼخ‬‫تْثَد‬ِ‫یافت‬ٍ‫ّوچٌیي‬API‫ّای‬‫اػکشیپت‬
‫ًَیؼی‬‫خذیذی‬‫ًیض‬ِ‫ت‬‫آى‬ِ‫اضاف‬ُ‫ؿذ‬‫اػت‬.ٍُ‫ػال‬‫تش‬،‫آى‬‫دس‬‫عشاحی‬‫ایي‬ِ‫ًؼخ‬‫اصَل‬ِ‫پای‬‫ای‬‫هذ‬‫ًظش‬
‫قشاس‬ِ‫گشفت‬‫تا‬‫اعویٌاى‬‫حاصل‬‫ؿَد‬ِ‫ک‬‫ایي‬ِ‫ًؼخ‬‫تش‬‫سٍی‬‫تواهی‬‫پلت‬‫فشم‬‫ّا‬ِ‫ت‬‫خَتی‬‫کاس‬‫خَاّذ‬‫کشد‬ٍ
‫خغاّای‬ِ‫تشًاه‬‫ًَیؼی‬‫سا‬ِ‫ت‬‫خَتی‬ٍ‫تذٍى‬‫هـکل‬‫هذیشیت‬‫هی‬‫کٌذ‬.
8

9. HTML 5
‫هؼتٌذات‬HTML 5‫تَػظ‬ٍ‫د‬ٍُ‫گش‬‫هختلف‬‫تذٍیي‬‫هی‬‫ؿَد‬ٍ‫دس‬ٍ‫د‬ِ‫ًؼخ‬ِ‫اسائ‬‫هی‬‫ؿَد‬.
W3C
‫کٌؼشػین‬‫خْاًی‬‫ٍب‬
‫هؼتٌذات‬ِ‫تْی‬ُ‫ؿذ‬‫تَػظ‬‫ایي‬ٍُ‫گش‬‫سا‬‫هی‬‫تَاًیذ‬‫دس‬‫آدسع‬//spec5org/html.3w.//dev:http‫تیاتیذ‬.
28 October 2014.‫اًتـاسیافت‬.
WHATWG
Web Hypertext ApplicationTechnologyWorking Group
ٍُ‫کاسگش‬‫فٌاٍسی‬ِ‫تشًاه‬‫ّای‬‫اتش‬‫هتي‬‫تحت‬‫ٍب‬
‫تَػظ‬‫افشادی‬‫اص‬‫ؿشکت‬‫ّای‬Mozilla,Apple, Opera‫تـکیل‬ُ‫ؿذ‬‫اػت‬.
‫هؼتٌذات‬ِ‫تْی‬ُ‫ؿذ‬‫تَػظ‬‫ایي‬ٍُ‫گش‬‫سا‬‫هی‬‫تَاًیذ‬‫دس‬‫آدسع‬org/html/.whatwg.//www:http‫تیاتیذ‬.
ِ‫ت‬‫ایي‬،‫ػٌذ‬‫اػتاًذاسدّای‬ُ‫صًذ‬‫ّن‬ِ‫گفت‬‫هی‬،‫ؿَد‬‫صیشا‬ِ‫ت‬‫عَس‬‫دائن‬‫دس‬‫حال‬ِ‫تَػؼ‬ٍ‫تغییش‬‫اػت‬.
‫دس‬‫ػال‬2012‫هٌتـش‬ُ‫ؿذ‬ٍِ‫ت‬‫عَس‬ِ‫پیَػت‬ِ‫اداه‬‫داسد‬.
9

10. ‫هؼتٌذات‬ ‫تیي‬ ‫تفاٍت‬W3CٍWHATWG
ِ‫ت‬‫عَس‬ِ‫خالص‬‫هؼتٌذات‬WHATWG‫کوی‬ُ‫هحاٍس‬‫ای‬‫تش‬ٍ‫کاستشدی‬‫تش‬‫اػت‬ٍِ‫الثت‬‫تؼضی‬‫هی‬
‫گَیٌذ‬‫کوی‬ُ‫آیٌذ‬ًِ‫ًگشا‬‫تش‬‫اػت‬.‫ٍلی‬‫دس‬‫هدوَع‬‫ایي‬ٍ‫د‬‫ػٌذ‬‫تؼیاس‬ِ‫ؿثی‬ِ‫ت‬‫ّن‬‫هی‬‫تاؿٌذ‬.ٍ‫هی‬
‫تَاى‬‫ّش‬‫کذام‬‫اص‬‫ایي‬ٍ‫د‬‫ػٌذ‬‫سا‬ِ‫ت‬‫ػٌَاى‬‫هٌثؼی‬‫تشای‬‫یادگیشی‬‫ػٌاصش‬HTML5ٍ‫فٌاٍسی‬‫ّای‬‫هشتثظ‬
‫تا‬‫آى‬ِ‫ت‬‫کاس‬‫گشفت‬.‫دسػت‬‫اػت‬ِ‫ک‬‫ػیاػت‬‫ّای‬‫پـت‬ُ‫پشد‬‫ٍخَد‬‫داسد‬ِ‫ک‬‫ها‬ِ‫ت‬‫ػٌَاى‬‫عشاح‬ٍِ‫تشًاه‬
،‫ًَیغ‬‫کٌتشلی‬‫تش‬‫آًْا‬‫ًذاسین‬‫ٍلی‬‫ٍخَد‬‫ایي‬ٍ‫د‬‫ػٌذ‬‫هتفاٍت‬‫ًوی‬‫تَاًذ‬‫تاػث‬‫ًگشاًی‬‫ؿَد‬.
10

11. W3CٍWHATWG
11
https://whatwg.org/
TheWeb HypertextApplication
TechnologyWorking Group is a
community of people interested in
evolving HTML and related
technologies.
https://www.w3.org/
TheWorldWideWeb Consortium is the main
international standards organization for the
WorldWideWeb.

12. 12
HTMLTags

13. HTML Tags
‫تشای‬‫ًـاى‬‫دادى‬‫ّش‬‫الواى‬‫دس‬ِ‫صفح‬‫اص‬‫تگ‬ُ‫اػتفاد‬‫هی‬‫ؿَد‬.‫ّش‬‫تگ‬‫داسای‬‫قؼوت‬‫ؿشٍع‬
(opening tag)ٍ‫قؼوت‬‫پایاًی‬(closing tag)‫اػت‬.
<tagname> ‫برچسپ‬ ‫محتوای‬ </tagname>
13

14. HTML Tags
‫تگ‬‫ّا‬‫سا‬‫هی‬‫تَاى‬ِ‫ت‬ٍ‫د‬ٍُ‫گش‬‫تقؼین‬‫کشد‬:
ContainerTag
‫تگ‬‫ّا‬ِ‫ت‬‫صَست‬‫خفت‬(‫تاص‬ٍِ‫تؼت‬)‫هی‬‫تاؿٌذ‬.
StandaloneTag
‫تگ‬‫ّایی‬ِ‫ک‬‫تصَست‬‫تکی‬‫تکاس‬‫هی‬‫سًٍذ‬.
14

15. ‫ػٌذ‬ ‫ػاختاس‬HTML
15

16. ‫ػٌذ‬ ‫ػاختاس‬HTML
16

17. DOM(Document Object Model)
‫صهاًی‬ِ‫ک‬‫یک‬ِ‫صفح‬‫ی‬‫ٍب‬‫تاسگزاسی‬‫هی‬،‫ؿَد‬‫هشٍسگش‬‫اص‬‫آى‬،ِ‫صفح‬‫یک‬‫هذل‬DOM‫ایداد‬‫هی‬
‫کٌذ‬.‫هذل‬DOM‫یک‬‫ػاختاس‬‫دسختی‬‫اص‬‫اؿیاء‬‫هَخَد‬‫دس‬ِ‫صفح‬HTML‫هی‬‫ػاصد‬.‫ایي‬‫هذل‬
‫ٍیظگی‬‫ّا‬ٍ‫هتذّایی‬‫سا‬‫تشای‬‫دػتیاتی‬ِ‫ت‬‫ًَد‬‫ّا‬‫اص‬‫عشیق‬‫خاٍا‬‫اػکشیپت‬‫فشاّن‬‫هی‬‫کٌذ‬.‫دس‬‫ٍاقغ‬
JavaScript‫تا‬ُ‫اػتفاد‬‫اص‬‫هذل‬DOM،‫هی‬‫تَاًذ‬ِ‫ت‬‫توام‬‫ػٌاصش‬‫یک‬ِ‫صفح‬HTML‫دػتشػی‬ِ‫داؿت‬
‫تاؿذ‬.
17

18. DOM(Document Object Model)
18

19. ‫تگ‬<!DOCTYPE>
‫ایي‬‫تگ‬‫ًَع‬‫ػٌذ‬html‫سا‬‫هـخص‬‫هی‬‫کٌذ‬ٍِ‫ت‬‫هشٍسگش‬‫هی‬‫گَیذ‬ِ‫ک‬‫کذّا‬‫تا‬ِ‫چ‬‫ٍسطًی‬‫اص‬html
ِ‫ًَؿت‬ُ‫ؿذ‬‫اػت‬.َُ‫ًح‬‫اػالى‬‫ًَع‬‫ػٌذ‬‫دس‬html 5ِ‫ت‬‫صَست‬‫صیش‬‫اػت‬.
19

20. ‫کذّای‬ ‫ًَؿتي‬ ‫اتضاسّای‬HTML
‫ٍیشایـگشّای‬‫هتٌی‬(Text Editor)
‫دس‬‫ایي‬‫ًشم‬‫افضاس‬‫ّا‬‫کذّای‬htmlِ‫ت‬‫صَست‬‫دػتی‬ِ‫ًَؿت‬‫هی‬‫ؿَد‬.
‫ایي‬‫ٍیشایـگشّا‬‫حدن‬‫کوی‬‫اؿغال‬‫هی‬‫کٌٌذ‬.
‫اهکاًاتی‬‫چَى‬AutoComplete‫سا‬‫ًذاسًذ‬.
Notepad, Notpad++, Sublime
‫ًشم‬‫افضاسّای‬WYSIWIG
‫هی‬‫تَاى‬‫اص‬‫عشیق‬‫ٍاػظ‬‫ّای‬‫گشافیکی‬‫کذّای‬html‫سا‬‫ایداد‬‫کشد‬.
NetBeans, PHP Storm,Adobe DreamWeaver
20

21. ‫کَچک‬ ‫حشٍف‬ ‫صَست‬ ِ‫ت‬ ‫ّا‬ ‫تگ‬ ‫ًَؿتي‬
HTML‫ًؼثت‬ِ‫ت‬‫حشٍف‬‫کَچک‬ٍ‫تضسگ‬‫حؼاع‬‫ًیؼت‬.‫اها‬‫عثق‬‫ًظش‬W3Cِ‫تَصی‬‫هی‬‫ؿَد‬‫دس‬
‫ٌّگام‬‫ًَؿتي‬‫تگ‬‫ّا‬‫اص‬‫حشٍف‬‫کَچک‬ُ‫اػتفاد‬‫ؿَد‬.
21

22. Use Lower Case Element Names
22
 We recommend using lowercase element names because:
 Mixing uppercase and lowercase names is bad
 Developers normally use lowercase names (as in XHTML)
 Lowercase look cleaner
 Lowercase are easier to write

23. ‫ػٌاصش‬Empty
‫تؼضی‬‫ػٌاصش‬‫دس‬html‫هحتَایی‬‫ًذاسًذ‬.‫ایي‬‫ػٌاصش‬‫تگ‬‫پایاًی‬‫سا‬‫ًذاسًذ‬.ٍ‫دس‬‫تگ‬‫اتتذایی‬ِ‫تؼت‬
‫هی‬‫ؿًَذ‬.‫هاًٌذ‬‫تگ‬<br />ِ‫ک‬‫تشای‬‫ؿکؼتي‬‫خظ‬ُ‫اػتفاد‬‫هی‬‫ؿَد‬.
23

24. ‫تیتش‬ ‫ّای‬ ‫تگ‬Headings
‫ایي‬‫تگ‬‫ّا‬‫داسای‬‫ؿؾ‬‫ػغح‬ُ‫تَد‬ِ‫ک‬‫تاػث‬‫دسؿت‬‫تش‬ُ‫دیذ‬‫ؿذى‬‫تیتشّا‬ُ‫ؿذ‬ٍُ‫اػتفاد‬ٌِ‫تْی‬‫اص‬
‫هفَْم‬‫آًْا‬‫تاػث‬‫هی‬‫ؿَد‬‫هیضاى‬SEO‫افضایؾ‬‫یاتذ‬.
24

25. ‫پاساگشاف‬ ‫ایداد‬Paragraphs
‫تشای‬‫ایداد‬‫پاساگشاف‬‫اص‬‫تگ‬<p>ُ‫اػتفاد‬‫هی‬‫ؿَد‬.‫ایي‬‫تگ‬‫داسای‬‫ػغح‬‫تالک‬‫هی‬‫تاؿذ‬ِ‫ک‬‫تاػث‬‫هی‬
‫ؿَد‬‫پاساگشاف‬‫ّا‬‫صیش‬‫ّن‬‫قشاس‬‫تگیشًذ‬.
25

26. ‫پاساگشاف‬ ‫ایداد‬Paragraphs
26

27. 27
Text Formatting

28. ‫هتي‬ ‫تٌذی‬ ‫فشهت‬(Text Formatting)
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
28

29. ‫هتي‬ ‫تٌذی‬ ‫فشهت‬(Text Formatting)
29

30. ‫هتي‬ ‫تٌذی‬ ‫فشهت‬(Text Formatting)
30

31. 31
Quotation and Citation Elements

32. Quotation and Citation Elements
32

33. ‫قَل‬ ‫ًقل‬ ‫ّای‬ ‫تگ‬(Quotation)
‫اص‬‫تگ‬<q>‫تشای‬‫ًقل‬‫قَل‬‫گزاسی‬ُ‫اػتفاد‬‫هی‬‫ؿَد‬ٍ‫هتي‬‫هَسد‬‫ًظش‬‫دس‬‫داخل‬‫ایي‬‫تگ‬‫قشاس‬‫هی‬‫گیشد‬.
‫ایي‬‫تگ‬‫تشای‬‫ًقل‬‫قَل‬‫ّای‬ُ‫کَتا‬‫تکاس‬‫هی‬‫سٍد‬.‫ػولکشد‬‫ایي‬‫تگ‬ِ‫ت‬‫صَست‬inline‫اػت‬.
33

34. ‫قَل‬ ‫ًقل‬<blockquote>
‫ایي‬‫تگ‬‫ًیض‬‫تشای‬‫ًقل‬‫قَل‬‫گزاسی‬‫تکاس‬‫هی‬‫سٍد‬‫ٍکاسکشد‬‫آى‬ِ‫ت‬‫صَست‬‫تالک‬‫هی‬‫تاؿذ‬ِ‫ک‬‫یک‬‫تخـی‬
‫سا‬‫تشای‬‫ًقل‬‫قَل‬‫اص‬‫هٌثؼی‬‫دیگش‬‫تؼییي‬‫هی‬‫کٌذ‬.
34

35. ‫اختصاس‬ ‫تگ‬Abbreviations
‫تشای‬‫اختصاس‬‫ػاصی‬‫اص‬‫تگ‬<abbr>ُ‫اػتفاد‬‫هی‬‫ؿَد‬.
35

36. 36
Comments

37. ‫تَضیحات‬(Comments)
ِ‫ت‬‫هٌظَس‬ِ‫اضاف‬‫کشدى‬‫تَضیحات‬‫تشای‬‫افضایؾ‬‫خَاًایی‬‫کذ‬‫ّا‬ٍ‫هؼتٌذ‬‫ػاصی‬‫هی‬‫تَاى‬‫اص‬‫تگ‬‫صیش‬
ُ‫اػتفاد‬‫کشد‬.
 <!--Write your comments here -->
37

38. ‫ؿشعی‬ ‫تَضیحات‬(Conditional Comments)
‫تَضیحات‬‫ؿشعی‬‫فقظ‬‫تَػظ‬‫هشٍسگش‬Internet Explorer‫اخشا‬‫هی‬‫ؿَد‬.
38

39. 39
Links

40. ‫دس‬ ‫لیٌک‬HTML(Links)
‫تشای‬‫ایداد‬‫پیًَذ‬(Hyperlink)‫دس‬‫صفحات‬‫ٍب‬‫هی‬‫تَاى‬‫اص‬‫تگ‬a(‫هخفف‬‫ػثاست‬anchor)ُ‫اػتفاد‬
‫کشد‬ٍ‫خصَصیت‬‫آى‬‫سا‬‫تؼییي‬‫ًوَد‬.
40

41. ‫ػکغ‬ ‫سٍی‬ ‫گزاسی‬ ‫لیٌک‬
41

42. ‫ّا‬ ‫لیٌک‬ ‫سًگ‬
‫اػت‬ ‫صیش‬ ‫تصَست‬ ‫هختلف‬ ‫حاالت‬ ‫دس‬ ‫ّا‬ ‫لیٌک‬ ‫سًگ‬ ‫فشض‬ ‫پیؾ‬ ‫صَست‬ ِ‫ت‬.‫سًگ‬ ‫ایي‬ ‫تَاى‬ ‫هی‬ ِ‫ک‬
‫خصَصیت‬ ‫کوک‬ ِ‫ت‬ ‫سا‬ ‫تٌذی‬style‫داد‬ ‫تغییش‬.
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
42

43. ‫ّا‬ ‫لیٌک‬ ‫سًگ‬
43

44. ‫هحلی‬ ‫لیٌک‬(Local Links)
‫تشای‬‫پیًَذ‬ِ‫ت‬ِ‫صفح‬‫ای‬‫دس‬‫ٍب‬‫ػایت‬‫خاسی‬‫هی‬‫تَاى‬‫اص‬‫ػاختاس‬‫صیش‬ُ‫اػتفاد‬‫کشد‬.
44

45. ‫خصَصیت‬target‫تگ‬ ‫دس‬<a>
‫ایي‬‫خصَصیت‬‫تشای‬َُ‫ًح‬‫تاصؿذى‬‫هشٍسگش‬‫دس‬‫ٌّگام‬‫کلیک‬‫سٍی‬‫لیٌک‬‫هَسد‬‫ًظش‬‫تکاس‬‫هی‬‫سٍد‬.
45

46. 46
Images

47. ‫ٍب‬ ‫صفحات‬ ‫دس‬ ‫ػکغ‬ ‫دادى‬ ‫قشاس‬ َُ‫ًح‬
‫تشای‬‫افضٍدى‬‫تصاٍیش‬ِ‫ت‬ِ‫صفح‬‫ٍب‬‫اص‬‫تشچؼة‬<img>‫هی‬‫تَاى‬ُ‫اػتفاد‬‫کشد‬.‫ایي‬‫تگ‬‫داسای‬
ِ‫هـخص‬‫ای‬‫تشای‬‫تؼییي‬‫هٌثغ‬‫تصَیش‬‫هی‬‫تاؿذ‬.
47

48. ‫تصَیش‬ ‫ّای‬ ِ‫هـخص‬
src:‫ًام‬ٍ‫ًـاًی‬‫هحل‬‫قشاسگیشی‬‫تصَیش‬‫سا‬‫هـخص‬‫هی‬‫کٌذ‬.src‫اص‬‫ػثاست‬Sourceِ‫گشفت‬ُ‫ؿذ‬
‫اػت‬.
alt:ِ‫چٌاًچ‬ِ‫ت‬‫ّش‬‫دلیل‬‫هشٍسگش‬‫قادس‬ِ‫ت‬‫ًوایؾ‬‫تصَیش‬،‫ًثاؿذ‬‫هتٌی‬‫سا‬ِ‫ک‬‫دس‬‫ایي‬ِ‫هـخص‬‫دسج‬
ُ‫ؿذ‬‫تشای‬‫تاصدیذ‬ُ‫کٌٌذ‬‫ًوایؾ‬‫هی‬‫دّذ‬.alt‫اص‬‫ػثاست‬alternativeِ‫گشفت‬ُ‫ؿذ‬‫اػت‬.‫تْتش‬‫اػت‬
‫ػثاستی‬ِ‫ک‬‫دس‬‫ایي‬ِ‫هـخص‬ِ‫ًَؿت‬‫هی‬،‫ؿَد‬‫هتٌاػة‬‫تا‬‫تصَیش‬‫تاؿذ‬.
48

49. ِ‫تَخ‬
‫تْتش‬‫اػت‬‫تشای‬‫تٌظین‬ُ‫اًذاص‬‫تصَیش‬‫خصَصیت‬‫ّای‬WidthٍHeight‫سا‬‫تکاس‬‫ًثشیذ‬ٍ‫تشای‬‫تٌظین‬
‫اص‬‫خصَصیت‬style attribute‫ایي‬‫ٍیظگی‬‫تٌظین‬‫ؿَد‬.
49

50. Animated Images
Htmlُ‫اخاص‬ُ‫اػتفاد‬‫اص‬‫ػکغ‬‫ّای‬gif.‫سا‬‫ًیض‬‫هی‬‫دّذ‬.
50

51. ‫تگ‬<picture>
‫ایي‬‫تگ‬‫یکی‬‫اص‬‫تگ‬‫ّای‬‫خذیذ‬HTML5‫اػت‬.‫تا‬‫کوک‬‫ایي‬‫تگ‬‫هی‬‫تَاًین‬‫چٌذیي‬‫هٌثغ‬‫ػکغ‬
‫هـخص‬‫کٌین‬ٍ‫تشای‬‫ّش‬‫کذام‬‫ؿشایظ‬‫تؼییي‬‫کٌین‬ِ‫ک‬‫کذام‬‫ػکغ‬ِ‫چ‬‫هَقغ‬‫ًوایؾ‬‫یاتذ‬.‫یؼٌی‬ِ‫ت‬
‫ؿوا‬‫اهکاى‬‫هی‬‫دّذ‬‫یک‬‫تصَیش‬ِ‫ت‬‫کلی‬‫هتفاٍت‬‫سا‬‫تش‬‫اػاع‬‫یکی‬‫اص‬‫ؿشایظ‬‫صیش‬‫لَد‬‫کٌیذ‬.
‫تش‬‫اػاع‬‫هذیاکَئشی‬‫ّا‬‫هثل‬‫استفاع‬‫هشٍسگش‬,‫ػشض‬‫هشٍسگش‬ٍ‫خْت‬ِ‫صفح‬(‫افقی‬‫یا‬‫ػوَدی‬)
‫تش‬‫اػاع‬‫تشاکن‬‫پیکؼلی‬
ِ‫ّو‬‫هشٍسگشّای‬‫خذیذ‬‫اص‬‫ایي‬‫تگ‬‫پـتیثاًی‬‫هی‬‫کٌٌذ‬.
51

52. ‫تگ‬<picture>
52

53. image-map is an image with clickable areas
53

54. ‫هثال‬
54

55. 55
Tables

56. Table
56

57. ‫خذٍل‬ ‫ایداد‬
57

58. ‫هثال‬
58

59. ‫هثال‬
59

60. 60
List

61. ‫لیؼت‬ ‫ایداد‬
‫تشای‬‫ایداد‬‫لیؼت‬ِ‫ػ‬‫ًَع‬‫تگ‬‫هختلف‬‫ٍخَد‬‫داسد‬ِ‫ک‬‫ّش‬‫یک‬‫کاستشد‬‫خاصی‬‫سا‬‫داسا‬‫هی‬‫تاؿذ‬.
‫لیؼت‬‫غیش‬‫تشتیثی‬
‫اص‬‫تگ‬<ul>ُ‫اػتفاد‬‫هی‬‫ؿَد‬.
‫لیؼت‬‫تشتیثی‬
‫اص‬‫تگ‬<ol>ُ‫اػتفاد‬‫هی‬‫ؿَد‬.
‫لیؼت‬‫تَضیحی‬
‫اص‬‫تگ‬<dl>ُ‫اػتفاد‬‫هی‬‫ؿَد‬.
61

62. ‫لیؼت‬ ‫ایداد‬
62

63. ‫لیؼت‬ ‫ّای‬ ‫آیتن‬ ‫گش‬ ًِ‫ًـا‬ ‫اًتخاب‬
63

64. ‫تَضیحی‬ ‫لیؼت‬
64

65. ِ‫ًکت‬
‫آیتن‬‫ّای‬‫لیؼت‬‫هی‬‫تَاًذ‬‫ػٌاصش‬‫دیگش‬html‫اص‬‫قثیل‬،‫تصاٍیش‬‫لیٌک‬ٍ...‫تاؿذ‬.
65

66. ‫افقی‬ ‫لیؼت‬(Horizontal Lists)
‫لیؼت‬‫ّای‬‫ایداد‬ُ‫ؿذ‬‫هی‬‫تَاًٌذ‬ِ‫ت‬‫کوک‬styleِ‫ت‬‫صَست‬‫افقی‬‫ًیض‬‫قشاس‬‫تگیشًذ‬.‫یکی‬‫اص‬
‫کاستشدّای‬‫ایي‬‫هَسد‬‫ایداد‬ٌَ‫ه‬‫دس‬‫ٍب‬‫ػایت‬‫هی‬‫تاؿذ‬.
66

67. ‫افقی‬ ‫لیؼت‬ ‫هثال‬
67

68. 68
Block and Inline Elements

69. Block and Inline Elements
‫تگ‬‫ّای‬html‫اص‬‫لحاػ‬‫حالت‬‫ًوایؾ‬‫تصَست‬Inline‫یا‬Block‫هی‬‫تاؿذ‬.‫ػٌاصش‬Inline‫تصَست‬
‫پیؾ‬‫فشض‬‫تاػث‬ِ‫ؿکؼت‬‫ؿذى‬‫خظ‬‫ًوی‬‫ؿًَذ‬‫ٍلی‬‫ػٌاصش‬block‫تاػث‬ِ‫ؿکؼت‬‫ؿذى‬‫خظ‬‫هی‬
‫ؿًَذ‬.
69

70. Block and Inline Elements
70

71. ‫تگ‬<div>
‫ػٌصش‬div‫اغلة‬ِ‫ت‬‫ػٌَاى‬‫یک‬ُ‫ًگْذاسًذ‬(container)‫تشای‬‫ػٌاصش‬‫دیگش‬‫تکاس‬‫هی‬‫سٍد‬.
71

72. ‫ػٌصش‬<span>
‫ایي‬‫ػٌصش‬‫اغلة‬ِ‫ت‬‫ػٌَاى‬‫یک‬ُ‫ًگْذاسًذ‬‫تشای‬‫هتي‬‫تکاس‬‫هی‬‫سٍد‬.‫ایي‬‫الواى‬‫ّواًٌذ‬‫یک‬ِ‫خؼث‬‫تشای‬
‫ّاػت‬‫هتي‬.‫دس‬‫ٍاقغ‬‫ایي‬‫الواى‬‫یک‬‫تخؾ‬‫اص‬‫هتي‬‫هَسد‬‫ًظش‬‫سا‬‫صیش‬‫پشچن‬‫خَد‬‫گیشد‬‫هی‬ٍ‫اػتایل‬ُ‫دلخَا‬
‫ؿوا‬‫سا‬‫تذاى‬‫دّذ‬‫هی‬.
72

73. DivٍSpan
73

74. 74
iframes

75. iframes
‫ایي‬‫ػٌصش‬ِ‫ت‬‫هٌظَس‬‫ًوایؾ‬‫یک‬ِ‫صفح‬‫ٍب‬‫دس‬‫داخل‬ِ‫صفح‬‫ٍتی‬‫دیگش‬‫تکاس‬‫هی‬‫سٍد‬.
75

76. ‫اص‬ ُ‫اػتفاد‬ َُ‫ًح‬iframe
76

77. iframe - Target for a Link
77

78. iframe - Target for a Link
78

79. 79
File Paths

80. ‫ّا‬ ‫فایل‬ ‫هؼیش‬HTML File Paths
80

81. ‫دس‬ ‫ّا‬ ‫فایل‬ ‫هؼیش‬HTML
81
‫هؼیش‬‫فایل‬‫هحل‬‫قشاسگیشی‬‫یک‬‫فایل‬‫سا‬ِ‫ک‬‫دس‬‫ٍب‬‫ػایت‬ُ‫اػتفاد‬ُ‫ؿذ‬‫اػت‬‫سا‬‫هـخص‬‫هی‬‫کٌذ‬.
‫هؼیش‬‫فایل‬‫تشای‬‫ایداد‬‫استثاط‬‫تا‬‫فایل‬‫ّای‬‫خاسخی‬‫صیش‬‫تکاس‬‫هی‬‫سٍد‬.
Web pages
Images
Style sheets
JavaScripts

82. ‫هغلق‬ ‫دّی‬ ‫آدسع‬Absolute File Paths
82
 An absolute file path is the full URL to an internet file:

83. ‫ًؼثی‬ ‫دّی‬ ‫آدسع‬Relative File Paths
83
‫ایي‬‫ًَع‬‫آدسع‬‫دّی‬ِ‫ت‬‫ایي‬‫صَست‬‫ػول‬‫هی‬‫کٌذ‬ِ‫ک‬ِ‫صفح‬html‫خاسی‬‫سا‬ِ‫ت‬‫ػٌَاى‬ِ‫سیـ‬‫دس‬‫ًظش‬‫هی‬
‫گیشد‬.ِ‫چٌاًچ‬‫تخَاّین‬ِ‫ت‬‫صفحات‬‫تا‬‫فایلی‬ِ‫ک‬ِ‫ک‬‫دس‬‫یک‬‫هحل‬(ِ‫پَؿ‬)‫قشاس‬‫داسًذ‬ُ‫اؿاس‬‫کٌین‬‫کافی‬‫اػت‬
‫تٌْا‬ِ‫ت‬‫ًام‬‫آى‬ِ‫صفح‬‫یا‬‫فایل‬‫سا‬‫رکشکٌین‬.‫اها‬‫اگش‬ِ‫صفح‬‫یا‬‫فایل‬‫هَسد‬‫دسخَاػت‬‫دس‬‫یک‬‫دایشکتَسی‬‫دس‬
‫ػغح‬‫پاییي‬‫تش‬‫قشاس‬ِ‫داؿت‬،‫تاؿذ‬‫تایذ‬‫ًام‬‫دایشکتَسی‬‫سا‬‫ًیض‬‫رکش‬‫کٌین‬.‫اگش‬ِ‫صفح‬‫یا‬‫فایل‬‫دس‬‫ػغح‬‫تاالتشی‬
‫قشاس‬ِ‫داؿت‬،‫تاؿذ‬‫تایذ‬‫تا‬ٍ‫د‬ِ‫ًقغ‬..ِ‫ت‬‫ػغح‬‫تاالتش‬ُ‫اؿاس‬‫ًوَد‬.

84. ‫ًؼثی‬ ‫دّی‬ ‫آدسع‬Relative File Paths
84

85. ‫دّی‬ ‫آدسع‬ ‫سٍؽ‬ ‫تْتشیي‬Best Practice
85
‫تْتشیي‬ٍ‫اصَلی‬‫تشیي‬‫سٍؽ‬‫دس‬‫آدسع‬،‫دّی‬ُ‫اػتفاد‬‫اص‬‫سٍؽ‬‫آدسع‬‫دّی‬‫ًؼثی‬‫هی‬‫تاؿذ‬.
 When using relative file paths, your web pages will not be bound to your
current base URL. All links will work on your own computer (localhost) as well
as on your current public domain and your future public domains.

86. 86
Head Elements

87. The HTML <head> Element
87
‫تگ‬headِ‫ت‬‫ػٌَاى‬‫یک‬ُ‫ًگْذاسًذ‬(container)‫تشای‬‫هتادیتا‬(metadata)‫هی‬‫تاؿذ‬.‫هتادیتا‬‫ّا‬ُ‫داد‬
‫ّایی‬‫دس‬‫هَسد‬‫ػٌذ‬html‫ایداد‬ُ‫ؿذ‬‫ّؼتٌذ‬.ِ‫الثت‬‫ایي‬‫هتا‬‫دیتاّا‬‫تَػظ‬‫هشٍگشّا‬‫ًوایؾ‬ُ‫داد‬‫ًوی‬‫ؿًَذ‬.
 metadata (data about data)
‫تگ‬‫ّای‬‫ایداد‬ُ‫کٌٌذ‬‫هتادیتا‬‫ػثاستٌذ‬‫اص‬:
<title>
<style>
<meta>
<link>
<script>
<base>

88. HTML head Elements
88

89. ‫تگ‬meta
89
‫هَتَسّای‬‫خؼت‬ٍ‫ًیض‬‫تشای‬ٌِ‫تْی‬‫ػاصی‬ٍ‫ػشػت‬‫تخـیذى‬ِ‫ت‬‫ػول‬‫خؼت‬،ٍ‫ی‬‫ػشی‬‫اػتاًذاسدّایی‬
‫سا‬‫تشای‬‫ػاصًذگاى‬‫ٍب‬‫ػایت‬‫ّا‬‫تؼشیف‬ُ‫کشد‬‫اًذ‬‫تا‬‫تا‬‫پیشٍی‬‫اص‬‫ایي‬،‫اػتاًذاسدّا‬‫هَتَسّای‬‫خؼت‬ٍ
‫ساحت‬‫تش‬‫تتَاًٌذ‬‫هغالة‬‫ٍب‬‫ػایت‬‫ّا‬‫سا‬‫خؼت‬ٍٍ‫اهتیاص‬‫تٌذی‬‫کٌٌذ‬.‫یکی‬‫اص‬‫هَاسدی‬ِ‫ک‬‫تاػث‬‫تْثَد‬
‫ٍضؼیت‬‫ػایت‬‫دس‬‫ًتایح‬‫خؼت‬ٍَ‫خ‬‫هی‬،‫ؿَد‬ُ‫اػتفاد‬‫اص‬‫تگ‬<meta>‫اػت‬.

90. ‫تگ‬meta
90
‫ایي‬،‫تگ‬‫اعالػاتی‬‫دس‬‫هَسد‬ِ‫صفح‬html‫هْیا‬‫هی‬‫کٌذ‬ِ‫ک‬‫هَتَسّای‬‫خؼت‬ٍ‫اص‬‫ایي‬‫اعالػات‬‫تشای‬
ِ‫دػت‬‫تٌذی‬‫صفحات‬‫ٍب‬‫ػایت‬‫ّا‬ُ‫اػتفاد‬‫هی‬‫کٌٌذ‬.‫ؿوا‬‫هی‬‫تَاًیذ‬‫دس‬‫ایي‬،‫تگ‬‫کلوات‬‫کلیذی‬ٍ
‫یا‬‫تَضیحاتی‬‫دس‬‫هَسد‬‫ٍب‬‫ػایت‬‫خَد‬‫قشاس‬‫دّیذ‬‫تا‬‫هَتَسّای‬‫خؼت‬ٍ‫تا‬ُ‫اػتفاد‬‫اص‬‫آى‬‫تتَاًٌذ‬
ِ‫صفح‬‫ؿوا‬‫سا‬ِ‫ت‬َ‫ًح‬‫تْتشی‬‫فْشػت‬‫کٌٌذ‬.

91. ‫تگ‬ ‫ػٌاصش‬meta
91

92. Viewport
92

93. 93
Forms

94. ‫ّا‬ ‫فشم‬HTML Forms
94
‫تگ‬<form>‫یک‬‫فشم‬‫سا‬‫تؼشیف‬‫هی‬‫کٌذ‬ِ‫ک‬‫اص‬‫آى‬‫تشای‬‫خوغ‬‫آٍسی‬‫ٍسٍدی‬‫ّای‬‫کاستش‬‫هی‬‫تَاى‬
ُ‫اػتفاد‬‫کشد‬.‫ػٌاصش‬‫فشم‬‫هَاسد‬‫هختلفی‬‫هاًٌذ‬text fields, checkboxes, radio buttons, submit
buttonsٍُ‫غیش‬‫ّؼتٌذ‬.

95. ‫خصَصیت‬Action‫تگ‬ ‫دس‬Form
95
‫آدسػی‬ِ‫ک‬‫دس‬‫خصَصیت‬action‫قشاس‬‫هی‬،‫گیشد‬‫تاػث‬‫هی‬‫ؿَد‬ِ‫ک‬‫اعالػات‬‫فشم‬‫پغ‬‫اص‬‫فـشدى‬ِ‫دکو‬
submitِ‫ت‬‫آى‬‫آدسع‬ُ‫فشػتاد‬‫ؿَد‬.
ِ‫ًکت‬:‫اگش‬‫خصَصیت‬actionِ‫ًَؿت‬،‫ًـَد‬‫اعالػات‬ِ‫ت‬ِ‫صفح‬‫خاسی‬ُ‫فشػتاد‬‫هی‬‫ؿَد‬.

96. ‫خصَصیت‬Method‫تگ‬ ‫دس‬Form
96
‫ایي‬‫خصَصیت‬‫تؼییي‬ُ‫کٌٌذ‬‫هتذ‬HTTP(GET‫یا‬POST)‫هَسد‬ُ‫اػتفاد‬‫دس‬‫اسػال‬ُ‫داد‬‫ّا‬‫تؼذ‬
‫اص‬‫کلیک‬ِ‫دکو‬submit‫اػت‬.

97. ‫هتذ‬GET
97
‫هتذ‬‫پیؾ‬‫فشض‬‫ٍقتی‬‫فشم‬submit‫هی‬،‫ؿَد‬GET‫هی‬‫تاؿذ‬.‫دس‬‫ایي‬‫هتذ‬ُ‫داد‬‫ّا‬‫قاتل‬ُ‫هـاّذ‬‫دس‬
‫فیلذ‬‫آدسع‬‫ّؼتٌذ‬.

98. ‫هتذ‬ ‫دس‬ ِ‫تَخ‬ ‫هَد‬ ‫ًکات‬GET
98

99. ‫هتذ‬POST
99
‫اص‬‫هتذ‬POST‫صهاًی‬ُ‫اػتفاد‬‫هی‬‫ؿَد‬ِ‫ک‬‫داد‬‫ّای‬‫اسػالی‬‫فشم‬‫هْن‬ٍ‫اعالػات‬‫ؿخصی‬‫هی‬‫تاؿٌذ‬.
‫ایي‬،‫هتذ‬ُ‫داد‬‫ّای‬submitُ‫ؿذ‬‫سا‬‫ٌّگام‬‫اسػال‬‫ًـاى‬‫ًوی‬‫دّذ‬.

100. ‫هتذ‬ ‫دس‬ ِ‫تَخ‬ ‫هَد‬ ‫ًکات‬POST
100

101. ‫ّای‬ ‫خاصیت‬form
101

102. ‫تگ‬<input>
102
‫تگ‬<input>‫هْوتشیي‬‫ػٌصش‬‫یک‬‫فشم‬‫اػت‬.‫ایي‬‫ػٌصش‬‫هی‬‫تَاًذ‬ِ‫ت‬‫حالت‬‫ّای‬‫هختلفی‬‫ًوایؾ‬ُ‫داد‬
‫ؿَد‬.

103. ‫خصَصیت‬Name
103
‫ّش‬‫فیلذ‬‫ٍسٍدی‬‫دس‬،‫فشم‬‫تایذ‬‫یک‬‫خصَصیت‬‫ًام‬ِ‫داؿت‬‫تاؿذ‬.‫اگش‬‫ایي‬‫خصَصیت‬ُ‫ًادیذ‬ِ‫گشفت‬
،‫ؿَد‬ُ‫داد‬‫ّای‬‫آى‬‫فیلذ‬‫ٍسٍدی‬‫اسػال‬‫ًخَاّذ‬‫ؿذ‬.

104. ‫هتي‬ ‫ٍسٍدی‬Text Input
104
‫کذ‬<input type="text">‫یک‬‫ٍسٍدی‬‫تک‬‫خغی‬‫تشای‬‫هتي‬‫ایداد‬‫هی‬‫کٌذ‬.

105. Radio Button Input
105
‫کذ‬<input type="radio">‫یک‬radio button‫سا‬‫تؼشیف‬‫هی‬‫کٌذ‬.radio button‫ّا‬
‫اهکاى‬‫اًتخاب‬‫یک‬ٌِ‫گضی‬‫اص‬‫تؼذادی‬‫هحذٍد‬ٌِ‫گضی‬‫سا‬‫فشاّن‬‫هی‬‫آٍسد‬.

106. ‫اًتخاتی‬ ‫لیؼت‬
106
‫تا‬‫ػٌصش‬<select>‫هی‬‫تَاى‬drop-down list‫ایداد‬‫کشد‬.

107. ‫اًتخاتی‬ ‫لیؼت‬
107

108. ‫اًتخاتی‬ ‫لیؼت‬
108

109. ‫ػٌصش‬<textarea>
109

110. ‫ػٌصش‬<datalist>
110
‫تگ‬< datalist >‫یک‬‫لیؼت‬‫اص‬ٌِ‫گضی‬‫ّای‬‫اص‬‫قثل‬‫تؼشیف‬ُ‫ؿذ‬‫تشای‬‫یک‬‫ػٌصش‬< input
>‫هـخص‬‫هی‬‫کٌذ‬.

111. ‫ػٌصش‬<button>
111

112. Submit Button
112
‫کذ‬<input type="submit">‫یک‬ِ‫دکو‬‫تشای‬‫تائیذ‬ُ‫داد‬‫ّای‬‫فشم‬ِ‫ت‬form-handler‫ایداد‬‫هی‬
‫کٌذ‬.

113. Reset Button
113

114. ‫تا‬ ‫فشم‬ ‫دادّای‬ ‫تٌذی‬ ٍُ‫گش‬<fieldset>
114
<fieldset>‫تشای‬ٍُ‫گش‬‫تٌذی‬ُ‫داد‬‫ّای‬‫هشتثظ‬‫دس‬‫یک‬‫فشم‬‫تکاس‬‫هی‬‫سٍد‬.ِ‫ک‬‫تا‬<legend>‫هی‬‫تَاى‬
‫تشای‬ٍُ‫گش‬‫ایداد‬ُ‫ؿذ‬‫ػٌَاًی‬‫ّن‬‫اًتخاب‬‫کشد‬.

115. Input Type Password
115

116. Input Type Reset
116

117. Input Type Checkbox
117

118. HTML5 Input Types
118
Input‫ّای‬‫خذیذ‬‫هؼشفی‬ُ‫ؿذ‬‫دس‬html5:
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
https://www.w3schools.com/html/html_form_input_types.asp

119. Input Type Color
119

120. Input Restrictions
120

121. 121
HTML Layouts

122. ‫خذیذ‬ ‫ػٌاصش‬HTML5
122
‫ػٌاصش‬‫خذیذی‬ِ‫ک‬‫دس‬ِ‫ًؼخ‬HTML5‫هؼشفی‬ُ‫ؿذ‬‫اًذ‬‫ػثاستٌذ‬‫اص‬:

123. API‫دس‬ ُ‫ؿذ‬ ‫هؼشفی‬ ‫ّای‬HTML5
123
 New HTML5API's (Application Programming Interfaces)

124. ُ‫ؿذ‬ ‫حزف‬ ‫ػٌاصش‬HTML5
124
‫ػٌاصش‬‫صیش‬‫دس‬ِ‫ًؼخ‬html4‫ٍخَد‬‫داؿتٌذ‬ِ‫ک‬‫دس‬ِ‫ًؼخ‬html5‫حزف‬ُ‫ؿذ‬‫اًذ‬.

125. ‫هؼٌایی‬ ‫ػٌاصش‬Semantic Elements
125
‫یک‬‫ػٌصش‬‫هؼٌایی‬ِ‫ت‬‫عَس‬‫ٍاضح‬‫خَد‬‫سا‬‫تشای‬‫هشٍسگش‬(browser)ٍِ‫تَػؼ‬ُ‫دٌّذ‬(developer)،
‫تَصیف‬‫هی‬‫کٌذ‬.

126. ‫هؼٌایی‬ ‫ػٌاصش‬ ‫اص‬ ‫هشٍسگشّا‬ ‫پـتیثاًی‬
126

127. ‫دس‬ ‫خذیذ‬ ‫هؼٌایی‬ ‫ػٌاصش‬HTML5
127
‫تؼیاسی‬‫اص‬‫ٍب‬‫ػایت‬‫ّا‬‫ؿاهل‬‫کذّایی‬ِ‫ت‬‫صَست‬‫صیش‬‫تشای‬‫تخؾ‬‫ّای‬‫هختلف‬ِ‫صفح‬‫ّؼتٌذ‬.
 <div id="nav">
 <div class="header">
 <div id="footer">
HTML5‫تشای‬‫تؼشیف‬‫قؼوت‬‫ّای‬‫هختلف‬ِ‫صفح‬‫ػٌصشّای‬‫خذیذ‬‫سا‬‫پیـٌْاد‬ُ‫داد‬‫اػت‬.

128. ‫صفحات‬ ‫تٌذی‬ ‫عشح‬ ‫ػٌاصش‬Layout Elements
128
‫ٍب‬‫ػایت‬‫ّا‬‫هحتَایـاى‬‫سا‬‫اغلة‬‫دس‬‫چٌذ‬‫ػتَى‬‫ًوایؾ‬‫هی‬‫دٌّذ‬(‫ّواًٌذ‬ِ‫هدل‬‫یا‬ِ‫ًـشی‬).HTML
5‫ػٌاصش‬‫هؼٌایی‬‫خذیذی‬‫سا‬ِ‫ک‬‫قؼوت‬‫ّای‬‫یک‬ِ‫صفح‬‫ٍب‬‫سا‬‫تؼشیف‬‫هی‬‫کٌٌذ‬‫هؼشفی‬ُ‫کشد‬‫اػت‬.

129. ‫دس‬ ‫خذیذ‬ ‫هؼٌایی‬ ‫ػٌاصش‬HTML5
129
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

130. ‫تش‬ ‫ٍب‬ ِ‫صفح‬ ‫ی‬ ‫تٌذی‬ ‫تلَک‬‫اػاع‬html5
130

131. HeaderٍFooter
131

132. ‫تگ‬ ‫کاستشد‬sectionٍarticle
132

133. ‫تگ‬nav
133

134. ‫تگ‬aside
134

135. ‫تگ‬<section>
135
‫ایي‬‫ػٌصش‬‫یک‬‫تخؾ‬‫سا‬‫دس‬‫ػٌذ‬‫تؼشیف‬‫هی‬‫کٌذ‬.‫یک‬ِ‫صفح‬‫ٍب‬‫هی‬‫تَاًذ‬ِ‫ت‬‫صَست‬‫ػادی‬ِ‫ت‬
‫تخؾ‬‫ّای‬ِ‫هقذه‬،‫هحتَا‬ٍ‫اعالػات‬‫تواع‬‫تقؼین‬‫ؿَد‬.
‫تؼشیف‬‫تخؾ‬‫عثق‬‫هؼتٌذات‬W3C's HTML5:
 "A section is a thematic grouping of content, typically with a heading."
‫اػتٌاد‬ ِ‫ت‬‫ٍب‬ ‫خْاًی‬ ‫کٌؼشػیَم‬<section>‫ؿشح‬‫تٌذی‬ ٍُ‫گش‬‫یک‬ ‫تا‬ ‫هؼوَال‬ ِ‫ک‬ ‫اػت‬ ‫هحتَیات‬
‫ّذیٌگ‬(‫ػٌَاى‬)‫سٍد‬ ‫هی‬ ‫کاس‬ ِ‫ت‬”.

136. ‫هثال‬
136

137. ‫تگ‬<article>
137
‫ایي‬‫ػٌصش‬‫هحتَای‬‫هؼتقل‬‫سا‬‫تؼییي‬‫هی‬‫کٌذ‬.‫اص‬‫تگ‬article‫تشای‬‫تؼییي‬‫یک‬ِ‫هقال‬ِ‫ک‬‫تا‬
‫هحتَیات‬‫ػایت‬‫هتفاٍت‬،‫تاؿذ‬ُ‫اػتفاد‬‫هی‬‫ؿَد‬.ًَِ‫ًو‬‫ّایی‬ِ‫ک‬‫ایي‬‫تگ‬‫تشای‬‫آًْا‬‫هی‬‫تَاًذ‬‫تکاس‬
‫سٍد‬‫ػثاستٌذ‬‫اص‬:
Forum post
Blog post
Newspaper article

138. ‫هثال‬
138

139. ‫تگ‬<article>
139
https://www.w3.org/TR/2014/REC-html5-
20141028/sections.html#the-article-element

140. ‫تشدى‬ ‫کاس‬ ِ‫ت‬ َ‫تَدست‬< article >‫دس‬< section >‫یا‬‫تالؼکغ؟‬
140
‫تگ‬< article >‫هی‬‫تَاى‬‫یک‬‫هحتَای‬‫هؼتقل‬‫تاؿذ‬.
‫تگ‬< section >‫تشای‬‫تقؼین‬‫تٌذی‬‫ػٌذ‬‫هی‬‫تاؿذ‬.
‫دس‬‫ایٌتشًت‬‫هی‬‫تَاى‬‫صفحاتی‬‫تا‬‫تگ‬‫ّای‬< section >ِ‫ک‬‫ؿاهل‬‫تگ‬‫ّایی‬‫اص‬< article>‫تاؿٌذ‬ٍ
‫ّویي‬‫عَس‬‫تگ‬‫ّای‬<article>ِ‫ک‬‫حاٍی‬‫تگ‬‫ّایی‬‫اص‬<section>‫پیذا‬‫کٌیذ‬.
ِ‫ت‬‫ػٌَاى‬‫هثال‬‫دس‬‫یک‬ِ‫سٍصًاه‬:ِ‫هقال‬‫ّای‬‫ٍسصؿی‬‫دس‬‫قؼوت‬‫ٍسصؽ‬ٍ‫یک‬‫تخؾ‬‫فٌی‬‫دس‬‫ّش‬ِ‫هقال‬ِ‫ت‬
‫کاس‬‫تشد‬.

141. ‫هثال‬
141

142. ‫ػٌصش‬<header>
142
‫ایي‬‫تگ‬‫یک‬‫ّذس‬‫سا‬‫تشای‬‫ػٌذ‬(document)‫یا‬‫تخؾ‬(section)‫تؼییي‬‫هی‬‫کٌذ‬.‫ّوچٌیي‬‫دس‬
‫یک‬‫ػٌذ‬‫هی‬‫تَاى‬‫اص‬‫چٌذیي‬‫تگ‬<header>ُ‫اػتفاد‬‫کشد‬.

143. ‫ػٌصش‬<footer>
143
‫ایي‬‫تگ‬‫تشای‬‫ایداد‬‫فَتش‬‫دس‬ِ‫صفح‬‫ٍب‬‫تکاس‬‫هی‬‫سٍد‬ِ‫ک‬ً‫ال‬َ‫هؼو‬‫ؿاهل‬‫اعالػاتی‬‫اص‬‫قثیل‬‫صیش‬‫اػت‬:
 author of the document
 copyright information
 links to terms of use
 contact information
 etc…

144. ‫هثال‬
144

145. ‫ػٌصش‬<nav>
145
‫دس‬‫ایي‬‫تگ‬‫لیٌک‬‫ّای‬‫داخلی‬‫یا‬‫خاسخی‬‫دس‬‫آى‬‫قشاس‬‫هی‬‫گیشًذ‬.

146. ‫هثال‬
146

147. ‫ػٌصش‬<aside>
147
‫ایي‬‫تگ‬‫تشای‬‫تؼشیف‬‫ػٌاصشی‬ِ‫ک‬‫دس‬sidebar‫قشاس‬‫هی‬‫گیشًذ‬‫تکاس‬‫هی‬‫سٍد‬.

148. ‫هثال‬
148

149. ‫ّای‬ ‫تگ‬<figure>ٍ<figcaption>
149

150. Why Semantic Elements?
150
 According to the W3C, a Semantic Web: "Allows data to be shared and reused
across applications, enterprises, and communities."

151. ‫هؼٌایی‬ ‫ّای‬ ‫تگ‬ ِ‫خالص‬
151

152. ‫ٍب‬ ‫دس‬ ‫ای‬ ًِ‫چٌذسػا‬HTML Multimedia
152
‫دس‬‫صفحات‬‫ٍب‬‫تا‬‫فایل‬‫ّای‬‫چٌذ‬ًِ‫سػا‬‫ای‬‫صیش‬ً‫ال‬َ‫هؼو‬‫ػشٍکاس‬‫داسین‬.
Sound
Music
Videos
Movies
Animations

153. Media Format
153

154. Media Format
154

155. Media Format
155

156. HTML5 Video
156
‫دس‬html5‫تگ‬<video>‫تشای‬‫قشاس‬‫گیشی‬‫فایل‬‫ٍیذئَیی‬‫دس‬ِ‫صفح‬‫ٍب‬‫هؼشفی‬ُ‫ؿذ‬‫اػت‬.

157. The HTML <video> Element
157

158. َ‫ٍیذئ‬ ‫خَدکاس‬ ‫پخؾ‬Autoplay
158
‫تشای‬‫پخؾ‬‫خَدکاس‬َ‫ٍیذئ‬‫تا‬‫لَد‬‫ؿذى‬ِ‫صفح‬‫ٍب‬‫هی‬‫تَاى‬‫اص‬‫خاصیت‬Autoplayُ‫اػتفاد‬‫کشد‬.

159. HTML Video - Browser Support
159
‫دس‬html5‫اص‬ِ‫ػ‬‫فشهت‬‫ٍیذئَیی‬MP4,WebM, Ogg‫پـتیثاًی‬‫هی‬‫ؿَد‬.

160. ‫تگ‬Audio
160

161. ‫تگ‬Audio
161
‫فشهت‬‫ّای‬‫صَتی‬‫پـتیثاًی‬ُ‫ؿذ‬‫دس‬html5‫ػثاستٌذ‬‫اص‬:
MP3
Wav
Ogg

162. HTML YouTube Videos
162
‫یکی‬‫اص‬ُ‫سا‬‫ّای‬‫خَب‬‫ًوایؾ‬َ‫ٍیذئ‬‫دس‬‫ٍب‬‫ػایت‬ُ‫اػتفاد‬‫اص‬youtube‫هی‬‫تاؿذ‬.‫ّش‬‫یک‬‫اص‬‫ٍیذئَّای‬
‫یَتیَب‬‫یک‬ِ‫ؿٌاػ‬‫ای‬‫داسد‬ِ‫ک‬‫هی‬‫تَاى‬‫اص‬‫آى‬‫تشای‬‫ًوایؾ‬‫ٍیذئَی‬‫هَسد‬‫ًظش‬‫دس‬‫ٍب‬‫ػایت‬‫خَد‬
ُ‫اػتفاد‬‫کشد‬.

163. ‫هثال‬
163

164. YouTube Autoplay
164
‫هی‬‫تَاى‬‫تشای‬‫تشای‬‫پخؾ‬‫خَدکاس‬‫ٍیذئَّا‬‫تا‬‫لَد‬‫ؿذى‬ِ‫صفح‬‫ٍب‬ِ‫ت‬‫پاساهتش‬autoplay‫هقذاس‬1
‫سا‬‫ًؼثت‬‫داد‬.ِ‫الثت‬‫ایي‬‫کاس‬ِ‫تَصی‬‫ًوی‬‫ؿَد‬.

165. ‫هثال‬
165

166. YouTube Controls
166

167. 167
The End