Задание 3. Задание цвета фона и текста

Лабораторные работы № 13-14.

Язык HTML. Построение таблицы. Атрибуты команды < TABLE>.

Задание

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

Характеристики гостиниц

Выполнение

I. Подготовьте бланк для HTML-документа. Для этого следует:

выполнить команду Пуск ® Программы ® Стандартные ® Блокнот ® Файл® Сохранить как…;

в окне Сохранение документа открыть папку своей группы. В поле Имя ввести Таблица Фамилия.html (вместо Фамилия, естественно, должна стоять Ваша фамилия), нажать кнопку Сохранить.

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

II. Введите в созданный документ стандартные теги:

< HTML>

< HEAD>

< TITLE> Таблица ФИО < /TITLE>

< /HEAD>

< BODY>

< /BODY>

< /HTML>

Вместо ФИО в контейнере < TITLE>, естественно, должна стоять Ваша фамилия. Теги набираются в английском регистре. Для ускорения и облегчения набора желательно активно пользоваться командами копирования и переноса информации. Подробнее об этих тегах см. п. 2.4.

III. Внутри контейнера < BODY> вставьте скелетные теги таблицы (см. п. 2.8):

< TABLE>

< CAPTION>

Характеристики гостиниц

< /CAPTION>

< TR>

< /TR>

< TR>

< /TR>

……..

< TR>

< /TR>

< /TABLE>

Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.

Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта (см. лабораторную работу № 1).

IV. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры < TH> … < /TH>. Окончательно контейнер первой строки выглядит так:

< TR>

< TH> Название < /TH> < TH> Адрес < /TH>
< TH> Тип номера < /TH> < TH> Цена за день < /TH>

< /TR>

V. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры < TD> … < /TD>. Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:

< TR>

< TD ROWSPAN=3> Центральная < /TD>
< TD ROWSPAN=3> Пр. Мира, д. 4< /TD>
< TD> Люкс одноместный < /TD> < TD> $150 < /TD>

< /TR>

VI. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры < TD> … < /TD>. Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:

< TR>

< TD> Люкс двухместный < /TD> < TD> $250 < /TD>

< /TR>

VII. Аналогично п. VI заполните контейнер четвертой строки. Сохраните документ и просмотрите его через Explorer. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться. Если нет – исправляйте ошибки.

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

ROWSPAN. Получаем для новых строк:

< TR>

< TD ROWSPAN=2> Спортивная < /TD>

< TD ROWSPAN=2> Бульвар Профсоюзов, д. 15 < /TD> < TD> одноместный < /TD> < TD> $50 < /TD>

< /TR>

< TR>

< TD> двухместный < /TD> < TD> $80 < /TD>

< /TR>

IX. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек:

< TR>

< TD > Вокзальная < /TD>

< TD> Привокзальная пл., д. 3 < /TD>

< TD> Четырехместный < /TD> < TD> $50 < /TD>

< /TR>

Сохраните документ и просмотрите его через Explorer.

X. Форматирование таблицы. Добавьте в тег < TABLE> атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов).

Посмотрите через Explorer, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через Explorer, за что отвечает этот атрибут. Подробнее см. п. 2.8 и Приложение.

XI. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров. Необходимые для этого сведения – в п. 2.8 и Приложении.

Лабораторная работа № 15.

Вставка элементов на экран. Установка гипертекстовых связей.

Подготовка простейшего гипертекстового документа средствами программы Блокнот

I. Основные тэги оформления текста документа и рисунков

1. На рабочем диске создать свою папку, а в ней – текстовый файл с наименованием first.htm

1.1. Запустить редактор Блокнот, ввести в него текст:

Приветствую Вас на моей первой Web-страничке.

1.2. Сохранить файл в созданной папке. При сохранении, в окне диалога " сохранить как…" в строке " Тип файла: " выбрать вариант " Все файлы (*.*)", а в строке " Имя файла" задать имя с расширением html или htm, например, first.htm.

1.3. Закрыть документ, найти его пиктограмму в окне Проводника.

1.4. Открыть файл непосредственно из окна Проводника. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

1.5. Сделать выводы о том, что HTML-документ – это всего лишь текст.

2. Ввести теги, определяющие структуру HTML-документа.

2.1. С помощью меню Браузера " Вид" – " В виде HTML" вызвать документ для его редактирования. Ввести приведенные ниже тэги, в разделе Заголовка (TITLE) указать свою фамилию.

< HTML>

< HEAD> < TITLE> Фамилия – первый< /TITLE>

< /HEAD>

< BODY>

Приветствую Вас на моей первой Web-страничке.

< /BODY>

< /HTML>

2.2. Сохранить документ под тем же именем, " Обновить" его отображение в Браузере. Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ.

3.1. Вызвать меню Браузера " Вид" – " Источник HTML" и добавить текст подписи, например:

Студент группы ХХ факультета YYY Имя Фамилия

Сохранить документ (не закрывать) и обновить его просмотр в Браузере.

3.2. Отредактировать документ так, чтобы подпись начиналась с новой строки, для этого использовать тэг < BR>. Просмотреть в Браузере новый вариант.

3.3. Добавить перед подписью горизонтальную линию.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в Браузере начинать с обновления загрузки документа с помощью кнопки " Обновить" на панели инструментов или нажатием клавишиF5.

4. Выполнить оформление текста стилем Заголовок.

4.1. Оформить первую строку документа стилем Заголовок-1 с помощью парного тэга < H1> …< /H1>.

4.2. Оформить строку с подписью стилем Заголовок-3 и выровнять по правому краю.

4.3. Изменить стиль оформления первой строки на Заголовок-2 с выравниванием по центру, а подпись – на Заголовок-4.

4.4. Просмотреть полученный документ в Браузере при различных размерах шрифта (меню " Вид").

5. Выполнить оформление абзацев.

5.1. После заголовка ввести текст монолога Гамлета (английский и русский варианты).

To be, or not to be, that is the question:

Whether 'tis nobler in the mind to suffer

The slings and arrows of outrageous fortune,

Or to take arms against a sea of troubles,

And by opposing, end them...

Быть иль не быть – вот в чем вопрос.

Что благороднее: сносить удары

Неистовой судьбы – иль против моря

Невзгод вооружиться, в бой вступить.

И все покончить разом...

5.2. Оформить каждый из вариантов монолога (5 строк) как один отдельный абзац с помощью тэга < P>. Выровнять английский текст по левому краю, а русский – по правому.

5.3. Скопировать русский вариант монолога и сформировать из него один абзац без разрыва строк:

Быть иль не быть – вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы – иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...

Оформить выравнивание абзаца – " по ширине".

6. Оформление абзацев с помощью парного тэга < PRE>.

6.1. Скопировать в конец документа английский вариант монолога, поместить его вовнутрь тэга PRE и оформить по приведенному образцу " лесенкой":

To be, or not to be, that is the question:

Whether 'tis nobler in the mind to suffer

The slings and arrows of outrageous fortune,

Or to take arms against a sea of troubles,

And by opposing, end them...

6.2. Сохранить документ first.htm, скопировать его на диске А: для дальнейшей работы.

7. Выполнить шрифтовое оформление документа.

7.1. Создать документ second.htm в Вашей папке на жестком диске. За основу документа взять файл first.htm, оставить в нем заголовок, английский вариант монолога и подпись. Заменить в тэге < TITLE> слово " первый" на " второй".

7.2. Оформить каждую строку текста монолога разным цветом.

7.3. 1-ю и 3-ю строки оформить полужирным шрифтом, 2-ю и 4-ю – курсивом, 5-ю – подчеркнутым.

8. Оформление списков.

8.1. Дополнить текст документа – ввести после заголовка еще три строки:

Я знаю как оформлять:

Заголовки,

Абзацы

8.2. Оформить две последних строки как список нумерованный.

8.3. Дополнить список своих знаний. Например, между пунктами " Заголовки" и " Абзацы" добавить пункт " Текст". Проанализировать, как изменилась нумерация элементов списка.

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

Я знаю как оформлять:

I. Шрифты

Размер

Цвет

Гарнитуру

II. Заголовки

От 1-го до 6-го уровня

III. Абзацы

Выравнивание

Разрыв строк внутри абзаца

Использовать предварительное форматирование

9. Вставить в текст рисунок.

9.1. Создать дополнительную папку Рисунки. Подготовить в редакторе Paint свой автопортрет, размером 3× 4 см (60× 80 точек). Сохранить файл в папке Рисунки4 раза в разных форматах (разного типа):

24-разрядный рисунок (*.bmp) – под именем pic_24.bmp,

16-цветный рисунок (*.bmp) – под именем pic_16.bmp,

Формат GIF (*.gif) – под именем pic_g.gif,

Формат JPEG (*.jpg, *.jpeg) – под именем pic_j.jpg.

Замечание. Если редактор Paint не поддерживает форматы GIF и JPEG, открыть файл в редакторе Photo Editor и сохранить в нужных форматах.

Сопоставить качество и размер рисунков. Оптимальный вариант разместить в рабочей папке под именем pic_1.gif (если Вы выбрали формат GIF).

9.2. Вставить рисунок в начало документа – перед заголовком поместить тэг: < IMG SRC=" pic1.gif" >

Просмотреть результат в Браузере.

9.3. Выровнять рисунок по левому краю (ввести в тэг рисунка атрибут выравнивания). Просмотреть результат обтекания в Браузере.

9.4. Дополнить тэг рисунка атрибутами, задающими размер рисунка, и альтернативный текст " Это мой автопортрет".

9.5. Сделать копию документа second.htm и рисунка на диске А:

10. Научиться оформлять фонHTML-документа.

10.1. Создать документt hird.htm, взяв за основу документ second.htm

10.1.1. Сохранить документ second.htm под именем third.htm. Отредактировать тэг < TITLE>, заменив слово " второй" на " третий". Отредактировать тэг < BODY>, введя в него атрибут цветового оформления фона BGCOLOR=

Задать значение атрибута в формате RGB (см. табл. основных цветов), подобрать цвет фона в светлых тонах.

10.2. Отредактировать документ first.htm так, чтобы фон в нем задавался фоновым рисунком. В качестве рисунка можно использовать файл pic1.gif или любой другой цветной рисунок небольшого размера (несколько пикселей).

11. Продемонстрировать созданные документы преподавателю. Сохранить копии всех документов на диске A: для дальнейшей работы.

II. Работа с таблицами, создание гиперссылок

1. Создать таблицу по приведенному образцу (рис. 7.1), сохранить документ под именем tabl_name.htm, где name – Ваше имя. Сверху над таблицей разместить заголовок Таблица № 1

Рис. 7.1. Образец таблицы № 1

При отображении таблицы в Браузере должны удовлетворяться следующие условия:

таблица должна располагаться по середине экрана и быть симметричной, правильной формы;

в центральной ячейке поместить символ *, остальные ячейки должны быть пустыми.

Примечание. Для отображения пустых ячеек в них нужно поместить символьный приметив пробела& nbsp.

2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица № 2 и модифицировать ее

2.1. В центральной ячейке разместить рисунок – ваш автопортрет.

2.2. " Раскрасить" все остальные ячейки в различные цвета.

2.3. Создать еще одну копию таблицы – Таблица №3 и отредактировать тэги таблицы так, чтобы она соответствовала приведенному образцу (рис. 7.2).

2.4. В верхнюю строку поместить заголовок

Автопортрет студента В.В.Иванова

Рис. 7.2. Образец таблицы № 3

Примечания.

Для объединения ячеек в тегах < TD> необходимо использовать параметры colspan= и rowspan=

Для отображения пустых ячеек в них нужно поместить символьный примитив пробела & nbsp.

Предъявить результат преподавателю.

3. Создать документ, структурированный с помощью таблицы.

3.1. Создать новый HTML-документ, сохранить его в той же папке, что и предыдущие три файла, задать ему имя index.htm.

3.2. Разместить в документе следующие элементы.

3.2.1. В начале документа поместить заголовок:

