معرفی HTML 5 : فصل اول – جلسه سوم (تگ های کنترلی)

- visibility ١٠ mode_comment

با عرض سلام خدمت دنبال کنندگان همیشگی سون لرن، در این جلسه از معرفی تگ های HTML5 به تگ های کنترلی صفحه خواهیم پرداخت. این تگ ها جهت کنترل و هم گروه کردن بعضی از تگ ها بدون نیاز به استفاده از تگ های div و span است.

<figure> و <figcaption>

همانطور که می دانید استفاده از تصاویر جهت ارائه مطالب بسیار می تواند تاثیر گذارتر باشد از یک مطلب بدون تصویر. استفاده از تصاویر در یک صفحه وب با استفاده از تگ img صورت می گیرد. ولی هر تصویری یک توضیح خاصی را نیز به همراه دارد (منظور صفت title و alt است) ولی بعضی مواقع موردنیاز است توضیح تصویری در کنار آن تصویر باشد (مانند اسلایدر ها که همراه تصویر توضیح مورد نظرش نیز در کنارش قرار می گیرد). HTML5 جهت بهینه سازی کدها، برای ایجاد چنین حالاتی که نیاز است، یک تصویر یا متن به همراه توضیحاتش نمایش داده شود دو تگ figure و figcaption را معرفی کرد.

به کد زیر توجه کنید.

البته این تگ فقط مخصوص تگ img نیست، برای سایر تگ ها که نیاز به توضیح دارند، و بایستی همراه با توضیحشان در یک تگ جهت کنترلشان قرار بگیرند ازتگ های figure و figcaption استفاده می کنیم به طور مثال:

نکته ای که بایستی به آن توجه کنید، آمدن تگ figcaption یا به عنوان اولین فرزند تگ figure یا آخرین فرزند است. در ضمن می توانید بیش از یک تگ به همراه تگ figcaption استفاده کنید به طور مثال :

<hgroup>

این تگ همانطور که از نامش پیداست، برای کنترل تگ های heading استفاده می شود. (منظور تگ های h1 تا h6 است.) به طور مثال :

به این نکته توجه کنید که این تگ "فقط" برای کنترل تگ های heading است، به معنای اینکه هیچ تگ دیگری جز شش تگ h1, h2 ,h3 ,h4 ,h5 ,h6 نمی تواند درون این تگ قرار بگیرد.

به طور مثال کد زیر توسط validator دارای اشتباه در نظر گرفته می شود :

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

<details>

تگ بعدی که برای کنترل تگ های دیگر استفاده می شود، تگ details می باشد. این تگ برای توضیح های بیشتر، یا به عنوانی ارائه جزییات بیشتر یک مطلب استفاده می شود. این تگ یه حالت فروریختی یا collapsible برای متن مورد نظرمان ایجاد می کند.

درضمن درون آن از تگ دیگری با نام <summary> استفاده می شود که حاوی توضیح اصلی خواهد بود.

جهت بهتر روشن شدن مطلب، به مثال زیر دقت کنید.

نتیجه در مرورگر :

f1-j3-p1

که با کلیک بر روی نام پیامبر (ص) سایر توضیحات به شکل فروریختی نمایش داده خواهد شد.

info نکته :

البته همه مرورگرها بدرستی از این تگ پشتیبانی نمی کنند. این تگ فقط در مرورگر chrome کار کرد و ما بقی مرورگر ها (آخرین ورژن ها منظورم هست) از این تگ پشتیبانی نکردند!!

info نکته :

تگ دیگری نیز به نام <ruby> وجود دارد که مورد استفاده متون چینی و ژاپنی است، یعنی هرگاه بخواهیم از این متون استفاده کنیم، آن ها را درون این تگ قرار می دهیم.

به دلیل اینکه این تگ مورد استفاده ما قرار نمی گیرد، از معرفی آن خودداری می کنم.

بسیار خب دوستان، این جلسه نیز به پایان رسید، امیدوارم که مفید بوده باشه در جلسه آینده به تگ های جدید قالب بندی متون خواهیم پرداخت.

comment دیدگاه کاربران

سلام و خدا قوت به همتون
می خواستم درخواست کنم بیشتر در مورد طراحی ریسپانسیو مطلب بزارید …

h1987

سلام.مرسی از آموزشی. 😉
یه سوال داشتم.این درسته که میگن از نظر امنیت html5 خیلی پایینه؟؟

لقمان آوند

خیر دوست عزیز

meyti pugo

ممنون آموزش خوب و روونی بود

ارشیا کبیری

سلام
منم درخواست یادگیری تگ های HTML5 رو میخواستم . ممنون میشم کامل و جامع ادامه بدین و نحوه استفاده و کاربرد درست اونها رو بگید . با تشکر

reza____ebliser

عزیز مرورگر های از چه نسخه ای به بعد ساپپورت میکنن ؟

سجاد دریس

تقریبا همه ی مرورگرهای جدید از نود درصد html5 پشتیبانی می کنند.
اما از چه نسخه ای!
کروم و سافاری از ورژن 3 به بعد.
موزیلا از ورژن 3.5 به بعد
اینترنت اکسپلورر از نسخه 9 به بعد.

reza____ebliser

ممنون عزیز از راهنماییت

mm021

سلام خسته نباشید .
نماز روزه هاتون قبول ♥
شمایکی از فرق های دیگه html5 رو نزاشتید :
فراخوانی فایل ها هم در html5 فرق کرده مثل فراخوانی css js


اگه اشتباه نکنم . 🙂

سجاد دریس

چه فرقی؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.