Форма входа
Читем онлайн HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов
Шрифт:
-
+
Интервал:
-
+
Закладка:
Сделать
Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):
<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">Страница № 125</A>
"Страница № 125" будет открыта в новом окне Web-обозревателя.
Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение "_self" (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.
Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая" гиперссылка). Для этого достаточно задать в качестве значения атрибута HREF значок # ("решетка")
<A HREF="#">А я никуда не веду!</A>
При щелчке на такой гиперссылке ничего не произойдет.
НА ЗАМЕТКУ
"Пустыми" гиперссылками мы будем активно пользоваться в частях III и IV, когда начнем писать Web-сценарии.
Правила отображения гиперссылок Web-обозревателем:
— обычные гиперссылки выделяются синим цветом;
— гиперссылки, по которым посетитель уже "ходил" (посещенные гиперссылки), выводятся темно-красным цветом;
— гиперссылка, по которой посетитель в данный момент щелкает (активная гиперссылка), выводится ярко-красным цветом;
— текст любых гиперссылок подчеркивается;
— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на "указующий перст".
Таково поведение по умолчанию, которое мы можем изменить, создав соответствующее представление. О том, как это сделать, будет рассказано в части II.
Интернет-адреса в WWW
Об интернет-адресах файлов мы говорили еще в главе 1. Однако WWW привносит в них кое-что новое, что нам обязательно нужно знать.
Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125.html. Он содержит и интернет- адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.
Однако если гиперссылка указывает на файл, входящий в состав того же Web- сайта, что и файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).
Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта. Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь нужно отсчитывать относительно корневой папки.
НА ЗАМЕТКУ
О корневой папке сайта также было рассказано в главе 1. Вкратце: это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web- сервер; в этой папке должны помещаться все файлы Web-сайта.
Например, интернет-адрес
/page3.html
указывает на файл page3.html, хранящийся в корневой папке Web-сайта. А интернет-адрес
/articles/article1.html
указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.
Такие интернет-адреса называют абсолютными и используют, если нужно создать гиперссылку на файл, хранящийся в "глубине" Web-сайта (скажем, в другой папке, нежели файл текущей Web-страницы).
Сокращенные интернет-адреса второго типа задают путь к целевому файлу относительно файла текущей Web-страницы. Они не содержат в начале символа слэша — и в этом их важное отличие от абсолютных интернет-адресов.
Рассмотрим несколько примеров подобных интернет-адресов. Интернет-адрес
archive.zip
указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы.
Интернет-адрес
chapter3/page1.html
указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.
Следующий интернет-адрес
../contents.html
указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в начале пути — так обозначается папка предыдущего уровня вложенности.)
Такие интернет-адреса называют относительными. Их применяют, если нужно создать гиперссылку на файл, хранящийся в той же папке, что и текущая Web- страница, одной из вложенных в нее папок или папке предыдущего уровня вложенности.
НА ЗАМЕТКУ
Во многих случаях лучше поэкспериментировать с разными интернет-адресами, чтобы выяснить, какой именно подойдет — абсолютный или относительный.
ВНИМАНИЕ!
В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. Дело в том, что файловая система компьютера не знает, какую папку считать корневой, поэтому не сможет правильно интерпретировать абсолютные интернет-адреса. (Разумеется, гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернет-адреса.)
Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web- странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web- страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем — ведь он хранит Web-страницу по умолчанию.
Откроем Web-страницу index.htm и найдем в ней HTML-код, формирующий список тегов. Создадим там гиперссылки, указывающие на соответствующие Web-страницы.
Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>
Остальные гиперссылки создаются аналогично.
Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад — на главную Web-страницу. Конечно, это можно сделать, нажав кнопку возврата назад на панели инструментов Web- обозревателя или клавишу <Backspace> на клавиатуре. Но правила хорошего тона Web-дизайна требуют, чтобы на Web-странице присутствовала соответствующая гиперссылка.
Создадим такую гиперссылку на всех Web-страницах, описывающих теги. Поместим ее в самом конце каждой Web-страницы — обычно она находится именно там. Вот так выглядит формирующий ее HTML-код:
<P><A HREF="../index.htm">На главную Web-страницу</A></P>
Осталось создать на главной Web-странице гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 6.1).
Листинг 6.1
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине. (<A HREF="http://ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья</A>)</P>
</BLOCKQUOTE>
Здесь мы указали для тега <A> атрибут TARGET со значением "_blank". И Web-страница с текстом статьи о HTML будет открываться в новом окне Web-обозревателя. Так что посетитель сможет "залезть" в Википедию, не покидая нашего Web-сайта.
Почтовые гиперссылки
HTML позволяет нам создать гиперссылку, указывающую на адрес электронной почты (почтовую гиперссылку). Щелчок на ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет-адрес такой гиперссылки записывается особым образом.
Пусть мы хотим создать гиперссылку, указывающую на почтовый адрес: [email protected]
Согласно стандарту HTML, этот почтовый адрес должен быть записан так:
mailto: [email protected]
причем между двоеточием после mailto и собственно адресом не должно быть пробелов.
Тогда наша почтовая гиперссылка будет выглядеть так:
<A HREF="mailto: [email protected]">Отправить письмо</A>
В конце главной Web-страницы у нас приведены сведения о правах разработчиков. Давайте превратим слово "читатели" в почтовую гиперссылку. Создающий ее HTML-код будет выглядеть так:
<A HREF="mailto: [email protected]">читатели</A>
Адрес электронной почты в этой гиперссылки выдуман. Разумеется, вы можете заменить его на реальный.
Дополнительные возможности гиперссылок
Язык HTML предлагает нам некоторые дополнительные возможности для создания гиперссылок. Их применяют нечасто, но иногда они полезны.
На этой странице вы можете бесплатно читать книгу HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов бесплатно.
Похожие на HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов книги
- Календарь исполнения желаний. 365 самых сильных практик на каждый день 2015 года - Наталия Правдина - Прочая справочная литература
- Миллион растений для вашего сада - Галина Кизима - Прочая справочная литература
- Любовь с точки зрения мужчины - Ришат Вахитов - Прочая справочная литература
- Числовой код рождения и его влияние на судьбу. Как просчитать удачу - Ирина Михеева - Прочая справочная литература
- Китайский язык. Полный курс перевода - Владимир Щичко - Прочая справочная литература
- Как сдавать экзамены - Надежда Фадеева - Прочая справочная литература
- Мысли и афоризмы древних римлян - Константин Душенко - Прочая справочная литература
- Склеивание, облицовка и гнутьё древесины - Илья Мельников - Прочая справочная литература
- Справочник но массажу - Владимир Васичкин - Прочая справочная литература
- Западная Африка: Нигерия - Илья Мельников - Прочая справочная литература
