اسلاید شماره 2 HTML

1. ‫وب‬ ‫طراحی‬
Web Development
‫خدا‬ ‫نام‬ ‫به‬
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
❖HTML 5‫آخرین‬‫نسخه‬‫از‬‫این‬‫زبان‬‫نشانه‬‫گذاری‬‫است‬‫که‬‫حاوی‬‫امکانات‬‫جدیدی‬،‫است‬‫برخی‬‫ا‬‫ز‬
‫امکاناتی‬‫که‬‫در‬‫نسخه‬‫قبلی‬‫موجود‬‫بود‬‫در‬‫این‬‫نسخه‬‫بهبود‬‫یافته‬‫و‬‫همچنین‬API‫های‬‫اسکریپت‬
‫نویسی‬‫جدیدی‬‫نیز‬‫به‬‫آن‬‫اضافه‬‫شده‬‫است‬.‫عالوه‬‫بر‬،‫آن‬‫در‬‫طراحی‬‫این‬‫نسخه‬‫اصول‬‫پایه‬‫ای‬‫مد‬
‫نظر‬‫قرار‬‫گرفته‬‫تا‬‫اطمینان‬‫حاصل‬‫شود‬‫که‬‫این‬‫نسخه‬‫بر‬‫روی‬‫تمامی‬‫پلت‬‫فرم‬‫ها‬‫به‬‫خوبی‬‫کار‬
‫خواهد‬‫کرد‬‫و‬‫خطاهای‬‫برنامه‬‫نویسی‬‫را‬‫به‬‫خوبی‬‫و‬‫بدون‬‫مشکل‬‫مدیریت‬‫می‬‫کند‬.
5

6. HTML 5
❖‫مستندات‬HTML 5‫توسط‬‫دو‬‫گروه‬‫مختلف‬‫تدوین‬‫می‬‫شود‬‫و‬‫در‬‫دو‬‫نسخه‬‫ارائه‬‫می‬‫شود‬.
❖W3C(WorldWideWeb Consortium)
✓‫کنسرسیم‬‫جهانی‬‫وب‬
✓‫مستندات‬‫تهیه‬‫شده‬‫توسط‬‫این‬‫گروه‬‫را‬‫می‬‫توانید‬‫در‬‫آدرس‬http://dev.w3.org/html5/spec/‫بیابید‬.
✓28 October 2014.‫انتشاریافت‬.
❖WHATWG(Web Hypertext ApplicationTechnologyWorking Group)
✓Web Hypertext ApplicationTechnologyWorking Group
✓‫توسط‬‫افرادی‬‫از‬‫شرکت‬‫های‬Mozilla,Apple, Opera‫تشکیل‬‫شده‬‫است‬.
✓‫مستندات‬‫تهیه‬‫شده‬‫توسط‬‫این‬‫گروه‬‫را‬‫می‬‫توانید‬‫در‬‫آدرس‬http://www.whatwg.org/html/‫بیابید‬.
✓‫به‬‫این‬،‫سند‬‫استانداردهای‬‫زنده‬‫هم‬‫گفته‬‫می‬،‫شود‬‫زیرا‬‫به‬‫طور‬‫دائم‬‫در‬‫حال‬‫توسعه‬‫و‬‫تغییر‬‫است‬.
✓‫در‬‫سال‬2012‫منتشر‬‫شده‬‫و‬‫به‬‫طور‬‫پیوسته‬‫ادامه‬‫دارد‬.
6

7. ‫کدهای‬ ‫نوشتن‬ ‫ابزارهای‬HTML
❖‫ویرایشگرهای‬‫متنی‬(Text Editor)
✓‫در‬‫این‬‫نرم‬‫افزار‬‫ها‬‫کدهای‬html‫به‬‫صورت‬‫دستی‬‫نوشته‬‫می‬‫شود‬.
✓‫این‬‫ویرایشگرها‬‫حجم‬‫کمی‬‫اشغال‬‫می‬‫کنند‬.
✓‫امکاناتی‬‫چون‬AutoComplete‫را‬‫ندارند‬.
✓Notepad, Notpad++, Sublime
❖‫نرم‬‫افزارهای‬WYSIWIG
✓‫می‬‫توان‬‫از‬‫طریق‬‫واسط‬‫های‬‫گرافیکی‬‫کدهای‬html‫را‬‫ایجاد‬‫کرد‬.
✓NetBeans, PHP Storm,Adobe DreamWeaver
7

8. 8
HTMLTags

9. HTML Tags
❖‫برای‬‫نشان‬‫دادن‬‫هر‬‫المان‬‫در‬‫صفحه‬‫از‬‫تگ‬‫استفاده‬‫می‬‫شود‬.‫هر‬‫تگ‬‫دارای‬‫قسمت‬‫شر‬‫وع‬
(opening tag)‫و‬‫قسمت‬‫پایانی‬(closing tag)‫است‬.
❖‫تگ‬‫ها‬‫را‬‫می‬‫توان‬‫به‬‫دو‬‫گروه‬‫تقسیم‬‫کرد‬:
✓ContainerTag
❖‫تگ‬‫ها‬‫به‬‫صورت‬‫جفت‬(‫باز‬‫و‬‫بسته‬)‫می‬‫باشند‬.
✓StandaloneTag
❖‫تگ‬‫هایی‬‫که‬‫بصورت‬‫تکی‬‫بکار‬‫می‬‫روند‬.
<tagname> ‫برچسپ‬ ‫محتوای‬ </tagname>
9

