فیلم آموزش کار با عکس ها در HTML

آیا می خواهید در وب سایت خود از عکس استفاده کنید؟ اگر تصاویر شما در صفحه وب سایتتان لود نشد، چه کار می کنید؟ آیا می دانید عکس ها چگونه در افزایش سئوی سایت به شما کمک خواهند کرد؟ ما به شما خواهیم آموخت که چگونه تصاویر را در طراحی صفحات وب بکار ببرید. عکس ها زیبایی خاصی به صفحات وب شما می دهند و سایت را از حالت یکنواختی درمی آوردند. بـرای ایـجاد تصویر در صـفحه وب سایت خود باید از تگ img استفاده کنید.

آنچه در این فیلم آموزشی خواهید آموخت :

  • آموزش قرار دادن عکس در html
  • معرفی برخی صفات تگ img در اچ تی ام ال، مانند : src, alt, title, width, height
  • بیان فواید صفت alt برای سئوی سایت و کاربرد آن در تگ img
  • آموزش نحوه لینک کردن عکس ها

[hdplay id=10]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]

[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/image.mp4′]دانلود فیلم آموزش کار با عکس ها در HTML[/video_download]
[/free_vip]

دسترسی سریع :

متن فیلم آموزش کار با عکس ها در HTML

عکس ها در html

عکس ها در html با تگ img نوشته می شود. img جزء تگ های self close است که به صورت زیر نوشته می شود.

[html]
<img />
[/html]

این تگ هم بدون آدرس معنایی ندارد. پس حتما باید آدرس عکس را وارد کنیم تا عکسی برای ما نمایش داده شود. آدرس عکس در تگ img را با صفت src در صفحه وب خود مشخص می کنیم.

[html]
<img src="آدرس تصویر" />
[/html]

[html]
<img src="https://onliner.co/web.png" />
[/html]

نتیجه :

img1

attribute های img

Img چندین attribute دارد که ما به مهم ترین آن ها اشاره خواهیم کرد:

title=”توضیح درباره عکس”

alt=”متن جایگزین تصویر”

width=”نمایش با عرض”

height=”نمایش با ارتفاع”

نکته : دقت کنید که به کار بردن صفت alt به دو دلیل ضروری می باشد :

  • اگر تصویر به هر دلیلی لود نشد، متن جایگزین آن نمایش داده شود.
  • با این صفت اطلاعات بیشتری را به موتورهای جستجو و رباط هایی که سایت را پیمایش می کنند، میدهیم. در واقع برای سئوی سایت، بهتر است این صفت را حتما به کار ببریم.

مثال :

[html]
<img src="<a href="https://onliner.co/web.png">https://onliner.co/web.png</a>" title="onliner" alt="no" width="50" height="30"/>
[/html]

 

نتیجه :

img2

حال عکس را با آدرس اشتباه می نویسیم تا عکس لود نشود و متن جایگزین نشان داده شود.

[html]
<img src="https://onliner.co/web.p2ng"  title="onliner" alt="no" width="50" height="30"/>
[/html]

 

نتیجه :

img3

 

لینک کردن تصاویر

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

مثال :

می خواهیم زمانی روی عکس کلیک می کنیم به سایت آنلاینر برویم :

این لینک و عکس مورد نظر ما است :

[html]
<a href="https://onliner.co"></a>
<img src="https://onliner.co/web.png" title="onliner" alt="web" />
[/html]

لینک شدن عکس :

[html]
<a href="<a href="https://onliner.co">https://onliner.co</a>"><img src="https://onliner.co/web.png"
 
title="onliner" alt="web" /></a>
[/html]

نتیجه :

img4

 

اگر می خواهیم عکس مورد نظر ما ابتدا کوچک باشد و با کلیک روی آن عکس به اندازه واقعی نمایش داده شود، باید صفت href تگ a را بصورت زیر تعریف کنیم :

[html]
<a href="https://onliner.co/web.png"><img src="https://onliner.co/web.png"  title="onliner" alt="web" width="50" height="30" /> </a>
[/html]

نتیجه :

قبل از کلیک

img5پس از کلیک

img6

دسترسی سریع :

به این صفحه رتبه دهید
مشاوره رایگان
Scroll to Top