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

Для нумерованного списка вместо тега ul используется тег ol. По умолчанию используется список с арабскими цифрами. Также как и в маркированном списке существует атрибут type, который задаёт стиль списка со следующими значениями:

"A" – большие заглавные буквы (A, B, C ...)

"a" – малые буквы (a, b, c ...)

"I"– большие числа римского алфавита (I, II, III ...)

"i" – малые числа римского алфавита (i, ii, iii ...)

"1"– простые числа арабского алфавита (1, 2, 3 ...)

Также с помощью атрибута start, можно задать значение цифры с которой будет начинаться список. Ну и как всегда в качестве небольшого примера рассмотрим вот такой список:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<title>Нумерация в списках</title>

</head>

<body>

<p><strong>Нумерация с римскими цифрами</strong></p>

<ol type="I" start="7">

<li>один</li>

<li>семь</li>

<li>десять</li>

</ol><br>

<p><strong>Просто нумерованный список</strong></p>

<ol>

<li>Первый</li>

<li>Второй</li>

<li>Третий</li>

</ol>

</body>

</html>

 

А вот что вы должны получить в итоге:

 

 

Список определений

Кто-то говорит, что список определений уже изжил себя, но для создания словаря или какого-нибудь справочника он очень даже хорошо подходит. Список состоит из двух элементов входящих в контейнер тега dl. Первый элемент определяет название термина - элемент dt, а во второй элемент вмещается самоопределение - элемент dd. Чтобы вы лучше закрепили данный материал, предлагаю вам посмотреть вот такой вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<title>Список определений</title>

</head>

<body>

<dl>

<dt>Первый термин</dt>

<dd>Определение первого термина пишется заключается

здесь.</dd>

<dt>Второй термин</dt>

<dd>А этот термин имеет другое определение

нежели первый термин, но как и первый термин он

заключается в тег <b>dd</b></dd>

</dl>

</body>

</html>

 

Вот приблизительно так можно использовать списки. Причем в пункты списка вы можете вложить ссылки, изображения и т.п. Надеюсь данный урок вам понравился, а следующий думаю вам понравиться ещё больше, ведь мы начнем говорить с вами о верстке страницы сайта с помощью таблиц.

 

Таблицы в HTML

Таблицы в HTML нашли огромное применение, благодаря таблицам можно сверстать страницу практически любого уровня сложности, но применение таблиц для верстки имеют свои минусы. Я также использовал раньше использовал табличную верстку, но со временем перешел на блочную. Вообще в интернете вы можете найти кучу споров о том какую верстку использовать, но решать вам. Ну ладно хватит воды, пора переходить к делу.

Для создания таблиц в HTML используется парный тег table. Для создания строк в таблице служит тег tr, а для создания столбцов – td. Цвет, размер, выравнивание таблицы и её содержимого задается с помощью следующих атрибутов:

align – задает выравнивание таблицы по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.
valign – вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.
border – Задает внешнюю рамку таблицы. То есть, при использовании нулевого значения таблица визуально не будет видна посетителям сайта.
cellpadding – задает расстояние между границей каждой отдельно взятой ячейки и ее содержимым.
cellspacing – задает расстояние между границами близлежащих ячеек.
width – ширина таблицы. Может быть заданна как в абсолютном значении (пиксели:px), так и в относительном (проценты:%).
height –задает значение высоты таблицы или ячейки.
bgcolor – задает цвет фона таблицы или ячейки.
background – устанавливает рисунок в качестве фона.

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

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<title>Использование таблиц в HTML</title>

</head>

<body>

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

<tr height="20%">

<td colspan="2">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr height="60%">

<td width="22%" >&nbsp;</td>

<td width="58%" bgcolor="green">&nbsp;</td>

<td width="20%" >&nbsp;</td>

</tr>

<tr height="20%">

<td bgcolor="red">&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>

 

В результате должно получиться следующее:

 

 

Здесь я использовал незнакомый вам атрибут colspan тега td, который объединяет ячейки по горизонтали. Также есть атрибут rowspan, который объединяет ячейки по вертикали.

Вот и пришло время для заключительного урока HTML.

 

Заключение по HTML

Ну вот и подошло к концу наше обучение HTML. В заключение я хотел бы сказать, что в этом учебнике я старался как можно лучше объяснить вам основы языка. Кто уже изучал HTML, могут сказать мне, что я ничего не написал о фреймах и т.п. Но в силу времени и последующего развития веб-строительства я посчитал, что использование фреймов на странице сайта давно утратило актуальность. А говорить вам о том что никто практически не использует на сегодняшней день, я считаю бессмысленной тратой времени.

Прочитав данный учебник, надеюсь, вы сможете использовать все-то, о чем я писал. Не бойтесь экспериментировать. Некоторые моменты, которые я описал, считаются устаревшими и требуют использования стилей или CSS. Поэтому чтобы делать свои сайты на современном уровне вам рано или поздно придётся изучать CSS(каскадные таблицы стилей).

 








Дата добавления: 2015-11-18; просмотров: 663;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.013 сек.