اگر سروکارتان با اینترنت و وب باشد حتما تا به حال با کلمه HTML برخورد داشته‌اید، این واژه مخفف عبارات Hyper Text Markup Language است، می‌توان گفت تمام المان‌هایی که در صفحه مرورگر خود می‌بینید به کمک اچ تی ام ال به وجود آمده‌اند، HTML یک زبان نشانه گذاری بوده و یادگیری آن ساده و بسیار شیرین است (آن را با زبان برنامه‌نویسی اشتباه نگیرید) در این آموزش از همیار آی‌تی قصد داریم در ابتدا اندکی با تاریخچه‌ی شکل‌گیری این زبان آشنا شده و در ادامه ساختار HTML و دستورات آن را مورد بررسی قرار دهیم.
زبان برنامه‌نویسی صفحات وب چیست؟
صفحات وب از دو بخش فرانت‌اند و بک‌اند ایجاد شده‌اند، قسمتی از سایت که توسط کاربر قابل مشاهده است به فرانت‌اند معروف بوده و بخشی که از دید کاربر خارج است و وظیفه‌ی پردازش داده‌ها و کار با دیتابیس را دارد بک‌اند نامیده می‌شود، اچ‌تی‌ام‌ال زبان طراحی فرانت‌اند است، اگر دوست دارید به طور کامل با نحوه‌ی ایجاد یک وبسایت آشنا شوید می‌توانید به آموزش “چگونه سایت طراحی کنیم“ که قبلا در همیار آی‌تی منتشر شده مراجعه کنید.
چگونه یک صفحه وب را طراحی کنیم؟
ایجاد یک صفحه وب از آنچه که فکرش را می‌کنید بسیار آسان‌تر است، شما حتی با استفاده از Notepad ویندوزتان نیز می‌توانید یک سند HTML ایجاد کنید، اما برای راحتی کار به شما نرم‌افزار رایگان Notepad++ را پیشنهاد می‌کنیم، شما می‌توانید کدهای مورد نظر را در نوت‌پد ویندوز نیز تایپ و اجرا کنید ولی برای راحتی کار و فهم بهتر کدها توصیه می‌کنیم از نرم‌افزار نوت‌پد پلاس‌پلاس استفاده کنید.
از کجا شروع کنیم؟
- با مراجعه به منوی استارت یا جستجو برنامه نوت‌پد را پیدا کرده و آن را باز کنید، ما کدهای HTML را در این صفحه خواهیم نوشت.
- حال باید فایل خود را ذخیره کنیم، در منوی بالایی نوت‌پد بر روی گزینه File کلیک کرده و گزینه‌ی Save As… را انتخاب کنید، حال یک نام دلخواه برای فایلتان انتخاب کرده و حتما پسوند html. را به انتهای نام پرونده اضافه کنید (مثل: hamyarit.html).
- در بخش پایین نوت‌پد و در کنار گزینه‌ی Save یک کادر بازشونده با عنوان Encoding وجود دارد، بروی آن کلیک کرده و گزینه‌ی UTF-8 را انتخاب کنید.
- در نهایت فایلتان را در محل دلخواه (مثلا دسکتاپ) ذخیره کنید، با کلیک بر روی فایل ذخیره شده و بازکردن آن مشاهده می‌کنید که صفحه مرورگر باز خواهد شد. (البته چون هنوز کدی نوشته نشده است صفحه خالی را مشاهده می‌کنید)
تگ HTML چیست؟
قطعه کد زیر را مشاهده کنید:
<tag> تگ اچ تی ام ال </tag>
برای نوشتن کدها از یک تگ بازکننده به صورت <…> و از تگ تمام‌کننده به صورت<…/> استفاده می‌کنیم و محتوای مورد نظر را در میان دو تگ بازکننده (Opening Tag) و تمام‌کننده (Closing Tag) قرار می‌دهیم.
همانطور که مشاهده می‌کنید کلمه‌ی کلیدی tag در میان دو علامت <> نوشته شده است، برای نوشتن کد اچ تی ام ال باید کلمات کلیدی را درمیان چنین علامتی بنویسیم، چند نمونه از تگ‌های اچ تی ام ال را در زیر مشاهده می‌کنید:
<!DOCTYPE html> <html> <head> <title> عنوان صفحه </title> </head> <body> <h1> تگ عنوان </h1> <p> تگ پاراگرف </p> </body> </html>
با دقت در کدهای بالا در می‌یابید که قالب کلی تگ‌های اچ تی ام ال به صورت زیر است:
<علامت اسلش و تکرار نام تگ> … <نام تگ>
شروع کدنویسی
برای شروع وارد نوت‌پد شوید و عبارت:
<!DOCTYPE html>
را در ابتدای خط بنویسید، این تگ به مرورگر اعلام می‌کند که این صفحه به زبان HTML 5 نوشته شده است، سپس تگ‌های زیر را بنویسید:
<html> </html>
پس از تگ html شما باید تگ هِد (head) را به سند خود اضافه کنید.
<!DOCTYPE html> <html> <head> ... </head> </html>
در میان تگ head عبارات مورد نیاز برای اجرای صحیح صفحه وب قرار می‌گیرند، این عبارات توسط کاربر به طور مستقیم قابل مشاهده نیستند ولی نقش مهمی را در ایجاد صفحه‌ی وب ایفا می‌کنند، فعلا عبارات زیر را بین تگ هِد خود اضافه کنید.
<meta charset="UTF-8"> <title> عنوان نمایش‌داده‌شده در تب مرورگر </title>
پس از تگ head نوبت به تگ body می‌رسد، این تگ دربردارنده‌ی اجزای قابل مشاهده‌ی صفحه می‌باشد:
... <body> ... </body> ...
حال قالب اصلی کدهای شما باید شکل زیر را به خود گرفته باشد:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> عنوان صفحه </title> </head> <body> المان‌های قابل مشاهده </body> </html>
قالب کلی یک صفحه‌ی اچ تی ام ال به این صورت است، تمام عباراتی که بین تگ body بنویسید در صفحه نمایش داده خواهد شد (شامل پاراگراف‌ها، تصاویر، لینک‌ها و…)
توصیه‌ی همیار آی تی: سعی کنید کدها را کپی نکرده و خودتان آن‌ها را تایپ کنید، با این کار مهارت کدنویسی شما تقویت شده و بهتر با زبان اچ تی ام ال آشنا خواهید شد.
برای یادگیری زبان اچ‌تی‌ام‌ال توصیه می‌کنیم حتما از آموزش‌های وبسایت W3Schools استفاده کنید، شما به کمک این وبسایت پایه و اساس کار با HTML را به طور صحیح می‌آموزید.
در پایان این آموزش شما باید مهارت‌های زیر را کسب کرده باشید:
- با مفهوم اچ تی ام ال آشنا شده باشید.
- بدانید چگونه باید کدهای اچ تی ام ال را بنویسید.
- با مفهوم تگ آشنا شده باشید.
- نحوه نگارش تگ‌های اچ تی ام ال را بدانید و قالب کلی آن‌ها را بشناسید.