htmlطراحی سایت

جلسه ۱۲: HTML چیست؟ در html

مروری کوتاه بر هدف HTML در ایجاد صفحات وب. موارد زیر را بیان خواهیم کرد

  • متن نوشته
  • تعریف ساختار با استفاده از عناصر HTML
  • یک فایل HTML ساده
  • ارائه فایل HTML در مرورگر
  • تمرین

متن نوشته

به داکیومنتی فکر کنید که می توانید در یک پردازنده کلمه مانند Microsoft Word یا Google Docs ایجاد کنید. آنها معمولاً از بیش از یک سبک تشکیل شده اند. آنها از اندازه های مختلف قلم برای نشان دادن بخشهای مختلف متن استفاده می کنند ، مانند عنوان ها ، محتوای اصلی ، پاورقی ها ، فهرست مطالب ، زیرنویس ها و غیره. در حالی که انسان می تواند به سادگی به یک سند نگاه کند و تفاوت بین عنوان و پاراگراف را درک کند ، کامپیوترها چنین شهودی ندارند. برای اینکه یک مرورگر به درستی یک صفحه وب را ارائه دهد ، باید به صراحت گفته شود که هر یک از مطالب چی هستند.

تعریف ساختار با استفاده از عناصر HTML

بنابراین چگونه دقیقاً به مرورگر بگوییم چه چیزی است؟ اینجاست که زبان علامت گذاری متن Hyper (یا به اختصار HTML) به کار شما می آید. HTML یک زبان نشانه گذاری است که شرح ساختار / طرح صفحه وب شما را ارائه می دهد. ما این ساختار را با قرار دادن محتوا در عناصر HTML تعریف می کنیم. یک عنصر HTML با استفاده از تگ تشکیل می شود ، که به عنوان توصیف کننده هر قسمت از محتوای صفحه شما عمل می کند. به عنوان مثال ، از برچسب <p> برای توصیف یک پاراگراف استفاده می شود. برخی دیگر از عناصر HTML شامل موارد زیر است:

  • <h1>: عنوان بالاترین سطح
  • <h6>: عنوان پایین ترین سطح
  • <img>: یک تصویر

بیشتر عناصر HTML حاوی تگ های باز و بسته هستند تا نشان دهند که یک عنصر از کجا شروع و پایان می یابد ، مانند این موارد:

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

چند استثنا وجود دارد ، مانند برچسب <img> ، که در درس های بعدی شرح خواهیم داد.

یک فایل HTML ساده

بیایید یک فایل HTML ساده را بررسی کنیم تا درک بهتری از نحوه استفاده نشانه گذاری برای تعریف ساختار یک صفحه وب داشته باشیم:

<DOCTYPE! html>
<html> 
  <head>
    <title>A Basic Web Page</title>
  </head>
  <body>
    <h1>My First HTML File</h1>
    <p>Congratulations! You’re well on your way to creating your own web pages.</p>
  </body>
</html>

خط اول ، <DOCTYPE! html> ، به عنوان اعلامیه doctype معرفی می شود. این برای نشان دادن اینکه مرورگر در چه نسخه ای از HTML فایل نوشته شده است به کار می رود. برای این فایل ، مشخص کردن html نشان می دهد که فایل در HTML5 نوشته شده است. برای خط دوم ، توجه داشته باشید که تگ بستن <html> در آخرین خط پرونده چگونه است. یکی از ویژگی های عناصر HTML قابلیت تودرتو بودن آنهاست. به عبارت دیگر ، عناصر HTML می توانند در سایر عناصر HTML وجود داشته باشند. این باعث ایجاد یک ساختار جالب می شود که معمولاً از آن به عنوان ساختار داده درختی در زبان رایانه ای یاد می شود. در یک فایل HTML ، عنصر ریشه را با تگ <html> نشان می دهیم. در داخل این عنصر ریشه ، چندین عنصر وجود دارد که می تواند شاخه های گره ریشه در نظر گرفته شود:

برای تعریف صحیح یک فایل HTML ، باید عناصر <head> و <body> را در عنصر ریشه <html> قرار دهیم. عنصر <head> شامل اطلاعات پشتیبانی کننده در مورد فایل است که معمولاً به عنوان فراداده شناخته می شود. برای کامل بودن باید زیر عنصر <head> یک <title> وجود داشته باشد. عنصر <head> همچنین ممکن است حاوی پیوندهایی به پرونده های Javascript و صفحه های سبک CSS باشد. عنصر <body> شامل محتوای اصلی یک فایل HTML است. این عنصری است که اطلاعات ارائه شده توسط مرورگر وب شما را در خود نگه می دارد. در داخل یک فایل HTML فقط یک عنصر <body> وجود دارد و بیشتر HTML که می نویسید در این عنصر قرار خواهد گرفت.

ارائه فایل HTML در مرورگر

حال ، بیایید نگاهی به نحوه ارائه این صفحه وب توسط مرورگر بیندازیم:

<DOCTYPE! html>
<html> 
  <head>
    <title>A Basic Web Page</title>
  </head>
  <body>
    <h1>My First HTML File</h1>
    <p>Congratulations! You’re well on your way to creating your own web pages.</p>
  </body>
</html>

آزمون:

0
ایجاد شده در

Quiz 44

1 / 5

کدام عنصر شامل محتوایی است که توسط مرورگر ارائه می شود؟

2 / 5

چه عنصری شامل اطلاعات عمومی (فراداده) درباره فایل HTML است؟

3 / 5

HTML برای ارائه صحیح یک صفحه وب قطعا مورد نیاز نیست.

4 / 5

HTML برای توصیف ساختار یک صفحه وب استفاده می شود.

5 / 5

عناصر HTML باید همیشه دارای تگ باز و بسته باشند تا به درستی تفسیر شوند:

امتیاز شما

میانگین امتیازها 0%

0%

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا