Скрипты для сайта
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта
Теги HTML
Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим
CSS
Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы
Реклама
Зарабатываю на smmka.ru
Все для сайта
Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Структурирование текста

Цитаты



В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.

HTML уже приготовил для нас выход из положения — парный тег
<blockquote>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web-обозреватель выводит цитату с отступом слева.


Листинг 2.8

<blockquote>
<p>Начало большой цитаты.</p>
<p>Продолжение большой цитаты.</p>
</blockquote>



Как видим, в тег <blockquote> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам. Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).



Листинг 2.9


<blockquote>
<p>HTML ( от англ. HyperText Markup Language - язык разметки гипертекста ) - стандартный язык разметки документов во Всемирной паутине.</p>
</blockquote>


Текст фиксированного формата



Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web-страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу
<title>.


Листинг 2.10



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html"; charset=utf-8">
<title>Tег TITLE</title>
</head>
<body>
<h1>Tег TITLE</h1>
<p>Tег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</p>
<h5>Пример:</h5>
<p>!head!
!title! Я - заголовок Web-страницы !/title!
!head!</p>
</body>
</html>



Здесь мы поместили краткое описание тега <title> и код примера, имеющий такой вид:

!head!
!title! Я - заголовок Web-страницы !/title!
!/head!



Вместо символов < и >, которые, как мы помним, недопустимы в обычном тексте, мы поставили восклицательные знаки.Но мы узнаем, как все-таки вставить в текст недопустимые символы, и заменим их. Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?

Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?

Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.

Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.

Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег
<pre>. Выводимый текст помещают внутри этого тега (листинг 2.11).



Листинг 2.11


<pre>Текст будет выведен на Web-страницу со всеми отступами и переносами строк.</pre>



Tакой текст называется текстом фиксированного формата.


Правила отображения текста фиксированного формата:

  • Для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у кото-рых ширина символов различна);

  • Все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);

  • Если строка текста фиксированного формата не помещается в окне Web-обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за это-го может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна...);

  • Возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее тут).


  • Текст фиксированного формата также является блочным элементом.

    Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).


    Листинг 2.12


    <! DOCTYPE html>
    <html>
    . . . . .
    <h5>Пример:</h5>
    <pre>!head!
    !title! Я - заголовок Web-страницы !/title!
    !head!</pre>
    </body>
    </html>



    Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно. Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова, в которой все книги опубликованы как раз в виде текста фиксированного формата.



    Заработай сейчас!
    Заработай сейчас
    Навигация по сайту






    Поиск по сайту

    Друзья сайта
    Самоучитель html
    Все для веб-мастера
    Музыка для души
    Мир развлечений
    Скачать кино бесплатно!
    Видеоклипы online
    Хостинг от uCoz
    Avon
    Присоединяйтесь
    к   Avon
    img