جلسه دوم : <!DOCTYPE> چیست ؟ و چرا باید استفاده کنیم.

سلام دوستان.اول منو باید ببخشید که دیر به دیر این بخش رو به روز رسانی می کنم ، دوم امیدوارم مطالب قبلی رو خوب مطالعه کرده باشید.سوم هم که بریم سراغ درس این جلسه 😉

درس این جلسه معرفی کامل تگ <!DOCTYPE> خواهد بود .نیار نیست درس این جلسه رو حفظ کنید ، فقط یاد بگیرید و بلد باشید این تگ چیه ، و چه کاربردی داره ، بعد هم مقدار <!DOCTYPE>رو در صفحات خودتون copy و paste کنید.همین.

خیلی جالبه با این که تگ <!DOCTYPE> بسیار با اهمیت هست ولی در منابع فارسی بحث خاصی روی این تگ نشده !!!!!!!!! که در نوع خودش خیلی جالبه.؟ 😉 در واقع این مبحث راز طراحان حرفه ای ایران شده که من امروز می خوام اون رو فاش کنم 😉

معنی <!DOCTYPE> : نوع سند را معرفی می کنه (خوب یعنی چی ؟) یعنی به مرورگر می فهماند صفحه وبی که شما طراحی کردید از چه نوعی است (از چه سندی است) مثلا : html4 , html1 , html5 و …

کاربرد <!DOCTYPE> : خیلی خلاصه و مفید بخوام بگم ، این تگ باعث استاندارد شدن صفحه و نمایش یکسان صفحه در تمام مرورگر ها (Internet Explorer,Mozilla Firefox و …) خواهد شد.خوب اگه از خودتون می پرسید چطور ؟؟؟ باید بگم شما با قرار دادن تگ در سطر اول کد خودتون ،  در واقع به تمام مرورگر ها می فهمانید که نوع کد شما چی هست ، در این صورت مرورگر ها معمولا این صفحه را به یک شکل رندر می کنند (می خوانند).این تگ برای سئو هم موثر است ، در کل اگر می خواهید یک صفحه وب استاندارد بنویسید حتما این تگ را استفاده کنید.

انواع <!DOCTYPE> :

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

خلاصه مطلب : من تمام سعی خودم رو کردم تا مطلب رو کامل و ساده بنویسم ولی اگر شما زیاد متوجه نشدید مهم نیست ، فقط قبل از تگ <html> یکی از <!DOCTYPE> بنویسید.و همین رو بدونید که این تگ باعث استاندارد شدن صفحه شما می شه.من در صفحات طراحی وب خودم و همچنین در این آموزش از نوع HTML 5 استفاده می کنم و به شما هم پیشنهاد می کنم از این نوع استفاده کنید.

ساختار کلی HTML استاندارد :

<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.
</body>
</html>

باز هم تاکید می کنم نیاز به حفظ کردن این سند ها نیست فقط در صفحهتون copy و paste کنید.لازم به ذکر هست که تا جلسه آخر این مجموعه ی آموزشی ، از ساختار کلی بالا استفاده خواهد شد.منتظر جلسه بعد باشد به اهمیت این جلسه شک نکنید.

موفق باشید یا حق / علی بهنام فر

