Мы знаем, что HTML — это язык разметки. Следовательно, важно уметь форматировать отдельные символы, а также целые фрагменты текста. Но прежде чем изучать теги, рассмотрим возможность отображения специальных символов. Такими символами, например, являются знаки меньше(<) и (>) больше, так как с помощью этих символов описываются HTML-теги. Для отображения специальных символов используются так называемые HTML-эквиваленты.
Например для вывода текста
<title>Форматирование отдельных символов</title>
необходимо написать так
<title>Форматирование отдельных символов </title>
В этом примере мы заменили знак меньше (<) на , < а знак больше (>) на >.
Наиболее часто используемые HTML-эквиваленты:
<— знак меньше (<);>— знак больше (>);&— амсперанд (&); — неразрывный пробел;"— кавычка (");®— знак зарегистрированной торговой марки (®);©— авторские права (©);
Выделение фрагмента текста
Тег <b> отображает текст полужирным шрифтом. Вместо тега <b> лучше использовать тег логического форматирования <strong>.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Выделение фрагментов текста</title>
</head>
<body>
<b>Выделение фрагментов текста</b>
<br>
<strong>Вместо тега <b> лучше использовать тег логического форматирования <strong></strong>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Вывод текста курсивом
Тег <i> отображает текст курсивом. Вместо тега <i> лучше использовать тег логического форматирования <em>.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Вывод текста курсивом</title>
</head>
<body>
<i>Вывод текста курсивом</i>
<br>
<em>Вместо тега <i> лучше использовать тег логического форматирования <em> </em>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Подчеркивание текста
Тег <u> отображает текст подчеркнутым.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Подчеркивание текста</title>
</head>
<body>
<u>Подчеркнутый текст</u>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Перечеркивание текста
Теги <strike> и <s> отображают текст перечеркнутым.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Перечеркивание текста</title>
</head>
<body>
<s>Перечеркнутый текст</s>
<br>
<strike>Перечеркнутый текст</strike>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Cоздание нижних и верхних индексов
Тег <sub> сдвигает текст ниже уровня строки и уменьшает размер шрифта.
Тег <sup> сдвигает текст выше уровня строки и уменьшает размер шрифта.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Cоздание нижних и верхних индексов</title>
</head>
<body>
Формула спирта С<sub>2</sub>H<sub>5</sub>OH
<br>
Площадь помещения 20 м<sup>2</sup>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Вывод текста заданным шрифтом
Тег <font> определяет размер, тип и цвет шрифта. Он имеет следующие параметры:
face— указывает тип шрифта. Можно указать как один, так и несколько типов, разделяя их запятыми. При этом список шрифтов просматривается слева направо. Указанное название должно точно соответствовать названию типа шрифта. Если шрифт не найден на компьютере пользователя, то используется шрифт по умолчанию.-
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Вывод текста заданным шрифтом</title>
</head>
<body>
<font face="Arial, Helvetica, sans-serif">Привет всем!</font>
</body>
</html>В окне веб-браузера это будет выглядеть ТАК.
size— задает размер шрифта в условных единицах от 1 до 7. Размер, используемый веб-браузером по умолчанию принимает значение 3. Размер шрифта можно указывать как цифрой от 1 до 7, так и в относительных единицах, указывая на сколько единиц нужно увеличить (знак "+") или уменьшить (знак "-") размер шрифта относительно базового.-
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Вывод текста заданным шрифтом</title>
</head>
<body>
<font size="5" face="Arial">Привет всем!</font>
<br>
<font size="+1" face="Arial">Привет всем!</font>
<br>
<font size="-1" face="Arial">Привет всем!</font>
</body>
</html>В окне веб-браузера это будет выглядеть ТАК.
-
color— позволяет задать цвет шрифта. Цвета задаются также как и для параметраbgcolor(cм. здесь). Названия наиболее часто используемых цветов:black — #000000— черный;white — #FFFFFF— белый;yellow — #FFFF00— желтый;silver — #C0C0C0— серый;red — #FF0000— красный;green — #008000— зеленый;gray — #808080— темно-серый;blue — #0000FF— синий;navy — #000080— темно-синий;purple — #800080— фиолетовый.
-
Пример:
<html>
<head>
<meta charset="utf-8">
<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 charset="utf-8">
<title>Вывод текста заданным шрифтом</title>
</head>
<body>
Текст <big>большего</big> размера.
<br>
Текст <small>меньшего</small> размера
<br>
<tt>Моноширинный текст</tt>
</body>
</html>В окне веб-браузера это будет выглядеть ТАК.
Текст с отступом
Для выделения фрагмента текста строками сверху и снизу, а также отступом от левого края окна браузера служит контейнерный тег <blockquote>. Для увеличения отступа тег <blockquote> следует применять несколько раз.
Пример:
<html>
<head>
<meta charset="utf-8">
<title>Текст с отступом</title>
</head>
<body>
<blockquote><blockquote>Текст с двойным отступом</blockquote></blockquote>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Бегущая строка
Браузер Internet Explorer поддерживает контейнерный тег <marquee>, который позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими параметрами:
width— ширина поля бегущей строки в пикселах или процентах от шир- ины окна;
height— высота бегущей строки в пикселах;hspace, vspace— интервалы по горизонтали и вертикали между текстом строки и краями ее поля в пикселах;align— положение текста бегущей строки в ее поле. Возможные значения:-
top— вверху;bottom— внизу;middle— посередине;
direction— определяет направление движения. Возможные значения:-
left— справа налево;right— слева направо;
behavior— характер движения строки;-
scroll— текст появляется от одного края и скрывается за другим;slide— строка вытягивается от одного края поля и останавливается у другого;alternate— задает переменное направление движения от одного края к другому, а затем обратно;
loop— количество повторений в бегущей строке, задаваемое числом; если необходимо бесконечное количество повторений, то следует задать параметр в виде ключевого словаinfinity. Параметрloopне влияет на поведение бегущей строки, если для атрибутаbehaviorзаданы значенияalternate и slide;scrollamount— устанавливает длину в пикселах "прыжка" текста за один такт. При большом значении этого параметра текст движется рывками, а при малом — замедленно;scrolldelay— определяет величину паузы между тактами перемещения текста в миллисекундах;bgcolor— устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.
Соотношения между длиной текста, размером шрифта и скоростью перемещения, при которых бегущая строка выглядит приемлемо, подбираются опытным путем. Рассмотрим пример, где бегущая строка бесконечно прокручивается на желтом поле шириной 75% от ширины окна веб-браузера.
<html>
<head>
<meta charset="utf-8">
<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.
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться