آشنایی با گرامر HTML

مقدمه

HTML یک زبان برنامه‌نویسی نیست و حرف M در نام این زبان به Markup بودن آن اشاره دارد. زبان‌های Markup (نشانه‌گذاری) به‌هیچ‌وجه پیچیدگی‌های زبان‌های برنامه‌نویسی را ندارند و در HTML و هر زبان نشانه‌گذاری دیگر، خبري از ساختارهای پیچیده‌ی یک زبان برنامه‌نویسی (مانند ساختارهای شرط و حلقه‌های تکرار) نیست. در واقع، زبان HTML شامل تعدادی Element یا عنصر از پیش ‌تعریف‌شده (predefined element) است که هر یک برای مفسر (مرورگر) معنای مشخصی دارند و هر عنصر نیز دارای تعدادی Attribute یا صفت است که هر یک برای تنظیم یک ویژگی مشخص از آن عنصر کاربرد دارند. به همین سادگی! در این درس، ابتدا با آناتومی عناصر HTML و سپس صفت‌های این زبان آشنا می‌شویم و در نهایت، فرم کلی یک سند HTML را خواهیم دید و با نحوه‌ی ایجاد آن آشنا خواهیم شد. توجه داشته باشید که تنها هدف ما در این درس، آشنایی شما با کلیات گرامری زبان HTML است و جزئیات اغلب مطالب بیان شده در این درس، در دروس آینده ارائه خواهد شد.

عناصر HTML

هر عنصر HTML نقش مشخصی دارد و برای ایجاد نوع خاصی از محتوا یا اعطای ساختار معینی به محتوا کاربرد دارد. عناصر HTML با استفاده از تگ‌ها (tags) ایجاد می‌شوند. یک تگ با استفاده از کاراکترهای < > و / ساخته می‌شود و دارای نامی است که مشخص‌کننده‌ی عملکرد آن است. اکثر عناصر HTML از یک تگ آغازین، یک تگ پایانی و محتوای بین این دو تگ تشکیل می‌شوند. در تصویر زیر می‌توانید آناتومی یک عنصر HTML با نام p را ببینید.

• تگ باز (opening tag): تگ باز از نام عنصر (در مثال بالا p) تشکیل شده که بین کاراکترهای < و > قرار می‌گیرد.
• تگ بسته (closing tag): تگ بسته نیز مانند تگ باز است با این تفاوت که یک کاراکتر اسلش قبل از نام عنصر قرار می‌گیرد.
• محتوا (content): محتوای یک عنصر بین تگ باز و بسته قرار می‌گیرد. در مثال بالا این محتوا مقداری متن است.
• عنصر (element): یک جفت تگ باز و بسته به همراه محتوای بین آنها یک عنصر HTML را شکل می‌دهند.

عنصر p که در تصویر بالا دیده می‌شود، برای ایجاد پاراگراف در صفحه کاربرد دارد. یعنی مرورگر، محتوای درون این عنصر را به صورت یک پاراگراف تفسیر و رندر می‌کند. از آنجایی که این عنصر شامل محتواست، به یک تگ بسته و یک تگ باز نیاز دارد و اکثر عناصر HTML به همین فرم هستند اما عناصری نیز وجود دارند که نیاز به تگ بسته ندارند، چون شامل محتوا نیستند. این عناصر فاقد محتوا را تهی (empty) می‌نامند و البته بعضی‌ها هم ترجیح می‌دهند از اصطلاح void برای این عناصر استفاده کنند. عنصر img که برای افزودن یک تصویر به صفحه کاربرد دارد، یک نمونه از این عناصر است.

HTML

<img>

عناصر تهی مانند img را می‌توانیم به فرم زیر نیز بنویسیم:

HTML

<img/>

در HTML استفاده از هر دو فرم بالا برای عناصر تهی مجاز است اما برای اسناد XHTML باید از فرم دوم استفاده کنیم. به طور کلی، اگر می‌خواهید سند شما برای مفسرهای XML نیز قابل درک و تفسیر باشد، باید از فرم دوم استفاده کنید. در این مورد در آینده بیشتر صحبت می‌کنیم.

صفت‌های HTML

همانطور که در ابتدای این درس گفتیم، هر عنصر HTML دارای تعدادی صفت (attribute) است که برای توصیف ویژگی‌های مربوط به آن عنصر تعریف شده‌اند. به عبارت دیگر، هر صفتِ یک عنصر، برای تنظیم یک ویژگی از آن عنصر کاربرد دارد. ساختار کلی صفت‌های عناصر HTML به صورت زیر است:

HTML

<element attr1="value1" attr2="value2">
    Content
</element>

در این سینتکس، attr1 و attr2 صفت‌های عنصری با نام element هستند که به ترتیب مقادیر value1 و value2 به آنها اختصاص داده شده است. مقداری که یک صفت دریافت می‌کند، به ماهیت آن صفت بستگی دارد. به عنوان مثال، صفت lang یک صفت عمومی است که برای همه‌ی عناصر HTML قابل تنظیم است و نقش این صفت، تعیین زبان محتوای عنصر است. بنابراین، مقداری که باید به این صفت بدهیم، یک کد زبانی مانند en برای انگلیسی، fa برای فارسی و غیره است.

HTML

<p lang="en">Everything is ok</p>
<p lang="fa">همه چیز روبراه است</p>

همانطور که می‌بینید، صفت‌ها درون تگ آغازین تعریف می‌شوند و هر صفت دارای یک جفت نام و مقدار (name and value) است که با یک کاراکتر = از هم جدا می‌شوند. اگر بخواهیم بیش از یک صفت را برای یک عنصر تنظیم کنیم، باید جفت‌های نام و مقدار را با یک فاصله از هم جدا کنیم.

HTML

<p lang="en" dir="ltr">Everything is ok</p>

در مثال بالا علاوه بر صفت lang از یک صفت دیگر با نام dir نیز برای عنصر p استفاده شده که برای تعیین جهت (direction) محتوای عناصر کاربرد دارد. مقدار ltr به معنای جهت‌گیری چپ‌به‌راست (left-to-right) است و مقدار rtl به معنای جهت‌گیری راست‌به‌چپ (right-to-left) است. برای این صفت مقدار سومی هم وجود دارد که auto است و باعث می‌شود که تعیین جهت متن به مرورگر واگذار شود.

توجه داشته باشید که در اینجا قصد معرفی صفت‌ها و کارکرد آنها را نداریم و در جای خود به‌تفصیل در مورد صفت‌های مذکور در بالا، صحبت خواهیم کرد. فعلاً تنها هدف ما در این درس، آشنایی شما با ساختار کلی عناصر و صفت‌های HTML است.

صفت‌های عمومی (Global Attributes)

گفتیم که هر عنصر HTML دارای تعدادی صفت است و به عبارت دیگر، هر صفت برای یک یا چند عنصر HTML قابل تنظیم است. اما تعدادی صفت وجود دارد که تقریباً برای همه‌ی عناصر HTML در دسترس و قابل تنظیم هستند؛ این صفت‌ها را صفت‌های عمومی یا سراسری (global attributes) می‌نامند. به عنوان مثال، صفت lang یک صفت global است و همانطور که گفتیم، برای تعیین زبان محتوای یک عنصر کاربرد دارد. در جدول زیر به تعدادی از مهمترین صفت‌های عمومی HTML اشاره شده است. البته در فصل دهم، صفت‌های این جدول و سایر صفت‌های عمومی HTML را به طور کامل بررسی می‌کنیم.

صفت‌های بولین

در جدول بالا از صفت hidden به عنوان یک صفت بولین (boolean) نام برده شده است. یک صفت بولین در HTML صفتی است که می‌تواند true یا false باشد. اما نحوه‌ی استفاده از این صفت‌ها با آنچه که انتظار می‌رود (یعنی استفاده از مقادیر true و false) ‌متفاوت است. قاعده‌ی کار به این صورت است که: وجود یک صفت بولین به معنای true بودن آن و عدم وجود صفت به معنای false بودن آن است. بنابراین، برای تعیین مقدار false برای یک صفت بولین تنها کاری که باید بکنیم این است که هیچ کاری نکنیم (یعنی از آن صفت استفاده نکنیم). اما برای تعیین مقدار true برای یک صفت بولین باید آن صفت را آورده و به یکی از روش‌های زیر از آن استفاده کنیم:

HTML

