В този урок ще поставим изображение в уеб страницата си. Ще се научим и как да използваме поставеното изображение като връзка (hyperlink) към друга страница. Както при урока за форматиране на текст, ще започнем с прост HTML. По-сложните неща, които можем да направим с оформлението, ще разгледаме когато се занимаваме със СSS.
Предварителна информацияПървото, което трябва да знем, е че изображенията не се съхраняват в самата страница. Вместо това се използва таг, указващ на браузъра от кой адрес да покаже изображението. Когато качвате изображение в Blogger, то всъщност се качва на сайта за споделяне Picasa, след което Blogger добавя връзка към него. Picasa има някои (нелепи) ограничения -- например намаля големите изображения до 1024 пиксела ширина, не поддържа анимирани GIF ( за мен винаги е била загадка защо, при положение че това изисква допълнителна обработка от страна на сървъра им) и т.н.
Задаването на конкретен размер на изображението в тага променя размера, с който то се показва, не променя реалните размери и/или големината на файла. Ето защо трябва да бъдем внимателни когато използваме изображения в страниците си. На първо място, желателно е да смалим размера на големите снимки. Най-сигурният начин да прогоним посетителите си е да сложим 70 снимки от лятната си почивка, 10 мегапиксела всяка, и да ги покажем с размер 400/300 пиксела за прегледност. Най-често посетителят ще напусне страницата след 15 минути, тоест -- преди да се е заредила третата снимка. Ако правите фотогалерия с големи снимки,направете малки копия -- например 400/300 или 640/480, и ги използвайте като връзка към голямото изображение -- така посетителите ще зареждат в пълен размер само снимките, които ги интересуват.
Друг момент, който трябва да имаме предвид, е броят на снимките. Изображенията в уеб страниците са като алкохола -- приятни са в малки количества. Прекалената употреба на изображения разкъсва оформлението и отвлича вниманието на читателите ви от текста. Мислете за изображенията като за солта в бобена чорба. Една щипка придава приятен вкус. Ако изсипем солницата, гостите ни учтиво, но твърдо, ще си тръгнат и ще отидат да търсят пица на парче.
Относителни и абсолютни адресиВсе повече хора са просто потребители и нямат никаква представа какво е абсолютен и относителен адрес. Тази информация обаче е важна за уеб дизайнера, затова ще я разгледаме набързо. Представете си, че компютърът ви е апартамент. Ако кажете на някой, който се намира в същата стая "дай ми книгата" той ще приеме, че книгата е в същата стая. Ако кажете "дай ми книгата от хола", човекът ще знае, че става въпрос за хола на същия апартамент. Аок обаче му кажете "иди в блок 35 в Младост, 3-ти етаж, 12 апартамент и ми дай книгата от хола", изпълнителят на поръчката с въздишка ще започне да се облича за да отиде на съвсем друго място.
По същия начин, ако зададете за адрес i
mage.jpg, браузърът ви ще го търси в директорията, от която е заредил страницата. Ако адресът е
pictures/image.jpg, изображението ще бъде заредено от директория pictures на същия сървър. Ако обаче укажете
http://www.example.com/pictures/image.jpg, то браузърът ви ще се свърже с този сървър и ще търси изображението там.
Ако файлът
index.html (примерно) се намира в директория
httpdocs/companysite/services/ относителният път на изображение с име
image.jpg, намиращ с в директория
httpdocs/companysite/services/pictures е
pictures/image.jpg. От гледна точка на разглеждащия, директорията, в която се намира страницата е главна, независимо колко навътре в структурата на локалния диск е разположена.
Ако правите отделна уеб страница, която възнамерявате да качите на хостинг сървър, използвайте относителен адрес --
pictures/image.jpg или само
image.jpg (ако изображението е в същата директория като страницата, на която се показва). Избягвайте да поставяте изображения (или каквито и да е елементи) повече от две директории под главната. Ако създавате цял сайт и работите с пълен път за елементите, ще трябва ад редактирате всички страници в случай, че смените хостинга. Ако качвате изображение на вече работеща платформа (като Blogger), задавайте пълен път.
Вмъкване на изображенияИзображенията се вмъкват с тага <img>. Тагът не се затваря в HTML. Ако сайтът изисква XML (както прави Blogger), единичният таг трябва да завършва със затваряща черта \. забележетe, че в XML затварящата черта се слага накрая, а не в началото на тага и е наклонена на обратно спрямо затварящата черта на HTML!
Задължителен елемент е src -- това е пълният или относителен адрес на изображението. В минималния си вариант тагът изглежда по този начин:
<img src="image.jpg">За да зададете размер на изображението в пиксели използвайте width и height. Първият параметър задава ширината, а втория -- височината. Ако зададете само един параметър, другият се настройва така, че съотношението височина/ширина да се запази. В противен случай изображението се изкривява така, че да отговаря на зададените параметри.
<img src="http://lasombra.free.bg/short_skirt.jpg">Изображението е с реалния си размер
<img src="http://lasombra.free.bg/short_skirt.jpg" height="500">На изображението е зададена височина 500 пиксела, без да се уточнява ширината. Изображението е оразмерено така, че да се запази съотношението ширина/височина
<img src="http://lasombra.free.bg/short_skirt.jpg" height="500" width = "500">На изображението са зададени височина и ширина по 500 пиксела. За да се изпълнят и двете условия, изображението се деформира

