مبانی طراحی سایت با html5

[mahya_KaraIT]

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

تفاوت HTML با XHTML در چیست :اگر شما با زبان HTML کار کرده باشید، احتمالا براتون پیش آمده که گاهی تگ <p> را بصورت تکی و بدون تگ بسته به کار ببرید. این موارد در HTML تاحدی مجاز است. اما در XHTML شما باید استانداردهای XML را رعایت کنید. یعنی کلیه تگ ها باید بصورت دوتایی (تگ باز و بسته) تعریف شوند. با تعریف DOCTYPE مناسب در بالای صفحه، می توانید به مرورگر بفهمانید که از HTML استفاده کرده اید یا از XHTML. تگ هایی مانند <BR> هم که تکی هستند باید بصورت <br /> نوشته شوند.


تفاوت HTML 4 با نسخه ۵ در چیست: با گسترش اینترنت، طراحان متوجه شدند که نیازهایی دارند که کدهای HTML4 و حتی XHTML آنها را برآورده نمیکند. مثلا امکان نمایش انیمیشن در صفحات وب نیازمند برنامه هایی همچون flash بود که عملا بخش استانداردی از وب به حساب نمی آیند. همچنین قابلیت های جدیدی مانند کشف مکان جغرافیایی کاربر (توسط شبکه یا جی پی اس) و ذخیره سازی آفلاین در مرورگر چیزهایی بود که در HTML4 وجود نداشتند. این شد که کنسرسیوم وب (W3C) نسخه جدیدی از وب را (با همکاری گروه WHATWG) منتشر کرد. و اچتمل ۵ متولد شد.


احتمالا می دانید که در HTML 4 برخی تگ ها معنا دار هستند. مثلا تگ H1 برای عنوان صفحات بکار میرود. فارغ از اینکه کجای صفحه باشد یا چه رنگی به آن نسبت دهید. اما تگهای دیگر مانند DIV که عملا بخش های مهم صفحه را از هم جدا میکند، معنایی نداشتند. یکی از ویژگی های اولیه HTML5 تعریف تگهای معنادار جدید به جای Div است.

تگ Header و Footer: همه ما در سایتهایی که طراحی میکنیم، یک بخش هدر و یک فوتر داریم. (منظور از هدر، بخش بالایی سایت است.پس آنرا با تگ head اشتباه نگیرید. تگ head همچنان کاربرد خودش را دارد). در HTML 4 برای تعریف هدر معمولا شاهد چنین ساختاری هستیم:

<div>
<h1>عنوان سایت </h1>
</div>​

احتمالا یک CSS هم مانند کد زیر تعریف می کردید:

.header{
background-color:#eee;
width:100%;
height:120px;
}​

خب ، کافیه بجای استفاده از تگ div از تگ header استفاده کنید. همین ! و کد شما اینجوری خواهد شد:

<header class="header">
<h1>عنوان سایت </h1>
</header>​

بقیه کد نیازی به تغییر ندارد. اما از آنجا که احتمالا فقط یکبار از تگ header در صفحه استفاده میکنید، می توانید را نیز انتهای تگ header در خط اول حذف کنید و در CSS بجای تعریف کلاس header ، خاصیت های آنرا به تگ header نسبت دهید.


تگ article: همانطور که از اسمش پیداست هر مقاله/قلم کالا/چیز که بتواند بصورت جداگانه نیز منتشر شود و معنای خود را داشته باشد می تواند در این تگ قرار بگیرد. مثلا پست های یک وبلاگ یا مقالات یک روزنامه آنلاین، هر کدام یک قلم کالا محسوب میشوند که قبلا در یک Div قرار می گرفتند و حالا باید در یک تگ article قرار گیرند. مانند مثال زیر :

​

<article class="blogpost">
<h2>عنوان مقاله </h2>
<p>متن خبر در اینجا می توانید قرار گیرد</p>
</article>​

تگ های جدید هم مانند تگ های قدیمی می توانند class و id و حتی style بگیرند و خلاصه چیز عجیب و غریبی نیستند. (گرچه بهتره که بجای style های داخل تگی، از class استفاده کنید.)


تگ aside : این تگ برای جداسازی بخشی از صفحه به کار می رود که جزئی از مطلب اصلی نیستند یا اصلا به مقاله اصلی صفحه ربطی ندارند. مثلا به جای تعریف یک div برای تبلیغات، یا ستون کناری سایت، می توانید از تگ aside استفاده کنید.


تگ nav : این تگ همانطور که از اسمش پیداست، برای قرارگرفتن لینک های اصلی سایت کاربرد دارد. بدین ترتیب، مرورگر می فهمد که لینکهای داخل این تگ ، لینکهای اصلی سایت شما هستند. شما می توانید با استفاده از CSS نحوه نمایش این تگ و لینکهای داخلش را برای کاربران عادی تغییر دهید. اما کاربرد اصلی این تگ برای کاربرانی که مشکل بینایی دارند است. بطور مثال نرم افزارهایی هستند که می توانند متن صفحات را برای نابینایان بخوانند و اگر تگ nav در صفحه باشد، به سادگی متوجه میشوند که این بخش، لینکهای اصلی سایت است و پیمایش را بین صفحات سایت برای نابینایان ساده تر میکنند. (همچنین موتورهای جستجو نیز به تگ های معنایی بسیار وابسته اند. زیرا آنها نیز با خواندن تگ nav متوجه میشوند که این لینکهای داخل این تگ، لینکهای اصلی تری از بقیه لینکهای داخل صفحه هستند)

<nav>
<ul>
<li><a href="index.html">صفحه اصلی</a></li>
<li><a href="articles.html">مقالات</a></li>
<li><a href="products.html">محصولات</a></li>
</ul>
</nav>
​

تگ section: این تگ برای جداکردن بخش های مختلف از یک محتوای بهم مرتبط کاربرد دارد. مثلا شما چند باکس دارید که بصورت tab در کنار هم نمایش داده میشوند . هر tab می تواند یک section باشد. یا اگر فوتر سایت شما چند بخش مجزا دارد، هر بخش آن می تواند یک section باشد. مانند فوتر سایت html5 Herald . توجه کنید که بخش هایی که در section قرار میدهید، بطرز معنایی باید به نحوی با هم مرتبط باشند. اگر این بخش ها ربطی بهم نداشته باشند، استفاده از تگ section اشتباه است و باید همان تگ div را بجایش به کار ببرید.

<footer>
<section>
<h4>محصولات تولید داخل</h4>
<p>توضیحات اضافی </p>
</section>
<section>
<h4>محصولات وارداتی</h4>
<p>توضیحات اضافی </p>
</section>
<section>
<h4>محصولات در دست تولید</h4>
<p>توضیحات اضافی </p>
</section>
</footer>
​

توجه کنید که ما همچنان برای جداسازی گرافیکی ستون ها از تگ div استفاده میکنیم. اما برای جداسازی معنایی (مثلا مشخص شدن یک مقاله، یک بخش از یک صفحه یا لینکهای پیمایش اصلی) از تگ های معنادار استفاده میکنیم. تگ های معرفی شده، مهم ترین تگهای html5 هستند که جایگزین تگ های فعلی شما میشوند. همچنین تگ های جدیدی مانند canvas در html5 معرفی شده اند که کاربرد های جدیدی را به html اضافه میکنند. در مقالات بعدی شما را تگ های جدیدتر آشنا خواهیم کرد.




منبع :http://www.macromediax.com