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

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

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

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

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

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

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

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

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

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

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

Уроки html'а. Урок # 7.

Таблицы

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

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

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

Как построить таблицу

Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги <table> и </table> обрамляют таблицу целиком, а ряд других тегов определяет, каким образом будет выводиться информация. В следующей таблице я приведу полное описание всех тегов таблиц.

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

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

Первый шаг - ввод инициализационного тега таблицы:

Чтобы ячейки таблицы были разделены тонкими линиями, добавим тег border. Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не будет. Теперь начнем создавать ячейки, одну за другой. Сначала зададим строку:

После этого зададим ячейки. Их у нас 5, соответственно 5 открытий и закрытий тегов <td> и </td>

В итоге мы получим это:

Не очень-то и смотрится без центрирования таблицы. Давайте исправимся?

В итоге мы получим это:

Теперь таблица по-середине, но было-бы лучше если-бы были и другие строки, а верхняя, в качестве озаглавляющей, была выделена тегами <th> и </th> (чуть более жирнее):

В итоге мы получим это:

В принципе все, основные команды управления таблицами вы уже знаете.

Расширенные возможности форматирования таблиц

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

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