Часть 1. Создание таблицы по образцу
Цель: научиться создавать простые таблицы.
Указания к выполнению
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <TITLE> укажите название странички «Задание № 5. Часть 1».
Создайте таблицу, как показано на следующем рисунке.
Образец выполнения задания
Текст в первой строке выровняйте по центру по горизонтали и по вертикали.
Текст во второй строке выделите жирным шрифтом.
Часть 2. Форматирование таблицы
Цель: научиться форматировать таблицы.
Указания к выполнению
Для выполнения этого задания воспользуйтесь результатами выполнения Задания 5, Часть 1.
В элементе <TITLE> укажите название странички «Задание № 5. Часть 2».
Сделайте фон таблицы зеленого цвета.
Задайте ширину бордюра таблицы, равным 6 пикселам.
Ширину таблицы сделайте равной ширине экрана.
Шрифт, которым написан текст внутри таблицы, сделайте белым.
Образец выполнения задания
Часть 3. Заполнение таблицы
Цель: научиться заполнять таблицы.
Указания к выполнению
Для выполнения этого задания воспользуйтесь результатами выполнения Задания 5, Часть 1.
В элементе <TITLE> укажите название странички «Задание № 5. Часть 3».
Ширину и высоту таблицы задайте в размере 100%.
В первую ячейку первой строки вставьте рисунок из файла gryzun.jpg.
Во второй ячейке второй строки напишите ваше любимое четверостишие.
Сделайте фон третьей ячейки второй строки красного цвета.
Образец выполнения задания
Часть 4. Самостоятельное проектирование и создание таблицы
Цель: научиться проектировать структуру таблицы.
Указания к выполнению
Составьте таблицу для расписания ваших занятий в университете на одну из недель. Пусть эта таблица состоит из восьми столбцов и девяти строк. Ширина таблицы – 100%.
В первом столбце укажите время начала и конца ваших занятий. Выравнивание данных в ячейках должно быть по левому краю.
В остальных столбцах укажите изучаемые предметы по дням недели.
Выравнивание дней недели – по центру ячейки и жирным шрифтом.
Выравнивание названий предметов в ячейках должно быть по левому краю.
У всех столбцов фон сделайте разным цветом.
Перед таблицей поместите заголовок «РАСПИСАНИЕ ЗАНЯТИЙ», выделив его тэгами <HI> и </hi>. Цвет заголовка – красный.
Между заголовком и таблицей поместите рисунок (Можно использовать Moskva_Kreml.jpg).
1.7.2. Разметка Web-страницы при помощи таблицы
Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них.
Пример разметки Web-страницы. Первый вариант
Первый вариант. Разметка страницы производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=100%). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта. При такой разметке страничка всегда будет занимать весь экран, независимо от того, какое разрешение экрана стоит у посетителя.
К недостаткам такой разметки можно отнести «плавучесть» содержимого страницы, т. е. при уменьшении разрешения экрана содержимое должно поместиться в более узкие рамки, следовательно текст «сползает» вниз. Чтобы этого не происходило, нужно выбрать фиксированный размер таблицы, тогда при любом разрешении экрана таблица будет выглядеть неизменной.
Пример разметки Web-страницы. Второй вариант
Второй вариант. Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800x600 пикселов, будет видеть страничку шириной практически во весь экран, а посетитель, у которого разрешение монитора равно 1024x768 и выше, будет видеть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее.
В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка – непосредственно под содержание сайта.
Пример разметки Web-страницы. Третий вариант
Третий вариант. Если необходимо разместить внутри текста странички какие-либо иллюстрации, фотографии и пр., то в этом случае также используются таблицы. В приведенном ниже примере во вторую строку вставлена таблица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки – название страницы. Во все ячейки второй строки введен текст.
Итоговое задание
«Создание Web-сайта на заданную тему в текстовом редакторе Блокнот»
Задание: организация малых городов России проводит конкурс на лучший Web-сайт на темы «Мой любимый город», «Мы из нашего города», «Добро пожаловать в наш город» и т. п.. Необходимо создать сайт на одну из предложенных тем, состоящий не менее чем из пяти страниц.
Обязательные элементы:
Графические элементы оформления;
Гиперссылки на другие аналогичные ресурсы;
Гиперссылка на почтовый адрес автора.
Оцениваются:
Владение основными элементами языка HTML;
Гармоничность цветовой гаммы Web-сайта;
Содержание (контент) Web-сайта;
Продуманность структуры Web-сайта.