Форматирование текста в HTML

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Создание списков
  4. Гиперссылки
  5. Создание таблиц в блокноте
  6. Цвета в HTML
  7. Как создать форму в HTML?
  8. Табличная верстка сайта
  9. Теги в HEAD
  10. Изображения в html
  11. Работа с текстом и изображениями в CSS
  12. Блочная структура сайта
  13. Блочная верстка

В этом уроке мы научимся форматировать текст. Создайте новый файл text.html

Введем первый заголовок:

<html>
<head>
<title>Текст</title>
</head>
<body>
<h1>Это заголовок сайта</h1>
</body>
</html>

В html принята такая классификация заголовков:

тегом h1 обозначают заголовок сайта, h2 заголовок раздела, h3 заголовок подраздела и т.д. Текст страницы обозначают тегом параграфа <p>. Между открывающими и закрывающими тегами вводят сам текст.

Давайте в тело сайта введем эти элементы:

<h2>Это заголовок раздела</h2>

<h3> Это заголовок подраздела<h3>

<p> Это текст страницы</p>

Теги работы с текстом имеют различные атрибуты форматирования. Например, если мы хотим , чтобы текст быть с полужирным начертанием мы можем добавить атрибут strong, если же мы хотим написать текст прописными буквами, то нужно добавить атрибут em. Добавим в тело сайта следующие элементы:

<p><strong>Это полужирный текст страницы</p></strong>
<p><em>Это прописной текст страницы</p></em>

Для выравнивания текста служит атрибут align. С помощь этого атрибута мы можем выровнять текст по центру, по левому или правому краю, по всей ширине строки.

Добавьте следующий код:

<p align="center" >Этот текст выровнен по центру</p>
<p align="left">Этот текст выровнен по левому краю</p>
<p align="right">Этот текст выровнен по правому краю</p>
<p align="justify">Этот текст выровнен по ширине    </p>

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

Работа с текстом

Если что-то не получилось, то сравните с кодом, который дается в прилагаемом сайте text.html

Работа с Dreamweaver.

Создайте файл text.html

Щелкните в поле дизайна и введите текст «Это заголовок страницы» Выделите этот текст и на панели форматирования  в списке Format  выберите Heading1 (цифра 1).

Работа с текстом в Dreamviewer

Введите с новой строки «Это заголовок раздела» и на панели форматирования  в списке Format  выберите Heading2 (цифра 1).

Введите с новой строки «Это заголовок подраздела» и выберите Heading3

Введите с новой строки «Это текст страницы» и выберите Paragraph

Введите с новой строки «Это полужирный текст страницы» и нажмите на цифру 2.

Введите с новой строки «Это прописной текст страницы» и нажмите на цифру 3.

Введите с новой строки «Этот текст выровнен по центру» и нажмите на цифру 4.

Введите с новой строки «Этот текст выровнен по левому краю» и нажмите на цифру 5.

Введите с новой строки «Этот текст выровнен по правому краю» и нажмите на цифру 6.

Введите с новой строки «Этот текст выровнен по ширине» и нажмите на цифру 7.

Сохраните страницу и посмотрите в браузере что получилось.

Таким образом в этом уроке мы научились форматировать текст.

А если перед вами обратная задача — очистка HTML кода от лишних стилей, то можете воспользоваться сервисов HTML Cleanup. Сервис также может быть полезен при вставке текста из Word на сайт.

 

Оставить ответ

Ваш email не будет показан.