• سبد خرید
  • آموزشداغ
    • ساختار پست ها
      • آخرین پست های سایت
      • پادکست صوتی
      • ویدئو
      • مقاله
    • کسب و کار
      • شبکه های اجتماعی
      • دیجیتال مارکتینگ
      • بازاریابی و تبلیغات
      • مدیریت و رهبری
      • رشد کسب‌وکار
      • صنعت آموزش
      • تولید محتوا
      • توسعه فردی
      • فروش
    • آموزش نرم افزار
      • موبایل گرافی
      • آموزش ICDL
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش افترافکت
      • آموزش پریمیر
      • آموزش اودیشن
    • طراحی سایت
      • رفع خطا و مشکلات سایت
      • آموزش وردپرس
      • افزونه وردپرس
      • امنیت وردپرس
      • آموزش ووکامرس
      • آموزش سئو
  • محصولات و خدماتحراج
    • فروشگاه – دوره و محصولات
    • دوره های عضویت VIP
    • عضویت VIPداغ
    • خدمات
      • دانلود از سایت های فروش فایل
      • طراحی
        • طراحی سایت و فروشگاه اینترنتی
        • طراحی پست ، استوری و بنر – به زودی
        • ساخت پادکست – به زودی
      • ادمین اینستاگرام – به زودی
      • تدوین ویدیو – به زودی
      • موشن – به زودی
  • رویدادها
    • رویداد های جدید
    • رویداد های من
  • دانلودهاجدید
    • افزودنی نرم‌افزار های ادوبی
      • فونت حرفه ای
      • فونت رایگان – به زودی
      • پریست – به زودی
      • پلاگین
      • اکشن – به زودی
      • جعبه ابزار – به زودی
    • اپلیکیشن اندروید
      • InShot Video Editor Pro – ویرایشگر ویدئو پر از امکانات اینشات
      • KineMaster Video Editor – کین مستر ویرایشگر قدرتمند ویدئو
      • PicsArt Photo Editor – پیکزآرت اندروید قدرتمندترین ویرایشگر عکس
      • CapCut – ویرایشگر ویدئو همه کاره کپ کات نسخه اندروید
      • دانلود جدیدترین نسخه کم اسکنر – CamScanner
    • نرم افزار های کاربردی
      • دانلود جدیدترین نسخه دانلود منیجر – Internet Download Manager (IDM)
      • دانلود جدیدترین نسخه لست پس پسورد – LastPass Password Manager
    • نرم افزار های ادوبی
      • دانلود جدیدترین نسخه فتوشاپ – Adobe Photoshop
      • دانلود جدیدترین نسخه ایلاستریتور – Adobe Illustrator
      • دانلود جدیدترین نسخه پریمیر – Adobe Premiere Pro
      • دانلود جدیدترین نسخه افترافکت – Adobe After Effects
      • دانلود جدیدترین نسخه مدیا انکودر – Adobe Media Encoder
      • دانلود جدیدترین نسخه آدیشن – Adobe Audition
  • درباره ما
    • ارتباط با ما
    • ارتباط با ما
    • پشتیبانی
    • قوانین سایت
    • اساتید و کارکنان
    • همکاری در فروش
      • بازاریاب شوید
      • اکانت بازاریابی من
      • صفحه قوانین و مقررات بازاریابی
    • پیشنهادها و انتقادها
  • اپلیکیشن
    • وب اپلیکیشن
  • پخش زنده
  • راهنما
برای اطلاع از تخفیف ها و جشنواره های ایساتیس ما را در اینستاگرام و تلگرام دنبال کنید.
آموزش ایساتیس
  • سبد خرید
  • دوره و محصولات
  • آموزش هاداغ
    • ساختار پست ها
      • پست های آموزشی عضویت ویژه
      • آخرین پست های سایت
      • دسته بندی آموزش ها
      • رادیو ایساتیس
      • ایساتیس TV
    • کسب و کار
      • صنعت آموزش
      • رشد کسب‌وکار
      • دیجیتال مارکتینگ
      • مدیریت و رهبری
      • بازاریابی و تبلیغات
      • توسعه فردی
    • نرم افزار
      • موبایل گرافی
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش پریمیر
      • آموزش افترافکت
      • آموزش اودیشن
    • طراحی سایت
      • آموزش وردپرس
      • آموزش ووکامرس
      • آموزش سئو
      • امنیت وردپرس
      • افزونه وردپرس
      • فروش
  • عضویت ویژهجدید
    • خرید و تمدید اشتراکداغ
    • ابزار طراحی
      • براش فتوشاپ
      • متن سه بعدی
      • بک گراند
      • موکاپ
    • قالب آماده
      • قالب اینستاگرام
      • قالب ایندیزاین
      • قالب پاورپوینت
    • پروژه آماده پریمیر
      • ترنزیشن
    • بانک فوتیج
      • استوک فوتیج
      • فوتیج نور
    • موسیقی
      • آهنگ بی کلام
  • بیشتر
    • خدمات
      • دانلود از سایت های فروش فایل
      • طراحی
        • طراحی سایت و فروشگاه اینترنتی
        • طراحی پست ، استوری و بنر – به زودی
        • ادمین اینستاگرام – به زودی
      • تدوین ویدیو – به زودی
      • موشن – به زودی
      • ساخت پادکست – به زودی
    • درباره ما
      • ارتباط با ما
      • قوانین سایت
      • اساتید و کارکنان
      • پیشنهادها و انتقادها
  • راهنما
ورود | ثبت‌نام

ساختار سلسله مراتب در HTML

23 فروردین 1402
ارسال شده توسط تیم تحریریه آموزش ایساتیس
آموزش HTML
ساختار سلسله مراتب در HTML
زمان مطالعه: 2 دقیقه
تعداد بازدیدها: 23

ساختار سلسله مراتب در HTML

آنچه در این مقاله می‌خوانید نمایش
ساختار سلسله مراتب در HTML
تو در تو بودن - Nesting
ترتیب - Order
عمق - Depth
تودرتوی عناصر خطی و بلاک

یک سند وب شبیه به یک Family tree یا همان شجره نامه است که در آن والدین، فرزندان، خواهر و برادر، اجداد و نوادگان وجود دارند.

این موضوع از آنجایی آغاز می‌شود که در HTML می توان عناصر را بصورت تودرتو نوشت.

تو در تو بودن - Nesting

ما یک پاراگراف ساده می‌نویسیم و با اضافه کردن دو عنصر خطی این پاراگراف را بهبود می‌بخشیم.

				
					<p><strong>حضرت علی (ع)</strong> در نهج البلاغه می فرمایند <q>دانا كسى است كه اندازه و قدر خود را بشناسد، و براى نادانى كسى همين بس كه اندازه خود را نداند.</q>.</p>
				
			

و در نهایت خروجی آن به این صورت خواهد بود:

See the Pen Untitled by Ali Tasharoei (@Isatis-academy) on CodePen.

در این مثال:

  • عنصر <strong> به عبارت “حضرت علی (ع)” مفهموم اهمیت را می دهد.
  • عنصر <q> نمایانگر این است که جمله از مولا علی نقل شده است.

نکته مهم: اینکه محتوای عنصر <strong> بصورت ضخیم تر (Bold) نمایش داده می شود رفتار پیشفرض مرورگر است. ما نباید به دید ظاهری به آن نگاه کنیم. بلکه مفهومی که این عنصر به کلمات می دهد مهم است که در اینجا مفهموم، اهمیت است. پس به خاطر داشته باشیم که نباید عناصر را بر اساس ظاهرشان انتخاب کنیم بلکه باید بر اساس معنا و مفهمومی که دارند از آنها استفاده کنیم.

 در ادامه داریم:

  • <p> پدر عنصرهای <strong> و <q> می باشد.
  • همچنین <strong> و <q> به عنوان فرزندان <p> شناخته می شوند.
  • <strong> و <q> همزاد یا همان خواهر-برادر می باشند.

یادتان باشد: در HTML به هر میزان که نیاز باشد می توان عناصر را داخل هم نوشت و محدودیتی وجود ندارد.

ترتیب - Order

اگر بخواهیم تا عنصری را به عنوان فرزندی از عنصر دیگر داشته باشیم باید تگ ابتدا و انتها عنصر فرزند را کاملا داخل عنصر پدر قرار دهیم. یعنی تگ پایان عنصر فرزند باید قبل از تگ پایان عنصر پدر بیاید :

				
					

<p> this is a <strong>test</strong></p>



