تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۲ مهر ۱۳۹۵

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

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

![Minion](http://octodex.github.com/images/minion.png)

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

خروجی کد HTML بصورت زیر است:

<img src="http://octodex.github.com/images/minion.png" alt="Minion">

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

![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "Stormtroopocat")

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

خروجی HTML کد بالا بصورت زیر است:

<img src="http://octodex.github.com/images/stormtroopocat.jpg" alt="Alt text" title="Stormtroopocat">

 

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

![Alt text][id]

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

[id]: http://octodex.github.com/images/dojocat.jpg  "The Dojocat"

ترکیب دو خط بالا، یک تصویر را بوجود می‌اورد که دارای ویژگی title = The Dojocat و ویژگی alt = Alt text است. حالا فرض کنید بخواهیم یک تصویر را بصورت لینک قرار بدهیم به شکل زیر است:

[![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "Stormtroopocat")](https://github.com)

 

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

جلسات دوره

نظرات کاربران

محمد رضا قره زاده

سلام خوب اگه بخوایم به این عکس کوقعیت بدیم که کجا باشه چیکار باید بکنیم

نیاز به لاگین

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