تصاویر در Html

[javadnabavi]

سلام دوستان
تو این مقاله نحوه استفاده از تصاویر در html رو به صورت کامل و با جزئیات توضیح میدیم.البته دوستان دقت کنید که بعضی از این پیش نمایش ها مثل map و تراز بندی تصویر اینجا کار نمیکنه. دلیلش هم استایل این فروم هست. برای اینکه عملکردشو کامل ببینید بهتره مطلب اصلی رو مشاهده کنید. لینکش انتهای مقاله هست.
تصاویر در تگ <img>
در اچ تی ام ال, برای درج تصاویر, از تگ <img> استفاده می کنیم.

تگ <img> یک تگ تهی می باشد. حتما از آموزش های گذشته به یاد دارید که تگ تهی چیست. اگر یادتان باشد ما در HTML دو نوع تگ داشتیم. ۱- تگ باز و بسته شونده. ۲- تگ تهی.

تگ باز و بسته شونده مثل تگ <a> که برای درج لینک استفاده میشد. نمونه اش را در زیر ببینید:

HTML

<a href="http://webtoaster.ir">وب تستر</a>

همانطور که میبینید در کد بالا ما یکبار تگ را به صورت <a> باز کردیم (و درونش خصوصیت های لینک را تعیین کردیم), و در انتها به صورت </a> تگ را بستیم.

اما تگ های تهی, فقط باز می شوند و نیازی به بسته شدن ندارند. یعنی فقط یکبار تگ را باز می کنیم و نیازی نیست آنرا ببندیم. مثل این: <نام تگ>

خب, بعد از این مقدمه کوتاه, میرویم سراغ معرفی تگ <img> و نحوه استفاده از آن.

تگ <img> در ساده ترین حالت به شکل زیر نوشته می شود:

HTML

<img/>

حاشیه: شاید با خود بگویید آن اسلش (/) انتهای عبارت img چیست؟ یا بگویید مگر تگ img یک تگ تهی نیست؟ پس آن اسلش مزاحم آنجا چه کار می کند؟! پاسخ: راستش گذاشتن یا نگذاشتن اسلش در انتهای تگ img (قبل از بسته شدن علامت <) از نظر نمایش در مرورگر تفاوتی ایجاد نمی کند. اما اگر بگذارید بهتر و استاندارد تر است.

کد بالا هنوز چیز هایی کم دارد. برای اینکه یک تگ <img> حد اقل وظیفه اش که همان نمایش تصویر است را انجام دهد باید خصوصیت src را به آن اضافه کنیم. خصوصیت src آدرس تصویری که قرار است در سایت نمایش دهیم را مشخص می کند. فرمول زیر این امر را به سادگی بیان می کند:

HTML

<img src="آدرس url تصویر"/>

کافیست به جای عبارت آدرس url تصویر , آدرس تصویر مورد نظرتان را قرار دهید. به این ترتیب مرورگر تصویر شما را به ساده ترین شکل ممکن نمایش می دهد. به مثال زیر توجه کنید:

HTML

<img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png"/>

نتیجه کد بالا به شکل زیر است:

تا اینجا توانستید در نهایت مبتدیانگی! یک تصویر را با تگ <img> در مرورگر نمایش دهید. اما همین قدر کافی نیست. چیز های بیشتری میخواهیم به شما یاد بدهیم! پس ادامه ی آموزش را با دقت مطالعه کنید.

خصوصیت alt
همانطور که دیدید مهمترین خصوصیت در تگ img خصوصیت src بود که مخفف عبارت source می باشد و url تصویر را مشخص می کند.

اما خصوصیت بسیار مهم دیگری نیز در تگ <img> وجود دارد که همان خصوصیت alt است. خصوصیت alt از نظر اهمیت دست کمی از src ندارد چرا که در امر سئو بسیار مهم و حیاتی است. الان بیشتر بازش می کنیم.

وظیفه خصوصیت alt: این خصیصه, وظیفه تعیین یک متن جایگزین برای عکس را دارد. متن جایگزین متنی است که اگر تصویر در مرورگر به هر دلیلی لود نشود, به جایش این متن نمایش داده می شود. همچنین گوگل در بخش جستجوی تصاویرش, از متن جایگزین برای پیدا کردن بهتر تصاویر استفاده می کند. پس به شما اصرار می کنیم که هرگز خصوصیت alt را در تصاویرتان فراموش نکنید.

