web-nlaneta - Уроки HTML'а. Урок # 6.

Списки и таблицы

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

Что такое списки и таблицы

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

При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для перечисления ваших интересов или для организации ссылок.

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

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

Как списки помогают организовать нам информацию

Давайте рассмотрим этот абзац.

Несмотря на то что я учусь, у меня остается довольно много свободного времени. У меня есть целый ряд интересов. Я работаю с програмным обеспечением компании Microsoft. Кроме использования п/о компании Microsoft я использую программу Far Manager для обработки HTML-данных. Одно из моих любимых занятий - бродить по интернету, выискивая полезные ресурсы. Еще мне нравиться слушать музыку группы Prodigy и песни исландской певицы Björk.

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

Мои интересы:
<ul>
<li> Програмное обеспечение от Microsoft и Far Manager
<li> Обозрение WWW
<li> Слушаю Prodigy и Björk
</ul>

Вот что мы получим в результате:

Мои интересы:

Програмное обеспечение от Microsoft и Far Manager
Обозрение WWW
Слушаю Prodigy и Bjork

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

Как создать список на вашей странице

Теперь вы знаете, когда вы можете (или должны) применять списки. Давайте рассмотрим различные типы списков.

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

Создать список довольно легко. Сначала введите теги открытия и закрытия списка:

Затем перед текстом каждого пунтка списка введите <li>:

<ul>
<li> первая строка
<li> вторая строка
<li> третья строка
</ul>

И теперь, при желании, вы можете озоглавить ваш список тегами <lh> и </lh>:

<ul>
<lh>Заголовок</lh>
<li> первая строка
<li> вторая строка
<li> третья строка
</ul>

А теперь давайте посмотрим последствия приведенного чуть выше html-кода:

Заголовок

первая строка
вторая строка
третья строка

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

Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графического маркера (точки) автоматически помещаются последовательные номера или буквы. Вы вводите новый пункт в начале списка, а последующие пункты нумеруются сами, что очень удобно.

Нумерованный список задается следующей коммандой:

Теперь давайте посмотрим как нумерованные списки выглядят в готовом варианте:

<ul type="1">
<li> первая строка
<li> вторая строка
<li> третья строка
</ul>

Вот что мы получим в результате:

первая строка
вторая строка
третья строка

Нумерованные списки удобны для описания информации, которую вы хотите определенным образом ранжировать (например, как в хит-параде), или стадий процесса, которые должны следовать в определенном порядке. Помимо параметра type="1" существует еще ряд других параметров. Посмотрите на следующую таблицу:

<ul type="1"> <li> первая строка <li> вторая строка <li> третья строка </ul>	<ul type="A"> <li> первая строка <li> вторая строка <li> третья строка </ul>	<ul type="a"> <li> первая строка <li> вторая строка <li> третья строка </ul>	<ul type="I"> <li> первая строка <li> вторая строка <li> третья строка </ul>	<ul type="i"> <li> первая строка <li> вторая строка <li> третья строка </ul>
первая строка вторая строка третья строка	первая строка вторая строка третья строка	первая строка вторая строка третья строка	первая строка вторая строка третья строка	первая строка вторая строка третья строка

В этой таблице представлено 5 html-кодов и их результаты. По сути они одно и то же, но изменение параметра type="..." дает знать о себе раличными результатами. В первом случае мы видим простой нумерованный список с арабскими цифрами. Во втором - список маркированный заглавными латинскими буквами. В третьем - маркировка строчными латинскими буквами. В четвертом - маркировка большими римскими цифрами. В пятом - маленькие римские цифры.

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

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

Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег <li>. Тег <dt> задает отдельный элемент, то есть определяемый термин, а тег <dd> - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Взглянув один раз на список определений, вы поймете, откуда такое название.

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

Мои любимые музыкальные комманды:
<ul>
<dt>Prodigy
<dd>Группа родилась в 90х годах. С самого начала состояла из 4х участников: Lime, Keith, Maxim и Leeroy. В 2000 году Leeroy решил покинуть группу и начать сольную карьеру...
<dt>Bjork
<dd>Девушка начала заниматься музыкой в очень раннем возрасте. Она работала совместно с SugarCubes, но быстра ушла из комманды: сразу после выхода неудавшегося их 2го совместного альбома...
</ul>

Вот что мы получим в результате:

Мои любимые музыкальные комманды:

Prodigy

Группа родилась в 90х годах. С самого начала состояла из 4х участников: Lime, Keith, Maxim и Leeroy. В 2000 году Leeroy решил покинуть группу и начать сольную карьеру...

Bjork

Девушка начала заниматься музыкой в очень раннем возрасте. Она работала совместно с SugarCubes, но быстра ушла из комманды: сразу после выхода неудавшегося их 2го совместного альбома...

Списки в списках

Одно из замечательных свойств списков - это возможность вкладывать их друг в друга. Вложение списков в списки позволяет вам создать несколько уровней организации информации. Вы можете использовать несколько уровней списка на одной странице. Вы можете использовать несколько уровней списка на одной странице, что поможет упорядочить информацию. Главное не перетрудиться ;).

Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега </ul>. Вкладывать друг в друга можно даже типы списков (простой маркированный, нумерованный или список определений). Давайте посмотрим пример списка в списке:

Мои интересы:
<ul>
<li>Любимое п/о

<ul>

<li>Microsoft

<li>Far Manager

</ul>
<li>Любимые музыкальные исполнители

<ul>

<li>Prodigy

<li>Björk

</ul>
</ul>

Вот что мы получим в результате:

Мои интересы:

Любимое п/о
- Microsoft
- Far Manager
Любимые музыкальные исполнители
- Prodigy
- Bjork

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

Веб-планета

Уроки HTML'а. Урок # 6.