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

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

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

HTML چیست؟

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

HTML ساختاری ساده و مبتنی بر متن دارد. به همین دلیل یادگیری و فهم آن برای مبتدیان آسان است. در زیر یک قطعه کد به زبان HTML را برای مثال آورده‌ایم:

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

برنامه‌نویسان وب از HTML برای طراحی چیدمان محتوای یک صفحه وب‌سایت استفاده می‌کنند.

HTML چگونه کار می‌کند؟

HTML معمولاً در فایل‌هایی با پسوند .html یا .htm ذخیره می‌شوند. هر سایت می‌تواند شامل صدها و یا حتی هزاران فایل HTML باشد که در دایرکتوری‌های متفاوتی نگهداری می‌شوند.

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

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

زبان‌های HTML، CSS و JavaScript  با یکدیگر پایه و اساس ساخت وب‌سایت را تشکیل می‌دهند.

 

تگ‌های HTML و المان‌های آن چه معنایی دارند؟

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

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

داخل تگ div می‌توانیم المان h1 را ببینیم. H1 المانی است که عنوان اصلی صفحه وب را مشخص می‌کند. معمولاً متنی که داخل تگ‌های عنوان قرار می‌گیرند (بسته به استایلی که بعداً با استفاده از CSS به صفحه وب می‌دهیم) بزرگ‌تر و پررنگ‌تر از بقیه متن داخل صفحه وب است.

تگ p هم یک المان پاراگراف می‌سازد. معمولاً بعد از این المان مقداری فضای خالی به عنوان حاشیه قرار می‌گیرد.

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

• List item one
• List item two

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

HTML5 چیست؟

حالا که با HTML چیست و چه کاربردهایی دارد؟ آنا شدید باید بدانید html5 چیست؟ HTML5 آخرین نسخه HTML است. این آپدیت عملکرد زبان HTML را تا حد بسیار زیادی بهبود بخشید. همچنین در این نسخه کاربران می‌توانند از امکاناتی استفاده کنند که در نسخه‌های قبل برای استفاده از آنها مجبور بودند نرم‌افزارهای مجزایی مثل پلاگین‌های مرورگر را نصب کنند. همچنین با استفاده از HTML5 می‌توان اپلیکیشن‌هایی ایجاد کرد که از HTML استفاده می‌کنند و به‌صورت آفلاین نیز کار می‌کنند. در ادامه چند مورد از تگ‌هایی را آورده‌ایم که در نسخه HTML5 به زبان HTML اضافه شدند:

video: تگ ویدئو به برنامه‌نویسان امکان اضافه‌کردن یا استریم ویدئو به مرورگر را بدون نیاز به پلاگین‌هایی مثل Flash یا Silversight می‌دهد.

audio: تگ صدا هم مثل تگ ویدئو، امکان اضافه‌کردن و استریم صدا را به برنامه‌نویسان می‌دهد.

canvas: تگ canvas بخشی را در HTML تعیین می‌کند که برای استفاده از المان‌های گرافیکی با استفاده از جاوا اسکریپت از آن استفاده می‌شود. این بخش حتی می‌تواند المان‌های گرافیکی سه‌بعدی و انیمیشنی را با استفاده از WebGL در خود جای دهد.

nav: در HTML5 همچنین تگ‌های جدیدی برای تعیین بخش‌های مختلف سایت وجود دارد. تگ‌هایی مثل nav که المان‌های ناوبری را مشخص می‌کند.

امکاناتی که در بالا گفته شد، تنها قسمتی از المان‌هایی است که HTML5 به زبان  HTML اضافه کرده است. HTML5 یکی از بزرگ‌ترین تغییرات در زبان HTML است و راه خودش را به شیوه‌های مدرن توسعه وب‌سایت‌های داینامیک و پویا باز کرده است.

از HTML چه استفاده‌هایی می‌شود؟

حالا که با تگ ها و المان‌های HTML و قابلیت‌های جدید HTML5 آشنا شدیم، بیایید نگاه نزدیکی به کاربردهای زبان HTML بیندازیم.

ساختاردهی صفحات وب

با تگ ها و المان‌ها می‌توانیم عنوان‌ها، پاراگراف‌ها و سایر محتوای یک صفحه وب را مشخص کنیم. مثلاً متنی که داخل h1 قرار گیرد، با فونت متفاوتی نوشته می‌شود و بزرگ‌تر از بقیه متن خواهد بود. متنی که داخل h2 قرار گیرد هم بزرگ‌تر از بقیه متن اما کوچک‌تر از متن داخل h1 خواهد بود و به همین ترتیب تا h6 ادامه می‌یابد.

برای مطالعه بیشتر: ساخت صفحه اول استارباکس

ناوبری در اینترنت

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

تگ‌های لنگری HTML با استفاده از ویژگی href به ما امکان لینک کردن صفحه‌ها به یکدیگر را می‌دهند. برای مثال:

