آموزش جامع HTML
در درس قبلی، با عناصر HTML به عنوان بلوک‌های ساختاری صفحات وب و صفت‌های HTML به عنوان مکانیزم تعیین ویژگی‌های عناصر آشنا شدیم و دیدیم که یک صفحه‌ی وب استاندارد از سه عنصر پایه‌ای با نام‌های html، head و body تشکیل می‌شود. در این درس، قصد داریم در مورد این سه عنصر پایه‌ای و جزئیات مربوط به آنها صحبت کنیم. علاوه بر این، در مورد یک تگ ویژه با نام doctype نیز صحبت می‌کنیم که البته یک تگ HTML نیست اما به دلایلی که خواهیم گفت، باید حتماً در ابتدای هر سند HTML آورده شود.
اولین خطی که در هر سند HTML دیده می‌شود، مربوط به تگی با نام doctype است که معمولاً به صورت زیر آورده می‌شود:
HTML
<!doctype html>شاید شنیده باشید که تگ doctype روشی برای اعلام نسخه‌ی HTML به مرورگر است اما حقیقت این است که از بعد از تعیین HTML به عنوان یک living standard فلسفه‌ی تگ doctype تغییر کرده و تنها هدف این تگ این است که از تغییر مود تفسیر (rendering mode) مرورگر به quirks mode در هنگام تفسیر صفحه جلوگیری کند. اما منظور از مود تفسیر و quirks mode چیست؟ برای توضیح مطلب، ناگزیر از نبش قبر و فلش‌بک زدن به گذشته هستیم.
در روزهای ابتدایی وب، معمولاً صفحات وب در دو نسخه نوشته می‌شدند: یکی برای مرورگر Microsoft IE و نسخه‌ی دیگر برای مرورگر Netscape Navigator. وقتی W3C تأسیس شد و استاندارهای وب پایه‌گذاری شدند، مرورگرها نمی‌توانستند به راحتی استفاده از ویژگی‌های استاندارد شده را شروع کنند زیرا با این کار برای نمایش سایت‌های قدیمی با مشکل مواجه می‌شدند. بنابراین، مرورگرها دو مود تفسیر با نام‌های quirks mode و standards mode را معرفی کردند که از اولی برای تفسیر صفحات قدیمی و از دومی برای تفسیر صفحات وب با تکیه بر مشخصات و ویژگی‌های جدید، استفاده می‌کردند. مرورگرهای امروزی سه مود تفسیر دارند:
حالا سوال مهم این است که: مرورگرها از کجا می‌فهمند که باید صفحه را در کدام مود تفسیر کنند؟
در مورد اسناد HTML، مرورگرها از تگ doctype در ابتدای سند برای تعیین مود تفسیر استفاده می‌کنند. آوردن یک تگ doctype به صورت بالا در ابتدای سند، برای مرورگر به این معناست که باید صفحه را در full standard mode تفسیر کند.
این فرم از تگ doctype یعنی <!doctype html> ساده‌ترین فرم ممکن برای doctype است و در HTML5 معرفی شد. ورژن‌های قبلی استاندارد HTML نیاز به فرم‌های پیچیده‌تری از doctype داشتند. در حقیقت، نسخه‌های قبلی استاندارد HTML حتی کاربردهای اضافه‌ای را نیز برای تگ doctype قائل بودند اما هیچ مرورگری هیچ‌وقت از تگ doctype برای چیزی جز جابجایی بین مودهای تفسیر standard و quirks استفاده نکرده است. بنابراین، دلیلی برای استفاده از فرم‌های پیچیده‌تر doctype که به نسخه‌های قبلی HTML مربوط می‌شوند، وجود ندارد.
امروزه همه‌ی مرورگرهای موجود (حتی مرورگر کهنسالی مانند IE6) وجود یک تگ doctype به فرم <!doctype html> را به معنای فعال‌کردن مود تفسیر full standard می‌داند. پس، حتماً در ابتدای صفحات خود از یک تگ doctype به همین فرم استفاده کنید. تأکید می‌کنم که تگ doctype را باید در ابتدای سند خود قرار دهید، در غیر این صورت، مرورگرهایی مانند IE9 و نسخه‌های قبل‌تر این مرورگر، ممکن است به اشتباه quirks mode را فعال کنند.
بسیار خوب. حالا که با نقش تگ doctype و اهمیت و نحوه‌ی استفاده از آن آشنا شدیم، می‌توانیم به بررسی عناصر پایه‌ای HTML بپردازیم. کار را با عنصر html شروع می‌کنیم.
یک سند HTML را می‌توان به عنوان یک مجموعه از عناصر در نظر گرفت که به صورت یک درخت سلسله‌مراتبی (hierarchical tree) تودرتو شده‌اند. ریشه‌ی این ساختار درختی، عنصر html است و سایر عناصر HTML فرزندان این عنصر محسوب می‌شوند. البته تنها عنصرهایی که می‌توانند مستقیماً درون این عنصر قرار بگیرند و به عبارتی، فرزندان مستقیم عنصر html هستند، عناصر head و body هستند. پس، هر سند HTML بعد از تگ doctype با یک تگ باز <html> شروع شده و با تگ بسته </html> به پایان می‌رسد.
در نسخه‌های قدیمی استاندارد HTML، عنصر html از صفت‌های زیر پشتیبانی می‌کرد:
به طور کلی، دلیلی برای استفاده از این دو صفت برای عنصر html در صفحات وب امروزی وجود ندارد. تنها صفتی که باید برای عنصر html تنظیم کنیم، صفت lang است که همانطور که قبلاً هم گفتیم، یک صفت global است که وقتی برای عنصر html تعیین شود، زبان اصلی محتوای سند را مشخص می‌کند.
HTML
<html lang="en">برای صفحات وب با محتوای فارسی باید صفت lang را با مقدار fa برای عنصر html به کار ببریم و اگر در هر جایی از صفحه عنصری با محتوای غیر فارسی داریم، مقدار مناسب را به صفت lang آن عنصر اختصاص دهیم.
در مورد صفت lang باید بدانید که اگر از این صفت استفاده نکنیم، مرورگرها و سایر نرم‌افزارهای مفسر برای تشخیص زبان محتوای صفحه به سیستم‌عامل مراجعه می‌کنند. مثلاً یک نرم‌افزار صفحه‌خوان (screen reader) که یک مفسر HTML است که کدهای صفحه را تفسیر کرده و به جای نمایش صفحه به شکل بصری، نتیجه را به صورت صوتی برای کاربر می‌خواند و یکی از ابزارهای مفید بخصوص برای افراد دارای مشکلات بینایی است، برای تلفظ صحیح باید زبان سند را بداند.
همانطور که گفته شد، عنصر head در یک سند HTML شامل متادیتا (metadata) است. متادیتا اطلاعاتی در مورد خود سند HTML و یا اطلاعاتی در مورد نحوه‌ی پردازش صفحه توسط مرورگر (مفسر) است. این اطلاعات در یک سند HTML شامل مواردی مانند عنوان اصلی صفحه، مجموعه‌ی کاراکتری صفحه و لینک به منابع خارجی، استایل‌ها و اسکریپت‌ها می‌باشد. به طور کلی، عناصری که به عنصر head تعلق دارند، قابلیت نمایش توسط مرورگرها را ندارند اما مرورگرها از آنها برای پیکربندی و نمایش صحیح محتوای صفحه استفاده می‌کنند. در جدول زیر لیست عناصری که می‌توانند درون عنصر head باشند، آورده شده است.
| نام عنصر | توضیح |
|---|---|
| title | از این عنصر برای تعیین عنوان اصلی صفحه استفاده می‌شود. محتوای این عنصر در نوار عنوان یا نوار آدرس (address bar) مرورگر نمایش داده می‌شود اما آنچه که به این عنصر اهمیت می‌بخشد این است که موتورهای جستجو برای تشخیص محتوای کلی یک صفحه، محتوای آن را رصد می‌کنند. |
| meta | از این عنصر برای افزودن انواع مختلفی از متادیتا مانند کلمات کلیدی صفحه، مجموعه‌ی کاراکتری و انواع دیگری از متادیتا استفاده می‌شود. |
| link | از این عنصر برای اتصال صفحه به یک منبع خارجی مثل یک استایل‌شیت (فایل CSS) استفاده می‌شود. |
| script | از این عنصر می‌توان برای نوشتن اسکریپت‌های صفحه که معمولاً به زبان جاوااسکریپت هستند، استفاده کرد و یا اینکه فایل اسکریپت خارجی را به صفحه معرفی و لینک کرد. |
| base | این عنصر، مقصد پیش‌فرض لینک‌های نسبی (relative links) صفحه را مشخص می‌کند. |
| style | از این عنصر برای نوشتن استایل‌هایی که باید روی عناصر صفحه اعمال شوند، استفاده می‌شود. |
از بین عناصر جدول بالا title عنصری است که استفاده از آن در صفحات وب اجباری است. یعنی هر صفحه‌ی وبی که شامل این عنصر نباشد، استاندارد نیست. نقش عنصر title همانطور که قبلاً هم اشاره کردیم، تعیین عنوان اصلی سند است. این عنصر از نظر موتورهای جستجو دارای اهمیت ویژه‌ای است و بنابراین، مهم است که از عنوان مرتبط با محتوای صفحه استفاده کنیم.
HTML
<head>
<title>HTML Tutorial</title>
</head>محتوای عنصر title که در مثال بالا عبارت HTML Tutorial است، در نوار عنوان مرورگر نمایش داده می‌شود. البته کارکرد واقعی عنصر title ارائه‌ی عنوان اصلی صفحه به نرم‌افزارهایی مانند موتورهای جستجو و در نتیجه مشخص کردن محتوای کلی صفحه برای آنهاست. توجه داشته باشید که طول عنوان یک صفحه نباید بیشتر از 64 کاراکتر باشد.
صحبت در مورد همه‌ی عناصر جدول بالا به بحث مفصلی نیاز دارد و ما فصل دهم این آموزش را به این کار اختصاص داده‌ایم. اما به هر حال، در این مرحله باید نقش عنصر head و نوع محتوایی که می‌تواند درون این عنصر قرار گیرد، برای شما روشن شده باشد.
وقتی عنصری مانند x درون عنصری مانند y قرار داشته باشد، x را فرزند y و عنصر y را والد x می‌گویند. اصطلاح فرزند مستقیم نیز برای عنصری استفاده می‌شود که مستقیماً درون عنصر والد واقع شده باشد. به عنوان مثال، عنصر title یک فرزند عنصر html و یک فرزند مستقیم عنصر head است.
عنصر body حاوی محتوای قابل نمایش توسط مرورگرهاست و در واقع، می‌توان این عنصر را بدنه‌ی یک سند HTML دانست. هر آنچه که نهایتاً توسط مرورگر نمایش داده می‌شود، به عنصر body تعلق دارد. این عنصر به جز صفت‌های عمومی، صفت دیگری ندارد.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document title</title>
</head>
<body>
<h1>Welcome</h1>
<p>Hello World!</p>
</body>
</html>در مثال بالا از یک عنصر h1 و یک عنصر p درون عنصر body استفاده شده است. h1 عنصری است برای نمایش هدینگ یا تیترهای مطالب در صفحات وب و عنصر p که قبلاً هم آن را دیده‌ایم، برای ایجاد یک پاراگراف کاربرد دارد.
عناصری که می‌توانند به صورت مستقیم یا غیرمستقیم درون عنصر body قرار گیرند، بسیار زیاد هستند و ما در طول این آموزش به صورت گروه‌بندی‌شده با آنها آشنا می‌شویم.
در HTML نیز مانند هر زبان دیگری امکان افزودن توضیحاتی در مورد کدهای صفحه در قالب کامنت‌ها (comments) وجود دارد. این توضیحات که توسط مفسر HTML نادیده گرفته شده و در خروجی نمایش داده نمی‌شوند، با استفاده از سینتکس زیر ایجاد می‌شوند:
HTML
<!--This is a comment-->با استفاده از کامنت‌ها می‌توانیم توضیحاتی را در هر قسمت از کدها قرار دهیم تا کار ویرایش کدها در آینده ساده‌تر شود و خوانایی کدها بیشتر شود. این امر به‌خصوص برای صفحاتی که کدهای زیادی دارند، بسیار مفید است. اهمیت استفاده از کامنت‌ها در پروژه‌های تیمی مشهودتر است.
کامنت‌ها علاوه بر مستندسازی اسناد HTML کاربردهای دیگری هم دارند. به عنوان مثال، می‌توانیم با تبدیل یک یا چند خط از کدها به کامنت، به طور موقت از اجرای آن کدها جلوگیری کنیم. این کار برای پیدا کردن منبع خطاهای احتمالی مفید است.
نوع خاصی از کامنت‌های HTML به نام کامنت‌های شرطی نیز وجود دارد که به مرورگر Internet Explorer مربوط می‌شوند. یک کامنت شرطی باعث می‌شود که کد مورد نظر تنها در صورت برآورده شدن یک شرط مشخص، اجرا شود. فرم کلی یک کامنت شرطی به این صورت است:
HTML
<!--[if operator IE version]>
Content
<![endif]-->در این ساختار، منظور از operator یک عملگر منطقی است، version شماره‌ی نسخه‌ی مرورگر IE است و content کد HTML است که تنها در صورت برقرار بودن عبارت شرطی اجرا می‌شود. در کد زیر از عملگر منطقی lt یا less than که همان عملگر کوچکتری ( < ) است، استفاده شده تا به کاربرانی که از نسخه‌های پایین‌تر از 8 مرورگر IE استفاده می‌کنند، هشدار داده شود که باید مرورگر خود را به‌روزرسانی کنند.
HTML
<!--[if lt IE 8]>
<p>Upgrade your browser to view this page.</p>
<![endif]-->سایر عملگرهای منطقی که می‌توان در کامنت‌های شرطی استفاده کرد عبارتند از:
برای مثال، در کد زیر پاراگراف ایجاد شده تنها برای کاربرانی نمایش داده می‌شود که از مرورگری به جز IE استفاده می‌کنند:
HTML
<!--[if !IE]>
<p>You are not running Internet Explorer.</p>
<![endif]-->توجه داشته باشید که اگر شماره‌ی نسخه را وارد نکنید، کامنت شرطی روی همه‌ی نسخه‌های IE اعمال می‌شود.
علت نیاز به کامنت‌های شرطی، تفاوت‌های محسوسی است که مرورگر IE با سایر مرورگرها دارد. البته خوشبختانه مایکروسافت این مرورگر را به نفع مرورگر مدرن Edge کنار گذاشته اما با این حال، ممکن است با این کامنت‌ها در وبسایت‌های قدیمی مواجه شوید.