close
تبلیغات در اینترنت
آموزش قدم به قدم HTML – بخش چهارم: تصاویر
آخرين ارسال هاي تالار گفتمان
کمی طاقت داشته باشید...
عنوان پاسخ بازدید توسط
3 532 khanevadehh
1 599 ali1371
1 453 ali1371
1 589 ali1371
1 518 ali1371
3 1647 ali1371
2 161 ali1371
2 134 ali1371
آموزش قدم به قدم HTML – بخش چهارم: تصاویر
  • بازدید : (173)

HTML

سلام دوستان؛ اگر با قسمت های قبلی آموزش قدم به قدم HTML از cutedownload همراه بوده باشید, حتما میدانید که تا به اینجای کار, با مفاهیم اصلی در زبان HTMl و معرفی چند تگ مهم و پرکاربرد از جمله تگ <a> و تگ های عنوان آشنا شدیم. حال در بخش چهارم از این سری آموزشی, قصد داریم در مورد یکی از مهم ترین تگ ها در زبان HTMl با شما صحبت کنیم. این تگ چیزی نیست جز تگِ تصاویر . یک نفس عمیق بکشید, و با روحیه خوب آموزش را شروع کنید. قول می دهیم پشیمان نمی شوید!

تصاویر در تگ <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"/>

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

آموزش html
تا اینجا توانستید در نهایت مبتدیانگی! یک تصویر را با تگ <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"/>

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

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

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

تنظیم طول و عرض تصویر با width و height

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

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

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

width و height در html

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

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

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

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

<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"/>

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

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

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

خصوصیت align

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

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

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

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

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

یک عکسآموزش قدم به قدم htmlبا خصوصیت “align=”middle

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

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

یک عکسآموزش قدم به قدم htmlبا خصوصیت “align=”top

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

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

یک عکسآموزش قدم به قدم htmlبا خصوصیت “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> برای ساخت تصویر با نواحی قابل کلیک استفاده می شود. به یک نمونه توجه کنید:

Image Map

این هم کدش:

<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>, به راحتی عکس هایی با نواحی قابل کلیک ایجاد کنید. فعلا خدا نگهدار!

مطالب مرتبط
بخش نظرات این مطلب
بخش نظرات برای پاسخ به سوالات و یا اظهار نظرات و حمایت های شما در مورد مطلب جاری است.
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .
شما نیز نظری برای این مطلب ارسال نمایید:
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی