Добавил:

Low Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет печати им. И. Федорова

Предмет:

Системы мультимедиа

Файл:

Шпаргалка По Мультимедийным Технологиям (Клим А. И.).doc

Скачиваний:

Добавлен:

07.10.2014

Размер:

544.77 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1819 / 2519 20 21 22 23 24 25 > Следующая >>>

52) Списки: маркированные, нумерованные, вложенные. Виды нумерации.

Начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ui> и его закрывающим близнецом </ui>. Отдельные элементы списка объявляются при помощи обозначающего тега <ii>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.

Приведем простейший пример использования нумерованного списка:

<title>Mapкированный список</title> <body> <р>Это обычный текст. </р>

<ul>

<1i>

Первый пункт списка

<1i> Второй пункт списка

</ul>

</body>

</html>

При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов:disc указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга;circle задает маркер в виде окружности;square устанавливает маркер в виде маленького прямоугольника.пример:

<html>

<head>

<title>Mapкированный список</title> <body>

<ul>

<li type="circle">Первый пункт списка

<li type="disc">Bторой пункт списка

<li type="square">Tpeтий пункт списка

</ul>

</body>

</html>

Теперь перейдем к рассмотрению упорядоченных нумеров. списков. Список подобного типа создается при помощи тегов <oi> и </oi>. А элементы списка объявл-ся при помощи все того же тега <li>. Пример простейшего нумеров. Списка:

</title>Нумерованный cписок</title>

<body>

<ol>

<li>Первый пункт списка

<li>Bторой пункт списка

<li>Tpeтий пункт списка

</ol>

</body>

</html>

Виды нумераций Уже знакомый параметр type позволяет указывать, какие именно цифры могут использоваться для обозначения элементов списка.

Значение 1 применяется для нумерации обычными арабскими цифрами.

Значение а задает обозначения в виде символов латин алфавита нижнего регистра.

Значение А задает обозначение элементов списка при помощи символов латин алфавита,

но при этом использ-ся символы верхнего регистра.

Значение i создает нумерацию при помощи римских цифр, которые будут состоять из символов латин. алфавита нижнего регистра.

Значение l устанавливает римские цифры в качестве основы нумерации

При сохранении единой нумерации элементов списка браузер меняет внешний вид каждого элемента списка, сохраняя при этом их общую нумерацию. HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег <ol> вставляется параметр start. Значением этого параметра является натур. число, кот и будет номером 1го элемента списка. Но внутри списка мы можем произвольно менять порядковые номера элементов при помощи параметра value, применяемого в составе тега <li>.пример:

<html>

<head>

<title>Вложенные списки</title>

<body>

<1i>Пятый пункт списка

<1i>Шестой пункт списка

<1i vа1uе=10> Десятый пункт списка

<1i>Одиннадцатый пункт списка

<ol>

</body>

</html>

53) Таблицы html.

Объявляем саму таблицу при помощи тега <tabie>. Строки таблицы объяв-ся при помощи пары тегов <tr> и </tr>.Уже внутри этих тегов мы объявляем ячейки при помощи тега <td> и его закрывающей пары </td>, между кот и находится содержимое каждой конкретной ячейки. Как видно, сколько ячеек будет в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек будет определяться, исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца будет больше по размерам,чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.пример:

<html>

<head>

<title>Простейшая таблица </title>

</head>

<body>

<р>Это обычный текст</р>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Один из объектов табл -заголовок, реализуемый при помощи тега <caption>.Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Top заставляет

браузер отображать заголовок таблицы над ней самой. bottom перемещает заголовок под таблицу.

left и right устанавливают, соответ-но, левое и правое горизонт-е выравнивание заголовка, который при этом отображается сверху таблицы. Пример:

<body>

<р>Это обычный тёкст</р>

<caption align=right> 3аголовок таблицы</сарtion>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Но обычно табл содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot>. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbоdy>.Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками.пример:

<html>

<head>

<title>Таблица </title>

</head>

<body>

<р>Это обычный тёкст</р>

<caption> 3аголовок таблицы</сарtion>

<thead>

<tr>

<td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td>

</tr>

<tr>

</tr>

</table>

</tbody>

tfoot>

<tr>

</tfoot>

</table>

</body>

</html>

Параметр align задает выравнивание содержимого ячеек данного раздела таблицы по горизонтали.

В качестве значения данного параметра применяется одно из предустановленных ключевых слов.

left прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.right выравнивает любое содержимое ячеек по правому краю.center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр.

Используется по умолчанию для заголовков таблицы.

justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки.

char применяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате,

vaiign-параметр, позволяющий явно устанавливать вертикальное выравнивание содержимого ячеек,

входящих в состав какого-либо блока таблицы.

top прижимает содержимое ячеек к их верхним границам.

middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию.

bottom прижимает содержимое ячеек к их нижним граням.

baseline имеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы,

выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке.

Изменение размеров таблицы Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.

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

Параметр bgcolor позволяет задавать цвет фона для ячеек, входящих в строку.Сами ячейки мы можем создавать не только при помощи тега <td>, но и при помощи тега <th>. Тег <th> предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов.Пример

< table border="5" cellpadding="10" bgcolor="#FFFFFF">

< tr>

< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>

< /tr>

< tr>

< td>Четвертая ячейка< /td>< td bgcolor="#FF0000">Пятая ячейка< /td>

< /tr>

< /table>

Чтобы рамки были видны, используется атрибут border.Можно менять цвет внешней рамки с помощью атрибута bordercolor. Например,

< table border="10" bordercolor="#FF0000">

< tr>

< td>Первая ячейка< /td>

< td>Вторая ячейка< /td>

< /tr>

< /table>

Чтобы изменить расстояние между соседними ячейками используется атрибут cellspacing. сделаем две строки по три столбца и применим атрибут cellspacing:

< table border="5" cellspacing="10">

< tr>

< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>

< /tr>

< tr>

< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>

< /tr> < /table>

Чтобы расширить ячейки по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:colspan — расширение ячеек по горизонтали (столбцам);rowspan — расширение ячеек по вертикали (строкам): < tr>

< td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td>

< /tr>

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1819 / 2519 20 21 22 23 24 25 > Следующая >>>