Урок 21. Списки и таблицы на страницах сайта

Списки

Список — форма представления объектов в виде перечисления элементов. Форматирование каждого элемента списка — одинаковое.
Объектами списка могут быть тестовые абзацы, картинки и другие списки
В HTML список оформляются как контейнер (парный тег), включающий в себя по одному тегу для каждого элемента списка

Таблицы

Таблица  - форма представления информации в виде, удобном для анализа. Таблица состоит из строк, которые разделены на ячейки.  Внешний контур таблицы и ее частей  — прямоугольный.
Язык  HTML позволяет  управлять видом  таблицы в целом, а также каждой строки, ячейки.
В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей окна браузера, выравнивания элементов в окне, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.
Разметка таблиц
Парный тег: <table>  создает объект Таблица. Внутрь него помещаются строки – парный тег <tr>, а внутрь строки помещается нужное количество ячеек – парный тег <td>. В прямоугольной таблице число ячеек в каждой строке одинаковое. Ячейки и строки можно объединять.

Практическая работа с сайтом

1. В категории сайта добавить 2015-10
2. Оформить в виде списка:
   
   
   • Перечень профессий на странице Профессии
   • Перечень ссылок на веб-страницы на странице Ссылки
   
   
3. Оформить в виде таблиц
   
   
   • Главная страница - таблица 2 х 1 (Изображение + текст). Ширина - 100%.
     Сегодня ввести текст и подпись фотографии
   • ВУЗы, где этому научат - таблица 2 х N строк , где в первой ячейке  название ВУЗа, которое является ссылкой, а во второй ячейке - изображение ВУЗа.
     Ширина - 100%. Сегодня ввести текст и подпись под фотографиями.
     Таких строк - N штук
   • Портфолио - таблица 2 х M строк , где в каждой ячейке  будет находиться изображение, сделанное автором сайта во время изучения GIMP, которое является ссылкой, Ширина - 100%. Сегодня ввести текст и подпись под фотографиями. Таких строк - M штук. Про ссылки поговорим позднее
4. Подобрать иллюстрации к ВУЗам. Найти в сети фотографии соответствующих ВУЗов