چند وقت پیش مقاله ای در مورد آشنایی با html5 نوشتم که در آن به برخی از تگ های جدید این نسخه از html پرداخته شد. همانطور که وعده داده بودم در ادامه ی مقاله ی قبلی تصمیم دارم یک صفحه ی نسبتا ساده ی html را به کمک نسخه 5ام طراحی کنم و مراحل ساخت را گام به گام باهم پیش برویم.
در حین آموزش بیشتر سعی می کنم به ساختار های جدید و همیچنین خصوصیاتی از css3 بپردازم و از کنار مطالب حاشیه ای سریع عبور خواهم کرد، به همین دلیل لازم است فرد خواننده با html و css آشنایی داشته باشد. همچنین اگر قسمت قبلی آموزش را مطالعه نکردید، پیشنهاد می کنم حتما آن را مطالعه بفرمایید تا آشنایی کلی در مورد تگ هایی که در این مقاله استفاده خواهد شد پیدا کنید.
قبل از شروع آموزش بهتر است نکاتی را هم عرض کنم:
* مطالبی که در این مقاله بیان خواهد شد، بیشتر جنبه ی آموزشی دارند و هنوز css3 و یا html5 به قدری رایج نشده اند که از همه خصوصیات آن ها در همه مرورگر ها پشتیبانی به عمل آید.
* در این مقاله مرورگر firefox 4.0 پایه ی طراحی قرار داده شده و از کلیه خصوصیات و مواردی که در مقاله بیان شده پشتیبانی می کند. سایر مرورگر ها ممکن است برخی از خصوصیات را پشتیبانی نکنند.
* خصوصیاتی از css3 که در مقاله بیان شده است به صورت خصوصیت کلی (بدون پیشوند شرکت سازنده) بیان شده اند. به دلیل اینکه در حال حاضر شرکت های سازنده خصوصیات جدید را همراه پیشوندی ارائه می کنند، لازم است برای عملکرد صحیح پیشوند مربوطه ذکر شود. مثلا برای خصوصیت border-radius که در متن مقاله خواهید دید، باید به این شکل نوشته شود:
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-moz برای مرورگر firefox و -webkit برای مروگر هایی بر پایه ی موتور وب کیت مثل chrome و safari.
خوب بعد از این توضیحات بریم سراغ اصلا مطلب:
چهارچوب کلی صفحه ای که می خواهیم طراحی کنیم به این شکل است:
در آموزش قبلی به صورت کلی در مورد تگ هایی که برای قسمت های نمایش داده شده در html5 معرفی شدند صحبت شد. تگ هایی مثل section، aside، header و footer و... که در این آموزش به صورت عملی از آن ها استفاده خواهیم کرد.
کد html پایه ی ما که چهارچوب کلی صفحه را تشکیل می دهد به این شکل خواهد بود:
اولین نکته قابل توجه doctype در نظر گرفته شده برای سند هست. در نسخه های قبلی html چندین نوع doctype قابل تعریف بود، مثلا xhtml transiotional، strict و ...، اما در html5 تنها یک doctype قابل تغریف می باشد، آن هم به همین سادگی که می بینید:
<!doctype html>
حالا شروع می کنیم به ساخت سایر قسمت ها:
برای ساخت قسمت های introduction و navigation ساختار زیر را در نظر بگیرید:
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
</ul>
</nav>
<section id="intro">
<header>
<h2>Do you love flowers as much as we do?</h2>
</header>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure
found in flowering plants (plants of the division Magnoliophyta, also called
angiosperms).
</p>
</section>
با توضیحاتی که در قسمت قبل برای تگ های navو section داده شده فکر نمی کنم چیزی مبهم باشد. برای ساخت قسمت navigation مثل همیشه از تگ های ul-li استفاده شده و فقط آن ها را داخل تگ nav قرار داده ایم. در قسمت section هم یک header و یک پاراگراف در نظر گرفته شده است، همچنین به تگ section یک id نسبت داده شده که برای استایل دهی از آن استفاده خواهیم کرد.
در ادامه برای قسمت Main Content سه قسمت را که در اکثر سایت ها وجود دارد، در نظر گرفتم، قسمت اول پست بلاگ هست، قسمت دوم نمایش یادداشت ها و قسمت آخر فرم ورود یادداشت ها.
کد html ای که برای قسمت پست بلاگ در نظر گرفتم به شکل می باشد:
<section>
<article class="blogPost">
<header>
<h3>نگاهی به HTML 5 و برخی از خصوصیات آن </h3>
<p>نوشته شده در <time datetime="2009-06-29T23:31:45+01:00">1389/06/14</time> توسط <a href="#">عماد</a> - <a href="#comments">3 یادداشت</a></p>
</header>
<p>پاراگراف 1</p>
</p>پاراگراف 2</p>
<p><a href="http://www.irpcn.com/web/html5.html">ادامه مطلب...</a></p>
</article>
</section>
همانطور که گفته شد، تگ article نمایش دهندۀ یک قسمت مستقل در صفحه ی html است و یا به صورت دقیق تر تفکیک محتوا در یک صفحه است. مثلا پست های بلاگ و انجمن ها، یادداشت ها و ... که در اینجا هم برای یک پست و همچنین در قسمت یادداشت ها که در ادامه خواهید دید از این تگ استفاده شده است.
نکته قابل ذکر در این بین تگ time می باشد. این تگ، یکی از تگ های جدید در html5 است که برای معرفی تاریخ و زمان در نظر گرفته شده است. ساختار زمان و تاریخ در تگ time باید به فرمت خاصی وارد شود که در تصویر زیر نمایش داده شده است:
در ابتدا تاریخ به صورت سال، ماه و روز قرار گرفته و به دنبال آن کاراکتر T برای نمایش زمان و تفکیک آن از تاریخ قرار می گیرد و سپس زمان. در قسمت انتهایی نیز میزان offset زمانی نسبت به گرینویچ ذکر شده است. به عنوان مثال این فاصلۀ زمانی برای تهران 3 ساعت و نیم می باشد. بنابراین یک فرمت تاریخ به صورت زیر خواهد بود:
<time datetime="2010-12-17 T18:47:10+03:30">December 17, 2010</time>
قابل ذکر است فرمتی که مطرح شد لزوما نباید به همین شکل باشد و می توان از حالات دیگری نیز استفاده کرد:
<time datetime="2008-02-14">Valentines day</time>
<time>10:00</time>
همچنین در صورتی که از خصوصیت datetime استفاده نشود، باید زمان یا تاریخ در بین تگ ها قرار گیرد.
بعد از این توضیحات بریم سراغ قسمت نمایش یادداشت ها و فرم مربوطه:
<section id="comments">
<header>
<h3>یادداشت ها</h3>
</header>
<article>
<header>
<a href="#">علی</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
</header>
<p>یادداشت شماره 1</p>
</article>
<article>
<header>
<a href="#">محمد</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
</header>
<p>یادداشت شماره 2</p>
</article>
<article>
<header>
<a href="#">لیلا</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
</header>
<p>یادداشت شماره 3</p>
</article>
</section>
فرم یادداشت ها:
<form action="#" method="post">
<h3>یادداشت خود را وارد کنید:</h3>
<p>
<label for="name">نام:</label>
<input name="name" id="name" type="text" required="required" />
</p>
<p>
<label for="email">ایمیل:</label>
<input name="email" id="email" type="email" required="required" />
</p>
<p>
<label for="website">وبسایت:</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">یادداشت:</label>
<textarea name="comment" id="comment" required="required"></textarea>
</p>
<p><input type="submit" value="ارسال" /></p>
</form>
در قسمت نمایش یادداشت ها نکته ی خاصی وجود ندارد و همونطور که قبلا هم گفته شد از تگ article برای هر یادداشت استفاده کردیم. اما در قسمت فرم یادداشت ها خصوصیات جدیدی را مشاهده می کنید.
در html5 برای خصوصیت type در تگ input چندین پارامتر جدید اضافه شده است که در قطعه کد بالا دو خصوصیت type=”email” و type=”url” را مشاهده می کنید. درواقع این خصوصیات وظیفه ی چک کردن داده ای که کاربر وارد کرده است را بر اساس type نسبت داده شده به آن ها بر عهده دارند. کاری که عملا در نسخه های قبل باید به کمک جاوا اسکریپت انجام می شد، در نسخه ی جدید توسط خود مرورگر انجام می گیرد. به طور مثال با افزودن url به خصوصیت type شکل زیر را خواهیم داشت:
خصوصیت دیگری که در دو تگ input و textrea دیده می شود، خاصیت required می باشد. وقتی این خصوصیت را به تگ مورد نظر خود اضافه کنید، فیلد های مربوطه هنگام ارسال فرم حتما باید پر شده باشند و در صورت خالی بودن اخطاری توسط مرورگر داده می شود. همانند تصویر زیر:
و در انتها این هم کد html قسمت های sidebar و footer:
<aside>
<section>
<header>
<h3>بخش ها</h3>
</header>
<ul>
<li><a href="#">دانلود</a></li>
<li><a href="#">آموزش</a></li>
<li><a href="#">اینترنت</a></li>
<li><a href="#">سخت افزار</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</section>
<section>
<header>
<h3>آرشیو</h3>
</header>
<ul>
<li><a href="#">December 2008</a></li>
<li><a href="#">January 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">June 2009</a></li>
</ul>
</section>
</aside>
در این قسمت ها نکته ی جدید و خاصی وجود ندارد، همانطور که مشاهده می کنید برای sidebar از تگ aside و برای footer هم از تگ footer استفاده شده است و بقیه قسمت ها همانند قبل است.
تا به اینجای کار قسمت مربوط به html به پایان رسیده و در ادامه شروع سبک دادن به تگ ها می کنیم.
* استایل دهی و معرفی خصوصیاتی از CSS 3.0
به دلیل زیاد بودن حجم استایل ها، از قسمت های تکراری صرف نظر می کنم و بیشتر به خصوصیاتی که مربوط به css3 می باشد خواهم پرداخت. در انتهای کار فایل مربوطه ضمیمه شده که می توانید سایر قسمت ها را مشاهده کنید. اما ادامه ی بحث...
استایل دهی بخش introduction:
اگر به یاد داشته باشید در قسمتی از کد های html یک id برای قسمت introduction در نظر گرفتیم. حالا به توجه به id در نظر گرفته شده قسمت مربوط به intro را استایل دهی می کنیم:
#intro {
margin-top: 66px;
padding: 44px;
background-image: url("images/intro_flower.png"), url("images/intro_background.png");
background-position: top right, top left;
background-repeat: no-repeat, repeat-x;
background-size: 653px 100%, 287px 100%;
border-radius: 22px;
}
قبل از اینکه به توضیح خصوصیات بپردازم، عرض کنم که تصویری که قصد ایجاد آن را داریم به شکل زیر است:
در واقع قسمت intro ی ما از دو تصویر زمینه تشکیل شده است که در سمت راست تصویر یک گل و در سمت چپ تصویر یک Gradient قرار دارد. به مدد نسخه ی جدید css، امکان قرار دادن چند تصویر زمینه برای یک تگ مهیا شده است، کاری که در نسخه ی قبلی عملا با css ممکن نبود و باید از راه های دیگری استفاده می شد. در کد های بالا نیز همانطور که مشاهده می کنید به خصوصیت background-image دو تصویر نسبت داده شده است و متعاقبا در background-position و background-repeat خصوصیات هر تصویر با یک "," از هم جدا شده است. نکته ی قابل ذکر در این قسمت این است که مرورگر تصویر ها را به صورت لایه ای رندر می کند، به این معنی که تصویری که در ابتدا قرار می گیرد روی تصویر دوم خواهد افتاد و تصویر دوم بر روی تصویر سوم خواهد بود و ... که عدم اطلاع از این مورد ممکن است باعث پنهان شدن یکی از تصویر ها شود.
در ادامه دو خصوصیت جدیدی که در این قسمت می بینید background-size و border-radius می باشد. خصوصیت background-size همانطور که از نام آن پیداست، این اجازه را می دهد تا بتوان اندازه ی تصویر زمینه ای که انتخاب شده است را تغییر داد. فرمت کلی این خصوصیت به صورت زیر است:
background-size: <bg-size>, <bg-size>
که bg-size اول اندازه ی تصویر در راستای افقی و bg-size دوم اندازه را در راستای محور عمودی مشخص می کند. پارامتر bg-size می تواند به صورت درصدی، پیکسلی و یا auto مقدار دهی شود که در حالت auto تصویر به همان اندازه ی پیش فرض خود رها می شود.
در کد های css بالا همانطور که مشاهده می کنید، قسمت اندازه ی عمودی به صورت درصدی و برابر 100% مقدار دهی شده است. درواقع با قرار دادن مقدار 100% هنگامی که ارتفاع قسمت intro تغییر می کند اندازه ی تصویر زمینه نیز متناسب با ارتفاع تگ آن تغییر میابد و کاملا انعطلاف پذیر خواهد بود.
خصوصیت border-radius هم که در طی چند آموزش قبلی css به وفور استفاده شد، یکی دیگر از خصوصیات جدید در css3 است و برای ایجاد لبه های گرد در تگ ها استفاده می شود. این خصوصیت یک پارامتر را به عنوان شعاع دریافت کرده و بر اساس آن لبه ی گرد را ایجاد می کند. همانند تصویر زیر:
در این مورد این خصوصیت به همین توضیحات بسنده می کنم. برای جزئیات بیشتر آموزش ساخت لوگوی مرورگر اپرا را مطالعه بفرمایید.
استایل دهی Main Content Area و Sidebar:
قالبی که قصد ایجاد آن را داریم یک قالب دو ستونه است که قسمت sidebar در سمت راست صفحه و Content Area در سمت چپ صفحه قرار دارد. در حالت عادی بسیاری از افراد از خصوصیت float استفاده می کنند و ستون های چپ و راست را در دو طرف صفحه به صورت شناور موقعیت دهی می کنند. اما در اینجا قصد دارم از روش دیگری استفاده کنم که شاید پاسخی برای یکی از سوالاتی که زیاد هم پرسیده می شود باشد. اینکه:
"چطور دو div را در کنار هم به نحوی موقعیت دهی کنیم که با تغییر ارتفاع یکی، ارتفاع دیگری نیز به همان اندازه تغییر کند، همانند رفتاری که table دارد."
در ادامه روشی که برای ایجاد این طرح دو ستونی گفته می شود، جواب این سوال نیز خواهد بود.
در این روش بدون استفاده از table کاری می کنیم که تگ مورد نظر ما رفتاری همانند table داشته باشد. برای شروع کار دو div به کد های html این دو قسمت اضافه می کنم:
<div id="content">
<div id="mainContent">
<section>
<!-- Blog post -->
</section>
<section id="comments">
<!-- Comments -->
</section>
<form>
<!-- Comment form -->
</form>
</div>
<aside>
<!-- Sidebar -->
</aside>
</div>
یک div با آی دی maincontent که قسمت های پست بلاگ و نظرات را دربر دارد و یک div با آی دی content که پیرامون کلیه ی این قسمت ها قرار گرفته است. حال فرض کنید اگر div بیرونی معادل یک table و div داخلی و aside معادل یک ساول از جدول می بودند، قاعدتا مشکل ما نیز حل می شد. با این توضیحات خصوصات زیر را به تگ ها نسبت می دهیم:
#content
{
display: table;
}
#mainContent
{
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside
{
display: table-cell;
width: 300px;
}
در استایل های بالا دقیقا رفتار table را برای تگ ها شبیه سازی کرده ایم که اینکار با خصوصیت display ممکن می باشد. خصوصیت display دارای چندین پارامتر است که پارامتر table آن باعث می شود مرورگر تگ مورد نظر را همانند یک جدول رندر کند، همینطور قسمت های maincontent و aside که خصوصیت display: table-cell را دارند، معادل سلول های جدول ما خواهند شد و در نهایت طرحی معادل شکل زیر را خواهیم داشت:
استایل دهی به پست بلاگ:
قصد دارم قسمت پست بلاگ را به صورت چند ستونه (در اینجا دوستون) استایل دهی کنم، یعنی متون در دو ستون و همانند نوشته های روزنامه ای کنار هم قرار گیرند. برای اینکار ابتدا لازم است یک div پیرامون متن های خود قرار دهیم و سپس div را دو ستونه کنیم:
<div>
<p>پاراگراف 1</p>
</p>پاراگراف 2</p>
</div>
و این هم استایل هایی که به div نسبت دادم:
.blogPost div
{
column-count: 2;
column-gap: 22px;
}
همانطور که مشاهده می کنید باز هم با دو خصوصیت جدید از css3 روبرو هستیم، column-count و column-gap.
خصوصیت column-count مشخص می کند که div ما باید شامل دو ستون باشد و خصوصیت column-gap تعیین کننده فاصله بین ستون ها می باشد که در اینجا برابر 22 پیکسل مقدار دهی شده است. خصوصیت column-rule نیز استایل border بین ستون ها را مشخص می کند که پسوند های color، style و width به خوبی گویای وظیفه ی خود هستند و نیاز به توضیح ندارند. خصوصیات دیگری از قبیل column-width، column-height و column-span نیز وجود دارند که برای اطلاع بیشتر می توانید جستجو کنید.
پس از اعمال این استایل ها، همچین شکلی را خواهیم داشت:
در ادامه قصد دارم از خصوصیت دیگری در css3 برای استایل دهی به تصویر موجود در متن پست استفاده کنم. این خصوصیت box-shadow است که در آموزش های قبلی نیز مورد بررسی قرار گفت که مجددا برای افرادی که مقاله های قبلی را نخوانده اند توضیح خواهم داد:
Box-shadow یکی دیگر از خصوصیات جدید css است که برای ایجاد سایه در المان ها کاربر دارد. این خصوصیت چهار پارامتر دریافت می کند که به صورت می باشند:
box-shadow: x-offset y-offset blur-radius color
x-offset: این پارامتر میزان انحراف سایه را در راستای افقی بر اساس پیکسل مشخص می کند.
y-offset: این پارامتر میزان انحراف سایه را در راستای عمودی بر اساس پیکسل مشخص می کند.
blur-radius: این پارامتر میزان محو شدگی از لبه های سایه را تعیین می کند.
color: این گزینه هم برای تعیین رنگ سایه به کار می رود.
نمونه ای از ایجاد سایه توسط این خاصیت را در تصویر زیر مشاهده می کنید:
حال این خصوصایت به به تصویر مجود نسبت دهید:
.blogPost img
{
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}
استایل دهی بخش یادداشت ها به صورت Zebra-striping:
این قسمت آخرین قسمتی است که در این مقاله قصد استایل دهی آن را دارم و سایر قسمت ها از قبیل خود فرم نظرات، فوتر و sidebar به دلیل اینکه نکات جدیدی در بر نداشتند، در فایل ضمیمه استایل دهی شده و قابل دانلود هستند.
اما Zebra-striping چیست؟
Zebra-striping به highlight کردن یکی در میان المان هایی که در یک مجموعه قرار دارند گفته می شوند، مثلا highlight کردن سطر های جدول به صورت یکی در میان یا highlight کردن هر یادداشت که در بخش نظرات این سایت هم قابل مشاهده است. در دوران قبل از css 3.0 برای این کار از روش های گوناگونی استفاده می شد، به طور مثال بعضی از افراد یک کلاس css جدا ایجاد می کردند و بعد از تعیین رنگ زمینه ی دلخواه، آن را به کمک جاواسکریپت یا زبان server side ئی که از آن استفاده می کردند، به صورت یکی در میان به المان های مورد نظر نسبت می دادند. اما css 3 کلاس کاذب جدیدی را مطرح کرد که اینکار را بسیار آسان می کند. استایل های زیر را برای بخش یادداشت ها در نظر بگیرید:
#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
کلاس کاذبی که در اینجا استفاده شده است، کلاس nth-child می باشد. nth-child مشخص می کند که n امین المان از المان های عنصر والد باید انتخاب شود. به عنوان مثال در کد بالا article هایی که در موقعیت های فرد (2n+1) قرار دارند و فرزند #comment هستند باید انتخاب شوند. این کلاس کاذب سه نوع پارامتر دریافت می کند:
* مقدار به صورت عددی: مثلا article:nth-child(3) که سومین عنصر را انتخاب می کند.
* مقدار به صورت keyword: در این حالت می توان از دو keyword استفاده کرد. odd برای انتخاب عناصر فرد و even برای انتخاب عناصر زوج.
* مقدار به صورت عبارت: در این حالت عبارت می تواند به صورت an+b باشد که مقدار های a و b تعیین کننده عناصری هستند که انتخاب می شوند. مثلا 3n+1، 3 تا در میان عناصر را انتخاب می کند.
کلاس های کاذب دیگری از قبیل nth-last-child، nth-of-type و nth-last-of-type وجود دارند که برای اطلاع بیشتر می توانید در مورد آن ها جستجو کنید.
خوب خسته نباشید، با اتمام این قسمت مقاله ی ما نیز به پایان رسیده است. نمونه ی پایانی طرحی که ایجاد کردیم از این قسمت قابل مشاهده است، کد html و css مقاله را نیز می توانید دانلود کنید:
دانلود: کد های HTML+ CSS
منبع: قالب آموزش داده شده برگرفته از سایت tutsplus می باشد که قسمت هایی از آن را فارسی کردم.