Възможна е употребата на допълнителни параметри
align (за подравняване наляво, в центъра или надясно) и
border (за указване на дебелината на рамката около изображението), но употребата им вече не се препоръчва и дори липсват от последния стандарт на HTML. Забележете, че изображение без изрично указано подравняване се подравнява в съответствие с подравняванеот на парграфа, в който е поставено.
С параметъра
alt можем да укажем текста, който се появява вместо снимката, ако браузърът не поддържа снимки. С
title можем да укажем име на снимката. То се появява като tooltip щом посочим снимката с мишката.
Създаване на връзкиВсеки елемент на страницата, включително изображенията, могат да се използват като връзка -- тоест да отвеждат потребителя някъде щом щракне върху тях. Връзка се създава като съответният елемент се огради с тагове <a></a>. В отварящия таг посредством параметъра href се указва към какво сочи връзката. По желание чрез параметъра target може да се укаже и в кой прозорец да се отвори съдържанието.
Ето ви няколко примера:
<a href="http://example.com">Текстова връзка</a><a href="http://example.com" target="_blank">Връзка, отваряща се в нов таб/прозорец</a>Параметърът target има няколко възможни стойности:
_blank отваря целта в нов прозорец
_self отваря целта в прозореца или рамката, в която се намира връзката
_parent отваря целта в прозореца или рамката, от която е заредено съдържанието с връзката
_top отваря целта в целия прозорец, а не само в рамката.
name отваря целта в прозорец или рамка с име name. ако такъв прозорец не съществува се създава, и всяка последваща връзка, сочеща към това име ес отваря в него.
Кратко обяснение: "Рамка" (frame) е обособена част от уеб страница. Прозорецът може да е разделен на много рамки. Например, може в лявата рамка да имате съдържание, което да се отваря в дясната. Пример можете да видите
<a href="http://ljubima.host56.com" target="_blank">тук</a>С тага могат да се дефинират и цели в самата страница. Втората снимка на момичето горе е дефинирана като цел с име
sexy_skirt. Поставяйки за цел
#sexy_skirt в параметъра
href ще създадем връзка,
<a href="#sexy_skirt">пращаща ни към снимката</a>. За да дефинираме цел, трябва да оградим елемента-цел със следните тагове:
<a name="target_name">елемент-цел</a>Тук също важи принципа за относителните и абсолютните адреси. В горния пример сме задали само името на целта, предшествана от каре -- това означава, че целта се намира в същата страница. Ако целта е в друга страница, трябва да я укажем, например
services.html#target (ако името на целта е
target и се намира в страницата
services.html в същата директория като разглежданата страница) или
http://www.example.com/services.html#target ако се намира на друг сървър.
Ако оградим тага
<img> с тагове за връзка, то самото изображение става връзка.
<a href="http://lasombra.free.bg/short_skirt.jpg" target="_blank">
<img src="http://lasombra.free.bg/short_skirt.jpg" height="500" alt="Момиче" title="Щракнете за пълен размер">
</a>