برای استفاده از خصوصیت alt باید طبق فرمول کلی زیر این خصوصیت را وارد تگ <img> کنید:

HTML

<img src="آدرس url تصویر" alt="متن جایگزین"/>

به مثال زیر توجه کنید:

HTML

<img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html"/>

نتیجه کد بالا:

باور کنید اگر بگویید: پس متن جایگزین اش کو؟! … همین الان ادامه آموزش را متوقف می کنیم! اگر با دقت به توضیحات بالا توجه کرده باشید باید متوجه شده باشید که گفتیم متن جایگزین فقط در صورتی نمایش داده می شود که تصویر لود نشود. حالا که تصویر لود شده متن جایگزین را می خواهید چه کار؟! اگر خیلی اصرار به دیدن متن جایگزین به جای تصویر بالا دارید, خودتان یک کاری کنید که تصویر لود نشود.

دوباره تکرار می کنم, اگر میخواهید سئوی خوبی داشته باشید خصوصیت alt را برای تصاویر تان فراموش نکنید.

تنظیم طول و عرض تصویر با width و height
به صورت پیشفرض, تصاویر در صفحات وب, با سایز اصلی خودشان نمایش داده می شوند. کافیست خودتان امتحان کنید و ببینید. اما ما به شما اصرار می کنیم حتما از خصوصیت width و height برای تنظیم طول و عرض تصاویر بهره ببرید. به دو دلیل:

۱- ممکن است دلتان بخواهد یک تصویر را با سایزی غیر از سایز واقعی اش, در صفحه وب به نمایش در بیاورید.

۲- حتی اگر دلتان نخواهد سایز تصویر را دستکاری کنید, بهتر است خصوصیت width و height را با همان اندازه واقعی تصویر, به تگ <img> اضافه کنید. چرا که اگر اینکار را بکنید مرورگر قبل از اینکه تصویر کاملا لود شود, تکلیف خودش را می داند و بر اساس سایز تعیین شده توسط شما, یک فضای خالی را برای عکس در نظر می گیرد تا پس از لود کامل تصویر, آن فضای خالی پر شود. این از آن نظر اهمیت دارد که اگر در یک صفحه تعداد زیادی عکس وجود داشته باشد, لود شدن مکرر تصاویری که بین متون قرار گرفته اند, مدام طول صفحه را تغییر می دهد و کاربر را با مشکل مواجه می کند. اما اگر طول و عرض را تعیین کنید به هیچ وجه این مشکل پیش نمی آید. به احتمال زیاد در بعضی سایت ها مشاهده کرده اید که وقتی وارد سایت می شوید و شروع به خواندن متن می کنید, مدام متون جا به جا می شوند و عکس های جدیدی که لود می شوند نظم مطلب را به هم می زنند. این به دلیل رعایت نکردن موردی است که به آن اشاره کردیم.

حال که با اهمیت تنظیم طول (height) و عرض (width) تصاویر در اچ تی ام ال آشنا شدیم, می پردازیم به نحوه قرار دادن این خصوصیت ها در تگ <img>.

استفاده از خصوصیت های width و height در اچ تی ام ال طبق فرمول کلی زیر است:

HTML

<img src="آدرس url تصویر" alt="متن جایگزین" width="عرض تصویر" height="طول تصویر"/>

نکته: به جای عرض تصویر و طول تصویر, باید عدد وارد نمایید. این عدد بر حسب پیکسل محاسبه می شود. به مثال زیر توجه نمایید:

HTML

<img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html" width="215" height="215"/>

نتیجه کد بالا:

اگر میخواهید از واحدی غیر از پیکسل استفاده کنید باید آن واحد را جلوی عدد بنویسید. مثلا اگر میخواهید از درصد استفاده نمایید باید یک علامت % جلوی عرض یا طول تصویر وارد کنید. به مثال زیر دقت نمایید:

HTML

<img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html" width="50%" height="215"/>

نتیجه کد بالا:

همانطور که می بینید, طول تصویر ۲۱۵ و عرض تصویر ۵۰ درصد می باشد. لازم به ذکر است که درصد در اینجا, بر اساس عرض عنصر والدش تعیین می شود.

