آموزش HTML - بررسی اجمالی

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

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

ساختار پایه HTML

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

<!DOCTYPE html>
<html>

   <head>
      <title>عنوان سند</title>
   </head>
	
   <body>
      <h1>سربرگ صفحه</h1>
      <p>محتوا و پارگراف صفحه در این قسمت قرار می گیرد</p>
   </body>
	
</html>

این کد در مرورگر به شکل زیر نمایش داده خواهد شد :

مثال ساختار HTML

راستچین کردن صفحه HTML و نمایش فارسی

برای این که صفحه HTML را فارسی کنیم و محتوای صفحه به صورت راست به چپ نمایش داده شود کافیست داخل تگ html در بالای سند ، کد dir برابر با rtl قرار بدیم . مثال بالا را به این شکل تکمیل و راستچین می کنیم . این کد و این ویژگی را در درس مربوط صفات HTML بیشتر بررسی خواهیم کرد .

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>عنوان سند</title>
   </head>
	
   <body>
      <h1>سربرگ صفحه</h1>
      <p>محتوا و پارگراف صفحه در این قسمت قرار می گیرد</p>
   </body>
	
</html>

این کد در مرورگر به شکل زیر نمایش داده خواهد شد :

نمونه راستچین نوشتن در HTML

تگ های HTML

همانطور که قبلا گفته شد، HTML یک زبان نشانه گذاری است و از تگ های مختلف برای قالب بندی محتوا استفاده می کند. این تگ ها در داخل علامت بزرگتر و کوچکتر ریاضی <> قرار دارند. به جز تعداد کمی از تگ ها، بیشتر تگ ها دارای جفت تگ جهت بستن خود هستند. تگ دوم یا همان جفت تگ ، جهت مشخص کردن محل پایان تگ استفاده می شود . به عنوان مثال،تگ <html> دارای تگ بسته <html/> و تگ <body> دارای تگ بسته شدن <body/> و ... است.

مثال بالا در سند HTML از تگ های زیر استفاده می کند -

	تگ و توضیحات
1	<!DOCTYPE...> این تگ نوع فایل و نسخه HTML را مشخص می کند.
2	<html> این تگ سند کامل HTML را در بر می گیرد و شامل سرصفحه سند است که با <head>...</head> و بدنه سند که با تگ body نشان داده می شود.
3	<head> این تگ نشان دهنده هدر سند است که می تواند سایر تگ های HTML مانند <title>، <link> و غیره را نگه دارد.
4	<title> تگ <title> در داخل تگ <head> برای ذکر عنوان سند استفاده می شود.
5	<body> این تگ نمایانگر بدنه سند است که تگ های HTML دیگر مانند <h1>، <div>، <p> و غیره را نگه می دارد.
6	<h1> این تگ نشان دهنده تیتر است.
7	<p> این تگ نشان دهنده یک پاراگراف است.

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

ساختار فایل HTML

یک سند(فایل) معمولی HTML ساختار زیر را خواهد داشت :

<html>
   
   <head>
      تگ های مربوط به سربرگ سند
   </head>
   
   <body>
      تگ های مربوط به بدنه سند
   </body>
   
</html>

تگ‌های سربرگ و بدنه را در درس های بعدی به طور مفصل مطالعه خواهیم کرد

مقدمه و معرفی دوره آموزش HTML - درس قبلی

درس بعدی - ساخت اولین صفحه وب