همه ما با اهمیت وجود تصاویر در سایت آشنا هستیم. با نوشتن کدهایی خاص به راحتی می توان تغییراتی روی تصاویر ایجاد کرد.در این درس به اهمیت این کدها برای تغییرات در تصاویر سایت آشنا می شوید.
در اين درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمايش تصاوير و همچنين تنظيم محل آنها در سندهای HTML آشنا خواهيد شد.
تگ img و شناسه src يا source
در زبان HTML تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.
مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه HTML، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش test.jpg ، کافی است که به جای url فقط نام تصوير يعنی test.jpg را بنويسيد و اگر تصوير در سايتی ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com دارای url ی برابر https://www.google.com/intl/en_com/images/srpr/logo3w.png است.در اين url نام تصوير logo3w.png بوده، در دايرکتوری images قرار داشته و روی وب سايت google.com قرار دارد.
{rsmembership category="1"}
شناسه های width و height در تگ img
کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد:
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png " width="276" height="110" >
توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های width و height قيد کنيد، اين کار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير مي داند که چه مقدار از صفحه نمايش بايد به تصوير مزبور اختصاص داده شود و قبل از لوذ شدن تمامی تصاوير مرورگر شروع به نمايش قالب و چارچوب کلی صفحه خواهد کرد.)
شناسه Alt يا "alternate text" يا متن جايگزين
اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمايش مي دهند، متن و text ی که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس برروی يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصوير قابل نمايش ميباشد. مثال زير نحوه درج تصويری را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/bpd_88_31.jpg" alt="host" >
وبلاگها و اضافه کردن تصاویر:
اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:
الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست.
ب) تصویر روی هارد کامییوتر شما است و هنوز بر روی وب منتقل نشده است. در این حالت چون بعضی سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را در یک سایت آپلود تصاویر (با جستجوی واژه آپلود عکس در گوگل ، سایتهای بسیاری گوگل به شما معرفی خواهد کرد) منتقل کنید. سپس تصویرتان را Upload کرده و در شناسه src از تگ img آدرس جدید تصویر را قید کنید.
چند نکته مهم:
اگر در يک صفحه HTML از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
تگ های تصاوير
Start Tag
کاربرد
<img> درج تصوير
<map> تعريف Image map
<area> تعريف ناحيه ای در داخل Image map
{else}
برای دسترسی به ادامه مطلب می بایستی در وب سایت اشتراک داشته باشید
{/rsmembership}