آموزش HTML - نمای کلی

عبارت HTML مخفف HyperText Markup Language (زبان نشانه‌گذاری فرامتن) است. این زبان برای ساختاردهی به محتوای وب با استفاده از عناصر مختلف (که معمولاً به عنوان تگ شناخته می‌شوند) به کار می‌رود. این عناصر HTML بخش‌های مختلف یک صفحه وب را تعریف می‌کنند، مانند سرفصل‌ها، پاراگراف‌ها، لینک‌ها به صفحات وب دیگر، لیست‌ها، تصاویر، جداول و غیره. این عناصر به مرورگر درباره محتوا و قالبی که باید نمایش داده شود اطلاعات می‌دهند.

زبان HTML ترکیبی از HyperText (فرامتن) + Markup Language (زبان نشانه‌گذاری) است. به طوری که:

• HyperText (فرامتن) به روشی اشاره دارد که صفحات وب (اسناد HTML) به یکدیگر پیوند داده می‌شوند. بنابراین، به پیوند موجود در یک صفحه وب "فرامتن" گفته می‌شود.
• Markup Language (زبان نشانه‌گذاری) به این معنی است که شما از HTML برای "نشانه‌گذاری" ساده یک متن با تگ‌هایی استفاده می‌کنید که به مرورگر وب می‌گویند چگونه آن را برای نمایش ساختاردهی کند.

عنصر HTML چیست؟

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

سینتکس پایه یک عنصر HTML به این صورت است −

<tag_name>content</tag_name>

مثال زیر را در نظر بگیرید که یک عنصر HTML را نشان می‌دهد −

<h1>It is top-level heading</h1>

در اینجا،

• <h1> تگ شروع است.
• "It is top-level heading" محتوا است که داخل تگ‌های شروع و پایان قرار گرفته است.
• </h1> تگ بسته شدن است.

ساختار صفحه HTML

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

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

ساختار صفحه HTML شامل <!DOCTYPE html>، <html>، <head>، <title>، <body> و تگ‌های دیگری است که در صفحه اصلی نمایش داده می‌شوند.

در این ساختار،

• <!DOCTYPE html> − نوع سند را به عنوان HTML تعریف می‌کند.
• <html> − عنصر ریشه (root) برای یک سند HTML است. همه عناصر داخل این عنصر قرار می‌گیرند.
• <head> − تگ head می‌تواند شامل اسکریپت‌ها و استایل‌هایی باشد که برای قابلیت‌های صفحه مفید هستند. تگ‌های متاتگ نیز داخل این تگ قرار می‌گیرند.
• <title> − عنوان صفحه وب را تعریف می‌کند.
• <body> − بدنه صفحه وب را تعریف می‌کند؛ تمام عناصری که برای نمایش محتوا در مرورگر استفاده می‌شوند، داخل تگ body قرار می‌گیرند.
• <h1> و <p> − تگ h1 عنوان صفحه را تعریف می‌کند و تگ p پاراگراف را تعریف می‌کند.

نقش مرورگر وب

نقش مرورگر وب خواندن اسناد HTML از مسیر داده‌شده (از سرور یا از یک دستگاه محلی) و نمایش آن در صفحات وب است. تمام مرورگرهای وب مانند گوگل کروم، سافاری، فایرفاکس و غیره با خواندن اسناد HTML سازگار هستند. شما می‌توانید از هر یک از مرورگرهای وب برای نمایش سند HTML خود به فرمت وب استفاده کنید.

اعلامیه <!DOCTYPE>

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

<!DOCTYPE html>

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

تگ‌ها، عناصر و ویژگی‌های HTML در مقایسه با یکدیگر

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

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

و ویژگی‌های HTML (Attributes) اطلاعات اضافی درباره عناصر HTML ارائه می‌دهند؛ تا رفتار آن‌ها را تعریف یا تغییر دهند. ویژگی‌ها همراه با تگ بازکننده استفاده می‌شوند.

حساسیت تگ‌های HTML به حروف بزرگ و کوچک

تگ‌های HTML به حروف بزرگ و کوچک حساس نیستند. آن‌ها می‌توانند با حروف بزرگ یا کوچک نوشته شوند. اما کنسرسیوم وب جهان‌گستر (W3C) استفاده از تگ‌های با حروف کوچک را از HTML 4 به بعد توصیه می‌کند.

اهمیت HTML

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

• زبان HTML ساختار صفحه وب را تعریف می‌کند و به طراحی وب‌سایت‌ها کمک می‌کند.
• با کمک CSS و JavaScript، زبان HTML به ایجاد وب‌سایت‌های زیبا و تعاملی کمک می‌کند.
• زبان HTML با بهینه‌سازی تگ‌ها بر اساس کلمات کلیدی هدف، به بهینه‌سازی برای موتورهای جستجو (SEO) کمک می‌کند.
• زبان HTML به پیمایش (یا مرور) صفحات و وب‌سایت‌های مختلف از هر نقطه‌ای در اینترنت کمک می‌کند.
• زبان HTML از ورودی‌های کاربر و فرم‌ها پشتیبانی می‌کند؛ شما می‌توانید به راحتی اطلاعات را از هر کجا در جهان دریافت کنید (ممکن است برای این کار به پشتیبانی پایگاه داده در پس‌زمینه نیاز داشته باشید).
• زبان HTML از یک استاندارد باز توسط W3C پیروی می‌کند. بنابراین، HTML از همه مرورگرها در هر نوع دستگاهی پشتیبانی می‌کند. نیازی نیست HTML را برای مرورگرها یا دستگاه‌های مختلف تغییر دهید.

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