В предыдущем уроке мы создали свою первую простейшую страничку. В этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и.т.д. Если вы возьмете и скопируете текст данного урока от начала и до первой картинки, и вставите его в свою первую страничку, то вы увидите примерно следующее: пример неотформатированного текста Как вы заметили текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, короче форматирование отсутствует! Т.е. чтобы Браузер правильно отображал текст, необходимо задать его форматирование. Основными элементами форматирования текста в html являются: - P Используется для разбивания текста на параграфы - H1,H2,...H6 Применяются для создания заголовков 1,2...6 уровней - BR Используетcя для переноса строки - DIV , SPAN Используются для выделения части документа определенным способом. P - используется для разметки параграфов в html документах. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа . Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значение left. Приведу пример: Если внутри тела документа написать следующее:

Этот параграф по центру

Этот по левому краю

Этот тоже по левому (т.к. по умолчанию)

Этот по правому краю

В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю

То при просмотре в браузере получим следующее: форматирование абзацев Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е.

а не

иначе не будет работать! ↑ Наверх ↑ H1,H2,...H6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты: ALIGN - определяет способ горизонтального выравнивания заголовков. Возможные значения: left, center, right .По умолчанию - left. Приведу пример: Если внутри тела документа написать следующее:

Большой заголовок

Заголовок поменьше

Еще меньше

Совсем маленький

Малюсенький заголовочек

Ну просто лилипутский заголовочек

То при просмотре в браузере увидим: выделение заголовков в html Примечание: закрывающий тег обязателен! ↑ Наверх ↑ BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега. Приведу пример: Если внутри тела документа написать следующее: Начинается первая строка
теперь идет вторая
а вот уже и третья

А это параграф и внутри него тоже можно использовать тег
переноса строки.Его надо использовать всегда, когда надо перенести строку:)

Увидим следующее: перенос строки
Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос! ↑ Наверх ↑ DIV - В современном сайтостроении используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег! Атрибуты: ALIGN - определяет способ горизонтального выравнивания контейнера. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значение left. Допустим нам нужно выровнять первые две строчки текста из предыдущего примера по правому краю, не выделяя при этом их в абзац. Как это сделать? а вот уже и третья

А это параграф и внутри него тоже можно использовать тег
переноса строки.Его надо использовать всегда, когда надо перенести строку:)

Что мы увидим: тег DIV Т.е. мы взяли две строчки кода, заключили их в контейнер DIV и выравняли его по правому краю! Так же само, можно заключить в контейнер и 20 и 50 и более строчек и манипулировать ими. Примечание: Находящиеся между начальным и конечным тегами текст или HTML-элементы выделяются как бы в отдельный параграф(но отступы гораздо меньше). Например: Пока что вы читаете текст на первой строке А теперь уже на третей Результат: Тег DIV Как видите текст содержащийся в элементе DIV выделился в отдельную строку! ↑ Наверх ↑ SPAN - Используется для выделения части информации и придания ей различных стилей. Закрывающий тег обязателен! Сам по себе, без использования стилей, элемент SPAN никакого смысла не имеет! Например: Хотите пользоваться Adobe Dreamweaver - тогда изучите хотя бы основы html и
тогда Вы без проблем разберетесь с этой замечательной программой! Что мы увидим: тег SPAN Как видите, как будто мы ничего и не выделяли! Но если прописать какой нибудь стиль этому тегу, то он начнет работать! Хотите пользоваться Adobe Dreamweaver - тогда изучите хотя бы основы html и
тогда Вы без проблем разберетесь с этой замечательной программой! В данном случае я прописал стиль красного цвета, подробнее о стилях в курсе CSS. тег SPAN с атрибутами стиля Таким образом с помощью элемента SPAN можно хоть каждой букве в тексте присвоить разный стиль(цвет, размер, и.т.д.) ↑ Наверх ↑ См. также Следующий - Урок 4: Продолжаем работать с текстом Предыдущий - Урок 2: Создаем свою первую страничку [Обсудить на форуме] Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