HTML چیست و چه کاربردی دارد؟

اگر کمی با دنیای طراحی وب یا برنامه نویسی وب آشنایی داشته باشید، حتما واژه‌ی HTML به گوشتان خورده است و این سوال برایتان پیش آمده است که HTML چیست . در این فایل و مقاله آموزشی میخواهیم به صورت کامل به پاسخ به این سوال بپردازیم که HTML چیست ، چه کاربردی در طراحی وب دارد؟ چطور کار میکند؟ رابطه‌ی آن با CSS چیست و… . هر آن چیزی که برای پاسخ به سوال HTML چیست؟ نیاز دارید را در این مقاله و آموزش به آن پاسخ خواهیم داد.با ماگرتا همراه باشید.

اچ تی ام ال برگرفته از حروف اول عبارت HyperText Markup Language می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها  به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید.  توجه داشته باشید که هر تگ در زبان اچ تی ام ال معنا و مفهوم خاص خود را دارد. صفحاتی که توسط این زبان ساخته می شوند؛ متشکل از markup tag ها و دارای پسوند htm و یا html می باشند.

از HTML برای نمایش المان ها و لایه بندی ساختار صفحه استفاده می شود. این صفحات را می توان در برنامه های مختلف ادیتور مثل Notepad, Visual Stadio, dearm weaver و …. ویرایش  کرد و تغییر داد. در زبان htmlبخش ها و کدهای مختلف  ( سمت سرور و سمت کلاینت ) توسط ” تگ ” از هم جدا می شوند و همین تگ ها ابزاری برای چگونگی نمایش دادن اطلاعات در صفحات وب و توسط مرورگرها هستند. در واقع تگ ها اشکال مختلف نمایش عناصر مختلف یک صفحه ی وب را تعیین می نمایند.

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

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

انواع تگ ها (tags) :

HTML زبانی است که طی زمان برای ایجاد وب سایت‌های زیباتر و کارآمدتر دچار تحول شد. HTML 1.0 اولین نسخه منتشر شده در جهان بود. در آن زمان تعداد برنامه نویس وب چندان زیاد نبود و این زبان هم تا حدودی محدود کننده به نظر می‌رسید.

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

تولد HTML 3.0 :

رفته رفته افراد بیشتری به سمت استفاده از HTML گرایش پیدا کردند، اما نسخه‌های قبلی این زبان هنوز هم برای وب مسترها محدودیت‌هایی ایجاد می‌کرد؛ آن‌ها به دنبال ویژگی‌ها، توانایی‌ها و تگ‌های بیشتری بودند و تمایل داشتند ظاهر سایت خود را ارتقا ببخشند. در همان زمان بود که گروهی خبره HTML، پیش‌نویس جدیدی از این زبان تهیه کرده و آن را HTML 3.0 نامیدند.

این نسخه شامل قابلیت‌های جدید و پیشرفته‌ای بود و مژده ابزارهای قدرتمندی برای طراحی سایت را برای طراحان سایت به همراه داشت. متاسفانه مرورگر‌ها این ویژگی‌های جدید را به کندی بارگذاری می‌کردند و تنها بخشی از دستورات اعمال شده بر صفحه اجرا می‌شد؛ بنابراین برنامه‌نویسان استفاده از این نسخه را به فراموشی سپردند.

HTML 3.2 :

کمی بعدتر کنسرسیوم وب جهانی اولین کار خود را به بازار ارائه کرد که به HTML 3.2 معروف ‌شد و تغییرات اندکی نسبت به نسخه  پیشین داشت و بسیاری از مراحل بزرگ را به نسخه‌های بعدی موکول کرده بود.

بسیاری از تگ‌های قبلی در این نسخه و استانداردهای جدید به چشم نمی‌خورد. اما خیلی زود در ژانویه ۱۹۹۷ به نسخه استاندارد تبدیل شد و امروزه تمام مرورگرها از ویژگی‌های آن به طور کامل پشتیبانی می‌کنند.

HTML 4.01؛ تحول بزرگ :

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

این نسخه در دسامبر ۱۹۹۷ توسط کنسرسیوم وب جهانی پیشنهاد شد و در آوریل ۱۹۹۸ به استاندارد رسمی طراحی سایت تبدیل شد. پشتیبانی مرورگر از این زبان جدید و تقریبا بیشتر تگ‌ها و خصوصیات توسط مایکروسافت در مرورگر محبوب IE5 صورت گرفت.

ورود XHTML :

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد.

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

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <p>Magerta</p>
</body>
</html>

متن میان <html> و <html/>  در واقع صفحه وب را تعریف کرده و متن بین <body> و <body/>  محتوای قابل مشاهده متن است. متن نشانه‌گذاری <title>Document</title> عنوان صفحه مرورگر را تعریف می‌کند. 

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

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

برخی از تگ های اچ تی ام ال مرتبط با موضوع بهینه سازی یک صفحه ی وب برای موتورهای جستجو هستند و به صورت مستقیم بر seo سایت تاثیر می گذارند، برای مثال : تگ title, description و تمامی تگ های مرتبط با ویرایش و تغییرات متن نظیر  بولد یا ایتالیک کردن، لینک دادن به صفحات دیگر و … بر این اساس یک طراح وب سایت که به HTML و CSS مسلط باشد، می تواند با اطلاع از انواع تگ ها و نحوه ی استایل دهی، یک قالب سایت را از ابتدا کدنویسی کند به گونه ای که فاقد کدهای مخرب و خطا باشد و اصول سئو نیز در آن رعایت شده باشد. قطعا طراحانی که به طراحی تمپلیت تسلط دارند، موفق تر از کسانی هستند که از قالب ها و کدهای آماده استفاده می کنند.

CSS را به سه طریق می‌توان به عناصر HTML اضافه کرد :

– روش inline : از طریق استفاده از خصوصیت style در عناصر HTML (استایل‌های هر عنصر داخل تگ نوشته می‌شوند.

<h1 style="color:blue;">This is a sample text</h1>

– روش internal : از طریق عنصر <style> در بخش <head> (تمامی کدهای css صفحه در تگ head و style نوشته می‌شوند.

<!DOCTYPE html>

  <html>

  <head>

  <style>

  body {background-color: red;}

h1   {color: blue;}

p    {color: red;}

</style>

</head>

<body>



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>

– روش external : از طریق استفاده از یک فایل CSS خارجی (استایل‌ها در یک فایل CSS جداگانه نوشته شده و لینک آن در هدر صفحه گنجانده می‌شود و بهترین روش برای افزودن CSS به HTML محسوب می‌شود.

<head>

<link rel="stylesheet" href="styles.css">

</head>

یکی از مرجع های کامل یادگیری HTML (همچین زبان های برنامه نویسی دیگر) سایت w3schools است.