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

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

1. درواقع کلمه HTML مخفف عبارت “Hyper Text Markup Language” به معنی زبان نشانه گذاری ابرمتن است.

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

3. زبان HTML از یکسری عناصر (Elements) تشکیل شده است.

4. عناصر HTML درواقع به مرورگر ها توضیح می دهند که چگونه یک صفحه وب را نمایش دهند.

5. عناصر HTML با کد های کوتاهی با نام تگ یا tag ایجاد می شوند.

6. تگ های HTML محتویاتی از وب سایت مانند هدینگ یا همان عناوین ، پاراگراف، جداول و… را می توانند توصیف و نمایش دهند.

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

ساختار کلی یک سند HTML بدین شکل است:

در ابتدای سند HTML، می توان عبارت <!DOCTYPE html> را مشاهده کرد. این عبارت درواقع نوع (Type) سند یا همان Document که ساخته شده است را توصیف می کند. همانطور که مشاهده می کنید، در جلوی عبارت DOCTYPE کلمه html قرار داده شده است و این بدین معنی است که ساختار سندی که ما در حال نوشتن هستیم، یک ساختار HTML است.

تگ یا همان عنصر <html> ریشه تمامی تگ ها و عناصر HTML است.

تگ <head> متشکل از توضیحات متا فایل html می باشد.

تگ <title> عنوان صفحه html را مشخص می کند.

تگ <body> محتویات قابل مشاهده صفحه html را شامل می شود.

تگ <h1> درواقع هدینگ 1 یا عنوان 1 یا H1 که بزرگ ترین سر تیتر در html است را توصیف می کند.

تگ <p> یک پاراگراف را در html توصیف می کند.

تگ های HTML

تگ های HTML درواقع نام عناصری هستند که با angle brackets یا همان <> پوشش داده شده اند:

همانطور که در مثال بالا مشاهده می کنید، نام عنصری که می خواهیم را در قالب <> به صورت <tagname> قرار داده ایم.

هر تگ html معمولاً در دو قالب <tag> و <tag/> تعریف می شوند. درواقع تگ اول که بدون “/” است، شروع تگ می باشد و تگ دوم که همراه با “/” است، پایان تگ می باشد. همانطور که گفتیم، اگر بخواهیم پایان یک تگ را مشخص کنیم، کافیست تگ را به همان صورتی که شروع کرده ایم، بنویسیم ولی همراه با آن یک اسلش که “/” می باشد، قرار دهیم.

نکته: تگی که ما برای شروع استفاده می کنیم، تگ شروع یا همان opening tag است و تگی که برای پایان دادن استفاده می کنیم، تگ پایان یا همان closing tag نام دارد.

مرورگر ها

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

نمایش یک صفحه html

همانطور که در تصویر بالا مشاهده می کنید، مرورگر ما تنها محتوایی که ما با تگ های html قرار داده بوده ایم را نشان داده و کد های صفحه را نشان نمی دهد.

ساختار صفحه HTML

در تصویر زیر، می توان ساختار یک صفحه html را تصور کرد.

ساختار یک صفحه html

نکته: توجه داشته باشید که تنها محتویات داخل تگ <body> که بخش سفید رنگ است، در مرورگر ها نمایش داده می شوند.

عبارت <DOCTYPE!>

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

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

البته به این موضوع نیز اشاره کنیم که عبارت <DOCTYPE!> مورد ضروری نیست اما پیشنهاد می شود که از آن استفاده کنید.

ساختار عبارت <DOCTYPE!> که ما در HTML 5 می توانیم بکار ببریم، بدین صورت است:

ورژن های HTML

از زمان گذشته تا به الان، ورژن های بسیار مختلفی از زبان HTML منتشر شده است که در ادامه، شماره ورژن و سال عرضه آن ها را معرفی می کنیم.

تاریخچه html

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

آموزش زبان HTML – جلسه دوم – مثال های مقدماتی
پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .