Веб-инструмент
Веб-мастерская
Мы знаем, что HTML — это язык разметки. Следовательно, важно уметь форматировать отдельные символы, а также целые фрагменты текста. Но прежде чем изучать теги, рассмотрим возможность отображения специальных символов. Такими символами, например, являются знаки меньше(<) и (>) больше, так как с помощью этих символов описываются HTML-теги. Для отображения специальных символов используются так называемые HTML-эквиваленты.
Например для вывода текста
<title>Форматирование отдельных символов</title>
необходимо написать так
<title>Форматирование отдельных символов</title>
В этом примере мы заменили знак меньше (<) на <, а знак больше (>) на >.
Наиболее часто используемые HTML-эквиваленты:
Тег <b> отображает текст полужирным шрифтом. Вместо тега <b> лучше использовать тег логического форматирования <strong>.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выделение фрагментов текста</title>
</head>
<body>
<b>Выделение фрагментов текста</b>
<br>
<strong>Вместо тега <b> лучше использовать тег логического форматирования <strong></strong>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Тег <i> отображает текст курсивом. Вместо тега <i> лучше использовать тег логического форматирования <em>.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вывод текста курсивом</title>
</head>
<body>
<i>Вывод текста курсивом</i>
<br>
<em>Вместо тега <i> лучше использовать тег логического форматирования <em> </em>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Тег <u> отображает текст подчеркнутым.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание текста</title>
</head>
<body>
<u>Подчеркнутый текст</u>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Теги <strike> и <s> отображают текст перечеркнутым.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Перечеркивание текста</title>
</head>
<body>
<s>Перечеркнутый текст</s>
<br>
<strike>Перечеркнутый текст</strike>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Тег <sub> сдвигает текст ниже уровня строки и уменьшает размер шрифта.
Тег <sup> сдвигает текст выше уровня строки и уменьшает размер шрифта.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Cоздание нижних и верхних индексов</title>
</head>
<body>
Формула спирта С<sub>2</sub>H<sub>5</sub>OH
<br>
Площадь помещения 20 м<sup>2</sup>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Тег <font> определяет размер, тип и цвет шрифта. Он имеет следующие параметры:
В окне веб-браузера это будет выглядеть ТАК.
В окне веб-браузера это будет выглядеть ТАК.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вывод текста заданным шрифтом</title>
</head>
<body>
<font color="000000">Черный</font>
<br>
<font color="FFFFFF">Белый</font>
<br>
<font color="FFFF00">Желтый</font>
<br>
<font color="C0C0C0">Серый</font>
<br>
<font color="FF0000">Красный</font>
<br>
<font color="0080000">Зеленый</font>
<br>
<font color="808080">Темно-серый</font>
<br>
<font color="0000FF">Синий</font>
<br>
<font color="000080">Темно-синий</font>
<br>
<font color="800080">Фиолетовый</font>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Для форматирования текста применяются и другие теги. Для вывода текста шрифтом большего размера используется парный тег <big>.
Для вывода текста шрифтом меньшего размера применяется парный тег <small>.
Для вывода текста моноширинным шрифтом используется тег <tt>.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вывод текста заданным шрифтом</title>
</head>
<body>
Текст <big>большего</big> размера.
<br>
Текст <small>меньшего</small> размера
<br>
<tt>Моноширинный текст</tt>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Для выделения фрагмента текста строками сверху и снизу, а также отступом от левого края окна браузера служит контейнерный тег <blockquote>. Для увеличения отступа тег <blockquote> следует применять несколько раз.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текст с отступом</title>
</head>
<body>
<blockquote><blockquote>Текст с двойным отступом</blockquote></blockquote>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Браузер Internet Explorer поддерживает контейнерный тег <marquee>, который позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими параметрами:
Соотношения между длиной текста, размером шрифта и скоростью перемещения, при которых бегущая строка выглядит приемлемо, подбираются опытным путем. Рассмотрим пример, где бегущая строка бесконечно прокручивается на желтом поле шириной 75% от ширины окна веб-браузера.
Бегущая строка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee height="50" width="75%"
hspace="5"
vspace="5"
align="top"
bgcolor="#FFFF00"
direction="left"
loop="infinity"
behavior="scroll"
scrollamount="5"
scrolldelay="100">
<h1>Это сообщение будет прокручиваться на экране справа налево</h1>
</marquee>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В тег <marquee> в качестве прокручиваемого объекта можно вставлять не только текстовые элементы, но и , например графические изображения.
В случае вставки изображений в тег <marquee> высота области определяется не атрибутом height этого тега, а высотой самого крупного изображения. Размеры изображения можно задать с помощью атрибутов height и width тега <img>.
Обсудить на форуме