حاشیه: شاید کد های تصویر بالا را باز کرده باشید و کلک مان را فهمیده باشید و با خود بگویید چرا از همان کدی که در بالا قرار داده ایم استفاده نکردیم؟ ما هم در جواب می گوییم: برای اینکه استایل های قالب وب تستر طوری طراحی شده اند که تمامی تصاویر موجود در مطالب با سایز استاندارد و واکنشگرا نمایش داده می شوند و اگر از کد بالا استفاده می کردیم نتیجه درست نمایش داده نمی شد. این هم شد یک نکته دیگر! پس بدانید هیچ چیز در اچ تی ام ال و سی اس اس مطلق نیست. ممکن است شما در جایی از اچ تی ام ال سایز تصویر را طبق نظر خودتان تنظیم نمایید, اما یک کد دیگر در استایل قالب یا سایتتان عمل آنرا خنثی کند. البته بحث در این مورد جایش اینجا نیست. انشالله وقتی آموزش های CSS وب تستر شروع شد به طور مفصل به آن نیز خواهیم پرداخت. پس خواهش می کنیم این “حاشیه” را خیلی جدی نگیرید و اگر گیج شدید بیخیالش شوید. فعلا چیز مهمی نیست.

خصوصیت align
این خصوصیت مکان قرار گیری تصویر, نسبت به عناصر کناری اش را تعیین می کند. مقادیر قابل تنظیم برای خصوصیت align شامل موارد زیر است:

• top: تصویر را نسبت به عناصر کناری, در مکان پایین تری قرار می دهد.
• bottom: تصویر را نسبت به عناصر کناری, در مکان بالا تری قرار می دهد.
• middle: تصویر را نسبت به عناصر کناری, در وسط قرار می دهد.

به نمونه های زیر توجه کنید:

HTML

<p>یک عکس <img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html"
width="215" height="215" align="middle"/>با خصوصیت align="middle"</p>

نتیجه کد بالا:

یک عکس

با خصوصیت “align=”middle

نمونه دوم (“align=”top):

HTML

<p>یک عکس <img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html" width="215" height="215" align="top"/>با خصوصیت align="top"</p>

نتیجه کد بالا:

یک عکس

با خصوصیت “align=”top

نمونه سوم (“align=”bottom):

HTML

<p>یک عکس <img src="http://webtoaster.ir/wp-content/uploads/learninghtmlrhum3.png" alt="آموزش قدم به قدم html" width="215" height="215" align="bottom"/>با خصوصیت align="bottom"</p>

نتیجه کد بالا:

یک عکس

با خصوصیت “align=”bottom

همچنین در صورتی که مقدار align را برابر با right یا left قرار دهید, تصویر در سمت راست یا چپ عناصر دیگر قرار می گیرد. کافیست خودتان امتحان کنید تا نتیجه اش را ببینید. (اینجا قرار نیست همه چیز را ما برایتان حاضر و آماده نشان دهیم! کمی هم خودتان زحمت بکشید و با کد ها بازی کنید. مطمئن باشید ضرر نمی کنید)

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

HTML

<a href="url">link text</a>

خب حالا کافیست به جای عبارت link text, یک تصویر قرار دهید. مثلا اینجوری:

HTML

<a href="http://webtoaster.ir"><img src="http://webtoaster.ir/wp-content/uploads/dokme.png" alt="دکمه" /></a>

نتیجه کد بالا:



ایجاد تصاویر با نواحی قابل کلیک با تگ <map>
این تگ یک تگ حرفه ای برای ایجاد تصاویری است که دارای نواحی قابل کلیک است. به عنوان مثال شما یک نقشه ایران دارید و میخواهید در صورت کلیک روی هر استان, صفحه ی مربوط به آن استان یا هر صفحه ی دیگری باز شود. در اینگونه موارد, از تگ <map> برای ساخت تصویر با نواحی قابل کلیک استفاده می شود. به یک نمونه توجه کنید:

این هم کدش:

HTML

