В этом уроке мы пройдем еще несколько основных тегов, а также поймем, что применительно к одному тексту (слову, фразе) может использоваться несколько тегов одновременно.
Таким же образом, как мы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива тегом <i>. "i" - это сокращение от "italic".
Пример № 1:
<i>Текст, выделенный курсивом.</i>
В Интернет-браузере будет выглядеть следующим образом:
Текст, выделенный курсивом
Так же можно уменьшить размер шрифта тегом small:
Пример № 2:
<small>Этот текст уменьшен.</small>
в браузере:
Этот текст уменьшен.
Использование нескольких тегов одновременно.
Если вы хотите, чтобы текст был одновременно жирным курсивом, вы заключаете его сразу в два соответствующих тега.
Пример № 3:
<b><i>Текст bold и italic</i></b>
в браузере:
Текст bold и italic
Обратите внимание: тег, который идет первым, закрывается последним! Если вы поставите его при закрытии так же первым, конструкция не будет работать.
Теги, не содержащие в себе текста.
Как уже было сказано, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретным текстом, они являются изолированными командами. Пример - тег <br>, который создаёт перевод строки:
Пример № 4:
Пример текста,<br>который мы переносим на новую строку.
И как это будет выглядеть в браузере:
Пример текста,
который мы переносим на новую строку.
Другой такой тег - <hr> - рисует горизонтальную линию ("hr" - от англ. "horizontal rule"):
Пример № 5:
<hr width="650">
(где атрибут «width» - указывает длину линии в пикселях (при построении сайтов обычно используется единица измерения длины, ширины и высоты – пиксели, а не сантиметры, но к этому легко привыкнуть)*.
И как это будет выглядеть в браузере:
Еще теги.
Примеры тегов, требующих наличия закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.
<ul> - сокращение от "unordered list - неупорядоченный список" - вставляет некий значок (кружочек, кнопка или даже маленькая картинка) для каждого элемента списка. <ol> - сокращение от "ordered list - упорядоченный список" - нумерует цифрами каждый элемент списка. Для создания элемента списка используется тэг <li> ("list item - элемент списка"). Примеры:
Пример № 6:
<ul>
<li>Огурец</li>
<li>Помидор</li>
<li>Кабачок</li>
<li>Баклажан</li>
</ul>
И как это будет выглядеть в браузере:
- Огурец
- Помидор
- Кабачок
- Баклажан
Пример № 7:
<ol>
<li>Огурец</li>
<li>Помидор</li>
<li>Кабачок</li>
<li>Баклажан</li>
</ol>
И вот что мы видим в браузере:
- Огурец
- Помидор
- Кабачок
- Баклажан
Итак, повторим изученные в этом и предыдущих уроках теги:
<html>Тело документа</html>
<body>Тело сайта</body>
<p>Абзац</p>
<a>Ссылка</a>
<h1>Самый большой заголовок</h1>
<h2>Большой заголовок</h2>
<h3>Средний заголовок</h3>
<h4>Небольшой заголовок</h4>
<h5>Маленький заголовок</h5>
<h6>Самый маленький заголовок</h6>
<b>Жирный шрифт</b>
<i>Курсив</i>
<small>Уменьшенный шрифт</small>
<br>Перевод строки
<hr>Горизонтальная линия
<ul>Список</ul>
<ol>Упорядоченный список</ol>
<li>Элемент списка</li>
Обратите внимание, что «тело документа» и «тело сайта» – не одно и то же. Тело документа – более широкое понятие и оно может содержать массу дополнительных параметров, которые влияют на работу сайта, но не отражаются на экране.
Дополнительная информация к уроку:
*Пиксель - это единица для измерения разрешения экрана. В отличие от сантиметров, пиксели являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя, у которого высокое разрешение экрана, 25 пикселей могут выглядеть как 1 сантиметр. Эти же 25 пикселей при низком разрешении экрана могут соответствовать 1.5 или даже 2 сантиметрам экрана.
