ساختار صفحات HTML

آشنایی با ساختار اصلی یک صفحه HTML

طراحي سايت - ساختار صفحات HTML
آموزش طراحي سايت با اچ تي ام ال - ساختار صفحات HTML

چگونه یک صفحه HTML بسازیم؟ HTML چه ساختاری را رعایت می‌کند؟ چگونه یک تگ HTML ساخته می‌شود؟ چگونه صفحه HTML استاندارد بسازیم؟ در این مقاله با ساختار کلی یک صفحه 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/> و ھر چیزی که بین آنھاست تشکیل می شود.
[box type=”note” align=”alignright” class=”” width=”100%”]

نکته :

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

[/box]

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

<html>

  <head>
    <title> Page title </title>
  </head>

  <body>
    <p> This is a Paragraph </p>
  </body>

</html>

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

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

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

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

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

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

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

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

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

پایان ترم

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

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

[/box]

نتیجه گیری

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

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

 

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

42 نظر

42 پاسخ

    1. سلام شبنم. ممنون از تلاشت امیدوارم تا الان خیلی خوب یاد گرفته باشی HTML رو.

  1. سلام
    تو VS code نوشتم سعی کردم یکم CSS هم بهش بدم تا خوشگل شه
    برای href تگ a هم ادرس همین صفحه را وارد کردم

    1. درود بر تو امیر حسین. خیلی عالی. چقدر خوب که HTML رو bold کردی.

  2. سلام. خیلی ببخشید کامپیوتر در دسترس نبود با گوشی نوشتم.
    بفرمایید پاسخ سوال:

    1. عنصر a ایجاد نکردی پیام، این با تگ p نوشته شده.

    1. سلام فرهان، توی تصویرت چیزی معلوم نیست متاسفانه.

  3. من حداکثر تلاشم برای یادگیری HTML را به کار خواهم گرفت

    1. سلام علی اکبر، لطفا کد‌هاتو به صورت تصویری ارسال کن. ممنونم.

    1. سلام محمد، ممنون از پاسخگوییت. به زودی جایزه‌ات را در میزفا آکادمی میگیری.

  4. با سلام.
    همونطور که قبلاً عرض کردم من نامم اسی است.
    من برای منوهای باز شونده کدهایی رو که معرفی کردید وارد کردم اما تغییری ایجاد نشد میشه خودتون یه توضیحی از توی آموزش های خودتون بدید.
    ممنون
    احسان

    1. سلام اسی، نمونه کدت رو بفرست راهنماییت کنیم. مقاله نوید واقعا خیلی خوب توضیح داده بهتر نمیشه گفت.

  5. سلام من بر طبق معارفه ای که باشما وهمکارانتان داشتم مزاحم همیشگی ، اسی هستم.
    من قبلا” ازتون سوال کرده بودم که برای کشویی کردن منو باید چیکار کنم وشما یکسری کد معرفی کردیدکه من وارد کردم ولی کشویی نشد .میشه خودتون یه توضیح کامل بدید.
    ممنون
    اسی

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

    1. سلام اسی جان،
      آموزش CSS میزفا رو مطالعه کن.

      برای این کاری که میگی کافیه یه class مشخص بکنی و بهش background-color بدی.

  7. سلام بالا که یه کد گذاشتین(اولیش) کلمه ی paragraph رو اشتباه نوشتین خواستم اینو بگم تا سایتتون نمرش بیست از بیسته بشه بیست و یک

  8. واژه HTML مخفف کلمات Hypertext Mark Language است. اگر شما کمی با علم کامپیوتر آشنایی داشته باشید در صورت شنیدن کلمه طراحی صفحات وب مطمئنا اولین چیزی که به ذهن می رسد واژه HTML است.این واژه مخفف کلمات Hypertext Mark Language است. این واژه در اصل نام نوعی زبان برنامه نویسی است که در داخل notepad نوشته می شود. این زبان در واقع پایه ی تمام زبانهای برنامه نویسی طراحی صفحات وب است که دستورات آن به طور ساده بین تگ قرار می گیرد.
    برای کسب اطلاعات بیشتر و صحیح در این مورد به لینک روبرو مراجعه نمایید: https://mizfa.com/blog/what-is-html/

    1. سلام ایران کالج عزیزم.
      ممنون که این اطلاعات خوب رو داخل میزفا به اشتراک گذاشتی.
      فقط ما چون داشتی اشتباها لینک سازی میکردی مقاله خودمون رو لینک کردیم به کامنتت به جای اون یکی لینک :] اینطوری دیگه جواب نمیده لینک سازی ها اگر میخواین توی لینک هاتون پیشرفت کنین، حتما مقالات ما در مورد بک لینک ها رو بخونین.
      راستی HTML زبان برنامه نویسی نیست.
      موفق باشید.

        1. زبان نمادگذاری هست.
          با کدنویسی میشه هر کاری کرد ولی با نمادگذاری نمیشه هر کاری کرد.

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=