Рис. 3.14. Результат использования атрибутов alt, width и height

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

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

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

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

Листинг 3.2. Добавление таблицы под рисунками

МФУ для дома

alt="МФУ для дома фото" width="200" height="200">

height="200">

При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая из четырех ячеек. В каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).

Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек

Теперь мы предлагаем вам самостоятельное задание. Необходимо поместить первое изображение вместо надписи Ячейка 1, а второе – вместо надписи Ячейка 4. Если вы все сделаете правильно, то результат будет таким, как на рис. 3.16.

Рис. 3.16. Изображения в ячейках таблицы

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

Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.

Введение в CSS

Ранее мы добавляли атрибуты к тегу img. Как вы понимаете, другие теги тоже могут содержать атрибуты, но иногда нет необходимости добавлять их в код HTML-страницы, о чем мы сейчас и расскажем.

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

:

ФУ для дома

, после чего заголовок будет размещен по центру страницы и окрасится в зеленый цвет (рис. 3.17).

Вперед

1 ... 26 27 28 29 30 31 32 33 ... 98

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4