HTML چیست؟

HTML  اسکلت تمام صفحات وب است . HTML اغلب اولین زبانی است که توسط بازاریابان و طراحان وبسایت ها آموخته میشود .

HTML ساختاری را برای ظاهر کردن و نمابش دادن محتوایی همچون عکس ها ، متن ها یا ویدیوها بر روی وبسایت ها فراهم میکند .

یادگیری  HTML  اولین قدم برای ایجاد کردن وبسایت ها میباشد . در قسمت های بعد شما میتوانید صفحات  HTML  را با استفاده از  css و javascript لایه گزاری کنید و به آن به اصطلاح رنگ و رو بدهید و صفحاتی دینامیکی و زیبا را طراحی کنید ، اما در حال حاضر ما قصد داریم بر روی  نحوه اضافه کردن  و اصلاح کردن محتوای اولیه و اساسی یک صفحه مانند متن ، عکس ها  و ویدیوها تمرکز کنیم .نگران نباشید که صفحاتتون در ابتدای کار زشت و ساده به نظر میرسند  …

HTML مخففِ عبارت Hyper Text Markup Language می باشد :

  • Markup language یا زبان نشانه گذاری یک زبان کامپیوتر است که ساختار و ارائه یک متن خام را تعریف میکنند
  • در HTML ، کامپیوتر میتواند متن خامی که تحت عنوان HTML elements هستند را تفسیر کنند .
  • HyperText متن نمایش داده شده در یک کامپیوتر یا دستگاه است که دسترسی به متن دیگر را از طریق لینک ها فراهم می کند. همچنین به عنوان  hyperlinks شناخته میشوند.
  • HTML ساختار صفحات وب را با استفاده از نشانه گذاری توصیف میکند.
  • عناصر HTML ( HTML elements) ، بلوک های تشکیل دهنده صفحات HTML هستند .
  • عناصر HTML(HTML elements) ، با برچسب ها (tags)  نمایش داده میشوند.
  • برچسب های HTML  یا همان  HTML tags محتویاتی مانند “heading” یا “عنوان صفحه”،”paragraph”یا “پاراگراف” ، “table”یا “جدول “و…را برچسب گزاری میکنند .
  • مرورگرها یا همان “browsers” تگ های HTML  رو نمایش نمیدهند بلکه از آنها برای رندر کردن محتوای صفحات استفاده میکنند .
 ممکنه که یه سری از موارد بالا براتون غیر قابل فهم باشه اما اصلا نگران نباشید چون در ادامه ی کار با تمام این اصطلاحات آشنایی پیدا خواهید کرد.

 

یک سند ساده HTML

<!DOCTYPE HTML>
<HTML>
<head>
<title>Page Title</title>
</head>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</HTML>

توضیح مثال بالا:

<!DOCTYPE HTML> مشخص میکنه که این فایل یا سندی که ما داریم از نوع HTML5  هست.

المنت <HTML>  المنت اصلی صفحات HTML  هستند .

المنت <head>  شامل متا اطلاعاتی در مورد سند است . (در ادام متوجه منظور از متا اطلاعات خواهید شد پس نگران نباشید.)

المنت <title> یه عنوانی رو برای سند ما مشخص میکند .

المنت <body> شامل تمام محتواهایی هستند که ما در صفحه مشاهده میکنیم در واقع هر آنچه که در صفحات وب مشاهده میکنیم در این المنت نوشته شده اند.

المنت <h1> یک عنوان بزرگ را تعریف میکند .

المنت <p> یک پاراگراف را مشخص میکند .

HTML tags  (برچسب های HTML)

HTML tags اسم المان هایی هست که داخل  “علامتهای کوچکتر و بزرگتر”(angle brackets) قرار گرفته اند. به صورت زیر :

 

<tagname> محتوا ها داخل این دو تگ قرار میگیرند </tagname>

 

  • HTML tags معمولا به صورت جفت می آیند مانند  :    </p>محل قرار گیری محتوا<p>
  • در tag هایی که به صورت جفت می آیند به اولین  tag ، start tag و به tag دومی end tag گفته میشود
  • End tag دقیقا مانند start tag  نوشته میشود تنها فرق این هست که یک forward slash  قبل از اسم  tag  قرار داده میشود .
 

نکته : start tag همچنین با عنوان  opening tag و  end tag  هم با عنوان  closing tag نامگذاری میشوند .

 

Web browsers  (مرورگرها)

هدف مرورگرها مانند Chrome ، IE ، FireFox  ، Safari  و … خواندن صفحات HTML  و نمایش دادن آنهاست .

مرورگرها HTML tags را نمایش نمیدهند بلکه  از آنها برای چگونه نمایش دادن صفحات وب استفاده میکنند .

ساختار صفحات  HTML

شکل زیر تجسمی از ساختار یک صفحه  HTML است .

<head>

 

<title>عنوان صفحه</title>

 

 

</head>

<HTML>

<body>

 

  <h1>این یک عنوان است .</h1>
<p>این یک پاراگراف است</p>

 

<p>این پاراگراف دیگری است </p>

 

 

 

 

 

 

 

 

 

</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

</HTML>

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

اعلامیه <!DOCTYPE>

 

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

این تگ فقط یکبار باید ظاهر شود و آن هم در بالای صفحه است و باید قبل از هر HTML tag  آن را اعلام کنیم .

<!DOCTYPE> حساس به حروف بزرگ و کوچک نیست و میتوانیم آن را با حروف کوچک نیز تعریف کنیم یعنی <!doctype> هم قابل قبول است و اشکالی به کار ما وارد نمیشود .

نحوه اعلام <!DOCTYPE> برای  HTML5  به صورت زیر میباشد :

<!DOCTYPE  HTML>

HTML versions

از زمان اولین روزهای دنیای وب ، نسخه های متعددی از  HTML   به وجود آمدند که آخرین نسخه آن HTML5 می باشد:

سال ورژن
1991 HTML
1995 HTML 2.0
1997 HTML3.2
1999 HTML 4.01
2000 XHTML
2014 HTML5

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

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