<img id="Image-Maps-Com-image-maps-2016-06-03-153313" src="http://www.image-maps.com/m/private/0/bedi98b1pte4e8ibg577d67gd7_map.png" border="0" width="309" height="156" orgWidth="309" orgHeight="156" usemap="#image-maps-2016-06-03-153313" alt="" />
<map name="image-maps-2016-06-03-153313" id="ImageMapsCom-image-maps-2016-06-03-153313">
<area  alt="" title="مازندران" href="https://fa.wikipedia.org/wiki/%D8%A7%D8%B3%D8%AA%D8%A7%D9%86_%D9%85%D8%A7%D8%B2%D9%86%D8%AF%D8%B1%D8%A7%D9%86" shape="rect" coords="72,3,185,58" style="outline:none;" target="_self"  />
<area  alt="" title="سمنان" href="https://fa.wikipedia.org/wiki/%D8%B3%D9%85%D9%86%D8%A7%D9%86" shape="rect" coords="79,89,306,156" style="outline:none;" target="_self"  />
<area  alt="" title="سمنان" href="https://fa.wikipedia.org/wiki/%D8%B3%D9%85%D9%86%D8%A7%D9%86" shape="rect" coords="208,13,307,90" style="outline:none;" target="_self"  />
<area  alt="" title="سمنان" href="https://fa.wikipedia.org/wiki/%D8%B3%D9%85%D9%86%D8%A7%D9%86" shape="rect" coords="169,30,224,82" style="outline:none;" target="_self"  />
<area  alt="" title="تهران" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%87%D8%B1%D8%A7%D9%86" shape="rect" coords="0,58,145,87" style="outline:none;" target="_self"  />
<area  alt="" title="قم" href="https://fa.wikipedia.org/wiki/%D9%82%D9%85" shape="rect" coords="0,113,80,156" style="outline:none;" target="_self"  />
<area shape="rect" coords="307,154,309,156" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51,260,51" style="outline:none;" target="_self"  />
<area  alt="" title="سمنان" href="https://fa.wikipedia.org/wiki/%D8%B3%D9%85%D9%86%D8%A7%D9%86" shape="poly" coords="147,60,148,86,206,82,198,64" style="outline:none;" target="_self"  />
<area  alt="" title="تهران" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%87%D8%B1%D8%A7%D9%86" shape="poly" coords="9,27,7,58,78,55" style="outline:none;" target="_self"  />
<area  alt="" title="تهران" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%87%D8%B1%D8%A7%D9%86" shape="poly" coords="78,88,78,115,24,94,26,83" style="outline:none;" target="_self"  />
<area  alt="" title="قم" href="https://fa.wikipedia.org/wiki/%D9%82%D9%85" shape="poly" coords="24,96,17,113,69,111" style="outline:none;" target="_self"  />
<area  alt="" title="سمنان" href="https://fa.wikipedia.org/wiki/%D8%B3%D9%85%D9%86%D8%A7%D9%86" shape="poly" coords="206,74,209,93,137,85,148,77" style="outline:none;" target="_self"  />
<area  alt="" title="مازندران" href="https://fa.wikipedia.org/wiki/%D8%A7%D8%B3%D8%AA%D8%A7%D9%86_%D9%85%D8%A7%D8%B2%D9%86%D8%AF%D8%B1%D8%A7%D9%86" shape="poly" coords="74,7,74,48,3,10,23,0" style="outline:none;" target="_self"  />
</map>

اگر چیزی متوجه نمی شوید هیچ اشکالی ندارد. این قسمت از کار جزو مباحث بسیار پیشرفته html است. جزو مباحثی هم نیست که به طور روزمره نیازتان بشود و حتما لازم باشد که بلد باشید. اما بعدا در یک مطلب جداگانه مفصل در مورد تگ <map> برایتان توضیح می دهیم و حتی چند سایت معرفی می کنیم که بدون نیاز به دانستن دستورات مربوط به تگ <map>, به راحتی عکس هایی با نواحی قابل کلیک ایجاد کنید.
برای مشاهده قسمت های دیگه این آموزش از لینک زیر استفاده کنید:
http://webtoaster.ir/آموزش-قدم-به-قدم-html-بخش-اول-مقدمه/
لینک مطلب اصلی: http://webtoaster.ir/تصاویر-در-html/

 

[saeed.bp]

ممنونم از اطلاعات خوبی که بهم دادین .مطالبتون برام خیلی آموزنده بود

 

[mizfa]

خوبه