مفاهیم پایه‌ی HTML

در این آموزش، با مفاهیم پایه‌ی HTML و چند مثال ساده آشنا می‌شویم.

📌 فهرست مطالب

ساختار کلی یک سند HTML
تیترها در HTML
پاراگراف‌ها در HTML
لینک‌ها در HTML
تصاویر در HTML
چگونه کد HTML یک صفحه را ببینیم؟

📝 ساختار کلی یک سند HTML

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

✅ دستور !DOCTYPE: مشخص می‌کند که این صفحه از نوع HTML است.
✅ تگ <html>: شامل تمام محتوای صفحه است.
✅ تگ <body>: محتوای قابل مشاهده‌ی صفحه را دربرمی‌گیرد.

🔹 مثال:

<!DOCTYPE html>
<html>
<body>

<h1>اولین تیتر من</h1>
<p>اولین پاراگراف من.</p> <script data-optimized="1" src="https://fahmidani.com/wp-content/litespeed/js/3b674914fd690b2d22c6fbf6445f080b.js?ver=0bc68"></script></body>
</html>

👆 این کد یک صفحه‌ی ساده‌ی HTML را نمایش می‌دهد که شامل یک تیتر و یک پاراگراف است.

📢 تیترها در HTML

در HTML می‌توان با تگ‌های <h1> تا <h6> تیترها را مشخص کرد.

🔹 نکات مهم:

<h1> مهم‌ترین تیتر است و معمولاً برای عنوان اصلی صفحه استفاده می‌شود.
<h6> کم‌اهمیت‌ترین تیتر است و برای تیترهای فرعی به کار می‌رود.

🔹 مثال:

<h1>این تیتر 1 است</h1>
<h2>این تیتر 2 است</h2>
<h3>این تیتر 3 است</h3>

📌 تمرین: یک صفحه‌ی HTML بساز که تیترهای مختلف را شامل شود!

📝 پاراگراف‌ها در HTML

برای نمایش متن در HTML، از تگ <p> استفاده می‌شود.

🔹 مثال:

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

📌 نکته: هر بار که یک تگ <p> جدید ایجاد می‌کنید، مرورگر آن را در یک خط جداگانه نمایش می‌دهد.

🔗 لینک‌ها در HTML

لینک‌ها در HTML با تگ <a> ساخته می‌شوند.

🔹 ساختار کلی:

<a href="آدرس-سایت">متن لینک</a>

🔹 مثال:

<a href="https://www.fahmidani.com">این یک لینک به fahmidani است</a>

📌 تمرین: یک صفحه‌ی HTML بساز که شامل چند لینک به سایت‌های مختلف باشد!

🖼️ تصاویر در HTML

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

🔹 ویژگی‌های مهم:

src: مسیر تصویر را مشخص می‌کند.
alt: متن جایگزین تصویر است.
width و height: اندازه تصویر را تنظیم می‌کند.

🔹 مثال:

<img loading="lazy" decoding="async" src="fahmidani.jpg" alt="fahmidani.com" width="104" height="142" title="مفاهیم پایه‌ی HTML 1">

📌 نکته: همیشه از alt برای تصاویر استفاده کنید تا در صورت بارگیری نشدن تصویر، توضیحی نمایش داده شود.

🔍 چگونه کد HTML یک صفحه را ببینیم؟

تا حالا شده از خودتان بپرسید: “چطور این صفحه‌ی وب ساخته شده؟ 🤔”

✅ مشاهده کد HTML یک صفحه:
🔹 کلیدهای CTRL + U را بزنید (در ویندوز).
🔹 روی صفحه کلیک راست کنید و گزینه‌ی View Page Source را بزنید.

✅ مشاهده و ویرایش عناصر HTML در مرورگر:
🔹 روی یک المان کلیک راست کنید و گزینه‌ی Inspect را انتخاب کنید.
🔹 می‌توانید کدهای HTML و CSS را در لحظه ببینید و حتی تغییر دهید.

📌 چالش: یک صفحه‌ی وب دلخواه را باز کنید و کد HTML آن را مشاهده کنید!

🎯 جمع‌بندی

در این آموزش با مفاهیم پایه‌ی HTML آشنا شدیم، از جمله:
✅ ساختار کلی یک سند HTML
✅ استفاده از تیترها، پاراگراف‌ها، لینک‌ها و تصاویر
✅ نحوه‌ی مشاهده و بررسی کد HTML صفحات وب