این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

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

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

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

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

Free-Learn

تگ ها در HTML

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

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

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

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

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

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

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

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

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

 

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

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

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

Free-Learn

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

در ادامه آموزش کامل ساختار یک فایل HTML میخوایم با دستورالعمل <DOCTYPE!> آشنا بشیم و ببینیم چی هستش و کاربردش چیه!؟

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

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

حالا این کاربرد ممکنه برای منو شما به عنوان انسان باشه یا هم ممکنه برای موتورهای جستجوگر ( مثه گوگل ) یا مثلا برای مرورگرهای اینترنتی ( مثه فایرفاکس یا گوگل کروم ) باشه.

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

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

پس در مجموع ما با مشخص کردن نوع صفحه وب ( DocType ) داریم به مرورگرها میگیم که مثلا این صفحه وب از نسخه ۵ استفاده میکنه، تا مرورگر حواسش باشه تا بتونه صفحه وب مارو به نسبت اون استاندارد مشخص شده نمایش بده.

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

این دستور باید در ابتدای یک صفحه HTML یعنی قبل از هر تگی در 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 اش رو به صفحه اضافه کنید.

مثال شماره ۱ : استفاده از دوک تایپ ( یا DocType ) نسخه HTML5

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب