Урок 3: Разбираемся с текстом

В прошлом уроке мы создали свою первую простую страницу.

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

Если вы просто скопируете текст этого урока от начала и до первой картинки, и поставите его в свою первую страницу, то вы увидите приблизительно следующее:

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

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

P	Используется для разбивания текста на параграфы
H1,H2,...H6	Используется для создания заголовков 1,2...6 уровней
BR	Применяется для переноса строки
DIV , SPAN	Применяются для выделения части документа определенным способом.

P - Применяется для разметки параграфов в html документах.

Атрибуты:

ALIGN -указывает способ горизонтального выравнивания параграфа.Допустимые значения: right ; left ; center ; justify . Это, соответственно по правому краю, по левому краю, по центру и по ширине. По умолчанию содержит значение left.

Приведу пример:

Если написать внутри тела документа следующее:

        <p align="center"> Данный параграф по центру </p>
        <p align="left"> Этот по параграф левому краю</p>
        <p > Этот параграф тоже по левому (т.к. по умолчанию) </p>
        <p align="right"> Этот параграф по правому краю</p>
        <p align="justify"> В данном параграфе текст будет выравниваться по ширине
      (сразу по левому и правому краям документа).
       Браузеры не понимающие justify будут выравнивать текст по левому краю</p>

То при просмотре в браузере увидим следующее:

Примечание:

Содержимое в кавычках должно быть написано без пробелов, т.е. <p align="right"> а не <p align=" right "> иначе работать не будет !

↑ Вверх ↑

H1,H2,...H6 - Используются для разбивания текста на - разделы и подразделы то-есть на смысловые уровни.Существует шесть уровней заголовков,отличающихся по величине шрифта.

Атрибуты:

ALIGN - указывает способ горизонтального выравнивания заголовков.Возможные значения: left, right, center.По умолчанию - left.

Приведу пример:

Если написать внутри тела документа следующее:

         <h1> Самый большой заголовок </h1>
         <h2> Заголовок немного меньше </h2>
         <h3>Заголовок еще меньше </h3>
         <h4> Совсем маленький </h4>
         <h5> Очень маленький заголовок </h5>
         <h6> Ну просто карликовый заголовочек </h6>

То при просмотре в браузере увидим:

выделение заголовков в html

Примечание: обязателен закрывающий тег!

↑ Вверх ↑

BR - данный элемент выполняет перенос строки. Не имеет закрывающего тега.

Приведу пример:

Если написать внутри тела документа следующее:

       Это первая строка <br>
       здесь вторая <br>
     вот уже и третья
      <p> А вот ещё параграф, внутри него тоже можно применять тег <br>
        переноса строки.
       Его надо применять всегда, когда надо перенести строку:) </p>

Увидим следующее:

перенос строки <br>

Как вы вероятно заметили, при переносе строки не начинается новый параграф! Перенос- это и есть перенос!

↑ Вверх ↑

DIV - В сегодняшнем сайтостроении применяется как удобный контейнер для блоков html кода страницы, которым легко манипулировать – регулировать отступы, скрывать, перемещать и т.п. Закрывающий тег обязателен !

Атрибуты:

ALIGN - указывает способ горизонтального выравнивания параграфа.Допустимые значения: right; left, center, justify. Это, соответственно по правому краю, по левому краю, по центру и по ширине. По умолчанию содержит значение left.

Предположим нам необходимо выровнять первые две строки текста из прежнего примера по правому краю,абзац при этом не выделяя . Сделать это можно так ?

       <div align="right">
      Вот первая строка <br> дальше идет вторая <br>
      </div>
     а вот и третия
      <p>
     А это параграф и внутри него тоже можно применять тег <br>переноса
     cтроки.Его надо использовать всегда, когда надо перенести строку... </p>

Что мы увидим:

Т.е. мы выбрали две строки кода, поместили их в контейнер DIV и выравняли его по правому краю! Так же само, можно поместить в контейнер и 10 и 100 и более строчек и ими манипулировать.

Примечание: Стоящие между первым и последним тегами текст или HTML-элементы выделяются как бы
в самостоятельный параграф(но отступы значительно меньше).

Пример:

Здесь вы читаете текст на первой строке <div>
Здесь уже на второй </div> А здесь уже на третьей

Результат:

Вы видите что текст содержащийся в элементе DIV выделился в отдельную строку!

↑ Вверх ↑

SPAN - Применяется для выделения части информации и сообщения ей разных стилей. Обязателен закрывающий тег !Сам по себе, без применения стилей, элемент SPAN не имеет никакого смысла !

Например:

       Хотите использовать <span> Adobe Dreamweaver
        </span> - для начала нужно изучить основы html и <br>
       тогда Вы без всяких трудностей освоете эту программоу!

Мы увидим следующие:

тег SPAN

Как видите, мы как будто ничего и не выделяли! Если же прописать какой нибудь стиль данному тегу, то он начнет работать.

        Хотите использовать <span style="color:red;" > Adobe Dreamweaver
         </span> - для начала нужно изучить основы html и <br>
       тогда Вы без всяких трудностей освоете эту программу!

В данном случае я прописал стиль красного цвета, подробнее о стилях в курсе CSS.

тег SPAN с атрибутами стиля