Здраствуйте, дорогие друзья! Как и обещал, проверяем самостоятельную работу, которуя я давал Вам в предыдущем уроке.

Самостоятельная работа

Принимайте мою работу:

Изучение HTML-тегов. Проверка самостоятельной работы.

Получаем следующий исходник:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<img class="img_content" src="files/lessons/tags2_html3/7.jpg" usemap="#self" alt="Изучение HTML-тегов. Проверка самостоятельной работы."/>
<map name="self">
<area shape="poly" coords="27,90,75,7,121,90" title="Треугольник" nohref/>
<area shape="circle" coords="224,65,26" title="Круг" nohref/>
<area shape="rect" coords="309,49,431,81" title="Прямоугольник" nohref/>
</map>
</body>
</html>

Я использовал nohref, Вы могли использовать href или, например, не использовать тег title. Итак, возвращаемся к нашему уроку, в котором мы начинаем знакомиться с новыми и новыми тегами.

B

Описание:

Данный тег используется для выделения жирного начертания текста.

Атрибуты:

Отсутствуют

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег B</title>
</head>
<body>
<b>тИЦ</b> не влияет на ранжирование поисковых систем, он лишь определяет авторитет сайта среди остальных.
</body>
</html>

Также можно выделять не всё слово, а определённое кол-во символов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег B</title>
</head>
<body>
<b>H</b>TML - гипертекстовый язык разметки.
</body>
</html>

Постепенно данный тег утрачивает своё значение, и всё чаще начинают использовать STRONG, который выполняет почти те же функции. Почему почти? Потому, что B предназначен для физического выделения, а STRONG - для акцентрирования внимания и для придания важности. Я же на своих сайтах исключаю использование данного тега: все маловажные элементы, которые нуждаются в выделении, я выдёляю с помощью таблиц стилей, а важные слова, на которые нужно обратить внимание поисковых роботов, заключаю в STRONG.

BASE

Описание:

Тег способен изменять полный базовый адрес документа, а также способ открытия ссылок на странице. Главная особенность тега в том, что он прописывается не в BODY, а в HEAD.

Атрибуты:

target - способ открытия ссылок.
href - определение базового адреса.

Атрибут target:

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
<base target="_blank"/>
</head>
<body>
<a href="http://selkinvitaly.ru">Ссылка</a>
</body>
</html>

target="_blank" не прописан в ссылке, но она всё равно открывается в новом окне. В этом и состоит принцип работы тега BASE. Т.е мы указываем способ открытия ссылок в теге BASE, и его действие распространяется на всю страницу, однако действие не распространяется на ссылки, в которых указан атрибут target.

Предлагаю прописать в ссылке способ открытия в текущем окне, а в BASE - в новом, посмотрим будет ли открыта в новом окне ссылка, которая имеет атрибут target:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
<base target="_blank"/>
</head>
<body>
<a title="На данную ссылку действует BASE, тк ссылка не имеет атрибута target" href="http://selkinvitaly.ru">Ссылка</a>
</body>
</html>

Наблюдаем, что ссылка в новом окне не открылась, т.е действие тега BASE не повлияло на ссылку, имеющую атрибут target.

Например, нам необходимо чтобы все ссылки, находящиеся на странице, открывались в новом окне, но только одна ссылка открывалась в текущем. Тут-то нам и придёт на помощь BASE. Для этого в BASE пропишим target="_blank", а той ссылке, которую хотим открывать в текущем, пропишим target="_self":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
<base target="_blank"/>
</head>
<body>
<a href="http://selkinvitaly.ru" title="На данную ссылку действует BASE, тк ссылка не имеет атрибут target">Первая ссылка</a><br/>
<a target="_self" href="http://selkinvitaly.ru" title="На данную ссылку не действует BASE, тк ссылка имеет атрибут target">Вторая ссылка</a><br/>
<a href="http://selkinvitaly.ru" title="На данную ссылку действует BASE, тк ссылка не имеет атрибут target">Третья ссылка</a>
</body>
</html>

Вторая ссылка открывается в текущем, а остальные - в новом. Задумка удалась.

Иногда бывает ситуация, что ссылка должна открываться в определённом фрейме, имя которого, например, frame. В таком случае параметром атрибута target будет являться имя фрейма, т.е frame. Мы с Вами ещё не знакомы с фреймами, как изучим - поймёте, а пока возьмите себе на заметку.

Здесь для Вам нет ничего нового: параметры таргета мы знаем, с ссылками знакомы. Единственное, что здесь для Вас ново - принцип работы BASE и тег BR, который я использовал в примере. Данный тег осуществляет перенос не следующую строку. Это сделал для того, чтобы ссылки не сливались. Если Вы успели подзабыть параметры таргета, то обязательно вернитесь ко второму уроку, а мы с Вами двигаемся дальше.

Атрибут href:

Опять же, знакомый для нас атрибут. Если target тега BASE влиял на способ открытия ссылок на всей странице, то логично предположить, что href влияет на все адреса, расположенные на странице. Действительно, это так. Имеем следующую ситуацию:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
</head>
<body>
<img src="images/art/image.jpg" alt=""/><br/>
<a href="images/art/test.html">Страница test.html</a><br/>
<img src="images/art/icons.jpg" alt=""/>
</body>
</html>

Видим, что и у ссылки, и у изображений адрес начинается с директории images/art/. Чтобы каждый раз её не писать, можно сделать переопределение базового адреса. Для этого прописываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
<base href="images/art/"/>
</head>
<body>
<img src="image.jpg" alt=""/><br/>
<a href="test.html">Страница test.html</a><br/>
<img src="icons.jpg" alt=""/>
</body>
</html>

Теперь нам не нужно прописывать images/art/, тк она сама будет добавляться к адресу.

Это всё хорошо, а представьте, что для ссылки нам не нужно подставлять images/art/, т.е какой адрес прописал, на тот ссылка и должна ссылаться, а вот в адресе изображений должно подставлять images/art/. Что делать? Нужно в адресе элемента, в нашем случае ссылки, прописывать адрес вместе с доменном именем. Попробуем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BASE</title>
<base href="images/art/"/>
</head>
<body>
<img src="image.jpg" alt=""/><br/>
<a href="http://domen.ru/test.html">Страница test.html</a><br/>
<img src="icons.jpg" alt=""/>
</body>
</html>

Теперь в адресе изображений происходит подстановка images/art/, а в ссылке - нет. Отлично, добились желаемого результата.

Опять же, тег маловажный, и мной на практике не применяется, да и пропись тергета/адреса не утруждает. Тогда спрашивается - зачем данный тег был введён в язык? Да, да, господа, опять же, для универсальности.

Ну и ладно, на этом я с Вами прощаюсь, встретимся в следующем уроке.