جلسه دوم آموزش توسعه وب | HTML و ساختار صفحات وب

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

برای ساخت یک صفحه وب، یکی از اولین ابزارهایی که باید یاد بگیریم HTML است.

HTML مخفف HyperText Markup Language است و وظیفه اصلی آن مشخص‌کردن ساختار و محتوای صفحه وب است. HTML به‌تنهایی برای زیبا کردن سایت ساخته نشده؛ بلکه مشخص می‌کند چه چیزی در صفحه قرار دارد، مثل عنوان، متن، لینک، تصویر و بخش‌های مختلف صفحه.

---

HTML چطور کار می‌کند؟

مرورگرهایی مثل Chrome یا Firefox کد HTML را دریافت می‌کنند و بر اساس ساختاری که در آن نوشته‌ایم، صفحه را نمایش می‌دهند.

برای مثال، ساده‌ترین حالت یک متن HTML می‌تواند این باشد:

html
<h1>سلام دنیا</h1>

اینجا h1 به مرورگر می‌گوید که این متن یک عنوان اصلی است.

نتیجه چیزی شبیه این خواهد بود:

سلام دنیا

---

تگ چیست؟

در HTML معمولاً از چیزی به نام Tag یا تگ استفاده می‌کنیم.

یک تگ معمولاً با علامت < شروع و با > تمام می‌شود.

برای مثال:

html
<p>این یک متن است.</p>

در این مثال:

  • <p> تگ شروع است.
  • این یک متن است. محتوای عنصر است.
  • </p> تگ پایان است.

بنابراین ساختار کلی بسیاری از عناصر HTML به شکل زیر است:

html
<tag>
محتوا
</tag>

البته همه تگ‌ها الزاماً تگ پایانی ندارند؛ برای مثال تگ تصویر به شکل متفاوتی استفاده می‌شود.

---

ساختار اصلی یک صفحه HTML

حالا بیایید یک صفحه واقعی‌تر بسازیم.

یک فایل با نام index.html ایجاد کنید و کد زیر را داخل آن قرار دهید:

html
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>اولین صفحه من</title>
</head>

<body>

    <h1>سلام به دنیای وب</h1>

    <p>
        این اولین صفحه HTML من است.
    </p>

</body>

</html>

حالا فایل را با مرورگر باز کنید.

ممکن است در نگاه اول این کد کمی زیاد به نظر برسد، اما اگر آن را قسمت‌قسمت بررسی کنیم، کاملاً قابل فهم است.

---

<!DOCTYPE html> چیست؟

در اولین خط نوشته‌ایم:

html
<!DOCTYPE html>

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

این خط یک تگ معمولی نیست و نباید آن را با تگ‌هایی مثل p یا h1 اشتباه بگیریم.

---

تگ html

بعد از آن، ساختار اصلی صفحه را داخل تگ html قرار می‌دهیم:

html
<html>
    
</html>

تقریباً تمام محتوای صفحه HTML داخل همین بخش قرار می‌گیرد.

در مثال بالا از این ویژگی نیز استفاده کردیم:

html
lang="fa"

این ویژگی به مرورگر می‌گوید زبان اصلی صفحه فارسی است.

همچنین:

html
dir="rtl"

مشخص می‌کند جهت نمایش متن از راست به چپ باشد.

---

بخش head

قسمت بعدی:

html
<head>
    
</head>

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

مثلاً:

html
<meta charset="UTF-8">

باعث می‌شود مرورگر بتواند متن‌هایی مانند فارسی را به‌درستی پردازش کند.

و:

html
<title>اولین صفحه من</title>

عنوان صفحه را مشخص می‌کند؛ همان عنوانی که معمولاً در تب مرورگر مشاهده می‌کنیم.

---

بخش body

محتوایی که قرار است در صفحه مشاهده شود، معمولاً داخل body قرار می‌گیرد:

html
<body>

    <h1>سلام به دنیای وب</h1>

    <p>این اولین صفحه HTML من است.</p>

</body>

بنابراین می‌توانیم به‌صورت ساده این‌طور تصور کنیم:

text
HTML
│
├── HEAD
│   ├── اطلاعات صفحه
│   └── عنوان صفحه
│
└── BODY
    ├── عنوان
    ├── متن
    ├── تصویر
    └── سایر محتوا

---

ساخت عنوان‌ها

HTML چند سطح عنوان در اختیار ما قرار می‌دهد:

html
<h1>عنوان اصلی</h1>
<h2>عنوان بخش</h2>
<h3>عنوان فرعی</h3>
<h4>عنوان</h4>
<h5>عنوان</h5>
<h6>عنوان</h6>

