آشنایی با HTML

هر صفحه‌ای که در مرورگر باز می‌کنید، از یک وب‌سایت شخصی ساده تا یک شبکه اجتماعی پیچیده، روی یک چیز مشترک بنا شده است: HTML. مخفف عبارت HyperText Markup Language است؛ یعنی «زبان نشانه‌گذاری ابرمتن». HTML یک زبان برنامه‌نویسی نیست؛ زبانی است برای توصیف ساختار و معنای محتوا. به مرورگر می‌گوید «این بخش یک تیتر است»، «این یکی پاراگراف است»، «این‌جا یک تصویر می‌آید».

HTML به‌تنهایی درباره رنگ و فونت و جای قرار گرفتن چیزها تصمیم نمی‌گیرد. صفحه‌های وب با سه فناوری ساخته می‌شوند که هر کدام وظیفه‌ای جدا دارد: HTML ساختار و معنا را تعیین می‌کند، CSS ظاهر را می‌سازد و جاوااسکریپت رفتار تعاملی را اضافه می‌کند. اگر ساختمان را به یاد بیاورید، HTML اسکلت و دیوارهاست، CSS نما و رنگ‌آمیزی است و جاوااسکریپت برق و تجهیزات. در این دوره فقط با اسکلت کار داریم.

HTML چه کار می‌کند؟

HTML محتوای صفحه را با «عنصر» (Element) علامت‌گذاری می‌کند. این علامت‌گذاری سه مخاطب مهم دارد:

• مرورگر — از روی عناصر می‌فهمد هر بخش را چگونه نمایش دهد و در ساختار صفحه کجا بگذارد.
• موتورهای جست‌وجو — معنای عناصر به آن‌ها کمک می‌کند محتوای صفحه را بفهمند و رتبه‌بندی کنند.
• فناوری‌های کمکی — صفحه‌خوان‌ها (Screen Reader) متن صفحه را برای کاربران نابینا با تکیه بر همین عناصر می‌خوانند.

به همین دلیل در HTML همیشه سراغ عنصری می‌رویم که معنای محتوای ما را دقیق‌تر بیان کند؛ نه عنصری که فقط شکل ظاهری دلخواه بدهد.

ساختار یک عنصر

بیشتر عنصرها از سه بخش ساخته می‌شوند: تگ آغازین، محتوا و تگ پایان. تگ‌ها داخل علامت کوچک‌تر و بزرگ‌تر نوشته می‌شوند:

<!-- A paragraph: opening tag, content, closing tag -->
<p>This is a paragraph.</p>

داخل تگ آغازین می‌توان «ویژگی» (Attribute) نوشت؛ جفت‌هایی از نام و مقدار که اطلاعات اضافه به عنصر می‌دهند. در مثال زیر href ویژگی عنصر پیوند است:

<a href="https://example.com">Example website</a>

یک گروه از عنصرها «عنصر خالی» (Void Element) نام دارد و اصلاً تگ پایان ندارد، چون محتوایی برای نگه داشتن ندارد. پرکاربردترین‌ها عبارت‌اند از img برای تصویر، br برای شکست خط، hr برای خط جداکننده و input برای ورودی فرم:

<img src="cat.jpg" alt="A cat on the rooftop">

نخستین سند کامل

حالا همه این‌ها را در یک سند کامل کنار هم بگذاریم. این کد را در فایلی به نام index.html ذخیره کنید و آن را با مرورگر باز کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

این سند را خط‌به‌خط بخوانیم:

1. <!DOCTYPE html> اعلام می‌کند که سند با حالت استاندارد HTML نوشته شده است و همیشه باید خط اول فایل باشد.
2. عنصر html ریشهٔ کل سند است. ویژگی lang زبان محتوا را مشخص می‌کند و ویژگی dir جهت متن را؛ برای فارسی rtl یعنی راست‌به‌چپ.
3. عنصر head ابرداده‌های صفحه را نگه می‌دارد؛ چیزهایی که خودشان روی صفحه دیده نمی‌شوند. meta charset="utf-8" رمزگذاری متن را تعیین می‌کند و بدون آن حروف فارسی نامفهوم می‌شوند. عنصر title عنوانی است که در تب مرورگر نمایش داده می‌شود.
4. عنصر body بدنهٔ سند است؛ هر چیزی که کاربر واقعاً می‌بیند این‌جا می‌آید، مثل تیتر h1 و پاراگراف p.

توضیح‌ها در کد

در HTML می‌توانید برای خودتان یادداشت بگذارید؛ «کامنت» (Comment) بین <!-- و --> نوشته می‌شود، مرورگر آن را نمایش نمی‌دهد و فقط برای خوانندهٔ کد است:

<!-- This section will be completed later -->
<p>Visible text for the user.</p>

تمرین‌ها

<!-- Write your code here -->

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>About Me</title>
  </head>
  <body>
    <h1>Sara Mohammadi</h1>
    <p>I am a computer engineering student.</p>
    <p>In my free time I enjoy photography and reading.</p>
  </body>
</html>

:::

خلاصه

• HTML زبان نشانه‌گذاری ساختار و معنای محتواست؛ ظاهر با CSS و رفتار با جاوااسکریپت ساخته می‌شود.
• بیشتر عنصرها از تگ آغازین، محتوا و تگ پایان ساخته می‌شوند و ویژگی‌ها داخل تگ آغازین می‌آیند.
• عنصرهای خالی مانند img و br و input تگ پایان ندارند.
• هر سند با <!DOCTYPE html> آغاز می‌شود؛ head ابرداده‌ها و body محتوای دیدنی را نگه می‌دارد.
• ویژگی‌های lang و dir و meta charset را هرگز از قلم نیندازید.

در درس بعدی با عنصرهای متنی آشنا می‌شوید؛ ابزارهای اصلی برای نوشتن خود محتوای صفحه.