Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Методичка_HTML_студентам.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
413.7 Кб
Скачать

Нумерованный список

Нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения нумерованного списка применяется парный тег <ol></ol>:

Синтаксис:

<ol type = ”параметр” start = “значение”>

<li>Вхождение 1</li>

<li>Вхождение 2</li>

<li>Вхождение 3</li>

</ol>

Атрибут type позволяет определить вид маркера, которым будут обозначаться составляющие список значения. Параметр type может принимать одно из следующих значений:

“1” - обычные арабские числа;

“I” - римские цифры в заглавном регистре;

“i” - римские цифры в строчном регистре;

“A” – символьная маркировка в заглавном регистре;

“a” – символьная маркировка в строчном регистре.

Атрибут start позволяет задать позицию, с которой следует начать нумерацию.

П

<html>

<head>

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

</head>

<body text="#000000" bgcolor="#ffffff">

<ol type="1" start="1">

<li>Вхождение 1</li>

<li>Вхождение 2</li>

<li>Вхождение 3</li>

</ol>

</body>

</html>

ример:

МАРКИРОВАННЫЙ СПИСОК

Маркированный список можно представить при помощи команды <ul></ul>.

Синтаксис:

<ul type = ”параметр”>

<li>Вхождение 1</li>

<li>Вхождение 2</li>

<li>Вхождение 3</li>

</ul>

Атрибут type позволяет определить вид и форму обозначающее каждое вхождение меток. Параметр type может принимать одно из следующих значений:

Disc – метка в виде заполненной черным цветом окружности;

Circle – метка в виде полной окружности;

Square - метка в виде заполненного черным цветом квадрата.

Ч тобы отступ (табуляция) был больше надо вкладывать тег <ul> в самого себя.

П

<html>

<head>

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

</head>

<body text="#000000" bgcolor="#ffffff">

<ul><li>Вхождение 1</li></ul>

<ul><ul><li>Вхождение 2</li></ul></ul>

<ul><ul><ul><li>Вхождение 3

</li></ul></ul></ul>

</body>

</html>

ример:

ЛИНИИ

Линия задается тегом <Hr> и не требует закрывающего тега.

У линии есть много разных параметров:

<Hr align="right"> (center или left)- выравнивание;

<Hr width="30%"> - ширина линии в процентах/пикселях;

<Hr size="6"> - толщина линии;

<Hr NoShade> - отмена объемности;

<Hr color="cc0000"> - цвет линии, только в IE.

Параметры могут употребляться одновременно.

П

<html>

<head>

<title>Линии </title>

</head>

<body>

<hr align="center" width="80%"

size="4" color="000000">

</body>

</html>

ример:

Спецсимволы

< - < > - > " - "   - пробел & - &

Спецсимволы не надо включать ни в какие теги, они считаются просто текстом.

Пример:

<html>

<head>

<title>Спецсимволы </title>

</head>

<body>

<Спецситмволы> не "

включаются" в теги!

</body>

</html>

Html - таблицы

Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но Html – таблицы не способны производить математические расчеты.

Для включения таблицы в Html-документ используется тег <TABLE>. Параметры самой таблицы задаются с помощью трех тегов:

<TH>-для заголовков таблицы;

<TR>-для задания строк;

< TD>-для задания данных (то есть информации, которая будет содержаться в ячейках таблицы).

П

<table>

<tr>

<td bgcolor="#CCCCСС" >a</td>

<td bgcolor="#999999" >b</td>

<td bgcolor="#CCCCСС" >c</td>

</tr>

<tr>

<td bgcolor="#999999" >a1</td>

<td bgcolor="#CCCCСС" >b2</td>

<td bgcolor="#999999" >c3</td>

</tr>

</table>

ример:

Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для строки, для столбца (в пределе одной строки). В нашем случае задали фон для каждого столбца. Высота и ширина ячейкам таблицы задается параметрами height и width. Их можно задать для всей таблицы, для одной строки, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. Зададим ширину и высоту в пикселях для столбцов (ячеек).

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

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

Выровнять текст можно при помощи тега <center></center>. В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). Для форматирования текста применяются рассмотренные выше теги.

Пример:

<table> <tr> <td height="40" width="55" bgcolor="#CCCCCC"> <center> a </center> </td> <td width="55" bgcolor="#999999"> <center> b </center></td> <td width="55" bgcolor="#CCCCCC"> <center> c </center></td> </tr> <tr> <td height="40" width="55" bgcolor="#999999"> <center> a1 </center></td> <td width="55" bgcolor="#CCCCCC"> <center> b2 </center></td> <td width="55" bgcolor="#999999"> <center> c3 </center></td> </tr> </table>

Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу).

П

<table>

<tr>

<td height="40" width="55" bgcolor="#CCCCCC" valign="top"> <center>a</center> </td>

