چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
احتمالا تا به حال در مورد ظاهر و امکانات سایت یا وبلاگمان به مشکلات حل نشدنی برخورده ایم که با وجود صرف ساعت ها وقت و انرژی نتوانسته باشیم آنها را حل کنیم، گذشته از اینکه برنامه نویس حرفه ای یا وبمستر و وبلاگ نویس باشیم همه به نوعی با این نوع مشکلات روبرو شده ایم و کماکان و گاه و بیگاه می شویم، برخی از این مسائل به دلایلی مانند خطا در کدنویسی یا جا انداختن تگ ها به خصوص در هنگام تعریف قابلیت های پیچیده به فرض در ترسیم جداول (table) ممکن است رخ دهند، یا گاهی خطا در کدهای جاوا اسکریپت، تنظیمات نادرست خاصیت ها در CSS، خطاهای سرور و... ممکن است باعث ایجاد اختلال در عملکرد مورد انتظارمان از سایت یا وبلاگ شود، اما از همه اینها گذشته یک مورد به ظاهر ساده اما بعضا دردسرساز را هم نباید از قلم انداخت و آن در نظر گرفتن DOCTYPE مناسب در سورس کد صفحات HTML است، از این رو یادداشت پیش رو نگاهی خواهد داشت به چرایی و چگونگی استفاده درست از DOCTYPE در صفحات وب.
DOCTYPE چیست؟
DOCTYPE جزء تگ های HTML نیست و صرفا یک عبارت راهنما است که در بالاترین قسمت صفحه وب درج و به کمک آن نوع سند تعیین و بر همان اساس کدهای HTML توسط مرورگرها پردازش می شود، از آنجایی که کنسرسیوم جهانی وب (W3C) نسخه های مختلفی از زبان HTML (مخفف HyperText Markup Language) را ارائه نموده که هر کدام در مقایسه با هم تفاوت هایی هرچند بعضا جزئی دارند، بدون تعیین نوع سند ممکن است مرورگر در تشخیص صحیح نسخه HTML استفاده شده دچار اشتباه شود و تنظیمات پیش فرض خود را اعمال کند که در نتیجه پردازش امکانات و عناصر ظاهری صفحه در مرورگرهای مختلف متفاوت شده و ممکن است با حالت مورد انتظارمان تطبیق نداشته باشد، به همین دلیل برای جلوگیری از بروز چنین مشکلاتی از عبارت راهنمای DOCTYPE در بالاترین قسمت صفحه وب استفاده می کنیم تا نوع نسخه HTML برای مرورگرهای مختلف قابل تشخیص باشد.
استفاده از DOCTYPE اجباری یا اختیاری؟
به طور کلی استفاده از DOCTYPE در صفحات وب اختیاری است یعنی اگر هم از این عبارت استفاده نکنیم صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این عبارت استفاده کنیم (به خصوص برای صفحاتی که از HTML نسخه های ماقبل 5 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از DOCTYPE در وب امروز در عمل اجباری است و بدون در نظر گرفتن این عبارت علاوه بر اینکه ممکن است صفحات وب به درستی در مرورگرهای مختلف پردازش و نمایش داده نشوند از نظر اعتبارسنجی (Validation) سورس کدها نیز معتبر نیستند که این امر در SEO (مخفف Search Engine Optimization یا بهینه سازی برای موتورهای جستجو) بر کسب امتیاز و رتبه سایت، وبلاگ و در کل صفحات وب تاثیر منفی خواهد داشت.
برای اعتبارسنجی کدهای خود و اطمینان از استفاده صحیح DOCTYPE می توانیم به آدرس
http://validator.w3.org
مراجعه کنیم.تعریف DOCTYPE در HTML نسخه های قدیمی
اشاره شد که استفاده از DOCTYPE به خصوص در نسخه های ماقبل HTML 5 به طور مثال HTML 4.01 و XHTML 1.0 در عمل اجباری است، هر کدام از این نسخه ها در تعریف DOCTYPE به چند نوع فایل DTD (مخفف Document Type Definition) مختلف برای هدف های متفاوتی ارجاع می دهند، فایل های DTD حاوی قوانین استانداردی هستند که مرورگرها با پیروی از آنها تگ های مجاز و ساختار کدنویسی صفحه را پردازش و نوع سند را درک می کنند، در ادامه نحوه تعریف DOCTYPE در HTML نسخه های قدیمی را جهت آشنایی بیشتر بررسی می کنیم.
نکته: بزرگی و کوچکی حروف در هنگام تعریف DOCTYPE تفاوتی ندارد (Case-insensitive) اما شیوه توصیه شده W3C به صورت نمونه های زیر است.
- استاندارد HTML 4.01 Strict
در این نسخه مرورگر از استاندارد یک فایل با نام strict.dtd پیروی می کند و طبق قوانین این فایل استفاده از استایل CSS (مخفف Cascading Style Sheets) برای کدنویسی استاندار صفحات وب مجاز بوده و توصیه شده، در مقابل استفاده از تگ فریم ست (frameset)، نوشتن متون در خارج از چارچوب تگ های استاندارد، استفاده از صفت هایی مانند bgcolor، استفاده از برخی تگ های HTML منسوخ شده (مانند font) و... به لحاظ استاندارد کدنویسی مجاز نیست و نباید در سورس صفحه وب استفاده شود، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- استاندارد HTML 4.01 Transitionalنسخه Transitional در مقایسه با استاندارد Strict محدودیت کمتری دارد و استفاده از خاصیت های معرف ویژگی های ظاهری (مانند bgcolor، background و...) در آن مجاز است (البته تا آنجا که می شود بهتر است برای جلوه های ظاهری از استایل CSS به جای خاصیت های تگ های HTML استفاده کنیم)، این استاندارد برای سازگاری با مرورگرهای خیلی قدیمی که از CSS پشتیبانی نمی کنند نیز مناسب است، استفاده از تگ فریم ست (frameset) در این نسخه مجاز نمی باشد، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- استاندارد HTML 4.01 Framesetدستورالعمل فایل DTD در این نسخه دقیقا مشابه نسخه HTML 4.01 Transitional است، با این تفاوت که در اینجا استفاده از تگ frameset مجاز است، تگ frameset برای صفحاتی به کار می رود که مبتنی بر فریم یا صفحات خارجی هستند و با قرار دادن تگ های frame در درون تگ frameset امکان فرمت بندی و تنظیم موقعیت سطرها و ستون ها (Rows و Columns) میسر می شود، به طور مثال:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="fa">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | استفاده از تگ frameset در HTML</title>
<!-- Webgoo.ir -->
</head>
<frameset cols="30%,40%,30%" rows="33%,33%,33%" border="1">
<frame src="frame-1.htm" frameborder="1">
<frame src="frame-2.htm" frameborder="1">
<frame src="frame-3.htm" frameborder="1" >
</frameset>
</html>
نمونه کد صفحه وب بالا از سه فریم متفاوت خارجی استفاده می کند که در قسمت src آدرس دهی شده اند، نکته جالب اینکه در کدنویسی صفحه از تگ body استفاده نشده است.- استاندارد XHTML 1.0 Strict
کنسرسیوم جهانی وب (W3C) با هدف توسعه و انعطاف پذیری بیشتر HTML و پشتیبانی از قابلیت های زبان XML (مخفف Extensible Markup Language) در صفحات وب نسخه ترکیبی از HTML و XML را با نام XHTML (مخفف Extensible HyperText Markup Language) معرفی کرده است، در این استاندارد قواعد زبان HTML ساده توسعه یافته و با قواعد XML ترکیب شده است، از آنجایی که HTML متداول خود از استاندارد SGML (مخفف Standard Generalized Markup Language) پیروی می کند و به این خاطر نسبت به XML محدودیت هایی دارد استفاده از XHTML به جهت سازگاری و در اختیار قرار دادن امکانات بیشتر توسط W3C توصیه شده است.
در استاندارد XHTML 1.0 Strict تقریبا تمام قواعد HTML 4.01 Strict به طور یکسان وجود دارد، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند (به طور مثال تگ های یکتا باید با یک / بسته شوند مانند </ br>)، همچنین امکان استفاده از قابلیت هایی مانند CDATA وجود دارد، CDATA برای ترکیب کدهای JavaScript و XHTML استفاده می شود و به این شیوه امکان تجزیه صحیح سورس کدها برای برنامه ها ممکن می شود به فرض:
<script type="text/javascript">
//<![CDATA[
document.write("XHTML + JavaScript");
//]]>
</script>
برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- استاندارد XHTML 1.0 Transitionalاین استاندارد نیز مشابه HTML 4.01 Transitional است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- استاندارد XHTML 1.0 Framesetاین استاندارد نیز مشابه HTML 4.01 Frameset است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
تعریف DOCTYPE در HTML5
HTML در نسخه 5 (جدیدترین نسخه در حال حاضر) از استاندارد SGML (مخفف Standard Generalized Markup Language) پیروی نمی کند لذا در این نسخه به فایل های DTD ارجاع نمی دهیم و به دستورالعمل های این فایل احتیاجی نداریم، در سند HTML5 تنها کافی است DOCTYPE را به شکل زیر درج کنیم:
<!DOCTYPE html>
به طور مثال این یک نمونه کدنویسی صفحه وب در HTML نسخه 5 است:<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمونه ای از یک سند HTML5</title>
<!-- Webgoo.ir -->
</head>
<body>
<p>نمونه کدنویسی صفحه وب در HTML نسخه 5</p>
</body>
</html>
در واقع استفاده از DOCTYPE در HTML نسخه 5 بسیار ساده و کوتاه شده است و علاوه بر این خیلی از سختگیری های نسخه های قبلی در HTML5 وجود ندارد به فرض استفاده از تگ br در هر دو حالت زیر مجاز است:<br>
<br />
همچنین هنگام ترکیب کدهای JavaScript و HTML نیازی به در نظر گرفتن CDATA نیست.نحوه متحرک ساختن متن با تگ marquee در HTML
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
واقعا خسته نباشید
جامع بود
با تشکر از زحمات سایت مفید شما
خیلی ممنون از موضوع خوبی که اشاره کردید
من توی وبلاگم از کد HTML 4.01 Transitional در اولین خط ویرایش قالب استفاده کردم اما قالب وبلاگم رو بهم ریخت وقتی حذفش میکنم حالت نمایش قالبم درست میشه لطفاً اگه امکانش هست راهنماییم کنید که مشکل به خاطر چی هست؟ چطور میتونم از ساختار DOCTYPE در وبلاگم استفاده کنم.
بازم ممنون
واقعا دستتون درد نکنه
یعنی من میخوام تو اچ تی ام ال 5 با
<!DOCTYPE html>
کی گفتین استفاده کردم حالا متاتگ هام رو ببندم یا خیر؟یا فقط
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
این نیازی به بستن نداره و بقیه متا تگ ها دارن؟تگ هایی مثل
<input><br>
نیازی به بستن داره یا خیر؟تگ
<img>
چطورنکته 1: عدم درج علامت / در انتها مخصوص تگ های تکی است و شامل تگ های جفتی مانند div، p و... نمی شود.
نکته 2: جهت بررسی و اطمینان از استاندارد بودن کدها می توانید از افزونه های مخصوص توسعه دهنده گان وب که برای مرورگرهای مختلف به صورت پلاگین وجود دارد، استفاده کنید، همچنین با مراجع به آدرس زیر این امکان به صورت مستقیم فراهم است.
http://validator.w3.org
من قبلاً نمی دونستم که باید اول doctype استفاده کنی بعد قالب رو طراحی کنی در واقع هم از css خارجی تو قالبم استفاده کردم و هم به صورت style تکی روی هر تگ البته style های تکی برای هر تگ به صورت موقتی است و بعداً به css اصلی منتقل خواهند شد.
می خواستم راهنمایی کنید به خاطر همین دو شکل تعریف css قالبم به هم می ریزه یا اینکه اشکال کار از یه جای دیگه هستش من دیگه کار خاصی نکردم و فقط ترکیبی از جدول و div درون قالبم استفاده شده و همین من همه ی انواع doctype ها رو امتحان کردم به هم میریزه
با تشکر از سایت خوبتان
در هر صورت استایل خطی به خودی خود مشکلی ایجاد نمی کند، مگر اینکه به فرض در مقدار دهی جایی را اشتباه کرده باشید.
من در حال حاضر در حال انتقال همه ی style های داخل صفحه به css خارجی هستم اما در برخی نقاط دچار مشکل شده ام
همان طور که می دانید تگ table دارای خاصیت هایی مثل cellpadding یا cellspacing می باشد من برای طراحی قالب کلی از جدول استفاده کردم و align آن را center گذاشتم حالا وقتی می خوام به css منتقل کنم در آنجا وارد کردن صفت های فوق جوابگو نیست. مثلاً نمی دانم به جای align باید چه چیزی وارد کنم یا به جای cellspacing یا cellpadding.
در کل زیاد نمی خوام مزاحمتان شوم. می خواستم بدونم آیا راهی هستش یا باید برای طراحی قالب با جدول از css خارجی استفاده نکرد.
طراحی قالب: Photoshop
کد نویسی: Dreamweaver
تا یادم نرفته این را هم بگوییم که من حتماً باید از CSS خارجی استفاده کنم
با تشکر از سایت خوب و پرطرفدارتان
با توجه به اینکه خاصیت cellpadding و... در HTML5 پشتیبانی نخواهند شد، لذا به ناچار باید از CSS استفاده کرد، خاصیت مشابهی که در CSS برای این کار وجود دارد، برای cellpadding می توان همان padding را برای td و th در نظر گرفت و برای cellspacing از border-collapse و border-spacing استفاده کرد، مثال:
<style>
table {
border-collapse:separate;
border-spacing:4px;
}
table td, table th {
padding:8px;
}
</style>
<table width="200" border="1">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
استایل فوق در اکثر مرورگرها به صورت یکسان عمل می کند، منتها در مرورگر اینترنت اکسپلورر تنها از نسخه 8 و مابعد کابرد دارد (اگر نیاز به پشتیبانی از مرورگر اینترنت اکسپلورر 6 و 7 دارید، این روش کاربردی ندارد)، تنها در یک صورت این روش در مرورگر IE 6 ,7 نیز عمل می کند و آن هم در حالتی که border-collapse برابر collapse باشد که این حالت برابرcellspacing="0"
است، مثال:<style>
table {
border-collapse:collapse;
}
table td, table th {
padding:8px;
}
</style>
<table width="200" border="1">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
نتیجه: اگر پشتیبانی از مرورگر اینترنت اکسپلورر 6 و 7 برایتان مهم است (که این روزها اکثر سایت ها دیگر آنها را پشتیبانی نمی کنند)، باید قید این شیوه را بزنید! (مگر در حالت cellspacing صفر)، در غیر این صورت می توان از CSS استفاده کرد.برای algin نیز می توانید از float استفاده کنید، همچنین استایل زیر یک عنصر را در وسط بلاک والد خود تنظیم می کند:
margin-left:auto;
margin-right:auto;
از کجا باید بفهمیم که هر ورژن از هر مرورگر کدوم ورژن html ویا xhtml رو پشتیبانی می کنه؟
با تشکر
با DOCTYPE! میتونم تو صفحات سایتم کدهایی را بزارم که بعد از لود کامل سایت انها لود بشن؟
<script>
window.onload = function(){
yourJsFunction();
}
</script>
وقتی مطلب به زبان فارسی می نویسم در صفحه وب اون رو نمی خونه و بجای متن فارسی علامت های ناخوانا می نویسه
لطفا بهم کمک کنید
در صورت تمایل فایل خود را به صورت فشرده به آدرس ایمیل ما (موجود در بخش تماس) ارسال و پاسخ را از همان طریق پیگیری کنید.
وقت نوشتن کد زمانی مینویسم doctype html بصورت آبی نشان داده میشه ولی وقتی مشخصات html 4.1 و xhtml رو میزارم قرمز نمایش میده (در ویو سورس موزیلا) دلیل این چیه؟ خطایی در کاره؟ (البته میدونم که خطای syntax نمیتونه باشه)
میشه بگین این <iframe> که در پایین body سایت شما است برا چه منظوریه؟
ممنون
ولی منظور من اون <iframe> ای بود که بعد از پایان body و قبل از بستن تگ html اومده
display اش none هست و محتویاتی هم نداره!
بازم مرسی
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.