Отчет по лабораторной работе – Создание HTML-документов

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

4. Создать меню средствами таблицы.

4.1 Далее в документе index.htm поместить текст:

Мною созданы три документа!

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

4.3. Оформить таблицу. Таблица должна иметь рамку, " раскрасить" ячейки в светлые тона, выровнять таблицу по центру экрана.

4.4. Связать созданные документы с помощью гиперссылок.

4.4.1. За текстом в каждой ячейке закрепить гиперссылку на соответствующий документ.

4.4.2. В конце каждого документа поместить рисунок и закрепить за ним гиперссылку для возврата к файлу index.htm.

4.5. Создать гиперссылку на адрес электронной почты. В конце документа ввести фразу: Пишите мне. Закрепить за ней гиперссылку на свой адрес e-mail.

5. Сохранить все документы. Проверить переходы по гиперссылкам.

6. Оформить основной заголовок с помощью бегущей строки.

7. Продемонстрировать созданные документы преподавателю.

II. Создание меню с помощью карт-изображений

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

2. С помощью графического редактора Paint создать рисунок размером 10× 10 см или 200× 200 точек (пикселей), состоящий из трех фигур (рис. 7.3).

Рис. 7.3. Образец рисунка карты-изображения

3. Сохранить рисунок в файлах следующих форматов с соответствующими именами:

bmp – 24-разрядный fig_1_24.bmp,

bmp – 16-цветный fig_1_16.bmp,

jpg – под именем fig_13.jpg,

gif – под именем fig_14.gif.

Для сохранения файлов в форматах GIF и JPEG воспользоваться редактором Microsoft Photo Editor. Проанализировать, какой объем занимает каждый файл и какое при этом обеспечивается качество изображения. Выбрать для дальнейшей работы файл с наименьшим объемом и приемлемым качеством, переименовать его в fig_1.

4. Определить координаты активных зон для дальнейшего использования в карте-изображения. Для этого можно использовать графический редактор Microsoft Photo Editor.

4.1. Открыть файл fig_1 в редакторе Microsoft Photo Editor.

4.2. Уточнить координаты областей, последовательно выделяя предполагаемые активные зоны, прочитать в строке состояния координаты углов главной диагонали (рис. 7.3) и записать их для дальнейшего использования.

5. Создать HTML документ – map_1.htm, содержащий заголовок:

Психологические портреты

Укажите, какая фигура Вам больше всего нравится на рисунке.

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

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

6.1. Ввести тэги закладок перед заголовками – названиями фигур.

6.2. Ввести тэги определения карты.

6.3. Проверить работоспособность активных зон.

6.4. Обеспечить средства для возврата в начало документа.

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

7.1. Нарисовать рисунок (подготовить фотографию), с изображением нескольких персон, например, Ваша компания или Ваша семья (рис. 7.4). Размер рисунка не должен превышать 10× 10 см, объем файла – не более 15 кбайт. Дать название файлу company.jpg и сохранить в подготовленной папке.

Рис. 7.4. Образец рисунка для карты-изображения

7.2. Определить координаты областей – активных зон для гиперссылок с помощью редактора Microsoft Photo Editor.

7.3. Подготовить HTML-документы для описания каждой персоны. Разместить их в рабочей папке, дать названия persona_1.htm, persona_2.htm и persona_3.htm. В конце каждого документа обеспечить средство возврата в главный документ.

8. Подготовить главный документ my_company.htm, который должен содержать заголовок, краткий текст о представляемой компании, рисунок и подпись. Для создания эффекта обтекания рисунка рекомендуется использовать таблицу.

9. Убедиться в правильности переходов, предъявить результат преподавателю.

Контрольные вопросы

Что означает понятие HTML-документ?

Каковы преимущества этого вида документа?

Что означает понятие " тэг"?

Какие разновидности тэгов существуют?

Что входит в состав объектов управления тэгами?

Какова структура НТМL-документа?

Какой вид тэга используется для вставки гиперссылки?

Какой вид тэга используется для создания таблицы?

Какой вид тэга используется для вставки графического объекта?