Совместное использование тегов
Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
Понятнее будет на примере:
Выделим слово "текст" красным цветом:
<font color="red">Текст</font>
Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):
<em><font color="red">Текст</font></em>
А теперь - теги полужирного начертания:
<strong><em><font color="red">Текст</font></em></strong>
Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.
На этом третий урок закончен, мы рассмотрели основные способы оформления текста, на следующем уроке мы рассмотрим менее применимые теги форматирования. Тем не менее, ознакомиться с ними будет не лишним.
Урок 8. Специальные символы.
Содержание урока:
Специальные символы.
На предыдущих уроках было размещено достаточное количество кода на HTML. Напрашивается вопрос, как браузер узнает, когда теги <h1></h1> являются управляющими, т.е. делают текст заголовком, а когда их нужно просто напечатать, как текст. На самом деле все, что находится в < > браузер считает управляющими тегами ВСЕГДА. А если необходимо отобразить эти символы на экране, то приходится записывать их особым образом, используя их специальные коды.
Существуют целые таблицы со специальными символами и их значениями. Мы рассмотрим только основные:
< |
- знак "меньше" |
> |
- знак "больше" |
|
- непрерывный пробел |
© |
- знак "copyright" |
& |
- знак "амперсанд" |
« |
- левая открывающаяся кавычка |
» |
- правая закрывающаяся кавычка |
↑ |
- стрелка вверх |
→ |
- стрелка вправо |
↓ |
- стрелка вниз |
← |
- стрелка влево |
↔ |
- двунаправленная стрелка влево-вправо |
Пример кода:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Мы ужинали в ресторане «Тройка».<br>
3 > 2
</body>
</html>
В окне браузера это будет выглядеть так:
Вот такой получился коротенький урок, но обойти его вниманием никак нельзя. На следующем уроке мы научимся работать с ссылками.
Урок 9. Ссылки в html.
Содержание урока:
Ссылка - тег a
Абсолютная и относительная адресация
Ссылки в новом окне
Использование якорей
Подсказки
Ссылка - тег a
Ссылка - одно из важнейших понятий для html-документов. Бродя по интернету, вы щелкаете по кнопочкам и текстам и попадаете на нужные вам страницы. Эти страницы могут находиться на том же сервере, а могут и на сервере, находящемся на другом конце планеты. Но в обоих случаях переход осуществляется практически мгновенно. А как вы узнаете, куда надо щелкнуть, чтобы перейти на другую страницу? Либо визуально (цвет ссылки другого цвета и подчеркнут), либо по курсору мыши, который превращается в ладошку. За все эти преображения отвечает тег-контейнер <a></a>. А за то, куда направить пользователя по щелчку - его атрибут -href. Рассмотрим подробнее:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru">
поисковую систему Яндекс
</a>
</body>
</html>
Результат:
Посетите поисковую систему Яндекс
Если вы щелкните по ссылке, то перейдете на сайт www.yandex.ru. Обратите внимание, когда вы подводите курсор мыши к ссылке, внизу (в строке состояния) отображается адрес, на который ведет ссылка. Итак, между тегами <a></a> пишется текст, при щелчке по которому осуществляется переход. А в качестве значения атрибута href выступает адрес страницы, на которую будет осуществлен переход. Об адресе следует поговорить подробнее. Абсолютная и относительная адресация Существуют два способа задания URL-адреса: абсолютный и относительный. О том, что такое URL читайте на странице что такое 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", то ссылка загрузится в новое окно.
<html>
<head>
<title>Ссылки в новом окне</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru" target="_blank">
поисковую систему Яндекс
</a>
</body>
</html>
Результат:
Посетите поисковую систему Яндекс
Если вы щелкните по ссылке, то ресурс Яндекса откроется в новом окне, и вы не потеряете страницу, которую читаете сейчас. Использование якорей Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Например, если вы щелкните по этой ссылке, то окажитесь в начале этой страницы. Кстати, содержание уроков сделаны по этому же принципу. Для таких переходов следует создать пустую ссылку с параметром name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти. На примере будет понятнее:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
<p><a name="top"></a>
первый абзац, в котором стоит пустая ссылка - якорь
</p>
<p>второй абзац</p>
<p>третий абзац</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>
В результате, щелкнув по ссылке "Наверх", вы попадете в начало первого абзаца. Чтобы результат был виден, сделайте тексты второго и третьего абзацев длинными. Подсказки У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве подсказки, если подвести курсор мыши к ссылке. Пример ссылки со всеми ее параметрами:
<html>
<head>
<title>Ссылки в html</title>
</head>
<body>
Посетите
<a href="http://www.yandex.ru"
target="_blank"
title="переход на Яндекс">
поисковую систему Яндекс
</a>
</body>
</html>
Результат:
Посетите поисковую систему Яндекс
На этом урок, посвященный ссылкам, закончен. На следующем уроке будем учиться работать со списками.