..., ..., …, …. Заголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке самые крупные символы, в – самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. Атрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT.
Пример:
6. Теги выделения смысловых частей текста
Результат действия тега похож на заголовок следующего параграфа.
6. Теги выделения смысловых частей текста
Абзацы в тексте выделяются контейнером
…
. Атрибут ALIGN задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой. Закрывающий тег
необязателен. Его можно использовать только тогда, когда было заказано нестандартное выравнивание текста.
Примеры:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Приведенный выше код при просмотре выглядит так:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Чтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег
. Закрывающего тега у него нет.
Иногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега
. Его атрибуты:
SIZE – толщина линии в пикселах. По умолчанию 1 пиксел.
WIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.
ALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.
COLOR – цвет линии. По умолчанию GRAY.
NOSHADE – линия рисуется без тени. По умолчанию тень есть.
Пример. Код, в котором использованы теги
и
:
Жизненная позиция
Хорошо на свете жить,
Информатику учить!
В окне браузера этот код изображается так:
Жизненная позиция
Хорошо на свете жить,
Информатику учить!
7. Оформление списков
Списки облегчают нахождение нужной информации при перечислении сведений, объединенных общим смыслом: пункты меню, списки товаров, перечень сотрудников и т. п. В HTML предусмотрено несколько вариантов оформления списков, которые чаще всего используются в документации. Здесь будут рассмотрены только маркированные и нумерованные списки.
Для того чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер (Unordered List). Для нумерованного – в контейнер … (Оrdered List). Затем текст в контейнере разбивается на отдельные пункты списка тегами (List Item – элемент списка). Закрывающий тег в конце каждого пункта ставить необязательно. В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер.
Примеры кода:
Список дисциплин: Список дисциплин:
- Информатика
- Информатика
- Физика
- Физика
- История
- История
Это дает на экране следующие списки:
Список дисциплин: Список дисциплин:
Информатика 1. Информатика
Физика 2. Физика
История 3. История
Можно организовать многоуровневые списки (разумно ограничиться тремя уровнями вложения). Для этого после каждого следует разместить контейнеры или … с разбивкой информации этого пункта на дополнительные подпункты.
В теге могут использоваться следующие атрибуты:
TYPE – определяет стиль оформления меток для элементов списка, подробнее ниже;
START – (только для нумерованного списка ) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы, подробнее ниже;
VALUE – (только для метки - списка
) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.
Для нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть:
1 – арабские цифры (1,2,3,...)
a – строчные буквы (a, b, c,…)
A – прописные буквы (A,B,C,...)
i – римские цифры строчные (i,ii,iii,...)
I – римские цифры прописные (I,II,III,...)
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
Число, указанное в атрибуте START, показывает порядковый номер элемента в ряду знаков, заданных в TYPE. С этого элемента следует начинать нумерацию пунктов списка.
8. Создание таблиц
Средства HTML для создания таблиц удобно использовать не только при представлении табличных данных. Их также применяют для точного выравнивания элементов на экране или комбинирования изображений и текстов. В качестве примера рассмотрим код, который создает простейшую таблицу:
Простая таблица
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Ячейка 4
|
Простая таблица
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Как видно из примера, начало и конец таблицы оформляются тегами . Все остальные теги, создающие структуру таблицы и ее содержание, вкладываются в этот контейнер. Для того, чтобы создать рамку вокруг таблицы, можно задать атрибут BORDER=n, где n – толщина рамки в пикселах. По умолчанию таблицы не имеют рамок, т.е. n = 0. Атрибут WIDTH=n%, где n – целое число, позволяет занять таблицей нужный процент от ширины экрана. Если знак процента опущен, то считается, что n задает размер таблицы в пикселах.
Сразу после тега можно вставить контейнер, создающий заголовок таблицы: текст заголовка . Заголовок по умолчанию располагается над таблицей слева. Другое выравнивание задается атрибутом ALIGN:
LEFT – значение по умолчанию, заголовок над таблицей слева;
TOP –заголовок над таблицей по центру;
RIGHT – заголовок над таблицей справа;
BOTTOM – заголовок под таблицей по центру.
Если таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк, следует в тегах или | добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка. Например, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы.
Пример. Фрагмент кода, создающего показанную таблицу:
1
|
2
|
3
|
4
|
5
|
6
|
7
|
8
|
9
|
10
|
11
|
12
|
1 | 2 |
|---|
3 | 4 |
5 | 6 |
7 | 8 |
|---|
9 | 10 | 11 |
12 |
|---|
| |
Скачать 1.6 Mb.