Материал: 181484

<li>Пункт 2</li> <li>Пункт 3</li>

</ol>

Списки HTML представляют собой структуры, допускающие вложение друг в друга:

<ul>

<h3>Пример вложенных списков</h3> <li>Пункт 1</li>

<ol>

<li>Пункт 1.1</li>

<li>Пункт 1.2</li>

</ol>

<li>Пункт 2</li> <ol type="i">

<li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li>

</ol> <li>Пункт 3</li> <ol type="I">

<li>Пункт 3.1</li>

</ol>

</ul>

Списки определений можно использовать в случае необходимости создания некого подобия словаря: когда имеются определяемое понятие и его определение. Они используются при размещении на вэб-страницах всевозможных глоссариев.

Список определений задается с помощью тега <dl>. Определяемое понятие заключается в тег <dt>, а его определение – в тег <dd>:

<dl>

<h3>Список определений</h3> <dt>Понятие 1</dt>

<dd>Определение понятия 1</dd> <dt>Понятие 2</dt>

<dd>Определение понятия 2</dd>

</dl>

Таблицы

Таблицы являются одной из основных структур, используемых для упорядочения информации в HTML-документах. Кроме того, таблицы часто используются для организации структуры страницы и, несмотря на имеющийся тег <div>, они до сих пор часто применяются многими вэб-дизайнерами для этих целей. Рассмотрим примеры таблиц, созданных средствами HTML.

Пример простой таблицы:

<table border="3" cellpadding="7" cellspacing="3" height="80" width="50%" >

<caption>Пример простой таблицы</caption>

<tr align="center"> <td>1.1</td>

8

<td>1.2</td>

<td>1.3</td>

</tr>

<tr align="center">

<td align="center">2.1</td> <td align="right">2.2</td> <td>2.3</td>

</tr>

</table>

HTML допускает вложение одних таблиц в другие:

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

Таблица-контейнер

</caption>

<tr>

<td colspan="2" rowspan="4">

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

<caption>Вложенная таблица</caption>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td colspan="2" rowspan="3"> <table width="100%" border="1"

cellspacing="0" cellpadding="0">

<caption>Таблица, вложенная во

вложенную</caption>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</td>

</tr>

<tr>

<td> </td>

9

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

Ссылки

Для связывания страниц гипертекста используется механизм ссылок, которые в HTML реализуются с помощью тега <a>. Адрес страницы, на которую должен осуществляться переход, задается с помощью специального атрибута href. При этом могут использоваться как абсолютные, так и относительные адреса, когда путь отсчитывается от каталога, в котором расположена текущая страница:

<a href="http://server.com/doc3.htm">Ссылка на документ с абсолют-

ным адресом http://server.com/doc3.htm</a>

<a href="doc1.htm">Сылка на документ с относительным адресом doc1.htm</a>

<a href="mailto:sss@mail.ru">Ссылка на адрес электронной почты sss@mail.ru</a>

10

Для открытия страницы, на которую указывает ссылка, в новом окне, нужно атрибуту тега <a> присвоить значение _blank:

<a href="page2.htm" target="_blank">Ссылка на страницу 2 </a>

Ссылка может указывать не только на вэб-страницу, но и на конкретную точку на странице, для чего используется механизм якорей, который представляет собой тег ссылки, не содержащий текста:

<a href="#Пункт 1.1">Ссылка на пункт 1.1</a>

Якорь: <a name="Пункт 1.1"></a><li>Пункт 1.1</li>

<a href="#Пункт 2">Ссылка на пункт 2</a>

Якорь: <a name="Пункт 2"></a><li>Пункт 2</li>

Если якорь расположен не на текущей странице, как в предыдущем примере, то в атрибуте href следует сначала указать адрес требуемой страницы, а затем после знака # имя якоря:

<a href="doc2.htm#Пункт3Документа1">Ссылка на Пункт 3 Документа 1</a>

Якорь: <a name="Пункт3Документа1"></a><li>Пункт 3</li>

Рисунки в роли ссылок

В роли ссылок могут выступать рисунки, которые можно использовать, например, в качестве кнопок, для чего тег <img>, содержащий рисунок

<img src="fig1.gif" width="153" height="153" border="0">

необходимо «обернуть» тегом ссылок <a>:

<a href="tabledesign.htm"><img src="fig1.gif" alt="Ссылка на страницу tabledesign.htm" width="153" height="153" border="0"></a>

Атрибут alt тега <img> содержит текст, который будет выводиться в качестве подсказки, когда пользователь наведет указатель на рисунок.

ИНДИВИДУАЛЬНЫЕ ЗАДАНИЯ

Создать две вэб-страницы: page1.htm и page2.htm. Первая страница (page1.htm) должна содержать:

1.Заголовок первого уровня (<h1>)

2.Два абзаца (<p>)

3.Список (табл. 1)

4.Таблица (табл. 2)

5.Вложенные таблицы (табл. 3 – 4)

6.Обычная ссылка на страницу page2.htm (табл. 5)

7.Ссылка на страницу page2.htm, реализованная с помощью рисунка

(табл. 6)

Вариант определяется последней цифрой номера зачетной книжки.

11