- •Часть I. Основы разработки web-документов средствами языка разметки гипертекста html
- •1.1 Создание Web-документов на языке html
- •1.1.1 Структура html-документа
- •1.1.2 Функциональные блочные элементы. Флаги
- •1.1.3 Списки
- •1.1.4 Таблицы
- •1.1.5 Комментарии
- •1.2 Форматирование текста
- •1.2.1 Гиперссылки
- •1.2.2 Подготовка и использование графических файлов
- •Часть 2. Создание интерактивных Веб - страниц и динамической графики при помощи языка JavaScript
- •2.1 Элементы языка JavaScript
- •Часть 4. «Создание динамических графиков»
1.1.1 Структура html-документа
HTML-документ начинается в флага <HTML> и заканчивается флагом </HTML>. Между флагами располагается текст документа. Например:
<HTML>
Текст документа
</HTML>
Остальные элементы документа разбиваются на два раздела: раздел головной части документа и раздел самого тела документа.
На экране флаги не отображаются, как не отображаются элементы головной части. Отображается только текст.
Раздел головной части документа начинается и заканчивается флагами <HEAD> и </HEAD>. В головной части всегда встречающимся элементом является название документа, помещенное между флагами <TITLE> и </TITLE>.Основное содержание документа располагается между парными флагами < BODY>.
Например:
<HTML>
<HEAD>
<TITLE> название документа </TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
1.1.2 Функциональные блочные элементы. Флаги
форматирования текста (теги)
В большинстве WEB-документах основными функциональными
элементами являются заголовки и абзацы.
Заголовки.
Язык HTML поддерживает 6 уровней заголовков. Они отображаются при помощи парных флагов от <H1>…</H1> до <H6>…</H6>. При отображении документов текст разных уровней
отображается шрифтами разных размеров. Уровни должны быть вложенными.
Абзацы.
Для создания параграфа или абзаца текста используются парные флаги <P> и </P>. Например:
<P> текст первого абзаца </P>
<P> текст второго абзаца </P>. Флаг <P> может быть не парным, т.е.
использование закрывающего флага </P> не обязательно. Нажатие на клавишу ENTER недостаточно для перехода на новую строку. Для этой цели
используется непарный флаг <BR>. Пустая строка при этом не вставляется.
В качестве ограничителя абзаца может использоваться горизонтальная линейка. Этот элемент задается непарным флагом <HR> .
Горизонтальная линия используется для разделения текста на логические части. Для задания дополнительных параметров горизонтальной линейки используются следующие атрибуты. < HR SIZE = число > – задает толщину линии в пикселях. < HR WIDTH = число | проценты > - задает длину линии по горизонтали в пикселях или процентах от ширины экрана. < HR ALIGN = left | center | right > - задает выравнивание линии по левому краю, по центру или по правому краю. < HR NOSHADE > - по умолчанию линия выводится с использованием трехмерного эффекта. При использовании данного атрибута линия выводится одним цветом.
Например, если создается горизонтальная линейка шириной в 10 пикселей, занимающих половину ширины окна, и расположенную справа, следует
записать <HR ALIGN=RIGT SIZE=”10” WIDTH=”50%”>
Для создания горизонтальной линейки зеленого цвета шириной в 8
пикселей, занимающей 80 % ширины окна при выравнивании по центру,
следует записать
<HR ALIGN=CENTER SIZE=”8” WIDTH=”80 %” COLOR=”GREEN”>
Соответственно, для задания полосы красного цвета следует записать COLOR= ”RED”, для задания голубого цвета линии следует записать COLOR= ”BLUE” и т.д.
1.1.3 Списки
Ненумерованный список. Для вывода информации в виде ненумерованного списка используются флаги < UL > и < / UL >. Каждый элемент списка задается при помощи непарного флага < LI >.
В отображаемом тексте ему предшествует символ .
Пример:
<UL>
< LI > Пример 1
< LI > Пример 2
< LI > Пример 3
< / UL >
На экране это отобразится так:
Пример 1
Пример 2
Пример 3
Нумерованный список. Для вывода информации в виде нумерованного списка используются флаги < OL > и < / OL >. Каждый элемент списка задается при помощи непарного флага < LI >.
Пример:
< OL >
< LI > Пример 1
< LI > Пример 2
< LI > Пример 3
< / OL >
На экране это отобразится так:
1.Пример 1
2.Пример 2
3.Пример 3