Файловый архив студентов. Файловый архив студентов.
1331 вуз, 5514 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет транспорта
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Конспект лекций КИТ 2 курс Лыч.doc
Скачиваний:
206
Добавлен:
01.03.2025
Размер:
2 Мб
Скачать
☆
►Содержание►

  1. Cписки и таблицы в html.

Организация списков

Списки встречаются в документах очень часто. Они бывают двух видов: нумерованнве и маркированные. Для создания списков в языке Web-страниц определены тэги <li>, <ul>, <ol>, <menu> и <dir>. Для создания маркированного списка (каждый пункт выделяется каким-либо символом) используйте тэг <ul>...</ul>. Кажжый пункт списка отмечается тэгом <li>...</li>

В Блокноте

В браузере

<p>Драгоценные металлы:

<ul>

<li>Золото

<li>Серебро

<li>Платина

</ul>

Драгоценные металлы:

  • Золото

  • Серебро

  • Платина

Вы можете изменить маркер, используя параметр type тэга <li>:

Значения параметра

Описание

disk

Круглая жирная точка

circle

Окружность

square

Маленький черный квадрат

В Блокноте

В браузере

<p>Драгоценные камни:

<ul>

<li type="disk">Алмаз

<li type="circle">Рубин

<li type="square">Опал

</ul>

Драгоценные камни:

  • Алмаз

  • Рубин

  • Опал

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

В Блокноте

В браузере

<p>Внутренние планеты солнечной системы:

<ol>

<li>Меркурий

<li>Венера

<li>Земля

<li>Марс

</ol>

Внутренние планеты солнечной системы:

  1. Меркурий

  2. Венера

  3. Земля

  4. Марс

Вы можете изменить систему нумерации, используя параметры тэга <ol>:

Параметр

Описание(Значение)

start=

Начальный номер для списка

type=

Тип нумерации:

A - заглавными буквами

a - строчными буквами

I - заглавными римскими цифрами

i - строчными римскими цифрами

1 - арабскими цифрами

compact

Компактный список

В Блокноте

В браузере

<p>Реки России:

<ol type="i">

<li>Обь

<li>Лена

<li>Енисей

<li>Волга

</ol>

Реки России:

  1. Обь

  2. Лена

  3. Енисей

  4. Волга

Если необходимо разместить в Web-документе список определения каких-либо терминов, используйте тэги <dl>, <dt>, <dd>:

Тэг

Описание

<dl>..</dl>

Начало и конец списка определений

<dt>

Строка, содержащая термин

<dd>

Определение термина

В Блокноте

В браузере

<dl>

<dt><b>HTTP</b>

<dd>Протокол передачи гипертекста HyperText Tpansfer Protocol, используется для работы с серверами WWW

<dt><b>HTLM</b>

<dd>Язык разметки гипертекста HyperText Mark-up Language, обеспечивает возможность разметки гипертекста для его размещения на сервере WWW

</dl>

HTTP

Протокол передачи гипертекста HyperText Tpansfer Protocol, используется для работы с серверами WWW

HTLM

Язык разметки гипертекста HyperText Mark-up Language, обеспечивает возможность разметки гипертекста для его размещения на сервере WWW

Таблицы являются основным инструмента языка HTML по размещению информации в документах. Они могут использоваться как в обычном смысле - для оформления таблично заданной информации, так и для фиксации отображаемых элементов в нужных частях экрана. В первом случае, таблицу отображают с границами, во втором случае - без них. Для задания таблицы используют тэги <table>, <tr> и <td>:

В Блокноте

В браузере

<p>Простая таблица:

<table>

<tr>

 <td>Ячейка 1-1</td>

 <td>Ячейка 1-2</td>

 <td>Ячейка 1-3</td>

</tr>

<tr>

 <td>Ячейка 2-1</td>

 <td>Ячейка 2-2</td>

 <td>Ячейка 2-3</td>

</tr>

<tr>

 <td>Ячейка 3-1</td>

 <td>Ячейка 3-2</td>

 <td>Ячейка 3-3</td>

</tr>

</table>

Простая таблица:

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3

Тэг <table> позволяет управлять внешним видом таблицы в целом. Используйте следующие параметры тэга:

Параметр

Описание (Значения)

align=

Определяет выравнивание таблицы относительно окна просмотра по горизонтали:

"left"-по левому краю

"center"-по центру

"right"-по правому краю

"justify"-по ширине

valign=

Определяет выравнивание таблицы относительно окна просмотра по вертикали:

"top"-по верхней границе

"middle"-по середине окна

"bottom"-по нижней границе

"baseline"-по линии текста

background=

Имя графического файла с фоновым изображением таблицы (формат GIF или JPG)

bgcolor=

Цвет фона для таблицы

border=

Толщина рамки таблицы *</SUP< td>

bordercolor=

Цвет рамки *

cellpadding=

Расстояние между краями ячейки таблицы и ее содержимым

