هر صفحه وب از کدهای HTML ساخته شده است، و این به این معنی است که همین پاراگرافی که الان شما در حال مطالعه آن هستید، نیز با استفاده از کدهای HTML دارد به شما نمایش داده میشود! همچنین اجزای همین صفحه را از ابتدا در نظر بگیرید! به عنوان مثال ویدیویی که در ابتدای صفحه قرار گرفته است یا عنوانهای زیر ویدیو یا حتی عنوان همین پاراگراف و الی آخر، پس بخشهای مختلف صفحات وب با استفاده از زبان html نشانه گذاری میشوند و ساختار آنها با استفاده از زبان اچ تی ام ال شکل میگیرد، میتوان گفت که اسکلت بندی سایتها را با زبان اچاتیامال طراحی میکنند!
HTML، CSS و JavaScript اصلیترین زبانهای استفاده شده در طراحی و توسعه وب هستند و با یکدیگر در تعامل و همکاری نزدیک قرار دارند. با استفاده از تگها و المانهای HTML، ساختار و سازماندهی محتوا و عناصر صفحه تعریف میشود. اما اچ تی ام ال تنها قادر به ایجاد ساختار است و قابلیتهای ظاهری و تعاملی را ندارد.
در اینجا CSS (Cascading Style Sheets) وارد عمل میشود. CSS به طراحان وب امکان میدهد قوانین و قواعدی برای ظاهر و استایل صفحهها تعیین کنند. با استفاده از CSS، میتوان جزئیاتی مانند رنگها، فونتها، حاشیهها، ترازبندیها و انیمیشنها را کنترل و سفارشی کرد و به صفحههای HTML زیبایی و جذابیت بیشتری بخشید.
اما برای تعامل و پویایی بیشتر با کاربر، نیاز به جاوا اسکریپت وجود دارد. JavaScript یک زبان برنامهنویسی است که به صفحات وب امکانات تعاملی، پاسخگویی به رویدادها و اجرای عملکردهای پیچیدهتر را میدهد. با استفاده ازجاوا اسکریپت میتوان عملیاتی مانند اعتبارسنجی فرمها، تغییر محتوا به صورت پویا، ارسال درخواستها به سرور و بسیاری از امکانات دیگر را پیادهسازی کرد.
به طور خلاصه، HTML ساختار و سازماندهی صفحات وب را تعریف میکند، CSS ظاهر و استایل آنها را کنترل میکند وجاوا اسکریپت تعامل و عملکرد پویا را توسعه میدهد. با همکاری این سه زبان، صفحات وب میتوانند ساختاری منسجم، ظاهری زیبا و عملکردی پویا داشته باشند.
فهمیدیم که در زبان اچ تی ام ال از تگ ها برای نشانه گذاری کردن متون و طراحی های خودمان استفاده میکنیم. یعنی مثلا برای کلفت تر کردن اسم خود از تگ B بدین شکل استفاده خواهیم کرد : <B/>علیرضا<B> اما این تگ باید برای نرم افزاری که قرار است این برچسب را اجرا کند نیز قابل درک باشد. برای همین مرورگر ها پا به عرصه وجود گذاشتند.
در واقع تگ های HTML از یک قانون رسمی و مستند شده ساتفاده میکنند. طراحان سایت نیز این قانون را رعایت کرده و بر اساس همین قوانین شروع به پیاده سازی یک صفحه سایت با زبان HTML خواهند کرد. اما کدی که برنامه نویس در خانه خود مینویسد را ما چگونه در محل کارمان به درستی مشاهده میکنیم؟ با استفاده از مرورگر ها. مرورگر ها قوانین اچ تی ام ال را میدانند پس بلافاصله پس از باز شدن یک وبسایت، مرورگر شروع به کدگشایی برچسب های HTML کرده و دقیقا بر طبق قوانین آنها را اجرا میکند. رعایت همین قوانین سبب نمایش یکسان صفحات وب در تمام نقاط جهان میشود.
همانطور که بیان شد، زبان نشانه گذاری ابر متن یک زبان برچسب گذاری بر اساس قوانین میباشد. رعایت قوانین میتواند به سیستم کامپیوتر بفهماند که این فایل یک فایل اچ تی ام ال است. پس برای ایجاد کردن یک فایل اچ تی ام ال کافیست تا ابتدا یک فایل TEXT معمولی در ویندوز ایجاد کرده و پسوند آن را از txt به html تغییر دهید. تغییر پسوند اولین کاریست که برای ایجاد کردن یک فایل اچ تی ام ال باید انجام داد.
سپس این فایل را با نرم افزار notepad باز کرده و ساختار استاندارد HTML5 را در آن مینویسیم. البته معمولا برای کدنویسی زبان اچ تی ام ال از ویرایشگر های کد قوی تر از notepad استفاده میشود. ویرایشگر هایی نظیر VS Code یا Dream Weaver که اکثر طراحان سایت از آنها برای کدنویسی صفحات وب خود استفاده میکنند.
شاید برایتان جذاب باشد که یک سند اچ تی ام ال را مورد بررسی قرار دهید. در واقع هر وبسایتی که در حال استفاده کردن از آن باشید ( حتی همین صفحه از سایت دانشجویار ) یک سند کاملا آماده HTML محسوب میشود که میتوانید آنرا بررسی کنید. برای بررسی کردن ساختار اچ تی ام ال یک وبسایت کافیست تا آن وبسایت را در مرورگر گوگل کروم باز کرده و در جایی از صفحه کلیک راست کنید. حال با زدن گزینه inspect elements تمام کد های اچ تی ام ال این صفحه از سایت برای شما به نمایش در خواهد آمد. اکنون شما قادر به تجزیه و تحلیل تگ های این صفحه میباشد.