آموزش قدم به قدم HTML – بخش اول – مقدمه

HTML یا Hyper Text Markup Language به معنی زبان نشانه گذاری ابر متنی, اولین و معروف ترین زبان نشانه گذاری وب است. این زبان در اوایل دهه ۱۹۹۰ توسط دنیس ریچی ابداع و اولین صفحه وب توسط آن نشانه گذاری شد. در این سری آموزشی HTML از وب تستر, همه ی افراد , از مبتدی ترین آنها (حتی کسی که هیچ چیزی از زبان های تحت وب نمیداند!) تا حرفه ای ترین ها را در نظر گرفته ایم. بنابراین ممکن است یک سری چیزها برای بعضی ها خیلی پیش پا افتاده باشد اما مبتدی ها را حسابی راضی میکند! با قسمت اول این آموزش همراه باشید.

HTML یا Hyper Text Markup Language به معنی زبان نشانه گذاری ابر متنی, اولین و معروف ترین زبان نشانه گذاری وب است. این زبان در اوایل دهه ۱۹۹۰ توسط دنیس ریچی ابداع و اولین صفحه وب توسط آن نشانه گذاری شد. در این سری آموزشی HTML از وب تستر, همه ی افراد , از مبتدی ترین آنها (حتی کسی که هیچ چیزی از زبان های تحت وب نمیداند!) تا حرفه ای ترین ها را در نظر گرفته ایم. بنابراین ممکن است یک سری چیزها برای بعضی ها خیلی پیش پا افتاده باشد اما مبتدی ها را حسابی راضی میکند! با قسمت اول این آموزش همراه باشید.

HTML چیست؟

HTML یک زبان نشانه گذاری ابرمتنی است. یعنی چه؟ یک صفحه ی وب را فرض کنید. در این صفحه اجزای مختلفی وجود دارد. مثلا سربرگ, ستونها و … . اما پشت همه ی این اجزا, کد هایی وجود دارد. کد هایی از انواع مختلف زبان های نشانه گذاری و برنامه نویسی وب. بگذارید اول فرق یک زبان نشانه گذاری با زبان برنامه نویسی را مشخص کنیم. در سطح وب, زبان نشانه گذاری, یک شیوه برای نمایش و چاپ اطلاعات بر روی صفحه مرورگر است. یعنی در این نوع زبان ها, با استفاده از تگ ها, انواع مختلف داده ها را مشخص میکنیم تا مرورگر با تجزیه و تحلیل تگ های ما, اطلاعات را بر اساس نوع آن ها (عکس, متن, ویدیو و …) به شکل درست نمایش دهد. در واقع اگر یک زبان نشانه گذاری نمی بود, هیچ صفحه ی وبی هم وجود نمیداشت! چرا که زبان های نشانه گذاری, بنیان و پایه یک صفحه وب هستند و در راس آنها HTML قرار دارد. اما در مورد زبان های برنامه نویسی باید بگوییم که این زبان ها, دارای الگوریتم بوده و یک تعامل پویا را با کاربر رقم میزنند. یعنی براساس رفتار کاربر و با انجام محاسبات خاصی که توسط برنامه نویس تعیین میشوند, عملیات مشخصی را انجام میدهند. از مهمترین نمونه های زبان های برنامه نویسی وب میتوان به جاوااسکریپت و PHP اشاره کرد. علاوه بر اینها, HTML یک زبان سمت کاربر است. از این حیث دو نوع تقسیم بندی بین زبان های برنامه نویسی وب وجود دارد: سمت کاربر (Front-End یا client side) و سمت سرور (Back-End یا Server Side). زبان های سمت کاربر, زبان هایی هستند که مستقیما توسط مرورگر ترجمه میشوند و به نمایش در می آیند. مثل HTML , CSS , JavaScript . اما زبان های سمت سرور, زبان هایی هستند که ابتدا در خود سرور اصلی سایت (هاست), به زبان های سمت کاربر ترجمه و به مرورگر فرستاده میشوند. سپس مرورگر این زبان های سمت کاربر را به یک محیط بصری ترجمه میکند. درواقع اگر قصد راه اندازی یک وبسایت استاتیک (به معنی غیر پویا و ایستا) را دارید, باید از زبان های سمت کاربر استفاده کنید. اما اگر قصد راه اندازی سایتی پویا (دارای قابلیت تعامل با کاربر, مثلا دارای سیستم ثبت نام و ارسال اطلاعات و …) دارید, علاوه بر زبان های سمت کاربر, باید از زبان های سمت سرور نیز استفاده کنید. البته تنها راه ایجاد سایت های پویا, یادگیری PHP و زبان های سمت سرور نیست, بلکه میتوانید با استفاده از یک CMS (سیستم مدیریت محتوا) سایتی پویا راه اندازی کنید و با یادگیری اچ تی ام ال, سی اس اس و جاوااسکریپت, برای آن قالبی اختصاصی طراحی کنید. از معروف ترین (و به عقیده من بهترین) CMS ها میتوان وردپرس را نام برد که احتمالا اکثر شما با آن آشنایی دارید و احتمالا قالب های زیادی هم رویش نصب کرده اید و شاید دوست داشته باشید قالبی برای آن طراحی کنید. اگر قصد انجام اینکار را دارید پس بدانید که حتما باید HTML و CSS و در صورت لزوم جاوااسکریپت را بلد باشید. فکر می کنم مسیر خوبی را برای درک زبان های مختلف تحت وب رسم کرده باشم. اگر نه که مرا ببخشید!

برای شروع یادگیری HTML به چه چیزهایی نیاز دارم؟

۱- درک کلی از HTML و نقش آن در طراحی وب (که سعی شد در بخش بالا توضیح کاملی داده شود)

۲- کمی وقت

۳- علاقه و انگیزه یادگیری

۴- یکسری نرم افزار متداول برنامه نویسی وب مثل Adobe Dreamweaver , Rapid PHP و Notepad++ (هر کدام که راحت ترید)

۵- یک مرورگر خوب (Safari , Opera , Edge , Chrome , Firefox)

نسخه های مختلف HTML و تفاوت آنها

HTML دارای دو نسخه ی رایج HTML 4.0 و HTML 5 است. نسخه ۴ آن تا سال ۲۰۱۲ مورد استفاده قرار می گرفت. در این سال با آمدن نسخه تقریبا آزمایشی HTML 5 بسیاری از طراحان وب به دلیل ویژگی های جدید و بهتر HTML 5 و همچنین بهینه بودن کدهای آن, به سمت آن گرایش یافتند. درحالی که توسعه دهندگان HTML 5 آنرا فقط به عنوان نسخه آزمایشی منتشر کرده بودند, حالا همه از آن به عنوان یک نسخه کامل جدید از اچ تی ام ال استفاده میکنند (که حق هم دارند چون واقعا خوب است!). علاوه بر بهینه تر بودن کدها و اضافه شدن تگ های جدید, از نظر سئو هم استفاده از نسخه ۵ اچ تی ام ال به شدت توصیه می شود. در این نسخه, شما میتوانید به راحتی و با استفاده از تگ هایی کوتاه, صفحه را به بخش های مختلف (مثل سربرگ, فوتر , سایدبار, محتوا و …) تقسیم کنید تا خزنده های گوگل و سایر موتور های جستجو به راحتی بخش های مختلف سایتتان را شناسایی و سایت شما را به عنوان یک سایت استاندارد و بهینه در صفحات اول جستجو ایندکس کنند. علاوه بر همه ی اینها, در اچ تی ام ال ۵ , دیگر برای پخش ویدیو ها نیازی به فلش پلیر ندارید و به راحتی و با استفاده از یک تگ, میتوانید اینکار را انجام دهید.

مرورگر چطور صفحات وب را تفسیر می کند؟

در اوایل این آموزش, مقایسه ای داشتیم بین زبان های سمت سرور و سمت کاربر و گفتیم که HTML مهمترین زبان سمت کاربر است که اگر نباشد, هیچ صفحه ی وبی ساخته نمی شود.

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

پس از درک مفهوم سند HTML, باید مفهوم تگ ها را نیز بدانیم. در زبان اچ تی ام ال, تگ ها در مرورگر نمایش داده نمیشوند. بلکه مرورگر از این تگ ها برای تفسیر و ترجمه ی صفحه استفاده می کند. مثلا زبان شیرین انگلیسی را تصور کنید: همانطور که میدانید در این زبان کلمه ی Book به معنی “کتاب” است. اگر کلمه ی Book را به یک مترجم زبان انگلیسی بدهید و ترجمه ی آن به فارسی را بخواهید, به شما کلمه ی “کتاب” را تحویل می دهد. داستان مرورگر نیز همین است. اگر یک تگ اچ تی ام ال را به مرورگر بدهید, آن مرورگر با استفاده از اطلاعاتی که از قبل دارد, تگ را تفسیر کرده و محتوای قابل نمایش تحویل شما میدهد.

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

نکته: ممکن است کدی که درون سند HTML قرار میدهید نه اچ تی ام ال باشد و نه زبانی که مرورگر بتواند آنرا تفسیر کند (یعنی به زبان سمت سرور باشد). اما نگران نباشید. درصورتی که تگ معرفی آن زبان را قبل و بعد از کد قرار دهید, خود سرور (هاست) شما آنرا تفسیر می کند و به صورت HTML تحویل مرورگر میدهد.

اگر متوجه دو نکته ی بالا نشدید, اصلا خودتان را ناراحت نکنید. در ادامه و در جای خودشان بیشتر در موردشان توضیح میدهیم.

تگ ها در اچ تی ام ال درون علامت های کوچکتر و بزرگتر قرار می گیرند. مثل: <html>

معمولا تگ های اچ تی ام ال به صورت تگ باز و بسته نوشته میشوند. یعنی مثلا تگ <html> اول می آید. بعد زیرش کد های مربوط به این تگ قرار می گیرند. و در انتها تگ به صورت <html/> بسته می شود. به مثال زیر توجه کنید:

HTML

<html>
کد های مربوط به این تگ
</html>

تگ <html> در یک سند اچ تی ام ال, کد های قابل ترجمه را برای مرورگر مشخص می کند. یعنی هرچیزی که درون این تگ قرار گرفت باید توسط مرورگر تفسیر شود.