بنام خدا

در این سری از آموزش ها قصد داریم به طراحی سایت بپردازیم و دانش های مورد نیاز را مورد بررسی قرار بدهیم.

برای شروع طراحی وب نیاز به این است که HTML و CSS را که شالوده ی هر وبسایتی را تشکیل می دهند خوب درک کنیم. برای همین سعی می شود بدون توضیحات اضافی و خسته کننده به یادگیری این مباحث بپردازیم و به تدریج به مهارت های بالاتر و جدیدتر مثل CSS3 یا HTML5 و حتی jQuery بپردازیم.

شروع کنیم!

زبان نشانه گذاری HTML همانند اسکلت یک ساختمان برای یک سایت عمل می کند و کل محتوایی را که در یک مرورگر می بینید در بر دارد. HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فرا متنی است. پس یک زبان برنامه نویسی مثل PHP نیست.
به کدهای زیر توجه کنید.

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<h1>سر فصل</h1>
<p>یک سطر متن</p>

</body>
</html> 

 
تمام محتوای یک سایت درون همین تگ ها (tags) قرار می گیرند. به همین سادگی!
مرورگرها (browsers) این کدها را نمایش نمی دهند بلکه آنها را پردازش کرده و به صورت یک محتوا نشان می دهند.

توضیح کدها

<DOCTYPE html!> این تگ به مرورگر اعلام می کند که صفحه ما به HTML است.
<html> این عنصر (element) ریشه ی اصلی یک صفحه ی سایت است.
<head> اطلاعات متا (meta) مانند کلید واژه ها، شرح سایت، نام صفحه و غیره در این عنصر قرار می گیرد.
<title> عنوان صفحه که در بالای مرورگر نمایش داده می شود در این عنصر قرار می گیرد.
<body> این عنصر بدنه ی سایت را در بر دارد که تمام محتوای یک صفحه ی سایت را نشان می دهد.
<h1> این عنصر بزرگترین عنوان یک سرفصل را تعریف می کند که تا h6 متغیر است.
<p> این عنصر یک سطر (paragraph) را تعریف می کند.
< /> <> تمام تگ ها بین این دو علامت بزرگتر از (greater than) و کوچکتر از (lower than) قرار می گیرند که تگ بسته با یک اسلش (/) می آید.

تگ ها (tags)

تگ های HTML محتوای سایت را در بر دارند و بین دو علامت <> می آیند و برای بستن تگ علاوه بر این علامت ها یک اسلش / هم قرار می گیرد.
تگ ها معمولا به صورت جفت مانند <h1> و <h1/> می آیند. به تگ اول باز (opening tag) و به دومی بسته (closing tag) می گویند.

نکته! برخی عناصر تگ بسته ندارند و محتوایی را در بین خود جای نمی دهند و به خودی خود بسته هستند. مانند تگ </ br> که بعدا بیشتر با این نوع تگ ها آشنا می شوید.

 

ساختار کلی یک صفحه HTML

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

اعلام <DOCTYPE!>

اعلام <DOCTYPE!> به منظور اطلاع دهی به مرورگر برای نمایش درست صفحه در اولین خط صفحه و تنها یک بار ذکر می شود. DOCTYPE به بزرگی یا کوچکی حروف حساس نیست یا به اصطلاح case sensitive نیست و می توان به صورت doctype هم نوشت.
برای HTML5 آخرین نسخه HTML که در سال ۲۰۱۴ با ویژگی های جدید تر ارائه شده اعلام به صورت زیر می آید:

<!DOCTYPE html>

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

 

اینفوگرافی

دستور انگلیسی

آیا می دانید؟

لغات 504

مکالمات انگلیسی

اصطلاحات انگلیسی





عضویت در خبرنامه

با عضویت در خبرنامه، از آخرین آموزش ها، محصولات و تخفیف های بابا آب داد مطلع شوید.

یا برای اطلاع می توانید در هر یک از کانال های زیر در تلگرام، گپ و ایتا به آی دی babaabdadchannel@ عضو شوید:

گپ تلگرام ایتا

مقدمه ای بر طراحی وب

پاسخ دهید

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