Схема BG051PO001-4.3.05 „Развитие на професионалното образование и обучение в сътрудничество с работодателите” Договор: BG051PO001-4.3.05 – 0022 Име на проект: „Образователни паркове за развитие на професионално знание и компетенции в областта на...

О Shape4 ПЕРАТИВНА ПРОГРАМА

„РАЗВИТИЕ НА ЧОВЕШКИТЕ РЕСУРСИ” 2007-2013

МИНИСТЕРСТВО НА ОБРАЗОВАНИЕТО И НАУКАТА

Схема BG051PO001-4.3.05 „Развитие на професионалното образование и обучение в сътрудничество с работодателите”

Инвестира във вашето бъдеще!

Договор: BG051PO001-4.3.05 – 0022

Име на проект: „Образователни паркове за развитие на професионално знание и компетенции в областта на компютърните технологии и системи в колаборация с IT сектора“

Бенефициент: Професионална гимназия по компютърни технологии и системи –
гр. Правец

ДЕЙНОСТ 6. Разработване на електронно съдържание за специализираните
професионални курсове, заложени за професионално обучение в 4
образователни парка
Отчетен период 01.04.2014 г. до 30.04.2014 г.

Дисциплина: Приложен софтуер

Cъздаване на хипервръзки

Една от най-важните възможности на HTML е създаването на хипервръзки към други обекти. Езикът HTML поддържа връзки от следния тип:

Друг HTML документ;
Друг, различен от HTML документ (графични изображения, текст, звукови файлове, анимация, видео клипове и др.);
Произволна точка от текущия или друг HTML документ;

Командите <A> и </A> се използват за създаване на връзки към други файлове или позиции в текущия файл. При условие, че тези елементи заграждат някакъв текст, той става избираем. След избирането му се активира връзката свързана с него.

В случай, че елементите <A> и </A> заграждат графично изображение, то става избираемо. След избирането му се реализира съответната връзка. Ако връзката сочи към друг документ, той се извлича и визуализира.

Връзки към позиция в същия документ осъществяват преход към съответната част от документа.

Създаване на хипервръзка към друг документ или файл

За да се създаде връзка към друг документ или файл се използва параметърът HREF на командата <A>. Пример:

<a href="file.html"> Текст за хипервръзка </а>

или

<a href="xxxx://xxx.xxxxx.xxx">Връзка към xxx.xxxxx.xxx</a>

Използване на изображения като хипервръзки

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

Текстови хипервръзки към страници от един и същ сайт

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

Създайте следната структура:

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

Основна директория folder

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">Връзка към страница page2.html, намираща се в директория folder1, от началната страница index.html</a>

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

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

Текстови хипервръзки към части от една и съща страница(котви)

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

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

1) Първо трябва да създадете т.нар. котва и да я поставите на мястото в страницата, към което правите връзка. Котвата трябва да има следния формат:

Например, ако искате да направите връзка към долната част на страницата си. Тогава създавате котва, която трябва да изглежда така и да се намира в долната част на секцията BODY на страницата. (За да има ефект тази хипервръзка страницата трябва да е дълга):

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

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

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

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

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

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

<a href="xxxx://xxx.xxxx-xxxx.xxx/xxxx-xxxx.xxxx#xxxxxx">Връзка към долната част на страницата some-page.html от сайта xxxx-xxxx.xxx</a>

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

Понякога е удобно дадена хипервръзка да се отвори в отделен прозорец.

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

За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.

Например да направим хипервръзка, която ще отваря в отделен прозорец сайта на Yahoo:

<a href="xxxx://xxx.xxxxx.xxx" target="_blank">Връзка към Yahoo, която ще се отвори в нов прозорец</a>

Другата стойност на target е _self. Тази стойност задава отваряне на хипервръзката в същия прозорец, който е отворен в момента на щракането върху нея, т.е. ефекта е същия, който е и по подразбиране.

Хипервръзка от HTML документ към E_- Mail адрес

Хипервръзка от HTML документ към E - Mail адрес се задава чрез Mailto:

където, user@host е електронният адрес на лицето, получател на съобщението. Хипервръзката Text се визуализира в полето на документа. При активирането й, в зависимост от възможностите на WWW клиента, на екрана се отваря прозорец с формуляр за редактиране на електронна поща.

Възпроизвеждане на звуков файл

Например, за възпроизвеждане на звуковия файл "Musica.wav" може да се използва следния код:

<P>Възпроизвеждане на звук: <A HREF="music.wav">Музика</A></P>

Възпроизвеждане на видео клип

Посочените два примера могат да бъдат включени към произволна HTML страница с адресиране на наличен .wav, .mov, или .avi файл.

В таблица са представени примери за възможното приложение на елемента <A>.

Връзка	Пример
Преход в рамките на страницата	<A HREF="#top">
Етикет на точка от страницата	<A NAME="top">
Преход към външна страница	<A HREF="indexi.htm">
Преход към точка от външна страница	<A HREF="indexi.htm#bottom">
Преход към друг Web site	<A HREF="xxxx://xxx.xx.xxxx.xx">
Връзка с електронна поща	<A HREF="mailto:xxxx@xxxxxxx.xxx">

Промяна на цвета на текстовите хипервръзки

По подразбиране всички хипервръзки са сини на цвят и подчертани. Цветът на хипервръзките се задава с атрибутите:

link - задава цвят на непосетените връзки
alink - задава цвят на връзките в момента на щракането в/у тях
vlink - задава цвят на вече посетени връзки

Например, за да зададете бял фон, черен текст, син цвят на връзките (той е и по подразбиране - може да не се задава), червен цвят при щракане върху тях и отново син цвят за посетени връзки, трябва да напишете следния код:

Задача:

1) Освен файла index.html създайте и page1.html, page_2.html, page_3.html.

2) Създайте хипервръзки от всяка страница към всички останали.

3) В страница index.html създайте връзка към долната част на същата страницата и обратно.

4) От index.html създайте връзка към горната част на страница page_1.html, средата на page_2.html и долната част на page_3.html.

5) На всяка страница поставете различен цвят на фона и текста.

6) Задайте различни цветове за връзките, посетените връзки и активните връзки;

7) Поставете различни заглавия в тага <title> на всяка страница;

8) Във всяка страница създайте по един параграф, който да е подравнен по различен начин.

ИЗГОТВИЛ:

Експерт-консултант

/Xxxxxx Xxxxxxx/

Document Metadata

Table of Contents

Document Metadata