بررسی موقعیت عناصر در یک سند HTML

بررسی موقعیت عناصر نسبت به یکدیگر در یک سند HTML


امیر سروری 14 دیدگاه CSS , HTML , اصول طراحی وب سایت Tuesday, 26th July , 2011 28615 بازدید

نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .

برای توضیح و درک این روابط در یک سند HTML یک سند ساده را به عنوان مثال در نظر خواهیم گرفت .

<body>
<div class="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div class="nav">
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>
</body>

برای درک بهتر مطالب نمودار درختی این سند HTML به شکل زیر ترسیم خواهد شد .

document tree

جد -Ancestor

جد – Ancestor – اشاره دارد به عنصری که در بالاترین سطح و در نوک درخت قرار می گیرد . مهم نیست که چقدر و چند سطح بالاتر است . در نمودار زیر عنصر body جد تمامی عناصر موجود در این سند HTML است به این معنی که در بالاترین سطح قرار دارد .

به این نکته توجه کنید که هر عنصری که زیر مجموعه دارد می تواند جد زیر مجموعه خودش باشد . به این معنی که در نمودار زیر هر کدام از div ها جد زیر مجموعه خودشان هستند .

document tree

نسل – Descendant

نسل – Descendant – اشاره دارد به تمامی عناصری که در درخت یک سند HTML با یکدیگر متصلند و در زیر مجموعه یک عنصر قرار می گیرند . مهم نیست در چند سطح پائینتر قرار گرفته اند .

در نمودار بالا تمامی عناصر متصل به div مشخص شده نسل این div هستند .

document tree

والدین – Parent

والدین – Parent دقیقا اشاره دارد به عنصر بالا دستی و متصل در درخت یک سند HTML . در نمودار زیر div مشخص شده والدین ul است .

document tree

فرزند – Child

فرزند – Child دقیقا اشاره دارد به عنصر پائین دستی و متصل در درخت یک سند HTML . در نمودار زیر ul فرزند div مشخص شده است .

document tree

خواهر و برادر – Sibling

خواهر و برادر ها – Sibling – عناصری هستند که دارای یک والدین مشترک هستند . توجه داشته باشید که خواهر و برادرها در یک سطح قرار خواهند گرفت .

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

document tree

بررسی موقعیت یک عنصر در یک درخت سند HTML

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

با توجه به نمودار زیر وضعیت و نقش های یکی از عناصر که با رنگ تیره مشخص شده است را بررسی می کنیم .

  • فرزند body
  • والدین عنصر ul
  • جد عناصر ul و li
  • برادر و یا خواهر دیگر عنصر div موجود در درخت .

document tree



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


14 دیدگاه برای این نوشته ثبت شده است


  1. محسن هاشمی
    26 July 2011

    سلام.

    در مورد ارث بری در CSS و ارتباطش با نحوه گزینش عناصر، مطلب بذارید.

    سپاس . . .



    • محسن هاشمی @ سلام و درود بر استاد هاشمی . حتما ، اینها مقدماتی هستند برای نوشتن مطالب بیشتر در مورد css
      راستی یک gravatar خوب برای خودت انتخاب کن ;)




  2. محسن هاشمی
    27 July 2011

    تست گراواتار !




  3. روژ
    22 January 2012

    ممنون به خاطراینکه هستید ومینویسید




    • امیر سروری
      2 February 2012

      روژ @ ممنون از اینکه دوستانی مانند شما هستند که من افتخار نوشتن و تهیه مطالب رو براشون داشته باشم . به امید اینکه همه حس انتقال تجربیات رو پیدا کنند و… ;-)




  4. احمد
    14 May 2012

    خیلی خوشحالم که سایتی به این خوبی پیدا کردم.
    و امیدوارم بتونم از مطالب بسیار بسیار مفیدتون استفاده کنم.
    و قدرشون رو بدونم
    براتون بهترین ها رو آرزو می کنم




  5. میلی
    15 April 2013

    نامردی بود اگه ازتون تشکر نمیکردم !!! تشکر . . .




  6. امیر
    7 July 2013

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




    • مهدخت یافتیان
      8 July 2013

      سلام

      مرسی از اینکه مطالب وب تارگت را دنبال می کنید. برای html و css از پایه تا پیشرفته فعلا برنامه ای برای آموزش سریالی نداریم. اما ممکنه در آینده فیلم های آموزشی یا مطالب آموزشی در وب تارگت منتشر کنیم. اما در زمینه ی اینکه بتونید دانسته هاتون را منسجم کنید پیشنهاد می کنم در کلاسهای آموزشی کارآزموده شرکت کنید هم دوره های طراحی وب مقدماتی داره هم پیشرفته و با توجه به توضیحاتی که دادید فکر کنم دوره پیشرفته برای شما مناسب باشه.
      http://karazmoodeh.com/courses/
      خودآموزی همیشه بهترین روش یادگیری بوده اما گاهی اوقات کمک گرفتن از کسانی که در این زمینه فعالیت می کنند باعث میشه چیز هایی را که یاد گرفتید به تونید به صورت کاربردی پیاده سازی کنید یا حتی دانسته های خودتون را به روز کنید.




  7. reza
    13 September 2013

    واقعا عالی بود .
    ممنون




  8. اشکان
    14 October 2013

    پستتون خیلی خلاصه و مفید بود. ممنون بابت زحمتایی که میکشین. :-)




  9. مسلم
    30 January 2014

    سلام
    ممنون




  10. alug
    31 July 2014

    عالی خیلی استفاده بردیم به امید بهتر شدن vasighidesign.ir



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





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

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.