Урок 7. Жирный, подчёркнутый шрифт, курсив и другие. Шрифты в HTML

После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. В этой главе мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.

Сначала рассмотрим курсив и полужирный текст:

Полужирный текст 
 Наклонный текст (курсив)

Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
 <H3>Здравствуйте, это моя первая страница.</H3>
 
 Добро пожаловать! :) </div>
 Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)
</body>
</html>

Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:

<tt> моноширинный шрифт </tt>

В наш пример я его вводить не буду (сделайте это самостоятельно).

Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:

<pre>
текст (куча пробелов) текст
 текст (куча пробелов) текст
 текст (куча пробелов) текст
</pre>

У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.

К одному фрагменту текста может применяться сразу несколько тэгов:

<tt> текст </tt>

В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)

Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.

Подчеркнутый текст вводится при помощи тэга :

Подчеркнутый текст

Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:

<strike> ~~Перечеркнутый~~ </strike>
<s> ~~Перечеркнутый~~ </s>

Тэг <big> представляется крупным шрифтом, а малым шрифтом относительно основного текста:

Малый 
Нормальный текст

<big> Большой </big>

Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).

Верхний индекс ^sup 
Нижний индекс _sub

Вот, собственно, и все. Можем переходить на следующую ступеньку.

След. »

Разделы сайта

Уроки для дизайнеров
- Photoshop
- Illustrator
- Flash
- CorelDraw
Онлайн учебники
Книги и справочники
- Adobe Photoshop
- Illustrator
- Flash
- xHTML
- CSS
- ActionScript
Скрипты
- Ajax
- PHP
- JavaScript
Клипарт
Социальная сеть
Форум веб-мастеров

Последние статьи

Самое популярное

Последние новости

Разделы форума

→ Все разделы форума