سلام رفیق عزیز! خوش اومدی به سومین جلسه آموزش HTML از سایت رایا وردپرس 👋
توی جلسات قبلی، پیش‌نیازها و نرم‌افزارهای لازم رو بهت معرفی کردم و توضیح دادم که HTML چیه و چه کاربردی داره. حالا که با مفاهیم اولیه آشنا شدی و فهمیدی که HTML پایه و اساس طراحی صفحات وبه، وقتشه که سند HTML رو دقیق‌تر بررسی کنیم و یاد بگیریم چطور از صفر یه صفحه وب بسازیم.
اگه آماده‌ای، بریم سراغش! 😎🔥
سند HTML چیست؟ 🤔
یک سند HTML فایلیه که شامل کدهای HTML میشه و مرورگر اون رو تفسیر می‌کنه تا محتوای صفحه وب رو نمایش بده. هر سند HTML یه ساختار مشخص داره که از تگ‌های مختلف تشکیل شده. این تگ‌ها به مرورگر می‌گن که هر بخش از صفحه چطوری نمایش داده بشه. 📄🔍
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
ساختار کلی یک سند HTML 🏗️
هر سند HTML شامل چند بخش اصلیه که باید رعایت بشه تا صفحه به درستی اجرا بشه. این بخش‌ها عبارتند از:
1️⃣ اعلام نوع سند با تگ <!DOCTYPE html> – این تگ به مرورگر اعلام می‌کنه که این فایل یک سند HTML هست و از نسخه‌ی HTML5 استفاده می‌کنه. این دستور باید همیشه در اولین خط کدهات قرار بگیره تا مرورگر بتونه صفحه رو به درستی تفسیر کنه.
<!DOCTYPE html>2️⃣ تگ <html> 🌐 – این تگ ریشه‌ی اصلی سند HTML هست و تمام محتوای صفحه وب داخل اون قرار می‌گیره. مرورگر با دیدن این تگ متوجه میشه که اینجا شروع سند HTML شماست.
- همچنین، می‌تونید در تگ
<html>از ویژگیlangبرای مشخص کردن زبان صفحه استفاده کنی. مثلاً:
<html lang="fa">
</html>3️⃣ تگ <head> – مثل پشت‌صحنه‌ی یک فیلمه! 🎬 – اطلاعات و مواردی که کاربر نمی‌بینه، ولی برای مرورگر و موتورهای جستجو خیلی مهمه، در اینجا قرار می‌گیره. این اطلاعات شامل موارد زیر میشه:
- عنوان صفحه
<title>(که در تب مرورگر نشون داده میشه) - متاتگ‌ها
<meta>(مثل توضیحات صفحه برای موتورهای جستجو) - لینک
<link>به فایل‌های CSS برای استایل‌دهی - لینک به اسکریپت‌ها
<script>و منابع دیگه مثل فونت‌ها، آیکون‌ها، و…
<head>
<meta charset="UTF-8"> <!-- تعیین نوع کدگذاری متن (برای فارسی الزامیه) -->
<meta name="description" content="آموزش HTML برای مبتدیان">
<meta name="keywords" content="HTML, آموزش, وب">
<title>جلسه ۳ آموزش HTML</title> <!-- عنوانی که تو تب مرورگر نشون داده میشه -->
<link rel="stylesheet" href="styles.css"> <!-- لینک به فایل استایل CSS -->
<script src="script.js"></script> <!-- لینک به فایل جاوااسکریپت -->
</head>
4️⃣ تگ <body> – اینجا جاییه که تمام متن‌ها، عکس‌ها، لینک‌ها، ویدیوها و هر چیزی که قراره کاربر ببینه، قرار داده میشه.
اجزای مهم <body>:
<h1>تا<h6>→ برای عناوین مختلف.<p>→ برای پاراگراف‌ها.<a>→ برای لینک دادن به صفحات دیگه.<img>→ برای نمایش تصاویر.
<body>
<h1>به رایا وردپرس خوش اومدی! 😊</h1>
<p>این یک پاراگراف ساده هست.</p>
<a href="https://example.com">روی من کلیک کن!</a>
<img src="image.jpg" alt="تصویر نمونه">
</body>ساختار اصلی یک سند HTML به این صورته. در زیر، یک مثال ساده آوردم که شامل تمامی تگ‌های مهم و ساختار اصلی HTML به صورت یکجا هست:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>جلسه سوم HTML</title>
</head>
<body>
<h1>خوش آمدید به آموزش HTML! 🎉</h1>
<p>این یه پاراگراف نمونه برای تمرین شماست.</p>
<p>امتحان کن، متن رو عوض کن و نتیجه رو ببین! 💻</p>
</body>
</html>توضیحات سند HTML بالا:
- خط ۱: به مرورگر میگیم این سند HTML5 هست.
- خط ۲: شروع سند HTML و تنظیم زبان به فارسی.
- خط ۳: شروع بخش
headکه اطلاعات مهم رو داره. - خط ۴: تنظیم کدگذاری به UTF-8 (برای پشتیبانی از فارسی).
- خط ۵: عنوان صفحه که تو تب مرورگر میاد.
- خط ۷: شروع بخش
bodyکه محتوای اصلی اینجاست. - خط ۸: یک عنوان بزرگ (h1) با متن خوشآمدگویی.
- خط ۹ و ۱۰: دو پاراگراف ساده.
چطور یک سند HTML رو اجرا کنیم؟ 🖥️
حالا که اولین سند HTML خودتو نوشتی، باید ببینی که توی مرورگر چطوری اجرا میشه. مراحل:
1️⃣ یه فایل متنی جدید باز کن و کدت رو توش بنویس.
2️⃣ فایل رو با پسوند .html ذخیره کن (مثلاً index.html)
3️⃣ روش کلیک کن یا اون رو با مرورگر باز کن (Chrome، Firefox، Edge و …)
4️⃣ نتیجه رو ببین و کیف کن! 😍
جمع بندی 🎯
خب، حالا که ساختار اصلی یه سند HTML رو یاد گرفتی، تمرین کن! یه فایل جدید بساز، کدهای بالا رو کپی کن و تغییرات دلخواهت رو اعمال کن. ببین چطوری مرورگر محتوا رو نمایش میده. 🚀
اگه سوالی داری یا به مشکلی برخوردید، توی کامنتها بپرس. منتظر پیشرفتت هستم! 💪
به پایان جلسه سوم رسیدیم. خسته نباشی، الان میتونی یه صفحه وب ساده اما استاندارد بسازی! 🥳
تا جلسه بعدی فعلن خدانگهدات 🙂
ارسال نظر ( 0 نظر تایید شده )