در این فصل، چند مثال ساده از HTML را نشان می‌دهیم.
نگران نباشید اگر با بعضی از تگ‌هایی که استفاده می‌کنیم هنوز آشنا نیستید.
🔹 اسناد HTML
تمام اسناد HTML باید با یک اعلان نوع سند (Document Type Declaration) آغاز شوند:
<!DOCTYPE html>
سند HTML با <html> شروع و با </html> پایان می‌یابد.
قسمت قابل مشاهده صفحه وب بین تگ‌های <body> و </body> قرار دارد.
✅ مثال:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
🔹 اعلان <!DOCTYPE>
اعلان <!DOCTYPE> نوع سند را مشخص می‌کند و به مرورگرها کمک می‌کند تا صفحات وب را به‌درستی نمایش دهند.
- فقط باید یک‌بار در ابتدای صفحه )قبل از هر تگ (HTMLظاهر شود.
- به حساسیت حروف )حروف بزرگ یا کوچک) وابسته نیست.
- برای HTML5، این اعلان به صورت زیر است:
<!DOCTYPE html>
🔹 سرفصل‌ها در HTML
سرفصل‌های HTML با تگ‌های <h1> تا <h6> تعریف می‌شوند.
- <h1> مهم‌ترین سرفصل است.
- <h6> کم‌اهمیت‌ترین سرفصل است.
✅ مثال:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
🔹 پاراگراف‌ها در HTML
پاراگراف‌ها با استفاده از تگ <p> تعریف می‌شوند.
:مثال ✅
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
🔹 لینک‌ها در HTML
لینک‌ها با تگ <a> تعریف می‌شوند.
- مقصد لینک در ویژگی (attribute) href مشخص می‌شود.
✅ مثال:
<a href="https://codoloper.liara.run">This is a link</a>
🔸 ویژگی‌ها (attributes) برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می‌شوند.
در فصل‌های بعدی بیشتر درباره ویژگی‌ها یاد خواهید گرفت.
🔹 تصاویر در HTML (Images)
تصاویر با استفاده از تگ <img> تعریف می‌شوند.
- فایل منبع تصویر (src)
- متن جایگزین(alt (
- عرض(width
- ارتفاع(height (
همگی به صورت ویژگی تعریف می‌شوند.
✅ مثال:
<img src="codoloper.jpg" alt="codoloper.liara.run" width="104" height="142">
🔹 چگونه کد HTML را مشاهده کنیم؟
شاید تا به حال به یک صفحه وب نگاه کرده باشید و با خود بگویید: "چطور این کار رو کردن؟"
🔍 دیدن کد منبع HTML:
- کلیدهای CTRL + U را در یک صفحه HTML فشار دهید.
- یا روی صفحه راست‌کلیک کرده و گزینه View Page Source را انتخاب کنید.
🔧 بازرسی عناصر HTML:
- روی یک عنصر (یا ناحیه خالی) راست‌کلیک کرده و Inspect را انتخاب کنید.
- با این کار می‌توانید HTML و CSS صفحه را مشاهده و حتی به صورت زنده ویرایش کنید.