C, PHP, VB, .NET

Връзките (hyperlinks) от една HTML страница към друга са основен инструмент за навигиране в Интернет. Използват се изключително често и те са елементът, които ни позволява да „раздробяваме“ информацията на по-малки части. С други думи – създаваме раздели на сайтовете си, препращаме за повече информация към други източници и т.н.

Връзка се дефинира по следния начин:

<a href="http://www.google.com" target-"_blank">Отиди в Гугъл</a>

Резултатът ще бъде следния: Отиди в Гугъл

Тагът <a> указва връзка. Атрибутът href указва адрес в интернет. Може вместо пълен адрес да се използва релативен път, т.е. път до локален файл – например <a href=“left.html“>.

Атрибутът target указва къде ще се отвори страницата. В случая _blank означава „нов прозорец“. Възможните стойности са:

1. _blank – нов прозорец;
2. _self – в същия прозорец (фрейм), в който сме в момента;
3. _parent – в „родителския“ прозорец (фрейм);
4. _top – цялата текуща страница;
5. framename – в име на прозорец (фрейм).

Естествено засега не сме дефинирали понятието „фрейм“ и затова ще използваме само _blank и _top. Стойността по подразбиране е _self. Атрибут „target“ впрочем скоро ще бъде отхвърлен от стандарта. Това е поради факта, че самото понятие „фрейм“ отпада от езика. Като замяна на target ще се използва атрибут „rel“, но за него ще можем да говорим по-късно, когато се запознаем с JavaScript.

Освен текст е възможно и картинки да бъдат направени на връзки. Ето как става това:

<a href="https://www.cphpvb.net/wp-content/uploads/2009/08/dog.jpg">
      <object data="image.jpg" type="image/jpg">
         Some alternative text for the image here
      </object>
</a>

За целта трябва да имате картинка с име „image.jpg“ в директорията на html файла, които отваряте. Досещате се, че няма ограничение върху броят обекти, които можете да вложите в таг <a> – например можете да „вложите“ цял параграф.

Нека сега да се прехвърлим към създаването на секции/раздели. Това се получава чрез таг <div>. Той е основен и може би най-често срещан в HTML кода. Засега ще демонстрираме само една малка част от възможностите му, а по-късно ще покажем много други, когато се занимаем с CSS:

<div>В този раздел ще демонстрираме как<br /></div>
<div style="text-align:center">центрираме текст,<br /></div>
<div style="text-align:right">подравняваме текст в дясно,<br /></div>
<div style="text-align:justify">разпъваме текст от единия до другия край на полето,
но естествено когато текстът е достатъчно дълъг така, че да достигне до
края на екрана или края на раздела, в който сме го дефинирали</div>
<div style="text-align:left"><br />или просто го оставяме в ляво (стандартно)</div>

Ето как ще изглежда резултатът:

Същото може да бъде постигнато чрез параграфи:

<p>В тези параграфи ще демонстрираме как<br /></p>
<p style="text-align:center">центрираме текст,<br /></p>
<p style="text-align:right">подравняваме текст в дясно,<br /></p>
<p style="text-align:justify">разпъваме текст от единия до другия край на полето,
но естествено когато текстът е достатъчно дълъг така, че да достигне до
края на екрана или края на раздела, в който сме го дефинирали</p>
<p style="text-align:left"><br />или просто го оставяме в ляво (стандартно)</p>

Ето как изглежда горния код:

Виждате, че разликата между <div> и <p> е много малка. С изключение на разстоянието по подразбиране, което се поставя между два параграфа, то между „секция“ и „параграф“ няма никаква друга техническа разлика. Двата тага са обособени като отделни по-скоро семантично – думата параграф и думата секция/разделение.

Това дали ще използваме параграфи или секции е лично наш избор. Един добре структуриран документ обаче би използвал параграфите, когато се форматира текст, картинки и информация предназначена за четене, а секциите когато се разпределят други обекти по екрана като менюта, рамки и др. В този смисъл на стил на писане на код – вторият пример с параграфите е по-коректен, защото форматирахме текст.

Вече се досещате, че няма никакъв проблем да форматираме по този начин снимки, връзки и др. обекти. Ето един пример:

<p>Следващата картинка ще се появи централно</p>
<p style="text-align:center">
    <object data="dog.jpg" type="image/jpg">
        Снимка на моето куче
    </object>
</p>
<p>А следващата връзка ще отиде в дясно</p>
<p style="text-align:right">
	<a href="https://www.cphpvb.net/berry/" target="_top">
		Блогът на Берри
	</a>
</p>

В горните примери започнахме постепенно да въвеждаме понятието „стилове“. Това е например атрибутът който използвахме: style=“text-align:center“. Стиловете са изключително мощно средство за форматиране на страници. В следващата статия ще се занимаем подробно с няколко възможности за „декориране“ на текст и полета чрез стилове.

Накрая само бегло ще споменем още един вид поле – таг <span>. Той се използва за създаване на „подполе“ вътре в <div> или <p>.

<p>Аз имам <b><span style="color:brown">кафяви</span></b> очи.</p>

Резултатът от този пример ще бъде:

Аз имам кафяви очи.

По подробно ще видите приложение на span когато разучите повече стилове за декориране на текст в следващата статия.