مقدماتی از اچ تی ام ال:

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

HTML از چهار حرف تشکیل شده و مخفف چهار کلمه است:

H: Hyper (ابر)

T: Text (متن)

M: Markup (نشانه گذاری)

L: Language (زبان)

HyperText Markup Language | زبان نشانه گذاری ابرمتن

این زبان در اواخر سال 1991 توسط یکی از دانشمندان بریتانیایی علوم کامپیوتر یعنی سر تیموتی جان برنرز-لی ارائه شد. امّا HTML2 که اولین خصوصیات استاندارد HTML را داشت در سال 1995 منتشر شد. و نسخه چهارم HTML در سال 1999 توسعه یافت که بسیار مورد توجه قرار گرفت و به طور گسترده ای مورد استفاده واقع شد اما در حال حاضر از زبان HTML5 که یک پروژه ی گسترش برای HTML4.01 بود و در سال 2012 تکمیل شد، استفاده می شود.

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

قبل از اینکه این آموزش ها را شروع کنید بهتر است دانش مقدماتی درباره ی سیستم عامل ویندوز یا لینوکس وغیره داشته باشید، علاوه برآن آشنایی با موارد زیر نیز بسیار کمک کننده است:

1- تجربه کار با هر ویرایشگر متنی مانند تکست ادیتور، نت پد++ یا ادیت پلاس و غیره.

2- نحوه ایجاد دایرکتوری ها و فایل ها برروی کامپیوتر.

3- آشنایی با فرمت های مختلف چندرسانه ای ها مانند تصاویر، ویدئوها و موسیقی ها مثل mp3, mp4, jpeg, png و غیره.

4- نحوه تایپ یک عبارت متنی در فایل و ذخیره آن برروی کامپیوتر.

5- حرکت در دایرکتوری های مختلف و کار با محتویات آنها.

اچ تی ام ال چیست؟

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

ابرمتن یا HyperText به شیوه ای که صفحات وب (اسناد HTML) با یکدیگر ارتباط یا پیوند داده می شوند اشاره دارد. به عبارت دیگر هر لینک یا پیوندی که درون وبسایت ها مشاهده می کنید یا حتی همان نتایجی که گوگل در جواب جستجوهایتان نمایش می دهد نوعی ابرمتن هستند.

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

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

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

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

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

ساخت یک سند اچ تی ام ال ساده

شما در جدول زیر یک نمونه از اچ تی ام ال نویسی را مشاهده می کنید و در قسمت زیرین آن نتیجه تصویری آن را در یک مرورگر وب مشاهده می کنید.

توجه: در بخش های بعدی به طور مفصل در مورد تگ های زیر توضیح خواهیم داد.

<!DOCTYPE htm>

<html>

<head>

<title>عنوان پنجره</title>

</head>

<body>

<h1>اولین عنوان یک عنوان مهم</h1>

<p>یک پاراگراف متنی</p>

</body>

</html>

باید بدانید که:

در مثال بالا ما از هفت تگ اچ تی ام ال استفاده کردیم و یک صفحه وب ساده ساختیم که در مرورگر نمایش داده شد. همانطور که گفتیم در زبان اچ تی ام ال از تگ های مختلف برای قالب بندی استفاده می کنیم. این تگ ها درون یک براکت زاویه (کوچکتر / بزرگتر) قرار می گیرند در واقع فرمول نوشتن تگ ها در این زبان به این شکل است: <نام تگ>. به غیر از چند تگ بقیه تگ ها دارای یک تگ بسته نیز هستند. به مثال بالا دقت کنید، ما به غیر از <!DOCTYPE HTML> بقیه ی تگ ها را بستیم، برای بستن یک تگ باید علامت فوروارد اسلش (/) را قبل از نام تگ وارد کنیم. به عنوان مثال، تگ <html> با استفاده از تگ </html>و تگ <body> با استفاده از تگ </body> بسته می شود.

به عبارت دیگر: تقریبا هر عنصر اچ تی ام ال دارای مقداری است که باید آن مقدار را در میان تگ باز و بسته مربوطه قرار داد.

توضیح تگ های استفاده شده در مثال

<!DOCTYPE html>: این تگ به مرورگر می فهماند که ما از کدام نسخه اچ تی ام ال استفاده می کنیم. این تگ نشان می دهد که در حال حاضر صفحه ما با زبان اچ تی ام ال 5 نوشته شده است.

<html>: عنصر اصلی یک سند اچ تی ام ال است، یعنی این تگ محتوای کامل سند اچ تی ام ال را شامل می شود. بخش تگ های هد (<head>…</head>) و بخش تگ های بادی یا بدنه (<body>…</body>) در میان تگ باز و بسته html قرار می گیرد.

<head>: این تگ شامل تعدادی تگ دیگر است که به اطلاعات متا (Meta Information) مشهور است. اطلاعات متا حاوی داده هایی همچون توضیحات صفحه، عنوان صفحه، لینک و غیره است (معمولا از این بخش سند برای بهینه سازی موتورهای جستجو استفاده می شود).

<title>: تگ <title> در داخل تگ <head> استفاده می شود. این عنصر عنوان سند را مشخص می کند، که در مرورگر ها به نام عنوان تب یا زبانه شناخته می شود.

<body>: این تگ نشان دهنده بنده ی سند است که بخش اصلی تگ های اچ تی ام ال مانند <p>, <div>, <h1> و غیره را شامل می شود. در واقع این عنصر حاوی محتوایی است که در صفحه وب قابل مشاهده است.

<h1>: این تگ یک عنوان را نشان می دهد، عنصر اچ 1 یک عنوان بزرگ و مهم را تعریف می کند.

<p>: این تگ یک پاراگراف (عبارات متنی) را نشان می دهد، عنصر پی می تواند شامل کلیه حروف به تمامی زبان ها و علائم نگارشی باشد.

تگ های اچ تی ام ال

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

شما می توانید با فراگیری تگ های اچ تی ام ال یک صفحه وب زیبا که شامل، لینک، محتوای متنی، ویدئو، موسیقی و تصویر باشد را بسازید.

نکته ای که باید در مورد تگ ها در نظر داشته باشید این است که:

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

ساختار یک سند اچ تی ام ال و مرورگر وب

هر سند وب شامل ساختار معمولی زیر است:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

تگ های مربوط به بدنه اصلی سند

</body>

</html>

درباره تگ اعلامیه بیشتر بدانید

همانطور که گفته شده <!DOCTYPE> به مرورگر وب می فهماند که ما از کدام نسخه ی اچ تی ام ال در سند فعلی استفاده می کنیم. این ویژگی باعث می شود تا به مرورگر کمک کنیم صفحات وب را صحیح تر نمایش دهد.

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

نسخه فعلی اچ تی ام ال 5 است و برای اینکه به مرورگر بفهمانیم از اچ تی ام ال پنج استفاده می کنیم باید از تگ <!DOCTYPE html> استفاده کنیم.

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

به طور کلی 6 نسخه از این زبان وجود دارد که عبارتند از:

-         HTML

-         HTML 2

-         HTML 3.2

-         HTML 4.01

-         XHTML

-         HTML 5

قبل از اینکه به سراغ آشنایی با تگ های اصلی و مقدماتی برویم شما را با نوشتار HTML آشنا می کنیم.

جلسه بعد


برچسب ها

HTML | CSS | جاوا اسکریپت | اس کیو ال | پی اچ پی | جی کوئری | ایکس ام ال | بوت استرپ | پایتون | جاوا | وب |
آخرین به روزرسانی این مطلب:

2019-04-03T17:06:15


پربازدیدترین

از اینجا می توانیدمحبوب ترین مطالب را مشاهده کنید