Создание простейшей Web страницы

Вид материала

Содержание

Лабораторная работа №2
Списки определений имеют вид
Предварительно форматированный текст
To a Skylark
Align - Определяет размещение линии: align=left, align=center или align=right. По умолчанию, линия выравнивается по центру. Nosh
Size - Устанавливает высоту линии в пикселах. Width

Подобный материал:

1 2 3 4 5 6 7 8 9 ... 12

Контрольные вопросы:

Опишите основные элементы заголовка HTML-документа
Какие управляющие последовательности могут быть использованы в теле HTML-документа
Перечислите специальные элементы уровня текста, их назначение.

Задание:

Используя любой текстовой редактор, создайте Web – страницу.

ЛАБОРАТОРНАЯ РАБОТА №2

Тема: Изучение приемов форматирования абзацев.

Цель работы: Изучить возможности форматирования абзацев в HTML документе, научится практически применять полученные знания при создании Web - страницы.

Элементы уровня блока

Большая часть элементов, которые могут находиться в теле документа, относится либо к элементам уровня блока, либо к элементам уровня текста. Различие состоит в том, что новый элемент уровня блока всегда открывает собой новый абзац. Наиболее часто встречающиеся элементы уровня блока — это H1 ... H6 (заголовки), P (абзацы), LI (элементы списков) и HR (горизонтальные линии). Наиболее часто встречающиеся элементы уровня текста — это EM, I, B и FONT (метки форматирования шрифта), A (гипертекстовые ссылки), IMG и APPLET (встроенные объекты) и BR (разрывы строк). Обратите внимание: элементы-блоки могут содержать в себе другие элементы уровня блока и элементы уровня текста, а элементы уровня текста — только другие элементы уровня текста.

Заголовки

В заголовках документов используются элементы H1, H2, H3, H4, H5 и H6. Открывающие и закрывающие метки обязательны. Заголовки H1 — самые крупные, H6 — самые мелкие. С помощью необязательного атрибута ALIGN можно установить выравнивание заголовка,

например:

... центрированный заголовок ...
.

Абзацы

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

Пример:

Это первый абзац.

Это второй абзац.

Абзацы обычно выравниваются по левому краю. Для указания горизонтального выравнивания можно использовать атрибут ALIGN:

align=left (Абзац выравнивается по левому краю).
align=center (Абзац выравнивается по центру).
align=right (Абзац выравнивается по правому краю).

Примеры:

Центрированный абзац.

Абзац, выравненный по правому краю.

1.3. Списки

Пункты списка могут содержать элементы уровня блока и уровня текста, в том числе и другие списки. Список не может содержать заголовков и адресов.

Ненумерованные списки

Ненумерованные списки имеют вид:

... первый пункт
... второй пункт

...

Для обозначения ненумерованных списков используется элемент UL. Открывающая и закрывающая метки обязательны. Элемент LI используется для обозначения пунктов списка. Закрывающая метка элемента LI не обязательна. Обратите внимание: элементы LI могут содержать в себе вложенные списки. С помощью атрибута COMPACT можно установить более компактное размещение пунктов списка.

Для указания символа, открывающего пункт списка, с элементами UL и LI можно использовать атрибут TYPE. Допустимые значения — disc, square и circle.

Нумерованные списки

Нумерованные списки имеют вид:

... первый пункт
... второй пункт

...

.

Для указания того, с какого номера начинать отсчет, можно использовать атрибут OL START (по умолчанию — 1). Можно установить начальный номер и с помощью атрибута VALUE в элементе LI. Числа должны быть целыми.

С помощью атрибута COMPACT можно установить более компактное размещение пунктов списка. Атрибут OL TYPE позволяет установить стиль нумерации пунктов:

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

Списки определений имеют вид:

термин: определение термина

...

Элементы DT могут включать в себя только элементы уровня текста, а элементы DD, кроме того, и элементы уровня блока, за исключением заголовков и элементов ADDRESS.

