Файл: Основы программирования на языке HTML (Структура и основные теги языка HTML).pdf
Добавлен: 29.03.2023
Просмотров: 253
Скачиваний: 2
<!—пример маркированного списка знаков зодиаков -->
<html>
<head>
<title>Пример маркированного списка знаков зодиаков</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body>
<p>Знаки зодиаков:
<ul>
<li>Овен
<li>Телец
<li>Близнецы
<li>Рак
</ul>
</body>
</html>
Рисунок 7 - Пример маркированного списка
Как видно из рис. 7 тег <ul> осуществляет отступ сверху и снизу, а также слева от края документа, выделяя таким образом список в тексте документа. Тег <li> в свою очередь обеспечивает вывод каждого элемента с новой строки, образуя список.
Тег <ul> имеет необязательный параметр type, позволяющий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки (некоторые браузеры используют другие маркеры по умолчанию). Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:
- disk – закрашенные кружки;
- circle – незакрашенные кружки;
- square – закрашенные квадратики.
Например, если в записанном выше примере переписать тег <ul> в виде <ul type=square>
то получим следующий вид списка (рис. 8).
Рисунок 8 - Маркированный список с параметром type=square
Следует отметить, что внутри тега <ul> могут находиться любые другие теги языка HTML, в том числе и вложенные теги <ul>, образуя таким образом более сложный вид списков. Например, можно создать список сотрудников, с вложенным списком возраста, места работы, образования:
<html>
<head>
<title>Пример вложенных списков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<ul>
<b>Список сотрудников</b>
<li>Иванов Иван Иванович
<ul>
<li>Возраст: 22
<li>Место работы: УлГТУ
<li>Образование: высшее
</ul>
<li>Петров Петр Петрович
<ul>
<li>Возраст: 27
<li>Место работы: УлГУ
<li>Образование: высшее
</ul>
</ul>
</body>
</html>
Рисунок 9 - Пример вложенных списков
Обратим внимание, что при отображении вложенных списков браузер автоматически меняет тип маркера и делает необходимые отступы для удобного визуального восприятия таких списков [9, с. 259].
3.2. Нумерованный список
Данный тип списка отличается от маркированного тем, что в качестве маркера использует тот или иной вид перечисления элементов списка (по умолчанию в качестве перечисления используются арабские цифры, начиная с 1). Во всем остальном нумерованный список похож на маркированный.
Для создания нумерованного списка используется тег-контейнер <ol>, внутри которого располагаются элементы, заданные тегом <li>, например:
<p>Наиболее яркие звезды, видимые с Земли:
<ol>
<li>Сириус
<li>Канопус
<li>Арктур
<li>Альфа Центавра
</ol>
Рисунок 10 - Пример нумерованного списка
Тип перечисления можно менять с помощью параметра type тега <ol>. Параметр type может принимать следующие значения:
- type=A – задает маркер в виде прописных латинских букв;
type=a – задает маркер в виде строчных латинских букв;
- type=I – задает маркер в виде больших римских цифр;
- type=i – задает маркер в виде малых римских цифр;
type=1 – задает маркер в виде арабских цифр.
По умолчанию все браузеры используют маркер type=1.
Другой необязательный параметр тега <ol> start позволяет задавать начальное значение для нумерации списка, например,
<ol start=5>
при типе нумерации type=1 начнет нумерацию с 5, при type=I – начнет нумерацию с V, при type=A – начнет нумерацию с символа E и т.д.
Тег <li> в нумерованном списке может использовать параметр value для определения текущего номера элемента списка. При этом идущие следом за ним элементы будут увеличивать свой номер относительно него, например,
<ol>
<li>Сириус
<li>Канопус
<br>...
<li value=5>Арктур
<li>Альфа Центавра
</ol>
Рисунок 11 - Пример изменения нумерации при отображении списка
4. Таблицы в HTML-документе
Таблицы обеспечивают важную часть в представлении информации. Разделение данных на столбцы и строки имеет широкое применение в практике оформления текстовых документов. Не являются исключением из этого правила и HTML-документы, которые имеют специальный тег <table> для создания таблиц [9, с. 273].
В HTML-документах таблицы применяют не только для представления табличных данных, но и для создания разметки HTML-страницы. Например, многие страницы сайта имеют «шапку» (верхняя часть страницы), непосредственно информацию и «подвал» (нижняя часть страницы). Для разбивки HTML-документа на эти составные части хорошо подходят таблицы, у которых скрывается рамка и визуально создается впечатление единства всех составляющих частей. Таблицы удобны для создания разнообразного разбиения, т.к. ячейки таблицы могут содержать в себе и другие таблицы. В результате Web-мастеру не составляет большого труда организовать требуемую структуру документа и, затем, наполнить ее необходимым содержимым.
Создание простейших таблиц в HTML-документах.
Создание таблицы в HTML-документе начинается с тега <table> и заканчивается закрывающим тегом </table>. Таблицы всегда должны располагаться в разделе <body> документа. За тегом <table> обычно следует тег <tr>, описывающий строку таблицы. Затем, внутри тега <tr> располагается либо тег <th>, описывающий ячейку-заголовок таблицы, либо (и чаще всего) тег <td>, описывающий ячейку с данными таблицы. По сути, тег <th> или <td> разбивают строку таблицы на ячейки. Если нужно создать две ячейки в строке, то соответственно внутри тега <tr> должно быть два тега <td> (или <th>).
Число строк в таблице определяется числом тегов <tr> внутри текущей таблицы. При этом общее число таблиц в документе может быть произвольным. По умолчанию каждая строка таблицы <tr> должна содержать одинаковое число ячеек. Если данное условие не будет выполнено, то браузер автоматически добавит недостающее число ячеек и выровнит таблицу. Теги <tr>, <th> и <td> могут не иметь соответствующих закрывающих тегов, но их применение рекомендуется для лучшей ориентации Web-мастеру в структуре таблицы [9, с. 275].
Приведем пример простой таблицы, содержащей список студентов с экзаменационными отметками по разным дисциплинам.
<html>
<head>
<title>Пример простой таблицы</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body>
<table border=1>
<tr>
<th>Ф.И.О.</th>
<th>Информатика</th>
<th>Математика</th>
<th>Физика</th>
<th>Химия</th>
</tr>
<tr>
<td>Иванов И.И.</td>
<td>4</td>
<td>3</td>
<td>5</td>
<td>4</td>
</tr>
<tr>
<td>Петров П.П.</td>
<td>3</td>
<td>5</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Наместников С.М.</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</body>
</html>
В приведенном примере у тега <table> использовался необязательным параметр border со значением 1, который задает толщину рамки вокруг таблицы. Данный параметр может принимать и большие значение: 2,3,…, однако толщина будет влиять только на рамку вокруг таблицы, на толщину рамки вокруг отдельных ячеек это не оказывает никакого влияния. Отличие составляет только значение border=0. В этом случае рамок ни вокруг таблицы, ни вокруг ячеек не будет [9, с. 277].
Рисунок 12 - Пример отображения простой таблицы
Из приведенного примера видно, что текст в ячейках заголовка таблицы (заданных тегом <th>) выделены полужирным и выровнены по центру. Текст в ячейках данных (заданных тегом <td>) не выделен полужирным и выровнен по левому краю ячейки. Также следует отметить, что по умолчанию вертикальное выравнивание во всех ячейках таблицы выполняется по центру.
Тег <caption>. Таблица в HTML-документе может иметь описание, располагающееся в необязательном теге <caption>. Данный тег обязательно должен идти сразу после тега <table> и имеет необязательный параметр
align=left | right | top | bottom
для выравнивания заголовка таблицы по левому, правому краю таблицы, либо определяет способ вывода сверху или снизу таблицы. Если параметр align не задан, то он принимается равным top.
Параметры тега <table>. Тег <table> имеет следующие основные необязательные параметры:
- align="left | center | right"
Выполняет горизонтальное выравнивание таблицы на странице документа. Если параметр align опускается при определении таблицы, то таблица располагается по левому краю и ее обтекание текстом не происходит. Если устанавливается значение align=left или right, то таблица ориентируется по левому или правому краю с обтеканием текста. Если же выравнивание выполняется по центру, то обтекание таблицы текстом не происходит.
- background="URL". Данный параметр служит для задания фонового изображения таблицы. Следует отметить, что изображение, указанное в значении URL, не масштабируется под высоту и ширину таблицы и будет отображена только соответствующая часть изображения. Если изображение меньше по ширине и/или высоте таблицы, то оно повторяется, заполняя соответственно всю ее площадь.
- bgcolor="цвет". Устанавливает цвет фона таблицы. В качестве значения данного параметра допустимо использовать как заданные цветовые константы, типа red, green, blue и др., так и шестнадцатиричные значения цветов в формате #RRGGBB, например,
<table bgcolor="#CC0000">...</table>
соответствует красному цвету фона таблицы. Часто цвет фона таблицы делают близким к цвету фонового изображения, т.к. он отображается, пока фоновое изображение не загрузится с сервера, либо в случаях ошибки загрузки фонового изображения.
- border="толщина". С помощью параметра border устанавливается толщина рамки вокруг таблицы. По умолчанию border равен 0 и рамки в таблице не рисуются.
Отображение таблиц без рамок бывает весьма полезным при создании разметки HTML-страницы, когда содержимое ячеек воспринимается пользователем как единый документ. Также это полезно при создании многоколоночных текстов или списков в тексте и т.п.
Следует отметить, что параметр border устанавливает толщину рамки только вокруг таблицы, но не вокруг ячеек.
- cellpadding="число". Данный параметр определяет расстояние в пикселах между границей ячейки и ее содержимым. По умолчанию значение параметра равно 1. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
- cellspacing="число". Задает расстояние в пикселах между смежными ячейками таблицы (точнее между рамками ячеек) по горизонтали и вертикали одновременно. При отсутствии рамки, данный параметр аналогичен по действию параметру cellpadding. Если в таблице используется набор параметров
<table border=0 cellspacing=0 cellpadding=0>...</table>
то расстояния между ячейками будут отсутствовать и они сливаются, образуя единое неразрывное пространство. Это свойство таблиц очень удобно, например, для отображения графического меню, где в ячейках располагаются фрагменты единого изображения, и, сливаясь вместе, они образуют естественное визуальное восприятие такой информации в целом.
- cols="число". Атрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы [9, с. 279].
- frame="значение". Определяет способ рисования рамки вокруг таблицы. Данный параметр может принимать следующие значения:
- void – без рамки;
- border – рисование рамки вокруг таблицы;
- above – рисование рамки сверху таблицы;
- below – рисование рамки снизу таблицы;
- hsides – рисование рамки только сверху и снизу таблицы;
- vsides – рисование только вертикальных границ;
- rhs – рисование границы справа;
- lhs – рисование границы слева.
По умолчанию данный параметр имеет значение border.
- rules="значение". Сообщает браузеру, где отображать границы между ячейками. При этом толщина внешней рамки таблицы устанавливается с помощью атрибута border. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку; толщина таких линий составляет 1px.
Данный параметр может принимать следующие значения: