теги форматирования абзацев и текста в html

К оглавлению

Цель урока: изучение основных тегов для форматирования текста html и абзацев.

Содержание:

Элементы форматирования текста
Атрибуты тегов
- Атрибуты тега body
Теги логического форматирования текста
Элементы форматирования абзацев
- Цвет и гарнитура шрифта
- Специальные символы

Элементы форматирования текста

Заголовки

Для размещения заголовков существует тег <h> с номером уровня заголовка.

Самый крупный заголовок соответствует тегу <h1>, соответственно заголовок самого низкого уровня (самый мелкий размер шрифта) — <h6>.
Базовый размер шрифта на странице соответствует заголовку <h3>:

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Блочная цитата

Для размещения в тексте цитаты используется тег <blockquote>:

Преформатированный текст

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

<pre>
Вот иду я,
	заморский страус,
		в перьях строф, 
			размеров и рифм.
Спрятать голову, 
	глупый, 
		стараюсь,
			в оперенье звенящее врыв.

Вот иду я,
	заморский страус,
		в перьях строф, 
			размеров и рифм.
Спрятать голову, 
	глупый, 
		стараюсь,
			в оперенье звенящее врыв.

Курсив, жирность, подчеркивание и другие теги

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

<hr>

Данный элемент служит для разделения некоторых структурных элементов текста друг от друга. Либо может быть использован просто как эстетический элемент оформления документа:

<h3>Горизонтальная линия</h3>
<hr>
<p>Lorem ipsum dolor sit amet.</p>

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

Lorem ipsum dolor sit amet.

Атрибуты тегов

Для уточнения действия некоторых тегов они дополняются атрибутами.
Так, у рассмотренного тега горизонтальной линии есть дополнительные свойства, выраженные в атрибутах
- size — ширина линии,
- width — длина линии,
- align — выравнивание линии
и другие.

Атрибуты указываются в открывающем теге в виде атрибут=значение.
Атрибутов может быть несколько, тогда они указываются через пробелы, и их порядок следования практически не важен.

Атрибуты тега body

Для начала рассмотрим два основных атрибута тега body:

bgcolor — задний фон страницы и
text — цвет текста на всей странице.

Для задания цвета можно использовать названия цветов на английском языке, либо код цвета в шестнадцатеричной системе счисления.

<body text="#00ff00">

или

<body text="green">

Перед указанием цвета в 16-й системе обязательно ставится символ «шарп» — #
Для подбора подходящего цвета перейдите на страницу палитры цветов онлайн.

Теги логического форматирования текста

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

Например, тег del делает содержимое перечеркнутым, при этом указывая прежде всего на смысл удаления текста.

Элементы форматирования абзацев

Для перехода на другую строку текста служит пустой элемент <br>.
Тогда как для выделения в тексте абзаца служит элемент <p>, содержимое которого и является сам абзац. Перед абзацем и после него добавляются отступы, но красная строка при этом не предусмотрена.

Пример совместного использования тегов <br> и <p>:

Задание html 1.
Скачайте текст по ссылке ниже. При помощи редактора или блокнота выполните должное форматирование документа, добавив необходимые на Ваш взгляд теги (заголовки, теги форматирование шрифта и абзацев).

Текст: Файл задания 1.

Желаемый результат:

Цвет и гарнитура шрифта

Для форматирования шрифта существует тег <font>. Однако, тег уже практически не используется.

Тег используется только со своими атрибутами:

size — размер шрифта, от 1 до 7 (3 — базовый размер, 6 — размер заголовка H1)

face — семейство шрифта (serif — с засечками, sans-serif — рубленый или без засечек, monospace — моноширинный)

color — цвет

Пример:

<font size="4" color="#ff0000" face="Arial, Verdana, sans-serif">
Текст красного цвета, шрифт без засечек
</font>

Результат а браузере:

Текст красного цвета, шрифт без засечек

Специальные символы

        код html
©	 &cоpy;	  Копирайт
®	 &rеg;	  Знак зарегистрированной торговой марки
™        &trаde;  Знак торговой марки
	 &shу;	  Мягкий перенос
×	 &timеs;  Умножить
÷	 &dividе; Разделить
±	 &рlusmn; Плюс/минус
≤	 &lе;	  Меньше или равно
≥	 &gе;	  Больше или равно

Задание html 2:
Скачайте файл с текстом для задания и изображение. При помощи редактора или блокнота выполните форматирование документа, сделав результат максимально похожим с картинкой.

Задание html 3:
Скачайте файл с текстом для задания. Откройте файл в редакторе кода (например, notepad++). Выполните подряд все задания, указанные в комментариях html. Протестируйте результат в браузере.

К оглавлению