• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

9256 ۲۰ دی ۹۲

با عرض سلام خدمت دنبال کنندگان همیشگی سون لرن، در این جلسه از معرفی تگ های 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

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

نکته :

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

نکته :

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    meyti pugo(۲۵ دی ۱۳۹۲)

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

  • ‏‏
    ارشیا کبیری(۱ بهمن ۱۳۹۲)

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

  • ‏‏
    reza____ebliser(۳ بهمن ۱۳۹۲)

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

    • ‏‏
      سجاد دریس(۳ بهمن ۱۳۹۲)

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

  • ‏‏

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


    اگه اشتباه نکنم . :smile:

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram