Нумерованный список
Для нумерованного списка вместо тега 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"> </td>
<td> </td>
<td> </td>
</tr>
<tr height="60%">
<td width="22%" > </td>
<td width="58%" bgcolor="green"> </td>
<td width="20%" > </td>
</tr>
<tr height="20%">
<td bgcolor="red"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
В результате должно получиться следующее:
Здесь я использовал незнакомый вам атрибут colspan тега td, который объединяет ячейки по горизонтали. Также есть атрибут rowspan, который объединяет ячейки по вертикали.
Вот и пришло время для заключительного урока HTML.
Заключение по HTML
Ну вот и подошло к концу наше обучение HTML. В заключение я хотел бы сказать, что в этом учебнике я старался как можно лучше объяснить вам основы языка. Кто уже изучал HTML, могут сказать мне, что я ничего не написал о фреймах и т.п. Но в силу времени и последующего развития веб-строительства я посчитал, что использование фреймов на странице сайта давно утратило актуальность. А говорить вам о том что никто практически не использует на сегодняшней день, я считаю бессмысленной тратой времени.
Прочитав данный учебник, надеюсь, вы сможете использовать все-то, о чем я писал. Не бойтесь экспериментировать. Некоторые моменты, которые я описал, считаются устаревшими и требуют использования стилей или CSS. Поэтому чтобы делать свои сайты на современном уровне вам рано или поздно придётся изучать CSS(каскадные таблицы стилей).
Дата добавления: 2015-11-18; просмотров: 667;