Самообучение HTML училище

Кратко ръководство по HTML за начинаещи


Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS

Четвърти урок » (5032 посещения)

Нека научим повече за връзките (links).
Това е нещо наистина много просто. Ще изградим връзка към Google.

Започнете ето така:
<BODY BGCOLOR="#FFFFFF">
Отиди в Google!
</BODY>

Отиди в Google!

След това добавете отварящ и затварящ таг за котвичка (anchor tag).

<BODY BGCOLOR="#FFFFFF">
Отиди в <A>Google!</A>
</BODY>

Отиди в Google!

Добавете адреса (URL) и сте готови! URL означава Universal Resource Locator. Модна и тежка фраза, която интернeтаджиите употребяват. Ще го правят все повече и повече, a URL си е просто адрес.

<BODY BGCOLOR="#FFFFFF">
Отиди в <A HREF="http://www.google.com/">Google!</A>
</BODY>

Отиди в Google!

Ако сте проследили връзката към Гугъл сте забелязали, че страницата се отваря в същия прозорец. Да направим същата връзка, но нека този път страницата да се отвори в нов прозорец.

<BODY BGCOLOR="#FFFFFF">
Отиди в <A HREF="http://www.google.com/" TARGET="_blank">Google!</A>
</BODY>

Отиди в Google!

Връзката за електронна поща се изгражда по подобен начин. Само че използваме адреса на електронната поща вместо да пишем URL.

<BODY BGCOLOR="#FFFFFF">
Изпрати ми <A HREF="mailto:forrest@bubbagump.com">Е-Mail!</A>
</BODY>

Изпрати ми Е-Mail!

Ако искаме да изградим графична връзка (дадена картинка да бъде връзка), поставяме между таговете самата картинка. Ако използваме примера от по-горе с 'Отиди в Google!' поставяме <IMG> таг вместо думата Google!

<BODY BGCOLOR="#FFFFFF">
Отиди в <A HREF="http://www.google.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
</BODY>

Отиди в

Винаги около графичните връзки се появява цветна ивица като рамка. Как да се отървете от нея, е посочено в долния пример.

<BODY BGCOLOR="#FFFFFF">
Отиди в <A HREF="http://www.google.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A>
</BODY>

Отиди в

Има още нещо за връзките... Абсолютно е допустимо и желателно да се изграждат връзки към други страници без да се пита за разрешение. Това е фактически идеята за хипертекста и това е нещото, което прави от Интернет световна МРЕЖА.

Когато включвате картинки в страницата си запомнете, че те са самостоятелни файлове, които често съдържат прекaлено много информация, която ще забави зареждането на която и да е страница. Спасението е в намаляването на размерите (дължина и ширина) или рeдуциране броя цветове. А най-добре е да се направят и двете. Ето някои примери:

размери 310 x 304
брой цветове - 238
големина на файла - 69 kB

размери 207 x 203
брой цветове - 238
големина на файла - 34 kB
размери 207 x 203
брой цветове- 48
големина на файла - 19 kB

Горепосочените редукции са направени с Paint Shop Pro.

Разбира се първата картинка е най-голяма, най-хубава и с най-добро качество, но погледнете нещата от друга страна - ако я поставите на страницата си, тя ще се зарежда прекалено дълго време, посетителите ви вероятно няма да могат да видят това, което сте направили за тях, защото ще им омръзне да чакат дългото зареждане и ще се прехвърлят на друга страница.

Друга възможност за по-бързо зареждане на дадена страница с картинки е когато се поставят умалени копия на тези картинки, представляващи връзка към по-голямата картинка. Да си представим, че искам да предложа три много хубави картинки на моята колекция от коли (не, че имам такава, но нали си представяме;)).

     
(щракнете на картинката, за да видите уголемения образ)

За тази цел е нужно да стартирате която и да е програма за обработване на картинки (Paint Shop Pro, Photoshop, Corel Draw, Corel Photopaint) и да направите копие на дадената графика с умалени размери. Именно това ще бъде вашата връзка към големия файл-картинка.

Да опитаме със синия корвет.
Започва се с добре познатия <IMG> таг.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
</BODY>
Добавяте добре известния ни <A> таг.

<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>
Добавяте URL и всичко е готово!

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>

Можете да се освободите от рамката около картинката ако искате. Така или иначе можете и да я оставите, за да знаят посетителите ви, че това e връзка. От вас си зависи.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0></A>
</BODY>

Друг начин за съдаване на връзка към страница е, като се направи връзка към точно определена част от дадена страница. Щракнете »тук« за да бъдете транспортирани до мястото, където за първи път споменахме за URL.
Зaпочнете първо с маркиране на мястото, до което искате посетителите ви да бъдат транспортирани. Изберете дума и я заобиколете с <A> тагове.

Нека използваме цитат от по-горе.

<A>Добавете</A> адреса (URL) и сте готови!
След това давате на маркираното място някакво ИМЕ.

<A NAME="upabit">Добавете</A> адреса (URL) и сте готови!

Вече привършихте с маркирането на мястото. Остава само да изградите връзка към него. Започнете изграждането на връзката.

Щракнете <A>тук</A> за да бъдете транспортирани...
Добавяте името на файла към който да се извърши прехвърлянето...

Щракнете <A HREF="lesson04.html">тук</A> за да бъдете транспортирани...
И най-накрая, добавяте котвичката NAME така...

Щракнете <A HREF="lesson04.html#upabit">тук</A> за да бъдете транспортирани...

Ами това е всичко по въпроса! Не е като мозъчната хирургия, нали?