Оформление текста
Заголовки - элементы H1 – H6
Язык HTML поддерживает 6 уровней заголовков. Они представлены соответственно элементами: H1, H2, H3, H4, H5, H6. Первый – самый главный, отображается более крупным шрифтом, шестой – самый маленький и по значению, и по размеру шрифта.
Пример
<H1>Пример 1</H1> <H2>Пример2</H2><H6>Пример3</H6>
Отображение примера в окне браузера
Пример 1
Пример2
Пример3
Выравнивание – атрибут align
По умолчанию текст выравнивается по левому краю страницы. Но можно отцентрировать текст либо выровнять его по правому краю, указав атрибут align="left | center | right" Символ вертикальной черты "|" в данном случае означает "или". Расшифруем значения ключевых слов атрибута align:
- left - выравнивание по левому краю.
- center - выравнивание по центру.
- right - выравнивание по правому краю.
- justify - выравнивание по ширине.
Пример
<H2 align="center">Этот заголовок будет выровнен по центру</H2>
Параграфы (абзацы) - элемент P
Элемент P похож на элемент H, только текст, помещённый в элемент P, имеет абзацные отступы. Выравнивание абзацев осуществляется аналогично выравниванию заголовков.
Пример
<P>Этот параграф выровнен по умолчанию</P> <P align="right">А этот по правому краю</P>
Контейнеры - элементы DIV и SPAN
В HTML существует специальный элемент DIV, который может служить контейнером для любых других элементов HTML. Элементы, помещённые внутрь тега DIV, отделяются от остального содержимого страницы абзацным отступом. С помощью атрибута align можно задавать выравнивание содержимого контейнера.
Пример
<DIV align="center">
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3>Заголовок 3</H3>
</DIV>
<!-- Все три заголовка будут выровнены по центру страницы -->
Шрифты
Все шрифты делятся на несколько больших групп или семейств:
- Serif - шрифты с засечками, такие как Times New Roman.
- Sans-serif - шрифты рублёные, без засечек, такие как Arial, Verdana и Tahoma.
- Monospace - моноширинные шрифты (с одинаковым расстоянием между символами), такие как Courier New.
- Cursive - шрифты курсивные, такие как Calisto MT.
- Fantasy - декоративные шрифты, буквы которых могут имитировать, например, рукописный текст.
Начертание шрифта
| Тег | Начертание | Пример | Результат |
|---|---|---|---|
| B | Полужирное | <B>Полужирное</B> | Полужирное |
| I | Курсив | <I>Курсив</I> | Курсив |
| S | Зачёркнутый | <S>Зачёркнутый</S> | |
| U | Подчёркнутый | <U>Подчёркнутый</U> | Подчёркнутый |
Если хотите получить комбинацию начертаний, то следует поместить один элемент внутрь другого.
Пример
<B><I>Полужирный курсив</I></B>
Управление шрифтами и их размером
| Атрибут | Описание | Значение | Пример |
|---|---|---|---|
| size | Задаёт размер шрифта (по умолчанию равен 3) | 1-7 | size="значение" |
| color | Задаёт цвет текста | цвет | color="black" |
| face | Задаёт гарнитуру | гарнитура | face="Шрифт" |
Пример
<FONT size="5" color="red" face="arial">Пример</FONT>
Если нужно задать шрифт для всего документа используется тег <BASEFONT>
Пример
<HEAD>
<BASEFONT size="5" face="arial" color="red">
</HEAD>
Примечание:Тег BASEFONT располагается между тегами HEAD, а FONT между тегами BODY.
Тег PRE
Информация помещённая между тегами PRE отображается в браузере со знаками табуляции.
Логическое выделение
Язык HTML поддерживает несколько типов выделений, и, соответственно, для каждого из них существует отдельный элемент:
- EM - Слабое логическое выделение, выразительность.
- STRONG - Сильное логическое выделение, ударение.
- CODE - Фрагмент кода программы.
- SAMP - Пример.
- VAR - Имя переменной.
- CITE - Цитата.
- ADDRESS - Адрес.
Пример
<SAMP><STRONG> Тег Strong </STRONG><EM> похож на тег B </EM></SAMP>
Сокращения
Для выделения в тексте аббревиатур и других сокращений в HTML существует элемент: ABBR.
Аббревиатура - принятое на письме сокращение слов или слово, составленное из нескольких частей других слов. Атрибут title задаёт полное описание аббревиатуры.
Пример
<ABBR title="World Wide Web">WWW</ABBR><!-- В браузере при наведении указателя мыши на аббревиатуру появится подсказка, содержащая её расшифровку. -->
Примечание: элемент ABBR помечен как нежелательный для использования, так как его не поддерживает Internet Explorer.
Расстановка кавычек
Чтобы в HTML какой-то фрагмент внутри строки взять в кавычки, используются спецсимволы: « (левая кавычка) и » (правая кавычка).
Пример
Этот справочник по HTML находится на сайте «always-best.ru»
Отображение примера в браузере
Этот справочник по HTML находится на сайте «always-best.ru»
Верхние и нижние индексы
Иногда в тексте встречаются математические и химические формулы, обычное явление для которых - верхние и нижние индексы. Вот примеры: H2O - формула воды или x2+ y3 - математическое выражение.
Пример
H<SUB>2</SUB>O - химическая формула.
x<SUP>2</SUP>+y<SUP>3</SUP> - математическое выражение.
Отображение в окне браузера
H2O - химическая формула. x2+y3 - математическое выражение.
Разделители: элементы BR и HR
Иногда требуется принудительно разбить текст на строки или же просто добавить дополнительную пустую строку. Пустой элемент BR выполняет принудительный перевод строки (аналог клавиши Enter в текстовом редакторе).
Примечание: пустой элемент br не имеет содержимого и закрывающего тега и состоит только из открывающего, т.е. <BR>
Пример
<P>пример1 <BR> пример2</P>
Отображение примера в окне браузера
пример1
пример2
Элемент HR
Элемент HR отображает горизонтальную линию. Этот элемент имеет следующие атрибуты:
| Атрибут | Описание | Значение | Пример |
|---|---|---|---|
| align | Задаёт выравнивание линии (по умолчанию по центру) | left|center|right | align="right" |
| color | Задаёт цвет линии | цвет | color="black" |
| size | Задаёт толщину линии в пикселях | от 1 до бесконечности | size="1" |
| noshade | Логический (булев) атрибут, если он установлен, то линия не будет объёмной | нет | noshade |
| width | Задаёт длину линии в пикселях или процентах от ширины экрана | Число или проценты | width="80%" |
Пример
<HR align="center" size="3" width="350" noshade color="blue">
Неразделимый текст
Элементы: (NOBR) и спецсимвол неразрывного пробела ( ) полезны тогда, когда требуется, чтобы какой-либо фрагмент текста всегда находился на одной строке в окне браузера и не разбивался при автоматической разбивке текста на строки в зависимости от ширины окна браузера.
Пример
<NOBR> Иванов Н. С.</NOBR>
Иванов Н. С.
Создание списков
Создание списков при помощи элемента OL
Нумерованный список задаётся элементом OL, т.е. весь список должен располагаться между тегами <OL> </OL>. Пункты самого списка задаются элементом LI. Тег OL может принимать единственный атрибут type, который задаёт тип нумерации. Атрибут type может принимать следующие значения:
- type="A" - Заглавные латинские буквы, т.е. A, B, C...
- type="a" - прописные латинские буквы, т.е. a, b, c...
- type="I" - большие римские цифры, т.е. I, II, III...
- type="i" - малые римские цифры, т.е. i, ii, iii...
- type="1" - стандартные арабские цифры (значение по умолчанию), т.е. 1, 2, 3...
Пример
<OL type="I"><LI>Пункт1</LI><LI>Пункт2</LI></OL>Отображение примера в браузере
- Пункт1
- Пункт2
Создание списков при помощи элемента UL
Элемент UL, также как и OL принимает единственный атрибут type, но для элемента UL атрибут type принимает следующие значения:
- type="disk" - маркер в виде закрашенного круга (значение по умолчанию).
- type="circle" - маркер в виде пустого круга.
- type="square" - маркер в виде закрашенного квадрата.
Пример
<UL type="circle"><LI>Пункт1</LI><LI>Пункт2</LI></UL>
Отображение примера в браузере
- Пункт1
- Пункт2
| Элементы html: head, body, title, base, basefont, link, meta, style, a, abbr, acronym, address, area, b, bdo, bgsound, big, blockquote, br, button, caption, center , cite, code, col, colgroup, tr, td, dd, del , dfn, div, dl, dt, em |