مقدمه ای بر HTML

HTML چیست؟

  • HTML زبان نشانه گذاری استاندارد برای ایجاد صفحات وب می باشد.
  • HTML مخفف زبان نشانه گذاری ابر متن (Hypertext Markup Language) است.
  • HTML ساختار صفحات وب را با استفاده از نشانه گذاری توصیف می کند.
  • عناصر HTML بلوک های ساختمانی یک صفحه وب HTML است.
  • عناصر HTML توسط تگ های 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>

این کد را در برنامه ویرایشگر HTML یا یک واژه پرداز مثل Notepad کپی کرده و با پسوند html ذخیره کنید. سپس روی آن دو کلیک کنید تا در مرورگر خود نتیجه را مشاهده کنید.

شرح مثال

  • اعلان <!DOCTYPE html> مشخص می کند که این سند یک سند HTML نسخه 5 است.
  • عنصر <html> عنصر یا جز ریشه یک صفحه HTML است
  • عنصر <head> حاوی اطلاعات متا (ابر اطلاعات) مربوط به سند است.
  • عنصر <title> مشخص کننده عنوان سند است.
  • عنصر <body> حاوی محتوای مرئی صفحه است که توسط کاربر دیده می شود.
  • عنصر <h1> مشخص کننده تیتر 1 یا بزرگترین تیتر صفحه است.
  • عنصر <p> مشخص کننده پاراگراف است و متن پاراگراف بین این تگ قرار می گیرد.

تگ های HTML

تگ HTML حاوی نام عناصر HTML است که در بین پرانتز گوشه دار (angle brackets) قرار می گیرد.

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

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

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

مرورگرها (جستجوگرهای وب)

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

مرورگر تگ های HTML را نمایش نمی دهد اما از آنها برای تعیین طریقه چیده شدن محتوای صفحه استفاده می کند. برای نمونه، خروجی کد برنامه ساده فوق در زیر نمایش یافته است:

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

ساختار صفحه HTML

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

<html>
<head>
<title>عنوان صفحه<title/>
<head/>
<body>
<h1>تیتر یک<h1/>
<p>یک پاراگراف متن<p/>
<p>یک پاراگراف دیگر متن<p/>
<body/>
<html/>

توجه: تنها محتوای داخل بخش محصور شده توسط تگ های <body> (بخش سفید رنگ تصویر فوق) در مرورگر نمایش داده می شود.

اعلان نوع سند (<!DOCTYPE>)

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

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

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

اعلان <!DOCTYPE> برای سند HTML به صورت <!DOCTYPE html> است.

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

ار روز های اول شروع اینترنت و وب، نسخه های مختلفی از HTML معرفی شده است:

 

نسخه

سال

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2014

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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