نظرات و دیگر موارد
اگر این قالب را دوست دارید امتیاز دهید :
۱۰۰ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. رضا در مارس 5, 2016 ساعت 11:52 ق.ظ  گفته :

    متشکر بدردم خورد

  2. سلام خسته نباشید //بنده یه وبلاگ را از صفر طراحی کردم ولی هاست میزبان بلاگفا نمی زاره عرض صفحه وبلاگ بیشتر بشه گیر این مشکل افتادم حتی از برنامه دریم ویور و جاوا ادیتور استفاده کردم نتیجه همونه

  3. سلام خسته نباشید //بنهد یه وبلاگ را از صفر طراحی کردم ولی هاست میزبا بلاگفا نمی زاره عرض صفحه وبلاگ بیشتر بشه گیر این مشکل افتادم حتی از برنامه دریم ویور و جاوا ادیتور استفاده کردم نتیجه همونه

  4. راز مینویسی یا کس شعر مرد؟
    یکم مطالعه بیشتر بکنی ضرری نمیبینی!

  5. بسیار عالی.. ممنون از آموزش خوبتون.

  6. سلام ممنون از مطلب خوبتون و البته سایت خوبتون اگه برای سایت کانالی در تلگرام بسازین تا مطالب رو راحتر ببینیم خوب میشه البته دنبال کننده هم زیاد میشه

  7. سلام.سایت خوبی دارین عالی هست
    دوستان اگه اچ تی ام ال خودتون رو به اچ تی ام ال ۵ اپدیت کردین حتما وارد سایت validator.w3.org شین ادرس سایت خودتون رو وارد کنید روی چک کلیک کنید ارور ها رو برطرف کنید چون تو اچ تی ام ال ۵ تگ یه مقدار عوض شده رو سئو سایت تاثیر داره

  8. mina در می 18, 2015 ساعت 10:30 ق.ظ  گفته :

    سلام
    عالییییییییییییییییی

  9. با درود
    ممنون از زحمات بی دریغ شما
    من نمیدونم این مطلب رو در چه تاریخی انتشار کردین و فرمودین که از html5 استفاده کنیم. اما نوت پد پلاس پلاسی که من از سایت خود نوت پد دانلود کردم ورژن ۶ هست. (ورژن دقیقش ۶٫۷٫۵) آیا این نسخه ش خوبه یا نه؟ تگ این بسخه چی میشه؟

  10. خیلی خوب بود دستت درد نکنه

  11. سلام؛
    آقای بهنام فر، برادر گلم، عزیز میگم من باید الآن از کدوم یکی از اینا استفاده کنم؟!! یعنی منظورم برای سیستم بلاگفا هست!
    فی امان الله …

  12. احسنت!
    مقاله بامزه ای بود !
    آفرین به شما

  13. دوست عزیز ، سلام ؛
    عذر میخوام ، میخواستم بدونم که برای سرویس مدیریت محتوای وردپرس باید توی شاخه استایل.سی اس اس این کد رو قرار بدیم؟

    ممنون از زحماتت

    • دوست من اگر منظور شما تگ زیر هست.

      <!DOCTYPE html>
      

      این تگ در صفحه index شما قرار خواهد گرفت.و اگر از قالب های اماده استفاده می کنید احتمالا این کد از قبل وجود دارد.

  14. گر فایده بردی ز پستی بنویس نظری تا بشود راضی 🙂

  15. جالب هستند فقط زود تر بنویسید تا وبلاگ نویس های جوان در کارهاشون زود تر موفق بشن!
    تونستین درمورد وبلاگ من هم قضاوت کنین:
    amirmzahery78.mihanblog.com

  16. با عرض سلام و احترام
    تشکر فراوان از زحمات شما، از این پست سایت شما برای آموزش اچ تی ام ال در سایت کمپانی وردپرس استفاده کردیم.
    آدرس پست:
    http://wpco.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html-%d8%ac%d9%84%d8%b3%d9%87-%d8%af%d9%88%d9%85-doctype/

  17. […] بگذارم که برای انشار یک آموزش قوی و ساده از سایت های تم دیزاینر و سون لرن استفاده کنم. ( نام این سایت ها را به آموزشی […]

  18. سلام
    از اینکه انقدر ساده و روان توضیح دادین خیلی خیلی ممنون
    من که به دردم خورد
    ولی من دنبال کدهای دیگه هم هستم
    مجبور هستم یک پروژه ی طراحی سایت رو در عرض چند روز کوتاه به طور کامل یاد بگیرم ولی هیچ راهی جلو روم برا یادگیری ندارم. jخیلی ممنون میشم اگر کمکم کنید و برا ایمیلم بفرستین
    موفق باشید