HTML چیست؟ مبانی و مفاهیم اولیه

پنجشنبه, 10 تیر 1400
زمان مورد نیاز برای مطالعه: 4 دقیقه
HTML چیست؟ مبانی و مفاهیم اولیه

HTML چیست؟ مبانی و مفاهیم اولیه

HTML مخفف عبارت Hypertext Markup Language و یک زبان نشانه گذاری ابر متنی است؛ که بیشتر صفحات وب را تشکیل می‌دهد. HTML به عنوان یک زبان برنامه نویسی در نظر گرفته نمی‌شود زیرا نمی‌تواند عملکردی مثل شرط، تکرار و غیره ایجاد کند. در عوض، با استفاده از HTML طراحان وب می‌توانند عناصری مانند جدول، تصویر، صوت، لیست، پاراگراف و غیره ایجاد کنند.

برخی از رایج‌ترین موارد استفاده از HTML چیست؟

  • توسعه وب، توسعه دهندگان از کد HTML برای طراحی نحوه نمایش عناصر صفحه وب مانند متن، پیوند و پرونده‌های رسانه‌ای استفاده می‌کنند.
  • مستندات وب، HTML امکان سازماندهی و قالب‌ بندی اسناد را مشابه Word فراهم می‌کند.

در این مقاله به معرفی HTML می‌پردازیم و با نحوه کار، مزایا و معایب آن و ارتباط HTML با CSS و JavaScript آشنا می‌شویم.

نحوه کارکرد HTML چگونه است؟

یک وب سایت شامل چندین صفحه HTML مختلف است. به عنوان مثال، یک صفحه اصلی، یک صفحه درباره ما و یک صفحه تماس با ما، همه دارای فایل‌های HTML جداگانه هستند. اسناد HTML پرونده‌هایی هستند که با پسوند html یا htm مشخص می‌شوند. که مرورگر فایل HTML را می‌خواند و محتوای آن را نمایش می‌دهد.

تمام صفحات HTML دارای یک سری عناصر هستند که از مجوعه تگ‌ها(tags) و صفت‌ها(attributes) تشکیل شده‌اند. یک تگ به مرورگر وب می‌گوید که یک عنصر کجا شروع و به پایان می‌رسد، در حالی که یک صفت، ویژگی‌های یک عنصر را توصیف می‌کند.

سه قسمت اصلی یک عنصر HTML چیست؟

  • تگ شروع، برای بیان جایی که یک عنصر شروع به کار می‌کند استفاده می‌شود. تگ با براکت‌ها باز و بسته می‌شود. برای مثال، از تگ شروع <p> برای ایجاد پاراگراف استفاده می‌شود.
  • محتوا، این همان خروجی است که سایر کاربران مشاهده می‌کنند.
  • تگ پایان، همان تگ شروع، اما با / قبل از نام عنصر. به عنوان مثال، <p/> برای پایان دادن به پاراگراف استفاده می‌شود.

ترکیبی از این سه قسمت یک عنصر HTML ایجاد میکند:

<p>به این شکل شما یک پاراگراف ایجاد می‌کنید.</p>

قسمت مهم دیگر صفت HTML است که داری دو بخش است؛ یک نام صفت و یک مقدار صفت. برای مثال، عنصر استایل و مقدار رنگ را به پاراگراف اضافه می‌کنیم.

<p style="color:purple;">به این شکل یک پاراگراف با رنگ بنفش ایجاد می‌کنیم.</p>

صفت class برای HTML، که برای توسعه و برنامه نویسی اهمیت ویژه‌ای دارد. با این می‌شود ویژگی‌های یکسان را به چندین عنصر اضافه کرد. به عنوان مثال، میخواهیم از صفت استایل برای تگ عنوان و پاراگراف استفاده کنیم. با استفاده از class این کار را انجام می‌دهیم.

<html>
<head>
<style>
.text {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>
<h1 class="text">این یک عنوان است.</h1>
<p class="text">این یک پاراگراف است.</p>
</body>
</html>

بیشتر عناصر دارای تگ باز و بسته هستند، اما برخی از عناصر برای کار کردن به تگ بسته نیازی ندارند، مانند تگ‌های خالی؛ این عناصر به دلیل نداشتن محتوا از تگ پایان استفاده نمی‌کنند.

<img src="/" alt="Image">

این تگ تصویر دارای دو ویژگی است؛ یک ویژگی src برای مشخص کردن مسیر عکس و یک ویژگی alt برای متن تصویر. با این حال این محتوا به تگ پایانی نیازی ندارد.

سرانجام هر سند HTML باید با تگ <DOCTYPE!> شروع به کار کند تا مرورگر وب از نوع سند مطلع شود.

<!DOCTYPE html>

مزایای و معایب HTML چیست؟

درست مانند هر زبان برنامه نویسی دیگری، HMTL دارای مزایا و معایب است.

مزایا

  • یادگیری آسان و لذت‌بخش
  • قابلیت اجرا در تمام مرورگرها
  • متن باز و رایگان بودن
  • ادغام آسان با زبان‌های سمت سرور مثل php

معایب

  • استاتیک بودن و وابستگی به زبان‌های سمت سرور برای تعامل با کاربر
  • ضعف در پشتیبانی از مرورگرهای قدیمی
  • نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی

سخت پایانی

HTML یک زبان نشانه گذاری ابر متنی است که در اینترنت استفاده می‌شود. هر صفحه HTML دارای یک سری عناصر است که ساختار محتوای یک صفحه وب را ایجاد می‌کند. HTML یک زبان مبتدی و ساده است با پشتیبانی فراوان و عمدتا برای صفحات وب استفاده می‌شود. CSS برای طراحی ظاهری و JavaScript برای عملکرد بهتر استفاده می‌شوند.

با تشکر از شما برای خواندن این مقاله؛ اگر این زبان‌های برنامه نویسی را برای توسعه وب مفید می‌دانید لطفا با دوستان و همکاران خود به اشتراک بگذارید.

HTML چیست؟ مبانی و مفاهیم اولیه در اینجا به پایان رسید. در مقالات بعدی با ما همراه باشید.

مقالات پیشنهادی
مقالات زیر را حتما مطالعه کنید