HTML Урок 1.2. Теги форматирования текста и абзацев

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

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

Заголовки

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

заголовки html

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

<blockquote></blockquote>

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

цитата в html

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

<pre></pre>

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

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

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

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

<hr></hr>

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

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

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

    и другие.

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

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

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

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

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

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

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

<body text="#00ff00">

или

<body text="green">

16-я система счисления для отображения цвета
Перед указанием цвета в 16-й системе обязательно ставится символ «шарп»#

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

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

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

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

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

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

тег абзаца или параграфа

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

теги перехода на следующую строку

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

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

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

html задание форматирование текста

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

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

<font></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:
Скачайте файл с текстом для задания и изображение. При помощи редактора или блокнота выполните форматирование документа, сделав результат максимально похожим с картинкой.

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить