آموزش طراحی وب ( HTML ) – قسمت دوم

html amozesh - آموزش طراحی وب ( HTML ) – قسمت دوم

ساختار تگ ها:

تگ ها از سه قسمت تشکیل می شوند:

  1. یک علامت کوچکتر (>)
  2. نام تگ
  3. یک علامت بزرگتر (<)

تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند. به مثال زیر دقت کنید:

همانطور که در مثال بالا میبینید یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که میتواند یک متن ساده، یک عنصر دیگر و یا خالی باشد)  و تگ پایانی.

به ساختار تگ پایانی توجه کنید که تفاوت آن با تگ آغازین فقط در “/” است که قبل از نام تگ در تگ پایانی می آید.

نکته : دقت داشته باشید که هر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی هم وجود دارد که بعدا آن ها را هم معرفی خواهیم کرد.

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

ساختار اصلی یک صفحه وب:


هر صفحه وب (HTML) با تگ <html> شروع و به تگ بسته‌ <html/> ختم میشود. در واقع با این عنصر به مرورگر می گوییم که اولاً با یک صفحه از نوع HTML روبروست، ثانیاً صفحه با تگ باز <html> شروع و با تگ پایانی <html/> پایان می یابد.

در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:

  • عنصر <head> : این عنصر که قسمت head (سر) صفحه را مشخص میکند حاوی اطلاعاتی در مورد صفحه است. به عنوان مثال می تواند شامل عنوان و توضیحاتی در مورد آنچه در قسمت بدنه آمده است باشد. این قسمت از تگ <head> و تگ بسته <head/> و هر چیزی که بین آنهاست تشکیل می شود.
  • عنصر <body>: مشخص کننده بدنه صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود. این قسمت از تگ <body>  و تگ بسته <body/> و هر چیزی که بین آنهاست تشکیل می شود.
نکته : معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما هر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواهد شد.

سه عنصر <head> , <html>  و <body> با هم ساختار اصلی یک صفحه وب را تشکیل می دهند. مثال زیرساختار اصلی یک صفحه را نمایش میدهد:

ذکر این نکته اهمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، توی هم قرار گرفتن آن ها باید به صورت مناسب انجام شود، یعنی هر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. هر وقت که از یک تگ بسته استفاده میکنید، این تگ بسته، باید وابسته به آخرین تگ بازی باشد که هنوز بسته نشده!.
به عبارتی دیگر، اول تگ A را باز کنید، سپس تگ B را باز کنید، سپس تگ B را ببندید و در آخر تگ A را ببندید. به عنوان مثال اگر بخواهیم فقط کلمه “پاراگراف” به صورت ضخیم دربیاید، بایستی:

اما کد زیر نادرست است، زیرا تگ بسته <b/>  داخل تگ <p> قرار نگرفته است :

و باعث میشود که نه فقط کلمه “پاراگراف” بلکه هر کلمه ای که بعد از آن بیاید نیز به صورت ضخیم درآید، که این امر یک اشکال در کد به حساب می آید.

تا اینجا با ساختار تگ ها و طریقه نوشتن و قواعدشون آشنا شدید. در مطلب بعدی به معرفی صفات عمومی تگها میپردازیم.

منبع : سون لرن 

1 دیدگاه

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.