Файл: Уроки HTML.docx

Напоминаю, я привел только часть из всех существующих.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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