فهرست

با سلام جلسه چهارم از آموزش html را شروع می کنیم

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

از تگ <img/> استفاده می کنیم.

نکته: این تگ فرد است.

نتیجه کد	کد
	<html lang="en-us"> <head> <title>ELectroProgram</title> </head> <body> <img src="Desert.jpg"/> </body> </html>

اتریبیوت هایی که برای تگ img می توانیم استفاده کنیم title است. برای مثال:

نتیجه کد	کد
	<html lang="en-us"> <head> <title>ELectroProgram</title> </head> <body> <img src="Desert.jpg" title="طبیعت"/> </body> </html>

اگر موس را روی شکل نگه داریم کلمه “طبیعت” نشان داده می شود.

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

نتیجه کد	کد
	<html lang="en-us"> <head> <title>ELectroProgram</title> </head> <body> <img src="Desert1.jpg" title="طبیعت" alt="آموزش HTML"/> </body> </html>

نکته: آدرس تصویر را اشتباه وارد کردیم.

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

برای اینکه سایز تصویر خودمان را تنظیم کنیم از اتریبیوت های width , height استفاده می کنیم

نتیجه کد

کد

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <img src="Desert.jpg" title="طبیعت" alt="آموزش HTML" width="300px" height="300px"/>
   </body>
</html>

یا می توانیم از style استفاده کنیم که این بهتر است من توصیه می کنم که از این روش استفاده کنیم چون که بعدا کد هایی که در style تعریف شده است را میریزیم در css .

نتیجه کد

کد

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <img src="Desert.jpg" title="طبیعت" alt="آموزش HTML" style="width: 300px; height: 300px"/>
   </body>
</html>

لینک دهی به عکس ها

کار دیگری که می توانیم انجام دهیم لینک دادن به عکس است. از تگ a استفاده می کنیم.

نتیجه کد

کد

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <a href="#">
        <img src="Desert.jpg" title="طبیعت" alt="آموزش HTML" style="width: 300px; height: 300px"/>
    </a>
   </body>
</html>

همانطور که در تصویر مشاهده می کنید نشانگر موس به شکل “دست” درآمده است که نشان دهنده لینک دار شدن تصویر است.

ما می توانیم دور عکس کادری ایجاد کنیم که به آن می گوییم border.

نکته: این کدها را در style مینویسیم.

border-width: عرض کادر را مشخص می کند.
border-color:می توانیم برای کادرمان رنگ انتخاب کنیم.

border-style: می توانیم استایل خط کادرمان را مشخص کنیم. برای مثال به صورت خط چین باشد یا خط به هم پیوسته باشد یا…

نتیجه کد

کد

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <a href="#">
        <img src="Desert.jpg" title="طبیعت" alt="آموزش HTML" style=" width: 300px; height: 300px; border-width:20px; border-color:red; border-style:solid"/>
    </a>
   </body>
</html>

نکته: اگر سخت است که اینقدر طولانی برای کادر کد بنویسیم می توانیم به صورت زیر کوتاه بنویسیم.

نتیجه کد

کد

<html lang="en-us">
   <head>
       <title>ELectroProgram</title>
   </head>
   <body>
    <a href="#">
        <img src="Desert.jpg" title="طبیعت" alt="آموزش HTML" style=" width: 300px; height: 300px; border: 20px	solid	red"/>
    </a>
   </body>
</html>