Основная часть Web-страницы

Тема 2: Основная часть Web-страницы (1 час)

План

1. Использование заголовков

2. Символы разрыва абзаца и разрыва строк. Выравнивание абзацев и заголовков

3. Использование дескриптора <PRE>

4. Форматирование текста с помощью стилей

5. Добавление линий и комментариев

Основная часть всех Web-страниц определяется с помощью элемента BODY, начальный и конечный дескрипторы которого указывают на начало и окончание информации. Контейнер BODY не используется только в одном случае – в документе с фреймами (frameset), где его заменяет контейнер FRAMESET.

1. Использование заголовков

Рекомендуемые материалы

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

Стандарт HTML поддерживает шесть уровней заголовков, которые определяются с помощью контейнеров: Н1, Н2, …, Н6. Для каждого уровня заголовков установлены стандартные размеры шрифтов.

2. Символы разрыва абзаца и разрыва строк

Дескрипторы <P> и <BR> позволяют добавить в документ пробелы, чтобы отделить один блок текста от другого.

Дескриптор <P> используется для вставки символа разрыва абзаца. Вставляя данный дескриптор мы тем самым даем браузеру команду завершить текущий абзац и вставить пустую строку перед следующим абзацем.

Дескриптор <BR> используется для вставки символа разрыва строки. Вставляя данный дескриптор мы даем браузеру команду завершить текущую строку и перейти на следующую.

Выравнивание абзацев и заголовков

Текст абзаца или заголовка можно выровнять по левому краю (стандартная установка), по правому краю или по центру окна браузера.

Для дескриптора заголовка используется следующий синтаксис:

<Hn ALIGN=выравнивание>

где n – уровень заголовка;

выравнивание – параметр, который может принимать одно из следующих значений: LEFT, RIGHT, CENTER.

Для дескриптора абзаца используется следующий синтаксис:

<Р ALIGN=выравнивание>

3. Использование дескриптора <PRE>

Если вы хотите поместить на Web-страницу информацию, которая уже содержится в некотором документе (но не в HTML-коде), то нет никакой необходимости тратить время на повторный набор всего документа. Вместо этого можно воспользоваться контейнером отформатированного текста <PRE>. Этот контейнер позволяет сохранить форматирование текста таким, каким оно было при наборе. Кроме того, пробелы внутри текста интерпретируются в точном соответствии с их расположением в текстовом редакторе.

Форматирование цитат

Дескриптор <BLOCKQUOTE> предназначен для длинных цитат, и позволяет сделать отступ в строке.

В контейнер <BLOCKQUOTE> можно включать другие дескриптор, например текстовые стили или разрывы строк.

Дескриптор <Q> предназначен для отображения коротких цитат. Если с помощью дескриптора <BLOCKQUOTE> в блоке текста создается отдельный фрагмент, то при использовании дескриптора <Q> цитата продолжается в той же строке, что и предыдущий текст, т.е. блок текста не разрывается на части.

4. Форматирование текста с помощью стилей

В HTML предусмотрено несколько способов форматирования текста. Это явное (или абсолютное) форматирование с помощью физических стилей и неявное (или относительное) форматирование с помощью логических стилей, и наконец, изменение размера шрифта.

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

Таблица – Дескрипторы физических стилей

Изменение размера шрифта

С помощью элемента FONT можно определить размер и цвет шрифта. Атрибут SIZE позволяет указать абсолютный размер шрифта (он может принимать значения от 1 до 7) или относительный, по отношению к размеру шрифта, используемого в основной части страницы (он может принимать значения от -4 до +4). При этом используется следующий синтаксис:

<FONT SIZE=значение>

Для изменения размера основного шрифта документа используется элемент BASEFONT. Величина основного шрифта может принимать значения от 1 до 7, а стандартный для браузера размер шрифта равен 3.

Для изменения цвета шрифта используется атрибут COLOR, при этом используется следующий синтаксис:

<FONT COLOR=значение>.

5. Добавление линий и комментариев

Для разделения текста страницы на части можно воспользоваться горизонтальными линиями, которые создаются с помощью дескриптора <HR>. Внешний вид линии можно изменить с помощью атрибутов.

Таблица – Атрибуты дескриптора <HR>

Величина SIZE измеряется в пикселях.

Величина WIDTH может измеряться как в процентах так и в пикселях, поэтому для атрибута WIDTH используются два варианта синтаксиса:

<HR WIDTH="значение в процентах%">

<HR WIDTN="значение в пикселях">.

Атрибут ALIGN может принимать значения LEFT, RIGHT или CENTER. Его нужно использовать в сочетании с атрибутом WIDTH, иначе линия протянется вдоль всего экрана:

<HR WIDTN="25%" ALIGN=LEFT>.

Для атрибута NOSHADE используется следующий синтаксис:

<HR NOSHADE>.

Добавление комментариев

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

Для комментариев используется следующий синтаксис:

<!—текст комментария -->.

Практическое задание

Откройте файл first.html и сохраните его под именем second.html.

Измените его в соответствии с приведенным ниже листингом:

<HTML>

<HEAD>

<TITLE>Это моя первая Web-страница!</TITLE>

</HEAD>

<BODY BGCOLOR=#AAAAAA>

<H1 ALIGN=CENTER>Я изучаю HTML</H1>

<HR>

<FONT SIZE=7 COLOR=#FFAA00>

Изменим размер и цвет шрифта

<HR>

<P ALIGN=CENTER>

<FONT SIZE=+2 COLOR=#0000AA>

Обратите внимание на лекцию "1 - Общие положения".

Данный абзац будет выровнен по центру, в отличие от основных абзацев документа, которые выровнены по левому краю

<HR SIZE=10 WIDTH="700" ALIGN=CENTER COLOR=#FFFF00>

<!-- Для того, чтобы увидеть сделанные изменения в окне браузера не забудьте щелкнуть кнопку Обновить -->

</BODY>

</HTML>

Сохраните документ и откройте его в окне браузера.