اگر اندکی با دنیای وب و برنامه‌نویسی آشنایی داشته باشید حتما بارها عبارت HTML به گوشتان خورده است. HTML هسته اصلی ساخت صفحات وب است. در این مقاله قصد داریم به تفصیل به این زبان برنامه‌نویسی بپردازیم.
HTML مخفف عبارت Hyper Text Markup Language و به معنی زبان نشانه گذاری فوق متنی، متداول‌ترین، ساده‌ترین و استانداردترین زبان برنامه‌نویسی برای طراحی وب سایت است. کدی که با زبان برنامه‌نویسی HTML نوشته می‌شود گرچه یک متن است اما روی وب سایت به صورت فرامتن دیده می‌شود. کاربر این کدها را به شکل ویدیوها، عکس‌ها، لینک‌ها و... می‌بیند. برای ساخت وب سایت HTML، CSS و جاوااسکریپت به کمک هم می‌آیند. آن دسته از افرادی که علاقمند به برنامه‌نویسی وب‌سایت‌ها در قسمت فرانت‌اند هستند حتما باید زبان برنامه‌نویسی اچ‌تی‌ام‌ال را به طور کامل فرا بگیرند.
مروری بر تاریخچه HTML
در سال 1989 میلادی تیم برنرز-لی (Tim Berners-Lee) زبان HTML را منتشر کرده و شبکه جهانی وب را به وجود آورد. ایده و پردازش این اختراع مهم در یک آزمایشگاه فیزیک ذرات در ژنو اتفاق افتاد. برنرز-لی تصمیم گرفت کاری کند تا بتواند از نظرات و تفکرات فیزیکدانان کل دنیا بدون نیاز به حضور فیزیکی آن‌ها در کنار یکدیگر استفاده کند. از آن پس زبان HTML و کدنویسی آن دستخوش تغییرات و به روزرسانی‌های زیادی شد تا به نسخه امروزی رسید.
HTML یک زبان نشانه‌گذاری
زبان نشانه‌گذاری (Markup Language) به زبان برنامه‌نویسی می‌گویند که با استفاده از نشانه‌ها یک متن ساده را به متنی تبدیل می‌کند که توسط رایانه قابل فهم باشد. عنوان مربوط به هر تگ یا نشانه بین علامت‌های <> درج می‌شود برای مثال در کد نویسی با زبان برنامه‌نویسی اچ‌تی‌ام‌ال، برای این که به سیستم بفهمانیم که متن نوشته شده یک پاراگراف است از نشانه<p> و </p>استفاده می‌کنیم یااگر بخواهیم یک متن به صورت Bold نشان داده شود از تگ <strong>متن </strong> استفاده می‌کنیم.. در واقع این نشانه‌ها برای کاربر نمایش داده نمی‌شود بلکه روی استایل نمایش متن مورد نظر به کاربر تاثیرگذار است.
نمونه‌ای از نشانه گذاری را با زبان اچ‌تی‌ام‌ال در زیر مشاهده می‌کنید. کافی است این متن را در Notepad با پسوند HTML ذخیره کرده، در قسمت Encoding عبارت UTF-8 را انتخاب نمائید و فایل را با مرورگر خود باز کنید.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
نمونه ای دیگر از کد اچ‌تی‌ام‌ال:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8"> <meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new</strong> home on the web.</p>
<a href="/page2.html">Page2</a>
<img src="testpic.jpg" alt="This is a test image" height="42" width="42"> <p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table> </body>
</html>
مشاهده خواهید کرد که هیچ کدام از علائم نشانه‌گذاری در مرورگر نشان داده نمی‌شود، بلکه نشانه‌ها برای رسیدن مفهوم مورد نظر توسعه‌دهنده به مرورگر نوشته می‌شود.
میزان سختی زبان برنامه‌نویسی HTML
اگر در ابتدای راه هستید و نمی‌دانید زبان HTML نسبت به سایر زبان‌ها سخت‌تر یا ساده‌تر است باید چند مورد را توضیح دهیم. تگ‌های HTML از یک سری قوانین ساده استفاده می‌کنند از این رو اگر یکی از این تگ‌ها را به خاطر بسپارید به کارگیری سایر تگ‌ها برای شما ساده می‌شود. ابزار لازم برای برنامه‌نویسی با زبان اچ‌تی‌ام‌ال ساده است و تنها به یک ویرایشگر متن مانند نوت‌پد نیاز دارد. برنامه نوشته شده توسط HTML با هر مرورگری قابل خواندن است و شما را محدود نمی‌کند.
ارتباط HTML و CSS
همانطور که در مقاله فرانت‌اند چیست؟ بیان کردیم، سی‌اس‌اس و اچ‌تی‌ام‌ال هسته‌های اصلی فرانت اند و طراحی وب را تشکیل می‌دهند. اچ‌تی‌ام‌ال ساختار صفحه را به وجود می‌آورد و در راستای ایجاد یک وب سایت زیبا، سی‌اس‌اس وظیفه موارد مربوط به ظاهر صفحه را بر عهده دارد. سی‌اس‌اس را به چند طریق می‌تان به اچ‌تی‌ام‌ال اضافه کرد.
در روش اول می‌توانید استایل مورد نظر خود را در خط دستوری اچ‌تی‌ام‌ال داخل تگ بنویسید نمونه ای از این کد در زیر آورده شده است.
<!DOCTYPE html>
<html>
<head>
<title>Playing with Inline Styles</title>
</head>
<body>
<p style="color:blue;font-size:46px;">
I'm a big, blue, <strong>strong</strong> paragraph
</p>
</body>
</html>
در روش دوم که روش بهتر و پرکاربردتری است، استایل‌های مورد نظر در فایل سی‌اس‌اس جداگانه نوشته شده و لینک آن در هدر صفحه قرار داده می‌شود.
ارتباط HTML و جاوااسکریپت
همانطور که پیش از این گفته شد اچ‌تی‌ام‌ال، سی‌اس‌اس و جاوااسکریپت سه هسته اصلی طراحی وب هستند. HTML اسکلت وب‌سایت را تشکیل می دهد، CSS به زیباسازی ظاهری می پردازد و در نهایت جاوااسکریپت به پویا شدن سایت کمک می کند. در واقع کدنویسی با زبان جاوااسکریپت کمک می‌کند تا کاربر بتواند از وب‌سایت استفاده کند.
منابع
نظر دهید
با استفاده از فرم نظردهی زیر به بهبود خدمات کمک کنید.