| آموزش html 5 - فصل اول جلسه دوم |
| هر روز ، یک جلسه |
-.- مدرس : طاها دریس -.-
در دومین جلسه از معرفی HTML5 به تگ های ساختار صفحه خواهیم پرداخت. این تگ ها همانطور که از نامشان پیداست جهت ایجاد ساختار صفحه وب استفاده می شوند.
در HTML 4 دو روش برای نامگذاری تگ ها وجود داشت.
- استفاده از id
- استفاده از class
که id برای نامگذاری قسمت های منحصر به فرد، و class برای style دهی استفاده می شد. به طور مثال یک وبسایت معمولا دارای یک header است پس برای نامگذاری تگ آن از id با مقدار header استفاده می کردیم. یا به طور مثال برای استایل دهی نوشته های آبی رنگ سایت از class با مقدار blue-text استفاده می کردیم. البته این نوع نامگذاری استاندارد یا قانون نبود، ممکن است شخصی از class با مقدار blue-text برای logo استفاده کند و یا... ولی معمولا نامگذاری ها مفهومی است و هر نام می بایست دقیقا قسمتی را که تشکیل می دهد را بدرستی معرفی کند.
در سال 2005 تحقیقی به عمل آمد که چه تعداد از طراحان وب، از صفت های id و class جهت نامگذاری تگ ها استفاده می کنند. در این تحقیق مشخص شد که بیش از یک بیلیون سایت از این دو صفت استفاده کرده بودند. تصویر زیر پراستفاده ترین نام های استفاده شده برای این دو صفت است :
با توجه به پراستفاده ترین نام ها W3C تصمیم گرفت که کار طراحان وب را ساده تر کند و بجای استفاده از صفت های id و class جهت نامگذاری ساختار صفحه، تگ هایی با همین نام ها ایجاد کند که به تگ های معنایی یا semantic elements معروفند.
بعضی از اسامی فوق مانند btamarker یا nobulletcontent به صورت خودکار توسط نرم افزارهایی همانند فرانت پیچ و ... ایجاد می شوند. و با توجه به اینکه این اسامی از نسبت بالایی برخوردارند به تگ هایی برای html تبدیل نشده اند.
تگ جدید HTML5
در HTML5 دقیقا 27 تگ جدید اضافه شده است که تقریبا نیاز ما را به استفاده از نام های مختلف برای تگ ها و همچنین استفاده بیش از حد از تگ div بی نیاز می کند. برای مثال به شکل زیر که قسمتی از یک سایت خبرگذاری است، تفاوت ایجادش با html4 و html5 را ببینید
همانطور که می بینید، در html5، هم نام تگ ها و هم تعداد آن ها متناسب با ساختار صفحه است.
ولی در html4 مجبور بودیم از تعداد زیادی تگ div استفاده کنیم به علاوه اینکه برای هر کدام نامی را نیز اختصاص می دادیم زیرا همه قسمت ها فقط یک تگ بودند و تعریف استایل بدون تعریف نام مشکل بود.
تگ های جدید معرفی شده ی جدید برای ایجاد ساختار صفحه عبارتند از :
Header : جهت ایجاد قسمت سرصفحه استفاده می شود.
Footer : جهت ایجاد قسمت پانوشت استفاده می شود.
Nav : جهت ایجاد منوها استفاده می شود.
Aside : جهت ایجاد ستون های کناری استفاده می شود.
Section : جهت ایجاد بخش های کنترلی استفاده می شود.
Article : جهت ایجاد مطالب (منظور از مطالب فقط پست ها نیست) استفاده می شود.
شکل زیر محل قرار گیری تگ های فوق در ساختار یک صفحه را نمایش می دهد.
semanti
نمونه کد زیر ساختار یک صفحه وب html5 را نمایش می هد :
کد کاملتر را در این صفحه به همراه استایل و همچنین قابل اجرا در ie هشت به پایین بدون استفاده از html5shiv را ببینید
نکته ای که حتما در هنگام باگ گیری تگ های HTML5 در ie درنظر بگیرید. این است که وقتی تگ ها را با استفاده از javascript تعریف کردید. با استفاده از css حتما باید نوع المنت را اینکه block هست یا inline تعیین کنید.
تگ های فوق که معرفی کرده ایم همگی block هستند. در صورت تعریف نکردن این خصوصیت، تگ ها به صورت inline در نظر گرفته می شوند.
سورس صفحه ای را که لینکش در فوق قرار گرفته بود به دقت بررسی کنید تا بهتر متوجه شوید. (البته ناگفته نماند که استفاده از این روش فقط برای موارد جزئی هست، و اگر میخوایید با html5 قالبی رو طراحی کنید حتما از html5shiv استفاده کنید.)
بسیار خب دوستان تا اینجا با 6 تگ جدید در HTML5 آشنا شدیم. در جلسه آینده به بررسی تگ های کنترلی می پردازیم.
منبع : سون لرن / http://www.7learn.com
آموزش تغییر نام دهکده در بازی کلش اف کلنز|clash of clans