Работа с текстом / основные тэги управления стилем текста

Мы будем учиться работать с текстом.

<теория>

У нас HTML код следующего содержания:         

Рассмотрим несколько наиболее популярных видов шрифтов.

Жирный шрифт (bold)

Для управления плотностью шрифта применяются теги:
текст
текст
Отличие тэга от тэга в том, что тэг указывает браузеру выводить текст жирным шрифтом, а тэг указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом - зависит от конкретного браузера.

Курсив (italic)

Курсивный шрифт выводится с помощью тэгов:
текст
текст


Пример: Курсив

Подчеркнутый шрифт (underline)

Выводится с помощью тэга:
текст


Пример: Подчеркнутый шрифт

Надстрочный индекс (Superscript)

Выводится с помощью тэга:
текст
Пример: основной текст надстрочный индекс
23=8

Подстрочный индекс (Subscript)

Выводится с помощью тэга:
текст


Пример: основной текст подстрочный индекс
C2H5OH

Имитация стиля печатной машинки (Teletype)

текст


Пример: Teletype

Заголовки

Выводятся с помощью тэгов:

Самый большой заголовок


...
Самый маленький заголовок

Пример:

H1

H2

H3

H4

H5
H6

Блок с отступом

Выводится с помощью тэга:

текст


Пример:
основной текст

блок текста с отступом

Тэги управления цветом и размером шрифта:

Задание базового шрифта:

Размер, цвет и стиль шрифта по умолчанию задается с помощью тэга и не применяется к заголовкам. Если базовый шрифт не задан по умолчанию используется шрифт размером 3.
атрибуты элемента


color =(цвет).Цвет шрифта.
size =(целое число от 1 до 7). Размер шрифта
face =(список разделенных запятыми названий шрифтов).
Пример:
Устанавливаем размер базового шрифта равным двум.


Управление размером шрифта с помощью тэга

Размер шрифта меняется с помощью атрибута SIZE тэга
Пример: HTML код:
< /FONT> size=1
size=2
size=3
size=4
size=5
size=6
size=7

Результат выполнения:
size=1 size=2 size=3 size=4
size=5 size=6 size=7

В атрибуте SIZE можно указывать размер шрифта относительно текущего размера SIZE

Пример: HTML код:
size +1
size +2
size -3

Результат выполнения:
size +1
size +2
size -3

Управление цветом шрифта с помощью тэга

Цвет шрифта меняется с помощью атрибута COLOR тэга
FONT COLOR="#FF0000"
FONT COLOR="red"

Результат выполнения:
FONT COLOR="#FF0000"
FONT COLOR="red"

Задание шрифтов с помощью тэга

Имя шрифта задается с помощью атрибута FACE тэга
< /FONT>
Задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.


Пример: HTML код:


текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.

Результат выполнения:
текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.

 
Комментарии в HTML коде:

Комментарии вставляются в программу с помощью тэгов: 
Эти тэги предназначены для вставки в документ HTML строк комментария, которые не отображаются браузером.
Пример:           

Переход на следующую строку

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

Пример: HTML код:

Выполняем
переход на
следующую строку
Результат выполнения:
Выполняем
переход на
следующую строку

[Запрет переноса:]

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


Управление выравниванием текста

Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга

текст

Атрибут ALIGN могут иметь значения:


ALIGN="LE< /FONT>FT" - выравнивание по левому краю
ALIGN="RIGHT"< /FONT> - выравнивание по правому краю
ALIGN="CENTER"< /FONT> - выравнивание поцентру< /FONT>
ALIGN="JUSTIFY" - выравнивание по обоим краям


Пример:HTML код:

Текст, выравненный по центру

Результат выполнения:

Текст, выравненный по центру

Вообще, атрибут ALIGN можно применять во многих тэгах, например:

текст

- выравнивание абзаца
текст - выравнивание текста в ячейке таблицы

текст

- выравнивание заголовка
и т.д.
Отцентрировать блок текста можно также и с помощью тэга
текст


Горизонтальная разделительная линия

Вывод горизонтальной линии осуществляется с помощью тэга



В этом тэге можно применять атрибуты:
ALIGN=LEF< /FONT>T, CENTER, RIGHT - выравнивание линии.
NOSHADE - линия без тени.
SIZE - толщина линии в пикселях.
WIDTH - ширина линии.


Пример:HTML код:





Результат выполнения:
обычная линия:



линия шириной 5 пикселей, выравненная по центру, шириной 50 процентов от ширины страницы, без тени:


<практика>


[шаг 1. откройте обычный блокнот]

[ шаг 2. выделите нижеприведённый код и вставте его в свой блокнот]

[ шаг 3. сохраните скопированный код в файле с произвольным именем но с расширением HTML, например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, разными шрифтами будет отражаться контент страницы. Поэксперементируйте сначала с заменой текста, размерами, вставке линий, изменению заголовков:]


<<<Создаём шаблон страницы за 2 шага | Графика в документах HTML>>>

Создано на конструкторе сайтов Okis. Широким спросом пользуется остекление балконов и лоджий среди всего населения.


ZLODAR: Откройте свои паранормальные способности!


Посетите сайт Добрый Демон и вас впечатлит удевительный и полный загадок мир непозннаного.

Rambler's Top100