سلام رفیق عزیز! خوش اومدی به سومین جلسه آموزش HTML از سایت رایا وردپرس 👋
توی جلسات قبلی، پیش‌نیازها و نرم‌افزارهای لازم رو بهت معرفی کردم و توضیح دادم که HTML چیه و چه کاربردی داره. حالا که با مفاهیم اولیه آشنا شدی و فهمیدی که HTML پایه و اساس طراحی صفحات وبه، وقتشه که سند HTML رو دقیق‌تر بررسی کنیم و یاد بگیریم چطور از صفر یه صفحه وب بسازیم.
اگه آماده‌ای، بریم سراغش! 😎🔥
سند HTML چیست؟ 🤔
یک سند HTML فایلیه که شامل کدهای HTML می‌شه و مرورگر اون رو تفسیر می‌کنه تا محتوای صفحه وب رو نمایش بده. هر سند HTML یه ساختار مشخص داره که از تگ‌های مختلف تشکیل شده. این تگ‌ها به مرورگر می‌گن که هر بخش از صفحه چطوری نمایش داده بشه. 📄🔍
جلسه 17 آموزش HTML: کار با id و کلاس (class و id)
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
ساختار کلی یک سند HTML 🏗️
هر سند HTML شامل چند بخش اصلیه که باید رعایت بشه تا صفحه به درستی اجرا بشه. این بخش‌ها عبارتند از:
1️⃣ اعلام نوع سند با تگ <!DOCTYPE html> – این تگ به مرورگر اعلام می‌کنه که این فایل یک سند HTML هست و از نسخه‌ی HTML5 استفاده می‌کنه. این دستور باید همیشه در اولین خط کدهات قرار بگیره تا مرورگر بتونه صفحه رو به درستی تفسیر کنه.
2️⃣ تگ <html> 🌐 – این تگ ریشه‌ی اصلی سند HTML هست و تمام محتوای صفحه وب داخل اون قرار می‌گیره. مرورگر با دیدن این تگ متوجه می‌شه که اینجا شروع سند HTML شماست.
جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید
- همچنین، می‌تونید در تگ
<html>از ویژگیlangبرای مشخص کردن زبان صفحه استفاده کنی. مثلاً:
3️⃣ تگ <head> – مثل پشت‌صحنه‌ی یک فیلمه! 🎬 – اطلاعات و مواردی که کاربر نمی‌بینه، ولی برای مرورگر و موتورهای جستجو خیلی مهمه، در اینجا قرار می‌گیره. این اطلاعات شامل موارد زیر می‌شه:
- عنوان صفحه
<title>(که در تب مرورگر نشون داده می‌شه) - متاتگ‌ها
<meta>(مثل توضیحات صفحه برای موتورهای جستجو) - لینک
<link>به فایل‌های CSS برای استایل‌دهی - لینک به اسکریپت‌ها
<script>و منابع دیگه مثل فونت‌ها، آیکون‌ها، و…
4️⃣ تگ <body> – اینجا جاییه که تمام متن‌ها، عکس‌ها، لینک‌ها، ویدیوها و هر چیزی که قراره کاربر ببینه، قرار داده می‌شه.
اجزای مهم <body>:
<h1>تا<h6>→ برای عناوین مختلف.<p>→ برای پاراگراف‌ها.<a>→ برای لینک دادن به صفحات دیگه.<img>→ برای نمایش تصاویر.
ساختار اصلی یک سند HTML به این صورته. در زیر، یک مثال ساده آوردم که شامل تمامی تگ‌های مهم و ساختار اصلی HTML به صورت یکجا هست:
جلسه 19 آموزش HTML: طراحی واکنش گرا (Responsive) و سازگار با موبایل
توضیحات سند HTML بالا:
- خط ۱: به مرورگر میگیم این سند HTML5 هست.
- خط ۲: شروع سند HTML و تنظیم زبان به فارسی.
- خط ۳: شروع بخش
headکه اطلاعات مهم رو داره. - خط ۴: تنظیم کدگذاری به UTF-8 (برای پشتیبانی از فارسی).
- خط ۵: عنوان صفحه که تو تب مرورگر میاد.
- خط ۷: شروع بخش
bodyکه محتوای اصلی اینجاست. - خط ۸: یک عنوان بزرگ (h1) با متن خوشآمدگویی.
- خط ۹ و ۱۰: دو پاراگراف ساده.
چطور یک سند HTML رو اجرا کنیم؟ 🖥️
حالا که اولین سند HTML خودتو نوشتی، باید ببینی که توی مرورگر چطوری اجرا می‌شه. مراحل:
1️⃣ یه فایل متنی جدید باز کن و کدت رو توش بنویس.
2️⃣ فایل رو با پسوند .html ذخیره کن (مثلاً index.html)
جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست
3️⃣ روش کلیک کن یا اون رو با مرورگر باز کن (Chrome، Firefox، Edge و …)
4️⃣ نتیجه رو ببین و کیف کن! 😍
جمع بندی 🎯
خب، حالا که ساختار اصلی یه سند HTML رو یاد گرفتی، تمرین کن! یه فایل جدید بساز، کدهای بالا رو کپی کن و تغییرات دلخواهت رو اعمال کن. ببین چطوری مرورگر محتوا رو نمایش میده. 🚀
اگه سوالی داری یا به مشکلی برخوردید، توی کامنتها بپرس. منتظر پیشرفتت هستم! 💪
جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form
به پایان جلسه سوم رسیدیم. خسته نباشی، الان میتونی یه صفحه وب ساده اما استاندارد بسازی! 🥳
تا جلسه بعدی فعلن خدانگهدات 🙂
ارسال نظر ( 0 نظر تایید شده )