cellspacing=

Расстояние между рамкой таблицы и ее ячейками

clear=

Форматирование текста документа после таблицы:

"no"-текст сразу после таблицы

"left"-с выравниванием по левому краю

"right"-с выравниванием по правому краю

frame=

Внешний вид рамки вокруг таблицы:

"border"-рамка со всех сторон

"void"- внешняя рамка не отображается

"above"-отображается верхняя рамка

"below"-отображается нижняя рамка

"hsides"-отображаются верхняя и нижняя рамки

"lhs"-отображается левая рамка

"rhs"-отображается правая рамка

"vsides"-отображаются правая и левая рамки

"box"-отображается только внешняя рамка

rules=

Внешний вид разделительных линий ячеек таблицы:

"none"-разделительных линий нет

"rows"-отображаются горизонтальные линии

"cols"-отображаются вертикальные линии

"all"-отображаются все линии между строками и столбцами

cols=

Количество столбцов в таблице

height=

Высота таблицы в пикселах или в % от высоты окна

width=

Ширина таблицы в пикселах или в % от ширины окна

В Блокноте

В браузере

<p>Таблица 1:

<table border="1" bordercolor="blue" bgcolor="white">

<!--

... строки из предыдущего примера ...

-->

</table>

Таблица 1:

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3

<p>Таблица 2:

<table border="1" frame="vsides" rules="rows">

<!--

... строки из предыдущего примера ...

-->

</table>

Таблица 2:

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3

<p>Таблица 3:

<table border="1" cellspacing="0" cellpadding="0" width="100%">

<!--

... строки из предыдущего примера ...

-->

</table>

Таблица 3:

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3

<p>Таблица 4:

<table border="1" align="center" valign="middle">

<!--

... строки из предыдущего примера ...

-->

</table>

Таблица 4:

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3

<p>Таблица 5:

<table border="1" background="textura1.jpg" align="left" clear="right">

<!--

... строки из предыдущего примера ...

-->

</table>

<p>Пояснение к таблице

Таблица 5:

П

Ячейка 1-1

Ячейка 1-2

Ячейка 1-3

Ячейка 2-1

Ячейка 2-2

Ячейка 2-3

Ячейка 3-1

Ячейка 3-2

Ячейка 3-3
ояснение к таблице.

Тэг <tr> предназначен для создания строк таблицы. Изменяя его параметры, можно определить внешний вид строки:

Параметр

Описание (Значения)

align=

Определяет выравнивание текста в ячейках строки по горизонтали:

"left"-по левому краю

"center"-по центру

"right"-по правому краю

"justify"-по ширине

valign=

Определяет выравнивание текста в ячейках строки по вертикали:

"top"-по верхней границе

"middle"-по середине окна

"bottom"-по нижней границе

"baseline"-по линии текста

background=

Имя графического файла с фоновым изображением строки (формат GIF или JPG)

bgcolor=

Цвет фона для строки

bordercolor=

Цвет рамки в пределах строки*

В Блокноте

В браузере

<table width="200" height="200" border="1" bordercolor="black">

<tr align="left" valign="top" bordercolor="blue">

 <td>1-1</td>

 <td>1-2</td>

 <td>1-3</td>

</tr>

<tr align="center" valign="middle" bordercolor="red">

 <td>2-1</td>

 <td>2-2</td>

 <td>2-3</td>

</tr>

<tr align="right" valign="bottom" bordercolor="green">

 <td>3-1</td>

 <td>3-2</td>

 <td>3-3</td>

</tr>

</table>

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

При помощи тэга <td> определяются ячейки таблицы:

Параметр

Описание (Значения)

align=

Определяет выравнивание текста в ячейке по горизонтали:

"left"-по левому краю

"center"-по центру

"right"-по правому краю

"justify"-по ширине

valign=

Определяет выравнивание текста в ячейке по вертикали:

"top"-по верхней границе

"middle"-по середине окна

"bottom"-по нижней границе

"baseline"-по линии текста

background=

Имя графического файла с фоновым изображением ячейки (формат GIF или JPG)

bgcolor=

Цвет фона для ячейки

bordercolor=

Цвет рамки ячейки*

height=

Высота ячейки в пикселах или в % от высоты таблицы

width=

Ширина ячейки в пикселах или в % от ширины таблицы

В Блокноте

В браузере

<table width="200" height="200" border="1">

<tr>

 <td align="left" valign="top" bordercolor="blue">1-1</td>

 <td align="center" valign="middle" bordercolor="red">1-2</td>

 <td align="right" valign="bottom" bordercolor="green">1-3</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

1-1

1-2

1-3

1-1

1-2

1-3

1-1

1-2

1-3

<table width="200" height="200" border="1">

<tr>

 <td width="50%" height="50%">1-1</td>

 <td width="30%">1-2</td>

 <td>1-3</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

<table width="200" height="200" border="1" cellspacing="0">

