نوشته های برچسب خورده: آموزش قدم به قدم

در قسمت های قبلی آموزش html با لینک ها و عکس ها در اچ تی ام ال به صورت جداگانه آشنا شده ایم. در این قسمت از آموزش به ترکیب لینک با عکس در html می پردازیم. روزانه با آیتم های زیادی در صفحات وب برخورد می کنیم که ترکیب لینک ها با عکس هستند.

اضافه کردن لینک به تصاویر

تا این جای کار نحوه اضافه کردن لینک و عکس به صفحات html را یاد گرفته ایم. حال می خواهیم یک عکس را لینک کنیم.

ابتدا یک تگ لینک باز می کنیم و برای مثال آن را به پردیس وردپرس لینک می کنیم.

<a href = “http://pardiswp.com”>

این بار به جای نوشتن متن بین تگ های لینک یک تگ تصویر قرار می دهیم.

<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/>

و در آخر تگ لینک را می بندیم و کار تمام است، عکس مورد نظر لینک شده است.

<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/> </a>

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

در قسمت چهارم آموزش html با لینک ها آشنا شدیم. در این قسمت در مورد عکس ها و اضافه کردن آن ها به صفحات وب صحبت می کنیم.

اضافه کردن عکس

برای اضافه کردن عکس در اچ تی ام ال از تگ <img> استفاده می کنیم. بعد از img آدرس عکس را وارد می کنیم. برای این کار از اتربیوت src به صورت زیر استفاده می کنیم.

<img src=”آدرس عکس”/>

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

اتربیوت alt

این صفت در واقع متنی است که اگر عکس ما به هر دلیلی لود نشود به جای آن نشان داده می شود. این ویژگی در جستجو های گوگل هم استفاده می شود. همچنین alt برای افراد معلول در دستگاه های خواندن صفحه مانند بریل نیز کاربرد دارد.

<img src=”url” alt=”کلمه یا متن مورد نظر”/>

تنظیم ابعاد تصویر

برای تنطیم اندازه تصویر از صفت style استفاده می کنیم. اندازه تصاویر را بر حسب پیکسل مشخص می کنیم.

<img src=”url” style=”width:250px; height:350px;”/>

استفاده از اتربیوت style همیشه ضروری نیست و می توانید طول و عرض را به صورت مستقیم بنویسید. مثلا کد زیر مانند فوق عمل می کند:

<img src=”url” width=”350px” height=”250px”/>

پایان قسمت پنجم