Линкове (хипервръзки). Използване на блокове в дизайна (divisions)
Текстови линкове
Интернет бива наричан още „глобалната мрежа” заради огромната мрежа от връзки между отделните web сайтове. Тези връзки са направени чрез тага anchor (буквално преведено „котва”), който създава линкове. Текстове, картинки и форми могат да бъда използвани за създаване на такива линкове.
Атрибутът href дефинира накъде да пренасочва линкът.С други думи казано, оказва къде ще иде потребителят, когато кликне даденият линк.
Връзката може да сочи към вътрешен, локален или глобален ресурс.
- Вътрешен – линковете водят към съдържание от текущата страница
- Локални - линковете отварят страници от същият домейн
- Глобални – линковете отварят ресурс от друг домейн
HTML Code:
Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"
HTML - Text Links
Използваме таговете <a></a> за да определим откъде започва и докъде свършва линкът. Атрибутът href, определящ накъде да пренасочва линкът се поставя в отварящият таг. Всичко, поставено между отварящият и затварящият таг ще бъде показано като линк. Вижте примера по-долу за демонстрация.
HTML Code:
<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a>
<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
Резултатът – глобални линкове:
HTML - Link Targets
Атрибутът target определя дали страницата да се отвори в нов отделен прозорец или да използва текущият отворен прозорец на браузърът.
HTML Code:
| target=" | _blank" | Oтваря ресурсът в нов прозорец (таб) на браузърът |
| _self" | Отаря новата страница в същият прозорец | |
| _parent" | Oтваря новата страница във фрейм, който е по-горен за този, мястото, където лежи линка | |
| _top" | Отваря страницата в текущият прозорец, игнорирайки всякакви фреймове |
Примерът по-долу показва как да направим връзка към VBOX7.COM, популярен видео сайт. Атрибутът target е добавен за да позволи на браузърът да отвори ESPN в нов прозорец,така че потребителят да остане в нашият сайт. Ето и примерът:
HTML Code:
<a href="http://www.vbox7.com" target="_blank">vBox7.COM</a>
_blank Target:
HTML - Anchors
За да линквате секция от съществуваща ваша страница, първо трябва да и дадете име. В примерът по долу имаме кратка таблица на съдържанието, като след всяко заглавие (heading) имаме презен линк, на който сме поставили един единствен атрибут – name. С него задаваме произволно име на секцията, към която искаме по-късно да сложим препратка.
Ето така би изглеждало съдържанието:
Съдържанието:
<h2>HTML Links and Anchors<a name="top"></a></h2>
<h2>HTML Text Links<a name="text"></a></h2>
<h2>HTML Email<a name="email"></a></h2>
Сега да напишем и кода на линковете, който ще ни пренасочват към съответните секции от страницата, на които зададохме имена с „празните” линкове.
Линковете:
<a href="#top">Go to the Top</a>
<a href="#text">Learn about Text Links</a>
<a href="#email">Learn about Email Links</a>
Резултатът – локални линкове /препратки/:
HTML - Email линкове
Създаването на мейл линкове е просто. Ако желаете посетителите на сайта ви да ви пишат бързо и лесно без да копират email адреса ви, това е решението. В линкът може да се зададе дори темата и текстът на съобщението. Важно е да се отбележи, че за да са използваеми едни такива линкове е необходимо на клиентският компютър да има инсталирана програма за електронна поща (т.н. мейл клиент).
HTML ко:
<a href="mailto:ivanov.bg@gmail.com?subject=Относно курса" >Email@tizag.com</a>
Email Link:
In some circumstances it may be necessary to fill in the body of the Email for the user as well.
HTML код:
<a href="mailto:ivanov.bg@gmail.com?subject=Относно курса&body=Кога ще ни изпратиш лекциите" >Email@tizag.com</a>
В резултат:
HTML - Download линкове
Поставянето на линкове към файлове, които искаме да се свалят от потребителите става по същият начин, както когато пренасочваме към друга страница. С други думи на атрибутът href могат да се задават всякакви стойности, не само адреси към други уеб страници, но и към снимки, документи, архиви и каквито други типове файлове, качени в интернет се сещате.
HTML Code:
<a href="http://mozilla.mirrors.easynews.com/mozilla/firefox/releases/3.0.11/win32/en-US/Firefox%20Setup%203.0.11.exe">Изтегли Firefox 3.0.1</a>
Download текстов линк:
Поставяне на изображение за линк
Това става по аналогичен начин на текстовите линкове. Разликата е, че вместо текст между отварящият <a> и затварящият </a> таг на линка поставяме картинка. Пример:
<a href=”http://namore.com”>
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
</a>
Обърнете внимание на атрибутът alt – с него се задава алтернативен текст, т.е. текст, който се изписва вместо картинката, когато тя още не е заредена или не може да бъде заредена. Това е заължителен за картинките атрибут според стандартът за валиден XHTML 1.0
В резултат:
HTML специални знаци
Това са специален тип символи. Някои символи като copyright, trademark или знаците за валута (паунд, евро и т.н.) не съществуват на вашата клаваиатура, но въпреки това са често използвани. За да изпишите такива знаци, вие се нуждате от 3 задължителни части:
1. Всички специални знаци започват със знака амперсанд - &
2. Следва името на символа – пр. copy
3. И завършват с точка и запетая - ;
Примери:
©
€
£
Резултатът:
©
€ £
Пълен списък на възможните специални знаци в HTML можете да разгледате на адрес: http://www.yourhtmlsource.com/text/specialcharacters.html
Важно е да обърнем на един по-важен символ, а именно интервалът. Той се изписва като и означава non-braking space.
Простичко казано когато в HTML текст искаме да оставим повече от един интервал разстояния между думите, трябва да изпишем този специален символ за интервал.
DIV елементи
Тагът <div> не е нищо друго, освен контейнер за други тагове. Точно както е body тага. Div елементите са блокови и работят „зад сцената” за да групират останалите тагове заедно.
Основните атрибути, които могат да се използват са:
- id
- width
- height
- title
- style
Всичко останало плюс широчината (width) и височината (height) могат да бъдат стилизирани от CSS.
Ето и няколко CSS атрибути, които можем да използвам за div елементите:
За използваният пример сме използвали style тага, в който сме описали CSS стила на div елемента, за да го направим по-контрастен и различим.
HTML код:
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
HTML Div Element:
Представете си че синьото е фона на страницата, а зеленият блок е нашият div. Както вече споменахме, div елементът е просто контейнер за останалото съдържание и единственият начин да визуализираме, че съществува е като му зададем бекграунд цвят или картинка, за да го отличим от останалата част.
В миналото уеб дизайнерите са нямали друга алетрнатива за аранжиране на съдържанието в дадена страница освен, чрез таблици. Днес обаче имаме още един вариант - div елементи.
Ето и пример за супер елементарен дизайн на страница:
HTML код:
<div id="menu" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>
Резултатът:
Content Articles
This paragraph would be your content paragraph with all of your readable material.
