دوره آموزشی طراحی وب ویژه استخدام

100 %
0 %
Information about دوره آموزشی طراحی وب ویژه استخدام

Published on September 18, 2017

Author: alireza-karami

Source: slideshare.net

1. ‫استخدام‬ ‫ویژه‬ ‫وب‬ ‫طراحی‬ ‫دوره‬ ‫مدرس‬:‫کرمی‬ ‫علیرضا‬ ‫اطالعات‬ ‫فناوری‬ ‫مدیریت‬ ‫ارشد‬ ‫کارشناس‬ ‫تدوین‬ ‫سال‬1390 ‫صفحه‬1

2. ‫صفحه‬2

3. ‫اول‬ ‫بخش‬ HTML & HTML5 ‫صفحه‬3

4. ‫وب‬ ‫مرورگرهای‬(Web Browsers) ‫مرورگرها‬‫نرم‬‫افزارهایی‬‫بر‬‫روی‬‫کامپیوتر‬‫کالینت‬‫می‬‫باشند‬‫که‬‫وظیفه‬‫آنها‬‫برقراری‬‫ارتباط‬‫با‬‫سرور‬‫و‬‫نمایش‬‫صفحات‬‫وب‬‫می‬ ‫باشد‬.‫از‬‫معروف‬‫ترین‬‫مرورگرها‬‫می‬‫توان‬‫به‬Chrome(‫کروم‬)‫از‬‫شرکت‬،‫گوگل‬Firefox(‫فایر‬‫فاکس‬)‫از‬‫شرکت‬،‫موزیال‬ Opera(‫اپرا‬)‫از‬‫شرکت‬،‫اپرا‬Safari(‫سافاری‬)‫از‬‫شرکت‬‫اپل‬‫و‬Internet Explorer(‫اینترنت‬‫اکسپلورر‬)‫از‬‫شرکت‬ ‫مایکروسافت‬‫اشاره‬‫کرد‬.‫هدف‬‫اصلی‬‫مرورگرها‬‫خواندن‬‫کدهای‬HTML‫ونمایش‬‫آنها‬‫به‬‫عنوان‬‫یک‬‫صفحه‬‫وب‬‫می‬‫باشد‬.‫الزم‬‫به‬ ‫ذکر‬‫است‬‫که‬‫مرورگرها‬‫تگ‬‫های‬HTML‫را‬‫نشان‬‫نمی‬‫دهند‬‫بلکه‬‫از‬‫تگ‬‫ها‬‫برای‬‫تفسیر‬‫ونمایش‬‫صفحات‬‫وب‬‫استفاده‬‫می‬‫کنند‬. ‫صفحه‬4

5. ‫زبان‬ ‫آموزش‬HTML HTML‫چیست‬‫؟‬ •HTML‫زبانی‬‫برای‬‫توصیف‬‫صفحات‬‫وب‬‫وی‬‫باشد‬. •HTML‫مخفف‬Hyper Text Markup Language‫یا‬‫همان‬‫زبان‬‫نشانه‬‫گذاری‬‫ابرمتن‬‫ها‬‫می‬‫باشد‬. •‫یک‬‫زبان‬‫نشانه‬‫گذاری‬‫مجموعه‬‫ای‬‫از‬‫تگ‬‫های‬‫نشانه‬‫گذاری‬‫می‬‫باشد‬. •‫تگها‬‫یا‬‫برچسب‬‫ها‬‫جهت‬‫توصیف‬‫محتوای‬‫اسناد‬‫استفاده‬‫می‬‫شوند‬. •‫اسناد‬HTML‫شامل‬‫تگ‬‫های‬HTML‫و‬‫متون‬‫ساده‬‫می‬‫باشند‬. •‫اسناد‬HTML‫صفحات‬‫وب‬‫نیز‬‫نامیده‬‫می‬‫شوند‬. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫صفحه‬5

6. ‫های‬ ‫تگ‬html(HTML Tags) ‫تگ‬‫های‬‫نشانه‬‫گذاری‬HTML‫معموال‬‫تگ‬‫های‬HTML‫نامیده‬‫می‬‫شوند‬. ‫تگ‬‫های‬HTML‫معموال‬‫کلمات‬‫کلیدی‬‫هستند‬‫که‬‫بین‬<…….>‫قرار‬‫می‬‫گیرند‬. ‫تگ‬‫های‬HTML‫معموال‬‫به‬‫صورت‬‫جفت‬‫می‬‫باشند‬<b> </b>‫که‬‫اولی‬‫تگ‬‫ابتدایی‬‫و‬‫آخری‬‫تگ‬‫انتهایی‬‫نامیده‬‫می‬‫شود‬. ‫تگ‬‫انتهایی‬‫شبیه‬‫به‬‫تگ‬‫ابتدای‬‫بوده‬‫با‬‫این‬‫تفاوت‬‫که‬‫در‬‫ابتدای‬‫آن‬‫یک‬‫عالمت‬/‫می‬‫آید‬. <tagname>content</tagname> ‫عناصر‬html(HTML Elements) ‫به‬‫مجموع‬‫تگ‬‫ابتدایی‬‫و‬‫انتهایی‬‫و‬‫هر‬‫آنچه‬‫درون‬‫آن‬‫قرار‬‫می‬‫گیرد‬‫یک‬‫عنصر‬HTML‫گفته‬‫می‬‫شود‬. <p>This is a paragraph.</p> ‫صفحه‬6

7. ‫صفحات‬ ‫ساختار‬HTML ‫صفحه‬‫وب‬‫شما‬‫بین‬‫تگهای‬<html>‫و‬</html>‫قرار‬‫می‬‫گیرد‬. ‫هدر‬(‫سرآیند‬)‫صفحه‬‫وب‬‫شما‬‫بین‬‫تگهای‬<head>‫و‬</head>‫قرار‬‫می‬‫گیرند‬. ‫محتوای‬‫صفحه‬‫وب‬‫شما‬‫بین‬‫تگهای‬<body>‫و‬</body>‫قرار‬‫می‬‫گیرد‬. <h1> This is a Heading </h> <p> Tis is a Oaragraph </p> <html> </html> <body> </body> <head> </head> ‫صفحه‬7

8. ‫سند‬ ‫نوع‬ ‫تعریف‬(<!DOCTYPE>) <!DOCTYPE>‫به‬‫مرورگر‬‫ها‬‫کمک‬‫می‬‫کند‬‫تا‬‫یک‬‫صفحه‬‫وب‬‫را‬‫به‬‫درستی‬‫نشان‬‫دهند‬. ‫انواع‬‫مختلفی‬‫از‬‫اسناد‬‫در‬‫محیط‬‫وب‬‫وجود‬‫دارند‬‫لذا‬‫یک‬‫مرورگر‬‫زمانی‬‫می‬‫تواند‬‫یک‬‫صفحه‬HTML‫را‬‫به‬‫درستی‬‫نمایش‬‫دهد‬ ‫که‬‫نوع‬HTML‫و‬Version‫آن‬‫به‬‫درستی‬‫تعریف‬‫شده‬‫باشد‬. Doctype‫های‬‫رایج‬‫به‬‫شرح‬‫زیر‬‫می‬‫باشند‬. HTML 5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> ‫صفحه‬8

