ترفندفناوری

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

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

Htm


HTML چیست؟

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

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

HTML Tags
HTML Tags

تگ (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
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 است.

برچسب ها

زنجیران

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی *-- بارگیری کد امنیتی --

نوشته های مشابه

همچنین ببینید

بستن
دکمه بازگشت به بالا
بستن
بستن