Една от най-силните
характеристики на езика HTML е възможността да разполагате картинки
върху страницата си. Това става с елемента <IMG> и атрибута му SRC, като след SRC
записвате името на файла:
<HTML>
<HEAD>
<TITLE>
DOLPHIN </TITLE>
</HEAD>
<BODY>
<IMG
SRC="dolphin.jpg>
</BODY>
</HTML>
Така на екрана си вече имате картинка
на делфин. В езика HTML най-често се използват графичните формати
GIF(.gif) и JPEG(.jpg). Предимството на първия е че може да съдържа
анимация и прозрачен фон, но се ограничава само до 256 цвята. При
втория формат няма ограничение за цветовете и картинките са с
по-високо качество, но пък нямате прозрачен фон, нито анимация.
Катринката на делфина е от типа JPEG.
Когато
слагате картинка на web страницата си трябва да знаете от колко
точки е съставена хоризонтално и вертикално. Например картинката на
делфина е от 300 точки хоризонтално и 375 вертикално(кликнете с
десния бутон на мишката върху картинката и от менюто изберете
Properties за да видите от колко точки е картинката). Вие разбира се
можете да свиете или разширите изображението. Това става с
атрибутите WIDTH и HEIGHT на елемента <IMG>. Например нека направим същата
картинка на делфин да се показва като 150Х187 точки(пиксела)
:
<IMG SRC="dolphin.jpg" WIDTH="150" HEIGHT="187">
В този случай картинката се намалява точно наполовина. Ако не бяхме спазили пропорциата да намалим точно на 2 ширината и височината на картинката изображението щеше да се "смачка", например ето така:
<IMG SRC="dolphin.jpg WIDTH="300" HEIGHT="187">
Тук използвахме оригиналната ширина от 300 точки, но намалена наполовина височина - 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. При разглеждане с Netscape Navigator фона няма да е
неподвижен.
Картинките често служат и като
хиперлинкове към други страници . За да
добавите хиперлинк към картинка, трябва да използвате двойката
елементи <A> и </A>. Вижте един пример :
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<A
HREF="http://pencho.my.contact.bg"><IMG SRC="banners/fan_small.gif" BORDER="0" ALT="search.bg"></A>
<A
HREF="http://pencho.my.contact.bg"><IMG
SRC="banners/dirbg.gif" BORDER="0"
ALT="dir.bg"></A>
</BODY>
</HTML>
При разглеждане на горния html
документ с някой браузър, на екрана ще се появят две картинки. При
кликване върху първата (кучето) ще отивате на адрес http://www.search.bg/, а втората
ще води до pencho.my.contact.bg
Първото изображение е файл с име
fan_small.gif, а второто dirbg.gif. И двете се намират в
поддиректория banners, затова след атрибута SRC се указва цели път до файла, в случая
banners/pencho.my.contact.bg.gif. Когато изображението е комбинирано с хиперлинк, то
се показва оградено със синя рамка. За да махнете досадната синя
рамка, използвайте атрибута BORDER="0".
BORDER задава дебелината на рамката около
изображението в пиксели. При промяна на стойността на BORDER се
променя и дебелината на рамката. Вижте картинката с кучето, само че
с рамка с дебелина 10 пиксела :
Атрибута ALT задава алтернативния текст, който да се показва, когато вие сочите с мишката върху изображението, без да кликвате върху него. Обикновенно това е пояснителен текст, най-често докъде води хиперлинка. Застанете с мишката върху картинката и ще видите за какво става въпрос.
МЕЛОДИИ
Езика HTML ви позволява да слагате музикален фон на страницата си. За целта трябва да използвате някои широко използвани музикални формати, като .mid и .wav. Тук за първи път ще се сблъскате с разликата в поддръжката на HTML от страна на Netscape Navigator и Internet Explorer.
За да
демонстрирам музикалните възможности избрах един midi файл, който се
намира ма адрес www4u.search.bg/music.mid
Нека започнем с поддръжката от страна на Internet Explorer. За да
включите този файл като музикален фон в Internet Explorer трябва да
използвате елемента <BGSOUND> в главата <HEAD>. Като атрибут на <BGSOUND> за указване на пътя до
музикалния файл се използва SRC .
<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND
SRC="http://pencho.my.contact.bg"
LOOP="-1">
</HEAD>
<BODY>
</BODY>
</HTML>
Разбира се, ако файла се намира във вашата директория на сървъра не е нужно да указвате целия път, а само да напишете <BGSOUND SRC="music.mid" LOOP="-1">. Атрибута LOOP задава броя на повторенията на мелодията. Когато LOOP="-1" тогава мелодията започва отново, веднага след като свърши. Ако искате да се повтори два пъти например и после да спре, трябва да зададете LOOP="2". Netscape Navigator не разпознава елемента <BGSOUND>.
Възпроизвеждането на звук от Netscape Navigator става с елемента <EMBED>, разположен в тялото <BODY>. Всъщтност <EMBED> показва едно меню за управление на звука. То изглежда ето така :
<EMBED> е елемент за визуализация на мултимедия. С негова помощ можете освен музика да сложите и видео на страницата си, например някой .avi файл. Разбира се трябва да се съобразите с големината на файла, защото никой няма да чака 5-6 минути например да се отвори вашата страница, ако сте прикачили голям .avi файл. Ето как се ползва елемента <EMBED> за закачане на midi файла като музикален фон :
<HTML>
<HEAD>
<TITLE>embed</TITLE>
</HEAD>
<BODY>
<EMBED
SRC="music.mid" WIDTH="128" HEIGHT="128" LOOP="true">
</BODY>
</HTML>
Както
виждате, пътя до файла и тук се указва с атрибута SRC . Атрибутите WIDTH и HEIGHT задават ширината и височината
на панела за контрол на звука в пиксели. Ако искате панела да се
вижда е добре задължително да задавате стойности на атрибутите
WIDTH и HEIGHT. Ако пропуснете да ги
зададете браузъра може да покаже нещо, което няма да ви хареса.
Атрибута LOOP може да има две стойности -
true и false. Когато стойността е
true, мелодията започва отново
веднага след като свърши, докато при false се просвирва само веднаж и
спира. Ако зададете числова стойност на LOOP, мелодията се просвирва
толкова пъти, колкото е числото, например LOOP="3" ще изсвири мелодията три
пъти и ще спре.
Менюто за управление на звука
може да не се визуализира. Това става с атрибута HIDDEN. Той има 2 стойности -
true и false. При true панела остава скрит а
при false се визуализира. Когато създавате музикален фон,
разбира се трябва да използвате стойност true.
Елемента <EMBED> се разпознава и от Internet
Explorer и от Netscape Navigator, но двата браузъра работят с
различни атрибути. Например Internet Explorer вместо LOOP използва атрибута
PLAYCOUNT за повторение на
изпълнението. Netscape Navigator от своя страна позволява да
контролирате силата на звука с атрибута VOLUME. Internet Explorer не
разпознава атрибута VOLUME. Така че стигнахме до извода,
че за да добавите музикален фон към своята страница трябва да
използвате и двата метода, и <EMBED>, и <BGSOUND>. Ето
как би изглеждала една готова страница с музикален фон :
<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND
SRC="http://pencho.my.contact.bg/?tests=1"
LOOP="-1">
</HEAD>
<BODY>
<EMBED
SRC="http://pencho.my.contact.bg" HIDDEN="true" LOOP="true">
</BODY>
</HTML>