 |
Текст в виде маленького заголовка
|
|
|
|
Теги переноса строки и форматирования абзаца
Вот еще несколько полезных теги для форматирования текста.
Полезно знать:
Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.
Например, в тесте html-документа написано:
Идет бычок, качается,
Вздыхает на ходу...
А браузер отобразит этот текст следующим образом:
Идет бычок, качается, Вздыхает на ходу...
Тут-то нас и спасет тег <br>. Это непарный тег, означающий переход на новую строку.
Т.е написав:
Идет бычок, качается,<br>
Вздыхает на ходу...
или
Идет бычок, качается,<br>Вздыхает на ходу...
В браузере мы увидим:
Идет бычок, качается,
Вздыхает на ходу...
С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег <br>, а два и т.д.
Полезно знать:
Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.
Например, в тесте html-документа написано:
Здравствуй, дорогой друг!
А браузер отобразит этот текст следующим образом:
Здравствуй, дорогой друг!
Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.
Т.е. если написать:
<pre>Идет бычок, качается,
Вздыхает на ходу...</pre>
То браузер отобразит этот текст следующим образом:
Идет бычок, качается,Вздыхает на ходу...Но!
Не стоит злоупотреблять тегом <pre>. И по возможности обходиться без него.
Любой текст можно, а иногда и нужно, разбить на абзацы. В html такую функцию выполняет тег <p>. Если поместить текст между открывающим тегом <p> и закрывающим тегом </p>, то сверху и снизу от этого теста появится отступ, т.е. этот кусок текста отделится от общей массы текста и образуется параграф. По умолчанию параграф выровнен по левому краю.
|
|
|
Всего в html можно задать 4 типа выравнивания: по левому краю, по правому краю, по центру, по ширине. Чтобы задать тип выравнивания нужно параметру align тега <p> присвоить одно из значений:
- left (выравнивание по левому краю),
- right (выравнивание по правому краю),
- center (выравнивание по центру),
- justify (выравнивание по ширине).
Вот примеры текста с различным типом выравнивания:
| по левому краю | по правому краю | по центру | по ширине |
| <p align="left">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p> | <p align="right">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p> | <p align="center">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p> | <p align="justify">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p> |
| Результат в браузере | |||
| Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро. | Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро. | Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро. | Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро. |
Т.к. по умолчанию задано выравнивание по левому краю, то в первом примере параметр align="left" можно не писать.
|
|
|
Для задания выравнивания по ширине существует еще один тег <center>:
<center>Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</center>
И в браузере текст отобразится по центру. Правда в таком случае утратится свойство параграфа: отступ сверху и снизу. Но ведь оно и не всегда требуется.
Списки.
Маркированные списки
Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.
Для установки маркированного списка используются теги <ul> и <li>
Тег <ul> - unordered list (неупорядоченный список).
Тег <li> - list item (элемент списка)
Код, написанный таким образом
<ul>
<li> Книги </li>
<li> Электроника </li>
<li> CD и DVD </li>
</ul>
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега <ul>.
С помощью CSS можно задать в качестве маркера любое изображение. В этом случае следует помнить: при масштабировании текста при просмотре в браузере стандартные маркеры масштабируются вместе с ним, а изображения, используемые в качестве маркера, не масштабируются.
Нумерованные списки
Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов.
Для установки нумерованного списка используется тег <ol> вместо <ul>
Тег <ol> - ordered list (упорядоченный список).
Самый простой список имеет следующий код:
<ol>
<li> Выйдете на станции метро Войковская. </li>
<li> Сядьте на троллейбус 57 маршрута.</li>
<li> Выйдете на четвертой остановке. </li>
<li> Перейдите дорогу. Я Вас буду ждать у киоска.</li>
</ol>
На экране он отобразится так:
| 1. Выйдете на станции метро Войковская. 2. Сядьте на троллейбус 57 маршрута. 3. Выйдете на четвертой остановке. 4. Перейдите дорогу. Я Вас буду ждать у киоска. |
|
|
|
Вид и тип нумерации зависит от параметров тега <ol>
| Код HTML | Отображение на экране |
| <ol start="5"> | Список начинающийся с пяти: 5. Желтый 6. Синий 7. Красный |
| <ol type="A"> | Заглавные латинские буквы:
|
| <ol type="a"> | Прописные латинские буквы:
|
| <ol type="I"> | Cписок с римскими буквами:
|
Вложенные списки
Вложенный список - это список, размещенный внутри другого списка.
Например, код
<ol>
<li> Крупные города России:
<ul type="square">
<li> Москва
<li> Санкт-Петербург
</ul>
<li> Крупные города Украины:
<ul type="square">
<li> Киев
</ul>
</ol>
отобразится на экране так:
|
Списки определений
Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl>... </dl>, элемента определения термина <dt>... </dt>, элемента определения описания <dd>... </dd>.
Код примера
<dl>
<dt>Пиксель</dt>
<dd>Элементарная цветная точка, совокупность которых образует изображение.</dd>
<dt>Экспозиция</dt>
<dd>Количественная мера световой энергии, падающая на светочувствительный элемент.</dd>
<dt>Диафрагма</dt>
<dd>Параметр, регулирующий количество света, который освещает матрицу.</dd>
</dl>
отобразится в браузере так:
| Пиксель Элементарная цветная точка, совокупность которых образует изображение. Экспозиция Количественная мера световой энергии, падающая на светочувствительный элемент. Диафрагма Параметр, регулирующий количество света, который освещает матрицу. |
|
|
|
