آموزش طراحی سایتآموزش 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 Paragtaph </p>
  </body>

</html>

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

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

<p> این یک <b> پاراگراف </b> است </p>

نتیجه کد بالا :

نتیجه کد اچ تی ام (HTML)

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

<p> این یک <b> پاراگراف است </p></b>

نتیجه کد بالا :

نتیجه کد اچ تی ام ال (HTML)

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

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫2 نظرها

پاسخی بگذارید

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

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

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر