خرید گوشی اورجینال تصویر بنر
آموزش طراحی سایت

(وردپرس تم) | ساختار صفحات HTML

(وردپرس تم) | ساختار صفحات HTML

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

سرفصل‌های پست

  • 1 ساختار HTML
    • 1.1 ساختار تگ ها:
    • 1.2 ساختار اصلی یک صفحه وب (HTML) :
  • 2 پایان ترم
  • 3 نتیجه گیری

ساختار HTML

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

پادکست های علی اسماعیلی در میزفا



 

ساختار تگ ها:

تگ ھا از سه بخش تشکیل می شوند:
1 . یک علامت کوچکتر (>)
2 . نام تگ
3 . یک علامت بزرگتر (<)

مثال زیر ساختار یک تگ را نشان می دهد.

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

 content 

ھمانطور که در مثال بالا مشاهده می‌کنید یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که می‌تواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.
به ساختار تگ پایانی توجه کنید تفاوت آن با تگ آغازین فقط در “/” است که قبل از نام تگ در تگ پایانی می آید.
بسیار خب. تا به اینجا با طریقه نوشتن تگ ھا آشنا شدید. حال به معرفی ساختار یک صفحه اچ تی ام ال می‌پردازیم .

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

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

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

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

نکته :

  • معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما ھر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواھد شد.
  • دقت داشته باشید که ھر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی ھم وجود دارد که بعدا به معرفی آن ها خواهیم پرداخت .

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



  
     Page title 
  

  
    

This is a Paragraph

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

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

این یک پاراگراف است

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

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

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

قرار نگرفته است :

این یک پاراگراف است

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

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

پایان ترم

خب ببینیم که یاد گرفتید یا نه؟

سوال:

یک عنصر به نام a را تعریف کنید و عبارت “من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت” را در آن قرار دهید و کد نهایی را برایمان ارسال کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

امیدواریم این جلسه هم براتون مفید بوده باشه و در جلسه بعدی ببینیمتون.

 

(وردپرس تم) | ساختار صفحات HTML

لینک منبع

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

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

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

دکمه بازگشت به بالا