Добавление и редактирование текста.
Как Вы помните, в прошлом уроке мы создали свою первую html страницу, данный урок посвящен основным тегам текста. Рассмотрим абзацы и заголовки.
Если скопировать текст этого урока и вставить его в нашу страничку, то браузер отобразит это примерно так:
На изображении видно, что текст выводится без абзацев или других внешних видов. В тексте отсутствуют заголовки или выделения жирным и тд. Чтобы браузер начал отображать текст со всеми разделениями и выделениями, нужно задать все параметры с помощью тегов.
Список основных тегов для форматирования текста в html коде:
- P |
Тег параграфа |
- H1,H2,…H6 |
Заголовки для текста |
- BR |
Перенос строки |
- DIV , SPAN |
Выделяет часть текста или кода html |
P – тег используется чтобы разделять параграфы в html коде.
Атрибуты:
ALIGN – предает выравнивание параграфа. Значение атрибут может применять следующие: center, right, left, justify. Эти значения определяют выравнивание по центру, по правому краю, по левому краю и по ширине страницы. По умолчанию выравнивание идет по левому краю.
Пример:
Посмотрите, как браузер будет обрабатывать вот такой код:
<p align="center"> Выравнивание по центру </p>
<p align="left"> Выравнивание по левому краю</p>
<p > Выравнивание по левому краю, по умолчанию </p>
<p align="right"> Выравнивание по правому краю</p>
<p align="justify"> Это значение атрибуту будет выравнивать текст по ширине страницы, тоесть по левому и по правому краю. Если браузер не понимает данное свойство, то он будет выравнивать текст по левому краю.</p>Браузер обработает этот код следующим образом:
Важно! Нужно писать параметры в ковычках без пробелов, если дописать пробел, то работать параметр не будет!
Правильно – <p align="right">
Не правильно – <p align=" right">
H1, H2 … H6 – Все это заголовки, они применяются для обозначения блоков текста. Как в книге каждая глава имеет свой заголовок. Заголовки делятся на 6 уровней. Различия между ними только в размере шрифта.
Атрибуты:
ALIGN – данный атрибут имеет те же функции что описаны выше для параграфа. Принимает значения ctnter, left, right. По умолчанию выравнивает по левому краю.
При добавлении кода в тело документа:
<!-- заголовки с 1 по 6 уровень -->
<h1> Заголовок первого уровня </h1>
<h2> Второго уровня </h2>
<h3> Третьего уровня </h3>
<h4>Четвертого уровня </h4>
<h5> Пятого уровня </h5>
<h6> Последний шестого уровня </h6>Браузер обработает все это так:
Важно! Теги заголовков обязательно нужно закрывать закрывающим тегом со слешем.
BR – Простой тег для переноса строки, вроде клавиши ENTER. Особенностью этого тега является то, что его не нужно закрывать
Поместив данный код внутри тела html документа:
Начало текста а затем перенос <br>
строка перенеслась а теперь еще раз <br>
как видите все довольно просто
<p> В параграфе так же можно использовать данный тег <br>как видно строка перенеслась внутри параграфа без каких либо ошибок.</p>То браузер обработает это следующим образом:
Примечание – при переносе строки браузер не обозначает новый параграф, он всего лишь переносит строчку.
DIV – этот тег всеми любим. В основном его используют для создании шаблонов как контейнер для отдельных частей страницы. Использовать данные теги очень удобно, они не имеют каких либо обозначений кроме принудительных и блоки *дивов можно легко перемещать или манипулировать ими с помощью соответствующих команд. Так же внутри блока можно настраивать его вид, отступы, выравнивания и многое другое. Данный тег обязательно нужно закрывать!
Атрибуты:
ALIGN – как и в предыдущих тегах данный атрибут отвечает за выравнивание, значения он принимает аналогичные.
Давайте попробуем применить тег на практике, если поместить данный код в тело документа:
<div align="right">
Начало текста а затем перенос <br> строка перенеслась а теперь еще раз <br>
</div>
как видите все довольно просто
<p> В параграфе так же можно использовать данный тег <br>как видно строка перенеслась внутри параграфа без каких либо ошибок. </p>То браузер обработает его так:
Если перевести наши действия на человеческий язык, то мы заключили две строчки в тег DIV и применили выравнивание к этому контейнеру по правой стороне. В такие контейнеры из *дивов можно помещать любые отрезки кода.
Важно! При заключении участка текста в тег див он распознается как отдельный параграф, отличие заключается только в отступах по краям, они меньше чем у параграфа.
SPAN – данный тег используется только для выделения части контента страницы и установка различных стилей для этого мини блока. Обязательно нужно закрывать этот тег!
Если не использовать стили для этого тега, он не несет никакого смысла и не редактирует внешний вид.
Пример кода:
Чтобы пользоваться <span> Adobe Dreamweaver </span> - нужно изучить основы html <br>
после этого Вы можете установить себе эту незаменимую программу!Браузер отобразит это так:
По изображению видно, что изменений никаких не произошло. Но если добавить стили этому тегу, то браузер будет применять их к выделенной области:
Чтобы пользоваться <span style="color:red;"> Adobe Dreamweaver </span> - нужно изучить основы html <br>
после этого Вы можете установить себе эту незаменимую программу!В данном примере прописан стиль изменения цвета на красный, кстати это уже CSS. О этом будет отдельный учебник!
Данным атрибутом можно присваивать стили любому участку текста.
