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

- visibility ۰ mode_comment

در این مطلب با ادامه آموزش 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 باید چجوری اینکارو انجام بدیم؟

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

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

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.