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

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

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

Заголовки

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

заголовки html

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

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

цитата в html

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

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

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

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

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

Данный элемент служит для разделения некоторых структурных элементов текста друг от друга. Либо может быть использован просто как эстетический элемент оформления документа:
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 задание форматирование текста

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

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

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

*
*

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