Пример:

Teрмин 1: Определение первого термина.
Teрмин 2: Определение второго термина.

Выводится на экран так:

Teрмин 1

Определение первого термина.

Teрмин 2

Определение второго термина.

С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

Предварительно форматированный текст

PRE

Элемент PRE используется для вывода предварительно форматированного текста. Браузеры показывают его со всеми пробелами и символами конца строки с использованием шрифта фиксированной ширины.

Внутри элемента PRE нельзя использовать ссылки на изображения и элементы, изменяющие размер шрифта, в частности IMG, BIG, SMALL, SUB, SUP и FONT.

Пример элемента PRE — фрагмент стихотворения Перси Шелли ( To a Skylark):

Higher still and higher

From the earth thou springest

Like a cloud of fire;

The blue deep thou wingest,

And singing still dost soar, and soaring ever singest.

Вывод на экран:

Higher still and higher

From the earth thou springest

Like a cloud of fire;

The blue deep thou wingest,

And singing still dost soar, and soaring ever singest.

Символ табуляции (номер 9 в кодировках Unicode, US ASCII и ISO 8859-1) интерпретируется как наименьшее ненулевое число пробелов, приводящее курсор в позицию с порядковым номером, кратным 8. Использовать его не рекомендуется, поскольку при составлении документов число пробелов, эквивалентных символу табуляции, часто устанавливается отличным от восьми, что может привести к нарушению форматирования при выводе текста.

DIV и CENTER

Элементы DIV можно использовать для разбиения HTML-документа на несколько разделов (англ. division — раздел). Для указания горизонтального выравнивания внутри элемента DIV можно использовать атрибут ALIGN с допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для абзацев
).

Обратите внимание: элемент DIV по определению закрывает открытый абзац P. За исключением этого случая, браузеры не показывают элемент DIV на экране. Элемент полностью равнозначен

. В элементах DIV и CENTER обязательны открывающие и закрывающие метки.

BLOCKQUOTE

Используется для цитат. Открывающие и закрывающие метки обязательны. Выводится на экран с увеличенными полями:

They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.

from "The Two Towers" by J.R.R. Tolkien.

FORM

Используется для определения форм. В одном документе может быть несколько форм. Открывающие и закрывающие метки обязательны. Формы могут содержать различные метки, в том числе несколько видов полей: однострочные и многострочные окна для ввода текста, группы радиокнопок, помечаемые квадраты и меню.

Action - Указывает на ресурс, который будет обрабатывать форму — указание на отсылку формы электронной почтой (например, action="mailto:foo@bar.com") или путь к программе-обработчику (например, action="com/cgi-bin/register.pl")

Method - Когда атрибут action указывает на сервер HTTP, атрибут method указывает, какой метод HTTP следует использовать для пересылки содержимого формы серверу. Допустимые значения — GET и POST, по умолчанию принято значение GET.

Enctype - Устанавливает механизм кодирования формы. По умолчанию принято application/x-www-form-urlencoded.

Дополнительная информация об обработке форм имеется в RFC 1867.

HR - горизонтальные линии

Горизонтальные линии можно использовать, чтобы указать на изменение темы.

Закрывающие метки в элементах HR запрещены. Допустимые атрибуты: ALIGN, NOSHADE, SIZE и WIDTH.

Align - Определяет размещение линии: align=left, align=center или align=right. По умолчанию, линия выравнивается по центру.

Noshade - Этот атрибут используется, чтобы указать, что линия должна выводиться в виде полосы одного цвета, а не в виде традиционной двухцветной "канавки".

Size - Устанавливает высоту линии в пикселах.

Width - Устанавливает размах линии в пикселах (например, width=100) или в процентах ширины поля вывода (например, width="50%"). По умолчанию установлено 100%.

Таблицы

Общий вид таблицы:

...

...

... заголовок таблицы ...
первая ячейка вторая ячейка

Blog