گروه آموزش طراحی سایت ۲۹ شهریور ۱۳۹۰ ۷ 8441 بازدید

یکی از کارهایی که به منظور آموزش html و یا با هدف  مستندسازی (documentaion) بهتر فایل های اچ تی ام ال انجام می شود، استفاده از توضیحات (html comments) است. توضیحات در html، این امکان را می دهند که در میان کدهای html، به مرورگر اعلام کنید که بخشی از کد را مانند بقیه به صورت کدهای عادی html، تفسیر نکنند.

برای درج توضیحات، متن توضیح مورد نظر را بین جفت تگ های زیر می آوریم:

<!-- -->

به عنوان مثال، خواهیم داشت:

<!-—this is my sample comment on Onliner.ir –->

نکته:

این یک اشتباه رایج است که گفته می شود:

مرورگرها هنگامی که با توضیحات مواجه می شوند، از تفسیر آن قسمت صرفنظر می کنند.

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

فواید استفاده از توضیحات در کدهای html

  • توضیحات به شما کمک می کنند تا هرگاه در آینده به کدهای خود مراجعه می کنید، بتوانید متوجه شرح وظایف هر قسمت بشوید.
  • همچنین در صورتی که همکارانتان بخواهند کدهای شما را ویرایش کنند، وجود توضیحات کمک خیلی خوبی به آن ها می کند تا بتوانند سریعتر به اجزای مختلف کدهای html پی ببرند و بتوانند تغییری که مد نظر دارند را بهتر اعمال کنند.
  • گاهی استفاده از توضیحات در html به منظور مشخص کردن تگ های پایان است. این کار در طراحی سایت کمک زیادی به طراح می کند؛ چرا که باعث می شود وجود تگ های داخلی، طراح سایت را به اشتباه نیندازد.
  • همچنین استفاده از توضیحات گاهی به دلیل ایرادیابی عناصر html یک صفحه ی وب است. برای این منظور قسمت های مختلف را به حالت توضیحات در می آوریم تا مرورگرها از تفسیر آن ها به صورت عناصر معمولی، صرفنظر کنند. سپس برای عناصر مختلف این کار را انجام می دهیم و نتیجه را در مرورگر دنبال می کنیم تا متوجه بشویم که کدام یک از عناصر باعث بروز اشکال در صفحات سایت طراحی شده، شده اند.

مثال های زیر هر کدام از فواید استفاده از توضیحات در کدهای html را بررسی می کنیم:

در کد زیر شرح وظایف عنصر مربوطه با توضیحات مشخص شده است:

<!-- this paragraph is our main introduction --> <p>hello all guys! We are all working on <!-- site name --><span>onliner.ir</span> to create a nice web design resource.</p>

در کد زیر برای مشخص کردن هر کدام از تگ های پایانی، از توضیحات استفاده شده است:

<div id="gallery">
<div class="gallery-item"></div><!-- gallery item -->
<div class="gallery-item"></div><!-- gallery item -->
<div class="gallery-item"></div><!-- gallery item -->
</div><!-- gallery -->

یک نمونه کاربرد توضیحات برای ایرادیابی عناصر مختلف صفحات وب است. مثلا ممکن است برای اینکه بخواهیم نتیجه ی تفسیر کدها را بدون عنصر با نام آی دی nav مشاهده کنیم، آن را توسط تگ های مربوط، تبدیل به توضیحات کنیم:

<div id="header">
<!--
<ul id="nav">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
-->
<h1 id="logo"></div>
</div>

نظرات کاربران (۷)



  1. سامان

    ممنون از سایت خوبتون

  2. حسین

    بسیار عالی
    متشکرم

  3. adel

    مرسی

  4. tohid

    عالی بود مرسی از این همه زحمتی که میکشید

    موفق باشید


  5. سلام، واقعا جالب ، onliner.ir به لطف شما آرزو شانس


  6. سلام، واقعا جالب توجه است، به لطف onliner.ir بهترین آرزوها


  7. من فقط onliner.ir وبلاگ خود پیام مشخص شده کتاب ها و تلو تلو خوردن به محض . من لذت بردن از خواندن تفسیر خود را . با احترام!