طراحی سایت

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

HTML چیست؟

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

HTML یک زبان برنامه نویسی نیست بلکه مجموعه از تگ هاست که به کمک آن ظاهر یک سایت را طراحی میکنند.

 

تاریخچه HTML

در سال ۱۹۹۱، Tim Berners-Lee اولین نسخه HTML را طراحی کرد، با گذشت زمان نسخه های دیگر HTML و در سال ۱۹۹۹، HTML4 معرفی شد. در سال ۲۰۱۴ از HTML5 رو نمایی شد که در این آپدیت تگ های جدیدی اضافه و در طراحی سایت ها ساختار منظمی ایجاد شد.

یادگیری زبان HTML به شما کمک می کند تا با یک ویرایشگر ساده، یک صفحه وب برای خود طراحی کنید. به کمک تگ های HTML می توانید( متن، جدول، تصویر، ویدئو و…) در یک صفحه وب قرار دهید.

HTML چیست؟

طراحی هر صفحه وب دو مرحله دارد:

  • ساخت قالب کلی صفحات وب به کمک HTML
  • ایجاد جذابیت ظاهری مانند رنگ متن، رنگ پس زمینه و… به کمک CSS

تگ HTML

تگ ها با علامت <> مشخص می شوند. تمام عناصر در اچ تی ام ال به کمک تگ ها پیاده سازی میشوند. تگ ها مشخص میکنند که عناصر در صفحه دارای کدام ویژگی ( متن، تصویر و.. ) باشند.

نمونه تگ

<p>این یک تست است</p>

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

<DOCTYPE html!>

<html>

<title>

<title/>

<body>

<body/> 

<html/>

توضیحات تگ های HTML

تگ <DOCTYPE html!>: این تگ مشخص می کند که ما از کدام نسخه HTML استفاده می کنیم هر سندی با این تگ باید آغاز شود.

تگ < html>: تمام تگ های HTML داخل این تگ قرار میگیرند به عبارتی ریشه‌ی html است.

تگ <title>: عنوان اصلی صفحه را مشخص می کند.

تگ <body>: هر چیزی که داخل این تگ قرار بگیرد در صفحه وب سایت نمایش داده می شود.

 

یک تمرین کوچک برای فهم بیشتر HTML

 برای درک بهتر تگ های بالا ابتدا Notpad را اجرا کنید و کد درون کادر بالا را در آن قرار دهید.

آموزش HTML

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

حال می خواهیم یک عنوان و یک پاراگراف درون صفحه وب سایت خود ایجاد کنیم. همانطور که در قسمت قبل گفتیم هر چیزی درون تگ body نوشته شود در صفحه وب ما نمایش داده می شود. پس باید تگ های مربوط به عنوان و پاراگراف را درون تگ body قرار دهیم. مانند تصویر زیر عنوان را در تگ  <h2></h2> و پاراگراف را در تگ <p></p> می نویسیم.

قرار دادن کد HTML در Notepad

حال Note pad را مانند تصویر زیر ذخیره می کنیم دقت کنید که نام فایل را html. یا htm. قرار دهید و save as type  را بر روی all file تنظیم کنید و Encoding را بر روی UTF-8 قرار دهید. حال بر روی دکمه ی save کلیک کنید.(فایل های HTML با پسوند htm. یا html. در کامپیوتر ذخیره می شوند و توسط اکثر مرورگر ها پشتیبانی می شوند).

نحوه ذخیره کدHTML درnotepad

به محلی که Note pad را ذخیره کردید بروید و آن را در یکی از مرورگر ها اجرا کنید.

اجرای کد HTML

شما به کمک کد HTML بدنه کلی یک سایت را ساختید.

نتیجه نهایی کد HTML

مزایای HTML

  1. یادگیری آسان
  2. قابل اجرا در همه ی مرورگر ها
  3. با زبان های سمت سرور مانند PHP ادغام می شود

معایب HTML

  1. به زبان های سمت سرور وابسته است
  2. از مرورگر های قدیمی پشتیبانی نمی کند
  3. هر صفحه باید بطور جداگانه طراحی شود

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

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