آموزش html5 وcss از صفرتا 100 - بخش دوم

html5 بین طراحان سایت و بهینه سازان سایت مدت ها است که شناخته شده است همانطور که در درس اول در سری آموزش های طراحی سایت در مرکز دروپال ایران گفته شد html5 با قابلیت های جدید امکانات متعددی را برای طراحان وب فراهم نموده است و وب مستران html5 را یک گام رو به جلوی بزرگ می دانند که انها را قادر می سازد برنامه های چند رسانه ای قدرتمندی را توسعه دهند. در این آموزش سعی داریم با معرفی تگ های ساختاری html آنها را در قالب مثال آموزش دهیم.

- تگ های ساخت بلوک :

 <div>

 اين تگ يک قسمت و ناحيه مجزا را بر روی صفحه تعيين می کند . از اين تگ معمولا برای تقسيم بندی فضای صفحه به نواحی مجزا استفاده می شود.

<section>

این تگ برای ایجاد یک بخش یا فضای مجزا ، بر روی صفحه استفاده می شود .

 <article>

این تگ یک عنوان برای صفحه ایجاد می کند.

در مثال زیر از دو تگ بالا استفاده کرده ایم :

<doctype html !>

<html lang =”en”>

<body>

<article>

<h1>heading</h1>

<section>

<h2>section heading</h2>

<p>content</p>

</section>

<h1>heading</h1>

<section>

<h2>section heading</h2>

<p>content</p>

</section>

</article>

</body>

</html>

- تگ های عنوان :

<header>

 ازاین تگ برای شروع عنوان استفاده میشود .

<footer>

 از این تگ برای افزودن اطلاعات به محتوا شامل حقوق کپی وب سایت ، لینک و ... استفاده میشود .

<hgroup> 

برای گروه بندی نمودن هریک از تگ های <h1>-<h6> به کار میرود.

<h1>-<h6>

 همانند Html4 این تگ ها از لحاظ فونت و ضخامت از <h1> به <h6> کوچک میشوند .

- سایر تگ های اضافه شده در html5

 <nav>

از این تگ برای نمایش منو و ساختارهای مشابه آن استفاده می شود .

<aside>

برای ایجاد sidebar در یک صفحه از این تگ استفاده میشود .

<figure>

از این تگ برای مجزاسازی گراف ، عکس ، دیاگرام از متن استفاده می شود .

در مثال زیر از تگ <nav> برای ایجاد منو استفاده شده است :

<nav>

<h2 class=”ally”> main navigation</h2>

<ul>

<li><a href=”/”>home</a></li>

<li><a href=”/blog/”>weblog</a></li>

<li><a href=”/about/”>about</a></li>

<li><a href=”/contant/”>contant</a></li>

</ul>

</nav>

 

با ما همراه باشید...

در آموزش بعدی به معرفی تگ canvas می پردازیم .از تگ < canvas > در Html 5 برای طراحی اشیا و اشکال گرافیکی بصورت Run Time به کمک زبان های اسکریپتی مثل مثل جاوا اسکریپت استفاده می شود . بوسیله تگ < canvas > شما می توانید اشیای گرافیکی مثل مربع ، دایره ، تصاویر و ... را بر روی صفحه ایجاد نمایید .

تصویر مصطفی حاجتمند
مصطفی حاجتمند
د., 05/26/2014 - 23:35

خیلی خوب بود خیلی از این تگ ها رو نمی دونستم ....مفید و پر مغز .... دستتون درد نکنه....


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing