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

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

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

Free-Learn

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

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

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

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

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

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

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

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

Free-Learn

نحوه نمایش سورس کد یک صفحه وب

کمی بالاتر به این اشاره کردم که ساختار یا شکل کلی تمامی صفحات وب همانند دستوراتی می باشد که کمی بالاتر با آن آشنا شدید، حال برای اینکه این حرف ثابت شود میخوام نحوه نمایش سورس کد یا Source code یک صفحه وب را به شما آموزش دهم تا بتوانید مشاهده نمایید که ساختار کلی تمامی سایت های اینترنتی به چه شکل می باشد.

بفرض مثال میخواهیم ببینیم همین صفحه ای که الان شما در حال مطالعه آن هستید ساختارش به چه شکل می باشد!؟ نه فقط این صفحه و یا سایت آموزشی فری لرن بلکه شما میتوانید در هر صفحه ای از هر سایتی که بخواهید از طریق روش زیر سورس کد آن صفحه را مشاهده نمایید.

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

خب تموم شد! به همین راحتی.. حالا اگه به صفحه ای که براتون باز میشه توجه نمایید میبینید که اول و آخر اون صفحه به ترتیب <html> و <html/> و دیگر مواردی که در دستورات بالا با آنها آشنا شده اید قرار دارد.

Free-Learn

تگ ها در HTML

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

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

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

برای مثال لطفا به تگ های زیر توجه نمایید :

در دستورات بالا ما سه تگ را میبینیم، اولین تگ، تگ <p> معروف به تگ پاراگراف و دو تگ بعدی تگ های تیتر می باشند، اصلا نگران نباشید چون در بخش های بعدی بطور کامل با این تگ ها آشنا خواهید شد.

Free-Learn

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

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

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

Free-Learn

نسخه های زبان 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”>

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

Free-Learn

  • خلاصه ی این بخش
  • قسمت Head یا سَرِ یک صفحه وب برای قرار دادن مواردی همچون عنوان صفحه در مرورگرها،فایل های سی اس اس،فایل های جاوااسکریپت،متاداده ها می باشد.
  • برای نمایش محتوا(تصاویر،متون،جدول ها و..) درون مرورگرها باید آنها را در قسمت Body یک صفحه وارد کرد.
  • یک تگ بطور کلی همیشه دارای ۲ قسمت است، قسمت اول (تگ شروع) و قسمت دوم (تگ پایان)، مگر اینکه تگ مورد نظر در دسته ی تگ های تنها باشد.
  • دستورالعمل <DOCTYPE!> به مرورگرها و موتورهای جستجوگر میفهماند که یک صفحه از چه نسخه ای از HTML استفاده میکند.
  • وجود دستورالعمل <DOCTYPE!> در یک صفحه HTML الزامی نیست ولی سعی کنید همیشه و در اولین اولویت از این دستور استفاده نمایید.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید