Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Хипервръзки

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

Текстови връзки към други файлове :

<a href="адреса, към който ще води връзката"> названието на връзката, което ще се вижда на екрана </a>

Пример: <a href=" http://www.yahoo.com "> Връзка към www.yahoo.com </a>

Пример за хипервръзка към страница от същия сайт: – <a href=" folder1/page2.html "> Това е връзка към страница page2.html, намираща се в папка folder1 </a>

Хипервръзки към части от една и съща страница:

  • Първо трябва да създадете котва (anchor) и да я поставите на мястото от страницата, към което пускате връзка.
  • Котвата трябва да има следния формат:
    <a name=“ bottom”> (името на котвата се избира произволно)
  • След това на съответнотот място в страницата се поставя самата хипервръзка, която ще води към вече направената котва.
  • Тя трябва да изглежда така:
    <a href="# bottom "> Връзка към долната част на страницата </a>

Хипервръзки към e-mail и файл на FTP -сървър

  • <a href=" mailto:some-name@some-where.com "> some- name@some-where.com </a>
  • <a href=" ftp://some-address.com/some-file.zip "> Връзка към файл в zip формат от FTP сървър </a>

Хипервръзки, които се отварят в отделен прозорец:

  • Всяка хипервръзка в интернет може да се отвори в отделен прозорец, ако преди да щракнете върху нея натиснете бутон "Shift". Но много потребители в интернет не познават пълните възможности на клавиатурата.
  • HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target . Той може да приема няколко стойности.
  • За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
  • <a href="http://www.yahoo.com" target="_blank" > Връзка към Yahoo, която ще се отвори в нов прозорец </a>

Упражнение 8:

а) Копирайте следния текст в лявата част на прозореца по-долу и натиснете бутона над него.

<html>
<body>

<p>
<a href="h5.htm">
Този текст </a> e връзка към същата страница.
</p>

<p>
<a href="http://www.microsoft.com/">
Този текст </a> към страница от World Wide Web.
</p>

</body>
</html>

б) Направете редакция, като на съответните места поставите други адреси за хипервръзки.

в) Приложете допълнително форматиране с тага font, за да промените цвета на хипервръзката. Внимавайте за правилното влагане на тагове!

г) Добавете атрибути на тага body за цветове на текста и хипервръзките.

д) Добавете атрибута targеt, за да отворите страницата в нов прозорец.

Упражнение 9:

а) Копирайте следния текст в горното прозорче и натиснете бутона над него, за да видите ефекта в дясната част на екрана.

<html>
<body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

б) посочете на хипервръзката.

в) разгледайте текста на html-сорса и добавете и други вътрешни хипервръзки.

Упражнение 10:

Хипервръзките в Dreamweaver

  1. Текстови хипервръзки се добавят като се маркира текста и в Properties в полето Link се попълни адреса на страницата, към която трябва да сочи линка. След попълването полето Target става активно и от там можете да изберете _blank.
  2. За да се именува място за вътрешна хипервръзка, позиционирайте курсора на съответното място и изберете от менюто Inser/NamedAnchor или натиснете Ctrl+Alt+A. Отваря се диалогово прозорче, в което трябва да посочите име на котвата. След това на друго място в документа маркирайте текста за хипервръзката и в полето Link напишете името на котвата със символа # пред него.
  3. Друг удобен начин за посочване на котвата, където трябва да сочи съответния линк е като посочите бутончето непосредствено в дясно до полето Link (кръгче) и придвижите мишката до някоя от вече именуваните котви.
JDJ © 2006 Всички права запазени.