HTML

Едно добро начало с HTML - част 3-та6

Едно добро начало с HTML - част 3-та
(0 от 0 гласували)

КАРТИНКИ

   
  Една от най-силните характеристики на езика 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>

    Натиснете ТУК за да видите как изглежда една такава web страница.

Можете да направите фона на страницата неподвижен(при скролиране на страницата нагоре-надолу фона няма да се мести заедно с нея). Това става с атрибута 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=
"https://www.
copaste.net"><IMG SRC="banners/fan_small.gif" BORDER="0" ALT="search.bg"></A>
<A HREF=
"https://www.copaste.net"><IMG SRC="banners/dirbg.gif" BORDER="0" ALT="dir.bg"></A>
</BODY>
</HTML>

 

    При разглеждане на горния html документ с някой браузър, на екрана ще се появят две картинки. При кликване върху първата (кучето) ще отивате на адрес www.search.bg, а втората ще води до www.copaste.net
    Първото изображение е файл с име fan_small.gif, а второто dirbg.gif. И двете се намират в поддиректория banners, затова след атрибута SRC се указва цели път до файла, в случая banners/
copaste.net.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="
https://www.copaste.net" 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="
https://www.copaste.net/?tests=1" LOOP="-1">
</HEAD>
<BODY>
<EMBED SRC=
"https://www.copaste.net" HIDDEN="true"  LOOP="true">
</BODY>
</HTML>


Едно добро начало с HTML - част 3-та

Коментари