<tr>

 <td bgcolor="black">&nbsp</td>

 <td bgcolor="white">&nbsp</td>

 <td bgcolor="black">&nbsp</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

<p>Чтобы сделать пустую ячейку - впиши в нее <tt>&nbsp</tt>

 

 

 

 

 

 

 

 

 

Чтобы сделать пустую ячейку - впиши в нее &nbsp

<table width="201" height="201" cellspacing="0" cellpadding="0" bgcolor="white">

<tr>

 <td background="cell2.gif">&nbsp</td>

 <td bgcolor="blue">&nbsp</td>

 <td bgcolor="blue">&nbsp</td>

</tr>

<tr>

 <td bgcolor="blue">&nbsp</td>

 <td background="cell1.gif">&nbsp</td>

 <td>&nbsp</td>

</tr>

<tr>

 <td>&nbsp</td>

 <td>&nbsp</td>

 <td>&nbsp</td>

</tr>

</table>

 

 

 

 

 

 

 

 

 

Обычно первая строка или первый столбец таблицы содержат заголовки. Вы можете оформить такие заголовки с помощью тэга <th>. Он имеет тот же набор параметров, что и тэг <td>:

В Блокноте

В браузере

<table border="1">

<tr bgcolor="white">

 <th>Столбец1</th>

 <th>Столбец2</th>

 <th>Столбец3</th>

</tr>

<tr>

 <td>1-1</td>

 <td>1-2</td>

 <td>1-3</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

Столбец1

Столбец2

Столбец3

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

<table border="1">

<tr>

 <th bgcolor="white">Строка1</th>

 <td>1-1</th>

 <td>1-2</th>

 <td>1-3</th>

</tr>

<!-- Остальные строки - аналогично -->

</table>

Строка1

1-1

1-2

1-3

Строка2

2-1

2-2

2-3

Строка3

3-1

3-2

3-3

С помощью тэга <caption> можно снабдить таблицу подписью. У этого тэга есть параметр align, имеющий два значения: "top" - подпись сверху таблицы и "bottom" - подпись снизу таблицы:

В Блокноте

В браузере

<table width="100%" border="1">

<caption align="top">Табл.1 Список параметров</caption>

<tr>

 <td>1-1</td>

 <td>1-2</td>

 <td>1-3</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

Табл.1 Список параметров

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

Создание сложных таблиц

В Web-документы можно вставлять не только простые прямоугольные таблицы, с равным числом ячеек в каждой строке, но и достаточно сложные. Например, можно объединять (группировать) соседние ячейки в спроках или столбцах. Так можно получить сложные заголовки. Чтобы произвести объединение ячеек, необходимо использовать следующие параметры тэга <td> (или <th>):

Параметр

Описание (Значения)

colspan=

Количество объединенных ячеек в столбце (снизу и сверху от данной)

rowspan=

Количество объединенных ячеек в строке (слева и справа от данной)

В Блокноте

В браузере

<table border="1" width="100%">

<caption>Таблица с общим заголовком для 2 столбцов</caption>

<tr>

 <th>Столбец 1</th>

 <th colspan="2">Столбец 2 и 3</th>

</tr>

<tr>

 <td>1-1</td>

 <td>1-21</td>

 <td>1-22</td>

</tr>

<!-- Остальные строки - аналогично -->

</table>

Таблица с общим заголовком для 2 столбцов

Столбец 1

Столбец 2 и 3

1-1

1-21

1-22

2-1

2-21

2-22

3-1

3-21

3-22

<table border="1" width="100%">

<caption>Таблица с общим заголовком для 2 строк</caption>

<tr>

 <th rowspan="2">Строки 1 и 2</th>

 <td>11-1</td>

 <td>11-2</td>

 <td>11-3</td>

</tr>

<tr>

 <td>12-1</td>

 <td>12-2</td>

 <td>12-3</td>

</tr>

<tr>

 <th>Строка 3</th>

 <td>2-1</td>

 <td>2-2</td>

 <td>2-3</td>

</tr>

</table>

Таблица с общим заголовком для 2 строк

Строки 1 и 2

11-1

11-2

11-3

12-1

12-2

12-3

Строка 3

22-1

22-2

22-3

<table border="1" width="100%">

<caption>Таблица с двойными заголовками</caption>

<tr>

 <th rowspan="2" colspan="2">&nbsp</th>

 <th colspan="6">&nbsp</th>

</tr>

<tr>

 <th colspan="2">&nbsp</th>

 <!-- пред. строку еще 2 раза -->

</tr>

<tr>

 <th rowspan="4">&nbsp</th>

 <th rowspan="2">&nbsp</th>

 <td>&nbsp</td>

 <!-- пред. строку еще 5 раз -->

</tr>

<tr>

 <td>&nbsp</td>

 <!-- пред. строку еще 5 раз -->

</tr>

 <!-- пред. 8 строк еще раз -->

</table>

Таблица с двойными заголовками

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности