کد خبر: ۷۹۹۴۳۴

تاریخ انتشار: ۰۲ آبان ۱۴۰۱ - ۱۳:۳۸

صفحه نخست » IT » اخبار IT و فناوری

آموزش کامل ساختار یک فایل HTML

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

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

ساختار یک فایل HTML

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

<!DOCTYPE html> <html> <head> مواردی که میتونن در قسمت هد قرار بگیرن </head> <body> مواردی که میتونن در قسمت بادی قرار بگیرند </body> </html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

</body>

</html>

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

خب در ادامه میخواهیم با دستورات موجود در شکل بالا آشنا شویم، اینکه این دستورات چه هستند و چکار میتونن بکنند!؟

دستور	توضیح
<!DOCTYPE html>	یک دستورالعمل که به مرورگرها و موتورهای جستجوگر میگه این صفحه از نسخه ۵ اچ تی ام ال استفاده میکنه
<html>	تگ ریشه و ستون اصلی یک صفحه اچ تی ام ال
<head>	تگ هد یا سره یک صفحه اچ تی ام ال که اطلاعاتی درباره صفحه به مرورگر و موتورهای جستجوگر ارائه میده
<body>	تگ بادی یا بدنه اصلی یک صفحه اچ تی ام ال هرچیزی که در این بدن قرار بگیرد در مرورگر نمایش داده می شود

اگر دوباره به دستورات بالا توجه نمایید، تگی که باز شده است در پایان و با توجه به اولویت باز شدنش بسته شده است، برای مثال دستور <html> اولین تگی است که باز شده و در آخر نیز با <html/> بسته شده است.

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

Free-Learn

تگ ها در HTML

تگ ها ( Tag ) یا عناصر یاهم بهشون میگن برچسب، دستور یا کدی هست که با استفاده از اونا میتونیم محتوا ( متن ، عکس ، ویدئو و.. ) رو در یک صفحه وب به نمایش دربیاوریم، که ان شاالله جلوتر که برید میتونید آموزش تک به تک تگ های HTML رو مشاهده نمایید. ( لیست کامل تگ های HTML )

نحوه نوشتن یا شکل کلی یک تگ در زبان HTML‌ بصورت زیر می باشد :

<Tag_Name>محتوایی که باید در مرورگر نمایش داده شود</Tag_Name>

1	<Tag_Name>محتوایی که باید در مرورگر نمایش داده شود</Tag_Name>

اول یک علامت کوچکتری > گذاشته سپس نام تگ را می نویسیم سپس با علامت < آنرا می بندیم، حال محتوای مورد نظرمون رو وارد میکنیم و در نهایت تگی که در ابتدا باز کردیم میبندیم، برای بستن یک تگ نیز باید اول علامت > گذاشته سپس کاراکتر اسلش / و در نهایت نام تگی که ابتدا باز کردیم را مینویسیم و در پایان هم علامت < را میگذاریم.

تگ های HTML بطور کلی ۲ حالت دارند :

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

این نمونه از تگ ها ، هم تگ شروع دارند و هم تگ پایان ( یاهم تگ بسته بهش میگیم) ، که شکل کلی یه تگ شروع و پایان بصورت زیر می باشد :

<Start_Tag> ... </End_Tag>

1	<Start_Tag> ... </End_Tag>

اون Start_Tag میشه تگ شروع و اون End_Tag میشه تگ پایانی

مثال از یک تگ که دارای تگ شروع و پایان می باشد :

سایت آموزشی فری لرن

1	<p>سایت آموزشی فری لرن</p>

مثلا تگ P تگی هست که هم تگ شروع داره و هم تگ پایان، به همین سادگی

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

حالا یسری از تگ ها هستن که تگ پایانی ندارند، یعنی فقط تگ شروع دارند ، مثه مثلا تگ img یا مثلا br و..

مثال از یک تگ که فقط دارای تگ شروع می باشد :

<img src="MyImage.jpg"> یا <input type="text"> یا

یا

یا

Free-Learn

دستورالعمل <DOCTYPE!> در HTML

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

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

هدف استفاده از این دستورالعمل برای بحث بهینه بودن صفحه وبمون خیلی مهم می باشد پس شماهم همیشه ازش استفاده کنید.

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

<!doctype html>

1	<!doctype html>

Free-Learn

نسخه های زبان HTML

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

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

HTML5 :

<!DOCTYPE html>

HTML 4.01 Strict :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional :

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

HTML 4.01 Frameset :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional :

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

XHTML 1.0 Frameset :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

این یعنی اگه مثلا میخواستید از HTML5 استفاده کنید خب باید DOCTYPE اش رو به صفحه اضافه کنید.

مثال شماره ۱ : استفاده از HTML5

<!DOCTYPE html> <html> <head> <title>سایت آموزشی فری لرن</title> </head> <body> سایت آموزشی فری لرن </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>سایت آموزشی فری لرن</title>

</head>

<body>

سایت آموزشی فری لرن

</body>

</html>

مثال شماره ۲ : استفاده از HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>عنوان صفحه در مرورگرها</title> </head> <body> Salam Man Sadegh Hastam. </body> </html>