آموزش html5 وcss از صفرتا 100 - بخش دوم | دروپال فارسی؛ آموزش و قالب

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

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

<div>

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

<section>

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

<article>

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

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

<body>

<h1>heading</h1>

<h2>section heading</h2>

<p>content</p>

</section>

<h1>heading</h1>

<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=”/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 > شما می توانید اشیای گرافیکی مثل مربع ، دایره ، تصاویر و ... را بر روی صفحه ایجاد نمایید .

nazanin-k

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام مرکز دروپال ایران

طراحی سایت

آموزش طراحی سایت

با عضويت در خبرنامه از جديدترين محصولات و تخفيف هاي ما با خبر شويد

فرم جستجو

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

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