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

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



  آیا می دانید تا کنون 6271 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

14807 ۱۵ دی ۹۲

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

در HTML 4 دو روش برای نامگذاری تگ ها وجود داشت.

  1. استفاده از id
  2. استفاده از class

که id برای نامگذاری قسمت های منحصر به فرد، و class برای style دهی استفاده می شد. به طور مثال یک وبسایت معمولا دارای یک header است پس برای نامگذاری تگ آن از id با مقدار header استفاده می کردیم. یا به طور مثال برای استایل دهی نوشته های آبی رنگ سایت از class با مقدار blue-text استفاده می کردیم. البته این نوع نامگذاری استاندارد یا قانون نبود، ممکن است شخصی از class با مقدار blue-text برای logo استفاده کند و یا... ولی معمولا نامگذاری ها مفهومی است و هر نام می بایست دقیقا قسمتی را که تشکیل می دهد را بدرستی معرفی کند.

در سال 2005 تحقیقی به عمل آمد که چه تعداد از طراحان وب، از صفت های id و class جهت نامگذاری تگ ها استفاده می کنند. در این تحقیق مشخص شد که بیش از یک بیلیون سایت از این دو صفت استفاده کرده بودند. تصویر زیر پراستفاده ترین نام های استفاده شده برای این دو صفت است :

f1-j2-p1

با توجه به پراستفاده ترین نام ها W3C تصمیم گرفت که کار طراحان وب را ساده تر کند و بجای استفاده از صفت های id و class جهت نامگذاری ساختار صفحه، تگ هایی با همین نام ها ایجاد کند که به تگ های معنایی یا semantic elements معروفند.

نکته :

بعضی از اسامی فوق مانند btamarker یا nobulletcontent به صورت خودکار توسط نرم افزارهایی همانند فرانت پیچ و ... ایجاد می شوند. و با توجه به اینکه این اسامی از نسبت بالایی برخوردارند به تگ هایی برای html تبدیل نشده اند.

تگ جدید HTML5

در HTML5 دقیقا 27  تگ جدید اضافه شده است که تقریبا نیاز ما را به استفاده از نام های مختلف برای تگ ها و همچنین استفاده بیش از حد از تگ  div بی نیاز می کند. برای مثال به شکل زیر که قسمتی از یک سایت خبرگذاری است، تفاوت ایجادش با html4 و html5 را ببینید

f1-j2-p2

همانطور که می بینید، در html5، هم نام تگ ها و هم تعداد آن ها متناسب با ساختار صفحه است.

ولی در html4 مجبور بودیم از تعداد زیادی تگ div استفاده کنیم به علاوه اینکه برای هر کدام نامی را نیز اختصاص می دادیم زیرا همه قسمت ها فقط یک تگ بودند و تعریف استایل بدون تعریف نام مشکل بود.

تگ های جدید معرفی شده ی جدید برای ایجاد ساختار صفحه عبارتند از :

Header : جهت ایجاد قسمت سرصفحه استفاده می شود.

Footer : جهت ایجاد قسمت پانوشت استفاده می شود.

Nav : جهت ایجاد منوها استفاده می شود.

Aside : جهت ایجاد ستون های کناری استفاده می شود.

Section : جهت ایجاد بخش های کنترلی استفاده می شود.

Article : جهت ایجاد مطالب (منظور از مطالب فقط پست ها نیست) استفاده می شود.

شکل زیر محل قرار گیری تگ های فوق در ساختار یک صفحه را نمایش می دهد.

f1-j2-p3semanti

نمونه کد زیر ساختار یک صفحه وب html5 را نمایش می هد :

کد کاملتر را در این صفحه به همراه استایل و همچنین قابل اجرا در ie هشت به پایین بدون استفاده از html5shiv را ببینید

نکته :

نکته ای که حتما در هنگام باگ گیری تگ های HTML5 در ie درنظر بگیرید. این است که وقتی تگ ها را با استفاده از javascript تعریف کردید. با استفاده از css حتما باید نوع المنت را اینکه block هست یا inline تعیین کنید.

