Урок №3. Текст на странице.

Содержание урока:

Тег, разделяющий текст по абзацам, перенос строки.
Тег, задающий заголовки.
Теги для выделения .
Тег стилизации текста.


 

Тег, разделяющий текст по абзацам, перенос строки.

<p> — разбивает текст по абзацам. Закрывающий тег обязателен. Если же он отсутствует, тогда по умолчанию закрывающий тег будет совпадать с началом следующего блочного элемента.

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

Align – данный атрибут служит для выравнивания текста в абзаце. Значения атрибута left, right, center, justify.

    Left – выравнивание текста по левому краю.
    Right — выравнивание текста по правому краю.
    Center – выравнивание текста по центру.
    Justify – выравнивание текста по ширине блока.

Вот пример:

 <p align="left">Надпись расположена слева</p>

   <p align="right"> Надпись расположена справа</p>

   <p align="center"> Надпись расположена по центру</p>

   <p align="justify">Надпись расположена по ширине. Нужно еще больше текста,
что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста,
что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста,
что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста,
что бы вы заметили ЭТО.</p>

Вид в браузере:

Надпись расположена слева

Надпись расположена справа

Надпись расположена по центру

Надпись расположена по ширине. Нужно еще больше текста, что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста, что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста, что бы вы заметили ЭТО. Надпись расположена по ширине. Нужно еще больше текста, что бы вы заметили ЭТО.

Внимание: внутри атрибута, в кавычках не должно быть пробелов, иначе работать не будет.

<br> -тег, который служит для обычного переноса строки. Закрывающий тег отсутствует.

Отличается от <p>, тем, что не добавляет отступ перед текстом. То-есть если Вы напишите текст в одну строку и после нужных слов поставите тег <br> то текст начнется с новой строки.

Пример:

<p>Стихи</p>

<p>Стихи, Стихи, Стихи, Стихи, <br> Стихи, Стихи, Стихи, Стихи,<br> Стихи,
Стихи, Стихи, Стихи, <br>Стихи, Стихи, Стихи, Стихи, <br>Стихи. </p>

 

Вид в браузере:

Стихи

Стихи, Стихи, Стихи, Стихи,
Стихи, Стихи, Стихи, Стихи,
Стихи, Стихи, Стихи, Стихи,
Стихи, Стихи, Стихи, Стихи,
Стихи.

 


 

Тег, задающий заголовки текста.

<h1>, <h2><h6> — теги, с помощью которых обозначают заголовки, разделы и подразделы в тексте. Тег имеет шесть уровней. Закрывающий тег обязателен. Атрибутом для данного тега является все тот же aling.

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

Пример:

   <h1>Вашему вниманию предоставляется заголовок 1 уровня!</h1>

   <h2> Вашему вниманию предоставляется заголовок 2 уровня!</h2>

   <h3> Вашему вниманию предоставляется заголовок 3 уровня!</h3>

   <h4> Вашему вниманию предоставляется заголовок 4 уровня!</h4>

   <h5> Вашему вниманию предоставляется заголовок 5 уровня!</h5>

   <h6> Вашему вниманию предоставляется заголовок 6 уровня!</h6>

 

Вид в браузере:

Вашему вниманию предоставляется заголовок 1 уровня!

Вашему вниманию предоставляется заголовок 2 уровня!

Вашему вниманию предоставляется заголовок 3 уровня!

Вашему вниманию предоставляется заголовок 4 уровня!

Вашему вниманию предоставляется заголовок 5 уровня!
Вашему вниманию предоставляется заголовок 6 уровня!

 


 

Теги для выделения текста.

Не редко бывает, что нужно выделить тот или иной текст с помощью курсива, подчеркивания или выделения текста полужирным шрифтом. А кроме этого, бывают случаи, что нужно написать формулы или что-то другое.

<em> — выделяет текст курсивом. Закрывающий тег обязателен.

<strong> — выделяет текст полужирным шрифтом. Закрывающий тег обязателен.

<ins> — выделяет текст подчеркиванием. Закрывающий тег обязателен.

<sub> — нижний индекс (текст ниже обычной строки, с уменьшенным шрифтом). Закрывающий тег обязателен.

<sup> — верхний индекс ( текст выше обычной строки, с уменьшенным шрифтом). Закрывающий тег обязателен.

 

Пример:

<p>Текст с <em>курсивным</em> шрифтом.</p>

   <p>Текст выделенный <strong>полужирным</strong> шрифтом.</p>

   <p><ins>Весь текст в этом абзаце подчеркнутый.</ins></p>

   <p>Пишу, пишу, пишу и бац <sub>текст уже снизу</sub>.</p>

   <p>Пишу, пишу, пишу и бац <sup>текст уже сверху</sup>.</p>

 

Вид в браузере:

Текст с курсивным шрифтом.

Текст выделенный полужирным шрифтом.

Весь текст в этом абзаце подчеркнутый.

Пишу, пишу, пишу и бац текст уже снизу.

Пишу, пишу, пишу и бац текст уже сверху.


 

Тег стилизации текста.

Хотите сделать красивый разноцветный шрифт? Тогда в помощь вам тег <font>.

<font> — своеобразный контейнер для изменения визуализации шрифта, а конкретно: размера, цвета, гарнитуры. Закрывающий тег обязателен.

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

COLOR – определяет цвет шрифта. Цвет можно задавать в RGB – значении, либо стандартным наименованием цветов на английском языке.
SIZE – определяет размер шрифта. По умолчанию установлен 3 размер шрифта. Всего их существует 7.
FACE – определяет сам шрифт.

Пример:

Текст без визуализации.

   <p><font color="green" size="+2">Абзац зеленого цвета, увеличен на 2 размера.</font></p>

   <p><font color="red" size="3" face="Verdana">Надпись красного цвета, 3 размера,
в шрифте Verdana</font></p>

 

Вид в браузере:

Текст без визуализации.

Абзац зеленого цвета, увеличен на 2 размера.

Надпись красного цвета, 3 размера, в шрифте Verdana

 

Если размер шрифта прописывать со знаком плюса или минуса, то размер соответственно будет большим или меньшим от значения по умолчанию.

Практикуйтесь, жду Вас на следующем уроке.

Закрыть меню