Работа с текстом / основные тэги управления стилем текста
Мы будем учиться работать с текстом.
<теория>
У нас 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 при поддержке Flexsmm - накрутка тикток
