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

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



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

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

0 189 ۱۲ مهر ۹۵

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

Markdown

کار با تصاویر در Markdown

همونطور که میدونید با استفاده از تگ img در HTML میتونین تصاویر مورد نظرتون رو درون وبسایتتون قرار بدین. تصاویر چنتا ویژگی دارن که میتونین براشون مشخص کنید. با استفاده از ویژگی src میتونین آدرس تصویر مورد نظرتون رو مشخص کنید. با استفاده از ویژگی alt میتونین یک متن برای عکس قرار داده که هم Screen Reader ها از اون استفاده کنن و هم زمانی که مشکلی برای لود عکس بوجود اومد، اون متن نمایش داده بشه. با استفاده از ویژگی title هم میتونین برای تصویر خودتون یک عنوان قرار بدین که هر وقت کسی بر روی تصویر مورد نظر هاور کرد، اون متن درون Tooltip نمایش داده بشه. نحوه قرار دادن تصویر در Markdown بسیار شبیه به قرار دادن لینک هست. کد زیر رو در نظر بگیرید:

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

میبینید که تصویر مورد نظر قرار گرفته. خروجی کد HTML بصورت زیر هست:

همونطور که دیدید و گفته شد، ویژگی src و alt قرار داده شدن. بهمین راحتی.

حالا شما میتونین به راحتی برای عکس خودتون ویژگی title هم قرار بدین و کاری کنید زمانی که کاربران بر روی تصویر مورد نظر هاور کردن، متن مورد نظر درون Tooltip نمایش داده بشه. برای اینکار بصورت زیر عمل میکنیم:

همونطور که دیدید برای قرار دادن ویژگی title برای تصویر، کاری مشابه با مبحث لینکها انجام دادیم. برای اینکار درون پرانتز و در انتهای اون، متن مورد نظر برای title رو درون " قرار میدیم. اگر این کد رو درون ابزار Stackedit قرار بدیم، بصورت زیر خواهد بود:markdown image 2

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

همونطور که دیدین، ویژگی title هم قرار داده شده.

همچنین به راحتی میتونین آدرس دهی رو در نقاط دیگه کدتون انجام بدین. فرض کنید کد زیر رو داشته باشیم:

تا اینجا که هنوز آدرس تصویر اون و title اون مشخص نیس. حالا میتونیم در جای دیگه ای از کدمون id رو مشخص کنیم. بصورت زیر:

ترکیب دو خط بالا، یک تصویر رو بوجود میاره که دارای ویژگی title = The Dojocat و ویژگی alt = Alt text هست. دیدید که چه راحت میتونین این کار رو انجام بدین.

حالا فرض کنید بخایم یک تصویر رو بصورت لینک قرار بدیم. بنظر شما در Markdown باید چجوری اینکارو انجام بدیم؟

خیلی راحته. کد زیر رو در نظر بگیرید:

همونطور که دیدید در ابتدا یک لینک رو قرار دادیم و بجای متن اون، یک تصویر رو قرار دادیم. بهمین راحتی.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram