افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی
نمونه کارها
آموزش HTML5 (جلسه دوم) – تگ هاي ساختار صفحه
نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود
در دومین جلسه از طراحی سایت با HTML5 به تگ ھای ساختار صفحه خواھیم پرداخت.
این تگ ھا ھمانطور که از نامشان پیداست جھت ایجاد ساختار صفحه وب استفاده می شوند.
در 4 HTML دو روش برای نامگذاری تگ ھا وجود داشت.
1 . استفاده از id
2.استفاده از class
که id برای نامگذاری قسمت ھای منحصر به فرد، و class برای style دھی استفاده می شد.
به طور مثال یک وبسایت معمولا دارای یک header است پس برای نامگذاری تگ آن از id با مقدار header استفاده می کردیم. یا به طور مثال برای استایل دھی نوشته ھای آبی رنگ سایت از class با مقدار text-blue استفاده می کردیم. البته این نوع نامگذاری استاندارد یا قانون نبود، ممکن است شخصی از class با مقدار text-blue برای 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 : جھت ایجاد مطالب (منظور از مطالب فقط پست ھا نیست) استفاده می شود.
شکل زیر محل قرار گیری تگ ھای فوق در ساختار یک صفحه را نمایش می دھد.
نمونه کد زیر ساختار یک صفحه وب html5 را نمایش می دھد :
<!doctype html>
<html lang="en">
<head>
<title>Hello HTML5</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="layout">
<header>
<nav></nav>
</header>
<div id="wrapper">
<aside></aside>
<section>
<article></article>
<article></article>
<article></article>
</section>
</div>
<footer></footer>
</div>
</body>
</html>
کد کاملتر را در این صفحه به ھمراه استایل و ھمچنین قابل اجرا در ie ھشت به پایین بدون استفاده از html5shiv را ببینید
نکته :
نکته ای که حتما در ھنگام باگ گیری تگ ھای HTML5 در ie درنظر بگیرید. این است که وقتی تگ ھا را با استفاده از javascript تعریف کردید.با استفاده از css حتما باید نوع المنت را اینکه block ھست یا inline تعیین کنید. تگ ھای فوق که معرفی کرده ایم ھمگی block ھستند. در صورت تعریف نکردن این خصوصیت، تگ ھا به صورت inline در نظر گرفته می شوند. سورس صفحه ای را که لینکش در فوق قرار گرفته بود به دقت بررسی کنید تا بھتر متوجه شوید.
(البته ناگفته نماند که استفاده از این روش فقط برای موارد جزئی ھست، و اگر میخوایید با html5 قالبی رو طراحی کنید حتما از html5shiv استفاده کنید.
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
درگ کنید
مشاهده
بستن
پخش
0%