Хипервръзки

Хипервръзки

Тагът за хипервръзка е <a>, като на неговия атрибут href се задава за стойност адреса, към който води връзката. Тагът има затварящ таг </a>.

ПРИМЕР: <a href="http://host.bg">Връзка към host.bg</a>

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

По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки - виолетови. Цвета им може да бъде променен чрез атрибутите link, alink и vlink на тага body. Когато хипервръзката води до вътрешна страница от някакъв сайт, е необходимо да се укаже точния адрес на тази страница.

ПРИМЕР:  <a href="http://www.site.com/page3.html">Връзка към страница page3.html от сайта site.com</a>

1.ХИПЕРВРЪЗКИ КЪМ СТРАНИЦИ ОТ ЕДИН И СЪЩ САЙТ

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

Нека имаме следната структура на сайт:

- файл index.html, който се намира в основната директория (папка)
- файл page1.html, който се намира също в основната директория
- файл page2.html, който се намира в папка folder1

Основна директория (основна папка)
     index.html
     page1.html

          folder1 (папка, вложена в основната папка)
               page2.html

Тогава хипервръзките между тези страници трябва да изглеждат по следния начин:

1. Връзката от началната страница index.html към страница page1.html, която се намира в същата директория (папка), съдържа само названието на страницата, към която води:

<a href="page1.html">Връзка към страница page1.html от началната страница index.html</a>

2. Връзката от началната страница index.html към страницата page2.html, намираща се в папка folder1, трябва да съдържа наименованието на папката (folder1) и наименованието на страницата (page2.html), отделени с наклонена надясно черта:

<a href="folder1/page2.html">Връзка от началната страница index.html към страница page2.html, намираща се в папка folder1 </a>

3. Връзката от страницата page2.html, намираща се в папка folder1, към началната страница index.html, трябва да съдържа две точки, наклонена надясно черта и наименованието на страницата, към която води (index.html):

<a href="../index.html">Връзка към страница index.html от страницата page2.html, намираща се в папка folder1</a>

2.ХИПЕРВРЪЗКИ КЪМ ЧАСТИ ОТ ЕДНА И СЪЩА СТРАНИЦА

Освен към външни страници и към страници от един и същ сайт хипервръзките могат да водят и към различни места от една и съща страница. Това е подходящо за дълги страници, за да не скролират посетителите в търсене на нужната информация.

Хипервръзка към друга част от една страница се прави по следния начин:

1. Създава се т.нар. "котва" чрез атрибута name на тага а и се поставя на мястото от страницата, към което ще води връзката. "Котвата" трябва да има следния формат:

<a name="Произволно зададено название на котвата"></a>

Ако например трябва да се направи връзка към долната част на страницата котвата може да изглежда така:

<a name="bottom"></a>

Bottom е "дъно" на английски, но това название е избрано само за удобство - то може да бъде и всякакво друго, например kotva1, dolu и т.н.

2. Котвата се поставя в оная част от страница, към която ще води връзката. Ако например връзката ще бъде към дъното на страницата, котвата се поставя в долната част на секцията BODY на страницата. (За да има ефект тази хипервръзка страницата трябва да е дълга.)

3. В горната част на страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така:

<a href="#bottom">Връзка към долната част на страницата</a>

Т.е. хипервръзката съдържа названието на котвата със знака диез (#) отпред.

Котвата от горния пример е невидима - между началния таг <a name="bottom"> и затварящия таг </a> не е изписан никакъв текст. На котвата може да бъде зададен и текст, което да се вижда на екрана, например:

<a name="bottom">Това е название на "котва", което ще се вижда на екрана</a>

Ако в една страница са използвани такива хипервръзки може да се направи връзка към точно определено място от определена страница по следния начин:

<a href="http://www.site.com/page.html#bottom">Връзка към долната част на страницата page.html от сайта www.site.com</a>

Забележка: Предвижда се в бъдещите версии на XHTML атрибута name да бъде заменен от атрибута id.



3.ХИПЕРВРЪЗКА, КОЯТО СЕ ОТВАРЯ В НОВ ПРОЗОРЕЦ

Обикновените хипервръзки зареждат страницата към която водят в същия прозорец на браузера, от който е кликнато по връзката. Така се губи от поглед първата страница и трябва да се натиска "Back"-бутона от горното меню на браузъра за връщане в нея. За да се отвори страницата в отделен прозорец към тага <a> трябва да се добави атрибута target и да му се зададе стойност _blank:

<a href="http://site.com" target="_blank">Връзка, която ще се отвори в нов прозорец</a>

Като стойност на target може да се зададе и произволно избрано име, например target="mytarget" и т.н. По този начин всички връзки (например 5 на брой), на които бъде присвоен атрибута target със стойност mytarget ще се отварят в един и същ прозорец.



4. ХИПЕРВРЪЗКА КЪМ E-MAIL АДРЕС

Хиперръзката към e-mail адрес изглежда по следния начин:

<a href="mailto:name@site.com">name@site.com</a>

Ако посетителя на страницата няма на компютъра си програма за електронна поща няма да може да изпрати директно e-mail, а ще трябва да препише или копира адреса. Затова е препоръчително във видимата част на връзката да се изписва електранния адрес, а не надпис от рода на "изпратете имейл" или нещо подобно.

5. ИЗОБРАЖЕНИЯ ВЪВ ВИД НА ХИПЕРВРЪЗКИ

Освен текст за хипервръзки могат да служат и изображенията (картинки, снимки и пр.). За да се ползва едно изображение като хипервръзка трябва да се напише код, подобен на следния:

<a href="http://www.site.com"><img src="image.gif" /></a>

В случая се използва изображението image.gif за да се направи връзка към сайта www.site.com

За да се премахне рамката, която се появява около изображение, използвано като хипервръзка, към тага за изображения трябва да се добави атрибута border със стойност 0:

<a href="http://www.site.com"><img src="image.gif" border="0" /></a>

Таблици

Таблиците са важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа.

1. Основни тагове

Таблиците в HTML-документа са разположени между двата основни тага <table> и </table>.

Между тези два тага се изписват:

1. таговете за табличен ред - <tr> и </tr>
2. таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>

За да има таблицата видими очертания трябва в тага table да се добави атрибута border и да му се зададе някаква стойност, например 1.

ПРИМЕР за таблица с 1 колона и 3 реда:

<table border="1">
     <tr>
           <td>1-ви ред, 1-ва колона</td>
     </tr>
     <tr>
           <td>2-ри ред, 1-ва колона</td>
     </tr>
     <tr>
           <td>3-ти ред, 1-ва колона</td>
     </tr>
</table>


Ефекта в браузъра е следния:




ПРИМЕР за таблица с 1 ред и 3 колони:

<table border="1">
   <tr>
      <td>1-ви ред, 1-ва колона</td>
      <td>1-ви ред, 2-ра колона</td>
      <td>1-ви ред, 3-та колона</td>
   </tr>
</table>


Ефекта в браузъра е следния:



ПРИМЕР за таблица с 2 реда и 2 колони:

<table border="1">
   <tr>
      <td>1-ви ред, 1-ва колона </td>
      <td>1-ви ред, 2-ра колона </td>
   </tr>
   <tr>
      <td>2-ри ред, 1-ва колона </td>
      <td>2-ри ред, 2-ра колона </td>
   </tr>
</table>

В прозореца на браузъра този код ще изглежда така:



2. Други тагове, които се ползват в таблиците

А. Чрез тага <th> </th> се задава заглавие на таблицата. Всеки текст разположен между таговете <th> и </th> се показва в центъра на клетката и удебелен.

ПРИМЕР:

<table border="1">
     <tr>
          <th>Заглавие 1</th>
          <th>Заглавие 2</th>
     </tr>
     <tr>
          <td>1-ви ред, 1-ва колона</td>
          <td>1-ви ред, 2-ра колона</td>
     </tr>
     <tr>
          <td>2-ри ред, 1-ва колона</td>
          <td>2-ри ред, 2-ра колона</td>
     </tr>
</table>

В браузера ефекта ще е следния:



Б. Таговете <thead> </thead>, <tfoot> </tfoot> и
<tbody> </tbody> позволяват групиране на редовете на таблицата.

Една таблица може да съдържа горна част (head), долна част (foot) и средна част или тяло (body). Ако в тялото (средната част) на таблицата е поместена много информация, уеб-дизайнера ще "загуби от поглед" горната и долната част на таблицата. За удобство и прегледност в текстовия редактор, където се пише HTML-кода, чрез таговете <thead>, <tfoot> и <tbody> горната и долната част на таблицата могат да се групират непосредствено една под друга, а "тялото", т.е. средната част на таблицата да се изпише най-отдолу. В браузъра горната част на таблицата ще се показва най-горе, средната част - по средата и долната част - най-долу.

ПРИМЕР:

<table border="1">
  <thead>
      <tr>
         <td>Горна част на таблицата, която се изписва горе</td>
      </tr>
  </thead>
  <tfoot>
      <tr>
         <td>Долна част на таблицата, която се изписва по средата</td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
         <td>Средна част на таблицата, която се изписва долу</td>
      </tr>
  </tbody>
</table>


Ефекта от горния код е следния:



3.Атрибути на тага <table>

border="цифрова стойност" задава рамка на таблицата в пиксели

bordercolor="цвят" задава цвят на рамката

bgcolor="цвят" задава цвят на фона на таблицата

background="изображение" задава изображение като фон

align="left, center или right" задава позициониране на таблицата вляво, в центъра или вдясно

width="цифрова стойност или процент" задава дължина на таблицата в пиксели или в процент от свободното пространство

cellpadding="цифрова стойност или процент" задава разстоянито между съдържанието на клетката и стените и в пиксели или процент

cellspacing="цифрова стойност или процент" задава разстоянито в пиксели или процент между отделните клетки

frame="една от стойностите: lhs, rhs, vsides, above, below, hsides, void, box, border", където

lhs премахва горната, долната и дясната рамка на таблицата
rhs премахва горната, долната и лявата рамка на таблицата
vsides премахва горната и долната рамка на таблицата
above премахва страничните и долната рамка на таблицата
below премахва страничните и горната рамка на таблицата
hsides премахва страничните рамки на таблицата
void премахва външните рамки на таблицата
box и border показват всички рамки (същия ефект е по подразбиране)

!!! За да се ползва трибута frame трябва на атрибута border  да е зададена стойност различна от 0.

ПРИМЕР:

<table width="300" border="1" frame="void" cellspacing="0" cellpadding="3">
    <tr align="center">
        <td><a href="">Линк 1</a></td>
        <td><a href="">Линк 2</a></td>
        <td><a href="">Линк 3</a></td>
    </tr>
    <tr align="center">
        <td><a href="">Линк 4</a></td>
        <td><a href="">Линк 5</a></td>
        <td><a href="">Линк 6</a></td>
    </tr>
</table>

В горния пример е създадена таблица без външни рамки чрез използване на стойността void в атрибута frame. Таблицата ще има следния вид:



Забележка: атрибутите "align" и "bgcolor" на тага <table> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат.

4.Атрибути на тага <tr>

align="left, center или right" позиционира съдържанието на реда вляво, в центъра или вдясно

valign="top, middle или bottom" позиционира съдържанието на реда горе, в средата или долу

bgcolor="цвят" задава цвят на фона на реда

bordercolor="цвят" задава цвят на рамката (задължително е в такъв случай стойността border на таблицата да бъде различна от 0)

Забележка: атрибута "bgcolor" на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.

5.Атрибути на тага <td>

align="left, center или right" позиционира съдържанието на колона вляво, в центъра или вдясно

valign="top, middle или bottom" позиционира съдържанието на колона горе, в средата или долу

bgcolor="цвят" задава цвят на фона на колоната

background="изображение" задава изображение като фон на клетката

colspan="цифрова стойност" определя колко колони обхваща една клетка

rowspan="цифрова стойност" определя колко реда обхваща една клетка

width="цифрова стойност или процент" задава ширина на клетката в пиксели или процент от възможното пространство

height="цифрова стойност" задава височина на клетката в пиксели

Забележка: атрибутите "bgcolor", "height" и "width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат. ПРИМЕР:

<table align="center" border="1" bgcolor="#ffff00" width="80%" height="300" cellspacing="2" cellpadding="2">
   <tr>
      <td rowspan="3">Лява колона, обединяваща 3 реда</td>
      <td colspan="3">Горен ред, обединяващ 3 колони</td>
      <td rowspan="3">Дясна колона, обединяваща 3 реда</td>
   </tr>
   <tr align="center">
      <td> 1-ва колона</td>
      <td> 2-ра колона</td>
      <td> 3-та колона</td>
   </tr>
   <tr>
      <td colspan="3"> Долен ред, обединяваш 3 колони</td>
   </tr>
</table>

Изглед на таблицата от примера:



Горния пример е за таблица центрирана в браузера, с ширина 80%, височина 300 пиксела, с рамка 1 пиксел, жълт фон, разстояние от съдържанието до рамката 2 пиксела, разстояние между клетките 2 пиксела, с 2 странични колони, обхващащи по 3 реда и по един горен и долен ред, обхващащи по 3 колони.

Хоризонтални и вертикални линии

Тагът за хоризонтални линии е <hr>. Той няма затварящ таг и затова според изискванията в XHTML трябва да се изписва <hr />.

В HTML не съществува таг за вертикални линии. Вертикална линия може да се направи или във вид на графичен файл или чрез колона от таблица, например по следния начин:

<table width="290" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="3">
    <tr valign="top">
        <td width="135">

Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.

        </td>

        <td width="5" bgcolor="#000000"> <!—Тази колона е фактически вертикалната линия -->
        </td>

        <td>

<====Тук отляво се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.

        </td>
    </tr>
</table>

Ефекта от горния код ще бъде следния:





Когато се използва без никакви атрибури тага <hr /> изобразява по подразбиране 3-измерна линия със сянка, заемаща цялата дължина на страницата или таблицата в която е изписан тага.

Атрибутите на <hr /> са следните:

1. width="цифрова стойност" задава дължина на линията в пиксели или проценти

2. align="left, right или center" задава разположение на линията вляво, вдясно или в центъра

3. size="цифрова стойност" задава дебелина на линията в пиксели

4. color="цвят" задава цвят на линията

5. noshade="noshade" премахва сянката на линията



ПРИМЕР:

<hr width="200" size="5" color="#ff0000">

В примера линията е с дължина 200 пиксела, с дебелина 5 пиксела и червен цвят:



Упражнение:
Да се създаде следната таблица в HTML документ:



<!DOCTYPE html>
<html>
<head>
<title>ТАБЛИЦИ</title>
</head>

<body>


<table align="center" border="2" bgcolor="#ff0000" width="900" height="600" cellspacing="3" cellpadding="10">
<tr>
  <td colspan="6" width="300" height="40" bgcolor="blue" align="center" > <b>ФАКТУРА</b></td>
<tr>
  <td width="300" height="20" align="center"> <b>Фирма</b></td>
 <td rowspan="4" ></td>
 <td rowspan="4" ></td>
 <td  rowspan="2" colspan="3"></td>
</tr>
<tr>
  <td width="300" height="100"><center><b>ET "Иван Иванов"</b></center></td>
 </tr>
<tr>
  <td width="300" height="20" align="center">Адрес</td>
  <td  rowspan="2" colspan="3"></td>
</tr>
<tr>
 <td width="300" height="100"> </td>
</tr>
<tr>
 <td colspan="4"  rowspan="2"width="300" valign="middle">
<ol>
   <li>Moнитори</li>
   <li>Клавиатури</li>
   <li>Безжични мишки</li>
</ol>

 
</td>
<td width="100" height="20"><b>Брой</b></td>
<td width="100" height="20"><b>Цени</b></td>
</tr>
<tr>
<td valign="top" ><table cellpadding="30"><tr><td valign="middle"> <b>234 456 678</b></td></tr></table>                    </td>
<td></td>
</tr>
<tr>
 <td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td height="20" ><b>МОЛ </b></td>
<td height="20" ><b>Име </b></td>
<td height="20"><b>Подпис</b></td>
<td height="20"><b>Общо</b></td>
<td colspan="2"></td>
</tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<tr>
</table>

</body>
</html>