Форматирование текста в 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.

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

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

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

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