Домой / Html учебник / 4 Урок. Форматирование текста в HTML

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

Теперь, когда мы с Вами создали свою первую страничку в HTML, поговорим о том, что такое Форматирование текста в HTML и что же можно сделать с текстом.

Для форматирования текста в html существуют следующие тэги:

<P> - разбивает текст на параграфы;

<H1,H2.....H6> - придает тексту различный размер;

<BR> - используется для переноса строки;

<DIV> - служит для разделения текста на блоки.

Теперь обо всем по порядку.


<p> - Параграф

Параграф разделяет текст на отдельные параграфы. Закрывающий тэг </P> обязателен.

Взглянем на код:

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE> Моя первая страничка </TITLE>
  </HEAD>
  <body>
  <p>I love animals, so I’ve got a lot of them. Someone’s hobby is collecting stamps, doing exercises, drawing or learning foreign languages. Animals are my hobby. I like to look after them, feed and just watch them. I believe that animals bring us happiness and positive emotions. This, in its turn, has a positive effect on our moral and psychological state.</p>
  <p>I love animals, so I’ve got a lot of them. Someone’s hobby is collecting stamps, doing exercises, drawing or learning foreign languages. Animals are my hobby. I like to look after them, feed and just watch them. I believe that animals bring us happiness and positive emotions. This, in its turn, has a positive effect on our moral and psychological state.</p>
  </body>
</html>

Здесь мы написали два параграфа, каждый будет как бы отдельным текстом.

Ну, в общем смотрим, что получится:

Параграф в html
Параграф в html

Тэг <P> имеет следующие атрибуты:

  • align="left" - выравнивание текста по левому краю(по умолчанию);
  • align="center" - выравнивание текста по центру;
  • align="right" - выравнивание центра по правому краю.

Примечание: "по умолчанию" - это значит, что если Вы не зададите никакого атрибута, то как бы ставится значение по умолчанию.

Что значат эти атрибуты? Приведем пример:

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE> Моя первая страничка </TITLE>
  </HEAD>
  <body>
  <p align="left"> Этот текст мы выравняли по левому краю </p>
  <p align="center"> Этот текст находится по центру </p>
  <p align="right"> А этот текст выровнен по правому краю </p>
  </body>
</html>

Результат:

Как работают атрибуты параграфа


<h1.....h6> - Заголовки в html

<H1.....H6> - заголовки и подзаголовки. Имеют закрывающие тэги. Заголовки нужны для того, чтобы выделить какую-то часть в тексте. Есть следующие виды заголовков:

  • <H1>
  • <H2>
  • <H3>
  • <H4>
  • <H5>
  • <H6>

H1 - самый большой, H2 - поменьше, и т. д. Давайте рассмотрим на примере:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Моя первая страничка </TITLE>
</HEAD>
<body>
<h1> Этот заголовок самый большой </h1> 
<h2> Этот немного поменьше </h2> 
<h3> А этот еще меньше </h3> 
<h4> Этот почти что маленький </h4>
<h5> Вот этот малюсенький </h5>
<h6> А этот ну совсем мизерный)) </h6> 
</body>
</html>

Результат:

Заголовки в html
Заголовки в html

 

Как видите, мы на страничке пишем заголовок, а потом пишем текст, ориентируясь на этот заголовок. Вот так просто.

Заголовки тоже имеют атрибуты:

  • align="left"
  • align="center"
  • align="right"

Про них мы уже знаем.


<br> - Перенос строки в html

<BR> - перенос строки. Закрывающий тэг не нужен.

Этот тэг предназначен для переноса текста на следующую строку.


<div> - Контейнер в html

<DIV> - заключает текст в контейнер. Имеет обязательный закрывающий тэг.

Возможные атрибуты:

  • align="left"
  • align="center"
  • align="right"

Необходим для того, чтобы заключить какой-либо текст в контейнер.

Html код:

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE> Моя первая страничка </TITLE>
  </HEAD>
  <body>
  <DIV align="center"> I love animals, so I’ve got a lot of them. </DIV> 
  I love animals, so I’ve got a lot of them. Someone’s hobby is collecting stamps, doing exercises, drawing or learning foreign languages.
  </body>
</html>

Результат:

Блок div в html
Блок div в html

Заключение

Надеюсь, урок был не слишком сложным 🙂 Переходим на следующий, где продолжим работу по форматированию текста в html.

5 Урок. Продолжаем работать с текстом в html

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

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