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

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



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

آموزش استفاده از Markdown برای نوشتن محتوا (جلسه 9) - کار با لینکها در Markdown

0 116 ۱۱ مهر ۹۵

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

Markdown

کار با لینکها در Markdown

همونطور که میدونین شما میتونین با استفاده از تگ a درون HTML، لینکهای مورد نظر خودتون رو قرار بدین. در لینک دو ویژگی اصلی داره که عبارتند از ویژگی href و ویژگی title.

با استفاده از ویژگی href میتونین آدرسی که لینک به اون اشاره میکنه رو مشخص کنید و با استفاده از ویژگی title هم عنوان لینک رو مشخص کنید و زمانی که بر روی لینک هاور میشه، این عنوان نمایش داده میشه. همچنین ویژگی title بدرد Accessibility و Screen reader ها هم میخوره.

به راحتی میشه این کار رو درون Markdown هم انجام داد و لینک های مورد نظر خودمون رو بسازیم. برای اینکار باید از { و [ استفاده کنیم و با استفاده از اونا لینک مورد نظرمون رو بسازیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید در ابتدای این عبارت، کلمه Assemble درون [] قرار گرفته و این کلمه به عنوان متن لینک در نظر گرفته میشه. بعد از اون آدرس لینک رو درون پرانتز یا () قرار دادن. پس ابتدا متن یا چیزی که ما درون صفحه میبینیم رو درون [] و بعد از اون آدرس مورد نظر رو درون () قرار میدیم. اگر کد بالا رو درون ابزار آنلاین Stackedit قرار بدیم، خروجی بصورت زیر میشه:markdown link

همونطور که دیدید خروجی در سمت راست نمایش داده شده و میتونین بر روی اون کلیک کرده و به آدرس مورد نظر برید. همونطور که خواهید دید، زمانی که بر روی لینک مورد نظر هاور میکنیم، Tooltip نمایش داده نمیشه. در ادامه با استفاده از ویژگی title این کار رو هم انجام میدیم. خروجی HTML اون بصورت زیر هست:

همونطور که در بالا میبینید، کد HTML همونطور که انتظار داشتیم، تبدیل شده هست.

حالا برای اینکه درون Markdown به لینک مورد نظرتون یک title یا عنوان اضافه کنید، میتونین بصورت زیر عمل کنید:

همونطور که میبینید، بعد از اینکه آدرس لینک مورد نظرمون رو درون () قرار دادیم، عبارتی که قصد داریم به عنوان title قرار بگیره رو درون " قرار دادیم. اگر کد بالا رو درون Stackedit قرار بدیم، خروجی بصورت زیر میشه:markdown link 2

همونطور که میبینید، لینک مورد نظر در خروجی نمایش داده شده و زمانی که بر روی اون هاور میکنید، title اون درون Tooltip نمایش داده میشه. کد HTML خروجی اون بصورت زیر هست:

بهمین راحتی.

همونطور که میدونید ما از لینکها برای آدرس دادن به جاهای مختلف صفحه داخلی فعلی هم میتونیم استفاده کنیم. برای اینکار میتونیم درون ویژگی href لینک خودمون، id المنت مورد نظرمون رو قرار بدیم. با اینکار اگر بر روی لینک کلیک بشه، صفحه اسکرول میشه و اون المنت به ما نمایش داده میشه. کد زیر رو در نظر بگیرید:

حالا فرض کنید که یک المنت با id برابر با chapter-1 درون صفحه وجود داشته باشه. با کلیک بر روی این لینک به سمت اون المنت فرستاده میشیم. بهمین راحتی.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram