Кратко ръководство по HTML за начинаещи
Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS
Четвърти урок » (5917 посещения)
Нека научим повече за връзките (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>
<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> за да бъдете транспортирани...
Щракнете <A HREF="lesson04.html#upabit">тук</A> за да бъдете транспортирани...
Ами това е всичко по въпроса! Не е като мозъчната хирургия, нали?