Уч_Kabanov / Информатика / 28. HTML 4 / HTML4
.pdf
Ссылка в тексте документа
Язык HTML позволяет создавать динамические ссылки, то есть возможности перехода на другие странички. Загрузка материала, на который указывает ссылка, будет осуществлен немедленно после того, как мы щелкнем на ссылке указателем мышки.
Для создания ссылок в тексте документа используется тег <A> и закрывающий тег </A>. Между тегами <A> и </A> расположен фрагмент HTML-странички, с которым связана ссылка.
Задание 1. Откройте Блокнот. Запишите в пустое окно этого файла следующие команды (они выделены жирным шрифтом), сохраните файл в Вашей папке с именем file1.html, загрузите браузер и посмотрите, как выглядит написанная вами HTML-страничка.
<HTML>
<HEAD>
<TITLE>
Работаем со ссылками
</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”> <P>
<H1 align= ”center”>Ссылки и работа над ними</H1> <P>
<H2 align= ”center”>Здесь мы изучаем ссылки</H2> <P>
Ссылки можно использовать в любом месте в теле HTML-программы. В этом параграфе мы сейчас вставим ссылку: <A href=”#fed”>ЭТО – ПЕРВАЯ ССЫЛКА </A>.
Со словами “это – первая ссылка” теперь можно связать адрес какого-нибудь произвольного документа или другого объекта.
</BODY>
</HTML>
На экране созданная нами ссылка выделена из общего текста особым образом: она подчеркнута и выделена цветом. После того, как вы однажды щелкните ссылку, браузер запомнит это действие, и в случае, если вы вернетесь на страницу, содержащую ссылку, цвет ссылки изменится.
Адрес ссылки
Если мы в предыдущем примере щелкнем на ссылку, то ничего не произойдет, так как в свойстве href для нашей ссылки указан несуществующий адрес. В свойстве href указывается адрес документа, на который указывает ссылка. В прошлом примере в качестве адреса указан параметр #fed. Если параметр начинается с #, то это означает, что данная ссылка есть ссылка на фрагмент текущей HTML-страницы. На нашей странице нет фрагмента, который носил бы имя fed, и поэтому никаких действий после нажатия на ссылку не происходит.
Для того, чтобы фрагменту текста (например, абзацу) назначить имя используется пара тегов
<A NAME=”#fed”></A>.
Задание 2. Добавьте в файл file1.html после тега </BODY> следующий кусок:
<P><A NAME=”#fed”></A>На этот фрагмент указывает выше написанная ссылка.
Сохраните файл, загрузите его в браузер, измените размеры окна браузера так, чтобы в него помещалось 3-4 строки текста, и посмотрите, что получилось.
Сейчас при нажатии на ссылку происходит переход на указанный в ссылке фрагмент.
Ссылки на другие документы Интернет
Чтобы организовать ссылку на какой-либо документ, расположенный в сети Интернет, надо указать полный адрес этого документа в параметре href ссылки.
Задание 3. Откройте Блокнот, создайте файл file2.html, сохраните его в вашей папке.
Организуйте ссылки на некоторые российские поисковые сервера. Страничка HTML должна выглядеть как таблица:
Название |
Адрес |
|
Russia on the Net |
http://www.ru |
|
Russia-On-Line |
http://www.online.ru |
|
Russian Search Engine |
http://search.interrussia.com/ |
|
Rambler |
http://www.rambler.ru |
|
InforArt |
file1.html |
|
Почтовая ссылка
Почтовая ссылка выглядит следующим образом: <A HREF= “mailto:somename@someaddress.com”> Нажав на
ссылку, будет предложено окно для создания нового почтового сообщения, которое затем отправляется адресату на
E-mail somename@someaddress.com</A>
Задание 4. Дополните таблицу файла file2.html несколькими почтовыми ссылками: Ivanov@mail.ru, Petrov@mail.ru,, Sidorov@mail.ru.
1
Переадресовка на страницу с другим адресом
Для переадресовки на страницу с другим адресом используется тег <META> (закрывающий тег </META> не нужен), который расположен внутри <HEAD>…</HEAD>.
Пример. Команда <META HTTP-EQUIV=“refresh” CONTENT=“12;URL=file.html”> означает, что через 12
секунд (свойство content) эта страница обновится (так как стоит слово refresh) и произойдет загрузка файла file.html.
Задание 5. Откройте Блокнот, создайте файл file3.html, сохраните его в вашей папке. Создайте программу, которая в браузере будет выглядеть так:
Ссылки и работа над ними
Здесь мы изучаем ссылки и другие возможности
Через 5 секунд эта страница обновится и произойдет загрузка файла file1.html
Проверьте ее работоспособность.
Задание 6. Откройте Блокнот, создайте файл file4.html, сохраните его в вашей папке. Запишите в пустое окно этого файла следующие команды (они выделены жирным шрифтом), сохраните файл, загрузите браузер и посмотрите, как выглядит написанная вами HTML-страничка.
<HTML>
<HEAD>
<TITLE>
Работаем с ссылками
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> document.location.href="file1.html" </SCRIPT>
<P>
<H1 align="center">Ссылки и работа над ними.</H1> <P>
<H2 align="center">Здесь мы изучаем ссылки и другие возможности</H2> <P>Этот документ мы не успеем увидеть в окне браузера.<BR><BR><BR> </BODY>
</HTML>
Какое действие выполняют команды, выделенные цветом?
Использование тега <BODY> для задания параметров ссылки
В качестве примера изменения цветов ссылок после того, как ссылка была посещена, предлагаю выполнить следующее задание.
Задание 7. Откройте Блокнот, создайте файл file5.html, сохраните его в вашей папке. Запишите в пустое окно этого файла следующие команды (они выделены жирным шрифтом), сохраните файл, загрузите браузер и посмотрите, как выглядит написанная вами HTML-страничка.
<HTML>
<HEAD>
<TITLE>
Работаем со ссылками
</TITLE>
</HEAD>
<BODY ALINK=”red” VLINK=”green” LINK= “yellow” TEXT= “white” BGCOLOR= “#333333”> <H1 align= “center”>Ссылки и работа над ними</H1>
<P>
<H2 align= “center”>Здесь мы изучаем ссылки и другие возможности</H2> <P>
<A href=“ttt”>Первая ссылка (ссылка не посещена и потому должна иметь жёлтый цвет – параметр LINK) </A> <P>
<A href=“rrr”>Вторая ссылка (поместите на нее мышку, нажмите левую кнопку и удерживайте ее, ссылка должна становиться красной – параметр ALINK)</A>
<P>
<A href=”file5.html”>Третья ссылка (щёлкните по ней, посещённая ссылка должна стать зелёной – параметр
VLINK)</A>
</BODY>
</HTML>
2