Гиперссылка на другую html страницу
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
Для создания гиперссылки служит дескриптор <A>
Пример:
HTML-код: <a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a> <a href="../index.html">Ссылка на главную страницу сайта</a> |
Отображение в браузере: |
Гиперссылка в пределах html страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, на этой странице это гиперссылки в начале занятия, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
HTML-код: <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a> |
Отображение в браузере: |
Почтовая гиперссылка
Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.
При создании почтовой гиперссылки можно указывать дополнительный адрес, по которому будет отправлена копия сообщения. Также в такой гиперссылке можно указывать тему отправляемого сообщения.
Пример:
HTML-код: <a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a> |
Отображение в браузере: |
Открытие html страниц в новом окне
При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.
Пример:
HTML-код: <a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</a> |
Отображение в браузере: |
Цвет текста гиперссылок
Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.
Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
Атрибут VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
Порядок перехода по гиперссылкам
Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.
Следует сказать, что атрибутом TABINDEX можно пользоваться для выбора других объектов, например, графических изображений.
Фреймы документа html
Создание фреймов
Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.
Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.
Дескриптор <FRAMESET> формирует набор фреймов, которые делят пространство окна на строки и столбцы. Далее необходимо задать значения высоты/ширины всех строк/столбцов, выраженные в процентах относительно текущих габаритов окна браузера, пикселях или в виде символа звездочки. Символ звездочки говорит о том, что размеры фреймов зависят от габаритов остальных фреймов страницы.
Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.
Ниже, в качестве примера, приведен код страницы, которую можно посмотреть здесь.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<frameset rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</frameset>
</html>
Достоинства и недостатки фреймов
Прежде чем принять решение об использовании фреймов на страницах своего сайта давайте рассмотрим их достоинства и недостатки.
Достоинства:
- фреймы одновременно отображают различную информацию в пределах одного окна;
- используя фреймы, можно постоянно отображать какую-нибудь информацию (например логотип), не включая ее в каждую страницу сайта;
- можно гибко построить навигацию по сайту.
Недостатки:
- главное достоинство фреймов (отображение различной информации в пределах одного окна) является их же и недостатком, т.к. доступная область Вэб-страницы существенно сужается;
- при создании фрейма правильно выбрать его размер часто бывает затруднительно. Таким образом, пользователь должен постоянно пролистывать фрейм при помощи полос прокрутки, что может очень быстро надоесть;
- при низком разрешении экрана монитора объем видимой информации значительно уменьшается;
- ну и самый неприятный недостаток - многие поисковые системы и каталоги отказываются регистрировать страницы, использующие фреймы.
Еще одним из недостатков фреймов является тот факт, что некоторые браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг<NOFRAMES>. Текст, помещенный между открывающим и закрывающим тэгом, отображается в случае невозможности отображения фрейма.
Полосы прокрутки фреймов
По умолчанию браузер отображает полосы прокрутки только в том случае, если данные не укладываются в размеры фрейма. Присвоив атрибуту SCROLLING значение yes/no, можно предписать браузеру всегда сохранять полосы прокрутки в скрытом состоянии, либо постоянно отображать их. Сокрытие полос прокрутки с одной стороны увеличивает размеры видимой области фрейма. С другой стороны - если данные не помещаются в окно, то они будут недоступны для пользователя.
Изменение границ фреймов
Для запрещения изменения границ фрейма применяется атрибут NORESIZE. Это удобно, если надо запретить пользователю модифицировать исходную компоновку страницы. По умолчанию пользователь может перемещать границы фрейма по своему желанию, задавая новые размеры объекта, чтобы лучше рассмотреть определенный фрагмент данных. Если фреймы лишены видимых границ, это автоматически влечет запрет на изменение их размеров. Атрибут BORDER тэга <FRAMESET> дает возможность изменять толщину линий, обрамляющих фрейм. По умолчанию браузер заключает фрейм в рамку, равной 6 пикселям и окрашивает его в серый цвет. Изменить цвет можно при помощи атрибута BORDERCOLOR. Для сокрытия границ фрейма служит атрибут FRAMEBORDER.
По умолчанию браузер отображает фреймы с полосой чистого пространства (полями) между текстом и границей фрейма равной 10 пикселям.
Атрибут MARGINWIDTH позволяет задавать ширину левого и правого поля.
Атрибут MARGINHEIGHT - высоту верхнего и нижнего поля.
Задавая величины полей, надо использовать оба атрибута, т.к. браузер может автоматически сократить размеры тех полей, которые вы не указали, до наименьшего значения.
Плавающие фреймы
Для создания плавающих фреймов служит тэг <IFRAME>. Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов. Атрибут NAME служит для задания имени плавающего фрейма, которое может затем быть использовано в определении гиперссылки с целью открытия в этом фрейме соответствующей страницы.
Атрибутами WIDTH HEIGHT можно задавать размеры плавающего фрейма, т.к. пользователь самостоятельно изменить их не может.
Плавающие фреймы в данное время поддерживаются только Microsoft IE.
Ниже, в качестве примера, приведен код страницы, которую можно посмотреть здесь.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<body>
<iframe src="lsn017.html" name="frame1"
width="350" height="300" align="left"></iframe>
<h1>Пример работы с фреймами</h1>
..
<h1>Пример работы с фреймами</h1>
</frameset>
</body>
</html>