| |
Содержание:
Об этой книге
Введение
в HTML
Нужные программы
Шрифты, размер
Гиперссылки
Цвет
Таблицы
Вставляем картинку
Работаем с фоном
Спецсимволы
Фреймы
Слои
стили,
CSS
SSI
Локальный
сервер
JavaScript
понятия
специальные теги:
title=
alt=
| |
|
| |
| Гиперссылки |
Что такое гиперссылки? Гиперссылки,
они же URL ("урлы"), "линки" и прочая -
основа всего инета... Собственно, встречаете вы их на каждом
шагу - вот хотя бы тут, в меню, при переходе на другую страничку,
в другой раздел... В этой главе я расскажу не только банальное
известное 90% сетянам "<a href=" но и про другие
хитрушки, знакомые немногим. Но будем последовательны. Итак...
урл:
<a href="http://что-то там.ру">наименование
линка</a>
так выглядит обыкновенная
ссылка в коде. А в броузере мы увидим то, что находится
в "контейнере" тега, то есть в нашем примере это -
"наименование линка".
Казалось
бы, все ясно, но есть нюансы..
Пути в
гиперссылке могут быть абсолютными или же относительными.
Что такое абсолютный путь?
Это
ссылка вида <a href="http://idgleb.yard.ru/">мой
сайт</a> - ссылка, ведущая на мой сайт из любого
места, даже будучи расположенной в сохраненном на винте документе
она будет переправлять пользователя на забитый в нее адрес.
Что такое путь относительный?
- это путь, отсылающий юзверя с учетом текущего его местоположения.
Например, мы имеем сайт http://idgleb.yard.ru/
. А в нем имеем пачку директорий, среди которых, например, XXX
- гляньте в адресную строку бродилки (тем, кто в танке - это
в самом верху ;0)) видим там примерно такое - http://idgleb.yard.ru/директория/файл.html (вообще обычно
пага оканчивается на .html, или даже .shtml, а у пользующих
php - вообще файлы "без расширения", но это не суть
важно),
//Тем, кто в танке: если
вы читаете статью и у вас вверху не http://idgleb.yard.ru/index.php?n=teach/html/links , http://ннм.ru/sectionX.php?adate=teach/html/links
или http://foox.by.ru/TEACH/HTML/links.shtm
- то ее уже кто-то сплагиатил :0)//
В общем... - относительный путь (в конкретном случае следует
рассматривать то, что после знака "равно") читается
как Сайт, директория "teach", в ней директория html,
и в ней уже лежит файло с именем links (окончание не пишу, потому
как оно прописано в скрипте .php) со всей этой пургой. Итак...
Рассмотрим ссылки на страничку "index" (файл "Бредисловие"):
"Абсолютный" ("жесткий") путь:
<a href="http://сайт.ru/директория/файл.html">имя
ссЫлки</a>
Зависимый путь:
<a href="файл.html">файл</a>
Что же видим? Зависимый путь и короче (а следовательно,
и меньше весит и его проще писать!) и удобнее - не нужно припоминать
весь путь - достаточно быть уверенным, что файл.html
лежит в одной директории сайта с файлом, к которому (или из
которого) мы обращаемся. Это облегчит юзверю житие в случае,
если он тупо сохранит странички на винт.
Показываю на пальцах: -
в директории X есть два файла - Y и Z
так вот... в любом из этих файлов будет работать ссылка на другой,
поставленная как просто
<a href="Y.html">название
ссылки </a> или же
<a href="Х.html">название ссылки </a>
Ну а что делать, если он лежит в другой директории?
Тут уже придется учесть часть пути...
нужно представить себе "дерево".
Сайт.ru:
/X
fail1.html
fail2.html
fail3.html
fail4.html
/Y
/G
fail5.html
Для тех, кто в танке, поясню подробнее: На сайте две директории
- X и Y. В директории Х лежат 4 файла. В директории Y лежит
директория G, в которой лежит еще один файл.
Задача - поставить ссылку, открывающую один из первых 4-х файлов
из файла fail5.html
абсолютный путь:
<a href="http://сайт.ру/X/fail1.html">название
ссЫлки на 1-й файл</a> - ссылка этого вида сработает
с любого места сайта, даже если конкретно эту HTMLьку перенести
на совсем другой сайт.
абсолютный путь
до файла file5.html в этом случае соответственно -
<a href="http://сайт.ру/Y/G/fail5.html">название
ссЫлкина 5-й файл</a>
Теперь - зависимые пути.
до files1.html из файла files5.html:
<a href="../../X/fail1.html">название
ссЫлки</a> - если перенести файл с такой ссылкой
в другую директорию сайта - она уже не сработает..
до files5.html из файла files1.html:
<a href="../Y/G/fail5.html">название
ссЫлки</a> - эта сслыка тоже не сработает, если
ее местоположение внутри сайта изменится... - например в результате
реформирования раздела.
Теперь пояснение
- "../" это означает команду бродилке подняться
из текущей директории на уровень выше. Сколько их у нас всего?
Сайт.ру/X/Y/ считаем: Сайт - это у нас "корневой каталог"
(как диск С:, например), в нем директория Y в которой еще и
G. Две директории. Следовательно, "../" пишем
два раза - без кавычек есессно. (см. выше). Теперь бродилка
с текущего места (из файла fail5.html), откуда получила ссылку,
выберется в корневую директорию (http://www.сайт.ru/), но отсюда
надо идти в другие директории, опять вглубь сайта.. Идем: /X/
- на директорию вглубь.
Суть процесса понятна?
Еще вариант,
если файл, в который ведет ссылка, находится в той же директории,
можно написать просто <a href="fail4.htm">
В этом случае бродилка попробует запустить
заданный в ссылке файл в этой же самой директории, где находится
содержащий ссылку файл.
С fail5.html на другие файлы такая ссылка не прокатит.
(Она должна будет иметь вид ../../X/files1.html)
Но самое удобное, это ПУТЬ ОТ КОРНЯ, он же "относительный"
Мы просто указываем путь относительно корня (начала сайта)
То есть, если мы напишем /X/fail3.html, то при условии, что
бродилка находится на сайте, а не смотрит на сохраненную пагу,
мы попадем аккурат на файл3.html
Этот способ указания ссылок наиболее оптимален, так как нам
не нужно высчитывать, на сколько уровней подниматься относительно
директории с файлом, из которого мы идем. Мы просто указываем
путь до того файла, который хотим видеть от КОРНЯ сайта... с
его, так сказать, начала...
Например,
открыта у нас в Far`e или какой ее подобной оболочке директория
Program Files. Написав в командной строке c:/windows/notepad.exe
- в этом пути не учитывается ОТКУДА мы обращаемся к файлу такому-то.
Учитывается только, где он лежит относительно корня. В нашем
случае это диск С:. В случае вашей странички - http://пага.ру/
И вид у ссылки будет: <a href="/teach/html/index">начало
уроков по HTML</a>
Что
еще нужно знать про ссылки?
Иногда очень
удобно бывает, чтобы ссылка открылась в новом окне, а та страничка,
с которой мы пошли, осталась неизменной и никуда не пропала.
В этом случае мы можем навести на линк курсор и, нажав правую
кнопку мыши, выбрать в контекстном меню вариант "Открыть
в новом окне" (для туканов: вторая сверху строка субменюшки*).
А можно - облегчить посетителю жись и прописать эту опцию в
своей ссылке самостоятельно:
<a href="http://сайт.ru/X/fail1.htm"
target="_blank">открыть "fail1.html"
в новом окне</a>
да-да... вот это самое target="_blank" Оно
пишется через пробел после href="URL" и закрывается
символом >.
какие
виды target еще бывают?
_self - это загрузит
линк в активное окно. То есть в то, в котором нажат линк. Он
срабатывает по умолчанию.
_parent
_top
- последние два вам не понадобятся, ибо к тому времени, когда
вы дозреете до понимания, как этим пользоваться, вы уже будете
знать, что оно делает, и так. Используется достаточно редко?
Преимущественно, всякими ленивцами-извращенцами по привычке
мающимися давно устаревшими фреймами :0)
Кроме
общепринятой функции перехода со странички на страничку, гиперссылки
могут обеспечить и переходы внутри одной странички. Такие "урезанные"
гиперссылки называются "якоря", и работают по принципу
меток.
Разместив где-либо в тексте
"якорь" вида <a name="число или имя (английскими
буквами!)", вы можете позиционировать страничку этой меченой
строкой по верхней кромке окна бродилки. Набираем
в адресной строке имя нашего файла, но после концовки ставим
дополнительное "#имя метки". Например, метку в файле
file1.htm мы назвали metka 2 - обратиться к ней
можно, вызывав файл /путь/file1.htm#metka2 - это можно
сделать как вручную, набрав это в строке адреса, так и забив
в ссылку вида <a href="file1.htm#metka2">обращение
к метке №2</a>
Вот, собственно,
и все основное, что нужно знать о гиперлинках. А..., да, конечно
же
Ссылки могут быть также прилеплены и
на картинки. То есть, срабатывать при наведении/нажатии
курсора на картинку.
Вот это вставит в докУмент
картинку название.gif шириной 82 пиксела, высотой 90 пикселов
и имеющую бордюр в 0 пикселов. То есть, не имеющей оного :0)
:
<img src="название.gif" width="82"
height="90" border="0" alt="картинка">
но про картинки и фоны будет отдельная глава, так что наберитесь
терпения и листайте по порядку ;0) |
| <<
работа со шрифтами |
работа
с цветом >> |
|
|
|
|
|
|
Рекомендую посетить:
|