درک اصول پایه ای زبان HTML در ۵ مرحله

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

HTML چیست؟

HTML مخفف زبان نشانه گذاری ابرمتنی است و گاهی اوقات با زبان برنامه نویسی اشتباه گرفته می شود اما این تصور چندان دقیق نیست.
HTML به عنوان یک زبان نشانه گذاری تنها به شما امکان طراحی ظاهر صفحه وب را می دهد اما زبان های برنامه نویسی کامل مثل جاوا و پایتون دربردارنده منطق و دستوراتی هستند که اجرا می شوند.
HTML در عین سادگی ستون فقرات صفحات وب را شکل داده و مسئولیت نمایش متن، اضافه کردن تصویر و لینک سازی بین صفحات را بر عهده دارد.
در بسیاری از مرورگرها با کلیک راست در صفحه وب و انتخاب گزینه View page source کدهای HTML پشت پرده به نمایش در می آیند. هرچند بخشی از این کدها احتمالا به HTML ارتباطی ندارد و می توان آنها را نادیده گرفت.
حتی اگر با زبان های برنامه نویسی یا نشانه گذاری نا آشنا باشید، فراگیری برخی اطلاعات پایه ای در مورد HTML شما را به کاربر وب مطلع تری تبدیل می کند. در ادامه نحوه کار HTML را در پنج مرحله توضیح داده و برای درک بهتر مثال هایی را نیز ارائه کرده ایم.

مرحله اول: درک مفهوم تگ

HTML برای دسته بندی عناصر مختلف از سیستم تگ ها استفاده می کند. اغلب تگ ها برای مشخص کردن متن درون آنها به صورت جفتی بکار می روند. برای مثال تگ < strong > متن را برجسته می کند که در بخش عناصر بیشتر به آن پرداخته ایم.
یک تگ بسته با اسلش (/) شروع می شود. در واقع این علامت یک تگ بسته را مشخص می کند که در کدنویسی اهمیت زیادی دارد چرا که اگر تگ را نبندید، تمامی موارد از شروع تگ تا پایان متن تحت تاثیر قرار می گیرند.
تمامی تگ ها به صورت جفتی به کار نمی روند و برخی عناصر HTML به نام عناصر تهی محتوای خاصی نداشته و به صورت مجرد به کار می روند. برای مثال تگ
پاراگراف را به خط بعد می برد. با استفاده از
امکان بستن این تگ هم وجود دارد اما چندان ضروری نیست.

مرحله ۲: صفحه بندی HTML

یک سند HTML برای نمایش صحیح باید شامل تگ های خاصی باشد که برخی از آنها عبارتند از:

• تمامی سندهای HTML باید با تگ ٰ شروع شوند. این تگ یک کد نیست اما نوع سند را معرفی می کند. در پایان سند هم باید تگ قید شود.
• در مرحله بعد نوبت به بخش می رسد که شامل اطلاعاتی در مورد عنوان صفحه، اسکریپت های اجرایی مختلف و غیره هستند. همانطور که از نام تگ پیداست، مستقیما پس از تگ آغازی قید می شود. کاربر نهایی اغلب محتوای این بخش را نخواهد دید.
• در نهایت نوبت به تگ می رسد که متن، تصاویر، لینک ها و بخش های دیگری از اطلاعات را شامل می شود.

از آنجا که بخش حجم قابل توجهی از سند را شامل می شود، در ادامه عمدتا به بررسی عناصر مرتبط به آن پرداخته ایم.

مرحله ۳: تگ های فرمت بندی HTML

باهم به تگ های متداولی که یک سند HTML را می سازند، نگاهی می اندازیم. شاید این تگ ها ابتدایی به نظر برسند چرا که مبدا توسعه HTML به سال ۱۹۹۳ برمی گردد و در آن زمان وب تا حد زیادی مبتنی بر متن بود.

فرمت بندی متن ساده

سبک های متنی ساده HTML تا حد زیادی شبیه مایکروسافت ورد است.

تگ های < strong > متن را برجسته می کنند.
تگ های < em > متن را مورب می سازند.

HTML همچنین از تگ های قدیمی تر < strong > برای بولد کردن و < em > برای مورب سازی پشتیبانی می کند اما بهتر است از آنها استفاده نکنید. تفاوت های بین این تگ ها در این است که دو مورد اول تفاوت حالت منطقی را بیان می کنند در حالی که المان های بعدی تفاوت حالت فیزیکی را بیان می کنند.

پاراگراف و دیگر بخش ها

تگ < div > امکان تعریف بخشی از اسناد را میسر کرده و در کنار CSS برای فرمت بندی به روشی خاص مورد استفاده قرار می گیرد.
تگ < p > به شما اجازه می دهد متن را به چند پاراگراف تقسیم کنید. مرورگرها به صورت خودکار فضایی خالی را قبل و بعد از این تگ قرار می دهند.
با استفاده از تگ های < h1 > تا < h6 > می توانید هدرهایی را به سند اضافه کرده و مطالعه متن را آسان تر کنید. H1 مهمترین هدر است و طبیعتا اهمیت H6 از همه موارد کمتر است.
فراموش نکنید که کلید Enter در سند HTML به نمایش آن برای کاربر منجر نمی شود و به جای آن باید از < br > استفاده کنید.

مثالی از یک کد HTML:

مرحله ۴: وارد کردن تصاویر

تصاویر بخش مهمی از صفحات وب هستند و می توان آنها را به آسانی در اسناد HTML وارد کرده و ویژگی مختلفی را برایشان تنظیم کرد.
برای وارد کردن تصویر باید از تگ < img > استفاده کرد. ترکیب این تگ با src امکان تعیین مکان تصویر را میسر می سازد. alt یکی دیگر از صفات مهم تگ < img > است که به کدنویس اجازه توصیف تصویر را برای خواننده می دهد. با کشیدن نشانگر موس روی تصویر متن alt ظاهر می شود.
با استفاده از عناصر عرض و طول هم می توان تعداد پیکسل های تصویر را به صورت دلخواه انتخاب کرد. با کنار هم قرار دادن این تگ ها کد مربوط به تصویر نمایش داده می شود

مرحله ۵: اضافه کردن لینک ها

اهمیت لینک انقدر زیاد است که بدون آن عملا وب معنای خاصی نخواهد داشت. برای ایجاد لینک بین صفحات باید از تگ < a > استفاده کنید.
درون تگ< a > و از طریق href می توان مکان لینک را مشخص کرد. کافی است آدرس url را آنجا کپی کنید اما با استفاده از title می توان متنی را وارد کرد تا پس از کشیدن ماوس روی لینک برای کاربر به نمایش درآید.

نحوه متصل کردن HTML با CSS و جاوا اسکریپت

تا اینجا به اصول پایه ای HTML و نحوه ایجاد صفحه وب پرداختیم اما این زبان به تنهایی نمی تواند صفحات مدرن HTML را ایجاد کند. صفحات ساده HTML در نسخه های اولیه وب موسوم به وب ۱.۰ متداول بودند چرا که در آن زمان این صفحات بیشتر شامل متن های ساده بودند.
امروزه اما HTML اغلب در کنار CSS به کار برده می شود. زبان CSS برای توصیف چگونگی نمایش متن در HTML به کار برده می شود. برای مثال در تگ هایی مثل < div > می توان یک کلاس ایجاد کرده و در سند CSS دستوراتی را برای شرح این کلاس تعریف کرد.
کدنویس می تواند این عناصر استایل را در کد HTML نیز تعریف کند اما این روش چندان مناسبی میان برنامه نویس ها به شمار نمی رود.
معمولا تعریف محتوا به عهده HTML و تعیین ظاهر به عهده CSS گذاشته می شود. ضلع نهایی این مثلث جاوااسکریپت است که امکان واکنش به دستورات کاربر بدون بارگذاری مجدد صفحه را میسر می سازد.
برای مثال جاوا اسکریپت به سایت اجازه می دهد پیش از اینکه کاربر روی کلید ثبت کلیک کند، عدم تطابق پسورد با الزامات امنیتی را به وی هشدار دهد. همچنین با استفاده از جاواسکریپت می توان بسیاری از محاسبات را در سمت کاربر انجام داده و با عدم ارسال آن به سمت سرور سرعت سایت را افزایش داد.
جاوا اسکریپت یک زبان اسکریپت نویسی است که قابلیت های زیادی را به ارمغان آورده و از HTML و CSS پیچیده تر است.
پرداختن به همه جنبه های طراحی وب در مقاله ای کوتاه میسر نیست اما به طور خلاصه میتوان گفت که HTML در کنار زبان های دیگر صفحات وب مدرن را ایجاد می کنند.

تکامل HTML

شایان ذکر است که HTML ایستا نیست و تاکنون نسخه های متعددی از آن منتشر شده که جدیدترین آنها HTML 5 است. این نسخه به جای تکیه بر فرمت های اختصاصی نظیر ادوبی فلش از تعبیه ویدیوی بومی بهره می برد.
استانداردهای جدید HTML همچنین از تگ های قدیمی و نسبتا منسوخ شده نظیر < marquee > برای اسکرول صفحه و تگ < blink > برای ساخت متن های چشمک زن نیز پشتیبانی می کند اما برای اطمینان بهتر است از تگ استفاده نکرده و اینکار را به CSS بسپارید.

مزیت داشتن اطلاعاتی مختصر در مورد HTML

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