h1 مهم‌ترین سطح عنوان است و h6 پایین‌ترین سطح را دارد.

مثلاً:

html
<h1>آموزش توسعه وب</h1>

<h2>HTML</h2>

<h3>تگ‌ها</h3>

در یک صفحه واقعی بهتر است عنوان‌ها بر اساس ساختار منطقی محتوا استفاده شوند، نه صرفاً برای بزرگ‌تر یا کوچک‌تر کردن متن.

---

نوشتن متن با p

برای قرار دادن یک پاراگراف از تگ p استفاده می‌کنیم:

html
<p>
    من در حال یادگیری توسعه وب هستم.
</p>

اگر چند پاراگراف داشته باشیم، می‌توانیم آن‌ها را جداگانه بنویسیم:

html
<p>این پاراگراف اول است.</p>

<p>این پاراگراف دوم است.</p>

---

ساخت لینک

یکی از قسمت‌های مهم صفحات وب، لینک‌ها هستند.

برای ساخت لینک از a استفاده می‌کنیم:

html
<a href="https://example.com">
    ورود به سایت
</a>

ویژگی href مشخص می‌کند لینک باید کاربر را به کجا ببرد.

مثلاً:

html
<a href="https://letpix.ir">
    ورود به LetPix
</a>

در اینجا متن «ورود به LetPix» قابل کلیک خواهد بود.

---

ویژگی یا Attribute چیست؟

بعضی تگ‌ها اطلاعات بیشتری نیاز دارند. این اطلاعات معمولاً به‌صورت Attribute یا ویژگی نوشته می‌شوند.

مثلاً:

html
<a href="https://example.com">
    سایت
</a>

در اینجا:

html
href="https://example.com"

یک ویژگی برای تگ a است.

یا در تگ html که بالاتر دیدیم:

html
<html lang="fa" dir="rtl">

دو ویژگی داریم:

text
lang="fa"
dir="rtl"

ویژگی‌ها معمولاً داخل تگ شروع نوشته می‌شوند.

---

ساخت یک صفحه کمی کامل‌تر

حالا چیزهایی که یاد گرفتیم را کنار هم قرار می‌دهیم:

html
<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>پروژه من</title>
</head>

<body>

    <h1>وب‌سایت من</h1>

    <p>
        به اولین صفحه وب من خوش آمدید.
    </p>

    <h2>درباره من</h2>

    <p>
        من در حال یادگیری توسعه وب هستم.
    </p>

    <a href="https://letpix.ir">
        مشاهده LetPix
    </a>

</body>

</html>

این کد را داخل index.html ذخیره کنید و آن را با مرورگر باز کنید.

اگر همه چیز درست باشد، باید یک صفحه شامل عنوان، چند متن و یک لینک مشاهده کنید.

---

تمرین این جلسه

حالا نوبت شماست.

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

صفحه باید حداقل این موارد را داشته باشد:

text
یک عنوان اصلی
یک معرفی کوتاه
یک عنوان فرعی
یک پاراگراف درباره خودتان
یک لینک

برای مثال می‌توانید ساختار زیر را خودتان تکمیل کنید:

html
<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>صفحه من</title>
</head>

<body>

    <h1>نام شما</h1>

    <p>
        اینجا یک معرفی کوتاه از خودتان بنویسید.
    </p>

    <h2>درباره من</h2>

    <p>
        اطلاعات بیشتری درباره خودتان بنویسید.
    </p>

    <a href="https://letpix.ir">
        سایت من
    </a>

</body>

</html>

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

---

جمع‌بندی

در این جلسه یاد گرفتیم که HTML وظیفه ایجاد ساختار و محتوای صفحات وب را بر عهده دارد.

با ساختار کلی یک سند HTML آشنا شدیم و یاد گرفتیم از تگ‌های html، head، body، h1 تا h6، p و a استفاده کنیم.

همچنین با مفهوم Attribute آشنا شدیم و دیدیم که ویژگی‌هایی مانند href، lang و dir چگونه اطلاعات بیشتری به عناصر HTML اضافه می‌کنند.

در جلسه بعد می‌توانیم همین صفحه را با CSS طراحی کنیم و ظاهر ساده HTML را به یک رابط کاربری واقعی‌تر تبدیل کنیم.

این آموزش به‌صورت اختصاصی برای LetPix تهیه شده و محتوای آن به شکل مستقل تولید شده است.

LetPix | Learn • Build • Create

© 2026 LetPix — All Rights Reserved