Добавление и редактирование текста.

Теперь если Вам нужно внести изменения в код файла, нужно открыть его через блокнот. После изменений обязательно сохраните файл и обновите страницу в браузере. Тогда Вы увидите все изменения.

Если посмотреть код страницы и вид отображения браузером, видно что заголовок страницы называется «Это моя первая страничка!» А комментарии не отображаются браузером.

Как Вы помните, в прошлом уроке мы создали свою первую 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 – данный атрибут имеет те же функции что описаны выше для параграфа. Принимает значения center, 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> после этого Вы можете установить себе эту незаменимую программу!

Данным атрибутом можно присваивать стили любому участку текста.