آشنایی مقدماتی با HTML

در این فصل قصد داریم چند مورد از تگ های رایج در سند HTML را به طور اجمالی بررسی کنیم. قصد ما در این نوشته آموزش کامل این عناصر نیست و صرفا آشنایی مقدماتی هست. (پس در مورد آنها نگران نباشید در نوشته های بعدی به طور کامل به آنها خواهیم پرداخت)


HTML زبان نشانه گذاری استاندارد برای طراحی صفحات وب هست.

  • HTML  مخفف Hyper Text Markup Language  به معنای زبان نشانه گذاری فرامتن است
  • عناصر HTML بلوک های سازنده ی صفحات HTML هستند
  • عناصر HTML با استفاده از تگ ها نشان داده میشوند
  • مرورگر ها عناصر HTML را در خروجی نمایش نمیدهند ولی از آنها برای چگونگی نمایش محتوای صفحه استفاده میکنند.

در نمونه کد زیر یک سند ساده HTML را مشاهده میکنید :

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

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

    </body>
</html>
خودتان امتحان کنید

توضیح عناصر به کار برده شده در مثال :

<!DOCTYPE html>  مشخص میکند که نوع سند استفاده شده HTML5 است.
<html> عنصر ریشه برای دیگر عناصر  صفحه ی HTML است.
<head> شامل اطلاعاتی در مورد سند مورد نظر بوده و البته ارجاعات فایل های CSS و JavaScript میتواند در آن قرار بگیرد.
<title> عنوان صفحه ی HTML را مشخص میکند.
<body> یا بدنه ی سند HTML حاوی عناصری هست که در خروجی مرورگر نمایش داده میشود.
<h1> مهمترین عنوان نوشته ی ما را در سند HTML مشخص میکند
<p> یک پاراگراف را در سند HTML مشخص میکند.


تگ ها در HTML

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

<tagname>content goes here...</tagname>

تگ ها در HTML به صورت معمول جفت هستند مانند :  <p> و <p/>

اولین تگ ، تگ آغازین و دومین تگ ، تگ پایانی نامیده میشود . تگ پایانی همانند تگ آغازین نوشته میشود با این تفاوت که قبل از نام عنصر یک اسلش قرار میگیرد.

نکته : تگ آغازین با نام تگ باز و تگ پایانی با نام تگ بسته نیز نامیده میشوند. 


مرورگرهای وب 

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


پیکره اصلی یک صفحه ی HTML

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

<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

به خاطر داشته باشید که تنها محتویات داخل تگ body در مرورگر قابل نمایش خواهد بود.


 تگ <DOCTYPE!>

تگ <DOCTYPE!> نوع سند را مشخص کرده و به مرورگر برای نمایش بهتر صفحه کمک میکند.
این تگ فقط یک بار و آن هم در بالای صفحه قرار میگیرد (قبل از تگ HTML).
تگ <DOCTYPE!> حساس به حروف کوچک و بزرگ نیست و در هر دو حالت برای مرورگر قابل قبول است.
در نمونه کد زیر نحوه ی تعریف تگ نوع سند را مشاهده میکنید :

<!DOCTYPE html>

نسخه های مختلف HTML

از روز های آغازین وب تاکنون نسخه های مختلفی از HTML ارائه شده است. در جدول زیر میتوانید این نسخه ها را مشاهده کنید :

نسخه سال
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
منتشر شده در ۲۴ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۲۰۲۳ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده