آیا می خواهید در وب سایت خود از عکس استفاده کنید؟ اگر تصاویر شما در صفحه وب سایتتان لود نشد، چه کار می کنید؟ آیا می دانید عکس ها چگونه در افزایش سئوی سایت به شما کمک خواهند کرد؟ ما به شما خواهیم آموخت که چگونه تصاویر را در طراحی صفحات وب بکار ببرید. عکس ها زیبایی خاصی به صفحات وب شما می دهند و سایت را از حالت یکنواختی درمی آوردند. بـرای ایـجاد تصویر در صـفحه وب سایت خود باید از تگ 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]
دسترسی سریع :
- آموزش قبلی : فیلم آموزش ایجاد لینک برای ارسال ایمیل در صفحات وب
- آموزش بعدی : فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس
- لیست فیلم ها : فیلم های آموزش جامع HTML
متن فیلم آموزش کار با عکس ها در 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]
نتیجه :
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]
نتیجه :
حال عکس را با آدرس اشتباه می نویسیم تا عکس لود نشود و متن جایگزین نشان داده شود.
[html]
<img src="https://onliner.co/web.p2ng" title="onliner" alt="no" width="50" height="30"/>
[/html]
نتیجه :
لینک کردن تصاویر
برای لینک کردن تصاویر می توانید تگ 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]
نتیجه :
اگر می خواهیم عکس مورد نظر ما ابتدا کوچک باشد و با کلیک روی آن عکس به اندازه واقعی نمایش داده شود، باید صفت 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]
نتیجه :
قبل از کلیک
پس از کلیک
دسترسی سریع :
- آموزش قبلی : فیلم آموزش ایجاد لینک برای ارسال ایمیل در صفحات وب
- آموزش بعدی : فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس
- لیست فیلم ها : فیلم های آموزش جامع HTML
