ترفندفناوری

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

زبان HTML چیست و همه چیز درباره اچ تی ام ال برای طراحی سایت

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

HTML چیست؟

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



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

تگ (tag) چیست؟

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

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

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

1< a >براي ايجاد يک لنگر (پیوند) به کار مي رود .
2< abbr >براي ايجاد يک مخفف براي يک عبارت بزرگتر به کار مي رود .
3< acronym >براي ايجاد يک مخفف براي يک عبارت بزرگتر به کار مي رود .
4< address >براي نوشتن يک آدرس در متن به کار مي رود .
5< area >مشخص کننده يک ناحيه در نقشه هاي تصويري است .
6< b >براي توپر کردن نوشته ( Bold ) به کار مي رود .
7< base >براي تعيين خواص پايه در يک صفحه به کار مي رود .
8< bdo >قلم نوشته را به صورت نوشته هاي محيط هاي کدنويسي کامپيوتر در مي آورد .
9< big >باعث بزرگتر نمايش داده شدن نوشته در يک متن مي شود .
10< blockquote>براي ايجاد يک نقل قول به کار مي رود .
11< body >بدنه اصلي محتويات صفحه وب را تشکيل مي دهد .
12< br >براي ايجاد يک خط جديد به کار مي رود .
13< button >براي ايجاد دکمه هاي وب به کار مي رود .
14< caption >براي تعيين عنوان يک جدول به کار مي رود .
15< cite >باعث نمايش کج نوشته به کار مي رود .
16< code >براي نمايش متن همانند محيط هاي برنامه نويسي به کار مي رود .
17< col >براي دسته بندي گروهي از ستون هاي يک جدول به کار مي رود .
18< colgroup >براي دسته بندي گروهي از ستون هاي يک جدول به کار مي رود .
19< dd >براي ايجاد ليست هاي معني به کار مي رود .
20< del >براي نمايش متن حذف شده درصفحه به کار مي رود .
21< div >براي تقسيم فضا در صفحات وب به کار مي رود .
22< dl >براي ايجاد ليست هاي معني به کار مي رود .
23< dt >براي ايجاد ليست هاي معني به کار مي رود .
24< em >براي نمايش نوشته به صورت کج به کار مي رود .
25< fieldset >براي ايجاد يک کادر به دور محتويات خود به کار مي رود .
26< form >براي ايجاد يک فرم در صفحه به کار مي رود .
27< h1 > تا < h6 >براي ايجاد انواع تيترها در نوشته به کار مي رود .
28< head >در برگيرنه اطلاعات کلي درباره سند وب است .
29< hr >براي ايجاد يک خط در عرض صفحه به کار مي رود .
30< html >محدوده اصلي کد HTML يک صفحه را تعيين مي کند .
31< i >براي نمايش نوشته به صورت کج به کار مي رود .
32< img >براي قرار دادن تصوير در صفحه به کار مي رود .
33< input >براي ساختن انواع کتنرل هاي HTML به کار مي رود .
34< ins >براي مشخص کردن متن هاي جديد وارد شده در يک صفحه به کار مي رود .
35< kbd >براي نمايش متن همانند محيط هاي برنامه نويسي به کار مي رود .
36< label >براي ايجاد يک عنوان ( نماد متني ) در صفحه به کار مي رود .
37< legend >براي ايجاد عنوان يک کادر fieldset به کار مي رود .
38< li >براي تعريف يک آيتم در ليست به کار مي رود .
39< link >براي برقراري ارتباط بين صفحه با يک فايل خارجي به کار مي رود .
40< map >براي ايجاد يک نقشه تصويري به کار مي رود .
41< meta >در بر گيرنده اطلاعات کلي درباره محتويات يک صفحه جهت استفاده موتورهاي جستجو است .
42< noscript >براي تعيين جايگزين يک اسکريپت در يک صفحه به کار مي رود .
43< object >براي پيوند يک شي خارجي با صفحه به کار مي رود .
44< ol >براي ايجاد ليست هاي ترتيبي به کار مي رود .
45< optgroup >براي دسته بندي گزينه هاي يک ليست به کار مي رود .
46< option >براي ايجاد يک ليست در صفحه به کار مي رود .
47< p >براي ايجاد يک پاراگراف در صفحه به کار مي رود .
48< param >براي تعيين تنظيمات زمان اجراي يک شي خارجي در صفحه به کار مي رود .
49< pre >براي نمايش متن به همان صورت اوليه به کار مي رود .
50< q >براي ايجاد يک نقل قول به کار مي رود .
51< samp >براي نمايش متن همانند محيط هاي برنامه نويسي به کار مي رود .
52< script >براي تعيين يک اسکريپت در صفحه به کار مي رود .
53< select >براي ايجاد يک ليست باز شو به کار مي رود .
54< small >براي نمايش متن به صورت کوچکتر به کار مي رود .
55< span >براي تقسيم متن به کار مي رود .
56< strong >براي نمايش درشتر متن به کار مي رود .
57< style >براي قالب بندي تگ هاي HTML و صفحات به کار مي رود .
58< sub >براي ايجاد يک زير نويس به کار مي رود .
59< sup >براي ايجاد يک انديس به کار مي رود .
60< table >براي ايجاد جداول به کار مي رود .
61< tbody >شامل محتويات و بدنه اصلي يک جدول مي شود .
62< td >براي ايجاد يک خانه جدول به کار مي رود .
63< textarea >براي ايجاد يک کادر متن به کار مي رود .
64< tfoot >براي تعيين عنوان انتهاي يک جدول به کار مي رود .
65< th >براي ايجاد يک سر عنوان براي جدول به کار مي رود .
66< thead >براي ايجاد يک سر عنوان براي جدول به کار مي رود .
67< title >براي ايجاد متن tooltip درباره عناصر به کار مي رود .
68< tr >براي ايجاد يک سطر جدول به کار مي رود .
69< tt >باعث نمايش متن به صورت نوشته هاي تلگراف به کار مي رود .
70< u >براي خط زيردار کردن نوشته به کار مي رود .
71< ul >براي ايجاد ليست هاي نشانه اي به کار مي رود .
72< var >براي نمايش متن همانند محيط هاي برنامه نويسي به کار مي رود .
73< !– … — >براي ارائه توضيحات دلخواه در صفحه HTML به کار مي رود .
74< !DOCTYPE >نوع و نسخه زبان برنامه نويسي مورد استفاده در صفحه وب را مشخص مي کند .

تکامل HTML



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> عنوان صفحه مرورگر را تعریف می‌کند. 

آیا  HTML یک زبان برنامه نویسی است؟

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

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

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

ارتباط 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 است.

زنجیران

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.