پرش به محتوا

اچ‌تی‌ام‌ال/مقدمه

ویکی‎کتاب، کتابخانهٔ آزاد
مقدمه بندها قلم پیوند تصاویر رسانه‌ها
فریم جدول‌بندی یادداشت‌ها تقسیم‌بندی (div) فهرست‌بندی رویدادها
سربرگ (هدر) پابرگ (فوتر) پیوند ناوبری سبک‌ها فهرست تگ‌ها ‎‏سرمتن‌ها
‎‏عنصرها

زبان نشانه‌گذاری اَبَرمتن

[ویرایش]

زبان نشانه‌گذاری اَبَرمتن (HyperText Markup Language) به اختصار زَنِگام (HTML) یک زبان استاندارد نشانه‌گذاری برای ایجاد برگه‌های وب است. زبان‌های نشانه گذاری وظیفۀ چیدمان محتوای ظاهری تارنماها را برعهده دارند. زبان اچ‌تی‌ام‌ال، یک زبان رسمی برای نشانه‌گذاری (طرّاحی) برگه‌های تارنماها است. بدین دلیل به آن زبان نشانه‌گذاری استاندارد گفته می‌شود.

یک زبان نشانه‌گذاری دیگر با نام سی‌اس‌اس (شیوه‌نامۀ آبشاری یا Cascading Styleshett) وجود دارد که برای زیباسازی برگه‌های وب مورد استفاده قرار می‌گیرد. سی‌اس‌اس بدون اچ‌تی‌ام‌ال، توانایی انجام هیچ کاری را ندارد و فرمان‌های سی‌اس‌اس در برچسب‌های اچ‌تی‌ام‌ال اعمال می‌شوند.

  • ‎اچ‌تی‌ام‌ال، مخفف زبان نشانه‌گذاری ابرمتن (به انگلیسی: ‏Hypertext Markup Language‏) است
  • ‎اچ‌تی‌ام‌ال، ساختار برگه‌های وب را با استفاده از نشانه‌گذاری توصیف می‌کند
  • ‎عنصرهای اچ‌تی‌ام‌ال، بلوک‌های ساختمان برگه‌های اچ‌تی‌ام‌ال هستند
  • ‎عنصرهای اچ‌تی‌ام‌ال به‌صورت برچسب درج می‌شوند

برچسب‌های اچ‌تی‌ام‌ال

[ویرایش]

برچسب‌های اچ‌تی‌ام‌ال، عناصر محصور شده توسط براکت محسوب می‌شوند:

<tagname>
محتوای برچسب‎
</tagname>

  • ‎برچسب‌های اچ‌تی‌ام‌ال معمولا به‌صورت دوتایی مانند ‏‎<p>‎‏ و ‏‎</p>‎‏ هستند
  • ‎اولین برچسب در یک جفت، برچسب شروع‌کننده و برچسب دوم، برچسب پایانی است
  • ‎برچسب پایانی مانند برچسب شروع‌کننده است، اما پیش‌از نام برچسب پایانی، یک اسلش (/) وارد می‌شود

فهرست برچسب‌های اچ‌تی‌ام‌ال را می‌توانید در اینجا مشاهده کنید.

ظاهر (Frontend) و باطن (Backend)

[ویرایش]

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

پیش‌نیازها

[ویرایش]

برای یادگیری اچ‌تی‌ام‌ال به هیچ نرم‌افزار مهمی نیاز ندارید! شما درکل به دو نرم‌افزار نیاز خواهید داشت که در بیشتر کارگزارها وجود دارند! فقط به یک ویرایشگر متن (نه واژه‌پرداز) و یک مرورگر نیاز دارید. شما حتی به اینترنت هم نیازی نخواهید داشت!

شما می‌توانید از نرم‌افزارهای پیش‌فرض کارگزار خودتان که در جدول زیر آمده استفاده کنید:

کارگزار
ویندوز
ویندوز

مک‌او‌اس
مک‌او‌اس
اوبونتو
اوبونتو
ویرایشگر پیش‌فرض نوت‌پد (Notepad) تکست‌ادیت (TextEdit) ویم (Vim)
مرورگر پیش‌فرض اینترنت‌اکسپلورر (Internet Explorer) تا ویندوز ۸ و اج (Edge) در ویندوز ۱۰ سافاری (Safari) فایرفاکس (FireFox)

البته اگر می‌خواهید پا را فراتر از دلبستن به یک برنامۀ ساده بدهید و با یک نرم‌افزار پیشرفته کار کنید، پیشنهاد می‌شود از ویرایشگر نوت‌پد++ (Notepad++) و مرورگر گوگل‌کروم (Google Chrome) استفاده کنید. (البته این تنها یک پیشنهاد است و هیچ اجباری بر شما وارد نیست)

ساختار سند اچ‌تی‌ام‌ال

[ویرایش]

در زیر ساختار یک سند اچ‌تی‌ام‌ال تجسم شده است:

<html>
<head>
<title>‎نام برگه</title>

</head>

<body>
<h1>‎این یک سرتیتر است‎</h1>
<p>‎این یک بند است.‏‎</p>
<p>‎این یک بند دیگر است.‏‎</p>

</body>

</html>


‎توجه: فقط محتوای درون برچسب ‏‎<body>‎‏ (قسمت سفید) در مرورگر نمایش داده می‌شود.

آگاه‌ساز ‏‎<!DOCTYPE>‎

[ویرایش]

آگاه‌ساز ‏‎<!DOCTYPE>‎‏ نوع و نگارش سند را مشخص کرده و به مرورگر کمک می‌کند تا برگه‌های وب را به درستی نمایش دهد.

این آگاه‌ساز باید فقط یک‌بار در ابتدای هر سند درج شود (پیش‌از برچسب ‏‎<html>‎‏)

آگاه‌ساز ‏‎<!DOCTYPE>‎‏ به کوچک یا بزرگ‌بودن حروف حساس نیست.

آگاه‌ساز ‏‎<!DOCTYPE>‎‏ برای ‏HTML5‏

<!DOCTYPE html>

نگارش‌های اچ‌تی‌ام‌ال

[ویرایش]

HTML5 ششمین نسخۀ از نسخه های HTML است. این نسخه در سال 2014 ساخته شد. یادگیری HTML5 بسیار آسان تر از نسخه های پیشین خود است. از سال 1991 تا کنون نسخه های متفاوتی از HTML عرضه شده که می توانید در فهرست زیر مشاهده نمایید:

‎سال ‎نسخه
‎۱۹۹۱‏ HTML
۱۹۹۵ HTML 2.0
۱۹۹۷ HTML 3.2
۱۹۹۹ HTML 4.01
۲۰۰۰ XHTML
۲۰۱۴ HTML 5

منابع

[ویرایش]

کاربران ویکی‌کتاب فارسی