منو سایت

  • خانه
  • وبلاگ
  • HTML چیست و چه کاربردی در طراحی سایت دارد؟

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

 تاریخ انتشار :
/
  وبلاگ
HTML چیست و چه کاربردی در طراحی سایت دارد؟

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

تاریخچه زبان HTML

در سال 1990 اولین مرورگرها تولید و عرضه شدند. پس از ایجاد مرورگر، مهندسان نرم افزار به فکر پیاده سازی زبان نشانه گذاری و طراحی در مرورگرها افتادند. در ابتدا، Berners-Lee کد HTML اصلی را یک معرفی غیررسمی در نظر گرفت تا محققان بیشتری به این زبان نشانه گذاری علاقه مند شوند. سرانجام در سال 1993 IETF این زبان را به صورت رسمی با نام SGML معرفی کرد. البته تیم بلافاصله تصمیم گرفت نام این زبان را به HTML تغییر دهد و نام HTML برای این زبان نشانه گذاری انتخاب شد.

تفاوت بین زبان برنامه نویسی و زبان HTML چیست؟

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

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

کاربرد زبان HTML چیست؟

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

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

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

منظور از رمزگشایی تگ های HTML چیست؟

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

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

HTML5 چیست؟

زبان HTML از بدو تولد تاکنون دستخوش به روز رسانی های زیادی شده است. از نسخه SGML گرفته تا HTML1، HTML2 و HTML4.01 که نسخه های مختلف این زبان نشانه گذاری هستند. اما آخرین نسخه از زبان HTML نسخه کاملا استاندارد و حرفه ای HTML5 می باشد که در سال 2014 به صورت رسمی معرفی و مورد استفاده قرار گرفت و اکنون اکثر وب سایت های موجود در اینترنت از این نسخه HTML برای طراحی صفحات خود استفاده کرده اند.

مزایا و معایب زبان HTML

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

مزایای HTML

html چه مزایایی دارد؟

معایب HTML

معایب html چیست؟

چه رابطه ای بین JS، CSS و HTML وجود دارد؟

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

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

آیا HTML دشوار است؟

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

یک فایل HTML بسازید و بسازید

همانطور که گفته شد، زبان نشانه گذاری فرامتن یک زبان نشانه گذاری مبتنی بر قانون است. پیروی از قوانین می تواند به سیستم کامپیوتری بگوید که این فایل یک فایل HTML است. بنابراین برای ایجاد یک فایل HTML کافی است ابتدا یک فایل TEXT معمولی در ویندوز ایجاد کرده و پسوند آن را از txt به html تغییر دهید. تغییر پسوند اولین کاری است که برای ایجاد یک فایل HTML باید انجام دهید.

سپس این فایل را با نرم افزار notepad باز کنید و ساختار استاندارد HTML5 را در آن بنویسید. البته معمولاً برای کدنویسی HTML از ویرایشگرهای کد قوی تری نسبت به Notepad استفاده می شود. ویرایشگرهایی مانند VS Code یا Dream Weaver که اکثر طراحان سایت از آنها برای کدنویسی صفحات وب خود استفاده می کنند. پس از باز کردن فایل html، باید تگ های اصلی و استاندارد زیر را در فایل خود قرار دهیم:

HTML چیست؟

معرفی تگ های HTML

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

تگ های HTML چیست؟

در تصویر بالا به تگ های html اشاره کرده ایم، در زیر به معرفی کامل استفاده و عملکرد آنها می پردازیم.

منظور از ویژگی در HTML چیست؟

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

دانشجویار

نمونه ای از یک سند HTML

ممکن است علاقه مند به مشاهده یک سند HTML باشید. در واقع، هر وب سایتی که استفاده می کنید (حتی این صفحه از سایت دانشجویی) یک سند HTML کاملاً آماده در نظر گرفته می شود که می توانید آن را بررسی کنید. برای بررسی ساختار HTML یک وب سایت، کافی است آن وب سایت را در مرورگر Google Chrome باز کنید و در هر نقطه از صفحه کلیک راست کنید. حال با کلیک بر روی گزینه چک عناصر تمامی کدهای HTML آن صفحه برای شما نمایش داده می شود. اکنون می توانید برچسب های موجود در این صفحه را تجزیه و تحلیل کنید.

نتیجه مقاله HTML چیست؟

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

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