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


موارد استفاده HTML:


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


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


در این مقاله قصد داریم اصول اولیه  HTML، از جمله نحوه عملکرد، مزایا و معایب آن، و نحوه ارتباط آن با CSS و جاوا اسکریپت را توضیح دهیم.


توضیحات ابتدایی دربارهHTML  


HTML مخفف Hypertext Markup Language است. این برنامه یک زبان کامپیوتری است که در ایجاد بسیاری از صفحات وب و برنامه‌های کاربردی آنلاین نقش دارد. هایپرتکست یا فرامتن، متنی است که برای ارجاع به سایر بخش‌های متن استفاده می‌شود، در حالی که زبان نشانه‌گذاری مجموعه‌ای از نشانه‌ها است که سبک و ساختار یک برنامه را به سرورهای وب ارائه می‌دهد.


HTML  چگونه کار می کند

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


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


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


سه بخش اصلی یک عنصر عبارتند از:


  • تگ آغازین: برای بیان اینکه یک عنصر در کجا شروع می‌شود، مورد استفاده قرار می‌گیرد. 
  • محتوا - خروجی نهایی که در معرض دید کاربران قرار دارد.
  • تگ پایانی: مانند تگ آغازین است، اما با یک اسلاید متفاوت که قبل از نام عنصر قرار می‌گیرد.

ترکیب این سه بخش با هم به ایجاد یک عنصر HTML منجر می‌شود.


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


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


پرکاربردترین تگ‌ها و عناصر HTML

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


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


عناصر سطحی


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


تگ <html> عنصر ریشه‌ای است که کل سند HTML را تعریف می‌کند.

    تگ <head> اطلاعات متا مانند عنوان صفحه را در خود نگه می‌دارد.

    تگ <body> تمام محتوای ظاهر شده در صفحه را در بر می‌گیرد.


سایر تگ‌های محبوب سطحی عبارتند از:


    تگ‌های عنوان – این تگ‌ها از <h1> تا <h6> متغیر هستند، جایی که عنوان h1 از نظر اندازه بزرگ‌تر است و با حرکت به سمت h6 کوچک‌تر می‌شود.

    تگ‌های پاراگراف - همه با استفاده از تگ <p> محصور می‌شوند.

    تگ‌های لیست - دارای متغیرهای مختلفی هستند. از تگ <ol> برای لیست مرتب و از <ul> برای لیست نامرتب استفاده کنید. سپس، با استفاده از تگ <li>، آیتم‌های موجود در فهرست را محصور کنید.


عناصر درون خطی


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


به عنوان مثال، یک تگ <strong> یک عنصر را به صورت پررنگ نمایش می‌دهد، در حالی که تگ <em> آن را به صورت مورب نشان می‌دهد. هایپرلینک‌ها نیز عناصر درون خطی هستند که از یک تگ <a> و یک ویژگی href برای نشان دادن مقصد پیوند استفاده می‌کنند:

<a href="https://example.com/"> !</a>


تفاوت بین HTML و HTML5 چیست؟

اولین نسخه HTML شامل 18 تگ بود. از آن زمان، هر نسخه جدید با تگ‌ها و ویژگی‌های جدیدی به وب اضافه می‌شد. مهم‌ترین مورد ارتقای آن تاکنون، معرفی HTML5 در سال 2014 بود.


تفاوت اصلی بین HTML و HTML5 این است که HTML5 انواع جدیدی از کنترل های فرم را پشتیبانی می‌کند.  HTML5 همچنین چندین تگ معنایی را معرفی کرده است که توضیحاتی درباره محتوا ارائه می‌دهند، مانند <article>، <header> و <footer>.


مزایا و معایب  HTML


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


مزایا:


  • برای افراد مبتدی بسیار مفید و مطلوب است. HTML دارای یک ابزار نشانه‌گذاری ثابت و یک منحنی یادگیری مناسب برای افراد مبتدی است.
  • پشتیبانی مطلوب . این زبان به طور گسترده مورد استفاده قرار می‌گیرد، بنابراین از آن به خوبی پشتیبانی می‌شود.
  • در دسترس بودن. این برنامه اوپن سورس و کاملا رایگان است. HTML به صورت بومی در تمام مرورگرهای وب قابل اجرا است.
  • قابلیت انعطاف. HTML به راحتی با زبان‌های پشتیبان مانند PHP و Node.js قابل ترکیب است.



معایب:


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


ارتباط میان HTML، CSS، و جاوا اسکریپت به چه صورتی است؟


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


CSS  مسئول پس‌زمینه، رنگ‌ها، چیدمان‌ها، فاصله‌ها و انیمیشن‌ها است. از سوی دیگر، جاوا اسکریپت قابلیت‌های پویایی محتوا را به آن اضافه می‌کند. این سه زبان اصول اولیه توسعه front-end هستند.


بهبود دانش و آگاهی درباره HTML


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


  • W3Schools : دارای منابع، مثال‌ها و تمرین‌هایی برای کمک به یادگیری رایگان HTML اولیه است.
  • Codecademy: دوره های مقدماتی را به صورت رایگان همراه با آموزش های تعاملی ارائه می دهد. این برنامه از یک صفحه تقسیم استفاده می‌کند که به طور خودکار نتیجه کدنویسی شما را روی یک فایل HTML نشان می‌دهد. Coursera: دوره‌های مختلفی را ارائه می‌دهد که توضیحات جامعی با مثال‌های واقعی در آن به کاربر ارائه می‌شود.


نتیجه‌گیری


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