تگ های فوق که معرفی کرده ایم همگی block هستند. در صورت تعریف نکردن این خصوصیت، تگ ها به صورت inline در نظر گرفته می شوند.

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

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

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

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

  • ‏‏
    مهشاد کلانتری(۱۵ دی ۱۳۹۲)

    خوب بود
    البته من جاهایی هم دیدم که برای ستون کناری از aside استفاده نمیکنند و از section استفاده میکنند قضیش چیه؟ 💡

    • ‏‏
      لقمان آوند(۱۵ دی ۱۳۹۲)

      هر دوی این تگها یه جورایی برای گروه بندی کردن عناصر مرتبط و شبیه همه . ولی برای گروه بندی کردن منوهای کنار سایت (که همون عناصر مرتبط به هم توی سایدبار هستند) بهترین گزینه همون aside هست .
      از نظر وب معنایی استفاده از aside نسبت به section برای سایدبار ارجحیت داره . از section برای گروه بندی عناصر مرتبط به هم در جاهای دیگه استفاده کنید .

  • ‏‏
    محمد بابازاده(۱۵ دی ۱۳۹۲)

    ممنونم سجاد جان

  • ‏‏
    علی امینی(۱۵ دی ۱۳۹۲)

    سلام سجاد جان
    مطلب مفید و کاربردی بود.
    یا علی

  • ‏‏
    سایت عاشقانه 98 لاو(۱۵ دی ۱۳۹۲)

    قالب جدید قشنگه ❓ ❓ ❓ ، و چرا دیگه آخرین ارسالی ها ایمیل نمیشه برام؟ 😥

  • ‏‏

    انتقاد وارد می شود . :)
    چرا همیشه باید غلط املایی داشته باشید چرا چرا ؟؟؟؟؟؟؟
    (((((در این تحقیق مشخص شد که بیش از یک بیلیون سایت از این دو صفت استفاده کرده ))))))

    یک بیلیون یعنی چقدر 😯

    • ‏‏
      کیوان علی محمدی(۱۵ دی ۱۳۹۲)

      یک بیلیون اختصاری برای 1000 میلیون یا همون یک میلیارد هستش.

      • ‏‏

        واقعا جدیده 😯 😯

        • ‏‏
          کیوان علی محمدی(۱۵ دی ۱۳۹۲)

          نه اتفاقا جدید نیست، خوب بهتره اینم بدونید که ما یک تریلیون هم داریم که میشه 1000 1000 میلیون (یه چیزایی در یک هفدهم بدهی کل ایالات متحده آمریکا- یعنی بدهی ایلات متحده میشه نزدیک 17 تریلیون دلار $)

        • ‏‏

          تریلیون رو خوب شنیدم ولی بیلیون رو نشنیدم

    • ‏‏

      خدا شفات بده 😀 (جهت خنده ناراحت نشید) رفیق ما ایرانی ها میگیم میلیارد و کلمه اصلی بیلیون هستش موفق باشید

  • ‏‏

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

  • ‏‏
    مهشاد کلانتری(۱۶ دی ۱۳۹۲)

    من هرکار میکنم نمیتونم وارد سایت بشم 😥

    • ‏‏
      رضا ساطع بیدگلی(۱۸ دی ۱۳۹۲)

      یعنی چی ؟؟؟
      خوب سریع به آقا لقمان خبر بدید

  • ‏‏

    ممنون نکات خوبی بود استفاده کردیم.

  • ‏‏

    بسیار عالی هست کارتون. بینهایت سپاسگزارم. سایتتون رفت جز بوک مارک من . بازم مچکر

  • ‏‏
    yasin001(۷ آذر ۱۳۹۳)

    مرسی عالی بود، فقط من منظورتون رو از block و inline نفهمیدم میشه بیشتر توضیح بدید . آخه من کمی مبتدی ام 😥

    • ‏‏
      لقمان آوند(۷ آذر ۱۳۹۳)

      المان های block کل عرض در برگیرندشون رو میگیرند و فقط خودشون در همون سطر قرار می گیرن به ص.رت پیش فرض .
      در صورتی که المان های inline در همون سطر و در لابلای محتوای سطر قرار می گیرند.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram