درس سوم : مثال‌های پایه HTML

مثال‌های پایه HTML

در این فصل، برخی از مثال‌های پایه HTML را نشان خواهیم داد. اگر از تگ‌هایی استفاده کردیم که هنوز یاد نگرفته‌اید، نگران نباشید.

اسناد HTML

تمام اسناد HTML باید با یک اعلامیه نوع سند شروع شوند: <!DOCTYPE html>.

خودِ سند HTML با <html> شروع و با </html> تمام می‌شود.

بخش قابل مشاهده سند HTML بین <body> و </body> قرار دارد.

مثال:

<!DOCTYPE html>
<html>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

خروجی مثال بالا:

My First Heading

My first paragraph.

اعلامیه <!DOCTYPE>

اعلامیه <!DOCTYPE> نشان‌دهنده نوع سند است و به مرورگرها کمک می‌کند تا صفحات وب را به درستی نمایش دهند.

  • این اعلامیه فقط باید یک بار، در بالای صفحه (قبل از هر تگ HTML) ظاهر شود.
  • این اعلامیه به حروف بزرگ و کوچک حساس نیست.
  • اعلامیه <!DOCTYPE> برای 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>

خروجی تیترها:

This is heading 1

This is heading 2

This is heading 3

پاراگراف‌های HTML

پاراگراف‌های HTML با تگ <p> تعریف می‌شوند:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

لینک‌های HTML

لینک‌های HTML با تگ <a> تعریف می‌شوند:

<a href=“https://www.w3schools.com”>This is a link</a>

مقصد لینک در ویژگی href مشخص می‌شود. ویژگی‌ها (Attributes) برای ارائه اطلاعات اضافی درباره عناصر HTML استفاده می‌شوند.

تصاویر HTML

تصاویر HTML با تگ <img> تعریف می‌شوند. فایل منبع (src)، متن جایگزین (alt)، عرض (width) و ارتفاع (height) به عنوان ویژگی ارائه می‌شوند:

<img src=“w3schools.jpg” alt=“W3Schools.com” width=“104” height=“142”>
[تصویر نمونه]

چگونه سورس HTML را مشاهده کنیم؟

مشاهده کد منبع HTML: کلیدهای CTRL + U را در یک صفحه HTML فشار دهید، یا روی صفحه راست‌کلیک کرده و “View Page Source” را انتخاب کنید.

بازرسی (Inspect) یک عنصر: روی یک عنصر راست‌کلیک کرده و “Inspect” را انتخاب کنید تا ببینید از چه عناصری ساخته شده است (هم HTML و هم CSS را خواهید دید).

تمرین (Exercise):

کدام مورد برای اعلامیه نوع سند (document type declaration) صحیح است؟

۱. <!DOCTYPE html> (پاسخ صحیح)

۲. DOCTYPE html;

۳. –DOCTYPE html;

درس قبلی
بازگشت به دوره
درس بعدی