7.2.3. Элементы основного раздела html-документа
Оформление HTML-документа без использования всей палитры цветов не было бы таким информативным и запоминающимся, поэтому необходимо использование описания основных цветов и их кодов в кодировке RRGGBB (красный, зеленый, синий).
Цветовые имена и RGB значения
Black |
Черный |
"#000000" |
|
Silver |
Серебро |
"#C0C0C0" |
|
Gray |
Серый |
"#808080" |
|
Green |
Зеленый |
“#008000" |
|
Lime |
Известь |
"#00FF00" |
|
Olive |
Оливковый |
"#808000" |
|
White |
Белый |
"#FFFFFF" |
|
Yellow |
Желтый |
"#FFFF00" |
|
Maroon |
Темно-бордовый |
"#800000" |
|
Navy |
Темно-синий |
"#000080" |
|
Red |
Красный |
"#FF0000" |
|
Blue |
Синий |
"#0000FF" |
|
Purple |
Фиолетовый |
"#800080" |
|
Teal |
Чирок |
"#008080" |
|
Fuchsia |
Фуксия |
"#FF00FF" |
|
Aqua |
Аква |
"#00FFFF" |
|
Элемент body.
Фактически элемент body – это самая важная часть HTML-файла, так как в него включен весь отображаемый на странице текст, изображения и мультимедиа либо ссылки на них. Атрибуты, этого элемента влияют на представление документа в целом.
Список основных атрибутов элемента bogy
Bgcolor |
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB. bgcolor="yellow" или bgcolor="#FFFF00" |
Background |
Указывает на url-адрес изображения – фона документа. Браузер автоматически повторяет рисунок, заполняя им все пространство элемента (страницы). |
Text |
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB. text="green" или text="#008000” |
Link |
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB. link="red” или link="#FF0000" |
Vlink |
Устанавливает цвет гиперссылок, на которые уже посетили используя значение цвета в виде RRGGBB. |
Alink |
Устанавливает цвет гиперссылок при нажатии. |
bgproperties=fixed |
Фоновое изображение прокручиваться не будет |
Элементы физического форматирования текста
Элементы |
Действие элемента над блоком текста |
Пример использования |
<b> |
выделяет текст полужирным шрифтом |
<b>текскт жирный </b> |
<i> |
выделяет текст курсивом шрифтом |
<i>текскт курсив </i> |
<u> |
позволяет вывести подчеркнутый текст |
<u> подчеркнутый</u> |
<s> |
|
<s> зачеркиванием </s> |
<big> |
отображает текст увеличенным шрифтом (относительно текущего) |
<big>увеличенным</big> |
<small> |
отображает текст уменьшенным шрифтом (относительно текущего) |
<small>маленький</small> |
<sub> |
Отображает текст в виде нижний индекс |
H<sub>2</sub>O |
<sup>, |
Отображает текст в виде верхнего индекса |
X<sup>3</sup>+x=0 |
<tt> |
Отображает текст моноширинным шрифтом |
<tt> моноширинным </tt> |
<var> |
используется для обозначения в тексте переменных |
<var> Variable1 </var> |
Все эти элементы физического форматирования можно вкладывать один в другой и при этом будет достигаться комбинированный эффект форматирования текста. Например, документ с одновременным форматированием текста полужирным, подчеркнутым, курсивом, большого размера с использованием нижнего и верхнего регистров будет иметь вид:
<p>Уравнение <i>n</i>-степени:<big><b> <i>x<sup>n</sup></i> + a<sub>1</sub><i>x<sup>n</i>-1</sup> +...+ a<sub><i>n</i></sub> = 0 </b></big></p>
Применить все эти элементы форматирования в одном HTML-документе, и добавить пару своих комбинаций физического форматирования.
Далее рассмотрим часто употребляемый элемент <p> параграф. Параграфы задаются тегами <p></p>. Элемент параграфа имеет атрибут allgn – выравнивание параграфа относительно одной из сторон документа, принимает значения: left, right, center или justify. Рассмотрим их применение более подробно.
Используя атрибут allgn =”left“ можно выравнивать текст по левому краю:
<p align="left">текст</p>
Соответственно при allgn =”right“ осуществляется выравнивание текста по правому краю:
<p align="right">текст</p>
Следующее значение атрибута allgn =”center“ позволяет осуществить центровку текста:
<p align="center">текст</p>
Последнее и часто используемое значение атрибута align=“justify” позволяет отформатировать текст параграфа по ширине:
<p align="justify"> Последнее и часто используемое значение атрибута align=“justify” позволяет отформатировать текст параграфа по ширине.</p>
Текст в документе, если не задавать выравнивания в параграфе, всегда выравнивается по умолчанию по левому краю. Для переноса строки в параграфе используется тэг <br>.
Рис. 7.5. Пример использования тегов
Элемент параграфа <p> имеет атрибут style. Это довольно сложный атрибут, позволяющий осуществить наиболее тонкую настройку оформления начертания текста.
Атрибут style имеет следующую конструкцию
style=”[правило1: значение]; [правило2: значение];…”
Перечислим основные правила оформления и их значения.
Группа свойств шрифта. |
|
font-family: |
название шрифта. Comic Sans MS, Arial, Tahoma, Monotype Corsiva, Georgia и т.д. все которые установлены в ОС. |
font-size: |
Размер шрифта. Наиболее чаще указывается в - пунктах(pt, 1pt=1/72 дюйма), но можно указывать и в других единицах измерения, таких как дюймы (in), сантиметры (cm), миллиметры (mm), а также и пиксели (px). Название единицы пишется стазу после указания размера: 12pt, 10mm, 1cm. |
font-weight: |
жирность начертания значения normal | bold. По умолчанию применяется normal. |
font-style: |
курсив normal | italic. По умолчанию применяется normal. |
Свойства шрифта |
|
text-decoration: |
подчеркнутый – underline зачеркнутый – line-through надчеркнутый – overline мерцание – blink без украшения – none Могут использоваться как по одному на и группой: пример text-decoration: underline overline; |
font-variant: |
малые прописные small-caps |
text-transform |
все прописные – uppercase первые прописные – capitalize |
Межзнаковый интервал |
|
letter-spacing: |
Значения устанавливаются в цифрах: 1pt. Разряженные межзнаковый интервал задается положительным значением “3pt”. Уплотненный межзнаковый интервал обозначается знаком минуса “-“ перед числом и получаем “-2pt”. Обычный межзнаковый интервал задается значением “0pt” и является установленным по умолчанию. |
Свойства блока текста |
|
text-align |
Выравнивание текста по левому, правому краям или по ширине, или по центру устанавливая соответствующее значение атрибута left, right, center или justify. |
Отступы оформления блока текста |
|
text-indent |
Первая строка задается числовым значением 10mm или 1cm. |
margin-left: |
Отступ слева задается числовым значением 10mm или 1cm. |
margin-right: |
Отступ справа задается числовым значением 10mm или 1cm. |
Интервал оформления абзацных отступов. Задается числовым значением 10mm или 1cm. По умолчанию измеряется в пикселях и указывается без типа размерности. |
|
margin-top: |
Перед абзацем |
margin-bottom: |
После абзаца |
word-spacing: |
между слов: |
line-height: |
Межстрочный интервал. Измеряется в процентах или разах, но можно задавать в cm, mm, in, px или pt. Одинарный 120% или 1.2 (по умолчанию) Полуторный 150% или 1.5. Двойной 200% или 2. |
Цветовое оформление |
|
color: |
цвет символов, см. таблицу цветов. |
background-image: |
Фоновый рисунок. Пример: background-image:url('Паркет.bmp') |
background-color: |
цвет фона абзаца |
Пример 7.4. Применения атрибута стиля к абзацу стиля
<p align="justify" style="color: red; background-color: #FFFF00; text-transform: capitalize; letter-spacing: 3pt; font-family: Comic Sans MS; text-indent:2px">Текст абзаца</p>
Заголовки. Элементы h1 ... h6
В языке HTML существует шесть уровней заголовков с 1-го по 6-ой, которые позволяют разбивать информацию HTML-документа на логические блоки. Заголовок 1-го уровня - <h1> - является наиболее значимым и отображается большим по размеру шрифтом, с его помощью документ разбивается на Главы. Далее следует заголовок 2-ого уровня, который отображается меньшим размером шрифта и определяет в документе разделы, заголовок 3-го уровня определяет параграфы и т.д.
Пример использования заголовков
<html>
<head>
<title>Пример HTML-документа с заголовками</title>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Заголовок, глава, параграф">
</head>
<body>
<p align="center"><b>HTML-документ с применением заголовков.</b></p>
<h1>Заголовок 1-го уровня - это ГЛАВА</h1>
<h2>Заголовок 2-го уровня - это РАЗДЕЛ</h2>
<h3>Заголовок 3-го уровня - это ПАРАГРАФ или ПОДРАЗДЕЛ</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>
Рис. 7.6. Пример использования заголовков
Заголовки могут использовать атрибут align для выравнивания текста заголовка относительно страницы, поддерживающий значения (left, right, center, justify).
Элемент гиперссылка <a>
Гиперссылка - это активный элемент страницы, позволяющий ссылаться на другие HTML-документы и прочие ресурсы в WEB-сети. При щелчке мыши на гиперссылке в браузер загружается соответствующий ресурс.
Гиперссылки задается тегами <a></a> и имеет формат.
<a href=адрес_ресурса>Название ресурса или его описание</a>
Помимо общих атрибутов, элемент a может иметь следующие атрибуты:
href - адрес ресурса, на который необходимо сослаться.
target – определает, окно браузера, в которое должен быть загружен ресурс. Чаще всего используется совместно с фреймами(изучаются в одном из последующих занятий). Может принимать следующие значения:
_blank - ресурс загружается в новое окно;
_parent - ресурс загружается в родительском окне текущего документа;
_top - ресурс загружается в окне верхнего уровня фреймовой структуры;
_self - ресурс загружается в текущем окне. Является значением по умолчанию;
"имя окна" - ресурс загружается в заданном окне (фрейме).
Способы адресации
Уделим особое внимание способу указания адреса ресурса. Некоторые типичные случаи перечислены ниже:
Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере и имеет формат
file://диск:\папка\...\папка\файл
HTTP-ссылка. Указывает адрес ресурса, доступного по протоколу HTTP. Используется следующий формат:
http://хост/папка/.../папка/файл
Почтовая гиперссылка. Запускает диалоговое окно почтового клиента для создания нового сообщения электронной почты. Формат почтовой гиперссылки имеет вид:
mailto:пользователь@хост
Относительная ссылка. Используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения:
/ - корневой каталог web-сервера или логического диска
./ - текущий каталог
../ - родительский каталог
каталог/ - дочерний каталог
Элемент изображение <img>
Используется для вставки изображений в HTML-документ. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные), также использовать формат PNG. Элемент IMG не имеет конечного тега и задается тегом <img>.
Обязательный атрибутом элемента img является src. В нем указывается URL адрес файла с изображением.
height и width – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется.
hspace и vspace – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
align – обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle – выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle – выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
alt – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
border – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно принимают равным нулю.
Пример обтекания картинки текстом
<img src="/img/picture.gif" width="45" height="53" alt="Пума" hspace="10" align="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.
Пример использование изображения в качестве гиперссылки
<A HREF="carlson.html"> <IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона"> </A>
Элементы списков OL, UL, DL.
Существует три основных вида списков в HTML-документе:
нумерованный (упорядоченный), элемент ol;
маркированный (неупорядоченный), элемент ul;
список определений, элемент dl.
Также разрешается комбинирование всех видов списков, создавая вложенные списки, используя различные элементы списков и повторяя их одни внутри других. Для этого просто необходимо разместить одну пару тэгов соответствующего элемента списка внутри другой. Для создания заголовка списка используется специальная пара тегов <lh></lh>.
Создание нумерованного списка. Элемент OL
В нумерованном списке браузер автоматически вставляет номера элементов по порядку. При удалении одного или нескольких пунктов пронумерованного списка, то остальные номера пунктов автоматически будут пересчитаны.
Нумерованный список определяется парой тэгов <ol> и </ol>. Каждый пункт списка начинается с тэга <li>. Элемент OL имеет следующие атрибуты, приведенные в табл. 7.1.
type |
Вид счетчика:
|
start |
Число, с которого начинается отсчет start=3 |
Пример
<ol type=i start=4> <li>Проблема</li> <li>Анализ проблемы</li> <li>Постановка задачи</li> <li>Решение задачи</li> <li>Анализ результата</li> <li>Решение проблемы</li> </ol> |
|
Создание маркированного списка. Элемент UL.
В маркированных списках браузер использует маркеры для пометки пунктов списка. Вид маркера задается в атрибутах элемента UL.
Маркированный список определяется парой тэгов <ul> и </ul>. Каждый пункт списка начинается с тэга <li>. Элемент UL имеет один атрибут type.
type |
Определяет внешний вид маркера. По умолчанию (disc), круглый (circle) или квадратный (square). Type =“circle” |
Пример
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Солнечная система. Пример использования списка</title>
</head>
<body>
<ul type="square">
<lh><i>Пранеты солнечной ситемы:</i></lh><br>
<li>Меркурий
<ul type="circle">
<li>Находится на растоянии 57,9 миллионов километров от солнца.</li>
<li>Диаметр 4878 км.</li>
<li>Cпутников не имеет.</li>
</ul>
</li>
<li>Венера
<ul type="circle">
<li>Находится на растоянии 108 миллионов километров от солнца.</li>
<li>Спутников не имеет.</li></li>
</ul>
</li>
<li>Земля
<ul type="circle">
<li>Находится на растоянии 149.6 миллионов километров от солнца.</li>
<li>Диаметр 12 756 км.</li>
<ol>
<lh>Спутники планеты</lh>
<li>Луна.</li>
</ol>
</li>
</ul>
</li>
<li>Марс
<ul type="circle">
<li>Находится на растоянии 227.9 миллионов километров от солнца.</li>
<li>Имеет два спутника:
<ol type="1">
<lh>Спутники планеты</lh>
<li>Фобос.</li>
<li>Деймос.</li>
</ol>
</li>
</ul>
</li>
</ul>
</body>
</html>
Рис. 7.7. Результат отображения документа в браузере
Создание списка определений. Элемент DL.
Списки определений, также называемые словарями специальных терминов, в HTML представляются особым видом списков. Они представляют текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение. Такой список удобен для составления каталога, описания функций подразделений организации или словаря терминов. Элемент списка определений DL является контейнером и обеспечивает отделение списка от остального текста пустыми строками. Внутри контейнера тэгом <dt> помечается определяемый термин, а тэгом <dd> – абзац с его определением.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
dt
{
margin-left: 20mm;
text-align: justify;
}
</style>
<title>Tэг</title>
</head>
<body>
<dl>
<dd>Tэг </dd>
<dt>Текстовая метка определенного вида, отмечающая границы – начала и конца
– некоторого содержимого. Пример, для обозначения начала таблицы, используется
тэг <tabel>, а для его завершения – </table>.</dt>
<dd>Элемент </dd>
<dt>Называется совокупность открывающего и закрывающего тэга и его содержимого.
Содержимым элемента может быть не только простой текст, а и вложенные в него
другие элементы. </dt>
<dd>Атрибут </dd>
<dt>Cвойство элемента. Атрибуты записываются в начальном тэге элемента и определяют
внешний вид содержимого. </dt>
<dl>
</dl>
</dl>
</body>
</html>
Рис. 7.8. результат отображения списка DL в браузере
Элемент таблица TABLE
Таблицы в HTML организуются как набор столбцов и строк с различной их группировкой, как по столбцам, так и по строкам. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Элемент таблица задается тегами <table>...</table>. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом border.
Строки таблицы задаются тегами: <tr>...</tr>. Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка строки таблицы задаются тегами: <td>...</td>. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отобразит пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами align=left и valign=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы задается тегами: <th>...</th>. Ячейка заголовка таблицы имеет ширину всей таблицы, текст в данной ячейке имеет атрибут BOLD и align=center.
Название таблицы задается тегами: <caption>...</caption>. Тэг <caption> должен присутствовать внутри <table>...</table>, но снаружи описания какой-либо строки или ячейки. По умолчанию <caption> имеет атрибут align=top, но может быть явно установлен в align=bottom. align определяет, где - сверху или снизу таблицы - будет поставлена подпись, при этом подпись всегда центрирована в рамках ширины таблицы.
Основные атрибуты таблицы
border Данный атрибут используется в тэге <table>. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы. border может принимать числовое значение, определяющее ширину границы, например border=2.
align Если атрибут align присутствует внутри тэгов <caption> и </caption>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию align=top. Если атрибут align встречается внутри <tr>, <th> или <td>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).
valign Данный атрибут встречается внутри тэгов <tr>, <th> и <td>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
nowrap Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
colspan Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1.
rowspan Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1.
colspec Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например colspec="20%".
Пример простой таблицы на языке HTML
<table border=1>
<tr>
<td>Cтpoкa 1<br>Ячейка 1</td>
<td>Cтpoкa 1<br>Ячейка 2</td>
<td>Cтpoкa 1<br>Ячейка 3</td>
</tr>
<tr>
<td>Cтpoкa 2<br>Ячейка 1</td>
<td>Cтpoкa 2<br>Ячейка 2</td>
<td>Cтpoкa 2<br>Ячейка 3</td>
</tr>
<tr>
<td>Cтpoкa 3<br>Ячейка 1</td>
<td>Cтpoкa 3<br>Ячейка 2</td>
<td>Cтpoкa 3<br>Ячейка 3</td>
</tr>
</table>
Cтpoкa l Ячейка 1 |
Cтpoкa 1 Ячейка 2 |
Cтpoкa 1 Ячейка 3 |
Cтpoкa 2 Ячейка 1 |
Cтpoкa 2 Ячейка 2 |
Cтpoкa 2 Ячейка 3 |
Cтpoкa 3 Ячейка 1 |
Cтpoкa 3 Ячейка 2 |
Cтpoкa 3 Ячейка 3 |
Рис. 7.9. Результат отображения таблицы в браузере
Пример сложной таблицы с объеденными ячейками и различным форматированием.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простая таблица</title>
</head>
<body>
<table border="3" width="438" height="244">
<caption>Сложная таблица</caption>
<tr>
<td align=center rowspan="2" bgcolor="#00FFFF" bordercolor="#000000">Cтpoкa l,2<br>
Ячейка 1</td>
<td>Cтpoкa 1<br>
Ячейка 2</td>
<td align=right bgcolor="#FF00FF" bordercolor="#FFFF00">Cтpoкa 1<br>
Ячейка 3<br>
<b>align=right</b></td>
</tr>
<tr>
<td valign="top">Cтpoкa 2<br>
Ячейка 2<br>
<b>valign=top</b></td>
<td valign="bottom">Cтpoкa 2<br>
Ячейка 3<br>
<b>valign="bottom"</b></td>
</tr>
<tr>
<td height="77">Cтpoкa 3<br>
Ячейка 1</td>
<td align=center colspan="2" bordercolor="#00FF00" height="77">
Cтpoкa 3
Ячейка 2,3<br>
<b>align=center</b></td>
</tr>
</table>
</body>
</html>
Рис. 7.10. результат отображения таблицы в браузере
Варианты выполнения заданий
Вариант |
Кол-во строк в таблице (не менее) |
Размер шрифта (на одной из страниц) |
Тип списка, который необходимо использовать |
Фон главной страницы |
Цвет заголовка |
Цвета ссылок |
1 |
11 |
11 |
большие латинские буквы |
Картинка |
Красный |
Зеленый |
2 |
12 |
12 |
маленькие латинские буквы |
Цвет |
Синий |
Желтый |
3 |
5 |
13 |
большие римские цифры |
Картинка |
Оранжевый |
Все цвета радуги |
4 |
4 |
14 |
маленькие римские цифры |
Цвет |
Голубой |
Коричневый |
5 |
10 |
15 |
обычные цифры |
Картинка |
Синий |
Фиолетовый |
6 |
6 |
16 |
большие латинские буквы |
Цвет |
Зеленый |
Красный |
7 |
7 |
17 |
маленькие латинские буквы |
Картинка |
Желтый |
Синий |
8 |
8 |
18 |
большие римские цифры |
Цвет |
Все цвета радуги |
Оранжевый |
9 |
9 |
19 |
маленькие римские цифры |
Картинка |
Коричневый |
Голубой |
10 |
13 |
20 |
обычные цифры |
Цвет |
Фиолетовый |
Синий |