5. Специальные символы
ЗАДАНИЕ. В процессе чтения выполнить пример в документе HTML. Создать свои примеры для оставшихся специальных символов В этом же документе. Откройте документ в различных браузерах. |
В предыдущих разделах было размещено достаточное количество кода на HTML. Напрашивается вопрос, как браузер узнает, когда теги <h1></h1> являются управляющими, т.е. делают текст заголовком, а когда их нужно просто напечатать, как текст. На самом деле все, что находится в < > браузер считает управляющими тегами ВСЕГДА. А если необходимо отобразить эти символы на экране, то приходится записывать их особым образом, используя их специальные коды. Существуют целые таблицы со специальными символами и их значениями. Мы рассмотрим только основные:
< |
- знак "меньше" |
> |
- знак "больше" |
|
- непрерывный пробел |
© |
- знак "copyright" |
& |
- знак "амперсанд" |
« |
- левая открывающаяся кавычка |
|
- правая закрывающаяся кавычка |
Пример кода:
Мы ужинали в ресторане «Тройка».<br> 3 > 2 |
6. Ссылки
ЗАДАНИЕ. В процессе чтения выполнить все примеры в одном документе HTML. Откройте документ в различных браузерах. |
Ссылка - тег a
Ссылка - одно из важнейших понятий для html-документов. Бродя по интернету, вы щелкаете по кнопочкам и текстам и попадаете на нужные вам страницы. Эти страницы могут находиться на том же сервере, а могут и на сервере, находящемся на другом конце планеты. Но в обоих случаях переход осуществляется практически мгновенно.
А как вы узнаете, куда надо щелкнуть, чтобы перейти на другую страницу? Либо визуально (цвет ссылки другого цвета и подчеркнут), либо по курсору мыши, который превращается в ладонь. За все эти преображения отвечает тег-контейнер <a></a>. А за то, куда направить пользователя по щелчку - его атрибут - href. Рассмотрим пример HTML - кода:
Посетите<a href="http://www.yandex.ru/">поисковую систему Яндекс</a> |
Результат:
Посетите поисковую систему Яндекс |
Если вы щелкните по ссылке, то перейдете на сайт www.yandex.ru. Обратите внимание, когда вы подводите курсор мыши к ссылке, внизу (в строке состояния браузера) отображается адрес, на который ведет ссылка.
Итак, между тегами <a></a> пишется текст, при щелчке по которому осуществляется переход. А в качестве значения атрибута href выступает адрес страницы, на которую будет осуществлен переход. Об адресе следует поговорить подробнее.
Абсолютная и относительная адресация
Понятие URL
Что такое Интернет? Много, много компьютеров, соединенных между собой. На этих компьютерах лежат файлы, некоторые компьютеры предоставляют доступ к этим файлам (их называют серверами). Когда вам необходимо найти какой-либо ресурс в интернете, вы набираете в адресной строке браузера адрес этого web-ресурса, например, http://www.zemnaya.ru/main/countrys.html. Или вы делаете запрос в поисковой системе и она выдает вам результат, в котором снова указан адрес web-ресурса. А что собственно представляет собой этот адрес?
Да собственно это путь по которому должен пройти браузер, чтобы взять запрашиваемую вами страницу. В интернете миллионы всевозможных страниц, как же среди них найти ту, которая вам нужна. Как браузер узнает, где лежит та страница, которую вы ищете. Конечно, по ее адресу и адрес этот должен быть уникален.
Каждый компьютер, выходящий в интернет, получает свой уникальный IP-адрес от своего провайдера. Вы можете об этом и не знать, но у вашего компьютера он есть.
По действующему ныне стандарту этот адрес состоит из четырех целых положительных чисел, разделенных точками, например, 192.168.1.66. Человеку запомнить такой адрес трудно, поэтому всем IP-адресам web-серверов в Интернете ставится в соответствие полное доменное имя, например, www.vkontakte.ru. Итак, вы набираете в адресной строке браузера http://www.zemnaya.ru/main/countrys.html. Что делает браузер? Он видит http:// и понимает, что данный адрес является адресом web-страницы. Далее он видит www.zemnaya.ru и понимает, что искомая страница находится на сервере с этим именем и находит соответствующий этому имени IP-адрес компьютера. Затем он видит main и понимает, что искомая страница лежит в папке main компьютера с именем www.zemnaya.ru.
И, наконец, он видит countrys.html и понимает, что с компьютера www.zemnaya.ru из папки main нужно взять файл с именем countrys.html.
Существуют два способа задания URL-адреса: абсолютный и относительный.
Рассмотрим на примере. Пусть у нас есть сайт с зарегистрированным доменом - mysite.ru. Все страницы сайта у нас хранятся на сервере в двух папках public и private. При этом в папке publicсодержатся файлы index.html и articles.html, а в папке private - price.html и cinema.html. Т.е. наш сайт имеет следующую структуру:
При
абсолютной адресации используется
полный путь, т.е. с указанием протокола,
сервера, каталога и страницы. В нашем
примере абсолютный адрес
страницы index.html следующий:
<a href="http://www.mysite.ru/public/index.html">
А страницы cinema.html:
<a href="http://www.mysite.ru/private/cinema.html">
При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы index.html (исходный файл) на страницу articles.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:
<a href="articles.html">
Если же мы захотим сделать ссылку со страницы index.html на страницу price.html, то, учитывая, что страницы лежат в разных каталогах, она будет выглядеть следующим образом:
<a href="../private/price.html">
Две точки вначале означают подняться в иерархии папок на уровень выше.
Все ссылки на внешние источники имеют абсолютный адрес. Внутренние ссылки (в пределах сайта) можно задавать любым способом. Какой способ задания адреса выбрать решать вам. У каждого есть свои плюсы и минусы. Если, используя абсолютную адресацию, вы решите поменять домен, то вам придется переделывать все ссылки на вашем сайте. При относительной адресации этого делать не придется, при условии сохранения структуры папок.
Ссылки в новом окне
Вы знаете, что при щелчке по ссылки, документы могут открываться как в текущем окне, так и в новом. Этим процессом можно управлять. По умолчанию ссылки загружаются в то же окно, но если указать параметр target="_blank", то ссылка загрузится в новое окно.
Посетите <a href="http://www.yandex.ru/" target="_blank"> поисковую систему Яндекс </a> |
Результат:
Посетите поисковую систему Яндекс |
Если вы щелкните по ссылке, то ресурс Яндекса откроется в новом окне, и вы не потеряете страницу, которую читаете сейчас.
Использование якорей
Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Для таких переходов следует создать пустую ссылку с параметром name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти. Пример:
<p><a name="top"></a> первый абзац, в котором стоит пустая ссылка - якорь </p> <p>второй абзац</p> <p>третий абзац</p> <p><a href="#top">Наверх</a></p> |
В результате, щелкнув по ссылке "Наверх", вы попадете в начало первого абзаца. Чтобы результат был виден, сделайте тексты второго и третьего абзацев подлиннее. Подсказки У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве подсказки, если подвести курсор мыши к ссылке. Пример ссылки со всеми ее параметрами:
<a href="http://www.yandex.ru/" target="_blank" title="переход на Яндекс"> поисковую систему Яндекс </a> |
Результат:
Посетите поисковую систему Яндекс |