HTML چیست؟‌ و چه کاربردی دارد؟

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

HTML چیست؟

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

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

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

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

<h1>HTML چیست؟‌ و چه کاربردی دارد؟</h1>
<h2>HTML چیست؟</h2>
<p>... متن مقاله</p>

در این حالت مرورگر شما قادر به نمایش این صفحه وب به طریق معنی دار و مشخص برای شما است. البته در این مثال این کار را بسیار ساده جلوه دادم ولی ساختار کلی به همین شکل انجام می گیرد و ساختار صفحاتِ بسیار پیچیده هم از این قاعده مستثنی نیست.

تاریخچه HTML و توسعه آن

HTML عمر زیادی در حوزه فناوری وب دارد. پیدایش آن به سال ۱۹۸۰ میلادی باز می گردد. از آن زمان این زبان بطور مستمر در حال توسعه بوده و تغییرات زیادی در آن اتفاق افتاده است چون توسعه وب نیز با تغییرات زیادی همراه بوده و توسعه دهندگان هم باید نیازهای جدید را در این عرصه پاسخ می دادند. امروزه ما کارهایی در صفحات وب انجام می دهیم که حتی تصور آن برای توسعه دهندگان نخستین دشوار است. امروزه صفحات وب تنها یک صفحه ساده برای درج و انتقال متنی و تصویری محصوب نمی شود بلکه با آن اشکال مختلفی از اپلیکیشن های تحت وب پیاده سازی و اجرا می شوند.

HTML5 چیست؟

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

HTML و ساختار معنا محور آن

ساختار معنا محور همانطور که از اسمش پیداست، به این معنیست که این ساختار علاوه بر این که نحوه نمایش را در مرورگر مشخص می‌کند، بکارگیری هریک از عناصر بیانگر معنی و مفهوم برای مرورگر و همچنین موتورهای جستجو هست. برای مثال وقتی برای تیتر مطلب از تگ <h1> استفاده می کنیم، این یک مفهوم را برای مرورگر و در نتیجه موتورهای جستجو منتقل می کند و اگر ما بجای آن از تگ <p> که برای ایجاد پاراگراف بکار می‌رود استفاده کنیم و اندازه و ضخامت آن را بیشتر کنیم، با اینکه متن مورد نظر از لحاظ ظاهری شبیه به تگ <h1> است اما معنی و مفهوم خاص خود را به عنوان “تیتر” یک مقاله برای مرورگر و موتورهای جستجو از دست داده است. تعدادی از پرکاربردترین این تگ‌ها عبارتند از:

• <header>
• <nav>
• <main>
• <article>
• <aside>
• <section>
• <footer>

تگ های HTML

تگ های HTML در واقع “کلیدواژه” های مخفی در صفحات وب هستند که توسط آن، مرورگرها تشخیص می‌دهند که محتوا را چگونه و در چه ساختاری نمایش دهند. بیشتر تگ ها از دو قسمت (باز و بسته) تشکیل می شوند. برای مثال تگ <div> قسمت باز و <div/> قسمت بسته‌ی این تگ می باشد:

<div>.این یک متن نمونه است</div>

 توجه داشته باشید که قسمت دو قسمت تگ‌ها با هم یکی هستند و تنها یک (/) در ابتدای تگ بسته نوشته می شود. البته استثناهایی در این مورد وجود دارد مانند تگ های <img> و <link> که تنها از یک قسمت تشکیل شده اند:

<img src="example.com/img/book.jpg" alt="book" />
<link rel="stylesheet" href="example.com/style/style.css" />"

صفت‌ ها (َAttributes)

صفتها به شما این امکان را می دهند تا بتوانید عملکرد تگ ها را کنترل کرده و گستره عمل خود را در کار کردن با آنها بیشتر کنید:

<input type="checkbox" id="num1"/>

صفتها معمولا مقدار می‌پذیرند که با علامت (=)  این کار انجام می پذیرد. اما استثناهایی هم در این مورد وجود دارد:

<input type="checkbox" checked />

اکثر صفتها اختیاری هستند و تنها زمانی از آنها استفاده می‌کنید که بخواهید عملکرد پیشفرض تگ‌ها را تغییر دهید. البته بعضی از تگ‌ها هم هستند که در آنها استفاده از صفتها اجباریست. مثلا در تگ <img> ما برای نشان دادن تصویر مجبور به استفاده از صفت “src” هستیم:

<img src="example.com/img/book.jpg" alt="book" />

کاهش تداخل بین HTML ،CSS و JavaScript

3 زبانی که توسعه فرانت‌اند را تشکیل می دهند. هر سه این زبان‌ها به موازات هم رشد کردند و اغلب از لحاظ کارکرد بر روی همدیگر تاثیر میگذاشتند (و می‌گذارند). با گذر زمان و تمرکز بر وظیفه اختصاصی هر یک از آنها، این تداخل‌ها کمتر و وظیفه ذاتی هر یک بیشتر از پیش مشخص شد.

• HTML – ساختار اصلی و محتوا
• CSS  – طراحی
• JavaScript – تعامل

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

شروع کار با HTML

 برای ساخت یک سند html  باید از تگ <DOCTYPE!> استفاده کرد تا مرورگر متوجه شود شما در حال استفاده از HTML5 هستید:

<!DOCTYPE html>
<html>
  <head>
   .
   .
  </head>
  <body>
   .
   .
   .
  </body>
  <footer>
   .
   .
  </footer>
</html>

این باید اولین چیزی باشد که در سند نوشته می‌شود.

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