Една от най-силните характеристики на езика HTML е възможността да разполагате картинки върху страницата си. Това става с елемента <IMG> (image) и атрибута му SRC (source), като след SRC записвате името на файла:
<HTML>
<HEAD>
<TITLE> DOLPHIN </TITLE>
</HEAD>
<BODY>
<IMG SRC=“dolphin.jpg>
</BODY>
</HTML>
На екрана трябва да ви се появи нещо подобно (ако картинката е същата, ако ли не ще се появи тази, която сте си избрали).
В HTML най-често се използват графичните формати GIF (.gif) и JPEG (.jpg).
- Предимството на първия е че може да съдържа анимация и прозрачен фон, но се ограничава само до 256 цвята.
- При втория формат няма ограничение за цветовете и картинките са с по-високо качество, но пък нямате прозрачен фон, нито анимация. Картинката по-горе е от типа JPEG.
- Когато слагате картинка на web страницата си трябва да знаете от колко точки е съставена хоризонтално и вертикално. За да видите това кликнете с десния бутон на мишката върху картинката и от менюто изберете Properties за да видите от колко точки е картинката (размерът й в пиксели).
- Можете да свиете или разширите изображението с атрибутите WIDTH (ширина) и HEIGHT (височина) на елемента <IMG>. Например нека направим същата картинка на делфин да се показва като 150Х187 точки (пиксела):
<IMG SRC=“dolphin.jpg“ WIDTH=“150″ HEIGHT=“187″> - На екрана ще я видите по този начин:
- В нашия случай картинката е намалена наполовина и затова формата й не се промени. Ако не спазим необходимата пропорционалност между височина и ширина, картинката ще се деформира (смачка).
- Картинките могат да се използват и за фон на web страници. Това става с атрибута BACKGROUND на елемента <BODY>. Нека направим страница, чиито фон да е същата картинка на делфин:
<HTML>
<HEAD>
<TITLE> background </TITLE>
</HEAD>
<BODY BACKGROUND=“dolphin.jpg“>
</BODY>
</HTML>
В браузъра ще се появи картинката като фон, вместо белия такъв по подразбиране.
- Можете да направите фона на страницата неподвижен (при скролиране нагоре-надолу да не се мести заедно със страницата). Това става с атрибута BGPROPERTIES=“fixed“ разположен след атрибута BACKGROUND. Ето така : <BODY BACKGROUND=“dolphin.jpg“ BGPROPERTIES=“fixed“>. За съжаление, BGPROPERTIES се разпознава само от Internet Explorer.
- Картинките често служат и като хиперлинкове към други страници (виж ХИПЕРЛИНКОВЕ). За да добавите хиперлинк към картинка, трябва да използвате двойката елементи <A> </A>. Вижте един пример :
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<A HREF=“http://google.bg“><IMG SRC=“images/dolphin.jpg“ BORDER=“0″> </A>
</BODY>
</HTML> - В случая картинката се намира в папка images и затова след SRC се оказва пълния път до нея.
- Когато изображението е комбинирано с хиперлинк, се показва оградено със синя рамка. За да я махнете, използвайте атрибута BORDER=“0″, който задава дебелината на рамката около изображението в пиксели. При промяна на стойността му се променя и дебелината на рамката.
- Ако искате да добавите алтернативен текст, който да се показва, когато сочите с мишката върху изображението, без да кликвате върху него, използвайте атрибута ALT. Обикновено това е пояснителен текст, най-често пояснява докъде води хиперлинка.