10. ‫کوچک‬ ‫حروف‬ ‫صورت‬ ‫به‬ ‫ها‬ ‫تگ‬ ‫نوشتن‬
❖HTML‫نسبت‬‫به‬‫حروف‬‫کوچک‬‫و‬‫بزرگ‬‫حساس‬‫نیست‬.‫اما‬‫طبق‬‫نظر‬W3C‫توصیه‬‫می‬‫شود‬
‫در‬‫هنگام‬‫نوشتن‬‫تگ‬‫ها‬‫از‬‫حروف‬‫کوچک‬‫استفاده‬‫شود‬.
10

11. ‫سند‬ ‫ساختار‬HTML
11

12. ‫سند‬ ‫ساختار‬HTML
12

13. DOM(Document Object Model)
❖‫زمانی‬‫که‬‫یک‬‫صفحه‬‫ی‬‫وب‬‫بارگذاری‬‫می‬،‫شود‬‫مرورگر‬‫از‬‫آن‬،‫صفحه‬‫یک‬‫مدل‬DOM‫ایجاد‬‫می‬‫کند‬.‫مدل‬DOM
‫یک‬‫ساختار‬‫درختی‬‫از‬‫اشیاء‬‫موجود‬‫در‬‫صفحه‬HTML‫می‬‫سازد‬.‫این‬‫مدل‬‫ویژگی‬‫ها‬‫و‬‫متدهایی‬‫را‬‫برای‬‫دستیابی‬‫به‬
‫نود‬‫ها‬‫از‬‫طریق‬‫جاوا‬‫اسکریپت‬‫فراهم‬‫می‬‫کند‬.‫در‬‫واقع‬JavaScript‫با‬‫استفاده‬‫از‬‫مدل‬DOM،‫می‬‫تواند‬‫به‬‫تمام‬
‫عناصر‬‫یک‬‫صفحه‬HTML‫دسترسی‬‫داشته‬‫باشد‬.
13

14. ‫تگ‬<!DOCTYPE>
❖‫این‬‫تگ‬‫نوع‬‫سند‬html‫را‬‫مشخص‬‫می‬‫کند‬‫و‬‫به‬‫مرورگر‬‫می‬‫گوید‬‫که‬‫کدها‬‫با‬‫چه‬‫ورژنی‬‫از‬
html‫نوشته‬‫شده‬‫است‬.‫نحوه‬‫اعالن‬‫نوع‬‫سند‬‫در‬html 5‫به‬‫صورت‬‫زیر‬‫است‬.
14
HTML 4:

15. ‫تگ‬Head
15
❖‫تگ‬head‫به‬‫عنوان‬‫یک‬‫نگهدارنده‬(container)‫برای‬‫متادیتا‬(metadata)‫می‬‫باشد‬.‫متادیتا‬‫ها‬‫داده‬‫هایی‬
‫در‬‫مورد‬‫سند‬html‫ایجاد‬‫شده‬‫هستند‬.‫البته‬‫این‬‫متا‬‫دیتاها‬‫توسط‬‫مروگرها‬‫نمایش‬‫داده‬‫نمی‬‫شوند‬.
❖ metadata (data about data)
❖‫تگ‬‫های‬‫ایجاد‬‫کننده‬‫متادیتا‬‫عبارتند‬‫از‬:
❖<title>
❖<style>
❖<meta>
❖<link>
❖<script>
❖<base>

16. HTML head Elements
16

17. ‫تگ‬meta
17
❖‫موتورهای‬‫جست‬‫و‬‫نیز‬‫برای‬‫بهینه‬‫سازی‬‫و‬‫سرعت‬‫بخشیدن‬‫به‬‫عمل‬‫جست‬،‫و‬‫ی‬‫سری‬
‫استانداردهایی‬‫را‬‫برای‬‫سازندگان‬‫وب‬‫سایت‬‫ها‬‫تعریف‬‫کرده‬‫اند‬‫تا‬‫با‬‫پیروی‬‫از‬‫این‬
،‫استانداردها‬‫موتورهای‬‫جست‬‫و‬‫راحت‬‫تر‬‫بتوانند‬‫مطالب‬‫وب‬‫سایت‬‫ها‬‫را‬‫جست‬‫و‬‫و‬‫امتیاز‬
‫بندی‬‫کنند‬.‫یکی‬‫از‬‫مواردی‬‫که‬‫باعث‬‫بهبود‬‫وضعیت‬‫سایت‬‫در‬‫نتایج‬‫جست‬‫و‬‫جو‬‫می‬‫شو‬،‫د‬
‫استفاده‬‫از‬‫تگ‬<meta>‫است‬.‫این‬،‫تگ‬‫اطالعاتی‬‫در‬‫مورد‬‫صفحه‬html‫مهیا‬‫می‬‫کند‬‫که‬
‫موتورهای‬‫جست‬‫و‬‫از‬‫این‬‫اطالعات‬‫برای‬‫دسته‬‫بندی‬‫صفحات‬‫وب‬‫سایت‬‫ها‬‫استفاده‬‫می‬‫کن‬‫ند‬.

18. ‫تگ‬meta
18

19. Viewport
19

20. ‫تگ‬Body
20

21. ‫های‬ ‫تگ‬Headings
❖‫این‬‫تگ‬‫ها‬‫دارای‬‫شش‬‫سطح‬‫بوده‬‫که‬‫باعث‬‫درشت‬‫تر‬‫دیده‬‫شدن‬‫عنوان‬‫ها‬‫شده‬‫و‬‫استفاده‬
‫بهینه‬‫از‬‫مفهوم‬‫آنها‬‫باعث‬‫می‬‫شود‬‫میزان‬SEO‫افزایش‬‫یابد‬.
21

22. ‫پاراگراف‬ ‫ایجاد‬Paragraphs
❖‫برای‬‫ایجاد‬‫پاراگراف‬‫از‬‫تگ‬<p>‫استفاده‬‫می‬‫شود‬.‫این‬‫تگ‬‫دارای‬‫سطح‬‫بالک‬‫می‬‫باشد‬‫که‬‫باع‬‫ث‬
‫می‬‫شود‬‫پاراگراف‬‫ها‬‫زیر‬‫هم‬‫قرار‬‫بگیرند‬.
22

23. ‫متن‬ ‫بندی‬ ‫فرمت‬(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
23

24. ‫توضیحات‬(Comments)
❖‫به‬‫منظور‬‫اضافه‬‫کردن‬‫توضیحات‬‫برای‬‫افزایش‬‫خوانایی‬‫کد‬‫ها‬‫و‬‫مستند‬‫سازی‬‫می‬‫توان‬‫ا‬‫ز‬‫تگ‬
‫زیر‬‫استفاده‬‫کرد‬.
❖ <!--Write your comments here -->
24

25. ‫شرطی‬ ‫توضیحات‬(Conditional Comments)
❖‫توضیحات‬‫شرطی‬‫فقط‬‫توسط‬‫مرورگر‬Internet Explorer‫اجرا‬‫می‬‫شود‬.
25

26. ‫در‬ ‫لینک‬HTML(Links)
❖‫برای‬‫ایجاد‬‫پیوند‬(Hyperlink)‫در‬‫صفحات‬‫وب‬‫می‬‫توان‬‫از‬‫تگ‬a(‫مخفف‬‫عبارت‬anchor)‫استفاده‬
‫کرد‬‫و‬‫خصوصیت‬‫آن‬‫را‬‫تعیین‬‫نمود‬.
26

27. ‫عکس‬ ‫روی‬ ‫گذاری‬ ‫لینک‬
27

28. ‫ها‬ ‫لینک‬ ‫رنگ‬
❖‫است‬ ‫زیر‬ ‫بصورت‬ ‫مختلف‬ ‫حاالت‬ ‫در‬ ‫ها‬ ‫لینک‬ ‫رنگ‬ ‫فرض‬ ‫پیش‬ ‫صورت‬ ‫به‬.‫ا‬ ‫توان‬ ‫می‬ ‫که‬‫ین‬
‫خصوصیت‬ ‫کمک‬ ‫به‬ ‫را‬ ‫بندی‬ ‫رنگ‬style‫داد‬ ‫تغییر‬.
❖ An unvisited link is underlined and blue
❖ A visited link is underlined and purple
❖ An active link is underlined and red
28

29. ‫محلی‬ ‫لینک‬(Local Links)
❖‫برای‬‫پیوند‬‫به‬‫صفحه‬‫ای‬‫در‬‫وب‬‫سایت‬‫جاری‬‫می‬‫توان‬‫از‬‫ساختار‬‫زیر‬‫استفاده‬‫کرد‬.
29

30. ‫خصوصیت‬target‫تگ‬ ‫در‬<a>
❖‫این‬‫خصوصیت‬‫برای‬‫نحوه‬‫بازشدن‬‫مرورگر‬‫در‬‫هنگام‬‫کلیک‬‫روی‬‫لینک‬‫مورد‬‫نظر‬‫بکار‬‫می‬
‫رود‬.
30

31. ‫وب‬ ‫صفحات‬ ‫در‬ ‫عکس‬ ‫دادن‬ ‫قرار‬ ‫نحوه‬
❖‫برای‬‫افزودن‬‫تصاویر‬‫به‬‫صفحه‬‫وب‬‫از‬‫برچسب‬<img>‫می‬‫توان‬‫استفاده‬‫کرد‬.‫این‬‫تگ‬
‫دارای‬‫مشخصه‬‫ای‬‫برای‬‫تعیین‬‫منبع‬‫تصویر‬‫می‬‫باشد‬.
31

32. ‫تصویر‬ ‫های‬ ‫مشخصه‬
❖src:‫نام‬‫و‬‫نشانی‬‫محل‬‫قرارگیری‬‫تصویر‬‫را‬‫مشخص‬‫می‬‫کند‬.src‫از‬‫عبارت‬Source‫گرفته‬
‫شده‬‫است‬.
❖alt:‫چنانچه‬‫به‬‫هر‬‫دلیل‬‫مرورگر‬‫قادر‬‫به‬‫نمایش‬‫تصویر‬،‫نباشد‬‫متنی‬‫را‬‫که‬‫در‬‫این‬‫مش‬‫خصه‬
‫درج‬‫شده‬‫برای‬‫بازدید‬‫کننده‬‫نمایش‬‫می‬‫دهد‬.alt‫از‬‫عبارت‬alternative‫گرفته‬‫شده‬‫است‬.
‫بهتر‬‫است‬‫عبارتی‬‫که‬‫در‬‫این‬‫مشخصه‬‫نوشته‬‫می‬،‫شود‬‫متناسب‬‫با‬‫تصویر‬‫باشد‬.
32

33. ‫توجه‬
❖‫بهتر‬‫است‬‫برای‬‫تنظیم‬‫اندازه‬‫تصویر‬‫خصوصیت‬‫های‬Width‫و‬Height‫را‬‫بکار‬‫نبرید‬‫و‬‫برای‬
‫تنظیم‬‫از‬‫خصوصیت‬style attribute‫این‬‫ویژگی‬‫تنظیم‬‫شود‬.
33

34. Animated Images
❖Html‫اجازه‬‫استفاده‬‫از‬‫عکس‬‫های‬gif.‫را‬‫نیز‬‫می‬‫دهد‬.
34

35. ‫تگ‬<picture>
❖‫این‬‫تگ‬‫یکی‬‫از‬‫تگ‬‫های‬‫جدید‬HTML5‫است‬.‫با‬‫کمک‬‫این‬‫تگ‬‫می‬‫توانیم‬‫چندین‬‫منبع‬‫عکس‬
‫مشخص‬‫کنیم‬‫و‬‫برای‬‫هر‬‫کدام‬‫شرایط‬‫تعیین‬‫کنیم‬‫که‬‫کدام‬‫عکس‬‫چه‬‫موقع‬‫نمایش‬‫یابد‬.‫یعنی‬
‫به‬‫شما‬‫امکان‬‫می‬‫دهد‬‫یک‬‫تصویر‬‫به‬‫کلی‬‫متفاوت‬‫را‬‫بر‬‫اساس‬‫یکی‬‫از‬‫شرایط‬‫زیر‬‫لود‬‫ک‬‫نید‬.
✓‫بر‬‫اساس‬‫مدیاکوئری‬‫ها‬‫مثل‬‫ارتفاع‬‫مرورگر‬,‫عرض‬‫مرورگر‬‫و‬‫جهت‬‫صفحه‬(‫افقی‬‫یا‬‫عمودی‬)
✓‫بر‬‫اساس‬‫تراکم‬‫پیکسلی‬
❖‫همه‬‫مرورگرهای‬‫جدید‬‫از‬‫این‬‫تگ‬‫پشتیبانی‬‫می‬‫کنند‬.
35

36. ‫تگ‬<picture>
36

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

38. ‫مثال‬
38

39. ‫جدول‬ ‫ایجاد‬
39

40. ‫مثال‬
40

41. ‫مثال‬
41

42. ‫لیست‬ ‫ایجاد‬
❖‫برای‬‫ایجاد‬‫لیست‬‫سه‬‫نوع‬‫تگ‬‫مختلف‬‫وجود‬‫دارد‬‫که‬‫هر‬‫یک‬‫کاربرد‬‫خاصی‬‫را‬‫دارا‬‫می‬‫با‬‫شد‬.
❖‫لیست‬‫غیر‬‫ترتیبی‬
✓‫از‬‫تگ‬<ul>‫استفاده‬‫می‬‫شود‬.
❖‫لیست‬‫ترتیبی‬
✓‫از‬‫تگ‬<ol>‫استفاده‬‫می‬‫شود‬.
42

43. ‫لیست‬ ‫های‬ ‫آیتم‬ ‫گر‬ ‫نشانه‬ ‫انتخاب‬
43

44. ‫افقی‬ ‫لیست‬(Horizontal Lists)
❖‫لیست‬‫های‬‫ایجاد‬‫شده‬‫می‬‫توانند‬‫به‬‫کمک‬style‫به‬‫صورت‬‫افقی‬‫نیز‬‫قرار‬‫بگیرند‬.‫یکی‬‫از‬
‫کاربردهای‬‫این‬‫مورد‬‫ایجاد‬‫منو‬‫در‬‫وب‬‫سایت‬‫می‬‫باشد‬.
44

45. Block and Inline Elements
❖‫تگ‬‫های‬html‫از‬‫لحاظ‬‫حالت‬‫نمایش‬‫بصورت‬Inline‫یا‬Block‫می‬‫باشد‬.‫عناصر‬Inline‫بصورت‬
‫پیش‬‫فرض‬‫باعث‬‫شکسته‬‫شدن‬‫خط‬‫نمی‬‫شوند‬‫ولی‬‫عناصر‬block‫باعث‬‫شکسته‬‫شدن‬‫خط‬
‫می‬‫شوند‬.
45

46. ‫تگ‬<div>
❖‫عنصر‬div‫اغلب‬‫به‬‫عنوان‬‫یک‬‫نگهدارنده‬(container)‫برای‬‫عناصر‬‫دیگر‬‫بکار‬‫می‬‫رود‬.
46

47. ‫عنصر‬<span>
❖‫این‬‫عنصر‬‫اغلب‬‫به‬‫عنوان‬‫یک‬‫نگهدارنده‬‫برای‬‫متن‬‫بکار‬‫می‬‫رود‬.‫این‬‫المان‬‫همانند‬‫یک‬‫جع‬‫به‬
‫برای‬‫هاست‬‫متن‬.‫در‬‫واقع‬‫این‬‫المان‬‫یک‬‫بخش‬‫از‬‫متن‬‫مورد‬‫نظر‬‫را‬‫زیر‬‫پرچم‬‫خود‬‫گیرد‬‫می‬‫و‬
‫استایل‬‫دلخواه‬‫شما‬‫را‬‫بدان‬‫دهد‬‫می‬.
47

48. Div‫و‬Span
48

49. iframes
❖‫این‬‫عنصر‬‫به‬‫منظور‬‫نمایش‬‫یک‬‫صفحه‬‫وب‬‫در‬‫داخل‬‫صفحه‬‫وبی‬‫دیگر‬‫بکار‬‫می‬‫رود‬.
49

50. ‫از‬ ‫استفاده‬ ‫نحوه‬iframe
50

51. iframe - Target for a Link
51

52. ‫ها‬ ‫فایل‬ ‫مسیر‬
52

53. ‫مطلق‬ ‫دهی‬ ‫آدرس‬(Absolute File Paths)
53
❖ An absolute file path is the full URL to an internet file:

54. ‫نسبی‬ ‫دهی‬ ‫آدرس‬Relative File Paths
54
❖‫این‬‫نوع‬‫آدرس‬‫دهی‬‫به‬‫این‬‫صورت‬‫عمل‬‫می‬‫کند‬‫که‬‫صفحه‬html‫جاری‬‫را‬‫به‬‫عنوان‬‫ریشه‬‫در‬‫نظر‬‫می‬
‫گیرد‬.‫چنانچه‬‫بخواهیم‬‫به‬‫صفحات‬‫با‬‫فایلی‬‫که‬‫که‬‫در‬‫یک‬‫محل‬(‫پوشه‬)‫قرار‬‫دارند‬‫اشاره‬‫کنی‬‫م‬‫کافی‬
‫است‬‫تنها‬‫به‬‫نام‬‫آن‬‫صفحه‬‫یا‬‫فایل‬‫را‬‫ذکرکنیم‬.‫اما‬‫اگر‬‫صفحه‬‫یا‬‫فایل‬‫مورد‬‫درخواست‬‫در‬‫یک‬
‫دایرکتوری‬‫در‬‫سطح‬‫پایین‬‫تر‬‫قرار‬‫داشته‬،‫باشد‬‫باید‬‫نام‬‫دایرکتوری‬‫را‬‫نیز‬‫ذکر‬‫کنیم‬.‫اگ‬‫ر‬‫صفحه‬‫یا‬
‫فایل‬‫در‬‫سطح‬‫باالتری‬‫قرار‬‫داشته‬،‫باشد‬‫باید‬‫با‬‫دو‬‫نقطه‬..‫به‬‫سطح‬‫باالتر‬‫اشاره‬‫نمود‬.

55. ‫نسبی‬ ‫دهی‬ ‫آدرس‬(Relative File Paths)
55

56. ‫دهی‬ ‫آدرس‬ ‫روش‬ ‫بهترین‬(Best Practice)
56
❖‫بهترین‬‫و‬‫اصولی‬‫ترین‬‫روش‬‫در‬‫آدرس‬،‫دهی‬‫استفاده‬‫از‬‫روش‬‫آدرس‬‫دهی‬‫نسبی‬‫می‬
‫باشد‬.

57. ‫ها‬ ‫فرم‬(Forms)
57
❖‫تگ‬<form>‫یک‬‫فرم‬‫را‬‫تعریف‬‫می‬‫کند‬‫که‬‫از‬‫آن‬‫برای‬‫جمع‬‫آوری‬‫ورودی‬‫های‬‫کاربر‬‫می‬‫توان‬
‫استفاده‬‫کرد‬.‫عناصر‬‫فرم‬‫موارد‬‫مختلفی‬‫مانند‬text fields, checkboxes, radio buttons, submit
buttons‫و‬‫غیره‬‫هستند‬.

58. ‫خصوصیت‬Action‫تگ‬ ‫در‬Form
58
❖‫آدرسی‬‫که‬‫در‬‫خصوصیت‬action‫قرار‬‫می‬،‫گیرد‬‫باعث‬‫می‬‫شود‬‫که‬‫اطالعات‬‫فرم‬‫پس‬‫از‬‫فشردن‬
‫دکمه‬submit‫به‬‫آن‬‫آدرس‬‫فرستاده‬‫شود‬.
❖‫نکته‬:‫اگر‬‫خصوصیت‬action‫نوشته‬،‫نشود‬‫اطالعات‬‫به‬‫صفحه‬‫جاری‬‫فرستاده‬‫می‬‫شود‬.

59. ‫خصوصیت‬Method‫تگ‬ ‫در‬Form
59
❖‫این‬‫خصوصیت‬‫تعیین‬‫کننده‬‫متد‬HTTP(GET‫یا‬POST)‫مورد‬‫استفاده‬‫در‬‫ارسال‬‫داده‬‫ها‬
‫بعد‬‫از‬‫کلیک‬‫دکمه‬submit‫است‬.

60. ‫متد‬GET
60
❖‫متد‬‫پیش‬‫فرض‬‫وقتی‬‫فرم‬submit‫می‬،‫شود‬GET‫می‬‫باشد‬.‫در‬‫این‬‫متد‬‫داده‬‫ها‬‫قابل‬‫مشاهده‬
‫در‬‫فیلد‬‫آدرس‬‫هستند‬.

61. ‫متد‬ ‫در‬ ‫توجه‬ ‫مود‬ ‫نکات‬GET
61

62. ‫متد‬POST
62
❖‫از‬‫متد‬POST‫زمانی‬‫استفاده‬‫می‬‫شود‬‫که‬‫داد‬‫های‬‫ارسالی‬‫فرم‬‫مهم‬‫و‬‫اطالعات‬‫شخصی‬‫می‬
‫باشند‬.‫این‬،‫متد‬‫داده‬‫های‬submit‫شده‬‫را‬‫هنگام‬‫ارسال‬‫نشان‬‫نمی‬‫دهد‬.

63. ‫متد‬ ‫در‬ ‫توجه‬ ‫مود‬ ‫نکات‬POST
63

64. ‫های‬ ‫خاصیت‬form
64

65. ‫تگ‬<input>
65
❖‫تگ‬<input>‫مهمترین‬‫عنصر‬‫یک‬‫فرم‬‫است‬.‫این‬‫عنصر‬‫می‬‫تواند‬‫به‬‫حالت‬‫های‬‫مختلفی‬‫نمای‬‫ش‬
‫داده‬‫شود‬.

66. ‫خصوصیت‬Name
66
❖‫هر‬‫فیلد‬‫ورودی‬‫در‬،‫فرم‬‫باید‬‫یک‬‫خصوصیت‬‫نام‬‫داشته‬‫باشد‬.‫اگر‬‫این‬‫خصوصیت‬‫ناد‬‫یده‬
‫گرفته‬،‫شود‬‫داده‬‫های‬‫آن‬‫فیلد‬‫ورودی‬‫ارسال‬‫نخواهد‬‫شد‬.

67. ‫متن‬ ‫ورودی‬Text Input
67
❖‫کد‬<input type="text">‫یک‬‫ورودی‬‫تک‬‫خطی‬‫برای‬‫متن‬‫ایجاد‬‫می‬‫کند‬.

68. Radio Button Input
68
❖‫کد‬<input type="radio">‫یک‬radio button‫را‬‫تعریف‬‫می‬‫کند‬.radio button‫ها‬‫امکان‬
‫انتخاب‬‫یک‬‫گزینه‬‫از‬‫تعدادی‬‫محدود‬‫گزینه‬‫را‬‫فراهم‬‫می‬‫آورد‬.

69. ‫انتخابی‬ ‫لیست‬
69
❖‫با‬‫عنصر‬<select>‫می‬‫توان‬drop-down list‫ایجاد‬‫کرد‬.

70. ‫انتخابی‬ ‫لیست‬
70

71. ‫انتخابی‬ ‫لیست‬
71

72. ‫عنصر‬<textarea>
72

73. ‫عنصر‬<datalist>
73
❖‫تگ‬< datalist >‫یک‬‫لیست‬‫از‬‫گزینه‬‫های‬‫از‬‫قبل‬‫تعریف‬‫شده‬‫برای‬‫یک‬‫عنصر‬< input
>‫مشخص‬‫می‬‫کند‬.

74. ‫عنصر‬<button>
74

75. Submit Button
75
❖‫کد‬<input type="submit">‫یک‬‫دکمه‬‫برای‬‫تائید‬‫داده‬‫های‬‫فرم‬‫به‬form-handler‫ایجاد‬‫می‬
‫کند‬.

76. Reset Button
76

77. ‫با‬ ‫فرم‬ ‫دادهای‬ ‫بندی‬ ‫گروه‬<fieldset>
77
❖<fieldset>‫برای‬‫گروه‬‫بندی‬‫داده‬‫های‬‫مرتبط‬‫در‬‫یک‬‫فرم‬‫بکار‬‫می‬‫رود‬.‫که‬‫با‬<legend>‫می‬‫توان‬
‫برای‬‫گروه‬‫ایجاد‬‫شده‬‫عنوانی‬‫هم‬‫انتخاب‬‫کرد‬.

78. Input Type Password
78

79. Input Type Reset
79

80. Input Type Checkbox
80

81. HTML5 Input Types
81
❖Input‫های‬‫جدید‬‫معرفی‬‫شده‬‫در‬html5:
❖color
❖date
❖datetime-local
❖email
❖month
❖number
❖range
❖search
❖tel
❖time
❖url
❖week
https://www.w3schools.com/html/html_form_i
nput_types.asp

82. Input Type Color
82

83. Input Restrictions
83

84. 84
HTML Layouts

85. ‫جدید‬ ‫عناصر‬HTML5
85
❖‫عناصر‬‫جدیدی‬‫که‬‫در‬‫نسخه‬HTML5‫معرفی‬‫شده‬‫اند‬‫عبارتند‬‫از‬:

86. API‫در‬ ‫شده‬ ‫معرفی‬ ‫های‬HTML5
86
❖ New HTML5API's (Application Programming Interfaces)

87. ‫شده‬ ‫حذف‬ ‫عناصر‬HTML5
87
❖‫عناصر‬‫زیر‬‫در‬‫نسخه‬html4‫وجود‬‫داشتند‬‫که‬‫در‬‫نسخه‬html5‫حذف‬‫شده‬‫اند‬.

88. ‫معنایی‬ ‫عناصر‬Semantic Elements
88
❖‫یک‬‫عنصر‬‫معنایی‬‫به‬‫طور‬‫واضح‬‫خود‬‫را‬‫برای‬‫مرورگر‬(browser)‫و‬‫توسعه‬‫دهنده‬
(developer)،‫توصیف‬‫می‬‫کند‬.

89. ‫معنایی‬ ‫عناصر‬ ‫از‬ ‫مرورگرها‬ ‫پشتیبانی‬
89

90. ‫در‬ ‫جدید‬ ‫معنایی‬ ‫عناصر‬HTML5
90
❖‫بسیاری‬‫از‬‫وب‬‫سایت‬‫ها‬‫شامل‬‫کدهایی‬‫به‬‫صورت‬‫زیر‬‫برای‬‫بخش‬‫های‬‫مختلف‬‫صفحه‬
‫هستند‬.
❖ <div id="nav">
❖ <div class="header">
❖ <div id="footer">
❖HTML5‫برای‬‫تعریف‬‫قسمت‬‫های‬‫مختلف‬‫صفحه‬‫عنصرهای‬‫جدید‬‫را‬‫پیشنهاد‬‫داده‬‫است‬.

91. ‫صفحات‬ ‫بندی‬ ‫طرح‬ ‫عناصر‬Layout Elements
91
❖‫وب‬‫سایت‬‫ها‬‫محتوایشان‬‫را‬‫اغلب‬‫در‬‫چند‬‫ستون‬‫نمایش‬‫می‬‫دهند‬(‫همانند‬‫مجله‬‫یا‬‫نشریه‬).
HTML 5‫عناصر‬‫معنایی‬‫جدیدی‬‫را‬‫که‬‫قسمت‬‫های‬‫یک‬‫صفحه‬‫وب‬‫را‬‫تعریف‬‫می‬‫کنند‬‫معرفی‬
‫کرده‬‫است‬.

92. ‫اساس‬ ‫بر‬ ‫وب‬ ‫صفحه‬ ‫ی‬ ‫بندی‬ ‫بلوک‬html5
92

93. Header‫و‬Footer
93

94. ‫تگ‬ ‫کاربرد‬section‫و‬article
94

95. ‫تگ‬nav
95

96. ‫تگ‬aside
96

97. ‫تگ‬<section>
97
❖‫این‬‫عنصر‬‫یک‬‫بخش‬‫را‬‫در‬‫سند‬‫تعریف‬‫می‬‫کند‬.‫یک‬‫صفحه‬‫وب‬‫می‬‫تواند‬‫به‬‫صورت‬‫عا‬‫دی‬‫به‬
‫بخش‬‫های‬‫مقدمه‬،‫محتوا‬‫و‬‫اطالعات‬‫تماس‬‫تقسیم‬‫شود‬.
❖‫تعریف‬‫بخش‬‫طبق‬‫مستندات‬W3C's HTML5:
❖ "A section is a thematic grouping of content, typically with a heading."
‫استناد‬ ‫به‬‫وب‬ ‫جهانی‬ ‫کنسرسیوم‬<section>‫یک‬ ‫با‬ ‫معموال‬ ‫که‬ ‫است‬ ‫محتویات‬ ‫بندی‬ ‫گروه‬ ‫شرح‬
‫هدینگ‬(‫عنوان‬)‫رود‬ ‫می‬ ‫کار‬ ‫به‬”.

98. ‫تگ‬<article>
98
❖‫این‬‫عنصر‬‫محتوای‬‫مستقل‬‫را‬‫تعیین‬‫می‬‫کند‬.‫از‬‫تگ‬article‫برای‬‫تعیین‬‫یک‬‫مقاله‬‫که‬‫با‬
‫محتویات‬‫سایت‬‫متفاوت‬،‫باشد‬‫استفاده‬‫می‬‫شود‬.‫نمونه‬‫هایی‬‫که‬‫این‬‫تگ‬‫برای‬‫آنه‬‫ا‬‫می‬‫تواند‬
‫بکار‬‫رود‬‫عبارتند‬‫از‬:
✓Forum post
✓Blog post
✓Newspaper article

99. ‫عنصر‬<footer>
99
❖‫این‬‫تگ‬‫برای‬‫ایجاد‬‫فوتر‬‫در‬‫صفحه‬‫وب‬‫بکار‬‫می‬‫رود‬‫که‬ً‫ال‬‫معمو‬‫شامل‬‫اطالعاتی‬‫از‬‫قبی‬‫ل‬‫زیر‬
‫است‬:
❖ author of the document
❖ copyright information
❖ links to terms of use
❖ contact information
❖ etc…

100. ‫های‬ ‫تگ‬<figure>‫و‬<figcaption>
100

101. ‫معنایی‬ ‫های‬ ‫تگ‬ ‫خالصه‬
101

102. ‫وب‬ ‫در‬ ‫ای‬ ‫چندرسانه‬HTML Multimedia
102
❖‫در‬‫صفحات‬‫وب‬‫با‬‫فایل‬‫های‬‫چند‬‫رسانه‬‫ای‬‫زیر‬ً‫ال‬‫معمو‬‫سروکار‬‫داریم‬.
✓Sound
✓Music
✓Videos
✓Movies
✓Animations

103. Media Format
103

104. Media Format
104

105. Media Format
105

106. HTML5 Video
106
❖‫در‬html5‫تگ‬<video>‫برای‬‫قرار‬‫گیری‬‫فایل‬‫ویدئویی‬‫در‬‫صفحه‬‫وب‬‫معرفی‬‫شده‬‫است‬.

107. The HTML <video> Element
107

108. ‫ویدئو‬ ‫خودکار‬ ‫پخش‬Autoplay
108
❖‫برای‬‫پخش‬‫خودکار‬‫ویدئو‬‫با‬‫لود‬‫شدن‬‫صفحه‬‫وب‬‫می‬‫توان‬‫از‬‫خاصیت‬Autoplay‫استفاده‬
‫کرد‬.

109. HTML Video - Browser Support
109
❖‫در‬html5‫از‬‫سه‬‫فرمت‬‫ویدئویی‬MP4,WebM, Ogg‫پشتیبانی‬‫می‬‫شود‬.

110. ‫تگ‬Audio
110

111. ‫تگ‬Audio
111
❖‫فرمت‬‫های‬‫صوتی‬‫پشتیبانی‬‫شده‬‫در‬html5‫عبارتند‬‫از‬:
✓MP3
✓Wav
✓Ogg

112. HTML YouTube Videos
112
❖‫یکی‬‫از‬‫راه‬‫های‬‫خوب‬‫نمایش‬‫ویدئو‬‫در‬‫وب‬‫سایت‬‫استفاده‬‫از‬youtube‫می‬‫باشد‬.‫هر‬‫یک‬‫از‬
‫ویدئوهای‬‫یوتیوب‬‫یک‬‫شناسه‬‫ای‬‫دارد‬‫که‬‫می‬‫توان‬‫از‬‫آن‬‫برای‬‫نمایش‬‫ویدئوی‬‫مورد‬‫نظر‬‫در‬‫و‬‫ب‬
‫سایت‬‫خود‬‫استفاده‬‫کرد‬.

113. ‫مثال‬
113

114. YouTube Autoplay
114
❖‫می‬‫توان‬‫برای‬‫برای‬‫پخش‬‫خودکار‬‫ویدئوها‬‫با‬‫لود‬‫شدن‬‫صفحه‬‫وب‬‫به‬‫پارامتر‬autoplay
‫مقدار‬1‫را‬‫نسبت‬‫داد‬.‫البته‬‫این‬‫کار‬‫توصیه‬‫نمی‬‫شود‬.

115. ‫مثال‬
115

116. YouTube Controls
116

117. ‫انتظار‬ ‫مورد‬ ‫های‬ ‫فعالیت‬
117
❖‫طی‬‫کردن‬‫دوره‬HTML‫سایت‬‫یا‬‫اپلیکیشن‬Solo Learn
❖‫آزمون‬‫سایت‬W3Schools

118. 118
The End