<p hidden>This is valid HTML but invalid XML</p>
<p hidden=hidden>This is valid HTML but invalid XML</p>
<p hidden="">This is valid HTML and XML</p>
<p hidden="hidden">This is valid HTML and XML</p>

همانطور که در مثال بالا درون عناصر p نیز توضیح داده شده، دو روش اول تنها در HTML اما روش‌های سوم و چهارم هم در HTML و هم در XML مجاز هستند. بنابراین، در مورد اسناد XHTML باید از یکی از دو فرم سوم و چهارم استفاده شود. به طور کلی، بر خلاف HTML در XHTML همه‌ی صفت‌ها باید دارای مقدار باشند.

فرم کلی یک سند HTML

تا اینجا با آناتومی عناصر و صفت‌های HTML آشنا شدیم. هر سند HTML از سه عنصر پایه‌اي تشکیل می‌شود: عنصر html که شامل همه‌ی کدهاي HTML است، عنصر head که مربوط به پیکربندی سند است و عنصر body که شامل محتوای قابل نمایش صفحه است. عناصر head و body درون عنصر html و سایر عناصر درون یکی از دو عنصر head و body قرار می‌گیرند. بنابراین، یک سند HTML دارای فرم کلی زیر است:

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>document title</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

در مورد جزئیات مربوط به عناصر پایه‌ای html، head و body و همچنین، در مورد تگ doctype که در اولین خط دیده می‌شود، در فصل بعدی صحبت خواهیم کرد. تنها چیزی که فعلاً باید بدانیم این است که html عنصر ریشه (root) برای سند HTML محسوب می‌شود و شامل دو عنصر head و body است. عنصر head حاوی متادیتا یا اطلاعاتی در مورد خود صفحه است و بخش پیکربندی سند محسوب می‌شود و body عنصری است که شامل کدهایی است که در نهایت توسط مرورگر نمایش داده می‌شوند و لذا بخش بدنه‌ی صفحه محسوب می‌شود.

در مثال بالا، درون عنصر head یک عنصر با نام title دیده می‌شود که مشخص‌کننده‌ی عنوان کلی صفحه است و عنصر meta نیز تعیین‌کننده‌ی مجموعه‌ی کاراکتری صفحه است. درون عنصر body نیز دو عنصر با نام‌های h1 و p دیده می‌شود که اولی یعنی h1 برای ایجاد یک هدینگ یا تیتر سطح یک (عنوان اصلی) کاربرد دارد و دومی یعنی p همانطور که قبلاً هم دیدیم، برای ایجاد پاراگراف کاربرد دارد. در مورد این عناصر و جزئیات مربوط به آنها در جای خود صحبت خواهیم کرد.

کاراکترهای Whitespace در HTML

آخرین مطلبی که در مورد کلیات گرامری HTML بیان می‌کنیم، رفتار مفسر این زبان با کاراکترهای Whitespace مانند space، tab و newline است. یک سند HTML تنها از کاراکترهای متنی و کاراکترهای Whitespace تشکیل می‌شود. اگر در یک سند HTML بین دو کلمه بیش از یک فاصله وجود داشته باشد، مرورگرها هنگام تفسیر صفحه، فاصله‌های اضافی را نادیده می‌گیرند و در خروجی تنها یک فاصله بین دو کلمه قرار می‌دهند. بنابراین، هر دو پاراگراف زیر توسط مرورگر به شکل یکسانی نمایش داده می‌شوند:

HTML

<p>Welcome to our website</p>
<p>Weclcome      to
our
    website</p>

این امر به این معناست که ما می‌توانیم از فاصله‌های اضافی و شکست خط‌ها برای جداسازی بلاک‌های کد از هم استفاده کنیم و خوانایی کدها را افزایش دهیم. زبان‌هایی مانند HTML که چنین قابلیتی دارند، زبان‌های free-format نامیده می‌شوند. با این حال، باید روشی برای قرار دادن فاصله‌های اضافی و شکست خط در صفحه به نحوی که در خروجی نیز منعکس شود، وجود داشته باشد. در مورد شکست خط می‌توانیم از عنصری با نام br استفاده کنیم و فاصله‌های سفید اضافی را نیز می‌توان با استفاده از موجودیت‌های کاراکتری (character entities) ایجاد کرد. در درس‌ها و فصل‌های آینده با این موارد و جزئیات مربوط به آنها آشنا خواهیم شد.