داکیومنت و ساختار HTML (ویژه افراد مبتدی)

wrappers غیرمعنایی در ساختار داکیومنت HTML

گاهی اوقات با موقعیتی روبرو خواهید شد که نمی‌توانید یک المان معنایی ایده‌آل برای گروه‌بندی برخی موارد با هم یا دسته‌بندی بعضی از مطالب پیدا کنید. گاهی اوقات ممکن است بخواهید مجموعه‌ای از المان‌ها را با هم دسته‌بندی کنید تا با استفاده از کدهای CSS یا JavaScript تغییراتی روی آن‌ها اعمال کنید. برای موارد این چنین HTML المان <div> و <span> را در نظر گرفته است. شما می‌توانید برای این المان‌ها یک کلاس تعریف کنید و کدهای CSS را با توجه به کلاس مورد نظر، روی المان‌ها پیاده‌سازی کنید.

<span> یک عنصر غیر معنایی inline است. زمانی که نمی‌توانید برای  گروه‌بندی محتوای خود از یک المان سمانتیک یا معنایی استفاده کنید، از این المان استفاده کنید.

<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>

این مثال یک یادداشت برای سردبیر است. قرار نیست معنا و مفهوم خاص و اضافی به مخاطب بدهد. برای کاربرانی که دچار کور رنگی هستند هم با استفاده از CSS یادداشت را از متن اصلی متمایز می‌کنیم.

<div> یک المان غیر معنایی در سطح بلوک است که اگر نمی‌توانید المان مناسبی پیدا کنید یا می‌خواهید معنای خاصی اضافه کنید باید از آن استفاده کنید. به عنوان مثال یک ابزارک سبد خرید در سایت فروشگاهی را تصور کنید که هنگام حضور در سایت هروقت که خواستید روی آن کلیک می‌کنید:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

این آیتم یک سکشن <aside> نیست، چون به محتوای اصلی صفحه مربوط نمی‌شود و شما می‌خواهید این بخش در همه جا قابل مشاهده باشد. استفاده از <section> هم مناسب نیست چون سبد خرید بخشی از محتوای اصلی صفحه نیست. بنابراین <div> در این مورد گزینه‌ خوبی است. ما سرتیتری با عنوان Shopping cart را به عنوان راهنما جهت کمک به کاربران برای پیدا کردن سبد خرید در  آن قرار داده‌ایم.

قوانین Line breaks و horizontal  در ساختار داکیومنت HTML

دو المانی که گهگاه استفاده خواهید کرد و قرار است راجع به آن‌ها صحبت کنیم، <br> و <hr> هستند:

<br> خط شکستگی را در یک پاراگراف ایجاد می‌کند. با استفاده از این تگ به خط بعدی خواهید رفت. مثل دکمه اینتر در کیبورد عمل می‌کند.

برای مواردی مانند نوشتن آدرس پستی و یا شعر، این المان به کار شما می‌آید.

<p>There once was a man named O'Dell<br>
Who loved to write HTML<br>
But his structure was bad, his semantics were sad<br>
and his markup didn't read very well.</p>

بدون عناصر <br> پاراگراف فقط در یک خط طولانی نمایش داده می‌شود. با استفاده از تگ <br> پاراگراف بالا به شکل زیر نمایش داده می‌شود.

There once was a man named O'Dell
Who loved to write HTML
But his structure was bad, his semantics were sad
and his markup didn't read very well.

المان <hr> یک خط افقی در متن شما ایجاد می‌کند که نشانگر یک تغییر موضوعی در متن است. از نظر بصری فقط مانند یک خط افقی به نظر می‌رسد. به عنوان مثال:

<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>

به شکل زیر نمایش داده خواهد شد.

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.

Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.

پلن‌نویسی برای یک سایت ساده

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

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

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

حالا سایر مطالب که برای هر صفحه متفاوت است را که ترسیم می‌کنید. مثلا در صفحه تماس با ما قرار است اطلاعات تماس و یک فرم تماس با ما طراحی کنید. تمام جزئیات را بنویسید.

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

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

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