<td width="55" bgcolor="#999999"> <center>b</center> </td>

<td width="55" bgcolor="#CCCCCC" valign="bottom"> <center>c</center> </td></tr>

<tr>

<td height="40" width="55" bgcolor="#999999" valign="bottom"> <center>a1</center> </td>

<td width="55" bgcolor="#CCCCCC"> <center>b2</center> </td>

<td width="55" bgcolor="#999999" valign="top"> <center>c3</center> </td>

</tr>

</table>

ример:

Для создания таблиц сложной структуры применяются параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество строк (эти параметры могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (строки)).

Пример:

<table> <tr> <td height="40" bgcolor="#CCCCCC" colspan="2"> <center>a</center> </td> <td width="55" bgcolor="#999999"> <center>b</center> </td> </tr> <tr> <td height="40" width="55" bgcolor="#999999"> <center>a1</center> </td> <td width="55" bgcolor="#CCCCCC"> <center>b2</center> </td> <td width="55" bgcolor="#999999"> <center>c3</center> </td> </tr> </table>

В этом примере использовался параметр colspan=2, прописав его для ячейки «а» Ячейки «с» нет, т.к. ячейка «а» равна по длине двум ячейкам (что указано параметром colspan). Для избавления от пространства между ячейками таблицы используется атрибут cellspacing.

П

<table cellspacing=0>

<tr>

<td height="40" bgcolor="#CCCCCC" colspan="2"> <center>a</center> </td>

<td width="55" bgcolor="#999999" rowspan="2"> <center>b</center> </td>

</tr>

<tr>

<td height="40" width="55" bgcolor="#999999"> <center>a1</center> </td>

<td width="55" bgcolor="#CCCCCC"> <center>b2</center> </td>

</tr>

</table>

ример:

Можно увеличить пространство между ячейками, присвоив параметру другое значение cellspacing=5. Существует атрибут cellpadding, который добавляет свободное пространство между содержимым ячейки и ее границами.

Использовние параметра bgcolor задает цвет фона для таблицы (строки, ячейки), а параметр background задает фоновую картинку для таблицы (строки, ячейки). Применение этого параметра необходимо так, как Internet Explorer отображает параметр bgcolor для вложенных таблиц, а Netscape Navigator этот параметр для вложенных таблиц не отображает, поэтому используется background.

Чтобы ячейка не пустовала, в нее вводится &nbsp (символ неразрывного пробела), потому что конструкцию <td></td> броузеры игнорируют. Поэтому для корректного отображения таблицы везде необходимо вставлять в пустые ячейки &nbsp.

Параметр align можно задать для содержимого ячейки, но удобного align="justify" тут нет.

Рамка вводится параметром border. Например, зададим рамку равную 3 пикселям:

<table border="3">

Для задания рамке цвета используется параметр:

<table border="3" bordercolor="#000000">

Ниже в таблице приведена краткая сводка допустимых атрибутов:

Атрибут

Элемент

Назначение

ALIGN=

Таблица, заголовок, строка, ячейка.

Выравнивание таблицы по горизонтали;

выравнивание данных по горизонтали; размещение заголовка над или под таблицей.

VALIGN=

Строка, ячейка.

Выравнивание по вертикали.

WIDTH=

Таблица, ячейка.

Ширина.

HEIGHT=

Ячейка.

Высота.

COLSPAN=

Ячейка.

Протяженность в несколько столбцов.

POWSPAN=

Ячейка.

Протяженность в несколько строк.

BGCOLOR=

Таблица, ячейка.

Цвет фона.

CELLSPACING=

Таблица.

Зазор между ячейками.

CELLPADDING=

Таблица.

Зазор между содержимым ячейки и ее границей.

BORDER=

Таблица.

Отображение границ ячеек и внешней рамки таблицы.

BORDERCOLOR=

Таблица

Цвет рамки.

Пример таблицы с использованием допустимых атрибутов:

<html>

<head>

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

</head>

<body text="blue" bgcolor="lightblue">

<center><b>Отметка посещаемости</b>

<table cellspacing=0 border="3" bordercolor="darkblue">

<tr>

<td width="50" height="60" rowspan="2" align="center">№ п/п</td>

<td width="250" rowspan="2" valign="middle" align="center">Фамилия И.О.</td>

<td width="360" height="30" colspan="6" valign="middle" align="center">Присутствие</td>

</tr>

<tr bgcolor="#CCCCCC" >

<td width="60" height="30">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

</tr>

<tr>

<td width="50" height="30" valign="middle" align = "center"> 1. </td>

<td width="250">&nbsp </td>

<td width="60"> &nbsp</td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

<td width="60">&nbsp </td>

</tr>

</table>

</center>

</body>

</html>