🌐 درس اول: آشنایی با HTML و ساختار اولیه

🎯 هدف این درس: آشنایی با مفاهیم پایه HTML و ساختار یک صفحه وب

سلام دوست عزیز! 👋

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

توی این درس، با هم یاد می‌گیریم:

✅ تگ چیست و چطور از آن استفاده کنیم
✅ ساختار یک صفحه HTML
✅ کار با ویرایشگر VS Code
✅ ساخت اولین صفحه وب

📦 بخش ۱: تگ چیست؟

تگ‌ها بلوک‌های سازنده هر صفحه HTML هستن. هر تگ با علامت < شروع و با > تموم می‌شه.

اکثر تگ‌ها به صورت جفت هستن: یک تگ بازکننده و یک تگ بسته‌کننده. تگ بسته‌کننده با یک اسلش / شروع می‌شه.

💡 مثال:

<p> یک تگ پاراگراف است.
</p> تگ بسته‌کننده همان پاراگراف است.

ساختار کلی یک تگ:

🌐
ساختار تگ

HTML
v5


<تگ‌نامه>
    <!-- محتوای تگ -->
</تگ‌نامه>

⚠️ نکته مهم

همیشه تگ‌ها رو به‌درستی ببندید. فراموش کردن تگ بسته‌کننده یکی از رایج‌ترین خطاهای مبتدیان است!

🏗️ بخش ۲: ساختار یک صفحه HTML

هر صفحه HTML یک ساختار مشخص داره که مرورگرها بر اساس اون صفحه رو نمایش می‌دن. بیا با هم این ساختار رو بررسی کنیم:

🌐
ساختار صفحه HTML

HTML
v5


<!DOCTYPE html>                <!-- اعلام نوع سند -->
<html>                           <!-- شروع صفحه -->
    <head>                       <!-- اطلاعات اضافی -->
        <meta charset="UTF-8">
        <title>عنوان صفحه</title>
    </head>
    <body>                       <!-- محتوای اصلی -->
        <!-- محتوای صفحه اینجا قرار می‌گیره -->
    </body>
</html>

بیا هر بخش رو جداگانه بررسی کنیم:

📖 توضیح بخش‌های ساختار

<!DOCTYPE html>: به مرورگر می‌گه که این صفحه از نوع HTML5 است.
<html>: تگ اصلی صفحه که همه محتوا داخل آن قرار می‌گیره.
<head>: اطلاعات اضافی مثل عنوان صفحه، کدگذاری و لینک به فایل‌های CSS.
<body>: تمام محتوایی که کاربر می‌بینه داخل این تگ قرار می‌گیره.

✏️ بخش ۳: اولین صفحه HTML

حالا بیا با هم اولین صفحه HTML رو بسازیم. کد زیر رو توی ویرایشگر VS Code کپی کن و با اسم index.html ذخیره کن.

🌐
اولین صفحه HTML

HTML
v5


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>سلام دنیا!</title>
    </head>
    <body>
        <h1>سلام دنیا!</h1>
        <p>به اولین صفحه HTML من خوش آمدید!</p>
        <p>من دارم یاد می‌گیرم چطور وب‌سایت بسازم.</p>
    </body>
</html>

بعد از ذخیره کردن، فایل رو توی مرورگر باز کن. چیزی که می‌بینی، اولین صفحه وب توست! 🎉

🧩 بخش ۴: تگ‌های مهم و پرکاربرد

بیا با چند تگ مهم دیگه که خیلی ازشون استفاده می‌کنیم آشنا بشیم:

📊 تگ‌های پرکاربرد HTML

تگ	کاربرد	مثال
`<h1>` تا `<h6>`	عنوان‌های سطوح مختلف	`<h1>عنوان اصلی</h1>`
`<p>`	پاراگراف	`<p>متن پاراگراف</p>`
`<br>`	شکستن خط (بدون تگ بسته)	`خط اول<br>خط دوم`
`<hr>`	خط جداکننده (بدون تگ بسته)	`<hr>`

مثال: استفاده از تگ‌های مختلف

🌐
تگ‌های مختلف

HTML
v5


<h1>عنوان اصلی</h1>
<h2>زیرعنوان</h2>

<p>این یک پاراگراف است. HTML خیلی ساده‌ست!</p>

<p>خط اول

خط دوم بعد از شکستن خط</p>

<hr>

<p>بعد از خط جداکننده</p>

📝 تمرین عملی

🎯 تمرین شماره ۱: صفحه معرفی

یک صفحه HTML بسازید که شامل موارد زیر باشد:

یک عنوان اصلی با تگ <h1>
یک زیرعنوان با تگ <h2>
حداقل ۲ پاراگراف با تگ <p>
یک خط جداکننده با تگ <hr>
یک عنوان کوچک‌تر با تگ <h3>

🔍 راه‌حل تمرین:

🌐
صفحه معرفی

HTML
v5


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>صفحه معرفی من</title>
    </head>
    <body>
        <h1>به صفحه من خوش آمدید</h1>
        <h2>معرفی خودم</h2>

        <p>سلام! من [اسم شما] هستم. این اولین صفحه HTML من است.</p>
        <p>من تازه شروع به یادگیری HTML کردم و خیلی هیجان‌زده هستم.</p>

        <hr>

        <h3>چرا HTML یاد می‌گیرم؟</h3>
        <p>چون می‌خواهم وب‌سایت‌های زیبا و کاربردی بسازم.</p>
    </body>
</html>

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ تگ چیست و چطور از آن استفاده کنیم
✅ ساختار یک صفحه HTML
✅ چطور یک صفحه HTML ساده بسازیم
✅ تگ‌های پرکاربرد مثل <h1>، <p>، <br> و <hr>

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، با تگ‌های متنی و فرمت‌دهی آشنا می‌شیم و می‌تونیم متن‌های جذاب‌تری توی صفحاتمون بنویسیم.

🔗 لینک‌های مرتبط

⬅️
مقدمه دوره

🚀
درس بعدی: تگ‌های متنی

🏠
صفحه دوره‌ها

نویسنده تیم رجستری

تاریخ انتشار 19 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

آشنایی با HTML و ساختار اولیه