مقدمات HTML

آشنایی با مفاهیم اولیه HTML و ساختار پایه صفحات وب

HTML چیست؟

زبان پایه و اساسی برای ساخت تمام صفحات وب

HTML مخفف HyperText Markup Language (زبان نشانه‌گذاری ابرمتن) است. فکر کنید HTML مثل اسکلت بدن انسان است - بدون آن هیچ چیز شکل نمی‌گیرد! 🦴

HTML به مرورگر می‌گوید که محتوای شما چگونه ساختار یابد. مثلاً کدام قسمت عنوان است، کدام قسمت پاراگراف، و کدام قسمت لینک.

نکته جالب:

اولین وب‌سایت دنیا در سال ۱۹۹۱ ساخته شد و فقط با HTML نوشته شده بود! هنوز هم آنلاین است و می‌توانید آن را ببینید.

تگ HTML چیست؟

تگ‌ها مثل برچسب‌هایی هستند که به مرورگر می‌گویند هر قسمت از محتوا چه نوعی است. مثل این که روی یک جعبه بنویسید "شکستنی" تا همه بدانند با احتیاط حمل کنند! 📦

مثال ساده تگ

<h1>سلام دنیا!</h1>
<p>این یک پاراگراف است.</p>

تگ باز (Opening Tag)

<h1> - شروع عنوان

تگ بسته (Closing Tag)

</h1> - پایان عنوان

ساختار پایه HTML

هر صفحه 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

به مرورگر می‌گوید این فایل HTML5 است

html

ریشه اصلی صفحه - همه چیز داخل این تگ قرار می‌گیرد

head

اطلاعات پنهان صفحه (عنوان، توضیحات، استایل‌ها)

body

محتوای قابل مشاهده صفحه - آنچه کاربران می‌بینند

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

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

تگ‌های عنوان

عناوین مختلف

<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<h3>عنوان کوچک</h3>
<h4>عنوان کوچک‌تر</h4>
<h5>عنوان خیلی کوچک</h5>
<h6>کوچک‌ترین عنوان</h6>

تگ‌های متن

انواع متن

<p>این یک پاراگراف است</p>
<strong>متن پررنگ</strong>
<em>متن مورب</em>
<br> <!-- شکست خط -->
<hr> <!-- خط افقی -->

تمرین عملی

حالا وقت تمرین است! سعی کنید کد زیر را بنویسید:

📝 تمرین:

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

• عنوان اصلی: "وبسایت شخصی من"
• یک پاراگراف معرفی خودتان
• عنوان فرعی: "علاقه‌مندی‌های من"
• یک پاراگراف درباره علاقه‌مندی‌هایتان

جواب تمرین

این یکی از راه‌های حل این تمرین است:

personal-website.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>
</body>
</html>

نکته:

می‌توانید محتوای داخل تگ‌ها را با اطلاعات خودتان تغییر دهید. مهم این است که ساختار کلی درست باشد!

بازگشت به فهرست درس بعدی: متن و قالب‌بندی