در این آموزش، با مفاهیم پایه‌ی 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/7fac962aa91aab5144d8f06093da02ad.js?ver=cdb7f"></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 صفحات وب