9. ‫کدهای‬ ‫نوشتن‬HTML ‫برای‬‫ویرایش‬‫کدهای‬HTML‫می‬‫توان‬‫از‬‫ویرایشگرهایی‬‫چون‬Adobe Dreamweaver،Microsoft Expression Web، Notepad،Notepad++‫استفاده‬‫کرد‬.‫در‬‫ابتدا‬‫برای‬‫یادگیری‬‫بهتر‬‫از‬‫محیط‬Notepad‫ویا‬Notepad++‫استفاده‬‫می‬‫نماییم‬. ‫قدم‬‫اول‬‫باز‬‫کردن‬‫نرم‬‫افزار‬NotepadStart  All Programs  Accessories Notepad : ‫قدم‬‫دوم‬‫نوشتن‬‫کدهای‬HTML‫درون‬Notepad: <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫قدم‬‫سوم‬‫انتخاب‬‫گزینه‬Save as..‫از‬‫منو‬File‫و‬‫ذخیره‬‫سند‬HTML‫با‬‫نام‬‫دلخواه‬‫و‬‫با‬‫یکی‬‫از‬‫پسوندهای‬.htm‫ویا‬.html ‫مانند‬:index.htm(‫تذکر‬:‫با‬‫اینکه‬‫تفاوتی‬‫بین‬‫این‬‫دو‬‫پسوند‬‫نیست‬‫اما‬‫سعی‬‫کنید‬‫همواره‬‫از‬‫پسوند‬.htm‫استفاده‬‫نمایید‬( ‫قدم‬‫چهارم‬‫اجرای‬‫فایل‬HTML‫و‬‫مشاهده‬‫نتیجه‬‫آن‬‫در‬‫مرورگر‬. ‫صفحه‬9

10. ‫عناصر‬ ‫نحو‬html(HTML Elements Syntax) •‫یک‬‫عنصر‬HTML‫با‬‫یک‬‫تگ‬‫ابتدایی‬‫آغاز‬‫می‬‫شود‬‫و‬‫با‬‫یک‬‫تگ‬‫انتهایی‬‫خاتمه‬‫می‬‫یابد‬. •‫هرآنچه‬‫بین‬‫تگ‬‫ابتدایی‬‫و‬‫انتهایی‬‫قرار‬‫می‬‫گیرد‬‫محتوی‬‫عنصر‬‫نامیده‬‫می‬‫شود‬. •‫برخی‬‫از‬‫عناصر‬HTML‫فاقد‬‫محتوی‬‫می‬‫باشند‬. •‫عناصر‬‫خالی‬‫تک‬‫تگی‬‫بوده‬‫که‬‫در‬‫همان‬‫تگ‬‫ابتدایی‬‫بسته‬‫می‬‫شوند‬. ‫نمونه‬‫ای‬‫از‬‫یک‬‫عنصر‬‫خالی‬‫تگ‬<br>‫می‬‫باشد‬‫که‬‫برای‬Line Break‫بکار‬‫می‬‫رود‬. ‫برای‬‫مشاهده‬‫کدهای‬‫یک‬‫صفحه‬‫می‬‫توان‬‫درون‬‫صفحه‬‫کلیک‬‫راست‬‫کرده‬‫و‬‫برای‬‫مرورگر‬ IE‫گزینه‬View Source،‫مرورگر‬Firefox‫گزینه‬View Page Source،‫مرورگر‬Opera ‫گزینه‬Source،‫و‬‫مرورگر‬Chrome‫گزینه‬View Page Source‫را‬‫انتخاب‬‫نمایید‬. <!DOCTYPE html> <html> <body> <p>paragraph.</p> </body> </html> ‫صفحه‬10

11. ‫صفات‬html(HTML Attribute) •‫بیشتر‬‫عناصر‬HTML‫می‬‫توانند‬‫یک‬‫یا‬‫چند‬‫صفت‬(Attribute)‫داشته‬‫باشند‬. •‫صفات‬‫یکسری‬‫اطالعات‬‫اضافی‬‫در‬‫رابطه‬‫با‬‫عناصر‬‫فراهم‬‫می‬‫کنند‬. •‫صفات‬‫همیشه‬‫در‬‫تگ‬‫ابتدایی‬‫تعریف‬‫می‬‫شوند‬. •‫هر‬‫صفت‬‫از‬‫دو‬‫قسمت‬‫نام‬‫و‬‫مقدار‬‫تشکیل‬‫می‬‫شود‬‫که‬‫نحوه‬‫تعریف‬‫آن‬‫به‬‫صورت‬name=“value”‫می‬‫باشد‬. •‫مقادیر‬‫صفت‬‫ها‬‫همیشه‬‫بین‬”....“‫قرار‬‫می‬‫گیرند‬.‫هرچند‬‫که‬‫تعریف‬‫آن‬‫در‬‘…..’‫نیز‬‫مجاز‬‫می‬‫باشد‬. •‫هر‬‫زمانی‬‫که‬‫بخواهیم‬‫در‬‫قسمت‬‫مقدار‬‫از‬‫دابل‬‫کوتیشن‬‫استفاده‬‫کنیم‬‫کل‬‫مقدار‬‫را‬‫درون‬‫سینگل‬‫کوتیشن‬‫قرار‬‫می‬‫دهیم‬. <tagname Attributename=“Attribute Value”>content</tagname> ‫صفحه‬11

12. ‫تیترها‬ ‫سر‬(HTML Headings) HTML Headings(‫سرتیترهای‬HTML)‫با‬‫استفاده‬‫از‬‫تگ‬‫های‬<h1>‫تا‬<h6>‫تعریف‬‫می‬‫شوند‬. <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 •‫از‬‫تگ‬<h1>‫برای‬‫تعریف‬‫مهمترین‬‫سرتیتر‬‫و‬‫از‬‫تگ‬<h6>‫برای‬‫تعریف‬‫کم‬‫اهمیت‬‫ترین‬‫سرتیتر‬‫استفاده‬‫می‬‫کنیم‬. •‫اصوال‬‫مرورگرها‬‫یک‬‫فضای‬‫خالی‬‫قبل‬‫و‬‫بعد‬‫از‬‫سرتیترها‬‫اضافه‬‫می‬‫کنند‬. •‫از‬‫تگ‬‫های‬‫سرتیتر‬‫تنها‬‫برای‬‫تعریف‬‫سرتیتر‬‫استفاده‬‫کنید‬‫نه‬‫برای‬‫بزرگ‬‫و‬‫ضخیم‬‫کردن‬‫نوشته‬‫ها‬. •‫موتورهای‬‫جستجو‬‫از‬‫تگ‬‫های‬‫سرتیتر‬‫برای‬‫ایندکس‬‫کردن‬‫ساختار‬‫و‬‫محتوی‬‫سند‬‫وب‬‫شما‬‫استفاده‬‫می‬‫کنند‬. •‫از‬‫تگ‬<h1>‫برای‬‫عنوان‬‫اصلی‬‫و‬‫از‬‫تگ‬<h2>‫تا‬<h6>‫برای‬‫ایجاد‬‫زیرعنوان‬‫استفاده‬‫نمایید‬. ‫صفحه‬12

13. ‫پاراگراف‬ ‫پاراگراف‬‫در‬HTML‫با‬‫استفاده‬‫از‬‫تگ‬<p>…….</p>‫تعریف‬‫می‬‫گردد‬.‫الزم‬‫به‬‫ذکر‬‫است‬‫که‬‫استفاده‬‫از‬‫کلید‬Enter‫در‬ ‫محتوی‬‫این‬،‫عنصر‬‫تاثیری‬‫در‬‫نمایش‬‫مرورگر‬‫ندارد‬.<p>This is a paragraph.</p> <p>This is another paragraph.</p> This is a paragraph. This is another paragraph. ‫خط‬(HTML Line) ‫از‬‫تگ‬‫تکی‬<hr>‫برای‬‫ایجاد‬‫یک‬‫خط‬‫افقی‬‫در‬‫صفحات‬HTML‫استفاده‬‫می‬‫شود‬. ‫این‬‫تگ‬‫همچنین‬‫به‬‫عنوان‬‫جداکننده‬‫محتوا‬‫در‬‫یک‬‫سند‬‫بکار‬‫می‬‫رود‬. <p>This is a paragraph</p> <hr><p>This is a paragraph</p> <hr><p>This is a paragraph</p> ‫در‬ ‫توضیحات‬HTML(HTML Comment) •‫افزودن‬‫توضیحات‬‫به‬‫یک‬‫کد‬HTML‫آنرا‬‫خواناتر‬‫و‬‫قابل‬‫فهم‬‫تر‬‫می‬‫کند‬. •‫توضیحات‬‫توسط‬‫مرورگرها‬‫نمایش‬‫داده‬‫نمی‬‫شوند‬. •‫برای‬‫نوشتن‬‫توضیحات‬‫به‬‫صورت‬‫مقابل‬‫عمل‬‫کنید‬.<!-- This is a comment --> ‫صفحه‬13

14. •‫شما‬‫می‬‫توانید‬‫از‬‫توضیحات‬‫برای‬‫تشریح‬‫یک‬‫کد‬‫استفاده‬‫نمایید‬‫این‬‫امر‬‫ویرایش‬‫را‬‫برای‬‫شما‬‫آسان‬‫تر‬‫می‬‫کند‬. •‫استفاده‬‫از‬‫توضیحات‬‫راه‬‫مناسبی‬‫برای‬‫مخفی‬‫کردن‬‫قسمتی‬‫از‬‫کدها‬‫از‬‫دید‬‫مرورگر‬‫می‬‫باشد‬. •‫تگ‬‫توضیحات‬‫فاقد‬‫هرگونه‬‫صفت‬‫می‬‫باشد‬. ‫در‬ ‫سراسری‬ ‫صفات‬HTML(HTML Global Attribute) ‫همانطور‬‫که‬‫گفته‬‫شد‬‫صفات‬‫به‬‫عناصر‬‫معنی‬‫می‬‫بخشند‬.‫صفات‬‫سراسری‬‫در‬‫تمامی‬‫تگ‬‫ها‬‫قابل‬‫استفاده‬‫می‬‫باشند‬. ‫صفت‬accesskey ‫این‬‫صفت‬‫یک‬‫کلید‬‫میانبر‬‫برای‬‫عنصر‬‫مورد‬‫نظر‬‫شما‬‫ایجاد‬‫می‬‫کند‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫تنها‬‫در‬‫تگ‬‫های‬<a> , <area> , <button> , <input> , <lable> , <legeng> , <textarea> ‫کاربرد‬‫دارد‬. Syntax<element accesskey="character"> ‫صفحه‬14

15. ‫صفت‬class ‫از‬‫این‬‫صفت‬‫جهت‬‫اختصاص‬‫یک‬‫یا‬‫چند‬‫کالس‬‫به‬‫عناصر‬‫استفاده‬‫می‬‫گردد‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<head>،<html>،<meta>،<param>،<script>،<style>‫و‬<title> ‫بکار‬‫نمی‬‫رود‬. Syntax<element class=“classname"> ‫صفت‬contenteditable ‫در‬‫صورتی‬‫که‬‫از‬‫این‬‫صفت‬‫در‬‫عناصر‬‫خود‬‫استفاده‬‫کنید‬‫محتوای‬‫آن‬‫عنصر‬‫قابل‬‫ویرایش‬‫می‬‫شود‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫این‬‫صفت‬‫در‬HTML5‫معرفی‬‫گشته‬‫است‬. Syntax<element contenteditable=“true|false|inherit"> ‫صفحه‬15

16. ‫صفت‬dir ‫از‬‫این‬‫صفت‬‫جهت‬‫تعیین‬‫جهت‬‫نوشتن‬‫استفاده‬‫می‬‫شود‬‫و‬‫مقادیر‬‫آن‬rtl(‫برای‬‫فارسی‬‫و‬...)‫و‬ltr(‫برای‬‫انگلیسی‬‫و‬...)‫می‬‫باشد‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<br>،<frame>،<frameset>،<hr>،<iframe>،<param>‫و‬ <script>‫بکار‬‫نمی‬‫رود‬. Syntax<element dir="ltr|rtl|auto"> ‫صفت‬hidden ‫این‬‫صفت‬‫جهت‬‫مخفی‬‫کردن‬‫عناصر‬‫بکار‬‫می‬‫رود‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫این‬‫صفت‬‫در‬HTML5‫معرفی‬‫گشته‬‫است‬. Syntax <element hidden> <element hidden="hidden"> <element hidden=""> ‫صفحه‬16

17. ‫صفت‬id ‫از‬‫این‬‫صفت‬‫جهت‬‫اختصاص‬‫یک‬id‫به‬‫هر‬‫عنصر‬‫استفاده‬‫می‬‫گردد‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<head>،<html>،<meta>،<param>،<script>،<style>‫و‬<title> ‫بکار‬‫نمی‬‫رود‬. Syntax<element id="idname"> ‫صفت‬lang ‫از‬‫این‬‫صفت‬‫جهت‬‫مشخص‬‫کردن‬‫زبان‬‫محتوای‬‫یک‬‫عنصر‬‫استفاده‬‫می‬‫شود‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<br>،<frame>،<frameset>،<hr>،<iframe>،<param>‫و‬<script>‫بکار‬‫نمی‬‫رود‬. Syntax<element lang="language_code"> ‫صفحه‬17

18. ‫صفت‬style ‫از‬‫این‬‫صفت‬‫جهت‬‫اختصاص‬style(‫سبک‬)‫به‬‫عناصر‬‫استفاده‬‫می‬‫گردد‬.‫الزم‬‫به‬‫ذکر‬‫است‬‫که‬style‫تعریف‬‫شده‬‫به‬‫این‬‫صورت‬ ‫نسبت‬‫به‬‫تمامی‬‫حاالت‬‫تعریف‬‫یک‬style‫ارجحیت‬‫دارد‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<head>،<html>،<meta>،<param>،<script>،<style>‫و‬<title>‫بکار‬‫نمی‬‫رود‬. Syntax<element style="style_definitions"> ‫صفت‬tabindex ‫این‬‫صفت‬‫جهت‬‫انتخاب‬‫عناصر‬‫به‬‫ترتیب‬‫تعریف‬‫شده‬‫از‬‫قبل‬‫با‬‫استفاده‬‫از‬‫کلید‬tab‫بکار‬‫می‬‫رود‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<a>،<area>،<button>،<input>،<object>،<select>‫و‬<textarea>‫بکار‬‫می‬‫رود‬. Syntax<element tabindex=“number"> ‫صفحه‬18

19. ‫صفت‬title ‫از‬‫این‬‫صفت‬‫جهت‬‫ارائه‬‫توضیحات‬‫اضافی‬‫برای‬‫یک‬‫عنصر‬‫استفاده‬‫می‬‫کنیم‬.‫این‬‫توضیحات‬‫اضافی‬‫زمانی‬‫نمایان‬‫می‬‫شوند‬‫که‬‫در‬ ‫صفحه‬‫مرورگر‬‫اشاره‬‫گر‬‫ماوس‬‫روی‬‫عنصر‬‫مورد‬‫نظر‬‫برود‬. ‫تفاوت‬‫در‬HTML 4.01‫و‬HTML 5 ‫در‬html 5‫از‬‫این‬‫صفت‬‫می‬‫توان‬‫برای‬‫تمامی‬‫تگ‬‫ها‬‫استفاده‬‫کرد‬. ‫در‬html 4.01‫این‬‫صفت‬‫در‬‫تگ‬‫های‬<base>،<head>،<html>،<meta>،<param>،<script>،<style>‫و‬<title> ‫بکار‬‫نمی‬‫رود‬. Syntax<element title="text"> ‫صفحه‬19

20. ‫در‬ ‫متن‬ ‫بندی‬ ‫قالب‬HTML(HTML Text Formatting) ‫از‬‫تگ‬‫های‬‫زیر‬‫جهت‬‫فرمت‬‫بندی‬‫متون‬(،‫ضخیم‬‫کج‬‫و‬...)‫در‬HTML‫استفاده‬‫می‬‫شود‬.‫این‬‫تگ‬‫ها‬‫کاربرد‬SEO‫نیز‬‫دارند‬. ‫تگ‬<b>…</b> ‫این‬‫تگ‬‫به‬‫منظور‬‫ضخیم‬‫کردن‬(bold)‫نوشته‬‫ها‬‫بکار‬‫می‬‫رود‬.‫بر‬‫اساس‬‫قوانین‬HTML5‫از‬‫این‬‫تگ‬‫باید‬‫به‬‫عنوان‬‫آخرین‬ ‫گزینه‬‫جهت‬‫تاکید‬‫بر‬‫متن‬‫استفاده‬‫کنید‬.‫عالوه‬‫بر‬‫این‬‫تگ‬‫توانید‬‫می‬‫از‬‫خاصیت‬font-weight‫در‬CSS‫نیز‬‫استفاده‬‫نمایید‬. ‫تگ‬<em>…</em> ‫از‬‫این‬‫تگ‬‫جهت‬‫تاکید‬‫بر‬‫یک‬‫متن‬‫استفاده‬‫می‬‫شود‬. ‫تگ‬<strong>…</strong> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫یک‬‫متن‬‫مهم‬‫استفاده‬‫می‬‫شود‬.‫در‬HTML4.01‫این‬‫تگ‬‫همانند‬‫تگ‬<em>‫برای‬‫تاکید‬‫بر‬‫یک‬‫متن‬ ‫استفاده‬‫می‬‫شود‬‫اما‬‫در‬HTML5‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫یک‬‫متن‬‫مهم‬‫استفاده‬‫می‬‫شود‬. ‫صفحه‬20

21. ‫تگ‬<i>…</i> ‫این‬‫تگ‬‫جهت‬‫تعریف‬‫متن‬‫به‬‫صورت‬‫کج‬(italic)‫بکار‬‫می‬‫رود‬.‫از‬‫این‬‫تگ‬‫برای‬‫نمایش‬‫یک‬‫اصطالح‬،‫فنی‬‫یک‬‫عبارت‬‫به‬‫یک‬ ‫زبان‬،‫دیگر‬‫یک‬‫ایده‬‫و‬...‫استفاده‬‫می‬‫شود‬.‫عالوه‬‫بر‬‫این‬‫تگ‬‫توانید‬‫می‬‫از‬‫خاصیت‬font-style‫در‬CSS‫نیز‬‫استفاده‬‫نمایید‬.‫از‬‫این‬ ‫تگ‬‫زمانی‬‫استفاده‬‫کنید‬‫که‬‫تگ‬‫های‬<em>,<strong>,<mark>,<cite>,<dfn>‫کاربردی‬‫برایتان‬‫ندارد‬. ‫تگ‬<small>…</small> ‫از‬‫این‬‫تگ‬‫جهت‬‫نمایش‬‫متن‬‫به‬‫صورت‬‫کوچکتر‬‫استفاده‬‫می‬‫کنیم‬. ‫تگ‬<sub>…</sub> ‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫متن‬‫زیرنویس‬‫به‬‫بکار‬‫می‬‫رود‬.‫برای‬‫مثال‬H2O ‫تگ‬<sup>…</sup> ‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫متن‬‫باال‬‫نویس‬‫به‬‫بکار‬‫می‬‫رود‬.‫برای‬‫مثال‬WWW[1] ‫تگ‬<ins>…</ins> ‫این‬‫تگ‬‫جهت‬‫زیرخط‬‫دار‬‫کردن‬‫متون‬‫بکار‬‫می‬‫رود‬. ‫صفحه‬21

22. ‫تگ‬<del>…</del> ‫از‬‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫متون‬‫خط‬‫خورده‬‫استفاده‬‫می‬‫شود‬.15000‫تومان‬ ‫تگ‬<code>…</code> ‫از‬‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫یک‬‫قطعه‬‫کد‬‫کامپیوتری‬‫در‬‫متن‬‫استفاده‬‫می‬‫کنیم‬. ‫تگ‬<samp>…</samp> ‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫نمونه‬‫ای‬‫از‬‫خروجی‬‫متنی‬‫یک‬‫برنامه‬‫کامپیوتری‬‫بکار‬‫می‬‫رود‬. ‫تگ‬<kbd>…</kbd> ‫این‬‫تگ‬‫جهت‬‫فرمت‬‫بندی‬‫متون‬‫به‬‫صورت‬‫ورودی‬‫صفحه‬‫کلید‬‫بکار‬‫می‬‫رود‬(‫مانند‬‫آنچه‬‫در‬‫فرم‬‫های‬‫ثبت‬‫نام‬‫می‬‫بینید‬). ‫تگ‬<var>…</var> ‫این‬‫تگ‬‫جهت‬‫فرمت‬‫بندی‬‫متون‬‫به‬‫منظور‬‫نمایش‬‫بصورت‬‫متغیرهای‬‫زبان‬‫های‬‫برنامه‬‫نویسی‬‫بکار‬‫می‬‫رود‬. ‫کامپیوتر‬ ‫خروجی‬ ‫های‬ ‫تگ‬(HTML "Computer Output" Tags) ‫صفحه‬22

23. ‫تگ‬<dfn>…</dfn> ‫این‬‫تگ‬‫جهت‬‫ارائه‬‫تعریف‬‫برای‬‫یک‬‫عبارت‬‫بکار‬‫می‬‫رود‬. ‫در‬ ‫تقدیری‬ ‫و‬ ‫قولی‬ ‫نقل‬ ،‫تعریفی‬ ‫های‬ ‫تگ‬HTML(HTML Citations, Quotations, and Definition) ‫تگ‬<abbr>…</abbr> ‫از‬‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫مخفف‬‫در‬‫متون‬‫استفاده‬‫می‬‫شود‬.‫با‬‫این‬‫تگ‬‫می‬‫توانید‬‫اطالعات‬‫مفیدی‬‫به‬‫موتورهای‬‫جستجو‬‫و‬ Translator‫ها‬‫بدهید‬. ‫تگ‬<address>…</address> ‫از‬‫این‬‫تگ‬‫جهت‬‫نوشتن‬‫اطالعات‬‫تماس‬‫نویسنده‬‫سند‬‫استفاده‬‫می‬‫شود‬.‫محتوای‬‫این‬‫تگ‬‫به‬‫صورت‬italic‫نمایش‬‫داده‬‫می‬‫شود‬. ‫تگ‬<bdo>…</bdo> ‫این‬‫تگ‬‫مشخص‬‫کننده‬‫جهت‬‫نمایش‬‫متن‬‫درون‬‫خود‬‫است‬.‫این‬‫تگ‬‫بر‬‫روی‬‫هر‬‫متنی‬‫که‬‫نوشته‬‫شود‬‫حروف‬‫آن‬‫متن‬‫را‬‫از‬‫آخر‬ ‫به‬‫اول‬‫بر‬‫می‬‫گرداند‬.‫تنها‬‫صفت‬‫این‬‫تگ‬dir‫با‬‫دو‬‫مقدار‬rtl‫و‬ltr‫است‬. ‫صفحه‬23

24. ‫تگ‬< blockquote >…</ blockquote > ‫جهت‬‫نوشتن‬‫نقل‬‫قول‬‫از‬‫یک‬‫منبع‬‫دیگر‬‫از‬‫این‬‫تگ‬‫استفاده‬‫می‬‫کنیم‬.‫مرورگرها‬‫متن‬‫داخل‬‫این‬‫تگ‬‫را‬‫به‬‫صورت‬‫تورفته‬‫نمایش‬ ‫می‬‫دهند‬.‫برای‬‫نوشتن‬‫نقل‬‫قول‬‫به‬‫صورت‬inline‫از‬‫تگ‬<q>…</q>‫استفاده‬‫می‬‫کنیم‬‫در‬‫این‬‫صورت‬‫خروجی‬‫درون‬”...“ ‫نمایش‬‫داده‬‫می‬‫شود‬. ‫صفحه‬24

25. HTML LINK •‫لینک‬‫ها‬‫تقریبا‬‫در‬‫تمامی‬‫صفحات‬‫وب‬‫یافت‬‫می‬‫شوند‬. •‫شما‬‫از‬‫طریق‬‫لینک‬‫ها‬‫می‬‫توانید‬‫بین‬‫صفحات‬‫مختلف‬‫در‬‫محیط‬‫وب‬‫پیمایش‬‫کنید‬‫و‬‫از‬‫صفحه‬‫ای‬‫به‬‫صفحه‬‫دیگر‬‫بروید‬. •‫یک‬‫لینک‬‫یک‬،‫لغت‬‫گروهی‬‫از‬‫لغات‬‫و‬‫یا‬‫یک‬‫تصویر‬‫است‬‫که‬‫با‬‫کلیک‬‫بر‬‫روی‬‫آن‬‫به‬‫صفحات‬‫دیگر‬‫پرش‬‫می‬‫کنید‬. •‫وقتی‬‫اشاره‬‫گر‬‫ماوس‬‫را‬‫بر‬‫روی‬‫یک‬‫لینک‬‫می‬‫برید‬‫عالمت‬‫فلش‬‫به‬‫یک‬‫دست‬‫کوچک‬‫تبدیل‬‫می‬‫شود‬. •‫برای‬‫تعریف‬‫یک‬‫لینک‬‫باید‬‫از‬‫تگ‬<a>…</a>‫استفاده‬‫نمایید‬. •‫مهمترین‬‫صفت‬‫این‬‫تگ‬‫صفت‬href=“”‫می‬‫باشد‬‫که‬‫درون‬‫آن‬‫باید‬‫آدرس‬‫مقصد‬‫را‬‫وارد‬‫نمایید‬. •‫درون‬‫تگ‬<a>‫از‬‫هر‬‫عنصری‬‫می‬‫توانید‬‫استفاده‬‫نمایید‬. Syntax<a href="url">Link text</a> ‫مطلق‬ ‫دهی‬ ‫آدرس‬: ‫در‬‫این‬‫روش‬‫با‬‫ید‬‫آدرس‬‫کامل‬‫مقصد‬‫را‬‫از‬‫ریشه‬‫اصلی‬‫وارد‬‫کنیم‬.C:UsersPublicDocumentsa.htm ‫دهی‬ ‫آدرس‬ ‫انواع‬ ‫صفحه‬25

26. ‫نسبی‬ ‫دهی‬ ‫آدرس‬: ‫در‬‫این‬‫روش‬‫آدرس‬‫مقصد‬‫را‬‫نسبت‬‫به‬‫محل‬‫ذخیره‬‫سازی‬‫فایل‬‫موجود‬‫وارد‬‫می‬‫کنیم‬.‫در‬‫این‬‫روش‬‫از‬‫آدرس‬‫دهی‬‫اصوال‬‫از‬/.. ‫جهت‬‫اشاره‬‫به‬‫یک‬‫شاخه‬‫باالتر‬‫استفاده‬‫می‬‫کنیم‬. C web images theme 1.jpg 2.jpg Index.htm 5.jpg ‫مطلق‬ ‫دهی‬ ‫آدرس‬C://web/images/5.jpg ‫نسبی‬ ‫دهی‬ ‫آدرس‬/5.jpg../images ‫صفحه‬26

27. ‫صفت‬target ‫این‬‫صفت‬‫نحوه‬‫باز‬‫شدن‬‫لینک‬‫را‬‫مشخص‬‫می‬‫کند‬‫و‬‫یکی‬‫از‬5‫مقدار‬‫زیر‬‫را‬‫به‬‫خود‬‫می‬‫گیرد‬: •_blank:‫باز‬‫کردن‬‫مقصد‬‫در‬‫یک‬‫پنجره‬‫جداگانه‬. •_self:‫باز‬‫کردن‬‫مقصد‬‫در‬‫همان‬frame. •_parent:‫باز‬‫کردن‬‫مقصد‬‫در‬frame‫والد‬. •_top:‫باز‬‫کردن‬‫مقصد‬‫بجای‬‫صفحه‬‫جاری‬. •Framename:‫بازکردن‬‫مقصد‬‫در‬‫فریمی‬‫که‬‫نامش‬‫را‬‫آورده‬‫ایم‬. ‫صفت‬id ‫از‬‫این‬‫صفت‬‫جهت‬‫ایجاد‬bookmark‫درون‬‫صفحات‬‫وب‬‫استفاده‬‫می‬‫شود‬. <a href=“#name”>bookmark link</a> <a id=“name”>bookmark</a> ‫با‬‫کلیک‬‫بر‬‫روی‬‫لینک‬‫به‬‫آن‬‫قسمت‬‫از‬‫صفحه‬‫که‬id‫آن‬‫در‬href‫نوشته‬‫شده‬‫پرش‬‫می‬‫کنیم‬. ‫صفحه‬27

28. ‫صفت‬href ‫از‬‫این‬‫صفت‬‫جهت‬‫نوشتن‬‫آدرس‬‫مقصد‬‫برای‬‫لینک‬‫استفاده‬‫می‬‫کنیم‬.‫درواقع‬‫با‬‫کلیک‬‫بر‬‫روی‬‫لینک‬‫به‬‫این‬‫آدرس‬‫پرش‬‫می‬ ‫کنیم‬.‫نکته‬‫مهم‬‫در‬‫نوشتن‬‫آدرس‬‫این‬‫است‬‫که‬‫همیشه‬‫در‬‫انتهای‬‫آدرس‬‫یک‬‫اسلش‬)/(‫اضافه‬‫کنید‬‫چراکه‬‫اگر‬‫آدرس‬‫شما‬ ‫بدون‬‫اسلش‬‫انتهایی‬‫باشد‬‫دو‬‫درخاست‬‫به‬‫سرور‬‫فرستاده‬‫می‬‫شود‬‫که‬‫این‬‫امر‬‫به‬‫نوبه‬‫خود‬‫ترافیک‬‫سرور‬‫شما‬‫را‬‫هدر‬‫می‬‫دهد‬. ‫برا‬‫مثال‬‫اگر‬‫آدرس‬htm.ir/index.itlearning.//www:http‫را‬‫در‬href‫وارد‬‫کنیک‬‫هنگام‬‫کلیک‬‫بر‬‫روی‬‫لینک‬‫دو‬‫در‬ ‫خواست‬‫به‬‫سرور‬‫ارسال‬‫می‬‫گردد‬.‫که‬‫یکی‬‫افزودن‬‫اسلش‬‫به‬‫انتهای‬‫آدرس‬‫باال‬‫و‬‫دومی‬‫برگرداندن‬‫آدرس‬ htm/.ir/index.itlearning.//www:http‫توسط‬‫سرور‬‫برای‬‫شما‬‫می‬‫باشد‬. ‫صفحه‬28

29. HTML <head> •‫یکی‬‫از‬‫مهم‬‫ترین‬‫قسمت‬‫های‬‫یک‬‫سند‬HTML‫از‬‫لحاظ‬‫مباحث‬SEO،‫سرآیند‬‫یا‬‫همان‬header‫آن‬‫می‬‫باشد‬‫چراکه‬ ‫اطالعات‬‫مورد‬‫نیاز‬‫جهت‬‫ایندکس‬‫کردن‬‫هرچه‬‫بهتر‬‫وب‬‫سایت‬‫شما‬‫را‬‫در‬‫اختیار‬‫موتورهای‬‫جستجو‬‫قرار‬‫می‬‫دهد‬. •‫کلیه‬‫عناصر‬‫سرآیند‬‫درون‬‫تگ‬<head>…</head>‫قرار‬‫می‬‫گیرند‬. •‫تگ‬‫هایی‬‫که‬‫درون‬‫تگ‬<head>‫قرار‬‫می‬‫گیرند‬‫عبارتند‬‫از‬: <title> , <style> , <meta> , <link> , <script> , <noscript> , <base> ‫به‬‫منظور‬‫تعریف‬‫عنوان‬‫برای‬‫اسناد‬HTML‫باید‬‫از‬‫تگ‬<title>…</title>‫استفاده‬‫نمایید‬.‫الزم‬‫به‬‫ذکر‬‫است‬‫که‬‫محل‬‫تعریف‬ ‫این‬‫تگ‬‫درون‬‫تگ‬<head>‫می‬‫باشد‬.‫دقت‬‫کنید‬‫که‬‫تعریف‬‫عنوان‬‫برای‬‫اسناد‬HTML‫ضروری‬‫می‬‫باشد‬.‫بدون‬‫این‬‫تگ‬‫سند‬ ‫شما‬‫هیچگونه‬‫اعتباری‬‫در‬‫محیط‬‫وب‬‫ندارد‬.‫متن‬‫نوشته‬‫شده‬‫درون‬‫تگ‬<title>‫در‬‫موارد‬‫زیر‬‫نمایان‬‫می‬‫گردد‬: •‫هنگام‬‫نمایش‬‫لیست‬‫جستجو‬‫موتورهای‬‫جستجو‬ •‫در‬‫نوار‬‫عنوان‬‫مرورگرها‬ ‫صفحه‬ ‫عنوان‬(Title) ‫صفحه‬29

30. ‫تگ‬<base> •‫با‬‫استفاده‬‫از‬‫این‬‫تگ‬‫شما‬‫می‬‫توانید‬‫یک‬URL‫یا‬‫یک‬‫مقصد‬‫را‬‫جهت‬‫آدرس‬‫دهی‬‫نسبی‬‫مشخص‬‫کنید‬. •‫همچنین‬‫از‬‫این‬‫تگ‬‫جهت‬‫مشخص‬‫کردن‬‫مقدار‬‫پیش‬‫فرض‬‫برای‬‫صفت‬target‫تمام‬‫لینک‬‫ها‬‫می‬‫توان‬‫استفاده‬‫کرد‬. •‫در‬‫هر‬‫سند‬HTML‫تنها‬‫می‬‫توان‬‫از‬‫یک‬‫تگ‬<base>‫استفاده‬‫کرد‬. •‫باید‬‫بالفاصله‬‫بعد‬‫از‬‫تگ‬<head>‫قرار‬‫گیرد‬‫تا‬‫پس‬‫از‬‫آن‬‫بتوان‬‫از‬‫ارجاعات‬‫محلی‬‫و‬‫آدرس‬‫های‬‫نسبی‬‫بهره‬‫برد‬. Syntax<base href="url" target=“…." /> <base href=“../images/back/”> <base target=“_self”> ‫تگ‬<link> •‫از‬‫این‬‫تگ‬‫جهت‬‫برقراری‬‫ارتباط‬‫بین‬‫یک‬‫سند‬‫و‬‫یک‬‫منبع‬‫خارجی‬‫استفاده‬‫می‬‫کنیم‬. •‫از‬‫این‬‫تگ‬‫بیشتر‬‫برای‬‫اتصال‬‫یک‬‫فایل‬CSS‫خارجی‬‫به‬‫سند‬HTML‫استفاده‬‫می‬‫کنیم‬. •‫این‬‫عنصر‬‫را‬‫به‬‫هر‬‫تعداد‬‫که‬،‫بخواهیم‬‫می‬‫توانیم‬‫درون‬‫تگ‬<head>‫بکار‬‫ببریم‬. ‫صفحه‬30

31. Syntax<link href="url" media="…" rel="…" size="…" type="…" /> href:‫مقدار‬‫این‬‫صفت‬‫آدرس‬‫فایل‬‫مقصد‬‫می‬‫باشد‬. media:‫با‬‫استفاده‬‫از‬‫این‬‫صفت‬‫نوع‬‫رسانه‬‫مقصد‬‫را‬‫معین‬‫می‬‫کنیم‬.‫از‬‫این‬‫صفت‬‫بیشتر‬‫برای‬‫فایل‬‫های‬CSS‫استفاده‬‫می‬‫کنیم‬ ‫تا‬‫برای‬‫رسانه‬‫های‬‫مختلف‬CSS‫های‬‫مختلفی‬‫تعریف‬‫کنیم‬.‫برای‬‫مثال‬‫مقدار‬print‫برای‬‫رسانه‬‫پرینتر‬‫و‬‫مقدار‬screen‫برای‬ ‫نمایشگر‬‫کامپیوتر‬‫بکار‬‫می‬‫رود‬. rel:‫با‬‫استفاده‬‫از‬‫این‬‫صفت‬‫نوع‬‫ارتباط‬‫بین‬‫سند‬‫جاری‬‫و‬‫سند‬‫مقصد‬‫را‬‫معین‬‫می‬‫کنیم‬.‫به‬‫عنوان‬‫مثال‬‫از‬‫مقدار‬stylesheet ‫برای‬‫فایل‬‫های‬CSS،‫مقدار‬icon‫برای‬‫تعیین‬‫آیکون‬‫در‬‫نوار‬‫عنوان‬،‫مرورگرها‬‫مقدار‬author‫برای‬‫معرفی‬‫نویسنده‬‫سند‬‫و‬... size:‫این‬‫صفت‬‫زمانی‬‫بکار‬‫می‬‫رود‬‫که‬rel=“icon”‫باشد‬.‫مقدار‬‫این‬‫صفت‬‫سایز‬‫آیکون‬‫را‬‫مشخص‬‫می‬،‫کند‬‫مثال‬:16x16 type:‫از‬‫این‬‫صفت‬‫جهت‬‫مشخص‬‫کردن‬MIME Type‫سند‬‫مقصد‬‫استفاده‬‫می‬‫کنیم‬.‫متداول‬‫ترین‬‫مقدار‬‫برای‬‫این‬‫صفت‬ text/css‫می‬‫باشد‬‫که‬‫برای‬‫فایل‬‫های‬CSS‫بکار‬‫می‬‫رود‬. ‫صفحه‬31

32. ‫تگ‬<meta> •Metadata‫ها‬‫داده‬‫ها‬‫و‬‫اطالعاتی‬‫راجع‬‫به‬‫داده‬‫های‬‫دیگر‬‫می‬‫باشند‬. •‫از‬‫تگ‬<meta>‫جهت‬‫تعریف‬metadata‫برای‬‫اسناد‬HTML‫استفاده‬‫می‬‫کنیم‬.‫این‬‫اطالعات‬‫توسط‬‫مرورگر‬‫نمایش‬‫داده‬ ‫نمی‬‫شوند‬‫اما‬‫اطالعات‬‫مفیدی‬‫راجع‬‫به‬‫محتویات‬‫سند‬‫شما‬‫به‬‫موتورهای‬‫جستجو‬‫می‬‫دهند‬. •‫تعریف‬‫درست‬‫و‬‫اصولی‬‫متا‬‫تگ‬‫ها‬‫تاثیر‬‫قابل‬‫مالحظه‬‫ای‬‫در‬‫افزایش‬‫رنک‬‫وب‬‫سایت‬‫شما‬‫دارد‬‫به‬‫همین‬‫دلیل‬‫یکی‬‫از‬ ‫مهمترین‬‫مباحث‬‫در‬SEO‫می‬‫باشد‬. •‫عناصر‬‫متا‬‫یا‬‫همان‬‫متا‬‫تگ‬‫ها‬‫اصوال‬‫برای‬‫تعریف‬‫کلمات‬،‫کلیدی‬،‫توضیحات‬‫معرفی‬‫نویسنده‬،‫سند‬‫آخرین‬‫زمان‬‫تغییرات‬ ‫و‬...‫بکار‬‫می‬‫روند‬. •‫از‬‫متا‬‫تگ‬‫ها‬‫همچنین‬‫برای‬‫تعیین‬‫نحوه‬‫نمایش‬‫محتویات‬‫سند‬‫و‬‫چگونگی‬reload‫شدن‬‫آن‬‫نیز‬‫استفاده‬‫می‬‫شود‬. •‫متا‬‫تگ‬‫ها‬‫همیشه‬‫در‬‫تگ‬<head>‫نوشته‬‫می‬‫شوند‬. Syntax<meta name=“..” content=“..” http-equiv=“..” charset=“..” /> ‫صفحه‬32

33. name:‫با‬‫استفاده‬‫از‬‫این‬‫صفت‬‫نوع‬‫متادیتا‬‫را‬‫مشخص‬‫می‬‫کنیم‬.‫در‬‫صورت‬‫تنظیم‬‫این‬‫صفت‬‫نباید‬‫از‬‫صفت‬http-equiv ‫استفاده‬‫کنیم‬.‫مهم‬‫ترین‬‫مقادیر‬‫این‬‫صفت‬‫عبارتند‬‫از‬:author،description،keywords content:‫مقدار‬‫این‬‫صفت‬‫متناسب‬‫با‬‫دیگر‬‫صفت‬‫ها‬‫نظیر‬name‫و‬http-equiv‫تنظیم‬‫می‬‫گردد‬‫و‬‫به‬‫شرح‬‫زیر‬‫می‬‫باشد‬: •‫اگر‬‫مقدار‬‫صفت‬name‫برابر‬author‫باشد‬‫نام‬‫نویسنده‬‫را‬‫در‬content‫وارد‬‫می‬‫کنیم‬. •‫اگر‬‫مقدار‬‫صفت‬name‫برابر‬description‫باشد‬‫در‬content‫توضیحاتی‬‫راجع‬‫به‬‫سند‬HTML‫خود‬‫وارد‬‫می‬،‫کنید‬‫توجه‬ ‫داشته‬‫باشید‬‫که‬‫این‬‫توضیحات‬‫بین‬150‫تا‬160‫کاراکتر‬‫باشد‬.‫این‬‫توضیحات‬‫زمانی‬‫نشان‬‫داده‬‫می‬‫شوند‬‫که‬‫وبسایت‬‫شما‬ ‫در‬‫لیست‬‫جستجو‬‫موتورهای‬‫جستجو‬‫قرار‬‫گیرد‬. •‫اگر‬‫مقدار‬‫صفت‬name‫برابر‬keywords‫باشد‬‫در‬content‫کلمات‬‫کلیدی‬‫مرتبط‬‫با‬‫محتویات‬‫سند‬HTML‫را‬‫وارد‬‫می‬ ‫کنیم‬.‫کلمات‬‫کلیدی‬‫باید‬‫کوتاه‬‫و‬‫مرتبط‬‫با‬‫محتویات‬‫سند‬‫باشد‬‫لذا‬‫از‬‫نوشتن‬‫کلمات‬‫کلیدی‬‫بی‬‫مورد‬‫جدا‬‫خود‬‫داری‬‫کنید‬ ‫در‬‫غیر‬‫این‬‫صورت‬‫امکان‬‫دارد‬‫وبسایت‬‫شما‬‫در‬‫لیست‬‫سیاه‬‫موتورهای‬‫جستجو‬‫قرار‬‫گیرد‬.‫تنظیم‬‫درست‬‫و‬‫اصولی‬‫کلمات‬ ‫کلیدی‬‫تاثیر‬‫فراوانی‬‫در‬‫افزایش‬‫رنک‬‫وبسایت‬‫شما‬‫دارد‬. ‫اطالعات‬ ‫فناوری‬ ‫آموزش‬ ‫پورتال‬ www.itlearning.ir/ - Translate this page ‫اطالعات‬ ‫فناوری‬ ‫آموزش‬ ‫پورتال‬‫یک‬‫پورتال‬‫تکنولوژی‬ ‫های‬ ‫تازه‬ ‫و‬ ‫جهان‬ ‫آینده‬ ‫سوی‬ ‫به‬ ‫ای‬ ‫دریچه‬ ‫که‬ ‫بوده‬ ‫خبری‬ ‫گشاید‬ ‫می‬ ‫شما‬ ‫روی‬ ‫به‬ ‫را‬. ‫صفحه‬33

34. http-equiv:‫مهم‬‫ترین‬‫مقادیر‬‫این‬‫صفت‬‫عبارتند‬‫از‬: •content-type:‫جهت‬‫تعیین‬‫نوع‬encoding‫سند‬HTML <meta http-equiv="content-type" content="text/html; charset=UTF-8"> •refresh:‫جهت‬‫تعریف‬‫یک‬‫بازه‬‫زمانی‬‫بر‬‫حسب‬‫ثانیه‬‫به‬‫منظور‬refresh‫شدن‬(‫بارگذاری‬‫مجدد‬)‫صفحه‬ <meta http-equiv="refresh" content="300"> ‫نکته‬:‫تعریف‬‫نوع‬encoding‫در‬HTML 4.01‫و‬HTML 5‫متفاوت‬‫است‬. HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5: <meta charset="UTF-8"> charset:‫این‬‫صفت‬‫در‬HTML 5‫معرفی‬‫گشته‬‫و‬‫جهت‬‫تعریف‬‫نوع‬encoding‫سند‬HTML‫بکار‬‫می‬‫رود‬.‫هرچند‬‫تعیین‬‫نوع‬ encoding‫به‬‫شیوه‬HTML 4.01‫هنوز‬‫نیز‬‫معتبر‬‫است‬‫اما‬‫تعریف‬‫آن‬‫به‬‫فرم‬HTML 5‫کوتاه‬‫تر‬‫و‬‫قابل‬‫فهم‬‫تر‬‫است‬. ‫صفحه‬34

35. ‫تگ‬<style> •‫از‬‫تگ‬<style>…</style>‫جهت‬‫تعریف‬style‫درون‬‫یک‬‫سند‬HTML‫استفاده‬‫می‬‫شود‬. •‫تگ‬<style>‫درون‬‫تگ‬<head>‫نوشته‬‫می‬‫شود‬. •‫محتویات‬‫این‬‫تگ‬‫مشخص‬‫می‬‫کند‬‫که‬‫مرورگرها‬‫عناصر‬HTML‫را‬‫باید‬‫به‬‫چه‬‫سبکی‬‫رندر‬‫کنند‬. •‫هر‬‫سند‬HTML‫می‬‫تواند‬‫حاوی‬‫چند‬‫تگ‬<style>‫باشد‬. •‫جهت‬‫اتصال‬‫یک‬style sheet‫خارجی‬‫به‬‫سند‬HTML‫از‬‫تگ‬<link>‫استفاده‬‫می‬‫کنیم‬. ‫مهم‬‫ترین‬‫صفت‬‫های‬‫این‬‫تگ‬‫عبارتند‬‫از‬: type:‫جهت‬‫تعریف‬MIME type‫که‬‫در‬‫اینجا‬‫مقدار‬‫آن‬‫برابر‬text/css‫می‬‫باشد‬. media:‫جهت‬‫اختصاص‬style‫های‬‫مختلف‬‫به‬‫رسانه‬‫های‬‫مختلف‬. ‫تگ‬<script> •‫از‬‫تگ‬<script>…</script>‫جهت‬‫تعریف‬‫یک‬‫اسکریپت‬‫سمت‬‫کاربر‬‫نظیر‬‫جاوا‬‫اسکریپت‬‫درون‬‫سند‬‫استفاده‬‫می‬‫شود‬. •‫از‬‫این‬‫تگ‬‫برای‬‫اتصال‬‫یک‬‫اسکریپت‬‫خارجی‬‫نظیر‬JQuery‫به‬‫سند‬HTML‫نیز‬‫استفاده‬‫می‬‫شود‬ ‫صفحه‬35

36. •‫اگر‬‫از‬‫صفت‬src‫جهت‬‫اتصال‬‫یک‬‫اسکریپت‬‫خارجی‬‫استفاده‬‫کنیم‬‫محتوی‬‫این‬‫تگ‬‫را‬‫باید‬‫خالی‬‫بگذاریم‬. ‫مهمترین‬‫صفت‬‫های‬‫این‬‫تگ‬‫عبارتند‬‫از‬: charset:‫تعیین‬‫نوع‬encoding‫اسکریپت‬‫خارجی‬ src:‫آدرس‬URL‫اسکریپت‬‫خارجی‬‫را‬‫به‬‫عنوان‬‫مقدار‬‫در‬‫این‬‫صفت‬‫وارد‬‫می‬‫کنیم‬. type:‫جهت‬‫تعریف‬MIME type‫که‬‫در‬‫اینجا‬‫مقدار‬‫آن‬‫برابر‬text/javascript‫می‬‫باشد‬. ‫تگ‬<noscript> •‫از‬‫تگ‬<noscript>…</noscript>‫جهت‬‫هشدار‬‫دادن‬‫به‬‫کاربرانی‬‫که‬‫مرورگرشان‬‫از‬‫اسکریپت‬‫های‬‫سمت‬‫کاربر‬ ‫پشتیبانی‬‫نمی‬‫کند‬‫یا‬‫کاربرانی‬‫که‬‫اسکریپت‬‫مرورگرشان‬‫را‬‫غیر‬‫فعال‬‫کرده‬‫اند‬‫استفاده‬‫می‬‫شود‬. •‫درون‬‫این‬‫عنصر‬‫شما‬‫می‬‫توانید‬‫از‬‫تمامی‬‫عناصری‬‫که‬‫در‬body‫استفاده‬‫می‬‫کنید‬‫بهره‬‫ببرید‬. ‫صفحه‬36

37. ‫تصاویر‬‫در‬HTML‫با‬‫استفاده‬‫از‬‫تگ‬<img>‫تعریف‬‫می‬‫شوند‬. ‫تگ‬<img>‫تگ‬‫انتهایی‬‫ندارد‬‫و‬‫برای‬‫بستن‬‫آن‬‫می‬‫توان‬‫از‬‫استاندارد‬XHTML‫استفاده‬‫نمود‬. ‫در‬‫این‬‫تگ‬‫صفات‬‫زیر‬‫بکار‬‫می‬‫رود‬: ‫در‬ ‫تصاویر‬HTML(HTML Images) ‫صفت‬src ‫آدرس‬‫تصویر‬‫مورد‬‫نظر‬‫را‬‫در‬‫این‬‫صفت‬‫وارد‬‫می‬‫کنیم‬‫مثال‬:src=“../../images/back.png” ‫صفت‬alt ‫در‬‫این‬‫صفت‬‫یک‬‫متن‬‫جایگزین‬‫برای‬‫تصویر‬‫وارد‬‫می‬‫کنیم‬.‫درصورتی‬‫که‬‫به‬‫هر‬‫دلیل‬‫تصویر‬‫مورد‬‫نظر‬‫نمایش‬‫داده‬‫نشود‬‫این‬ ‫متن‬‫بجای‬‫تصویر‬‫نمایش‬‫داده‬‫می‬‫شود‬.‫الزم‬‫به‬‫ذکر‬‫است‬‫که‬‫این‬‫صفت‬‫از‬‫نظر‬SEO‫نیز‬‫اهمیت‬‫دارد‬‫چراکه‬‫موتورهای‬‫جستجو‬ ‫به‬‫واسطه‬‫این‬‫متن‬‫می‬‫توانند‬‫تصویر‬‫را‬‫شناسایی‬‫نمایند‬. ‫صفت‬width ‫در‬‫این‬‫صفت‬‫عرض‬‫تصویر‬‫مورد‬‫نظر‬‫را‬‫بر‬‫حسب‬pixel‫یا‬‫درصد‬‫وارد‬‫می‬‫کنیم‬. ‫صفحه‬37

38. ‫صفت‬height ‫در‬‫این‬‫صفت‬‫ارتفاع‬‫تصویر‬‫را‬‫برحسب‬pixel‫یا‬‫درصد‬‫وارد‬‫می‬‫کنیم‬. ‫نکته‬: ‫تعیین‬‫طول‬‫و‬‫عرض‬‫تصاویر‬‫از‬‫اهمیت‬‫ویژه‬‫ای‬‫برخوردار‬‫است‬‫چراکه‬‫قبل‬‫از‬‫بارگذاری‬‫تصویر‬‫مرورگر‬‫از‬‫طول‬‫و‬‫عرض‬‫آن‬ ‫مطلع‬‫شده‬‫و‬‫فضای‬‫مورد‬‫نظر‬‫را‬‫رزرو‬‫می‬‫کند‬‫بدین‬‫ترتیب‬‫چینش‬‫عناصر‬‫در‬‫صفحه‬‫حفظ‬‫شده‬‫و‬‫از‬‫بهم‬‫ریختگی‬‫پرهیز‬‫می‬‫شود‬. ‫صفت‬usemap ‫در‬‫این‬‫صفت‬‫باید‬‫یک‬‫نام‬‫همراه‬‫با‬#‫وارد‬‫کرد‬.‫نام‬‫وارد‬‫شده‬‫در‬‫این‬‫صفت‬‫در‬‫نقشه‬‫تصویری‬‫بکار‬‫می‬‫رود‬.‫در‬‫واقع‬‫با‬‫استفاده‬‫از‬ ‫این‬‫صفت‬‫می‬‫توان‬‫نقشه‬‫های‬‫تصویری‬‫متعددی‬‫را‬‫در‬‫سند‬HTML‫ایجاد‬‫کرد‬. Syntax <img src=“…” width=“number” height=“number” alt=“text” usemap=“#name” title=“text”/> ‫صفحه‬38

39. ‫تصویری‬ ‫نقشه‬HTML(HTML Image Map) ‫با‬‫استفاده‬‫از‬‫تگ‬<map>…</map>‫شما‬‫می‬‫توانید‬‫یک‬‫نقشه‬‫تصویری‬‫سمت‬‫کاربر‬‫تعریف‬‫نمایید‬. ‫نقشه‬‫تصویری‬‫یک‬‫تصویر‬‫با‬‫نواحی‬‫قابل‬‫کلیک‬‫می‬‫باشد‬(‫همانند‬‫لینک‬‫ها‬) ‫در‬‫یک‬‫نقشه‬‫تصویری‬‫نواحی‬‫با‬‫استفاده‬‫از‬‫تگ‬<area>‫تعریف‬‫می‬‫شوند‬. ‫تگ‬<map>…</map> ‫تنها‬‫صفت‬‫این‬‫تگ‬name‫می‬‫باشد‬‫که‬‫در‬‫آن‬‫مقدار‬‫وارد‬‫شده‬‫در‬‫صفت‬usemap‫تصویر‬‫مورد‬‫نظر‬‫را‬‫بدون‬#‫وارد‬‫می‬‫کنیم‬. ‫تگ‬<area> ‫این‬‫تگ‬‫داخل‬‫تگ‬<map>…</map>‫نوشته‬‫می‬‫شود‬‫و‬‫نواحی‬‫قابل‬‫کلیک‬‫بر‬‫روی‬‫تصاویر‬‫ما‬‫ایجاد‬‫می‬‫نماید‬.‫مهم‬‫ترین‬‫صفت‬ ‫های‬‫این‬‫تگ‬‫عبارتند‬‫از‬: ‫صفت‬alt ‫در‬‫صورت‬‫استفاده‬‫از‬‫صفت‬href‫باید‬‫حتما‬‫از‬‫این‬‫صفت‬‫استفاده‬‫کنید‬.‫متن‬‫وارد‬‫شده‬‫در‬‫این‬‫صفت‬‫هنگامی‬‫که‬‫اشاره‬‫گر‬‫ماوس‬ ‫روی‬‫ناحیه‬‫مورد‬‫نظر‬‫می‬‫رود‬‫ظاهر‬‫می‬‫شود‬. ‫صفحه‬39

40. ‫صفت‬coords ‫در‬‫این‬‫صفت‬‫مختصات‬‫رئوس‬‫نواحی‬‫مورد‬‫نظر‬‫را‬‫پشت‬‫سرهم‬‫نوشته‬‫و‬‫با‬‫استفاده‬‫از‬‫کاما‬‫آنها‬‫را‬‫از‬‫هم‬‫جدا‬‫می‬‫کنیم‬.‫مقدار‬‫این‬ ‫صفت‬‫متناسب‬‫با‬‫مقدار‬‫صفت‬shape‫تغییر‬‫می‬‫کند‬. ‫برای‬‫مثال‬:Coords=“233,234,273,204,193,204” ‫صفت‬shape ‫در‬‫این‬‫صفت‬‫نوع‬‫ناحیه‬‫مورد‬‫نظر‬‫را‬‫تعریف‬‫می‬‫کنیم‬.‫از‬rect‫برای‬‫تعریف‬،‫مستطیل‬‫از‬circle‫برای‬‫تعریف‬‫دایره‬‫و‬‫از‬poly ‫برای‬‫تعریف‬‫چندضلعی‬‫استفاده‬‫می‬‫کنیم‬. 233,234 273,204193,204 25,35 65,55 12,18 25,35 45,35 48,45 45,55 20,45 25,55 ‫صفحه‬40

41. ‫صفت‬href ‫در‬‫این‬‫صفت‬URL‫مورد‬‫نظر‬‫را‬‫وارد‬‫می‬‫کنید‬. ‫صفت‬target ‫کاربرد‬‫این‬‫صفت‬‫همانند‬‫کاربرد‬‫آن‬‫در‬‫تگ‬<a>‫می‬‫باشد‬. ‫صفحه‬41

42. ‫در‬ ‫جداول‬HTML(HTML Tables) ‫از‬‫تگ‬<table>…</table>‫جهت‬‫تعریف‬‫جدول‬‫استفاده‬‫می‬‫نماییم‬. ‫هر‬‫جدول‬‫متشکر‬‫از‬‫چند‬‫سطر‬‫می‬،‫باشد‬‫برای‬‫تعریف‬‫سطر‬‫از‬‫تگ‬<tr>…</tr>‫استفاده‬‫می‬‫نماییم‬. ‫هر‬‫سطر‬‫از‬‫چندین‬‫سلول‬‫داده‬(‫ستون‬)‫تشکیل‬‫شده‬‫است‬.‫برای‬‫تعریف‬‫سلول‬‫ها‬‫از‬‫تگ‬<td>…</td>‫استفاده‬‫می‬‫نماییم‬. <table> <tr> <td>…………</td> <td>…………</td>- . . </tr> . . </table> ‫صفحه‬42

43. ‫در‬‫تگ‬<table>‫از‬‫صفت‬border‫جهت‬‫تعیین‬‫ضخامت‬‫لبه‬‫های‬‫جدول‬‫استفاده‬‫می‬‫شود‬‫که‬‫مقدار‬‫آن‬‫برحسب‬pixel‫می‬‫باشد‬. ‫های‬‫تگ‬‫بکار‬‫رفته‬‫در‬‫تگ‬<table>‫عبارتنداز‬: <tr>,<td>,<th>,<thead>,<tbody>,<tfoot>,<col>,<caption>,<colgroup> ‫تگ‬<tr>…</tr> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫سطرهای‬‫جدول‬‫استفاده‬‫می‬‫شود‬. ‫تگ‬<td>…</td> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫سلول‬‫های‬‫داده‬‫یا‬‫همان‬‫ستون‬‫های‬‫جدول‬‫استفاده‬‫می‬‫شود‬‫مهمترین‬‫صفت‬‫های‬‫بکار‬‫رفته‬‫در‬‫این‬‫تگ‬ ‫عبارتند‬‫از‬: ‫صفت‬colspan ‫از‬‫این‬‫صفت‬‫جهت‬‫ادغام‬‫سلولها‬‫با‬‫یکدیگر‬‫استفاده‬‫می‬‫کنیم‬.‫برای‬‫مثال‬‫اگر‬‫مقدار‬‫این‬‫صفت‬‫را‬2‫بدهیم‬‫عرض‬‫سلول‬‫مورد‬‫نظر‬ ‫به‬‫اندازه‬‫ی‬‫عرض‬2‫سلول‬‫می‬‫شود‬ ‫صفحه‬43

44. ‫صفت‬rowspan ‫از‬‫این‬‫صفت‬‫جهت‬‫ادغام‬‫سطرها‬‫با‬‫یکدیگر‬‫استفاده‬‫می‬‫کنیم‬.‫برای‬‫مثال‬‫اگر‬‫مقدار‬‫این‬‫صفت‬‫را‬2‫بدهیم‬‫ارتفاع‬‫سلول‬‫مورد‬‫نظر‬ ‫به‬‫اندازه‬‫ی‬‫ارتفاع‬2‫سطر‬‫می‬‫شود‬. Rowspan=“2” Colspan=“2” ‫تگ‬<thead>…</thead> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫یک‬‫گروه‬‫هدر‬‫برای‬‫ستون‬‫های‬‫جدول‬‫استفاده‬‫می‬‫شود‬.‫این‬‫تگ‬‫درون‬‫تگ‬<table>‫بعد‬‫از‬‫تگ‬‫های‬ <caption>‫و‬<colgroup>‫و‬‫قبل‬‫از‬‫تگ‬‫های‬<tbody>‫و‬<tfoot>‫بکار‬‫می‬‫رود‬. ‫در‬‫تگ‬<thead>‫از‬‫تگ‬<tr>‫جهت‬‫تعریف‬‫سطر‬‫ها‬‫و‬‫از‬‫تگ‬<th>‫بجای‬<td> ‫جهت‬‫تعریف‬‫ستون‬‫ها‬(‫هدرهای‬‫ستون‬‫ها‬)‫استفاده‬‫می‬‫نماییم‬.‫محتوای‬<th>‫کمی‬ ‫ضخیم‬‫تر‬‫از‬‫محتوای‬‫سایر‬‫سلولهای‬‫جدول‬‫نمایش‬‫داده‬‫می‬‫شود‬. <thead> <tr> <th>……</th> </tr> </thead> ‫صفحه‬44

45. ‫تگ‬<th>…</th> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫هدر‬‫برای‬‫ستون‬‫ها‬‫استفاده‬‫می‬‫نماییم‬. ‫تگ‬<tbody>…</tbody> ‫بدنه‬‫اصلی‬‫جدول‬‫خود‬‫را‬‫درون‬‫این‬‫تگ‬‫قرار‬‫می‬‫دهیم‬.‫سطرها‬‫با‬<tr>‫و‬‫سلول‬‫ها‬‫با‬<td>‫تعریف‬‫می‬‫شوند‬. ‫تگ‬<tfoot>…</tfoot> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬footer‫برای‬‫جدول‬‫خود‬‫استفاده‬‫می‬‫کنیم‬. ‫نکته‬: ‫کارایی‬‫تگهای‬<thead>‫و‬<tbody>‫و‬<tfoot>‫بیشتر‬‫در‬‫هنگام‬‫پرینت‬‫گرفتن‬‫از‬‫سند‬HTML‫مشخص‬‫می‬‫شود‬.‫اگر‬‫از‬‫یک‬ ‫جدول‬‫طوالنی‬‫در‬‫سند‬‫خود‬‫استفاده‬،‫کنید‬‫این‬‫جدول‬‫به‬‫هنگاه‬‫پرینت‬‫گرفتن‬‫چندین‬‫صفحه‬‫را‬‫اشغال‬‫می‬‫کند‬‫اینجاست‬‫که‬ ‫محتویات‬‫های‬‫تگ‬<thead>‫و‬<tfoot>‫به‬‫صورت‬‫اتوماتیک‬‫در‬‫تمامی‬‫صفحات‬‫چاپی‬‫شما‬‫ابتدا‬‫و‬‫انتهای‬‫جدول‬‫درج‬‫گردند‬‫می‬. ‫این‬‫تگ‬‫ها‬‫همچنین‬‫در‬‫زمینه‬SEO‫اطالعات‬‫مفیدی‬‫راجع‬‫به‬‫نحوه‬‫طبقه‬‫بندی‬‫جداول‬‫شما‬‫به‬‫موتورهای‬‫جستجو‬‫می‬‫دهند‬. ‫صفحه‬45

46. ‫تگ‬<caption>…</caption> ‫از‬‫این‬‫تگ‬‫جهت‬‫درج‬‫یک‬‫عنوان‬‫مناسب‬‫برای‬‫جدول‬‫استفاده‬‫می‬‫کنیم‬.‫این‬‫تگ‬‫باید‬‫بالفاصله‬‫بعد‬‫از‬‫تگ‬<table>‫بکار‬‫رود‬. ‫الزم‬‫به‬‫ذکر‬‫است‬‫که‬‫هر‬‫جدول‬‫تنها‬‫می‬‫تواند‬‫یک‬‫عنوان‬‫داشته‬‫باشد‬.‫تعریف‬‫عنوان‬‫برای‬‫جدول‬‫از‬‫لحاظ‬‫تکنیک‬‫های‬SEO‫نیز‬ ‫اهمیت‬‫دارد‬‫چراکه‬‫به‬‫موتورهای‬‫جستجو‬‫می‬‫فهماند‬‫که‬‫محتویات‬‫جدول‬‫شما‬‫در‬‫رابطه‬‫با‬‫چه‬‫موضوعی‬‫است‬. ‫تگ‬<colgroup>…</colgroup> ‫از‬‫این‬‫تگ‬‫جهت‬‫گروه‬‫بندی‬‫ستون‬‫های‬‫جدول‬‫به‬‫منظور‬‫اعمال‬‫فرمتی‬‫خاص‬‫بر‬‫روی‬‫آنها‬‫استفاده‬‫می‬‫کنیم‬.‫مفیدترین‬‫کاربرد‬ ‫آن‬‫اعمال‬‫یک‬style‫بروی‬‫چند‬‫ستون‬‫می‬‫باشد‬.‫این‬‫تگ‬‫بعد‬‫از‬‫تگ‬<caption>‫و‬‫قبل‬‫از‬‫تگ‬<thead>‫بکار‬‫می‬‫رود‬.‫درون‬ ‫این‬‫تگ‬‫از‬‫تگ‬<col>‫به‬‫منظور‬‫تعریف‬‫ستون‬‫ها‬‫استفاده‬‫می‬‫کنیم‬.‫مهمترین‬‫صفت‬‫تگ‬<col>‫صفت‬span‫می‬‫باشد‬‫که‬‫به‬ ‫واسطه‬‫آن‬‫تعداد‬‫ستون‬‫های‬‫انتخاب‬‫شده‬‫را‬‫تعیین‬‫می‬‫کنیم‬.‫برای‬‫مثال‬‫اگر‬‫مقدار‬‫آن‬‫را‬2‫بدهیم‬‫دو‬‫ستون‬‫پشت‬‫سر‬‫هم‬‫در‬ ‫یک‬‫دسته‬‫قرار‬‫می‬‫گیرند‬. Span=“3” Span=“2” Span=“1” ‫صفحه‬46

47. Caption of Table <table> <captipn>caption of table</caption> <colgroup> <col span=“2” /> </colgroup> <thead> <tr> <th>……</th> <tr> </thead> <tbody> <tr> <td>……</td> </tr> </tbody> <tfoot> <tr> <td>……</td> </tr> </tfoot> </table> ‫صفحه‬47

48. ‫در‬ ‫ها‬ ‫لیست‬HTML(HTML List) ‫مرتب‬ ‫لیست‬<ol>…</ol> ‫از‬‫این‬‫تگ‬‫جهت‬‫تعریف‬‫لیست‬‫های‬‫مرتب‬‫استفاده‬‫می‬‫شود‬.‫عناصر‬‫بکار‬‫رفته‬‫در‬‫این‬‫تگ‬‫باید‬‫بین‬‫تگ‬<li>….</li>‫قرار‬ ‫گیرند‬.‫صفات‬‫بکار‬‫رفته‬‫در‬‫این‬‫تگ‬‫عبارتند‬‫از‬: Reversed:‫ترتیب‬‫شمارش‬‫را‬‫معکوس‬‫می‬‫کند‬.‫این‬‫صفت‬‫در‬‫حال‬‫حاضر‬‫فقط‬‫در‬‫مرورگر‬

#name presentations

Add a comment