HTML (HyperText Markup Language) زبان استانداردی برای ایجاد صفحات وب است. این زبان به توسعه‌دهندگان وب امکان می‌دهد که محتوای مختلفی مانند متن، تصاویر، لینک‌ها و ویدیوها را به شیوه‌ای ساختاریافته نمایش دهند. HTML به عنوان پایه‌ای‌ترین زبان برنامه‌نویسی وب شناخته می‌شود و تمامی سایت‌های موجود در اینترنت با استفاده از آن ساخته شده‌اند. با وجود رشد فناوری و ابزارهای توسعه وب، آموزش HTML همچنان به عنوان اولین گام ضروری برای طراحی وب مورد استفاده قرار می‌گیرد. در این مقاله، به معرفی HTML، تاریخچه آن، برچسب‌های اصلی، ساختار اسناد HTML و نحوه ایجاد اولین صفحه HTML پرداخته خواهد شد.
تعریف و تاریخچه HTML
HTMLیک زبان نشانه‌گذاری است که برای ساختاردهی و نمایش محتوا در صفحات وب استفاده می‌شود. این زبان به مرورگرهای وب اجازه می‌دهد که محتوای مختلف مانند متن، تصاویر و پیوندها را به‌درستی نمایش دهند. HTML به جای انجام محاسبات یا پردازش‌های پیچیده، صرفاً برای ساختاردهی و سازماندهی اطلاعات به کار می‌رود و به عنوان اساسی‌ترین زبان برای توسعه وب شناخته می‌شود.
تاریخچه HTML
HTML اولین بار در سال 1991 توسط تیم برنرز-لی، دانشمند انگلیسی و مخترع شبکه جهانی وب (World Wide Web)، معرفی شد. هدف از ایجاد HTML، فراهم کردن بستری بود که افراد بتوانند اطلاعات خود را به صورت ساختاریافته در اینترنت منتشر کنند و از طریق لینک‌ها به دیگر صفحات یا منابع دسترسی داشته باشند.
نسخه اولیه HTML بسیار ساده بود و شامل تعداد محدودی از تگ‌ها مانند <p> برای پاراگراف‌ها و <a> برای لینک‌ها بود. این نسخه اولیه بیشتر برای نمایش متن و پیوندهای ساده کاربرد داشت و قابلیت‌های تعاملی پیچیده‌ای مانند پشتیبانی از ویدئو یا گرافیک نداشت.
طی سال‌ها، HTML به تدریج توسعه یافت و نسخه‌های جدیدتری از آن منتشر شد. HTML 2.0 در سال 1995 توسط IETF (Internet Engineering Task Force) به عنوان اولین نسخه استاندارد HTML معرفی شد. این نسخه شامل امکانات بیشتری برای فرمت‌دهی متن و سازماندهی محتوا بود. با رشد نیازهای وب‌سایت‌ها و افزایش پیچیدگی صفحات وب، نسخه‌های جدیدتری مانند HTML 3.2 و HTML 4.01 منتشر شدند که امکانات بیشتری مانند جداول و فرم‌ها را به زبان HTML اضافه کردند.
معرفی HTML5
در سال 2014، نسخه HTML5 به عنوان جدیدترین و پیشرفته‌ترین نسخه HTML منتشر شد. این نسخه قابلیت‌های گسترده‌تری مانند پشتیبانی از چندرسانه‌ای‌ها، گرافیک‌های دو بعدی و ذخیره‌سازی محلی را به همراه داشت و به توسعه‌دهندگان وب امکان ایجاد صفحات پویا و تعاملی را داد. برخی از ویژگی‌های کلیدی HTML5 شامل:
پشتیبانی از چندرسانه‌ای‌ها: HTML5 تگ‌های جدیدی مانند <video> و <audio> را معرفی کرد که به کاربران اجازه می‌دهند بدون نیاز به افزونه‌های جانبی (مانند Flash)، ویدیو و صدا را در صفحات وب نمایش دهند.
تگ‌های معنایی جدید: تگ‌هایی مانند <article>, <section>, <header>, و <footer> به ساختاردهی معنایی صفحات کمک می‌کنند و به بهبود SEO و دسترس‌پذیری (accessibility) صفحات وب یاری می‌رسانند.
پشتیبانی از Canvas و SVG: امکان ترسیم گرافیک‌های دوبعدی و انیمیشن‌ها با استفاده از تگ <canvas> و گرافیک‌های برداری (SVG) فراهم شد.
بهبود در ذخیره‌سازی محلی: HTML5 امکان ذخیره‌سازی داده‌ها به صورت محلی در مرورگرها با استفاده از Local Storage و Session Storage را فراهم کرد.
HTML5 همچنان به عنوان استاندارد اصلی برای طراحی و توسعه وب به کار می‌رود و توسعه وب را به سمت ایجاد صفحات سبک‌تر، سریع‌تر و تعاملی‌تر هدایت کرده است.
معرفی برچسب‌های اصلی HTML
برچسب‌ها (tags) در HTML عنصرهای اساسی هستند که ساختار صفحات وب را تشکیل می‌دهند. هر برچسب به مرورگر وب می‌گوید که چگونه محتوای موجود را نمایش دهد. برچسب‌ها معمولاً در قالب <tagname> نوشته می‌شوند و محتوا در بین جفت تگ‌های باز و بسته قرار می‌گیرد. برخی از برچسب‌ها مانند <img> به صورت خودبسته (self-closing) هستند.
در ادامه به معرفی برچسب‌های اصلی HTML که برای ساختاردهی و نمایش محتوای صفحات وب ضروری هستند، می‌پردازیم:
تگ html
تگ <html> بالاترین سطح یک سند HTML است و تمامی محتوای صفحه را در بر می‌گیرد. این برچسب به مرورگر اعلام می‌کند که سند، یک فایل HTML است.
<html>
<!-- محتوای صفحه -->
</html>
تگ head
بخش <head> شامل اطلاعاتی است که برای مرورگر و موتورهای جستجو مفید است ولی به طور مستقیم به کاربر نمایش داده نمی‌شود. این اطلاعات شامل متا دیتا (metadata)، عنوان صفحه و لینک به فایل‌های خارجی (مانند CSS) است.
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
<link rel="stylesheet" href="style.css">
</head>
تگ body
تگ <body> تمام محتوای قابل مشاهده برای کاربر را در بر می‌گیرد. این شامل متن‌ها، تصاویر، جداول و لینک‌ها است.
<body>
<h1>عنوان اصلی</h1>
<p>این یک پاراگراف متنی است.</p>
<img src="image.jpg" alt="تصویر نمونه">
</body>
تگh1 تا h6
این تگ‌ها برای تعریف عناوین به کار می‌روند. <h1> بزرگ‌ترین و مهم‌ترین عنوان است و <h6> کوچک‌ترین عنوان.
<h1>عنوان اصلی</h1> <h2>عنوان فرعی</h2>
تگp
تگ <p> برای نوشتن پاراگراف‌های متنی استفاده می‌شود.
<p>این یک پاراگراف است که توضیحاتی در مورد موضوع می‌دهد.</p>
تگa
تگ <a> برای ایجاد لینک به صفحات دیگر یا منابع خارجی استفاده می‌شود. ویژگی href مقصد لینک را مشخص می‌کند.
<a href="https://www.example.com">بازدید از سایت</a>
تگimg
تگ <img> برای نمایش تصاویر در صفحات وب استفاده می‌شود.
<img src="image.jpg" alt="توضیح تصویر">
تگdiv و span
این تگ‌ها برای سازماندهی و قالب‌بندی محتوا استفاده می‌شوند. <div> یک عنصر بلوکی است و برای بخش‌های بزرگ به کار می‌رود. <span> یک عنصر درون‌خطی است و برای قالب‌بندی متن‌ها استفاده می‌شود.
<div class="container">
<h1>عنوان</h1>
<p>متن نمونه</p>
</div>
تگul, ol, و li
این تگ‌ها برای ایجاد لیست‌های مرتب و نامرتب استفاده می‌شوند.
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
</ul>
تگ table
تگ <table> برای ایجاد جداول در HTML استفاده می‌شود.
<table>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>علی</td>
<td>۲۵</td>
</tr>
</table>
ساختار یک سند HTML
هر سند HTML دارای یک ساختار پایه‌ای است که شامل سه بخش اصلی است: DOCTYPE، head و body.
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان اصلی صفحه</h1>
<p>این یک پاراگراف متنی است.</p>
</body>
</html>
ایجاد اولین صفحه HTML
برای شروع کار با HTML و ایجاد اولین صفحه وب، به یک ویرایشگر متنی ساده مانند Notepad یا یک ویرایشگر حرفه‌ای مانند Visual Studio Code نیاز دارید. در ادامه، مراحل ایجاد یک صفحه وب HTML ساده را مرور می‌کنیم:
انتخاب ویرایشگر:
یک ویرایشگر مانند Notepad یا Visual Studio Code را باز کنید.
ایجاد فایل:
یک فایل جدید ایجاد کنید و آن را با نام index.html ذخیره کنید.
نوشتن کد HTML:
کدهای HTML خود را در فایل وارد کنید.
ذخیره فایل:
پس از وارد کردن کدهای HTML، فایل را با پسوند .html ذخیره کنید. برای مثال، اگر از Notepad استفاده می‌کنید:
روی گزینه File کلیک کنید.
گزینه Save As را انتخاب کنید.
نام فایل را به عنوان index.html وارد کرده و گزینه Save as type را به All Files تغییر دهید تا فایل به درستی ذخیره شود.
مشاهده صفحه HTML در مرورگر: پس از ذخیره فایل، فایل HTML خود را باز کنید. برای این کار می‌توانید فایل را مستقیماً در مرورگر بکشید و رها کنید یا دوبار روی فایل کلیک کنید تا در مرورگر پیش‌فرض شما باز شود. شما باید صفحه‌ای مشاهده کنید که شامل عنوانی در نوار مرورگر و متنی درون صفحه باشد.
ویرایش و به‌روزرسانی صفحه:
اگر نیاز دارید تغییراتی در صفحه خود ایجاد کنید، فایل HTML را دوباره در ویرایشگر متن باز کنید، تغییرات را اعمال کرده و دوباره ذخیره کنید.سپس صفحه را در مرورگر خود بازخوانی (Refresh) کنید تا تغییرات اعمال شوند.
افزودن عناصر بیشتر به صفحه HTML
پس از ایجاد اولین صفحه HTML، می‌توانید عناصر بیشتری را به آن اضافه کنید تا صفحه وب شما غنی‌تر و تعاملی‌تر شود. در زیر چند عنصر کاربردی دیگر که می‌توانید به صفحه خود اضافه کنید آورده شده است:
1. افزودن تصویر
برای افزودن تصویر به صفحه وب، از تگ <img> استفاده می‌شود. تگ <img> دارای ویژگی‌های مهمی مانند src برای مشخص کردن مسیر تصویر و alt برای نمایش توضیحات جایگزین است.
<img src="image.jpg" alt="تصویر نمونه">
2. افزودن لینک
برای ایجاد یک لینک به یک صفحه دیگر یا یک سایت خارجی، از تگ <a> استفاده می‌شود. ویژگی href مقصد لینک را مشخص می‌کند.
<a href="https://www.example.com">بازدید از Example</a>
3. افزودن لیست‌ها
با استفاده از تگ‌های <ul> (لیست نامرتب) یا <ol> (لیست مرتب)، می‌توانید لیست‌هایی در صفحه خود ایجاد کنید. این لیست‌ها اطلاعات را به شکل مرتب یا نامرتب نمایش می‌دهند.
لیست نامرتب:
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>
لیست مرتب:
