Картинки

Една от най-силните характеристики на езика HTML е възможността да разполагате картинки върху страницата си. Това става с елемента <IMG> (image) и атрибута му SRC (source), като след SRC записвате името на файла:

<HTML>
<HEAD>
<TITLE> DOLPHIN </TITLE>
</HEAD>
<BODY>
 <IMG SRC=“dolphin.jpg>
</BODY>
</HTML>

На екрана трябва да ви се появи нещо подобно (ако картинката е същата, ако ли не ще се появи тази, която сте си избрали).

dolphin

В HTML най-често се използват графичните формати GIF (.gif) и JPEG (.jpg).

  • Предимството на първия е че може да съдържа анимация и прозрачен фон, но се ограничава само до 256 цвята.
  • При втория формат няма ограничение за цветовете и картинките са с по-високо качество, но пък нямате прозрачен фон, нито анимация. Картинката по-горе е от типа JPEG. 
  • Когато слагате картинка на web страницата си трябва да знаете от колко точки е съставена хоризонтално и вертикално. За да видите това кликнете с десния бутон на мишката върху картинката и от менюто изберете Properties за да видите от колко точки е картинката (размерът й в пиксели).
  • Можете да свиете или разширите изображението с атрибутите WIDTH (ширина) и HEIGHT (височина) на елемента <IMG>. Например нека направим същата картинка на делфин да се показва като 150Х187 точки (пиксела):
    <IMG SRC=“dolphin.jpg“ WIDTH=“150″ HEIGHT=“187″>
  • На екрана ще я видите по този начин:

dolphin_resized

  • В нашия случай картинката е намалена наполовина и затова формата й не се промени. Ако не спазим необходимата пропорционалност между височина и ширина, картинката ще се деформира (смачка).
  • Картинките могат да се използват и за фон на 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. Обикновено това е пояснителен текст, най-често пояснява докъде води хиперлинка. 

Вашият коментар