آنچه در این صفحه می‌خوانید
مرحله‌ی اول ساخت وبسایت، طراحی آن است که این امر خود شامل 3 بخش HTML، CSS وJAVASCRIPT می‌شود.
HTML محتوا را مدیریت می‌کند در واقع به وسیله‌ی کدهای HTML می‌توان مطالب، عکس، ویدیو و مواردی از این دست را در وبسایت به نمایش گذاشت.
CSS ظاهر وبسایت را طراحی می‌کند. به وسیله‌ی کدهای CSS می‌توان رنگ و اندازه‌ی قلم، رنگ پس زمینه، جایگاه هر بخش و ... را مشخص نمود.
JAVASCRIPT رفتار سایت را کنترل می‌کند. به عبارتی دیگر نحوه‌ی نشان دادن محتوای وبسایت به عنوان مثال نحوه‌ی باز شدن پنجره‌ها و مواردی شبیه به آن را تعیین می‌کند.
در ادامه به توصیف هرکدام از این موارد می‌پردازیم.
چگونگی پیدایش و تعریف HTML
HTML مخفف عبارت «HyperText Markup Language» است که معنی تحت‌الفظی آن «زبان نشانه‌گذاری ابَر متن» می‌باشد و اگر بخواهیم مفهومی کلی از آن بیان کنیم، این زبان پایه و اساس و در واقع مادر تمام زبان‌های برنامه‌نویسی تحت وب سمت سرور و سمت کاربر می‌باشد. علاوه بر این مرورگرها هیچ‌یک از کدهای سمت سرور از جمله ASP و PHP را نمی‌شناسند و تنها قادر به خواندن کدهای HTML هستند.
به‌وسیله‌ی این زبان می‌توان وبسایت‌هایی تولید کرد که از طریق اینترنت قابل مشاهده هستند. تمام وبسایت‌هایی که در دنیای وب مشاهده می‌کنید به طریقی توسط این زبان مادر نوشته شده‌اند. در واقع HTML زبان برنامه‌نویسی نیست بلکه زبان نشانه‌گذاری می‌باشد که توسط تگ (Tag) و برخی ویژگی‌ها (attributes) به مرورگرها می‌فهماند که چگونه آن صفحه را به نمایش گذارند.
قابل توجه است که زبان‌های برنامه‌نویسی نیز برای نمایش کدها به کاربران، لازم است به کدهای اچ‌تی‌ام‌ال تبدیل شده و به سمت مرورگر فرستاده شوند زیرا این زبان تنها زبانی‌ست که مرورگرها قابلیت خواندن و معنی کردن آن را به صورت مستقیم دارند.
اولین نسخه‌ی HTML برای بار نخست توسط تیم بِرنِرز- لی (Tim Berners – Lee) نابغه‌ای در حوزه‌ی اینترنت در سال 1990 - 1991 در دنیای برنامه‌نویسی ایجاد شد ولی تا سال 1995 مورد قبول استاندارد مرورگرها واقع نشد. اما با ظهور نسخه‌ی دوم آن، (HTML 2.0) به استاندارد جهانی رسید. این روند تا سال 1999 ادامه یافت و HTML را تا نسخه‌ی 4.01 پیش برد و هم اکنون نیز تمام برنامه‌نویسان تحت وب از این زبان پایه در پروژه‌های خود استفاده می‌کنند چراکه در خصوص جذاب کردن صفحات وب به توسعه‌دهندگان امکانات بسیاری می‌دهد.
کدهای HTML، با مدیریت محتوا در واقع فرمت و ساختار متن و تصویری را که باید به نمایش دربیاید تعیین می‌کنند و بدین طریق مرورگرها، محتوای هر سایت را همانطور که باید به نمایش درمی‌آورند و تشخیص می‌دهند که محتوای مورد نظر متن است یا تصویر. درواقع HTML ساختاری اصلی برای صفحات وبسایت را تعیین می‌کند و برای اعمال تغییراتی بر روی ظاهر آن، از کدهایی بر روی فایل (CSS (Cascading Style Sheets استفاده می‌نماید.
آشنایی با ساختار Tag
تگ‌ها کلمات کلیدی هستند که در کدهای HTML و درواقع در ساختار یک صفحه‌ی وبسایت استفاده می‌شوند و تعیین می‌کنند مرورگر آن صفحه وبسایت را به چه شکل و فرمتی نمایش دهد. اکثر تگ‌ها دارای 2 بخش هستند؛ بخش اول تگ باز و بخش دوم تگ بسته. برای مثال <html> تگ باز و <html/> تگ بسته محسوب می‌شوند. همانگونه که مشاهده می‌شود ساختار تگ باز و بسته به یک شکل است با این تفاوت که در ابتدای تگ بسته از یک اسلش (/) استفاده می‌شود. البته تگ‌هایی وجود دارند که از این قائده پیروی نمی‌کنند و باز و بسته نمی‌شوند مانند تگ <img> که وظیفه‌اش نمایش دادن تصاویر است؛ به این تگ‌ها Empty Tags گفته می‌شود.
پس تا اینجا دریافتیم که تگ‌های html به منظور تعیین ساختار و نحوه نمایش محتوای وبسایت استفاده می‌شوند و وجود آن‌ها برای عملکرد صحیح زبان html و اجرای آن توسط مرورگرها ضروریست.
به عنوان توضیح بیشتر و ذکر مثالی ساده تگ <p> مربوط به پاراگراف را شرح می‌دهیم. به تگ‌هایی از این دست، تگ‌های پایه (Basic tags) می‌گویند. <p> و <h> و <a> و... ازجمله تگ‌های پایه هستند. برای اینکه بخواهیم به اندازه‌ی یک پاراگراف مطلب بنویسیم لازم است آن مطلب را درون تگ <p> قرار دهیم. مانند:
<p>.این خط اول یک پاراگراف است .این خط دوم یک پاراگراف است .این خط آخر یک پاراگراف است</p>
تاکنون انواع زیادی از تگ‌های HTML طراحی شده‌اند که برای آشنایی و تست آن‌ها وبسایت رسمی w3schools را به شما معرفی می‌کنیم.
آشنایی با Attribute
پس ازآشنایی با تگ‌ها لازم است ویژگی‌هایی را که به هرکدام اضافه می‌شود بررسی کنیم. این ویژگی‌ها را Attribute نیز می‌نامند که درتگ باز و با رعایت یک فاصله ایجاد می‌شوند. برای درک بهتر Attributeها مثال زیر را مشاهده کنید:
<p titile="test">این یک عبارت است</p>
در مثال بالا، title به عنوان یک Attribute برای تگ <p> به کار برده شده‌است که با استفده از آن، در هنگام قرار دادن موس بر روی جمله‌ای که بین تگ <p> نوشته شده‌است (این یک عبارت است)، عبارت روبه‌روی title یعنی test ظاهر می‌شود.
همانطور که در نمونه کد بالا مشاهده می‌کنید، کدهای HTML پیچیدگی چندانی ندارند ولی تمام تگ‌ها می‌توانند بخش attribute را داشته باشند و اینگونه است که تمام محتویاتی که بین تگ باز و بسته وجود خواهند داشت به نمایش درمی‌آیند و از Attributeها تأثیر می‌گیرند.
آشنایی با ساختار HTML و نحوه‌ی ویرایش آن
اکنون زمان آن است که با نمایی کلی از کدهای HTML آشنا شوید:
<!doctype html>
<html>
<head>
<title>Example page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is an example of a basic HTML page.</p>
</body>
</html>
کدهای بالا، موارد اصلی و پایه‌ای را برای نوشتن کدهای HTML نشان می‌دهند. doctype بیانگر ورژن و نوع HTML مورد استفاده‌ی شماست و بدین ترتیب است که مرورگر قادر به خواندن آن می‌شود. دروافع با نوشتن عبارت <doctype html!> مرورگر متوجه می‌شود که از نسخه‌ی HTML5 در کدها استفاده شده است. تگ <html> به مرورگر می‌فهماند که باید کدهای HTML را بخواند. تگ <head> عموماً المان‌های بصری ندارد. درواقع مواردی که در این بخش وجود دارند از جمله اطلاعاتی درمورد صفحه‌ی وبسایت مثلاً آدرس فایل CSS مربوط به آن را کابر نمی‌بیند اما به طور کلی وجود تگ <head> بسیار مهم است و می‌توان از طریق آن کدهای CSS، JavaScript و ... را تعریف کرد. بخش body، قسمت بصری سایت است که محتوای قابل نمایش در مرورگرها را دربر می‌گیرد. به عنوان مثال تمام متن‌هایی که در وبسایت‌ها مشاهده می‌کنید در تگ <body> قرار گرفته‌اند. در آخر نیز حالت بسته‌ی تگ‌ها باید در نظر گرفته شوند.
ترتیب باز و بسته شدن تگ‌ها بسیار اهمیت دارد چرا که اگر تگی به موقع باز و بسته نشود ترکیب کدهای دیگر را بهم می‌ریزد و باعث می‌شود که محتوا به درستی نمایش داده نشود. این ترتیب را به صورت خلاصه در زیر مشاهده می‌کنید:
<html><head></head><body><p><pre>….…</pre></p></body></html>
کدهای HTML را می‌توان توسط نرم‌افزارهای بسیاری نوشت و اجرا کرد که از جمله‌ی آن‌ها می‌توان به Notepad و یا Notepad++ اشاره کرد که البته پیشنهاد ما استفاده از برخی نرم افزارهای دیگر از جمله Bracket می‌باشد. Bracket یک ابزار توسعه‌ی وب است که با تمرکز بر این امر، کدنویسی با زبان‌های HTMl و CSS و JavaScript را با حدس و پیشنهاد کدهای صحیح و مورد نیاز، نمایش آنی تغییرات اعمال شده و ... آسان می‌کند. پس از نوشتن کدهای خود، به منظور ایجاد فایل HTML لازم است فایل مورد نظر را با پسوند .html ذخیره کنیم.
