- •Уроки html'а. Урок # 1.
- •Уроки html'а. Урок # 2.
- •Заголовки
- •Набор текста
- •Разделители
- •Уроки html'а. Урок # 3.
- •Верхние и нижние индексы
- •Уроки html'а. Урок # 4.
- •Шрифты различного начертания
- •Управление цветом шрифта
- •Уроки html'а. Урок # 5.
- •Списки и таблицы
- •Что такое списки и таблицы
- •Как списки помогают организовать нам информацию
- •Как создать список на вашей странице
- •Нумерованный список
- •Списки определений
- •Списки в списках
- •Уроки html'а. Урок # 7.
- •Как построить таблицу
- •Объединение нескольких столбцов в одну ячейку
- •Включение списка в таблицу
- •Уроки html'а. Урок # 8.
- •Выравнивание текста в таблице
- •Цвета в таблице
- •Предварительное форматирование
- •Уроки html'а. Урок # 9.
- •Где вы сможете найти графику, изображения и рисунки
- •Создаем свое изображение
- •Как поместить изображение на страницу
- •Оптимальные размеры изображений
- •Миниатюра полное изображение
- •Алтернативный текст
- •Выравнивание изображений
- •Задание размера изображения
- •Пиктограммы
- •Линии и полосы
- •Фон страниц
- •Уроки html'а. Урок # 11.
- •Как браузеры работают с прозрачными изображениями
- •Создание прозрачных gif-изображений
- •Наложение изображений
- •Уроки html'а. Урок # 12.
- •Понятие гипертекстовой ссылки
- •Анатомия ссылки
- •Ссылки на любое место в www
- •Уроки html'а. Урок # 13.
- •Создание якоря и присвоение ему якоря
- •Ссылка на якорь
- •Компоновка ссылок в виде списков
- •Текст ссылок должен быть понятным
- •Уроки html'а. Урок # 14.
- •Изображения-карты
- •Как работают изображения-карты
- •Изображения-карты не являются новой технологией
- •Различия между серверными и клиентскими изображениями-картами
- •Разбиение изображения на фрагменты
- •Уроки html'а. Урок # 15.
- •Прямоугольники
- •Окружности
- •Многоугольники
- •Уроки html'а. Урок # 16.
- •Совершенствования веб-страницы
- •Развертывание веб-страницы в веб-узел
- •Зачем разделять веб-страницу
- •Правильно проектируйте свой узел
- •Подсчет числа посетителей домашней страницы
Создание якоря и присвоение ему якоря
Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите теги <a href="..">, указывающие на эти разделы.
Вы можете вводить именные якоря в любом месте ваших веб-страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки. В данном примере я помещу четыре якорных тега и ссоветствующие им ссылки.
<a href="#raz1">Переход к разделу 1</a><br> <a href="#raz2">Переход к разделу 2</a><br> <a href="#raz3">Переход к разделу 3</a><br> <a href="#raz4">Переход к разделу 4</a><br> <br> <a name="raz1">Раздел 1</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz2">Раздел 2</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz3">Раздел 3</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz4">Раздел 4</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> |
"<a href="#raz1">Переход к разделу 1</a>" - этой строчкой мы обозначили якорным тегом имя Переход к разделу 1. Чтобы перейти на этот тег, посетитель должен кликнуть на флажке с именем raz1. Посмотрите, к чему привел этот код, и немного "подрессеруйтесь" :).
Переход к разделу 1 Переход к разделу 2 Переход к разделу 3 Переход к разделу 4 Раздел 1 Ваш текст ... ... ... Ваш текст Раздел 2 Ваш текст ... ... ... Ваш текст Раздел 3 Ваш текст ... ... ... Ваш текст Раздел 4 Ваш текст ... ... ... Ваш текст |
Задать якорь, как вы убедились, довольно легко.
Ссылка на якорь
После того как вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей.
Ссылка на якорь очень напоминает стандартную ссылку. Для этого используется тег <a href="...">. Отличие в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел нашей "золотой" страничке, я использовал тег: <a href="#raz4">Переход к разделу 4</a><br>
Символ # указывает браузеру, что следует искать флажок, а не страничку. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при клике на таком тексте он перейдет не на отдельный HTML-файл, а на якорь, расположенный в той-же странице что и ссылка на него.
Компоновка ссылок в виде списков
Применяя на веб-странице ссылки, важно распологать их организованно, в определенном порядке, чтобы они были понятны и ими было легко пользоваться. Каждый раз, добавив очередной фрагмент HTML, убедитесь, что страница осталась огранизованной и читаемой.
Ссылки часто компонуют в виде списка. Раньше мы уже говорили о списках. Упоминалось и о том, что списки могут представлять собой множество отдельных фрагментов информации в четком маркированном виде. Списки очень удобны, если вы хотите использовать целый ряд ссылок. Например, у каждого есть своя подборка интересных веб-страниц. В нашем списке мы перечислим ряд мест, которые любит посещать веб-народ. Если бы эти ссылки не были расположены в виде спика, они представляли бы собой бесполезныю мешанину. Итак, смотрите:
Design Laboratory - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров. ADG Design - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа. WebMaster - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов. |
Ну думаю достаточно... Посмотрите на код и все станет ясно:
<li><a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a> - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров.<br> <li><a href="http://dweb.ru">AGS Design</A> - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа.<br> <li><a href="http://gif.lgg.ru">WebMaster</a> - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов.<br> |
Полезные советы
Умение пользоваться гиперссылками является мощным средством веб-страниц. Однако наряду с увеличением гибкости появляется опасность сделать веб-страницу более запутанной и сложной для посетителей.
Ниже я приведу ряд полезных советов относительно применения ссылок. Некоторые из них вытекают просто из здравого смысла, другие же покажутся менее очевидными. Следуя этим советам, вы не усложните веб-страницу при использовании ссылок.
Пусть ссылок будет не слишком много
Нельзя представить себе ничего более замкнутого, чем веб-страница, содержащая текст из 200 слов, из которых 180 являются ссылками на другие веб-ресурсы. Поскольку текст на ссылки подчеркивается, слишком большое число ссылок в абзаце (или на странице) делает его нечитаемым, и вряд ли это понравится посетителям.
Посещение веб-страниц во многом напоминает разглядывание витрин магазинов. Если у магазина некрасивая, беспорядочная ветрина, вам вряд ли захочется тудай зайти. Помните об этом при использовании ссылок. Если вы все же хотите ввести множество ссылок, подумайте о создании простого (но хорошо организованного) списка в конце страницы.