ساختار HTML | آموزش کامل+ نمونه کد+ نمونه سوال

قبلی بعدی

صفحات HTML

<!DOCTYPE html>
<html>
    <head>
         محتوای پنهان از کاربر 
    </head>
    <body> 
         محتوای مورد نمایش به کاربر 
    </body>
</html>

همه صفحات HTML با اعلان <DOCTYPE html!> شروع می شوند.

صفحات HTML با تگ شروعی <html> شروع و با تگ پایانی <html/> تمام می شوند.

در داخل تگ <html> از دو تگ <head> و <body> استفاده می شود.

در تگ <head>:

اطلاعاتی که قرار است به کاربر نهایی سایت نمایش داده نشود (مانند اطلاعاتی که فقط ربات های جستجوگر مانند گوگل باید ببینند).
اطلاعاتی که کاربر به صورت غیر مستقیم آن را می بیند (مانند تغییر رنگ متن ها و ...)
و اطلاعات متا (meta data) قرار می گیرد.

در تگ <body>:

تمام اطلاعاتی که قرار است به کاربر نهایی سایت، نمایش داده شود قرار می گیرد.

اعلان در HTML

با استفاده از این اعلان، نسخه سند HTML برابر نسخه 5 یا همان html 5 می شود و به مرورگر ها کمک میکند تا صفحات وب را به خوبی نمایش دهند.

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

به صورت پیشفرض مرورگر ها از نسخه 5 HTML استفاده می کنند.

<!DOCTYPE html>

در هر صفحه فقط یکبار و در اولین خط کد، باید از این اعلان استفاده شود.

این اعلان به حروف بزرگ و کوچک حساس نیست.

نکته: <DOCTYPE html!> فقط یک اعلان است و تگ نیست و نشان دهنده نسخه 5 HTML است.

تگ head در HTML

در داخل این تگ متا دیتا (meta data) های سایت قرار داده می شوند.

نکته: برای نمونه عنوان سند html، آیکون سایت، نوع کاراکتر و ... meta data هستند.

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

<!DOCTYPE html>
<html>
   <head> 
      <title>PNLdev</title>
       اطلاعات متا سایت را اینجا قرار دهید
   </head>
   <body>
       محتوای سایت را اینجا قرار دهید
   </body>
</html>

در تگ <head>:

اطلاعاتی که قرار است به کاربر نهایی سایت نمایش داده نشود (مانند اطلاعاتی که فقط ربات های جستجوگر مانند گوگل باید ببینند).
اطلاعاتی که کاربر به صورت غیر مستقیم آن را می بیند (مانند تغییر رنگ متن ها و ...)
و اطلاعات متا (meta data) قرار می گیرد.

تگ body در HTML

این تگ بدنه سایت ما را تشکیل می دهد.

هر چیزی که داخل این تگ قرار بگیرد قابل مشاهده است.

ما باید تمام محتویات سایت را مانند عکس , فیلم , متن و ... را داخل این تگ قرار بدهیم.

برای درک بهتر این مطلب به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
   <body>
      محتوای سایت را اینجا قرار دهید
   </body>
</html>

فضای خالی و فاصله ها در HTML

در ساختار HTML فواصل بیشتر از یک فضای خالی (space) نادیده گرفته می شود، و فقط یک space بین کلمات اعمال می شود.

<h1>HTML</h1>
<p>
    .زبان نشانه گذاری استاندارد برای طراحی صفحات وب می باشد html
    . زبان برنامه نویسی نیست بلکه زبان نشانه گذاری است html 
</p>

خلاصه درس

در این بخش با ساختار صفحات HTML آشنا شدید.
به بررسی اعلان، تگ html, head, body پرداختیم.

تمرین

داخل تگ p متن HTML را بنویسید.

سپس عناصری که کامل نیستند را کامل کنید.

مشاهده پاسخ

قبلی بعدی

توسعه دهندگان

احسان اسلامی