Содержание
Навигация, для чего она нужна? Это была одна из главных идей при создании языка разметки html, чтобы люди могли очень быстро и просто переходить как от документа к документу, так и внутри документа. Соответственно видов навигации бывает 2 — внутренняя и внешняя.
Внутрення навигация: метки (якорь, anchor)
Внутрення навигация происходит по документу, который уже открыт. Например, мы открыли большой документ, появляется прокрутка, и чтобы сразу человека направить к нужному месту, мы применяем внутреннюю навигацию. Для этого мы должны то самое место, которое человеку хотим показать, снабдить меткой. Пример:
<a href="#метка">текст</a> ... <a name="метка"></a> <p id="метка">какой-то текст
Т.е. в этом примере мы использовали атрибут id. В любой элемент можно поставить элемент id. В этом атрибуте напишем любой значение (в примере — ‘метка’), а потом, чтобы к этому месту человека переместить, мы в элементе гиперссылка поставим нашу метку, а перед ней знак хэш (#). Теперь, когда человек кликает на ссылку, документ прокручивается так, чтобы наш параграф стал максимально высоко к верхнему краю области просмотра.
Иногда в документе в гиперссылке указывают только хэш без метки, тогда документ прокручивается к началу.
В значении атрибута id можно использовать любые буквы в разном регистре (кодировка юникод позволяет применять любые символы из любых языков), цифры, дефис, подчеркивание, точку, двоеточие. Значение атрибута id должно обязательно начинаться с буквы. Саму метку лучше указывать в кавычках.
Значение атрибута id уникальное. Т.е. на странице не должно быть двух и более элементов с одинаковым значением этого атрибута.
Внешняя навигация
Эта навигация нужна, чтобы пользователь мог открыть один документ, кликнув по ссылке в другом документе. И в атрибуте href мы указываем адрес внешнего документа.
<a href="имя_файла">текст</a> <a href="1.html">Это ссылка на 1.html</a> <a href="2.html">Это ссылка на 2.html</a> <a href="3.html">Это ссылка на 3.html</a>
Адреса бывают двух видов: относительные (в примере выше) и абсолютные (когда указывается полный адрес документа с www).
В ссылках не надо указывать кириллицы, пробелов и верхнего регистра.
Файлы лежат в одной папке. В этом случае, если я хочу из одного документа открыть другой, я должен в нем указать в качестве пути ко второму документу просто его название (href=»target.html»). Относительный путь состоит из перехода по папкам. Поскольку мы уже находимся в той папке, в которой лежит целевой документ, мы его просто указываем в качестве имени.
Другая ситуация. Есть папка, где лежит текущий файл. Нам из него надо открыть целевой файл target.html, который лежит в папке folder, т.е. он находится в другой папке. Тогда пишем так: href=»folder/target.html».
Если наш текущий файл лежит в папке folder, а целевой файл в папке выше по уровню (например, в root), т.е. надо не спускаться по иерархии вниз, а наоборот, подняться выше. Используем для родительской папки абстрактное имя — две точки (..).
Примеры относительных путей:
href="../target.html" "../folder/target.html" "info.html" "manual/info.html" "manual" "../help.html" "../project/first.html" "../../about/contact.html" ... "/" - корень сайта "/demo/" "/images/pic.gif" "./file/doc.html" = "file/doc.html" ... <head> //В заголовке! <base href="http://mysite.ru">
Переход к другому документу с меткой
В этом случае указываем путь к файлу, потом сразу ставится метка в том документе, который открываем. Когда мы кликаем по ссылке, открывается документ, на который мы ссылаемся, а потом в этом документе идет прокрутка к тому месту, которое помечено меткой.
<a href="путь к файлу#метка">текст</a> <a href="1.html#а">Ссылка на файл 1.html с меткой "а"</a> <a name="а">В этом месте поставлена метка</a>
Абсолютные адреса
Когда мы работаем на сервере, выше корневой папки подняться не сможем (пространство корневой папки задается доменами). Примеры:
Ссылка на HTML файл по протоколу HTTP: <a href="http://www.site.ru/page1.html">Пример</a> Ссылка на ZIP файл по протоколу HTTP: <a href="http://www.site.ru:81/test.zip">Пример</a> Ссылка на EXE файл по протоколу FTP: <a href="ftp://site.ru/pub/install.exe">Пример</a> Ссылка на e-mail, при помощи протокола mailto: <a href="mailto:name@site.ru">Пример</a>
В каком окне открывать ссылку?
У гиперссылок есть возможность адресации, т.е. указывается фрейм, куда будет загружаться документ. По умолчанию документ, на который ведет ссылка, открывается в текущем окне. Но можно сделать и по-другому:
Откроется в новом окне <a href="file.html" target="_blank">ссылка</a> <a href="file.html" target="_self">ссылка</a>
Гиперссылки
Гиперссылки выделяются несколькими способами:
- Цвет (синий — цвет необработанной ссылки, красный — цвет активной ссылки, фиолетовый — цвет отработанной ссылки).
- Подчеркивание.
- Курсор меняет свой внешний вид.
Цвета для ссылок в коде задаются так:
link="blue" - неотработанная ссылка alink="red" - активная ссылка vlink="purple" - посещенная ссылка
