Неупорядоченные списки
Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, "пунктов", каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам "пункта". Для тега <li> закрывающий тег </li>необязателен.
Вместе данные теги приобретают следующий вид:
<ul>
<li> Пункт первый..
<li> Пункт второй..
<li> Пункт третий..
</ul>
Пример неупорядоченного списка:
<html>
<head>
<title>неупорядоченный список</title>
</head>
<body>
Купить и доставить домой:
<ul>
<li> 2 кг. клубней картофеля
<li> 1 булку ржаного чёрного хлеба
<li> пачку макарон "спагетти" (длинные не менее 200мм. тонкие)
<li> 1 кг. шлифованного риса (сложно объяснить.. спросишь..)
<li> 1 дес. куриных яиц.
<li> 1 пачку 500г. Натрия двууглекислого (Сода)
</ul>
Смотри ничего не перепутай.. целую..
</body>
</html>
Смотреть пример
Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.
Может иметь одно и трёх значений:
- disk- кружок, диск (по умолчанию)
- circle - полый круг
- square - квадрат
Пример:
<html>
<head>
<title>стили неупорядоченного списка</title>
</head>
<body>
В этом списке каждый элемент имеет свой стиль:
<ul>
<li type="disk"> кружок, диск (по умолчанию)
<li type="circle"> полый круг
<li type="square"> квадрат
</ul>
А здесь стиль задан всему списку
<ul type="circle">
<li> Пункт 1
<li> Пункт 2
<li> Пункт 3
</ul>
</body>
</html>
Смотреть пример
Упорядоченные списки
Упорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке элемент списка присуждается тегом <li>.
Построение кода полностью схоже с неупорядоченным списком поэтому сразу пример:
<html>
<head>
<title>упорядоченный список</title>
</head>
<body>
Купить товары в следующем порядке:
<ol>
<li> Водка
<li> Пиво
<li> Сырок (необязательно)
</ol>
Жду!!!
</body>
</html>
Смотреть пример
А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
- А - Заглавные буквы
- а - Строчные буквы
- I - Заглавные римские цифры
- i - Строчные римские цифры
- 1 - Арабские цифры (по умолчанию)
Вот пример их применения:
<html>
<head>
<title>Стили упорядоченного список</title>
</head>
<body>
Арабские цифры
<ol type="1">
<li>Во-первых
<li>Во-вторых
</ol>
Строчные буквы
<ol type="a">
<li>Во-первых
<li>Во-вторых
</ol>
Заглавные буквы
<ol type="A">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
</ol>
Строчные римские цифры
<ol type="i">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
Заглавные римские цифры
<ol type="I">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
</body>
</html>
Смотреть пример
В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список.
Пример:
<html>
<head>
<title>Начало упорядоченного списка</title>
</head>
<body>
<ol type="1" start="24">
<li>Сразу переходим к двадцать четвёртому пункту!!
<li>Идём дальше
<li>И дальше
</ol>
Аналогично можно "стартовать" при любом стиле упорядоченного списка
<ol type="I" start="8">
<li>Сразу переходим к восьмому пункту..
<li>Идём дальше
<li>И дальше
</ol>
</body>
</html>
Смотреть пример
Списки определений
Со списком определений дело обстоит немного иначе нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом<dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>.
Всё вместе пишется по следующей схеме:
<dl>
<dt>
<dd>
</dl>
Пример:
<html>
<head>
<title>Список определений</title>
</head>
<body>
<dl>
<dt> Слово коса может иметь следующие определения:
<dd> сельскохозяйственный инструмент
<dd> хитрая девичья причёска
<dd> отмель реки
<dt> Слово ключ тоже имеет несколько значений:
<dd> гаечный
<dd> источник, родник
</dl>
</body>
</html>
Смотреть пример
Собственно вот и вся премудрость..
Полезные советы:
Психология посетителя страницы.
· Не могу, не согласится с тем утверждением, что посетители страницы чаще просматривают документы, нежели чем вдумчиво читают их.. По-крайней мере так происходит практически всегда при первом визите посетителя на страничку. Первое на что обращает внимание пользователь просматривая какой либо документ это: заголовки в тексте, выделенные фрагменты текста, и списки. Умелое и ненавязчивое размещение таковых элементов залог того что посетитель окунётся в чтение Вашего документа более глубоко.
· Что касается списков.. следует понимать что: Маркированные перечни <ul> используются тогда, когда порядок следования пунктов не важен.. и делаются они для того чтобы изложенная информация воспринималась легче. А нумерованные списки <ol> наоборот, применяются тогда, когда важен именно порядок следования пунктов, например - когда список является изложением последовательности каких либо действий.
Глава 10
Meta теги
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
<html> - начало документа
<head> - начало головы
</head> - закрытие головы
<body> - начало тела
</body> - закрытие тела
</html> - конец документа
Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег<meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
<meta> тег имеет следующие атрибуты:
- http-equiv - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name - информационное имя. (применяется в паре с атрибутом content)
- content - информационное содержание, связанное с мета именем (name)
Теперь на примерах будем вникать в суть дела.
Дата добавления: 2015-11-06; просмотров: 650;