ساختار صفحات HTML
ساختار صفحات HTML
با یکی دیگر از جلسات آموزشی طراحی سایت در خدمت شما علاقمندان به مباحث طراحی سایت با HTML هستیم
در جلسه گذشته با نرم افزارهای مورد نیاز جهت شروع کدنویسی به زبان اچ تی ام ال (HTML) آشنا شدیم
و در این جلسه قصد داریم شما را با ساختار یک صفحه HTML آشنا کنیم
اما لازم است که پیش از معرفی ساختار صفحات وب با مفهوم تگ آشنا شویم.
ساختار تگ ها:
تگ ھا از سه بخش تشکیل می شوند:
1 . یک علامت کوچکتر (>)
2 . نام تگ
3 . یک علامت بزرگتر (<)
مثال زیر ساختار یک تگ را نشان می دهد.
<tagname>
تگ ھا معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند به مثال زیر دقت کنید :
<tagname>content</tagname>
ھمانطور که در مثال بالا مشاهده میکنید یک عنصر از سه قسمت اصلی تشکیل می شود:
تگ آغازین، محتوای تگ (که می‌تواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.
به ساختار تگ پایانی توجه کنید تفاوت آن با تگ آغازین فقط در “/” است که قبل از نام تگ در تگ پایانی می آید.
بسیار خب. تا به اینجا با طریقه نوشتن تگ ھا آشنا شدید. حال به معرفی ساختار یک صفحه اچ تی ام ال میپردازیم .
ساختار اصلی یک صفحه وب (HTML) :
ھر صفحه وب یا هر صفحه اچ تی ام با یک تگ <html> شروع و به یک تگ بسته <html/> ختم می شود
در واقع با این عنصر به مرورگر می گوییم که اولا با یک صفحه از نوع HTML روبه روست
ثانیا صفحه با تگ <html> شروع و با تگ پایانی <html/> پایان می یابد .
در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:
عنصر <head> : این عنصر که قسمت head (سر) صفحه را مشخص می‌کند حاوی اطلاعاتی در مورد صفحه است.
به عنوان مثال می تواند شامل عنوان و توضیحاتی در مورد آنچه در قسمت بدنه آمده است باشد.
این قسمت از تگ <head> و تگ بسته <head/> و ھر چیزی که بین آنھاست تشکیل می شود.
عنصر <body> : مشخص کننده بدنه صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود.
این قسمت از تگ <body> و تگ بسته <body/> و ھر چیزی که بین آنھاست تشکیل می شود.
نکته :
معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود
اما ھر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواھد شد.
دقت داشته باشید که ھر تگی که باز میشود باید درجایی بسته شود.
که البته استثنائاتی ھم وجود دارد که بعدا به معرفی آن ها خواهیم پرداخت .
سه عنصر <html> , <body> , <head> با ھم ساختار اصلی یک صفحه وب را تشکیل می دھند.
مثال زیر ساختار اصلی یک صفحه را نمایش میدھد:
<html> <head> <title>page title</title> <head/> <body> <p>this is a paragraph</p> <body/> <html/>
ذکر این نکته اھمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، جای قرار گرفتن آن ھا باید مناسب باشد ،
یعنی ھر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. ھر وقت که از یک تگ بسته استفاده میکنید،
این تگ بسته، باید وابسته به آخرین تگ بازی باشد که ھنوز بسته نشده!
به عبارتی دیگر، اول تگ aرا باز کنید سپس تگ b را باز کنید، سپس تگ bرا ببندید و در آخر تگ aرا ببندید
به عنوان مثال اگر بخواهیم کلمه “پاراگراف” به صورت صخیم دیده شود بایستی از کد زیر استفاده کنیم .
<p/>است <b/>پاراگراف <b> این یک <p> نتیجه کد بالا
دستورالعمل <DOCTYPE!> در HTML
ما یک دستور داریم به اسم <DOCTYPE!> که در ساختار یک فایل HTML مشخص کننده نوع سند یا صفحه ی HTML ماست،
وقتی این دستور در ابتدای یک صفحه HTML بیاید یعنی داره به مرورگر میگه که این صفحه HTML نسخه ۵ می باشد.
این دستور باید در ابتدای یک صفحه HTML یعنی قبل از هر تگی در HTML بیاید،
و بهتر است که همیشه در صفحات HTML تون از این دستور استفاده نمایید.
لازم به ذکراست که این دستور به حروف بزرگ یا کوچک حساس نیست پس میتونید با حروف کوچک انگلیسی هم بنویسید.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه در مرورگرها</title>
</head>
<body>
<p>Salam.</p>
</body>
</html>
|
لطفا به ساختار بالا توجه نمایید، تمامی سایت های اینترنتی از ساختار کلی همانند دستورات بالا تشکیل شده اند،
یعنی برای مثال اگر به انتهای تمامی صفحات سایت های اینترنتی توجه نمایید شما دستور <html/> را مشاهده خواهید کرد.
که البته نه فقط <html/> بلکه تمامی ساختار بالا را میتوانید مشاهده نمایید،
خب در ادامه میخواهیم با دستورات موجود در شکل بالا آشنا شویم، اینکه این دستورات چه هستند و چکار میتوانند بکنند!؟
| دستور | توضیح |
|---|---|
| <!DOCTYPE html> | یک دستورالعمل که می گوید این صفحه اچ تی ام ال نسخه ۵ می باشد |
| <html> | ریشه و ستون اصلی یک صفحه اچ تی ام ال |
| <head> | هد یا سره یک صفحه اچ تی ام ال که اطلاعاتی درباره صفحه به مرورگر ارائه میدهد |
| <title> | با استفاده از این تگ میتوان عنوان صفحه را در مرورگر مشخص کرد. |
| <body> | بدنه یا بدن اصلی یک صفحه اچ تی ام ال هرچیزی که در این بدن قرار بگیرد در مرورگر نمایش داده می شود |
| <p> | اینو بهش میگیم تگ پاراگراف که یکی از تگ های HTML می باشد. |
اگر دوباره به دستورات بالا توجه نمایید، تگی که باز شده است در پایان و با توجه به اولویت باز شدنش بسته شده است،
برای مثال دستور <html> اولین تگی است که باز شده و در آخر نیز با <html/> بسته شده است.
پس لطفا همیشه در نظر داشته باشید که هر تگی که در HTML باز می شود در صورتی که تگ بسته داشته باشد باید بسته شود
تا مشکلی برای صفحه وب ما پیش نیاید.
این ساختار ما رو آماده می کنه تا کار کردن روی بخش های نوشتاری و محتوای سایت رو شروع کنیم
اگر بخوایم کار طراحی وب سایت رو با کار ساختمان سازی مقایسه کنیم، اچ تی ام ال مثل پی ریزی ساختمان است،
یعنی پایه و اساس ساختمان که بقیه ی اجزا روی اون ساخته میشوند.
اچ تی ام ال
زبانی است که ما از اون استفاده می کنیم تا محتوای سایتمون رو بنویسیم
به طوری که مرورگر این زبان رو بفهمد و بتواند روی صفحه نمایش بدهد.
در واقع این زبان به نوشته های معمولی، ساختاری میده که اگه اون ساختار رو نداشته باشند، مرورگر نمی تواند آنها را بخواند.
برای این که مطلب بیشتر براتون جا بیافته، مثالی می زنیم. مثلاً ما نمی تونیم توی ویرایشگر متنی که ازش استفاده می کنیم،
یه بند یا همون پاراگراف تایپ کنیم و انتظار داشته باشیم که مرورگر بفهمد که این یه پاراگراف است.
پس باید از یه نشانه و علامت استفاده کنیم. برای نشان دادن یک پاراگراف از این علامت استفاده می کنیم:
<p> </p> هر جا نوشته هایی شبیه این علامت دیدید، بدونید که یه کداست (حرف p مخفف واژه Paragraph به معنی پاراگراف هست.)
Elementها
زبان اچ تی ام ال از نشانه هایی ساخته شده که هر کدومشون معنی خاص خودشون رو دارن که در زبان انگلیسی بهشون Element میگند.
این نشونه ها خیلی مهم هستند! مثل نشونه ی پاراگراف یا <p> که همین الان یاد گرفتیم.
هر کدوم از این علامت ها، شروع و پایانی دارند که متن سایتمون،
داخل این دو تا علامت شروع و پایان نوشته میشود. علامت شروع این شکلی:
< > و علامت پایان هم این طوری نوشته میشود: < /> که به این علامت ها Tag یا تگ میگویند .
حالا وقتشه که ساختار اصلی سایتمون رو پی ریزی کنیم. برای شروع، ما سایتمون رو به قسمت های کوچیک تری تقسیم می کنیم
تا بهتر ازش سر در بیاریم. ما بدنه ی اصلی سایتمون رو که توی انگلیسی بهش body می گویند به سه تا قسمت تقسیم می کنیم :
بالای صفحه یا header، مرکز یا قسمت اصلی صفحه یا main و قسمت پایین صفحه یا footer.
تا اینجا با ساختار تگ ھا و طریقه نوشتن و قواعدشون آشنا شدید. در مطلب بعدی به معرفی صفات تگ ھای اچ تی ام ال میپردازیم.
مطالب مرتبط :
2-کار با لینک ها در HTMLقسمت اول
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.