همان‌طور که احتمالاً حدس زدید، کد بالا یک هایپر لینک به گوگل است. همچنین می‌توانید از هایپر لینک‌ها برای لینک کردن قسمت خاصی از یک صفحه وب استفاده کنید.

جای‌گذاری تصاویر و ویدئوها

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

در گذشته برنامه‌نویسان از فلش برای جای‌گذاری ویدئوها در یک صفحه وب استفاده می‌کردند اما با اضافه شدن تگ video در HTML5 دیگر نیازی به استفاده از فلش برای جای‌گذاری ویدئو نیست.

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

بهبود ذخیره داده در سمت کلاینت و قابلیت‌های آفلاین

علاوه بر قابلیت‌هایی که گفتیم، HTML5 قابلیت‌های آفلاین این زبان را نیز بهبود بخشید. وب‌سایت‌ها از کوکی‌ها برای ذخیره داده‌های کاربران استفاده می‌کنند تا در هنگام بازدید مجدد کاربران آن داده‌ها را بازیابی کنند.

کوکی‌ها برای داده‌های کوچک مثل داده‌های احراز هویت و نام کاربری به خوبی عمل می‌کنند اما نسخه HTML5 به مرورگرها قابلیت ذخیره داده‌های پیچیده‌تر را نیز اضافه کرد.

به علاوه، فایل‌های کَشی (cache) که می‌توانید از طریق مرورگر به آنها مراجعه کنید، به کاربران اجازه مرور کردن یک سایت را در حالت آفلاین می‌دهند. این کار به وب اپلیکیشن‌ها اجازه می‌دهد حتی وقتی که اتصال کاربر قطع شده است، به عملکرد خود ادامه دهد.

ساخت بازی

اگر چه نمی‌توانید یک بازی ویدئویی را تنها با زبان HTML بسازید، المان canvas به شما امکان ساخت ویدئو گیم‌ها را در مرورگر به کمک CSS و جاوا اسکریپت می‌دهد.

در گذشته فقط با Flash و Silverlight می‌توانستید این کار را انجام دهید اما با نسخه جدید HTML می‌توانید بازی‌های دو بعدی و سه‌بعدی بسازید و روی مرورگر خود اجرا کنید.

برای مطالعه بیشتر: ساخت پیانو

تعامل با APIهای محلی (native)

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

چه مشاغلی به HTML نیاز دارند؟

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

به همین ترتیب، برنامه‌نویسان موبایل هم از این زبان‌ها به همراه فریم‌ورک‌هایی مثل Ionic و React Native برای ساختن موبایل اپلیکیشن‌ها استفاده می‌کنند.

مهندسان بک‌اند هم باید به HTML مسلط باشند. هر چند ممکن است سایر زبان‌های پر کاربرد حوزه کاری‌شان کد HTML تولید کند اما باید بتوانند کدهای HTML را درک کنند تا مطمئن شوند همه قسمت‌های نرم افزار بدون نقص کار می‌کند.

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

از آنجایی که بازاریاب‌ها برای بلاگ‌ها و ایمیل‌ها از HTML استفاده می‌کنند، می‌توانیم بگوییم این زبان کاربردهایی در حوزه‌های غیر از تکنولوژی هم دارد.

 سخن آخر در موضوع HTML چیست و چه کاربردهایی دارد؟

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

مطالب زیر در حوزه برنامه‌نویسی حتماً به درد شما می‌خورد آن‌ها را از دست ندهید: 

اگر به دنبال پروژه برای تمرین بیشتر هستید ما در مطلب زیر ۶ پروژه ساده و رایگان برای تمرین برنامه‌نویسی به زبان‌های HTML، CSS و جاوا اسکریپت را برای شما آورده‌ایم این مطلب برای شما خیلی مفید است آن را از دست ندهید:

۶ پروژه ساده و رایگان برای تمرین برنامه‌نویسی به زبان‌های HTML، CSS و جاوا اسکریپت

به نظر شما بدون پیش زمینه کامپیوتر می‌توان برنامه نویس شد؟ در مقاله زیر به شما می‌گوییم چگونه بدون پیش زمینه رشته کامپیوتر برنامه نویس شویم؟

چگونه بدون پیش زمینه رشته کامپیوتر برنامه نویس شویم

اگر می‌خواهید بدانید در چه سطحی از برنامه نویسی هستید در مطلب زیر به شما می‌گوییم چطور بفهمیم در چه سطحی از برنامه نویسی قرار داریم؟ حتماً این مطلب را بخوانید: 

چطور بفهمیم در چه سطحی از برنامه نویسی قرار داریم؟

در این پست در مورد HTML چیست و چه کاربردهایی دارد؟ صحبت کردیم. همچنین قابلیت های جدیدی که HTML5 به این زبان اضافه کرده است را بررسی کردیم. حال نوبت شماست که بگویید چقدر با این زبان آشنایی دارید؟ آیا تا به حال از این زبان استفاده کرده اید؟