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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

تعدادی تگ HTML5 که ممکنه بلد نباشید (جلسه 1) : تگ mark

0 312 ۲۳ دی ۹۵

در این مطلب و مطالب بعدی قصد داریم تعدادی تگ مربوط به HTML5 که کمتر با اونا آشنایی دارید رو توضیح بدیم و کاربردهای اونا رو برای شما آشکار کنیم تا بتونین در کارهای بعدی از اونا استفاده کنید و سایتی بهینه تر و بهتر داشته باشید.html5 tags

همونطور که میدونین ما توسعه دهندگان وب تعدادی تگ HTML و ... رو در کنار همدیگه قرار میدیم و از قدرت همه اونا بهره میبریم تا سایت بعدی خودمون رو به وجود بیاریم. به احتمال زیاد شما با تگهای معروفی که درون HTML5 معرفی شده از قبیل article و header و footer و ... خیلی کار کرده اید و آشنایی کاملی دارید. اما به احتمال زیاد با همگی تگهای معرفی شده در HTML5 آشنایی کاملی ندارید و با بعضی از اونایی که خیلی معروف و کاربردی نیستن تا حالا کار نکردید. پس شما تا حالا از قدرت و کاربرد این تگها در سایتتون استفاده نکردید.

بعضی از این تگها کاملا جدید هستن و HTML5 اونا رو معرفی کرد. اما بعضی از تگهای دیگه درون HTML4 هم وجود داشتن و پیشنهاد شد که درون HTML5 هم حضور داشته باشن. تگهایی که از HTML4 تغییر کاربری دادن و به HTML5 هم اومدن ممکنه که شبیه به گذشته باشن و شاید تغییراتی کرده باشن و نحوه استفاده از اونا فرق کرده باشه.

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

برجسته کردن متون با تگ mark

مشخصاتی که برای تگ mark بیان شده، به ما میگه که این تگ باید برای علامت گذاری ارتباط (relevance) یا تحقیق و رسیدگی (scrutiny) مورد استفاده قرار بگیره.

توضیح دادن relevance یک مقدار سخت هست. المنتها و متون زمانی با هم ارتباط دارند که ما فعالیتی رو انجام میدیم و اون موارد در اون زمان برای ما مفید و کاربردی هستند (یا در آینده مفید واقع خواهند شد).

برای مثال اگر درون یک سایت واژه jQuery رو جستجو کنیم و مقاله هایی که مرتبط هستند نمایش داده شوند، شما میتونین اون کلمه هایی که با jQuery مرتبط هستند رو درون تگ mark قرار بدین. هدف از استفاده از تگ mark اینه که به مرورگر بیان میکنه که: "هی مرورگر، این چیزایی که اینجا هستن به اون کاری که انجام دادین مربوط هست".

مثال عملی و کاربردی:

ما میتونیم از تگ mark برای highlight کردن متون مورد نظرمون که ارتباط دارن استفاده کنیم. برای نشان دادن این موضوع سناریوی زیر رو در نظر بگیرید:

برای مثال یک صفحه بنام "ارزان ترین بسته های تعطیلات" داریم که درون اون بسته های مربوط به روز تعطیل رو با قیمت مربوط به هر کدوم قرار داده. این بسته ها از کمترین قیمت تا بیشترین قیمت و بصورت صعودی قرار داده شده اند. برای اون بسته هایی که در بالا قرار داده شدن و قیمتشون ارزونتره میتونیم فقط قیمتها رو درون تگ mark قرار بدیم. دلیل این کار اینه که هدف اصلی کاربرانی که به سایت ما میان اینه که بسته های ارزون رو پیدا کنن و ما با اینکار ارتباط رو برقرار میکنیم و بیشتر اون موارد رو تو چشم قرار میدیم. کد زیر رو در نظر بگیرید:

خروجی بصورت زیر هست:

همونطور که دیدید برای دو بسته اول، قیمتشون رو درون تگ mark قرار دادیم.

باید دقت داشته باشید که هدف از این تگ صرفا استایل دادن به متون نیست و برای اینکار میتونین از تگهای دیگه مثل span استفاده کنید و با استفاده از CSS به اونا استایل بدین. از این تگ برای نشان دادن مهم بودن متون استفاده نکنید و برای اینکار میتونین از تگ strong استفاده کنید. از تگ mark فقط زمانی استفاده کنید که میخاید متنی که به کاربر فعلی مربوط هست رو مشخص کنید. این تگ اهداف Accessibility هم داره و میتونین از مزایای اون بهره مند بشی.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram