HTML چیست؟ توضیح مفاهیم همراه با مثال + لیست تگ های HTML

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

از قدیم تا امروز، تکنولوژی‌های مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بوده‌اند، اما اگر بگوییم تمام این تکنولوژی‌ها به HTML منتهی می‌شوند باور می‌کنید؟ در این مسیر همراه ما باشید تا کشف کنیم HTML چیست و چطور این همه سال در دنیای وب جایگاه خودش را حفظ کرده است؟

HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه‌ گذاری ابرمتن می‌گویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language به حساب می‌آید. کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایت‌های شگفت‌انگیز است.

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

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

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

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد.

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

HTML5 چیست؟

قصد داریم در این بخش به این موضوع بپردازیم که HTML5 چیست و چه فرقی با HTML دارد. تا سال 2008 بازار HTML4 داغ بود و به طور گسترده استفاده می‌شد. اما مشخص بود که این نسخه از HTML ضعف‌هایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار می‌شد مربوط به چندرسانه‌ای (multimedia) و گرافیک بود.

HTML5 در سال 2014 یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگ‌های HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایت‌ها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.

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

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

البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی می‌توانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران می‌شوند.

تگ چیست؟

HTML به کمک برچسب‌‌ها (Tags) عناصر مختلف را کنار هم می‌چیند و هر کاربر با توجه به نیاز خود از آن‌ها استفاده می‌کند. شاید بپرسید تگ چیست؟ تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود. همچنین برای نشان دادن لینک‌ها از تگ a استفاده در صفحات وب استفاده می‌شود. برای مثال :

<a href="https://7learn.com">سایت سون لرن</a>

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

مهمترین تگ‌های HTML را بشناسید

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

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

دسترسی یکجا به لیست کامل تگ‌های HTML

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

HTML در کنار css و js هسته اصلی وب را تشکیل می‌دهد و یک زبان بسیار مهم در دنیای وب حساب می‌شود. این زبان مزیت‌ها و محدودیت‌هایی هم دارد که در ادامه به آن‌ها اشاره می‌کنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می‌آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:

مزایای HTML :

• یادگیری آسان و لذت‌بخش
• قابلیت اجرا در تمام مرورگرها
• متن باز و رایگان بودن
• ادغام آسان با زبان‌های سمت سرور مثل php

معایب HTML:

• استاتیک بودن و وابستگی به زبان‌های سمت سرور برای تعامل با کاربر
• ضعف در پشتیبانی از مرورگرهای قدیمی
• نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی

کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبان‌های css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و  چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.

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

فرانت اند (Front End) به چه معناست؟

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

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

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

1. HTML به کمک تگ‌های از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص می‌کند.
2. CSS به ما کمک می‌کند عناصر مختلف را در صفحه جابه‌جا کنیم، رنگ‌بندی را تغییر دهیم، فونت‌ها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
3. JavaScript به ما اجازه می‌دهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS می‌توانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.

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

اگر از ویندوز استفاده می‌کنید، نرم افزار notepad برای این منظور در دسترس شما خواهد بود. ویرایشگرهای کد بسیار زیادی وجود دارند که از این زبان پشتیبانی کرده و یک محیط کدنویسی HTML به حساب می‌آیند. مثلا Adobe Dreamweaver یا Jetbrain PHPMystorm که جزء محبوب‌ترین ویرایشگرهای کد در طراحی وب هستند. اگر با ابزارهای برنامه نویسی و طراحی سایت آشنایی ندارید، مطالعه مطلب زیر را از دست ندهید.

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

• doctype html : این تگ به مرورگر می‌گوید که ما از کدام نسخه HTML استفاده می‌کنیم.
• تگ HTML : تمام تگ‌های HTML باید داخل این تگ قرار بگیرند تا به عنوان زبان HTML شناخته شوند.
• تگ head : این تگ به عنوان مغز متفکر صفحات وب شناخته می‌شود و کارهایی مثل تعامل با موتور جستجو، تعامل با فایل‌های CSS و جاوااسکریپت، عنوان صفحه، توضیحات صفحه و غیره را به عهده دارد.
• تگ body : مهم‌ترین تگ HTML است. تمام عناصری که مربوط به ظاهر صفحه هستند باید در این تگ قرار بگیرند. در غیر اینصورت نمایش داده نمی‌شوند.

برای درک ساختار یک سند HTML کدهای زیر را با دقت بررسی کنید :

<!doctype html>
<html>
<head>

</head>
<body>

</body>
</html>

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

حالا کافی است کدهایی را بنویسیم که خروجی ظاهری داشته تا بتوانیم خروجی کارمان را ببینیم. می‌خواهیم در صفحه خود عنوان، یک تصویر و در آخر یک پاراگراف نشان دهیم. کدها را باید داخل تگ body قرار دهیم. برای نشان دادن عناوین در صفحه وب، از تگ‌های H استفاده می‌کنیم. همینقدر بدانید که شش تگ h وجود دارند و بر اساس اهمیت و اندازه از اعداد 1 تا 6 تقسیم می‌شوند. برای مثال ما در این بخش از تگ H2 استفاده کنیم:

<h2>
سون لرن - مرجع تخصصی آموزش برنامه نویسی و طراحی وب سایت
</h2>

حالا برای نشان دادن تصویر مدنظرمان از تگ img استفاده می‌کنیم. این تگ مخفف کلمه image به معنای تصویر است. پس برای قرار دادن تصویر کد زیر را می‌نویسیم :

<img src=”/”>

دقت کنید با نوشتن این تگ مفهوم attribute یا صفت را هم می‌فهمید. Src یک صفت برای تگ img بوده و آدرس تصویر ما را مشخص می‌کند. می‌توانید حدس بزنید که src مخفف کلمه source یا منبع است. به جای کاراکتر / آدرس تصویر خود را وارد کنید. اگر تصویر شما در دسکتاپ قرار داشته و نام آن image.png باشد. آدرس آن اینطور می‌شود:

C:\Users\username\Desktop/image.png

حالا که تصویر ما هم آماده شد،  می‌خواهیم آخر کار یک پاراگراف ساده به کاربر نشان دهیم. برای این کار از تگ <p> کمک می‌گیریم.

<p>
سون لرن منبعی کامل برای آموزش طراحی وب و زبان‌های برنامه نویسی تحت وب از جمله PHP ،HTML و CSS ، جاوا اسکریپت، Ajax و وردپرس و محلی برای پاسخگویی سوالات شماست
</p>

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

مشاهده گر HTML چیست و چگونه به آموزش ما کمک می‌کند؟

شاید از کامپیوتر شخصی و لپ تاپ خود دور باشید ولی دلتان بخواهد برنامه نویسی HTML تمرین کنید یا حتی روی یک پروژه کار کنید. در چنین شرایطی است که دوست دارید بدانید منظور از مشاهده گر HTML چیست؟ اگر گوشی شما اندرویدی است به کمک یک اپلیکیشن به راحتی می‌توانید این کار را انجام دهید.

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

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

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

اگر می‌خواهید طراحی سایت را یاد بگیرید بهتر است این مقالات سون لرن را مطالعه کنید

مراحل شروع یادگیری طراحی سایت 

HTML چیست؟ توضیح مفاهیم همراه با مثال + لیست تگ‌های HTML

CSS چیست؟ 

جاوا اسکریپت چیست؟

پیش نیازهای آموزش جاوا اسکریپت

همچنین اگر علاقمند به خواندن منابع انگلیسی هستید سایت HTML همه چیز را درباره این زبان برای شما توضیح داده است.

نویسنده

محمد انوری

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