مقدمه - اچ تی ام ال چیست؟ :: طراحی وب سایت کتابخانه

مقدمه - اچ تی ام ال چیست؟

شنبه, ۲۳ خرداد ۱۳۹۴، ۱۱:۱۷ ق.ظ

زبان اچ تی ام ال (HTML-Hyper Text Markup Language) زبان اصلی و پایه مورد استفاده در صفحات وب است. همانطور که از نام این زبان مشخص است، زبان اچ تی ام ال یک زبان نشانه گذاری (Markup) است؛ به این معنی که یک سند را با استفاده از تعدادی تگ های از پیش تعریف شده می توانید نشانه گذاری کنید. با استفاده از این تگها می توان محتوای سند را ساختاردهی کرد و مشخص کرد که هر قسمت از محتوا چه ساختاری دارد و مربوط به چه قسمتی می باشد. مثلا با استفاده از تگها می توان مشخص کرد که قسمتی از متن به عنوان سرصفحه (header) تعریف شود و قسمت دیگر به عنوان متن پاراگراف. همانطور که می بینید زبان اچ تی ام ال یک زبان برنامه نویسی مانند زبان سی یا پرل یا چیزهایی شبیه به آن نیست، بلکه اچ تی ام ال یک زبان معنایی است که با استفاده از آن متن را نشانه گذاری می کنیم. با استفاده از این نشانه گذاری ها به مرورگر وب می فهمانیم که با هر قسمت از متن به چه طریقی برخورد کند.

یکی دیگر از توانایی های پرکاربرد و قدرتمند زبان اچ تی ام ال در آن است که می توانیم با استفاده از این زبان به اسناد دیگر لینک برقرار کنیم؛ و از لحاظ فیزیکی نیز هیچ اهمیتی ندارد که اسناد لینک شده در چه محلی قرار داشته باشند، فقط این اسناد باید در محیط وب قابل دسترس باشند. با استفاده از یو آر ال (URL- Uniform Resource Locator) می توان به تمامی منابع موجود در وب دسترسی پیدا کرد.

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

برای اینکه با ساختار یک فایل اچ تی ام ال ساده از نزدیک آشنا شوید، در زیر یک نمونه از فایل اچ تی ام ال آورده شده است:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
	font-family: "B Yekan";
	font-size: 12px;
	direction:rtl;
}
</style><title>یک صفحه ساده اچ تی ام ال</title>
</head>

<body>
<h1>اچ تی ام ال چیست</h1>
<p>
زبان اچ تی ام ال زبان اصلی و پایه مورد استفاده در صفحات وب است. <br /> 
همانطور که از نام این زبان مشخص است، زبان اچ تی ام ال یک زبان نشانه گذاری است؛ 
</p>
</body>

مثال بالا شامل دو قسمت اصلی است. قسمت مربوط به بدنه فایل که محتوای اصلی در داخل آن قرار می گیرد و قسمت مربوط به سرصفحه که اطلاعات مربوط به سند در داخل آن قرار می گیرد. در مثال بالا در قسمت سرصفحه، عنوان فایل و همچنین یک قطعه کد شیوه نامه آبشاری (CSS – Cascading Style Sheet) قرار گرفته است. در قسمت بدنه نیز یک متن قرار دارد که شامل عنوان اصلی و متن مربوط به پاراگراف می باشد.

اولین تگی (tag) که در مثال بالا به چشم می خورد، تگ اعلان (Declaration) نوع صفحه می باشد که با <!DOCTYPE html> مشخص شده است. این اعلان به مرورگر کمک می کند محتوای صفحه وب را به درستی نمایش دهد. انواع مختلفی از نسخه های اچ تی ام ال وجود دارد و مرورگر وب باید بداند که صفحه اچ تی ام ال با چه نوع و چه نسخه ای از زبان اچ تی ام ال طراحی شده است. توجه داشته باشید که اعلان نوع سند نسبت به بزرگی و کوچکی حروف حساس نیست.

اعلان های معمول مربوط به نوع سند به شرح زیر می باشند:

برای نسخه HTML5

<!DOCTYPE html>

برای نسخه HTML 4.0.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

برای نسخه XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

مطمئنا نیازی نیست که این کدها را حفظ کنید، فقط توجه داشته باشید که در هنگام ایجاد سند اچ تی ام ال مورد نظر خود، قسمت مربوط به نوع سند را به درستی اعلام کنید.

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

نسخه های مختلف زبان اچ تی ام ال
نسخه	سال
HTML	1991
HTML 2.0	1995
HTML3.2	1997
HTML4.0.1	1999
XHTML	2000
HTML5	2014

برای اینکه بتوانید محتوای نوشته شده در مثال بالا را در مرورگر خود مشاهده کنید می توانید به راحتی متن مثال بالا را کپی کرده و در داخل notepad قرار دهید و سپس با نام دلخواه و پسوند .html آن را ذخیره کنید. فقط توجه داشته باشید که قسمت save as type را all files انتخاب کنید و قسمت encoding را نیز بر روی UTF-8 تنظیم کنید تا متون نوشته شده به زبان فارسی به درستی در مرورگر شما نمایش داده شود. نتیجه مثال بالا در مرورگر وب به این شکل خواهد بود: