- •1. Общие положения
- •2. Оформление контрольной работы и ее рецензирование
- •3. Выбор студентом своего индивидуального номера
- •4. Задания к контрольной работе
- •4.1. Задание №1
- •4.2. Задание №2
- •4.3. Задание №3
- •4.3.1. Пример выполнения задания №3
- •4.3.2. Указания по выполнению задания №3
- •4.3.2.1. Запись html-документа в контрольной работе
- •4.3.2.2. Создание файла с html-документом
- •4.4. Задание №4
- •4.4.1. Пример выполнения задания №4
- •4.4.2. Указания по выполнению задания №4
- •4.4.2.1. Запись html-документа в контрольной работе
- •4.4.2.2. Создание файла с html-документом
- •4.5. Задание №5
- •4.5.1. Пример выполнения задания №5
- •4.5.2. Указания по выполнению задания №5
- •4.5.2.1. Запись html-документа в контрольной работе
- •4.5.2.2. Создание файла с html-документом
- •Библиографический список
4.3. Задание №3
Третье задание состоит в разработке первого HTML-документа. Первый HTML-документ предназначен для размещения на сайте в качестве первой страницы (имеющей обычно имя index.html, default.html или home.html). На странице должны располагаться следующие элементы (рис.1): 1)название фирмы, 2)логотип фирмы, 3)обращение к посетителю страницы, 4)адрес фирмы, 5)HTML-ссылки на две другие страницы сайта, разрабатываемые при выполнении заданий № 4 и 5.
HTML-документ, который формирует изображение, представленное на рис.1, рассмотрен в пункте 4.3.1. Методические указания по выполнению задания № 3 даны в пункте 4.3.2.
4.3.1. Пример выполнения задания №3
Чтобы получить в окне программы просмотра изображение, представленное на рис. 1, нужно разработать соответствующий HTML-документ. HTML-документы создаются с помощью программы Блокнот. В окне программы Блокнот первый HTML-документ выглядит следующим образом.
<HTML> <HEAD> <TITLE> index.html </TITLE> </HEAD>
<BODY BGCOLOR=#F00000 TEXT=#000000> <center><FONT size=4>Торговый дом
<img src=50.gif> "Мерани"</FONT><BR> <b><i><font size=6>
ПРЕДЛАГАЕМ ВАМ ШИРОКИЙ ВЫБОР<BR> ВЫСОКОКАЧЕСТВЕННЫХ ТОВАРОВ <BR> ОТЕЧЕСТВЕННЫХ И ЗАРУБЕЖНЫХ ФИРМ </b></I></font>
<FONT size=5><b><BR> Наш адрес: 194021, Санкт-Петербург, Новороссийская ул., 50. </b></center> С нашими товарами Вы можете ознакомиться на странице:
<a href=shop.htm>магазин</a><BR>
Посетите наш ресторан, его меню на следующей странице:
<a href=rest.html>меню</a> </font>
</BODY> </HTML>
Заголовок документа содержит его название index.html, которое в данном случае соответствует имени файла, хранящего первую страницу сайта. Назначение тегов этого HTML-документа следует изучить по [9].
4.3.2. Указания по выполнению задания №3
HTML-документ, создаваемый при выполнении задания № 3, сначала записывается студентом в контрольную работу. Затем в ходе практических занятий в компьютерных классах института студент записывает этот документ в виде файла в свою рабочую папку. Рассмотрим оба этапа создания документа студентом.
4.3.2.1. Запись html-документа в контрольной работе
Рассмотрим каждый элемент, который должен располагаться на странице.
1. Название фирмы. В названии фирмы студент использует свою фамилию или имя, например: “Одежда для женщин - Елена”.
2. Логотип фирмы. На рис. 1 логотипом служит изображение лошади, формируемое тегом: <img src=50.gif>. В контрольной работе студент записывает в этом теге вместо числа 50 свой индивидуальный номер, определенный по таблице 1. Например, Иванова Елена записывает: <img src=16.gif>.
3. Обращение к посетителю страницы. Обращение к посетителю страницы следует выбрать по собственному вкусу.
4. Адрес фирмы. В качестве адреса фирмы нужно записать свой домашний адрес.
5. HTML-ссылки на две другие страницы сайта, разрабатываемые при выполнении заданий № 4 и 5. У всех студентов эти ссылки должны остаться в неизменном виде:
<a href=shop.htm>магазин</a> и <a href=rest.html>меню</a>. То есть названия всех трех HTML-документов будут одинаковы у всех студентов: index.html, shop.htm, rest.html.
В теге <BODY BGCOLOR=#F00000 TEXT=#000000> атрибут BGCOLOR должен иметь значение не F00000, а другое - в соответствии с таблицей 3 и индивидуальным номером студента.
Таблица 3
Индивидуальные варианты выбора цвета фона HTML-документа
|
№ |
цвет |
№ |
цвет |
№ |
цвет |
№ |
цвет |
№ |
цвет |
№ |
цвет |
№ |
цвет |
|
1 |
FFFFF0 |
8 |
FFFF80 |
15 |
FFFB00 |
22 |
FFF400 |
29 |
FF7000 |
36 |
FF0000 |
43 |
F60000 |
|
2 |
FFFFE0 |
9 |
FFFF60 |
16 |
FFFA00 |
23 |
FFF200 |
30 |
FF6000 |
37 |
FC0000 |
44 |
F50000 |
|
3 |
FFFFD0 |
10 |
FFFF40 |
17 |
FFF900 |
24 |
FFF000 |
31 |
FF5000 |
38 |
FB0000 |
45 |
F40000 |
|
4 |
FFFFC0 |
11 |
FFFF20 |
18 |
FFF800 |
25 |
FFB000 |
32 |
FF4000 |
39 |
FA0000 |
46 |
F30000 |
|
5 |
FFFFB0 |
12 |
FFFF00 |
19 |
FFF700 |
26 |
FFA000 |
33 |
FF3000 |
40 |
F90000 |
47 |
F20000 |
|
6 |
FFFFA0 |
13 |
FFFD00 |
20 |
FFF600 |
27 |
FF9000 |
34 |
FF2000 |
41 |
F80000 |
48 |
F10000 |
|
7 |
FFFF90 |
14 |
FFFC00 |
21 |
FFF500 |
28 |
FF8000 |
35 |
FF1000 |
42 |
F70000 |
49 |
E00000 |