<p> this is a <strong>test</strong></p>

				
			

عمق - Depth

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

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

See the Pen Untitled by Ali Tasharoei (@Isatis-academy) on CodePen.

در این مثال:

  • <article> جد تمام عناصر است.
  • <article> پدر عنصر <h1> و سه تا پاراگراف <p> می باشد.
  • <h1> و این سه <p> خواهر-برادر محسوب می شوند.
  • هر <p> پدر عناصر <strong> و <q> که دارند می باشند.
  • همه عناصر <strong>، <q>، <p> و <h1> نوادگان <article> هستند.

زمانی که در یک سند HTML بین عناصر حرکت می کنیم این روابط را همیشه مشاهده می کنیم:

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

تودرتوی عناصر خطی و بلاک

درون یک عنصر بلاک می توان از هر دو نوع عناصر بلاک و خطی قرار داد.

اما درون عناصر خطی فقط می توان عنصر خطی قرار داد.

نویسنده : علی تشرعی | تیم تحریریه آموزش ایساتیس
منبع : تیم تحقیقات آموزش ایساتیس
منبع

www.w3schools.com

چقدر این پست برای شما مفید بود؟

میانگین امتیاز / 5. تعداد آرا:

اولین نفری باشید که به این پست امتیاز می دهید.

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

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • احمد ابراهیمی گفت:
    23 فروردین 1402 در 21:40

    ممنونم از آموزش خوبتون

    پاسخ
    • تیم تحریریه آموزش ایساتیس گفت:
      23 فروردین 1402 در 21:40

      سپاس از همراهی شما

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

پست های جدید
  • سئوی بازاریابی محتوا با انتخاب کلیدواژه مناسب
  • هر آنچه که باید درباره پرفورمنس مارکتینگ بدانید !
  • 12 روش بازاریابی محتوا برای کسب و کار
  • 7 ترفند افزایش بازدید استوری اینستاگرام
دوست داری چی یاد بگیری؟
QR کد زیر را اسکن کنید
گزارش خرابی لینک

آموزش ایساتیس از سال ۱۳۹۸ با شعار آموزش جامع برای پیشرفت، فعالیت خود را در زمینه آموزش تخصصی نرم افزارهای ادوبی و راه اندازی کسب‌وکار اینترنتی با توجه به استانداردها و متدولوژی های روز دنیا و مد نظر قرار دادن ارزش ها و باورهای حرفه‌ای آغاز کرد. اساتید و تیم ایساتیس همواره تلاش می‌کنند که با مطالعه فراوان آموزش‌های خود را به روز کرده و با تیم پشتیبانی در کنار دانشجویان به رفع اشکالات آنها می‌پردازند.

دسترسی سریع
  • سفارش طراحی سایت وردپرس
  • اشتراک عضویت ویژه
  • دوره و محصولات
  • قوانین سایت
  • ارتباط با ما
  • پخش زنده
  • بلاگ
نمادها
شبکه های اجتماعی
Youtube M-icon-aparat Telegram Instagram Linkedin

به مشکلی برخورد کردید؟

مطالعه راهنما سایت

منتورینگ اختصاصی

پروژه محور

انتقال تجربه

از حرفه ای ها بیاموزید

گواهی پایان دوره

به تائید آموزش‌ایساتیس

افزایش درامد

همراه با منتورینگ

استفاده از سایت مشروط بر قبول توافق نامه کاربری و حفظ حریم شخصی است.حقوق مادی و معنوی این سایت متعلق به مجموعه آموزش ایساتیس است. | نسخه : 23.26.5

ساخته شده با 💜 در ایران

اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://amoozeshisatis.com/?p=18253
ورود ×
استفاده از Google
استفاده از Microsoft
استفاده از GitHub
استفاده از LinkedIn
یا از شبکه های اجتماعی استفاده کنید
رمز عبور خود را فراموش کرده اید؟
ورود با کد تایید
ارسال مجدد کد تایید(00:90)
حساب کاربری ندارید؟
عضویت
ارسال مجدد کد تایید(00:90)
بازگشت به صفحه ورود

ارسال مجدد کد تایید (00:90)
بازگشت به صفحه ورود
  • فروشگاه

  • سبدخرید

  • آموزش

  • ایساتیس TV

  • مرورگر شما از HTML5 پشتیبانی نمی کند.