8. Списки в html

Списки выделяются в HTML-страницы с помощью следующих тэгов:

<ol>….</ol> - упорядоченный (нумерованный) список,

<ul>…</ul> - ненумерованный список.

Элементы списка заключаются в рамки тега <li>..</li> . Простой список выглядит следующим образом:

<ol…>

<li>…</li>

<li>….</li>

</ol>

После открытия тэга списка можно указать название списка, размер и цвет шрифта.

Основным в описании списка является атрибут Type, который для ненумерованного списка может принимать одно из трёх значений:

Type=”disk” / “square” / “circle” - три типа стандартных маркеров для ненумерованного списка.

Нумерованные списки также характеризуются атрибутом type, который показывает тип нумерации. Нумерация может быть выполнена:

• арабскими цифрами (type=”1”)

• римскими цифрами (type=”I”, type=”i”),

• латинскими буквами (type=”a”, type=”A”).

Списки могут быть расширенными, т.е. многоуровненными (иерархическими).

Задание 3.

Создать две HTML-страницы. В одной из страниц привести статьи калькуляции в виде нумерованного списка. Во второй странице отразить классификацию статей затрат в виде расширенного списка.

9. Таблицы в html

Элемент HTML-страницы "таблица", состоит из строк и столбцов, но содержимым ячеек таблицы может быть различная информация: числа, текст, графические элементы, отдельные HTML-страницы.

Запись структуры таблицы осуществляется по строкам. После открытия тега <table> первым открывается тег строки <tr> и уже в его рамках описываются значения по столбцам при помощи тега <td>.

Например, следующая запись

<table>

<tr>

<td> первый </td>

первый	второй
третий	четвертый

<td>второй</td>

</tr>

<tr>

<td> третий </td>

<td> четвёртый </td>

</tr>

</table>

приведет к отображению такой таблицы:

Для объединения ячеек построчно используется тег rowspan=”число объединяемых строк”, для объединения по столбцам тег colspan=” число объединяемых столбцов”.

Например, следующая запись соответствует внешнему виду таблицы:

<table>

<tr>

<td colspan=”2”> …</td>

<td rowspan=”2”> …</td>

</tr>

<tr>

<td>…</td>

<td>…/<td>

</tr>

</table>

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

Ширина и высота таблицы задаются соответственно значениями следующих атрибутов Width=” ” , Height=” ”.

Рамка таблицы определяется атрибутом Border=”ширина”

Задание 4.

Создать HTML- страницу, содержащую приведенную ниже таблицу.

Таблица 1 - Анализ затрат

10. Гипертекстовые ссылки

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

Внутренние гиперссылки (переход внутри страницы):

<а href="#тег"> теги </а> - откуда

<а name="тег"> - куда (якорь)

Внешние гиперссылки (переход на другую страницу):

<а href="***.htm"> текст </а>

Предполагается, что HTML страница с именем ***.htm находится в том же разделе на диске, где и исходная страница. Такая ссылка называется относительной.

Относительная ссылка имеет следующие варианты:

- страница, на которую осуществляется переход, находится в подразделе текущего раздела:

<а href="dr/***.htm">

- страница, на которую осуществляется переход, находится в разделе, содержащем текущий раздел:

<а href="../списки.htm">

В абсолютной ссылке должно быть в указано: протокол, имя сервера и раздел на этом сервере с вложенной структурой, если требуется.