Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Текст в виде маленького заголовка




Теги переноса строки и форматирования абзаца

Вот еще несколько полезных теги для форматирования текста.

Полезно знать:

Если в тесте 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"> Заглавные латинские буквы:
  1. Желтый
  2. Синий
  3. Красный
<ol type="a"> Прописные латинские буквы:
  1. Желтый
  2. Синий
  3. Красный
<ol type="I"> Cписок с римскими буквами:
  1. Желтый
  2. Синий
  3. Красный

 

Вложенные списки

Вложенный список - это список, размещенный внутри другого списка.

Например, код

<ol>
<li> Крупные города России:
<ul type="square">
<li> Москва
<li> Санкт-Петербург
</ul>
<li> Крупные города Украины:
<ul type="square">
<li> Киев
</ul>
</ol>


отобразится на экране так:

 

  1. Крупные города России:
    • Москва
    • Санкт-Петербург
  2. Крупные города Украины:
    • Киев

 

Списки определений

Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl>... </dl>, элемента определения термина <dt>... </dt>, элемента определения описания <dd>... </dd>.

Код примера

<dl>
<dt>Пиксель</dt>
<dd>Элементарная цветная точка, совокупность которых образует изображение.</dd>

<dt>Экспозиция</dt>
<dd>Количественная мера световой энергии, падающая на светочувствительный элемент.</dd>

<dt>Диафрагма</dt>
<dd>Параметр, регулирующий количество света, который освещает матрицу.</dd>

</dl>


отобразится в браузере так:

Пиксель Элементарная цветная точка, совокупность которых образует изображение. Экспозиция Количественная мера световой энергии, падающая на светочувствительный элемент. Диафрагма Параметр, регулирующий количество света, который освещает матрицу.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...