...
атрибут align="left|right|center|justify" Элемент нового абзаца....
Логические стили
модификации текста.
15
Вариант 1
Дизайн упаковки
(заголовок Н1, выравнивание по центру)
Современные технологии дизайна упаковки
(заголовок Н2, выравнивание по правому краю)
Элемент абзаца один из самых полезных. Он допускает исполь-
зование только открывающего тега, так как открывающий тег
следующего абзаца <Р> обозначает не только начало следующе-
го абзаца, но и конец предыдущего.
(выравнивание абзаца по левому краю, полужирный шрифт)
Текст этого абзаца выравнивается по центру
с помощью атрибута align
(переход на новую строку с помощью элемента
, выравнивание абзаца по цен-
тру, курсив)
(горизонтальная линия с помощью тега
, без тени, толщина 10, цвет красный)
Голограмма на саморазрушающей основе состоит из прозрачного
слоя (пленка), 1-гослоя клея, алюминиевого слоя,
2-гослоя клея.
(использование элемента SUP для верхних индексов, выравнивание абзаца по цен-
тру)
HTML - это язык разметки гипертекста
(использование элемента FONT для задания типа, размера и цвета шрифта, тип
шрифта "Arial", размер - 5, цвет - зеленый, выравнивание абзаца по левому краю)
Программисты представляют свои исходные коды мо-
ноширинным текстом. Для них создан элемент логи-
ческой разметки ...
(использование элемента логической разметки CODE для форматирования текста и
&-последовательностей - для угловых скобок, выравнивание абзаца по центру)
16
Вариант 2
Упаковочные материалы
(Заголовок H1, выравнивание по левому краю)
Барьерные полимеры
(Заголовок Н2, выравнивание по центру)
Элемент абзаца один из самых полезных. Он допускает ис-
пользование только открывающего тега, так как откры-
вающий тег следующего абзаца <Р> обозначает не только
начало следующего абзаца, но и конец предыдущего.
(выравнивание абзаца по правому краю, полужирный шрифт)
Текст этого абзаца выравнивается по центру
с помощью атрибута align
(переход на новую строку с помощью элемента
, выравнивание абзаца по цен-
тру, курсив)
(горизонтальная линия с помощью тега
, толщина 5, длина - 50% от ширины
экрана, выравнивание по правому краю)
Активные барьеры хуже удерживают СО2, но обладают способно-
стью связывать О2
(использование элемента SUB для нижних индексов, выравнивание абзаца по цен-
тру)
Понятие HTML включает в себя раз-
личные способы оформления гипер-
текстовых документов
(использование элемента FONT для задания типа, размера и цвета шрифта, тип
шрифта "Verdana", размер - 6, цвет - красный, выравнивание абзаца по левому краю)
Элемент логической разметки ... обозначает
или имя переменной, или данные, вводимые пользователем.
Фрагмент текста внутри тегов этого элемента обычно
отображается курсивом.
(использование элемента логической разметки VAR для форматирования текста и
&-последовательностей - для угловых скобок, выравнивание абзаца по центру)
17
Вариант 3
Упаковочные материалы
(Заголовок Н1, выравнивание по правому краю)
Характеристики упаковочных материалов
(Заголовок Н2, выравнивание по центру)
Элемент абзаца один из самых полезных. Он допускает
использование только открывающего тега, так как от-
крывающий тег следующего абзаца <Р> обозначает не
только начало следующего абзаца, но и конец предыдуще-
го.
(выравнивание абзаца по центру, полужирный шрифт)
Текст этого абзаца выравнивается по левому краю
с помощью атрибута align
(переход на новую строку с помощью элемента
, выравнивание абзаца по ле-
вому краю, курсив)
(горизонтальная линия с помощью тега
, толщина 15, длина - 300 пикселей,
выравнивание по правому краю)
Плотность полистирола ( ps.) – 1,05 г/см
3
(использование элемента SUB для нижних индексов, SUP для верхних индексов,
выравнивание абзаца по центру)
HTML имеет прямое отношение к та-
кому направлению изобразительного
искусства, как Web-дизайн
(использование элемента FONT для задания типа, размера и цвета шрифта, тип
шрифта "Comic Sans Ms", размер - 16, цвет - синий, выравнивание абзаца по левому
краю)
Элемент логической разметки ... -
используется для выделения очень важных фрагментов
текста. Фрагмент текста внутри тегов этого элемента
обычно отображается полужирным шрифтом.
(использование элемента логической разметки STRONG для форматирования текста
и &-последовательностей - для угловых скобок, выравнивание абзаца по центру)
18
Вариант 4
Классификация бумаги
и картона
(Заголовок Н1, выравнивание по центру)
Влагопрочная бумага
(Заголовок Н2, выравнивание по левому краю)
Элемент абзаца один из самых полезных. Он допускает ис-
пользование только открывающего тега, так как откры-
вающий тег следующего абзаца <Р> обозначает не только
начало следующего абзаца, но и конец предыдущего.
(выравнивание абзаца по левому краю, полужирный шрифт)
Текст этого абзаца выравнивается
по левому краю - с помощью атрибута align
(переход на новую строку с помощью элемента
, выравнивание абзаца по ле-
вому краю, курсив)
(горизонтальная линия с помощью тега
, без тени, толщина 10, длина - 100%,
цвет - Orange)
Химическая формула воды - H2О
(использование элемента SUB для нижних индексов, выравнивание абзаца по цен-
тру)
Человек, изучивший html обретает возможность
делать сложные вещи простыми способами и,
главное, быстро.
(использование элемента FONT для задания типа, размера и цвета шрифта, тип
шрифта "Impact", размер - 4, цвет - Indigo, выравнивание абзаца по левому краю)
Элемент логической разметки ...
- используется для выделения фраг-
ментов текста моноширинным шрифтом, в том
числе для демонстрации сообщений, выводимых
программами.
(использование элемента логической разметки SAMP для форматирования текста и
&-последовательностей - для угловых скобок, выравнивание абзаца по центру)
19
Вариант 5
Классификация полимерных материалов
(Заголовок Н2, выравнивание по правому краю)
Полипропилен
(Заголовок НЗ, выравнивание по левому краю)
Элемент абзаца один из самых полезных. Он допускает ис-
пользование только открывающего тега, так как откры-
вающий тег следующего абзаца <Р> обозначает не только
начало следующего абзаца, но и конец предыдущего.
(выравнивание абзаца по центру, полужирный шрифт)
Текст этого абзаца выравнивается
по правому краю с помощью атрибута align
(переход на новую строку с помощью элемента
, выравнивание абзаца по пра-
вому краю, полужирный курсив)
(горизонтальная линия с помощью тега
, без тени, толщина 30, длина - 30, цвет
- Navy)
Плотность полистирола – 1,05 г/см3
(использование элемента SUP для верхних индексов, выравнивание абзаца по цен-
тру)
Для создания Web-страницы
требуется текстовый редактор
Блокнот.
(использование элемента FONT для задания типа, размера и цвета шрифта, тип
шрифта Monotype Corsiva размер - 10, цвет - Maroon, выравнивание абзаца по пра-
вому краю)
Элемент логической разметки ... - использу-
ется для выделения какого-либо термина при первом упо-
треблении в тексте документа. Отображается курсивом.
(использование элемента логической разметки DFN для форматирования текста и
&-последовательностей - для угловых скобок, выравнивание абзаца по центру)
20
Лабораторная работа № 4
Разработка WEB-страницы на языке HTML
с использованием списков
Цель работы: разработать WEB-страницу с использованием
вложенных списков разных типов.
Существует несколько форматов списков, позволяющих выде-
лять фрагменты информации в тексте. Пунктами списка могут быть
как элементы уровня текста, так и элементы уровня блока, за ис-
ключением заголовков (H1-H6) и элементов ADDRESS. Пунктами
списка могут быть также другие списки.
UL (ненумерованные списки)
Для создания ненумерованного списка используется элемент
UL. Для этого элемента обязательны открывающий и закрывающий
теги. Для маркировки заголовка или названия списка применяется
элемент языка LH (от английского List Heading). Для маркировки
отдельного элемента списка применяется элемент языка LI (от ан-
глийского List Item). Тип маркировки (метки) элемента списка
определяется атрибутом type. Допустимые значения атрибута и, со-
ответственно, символы маркировки диск, круг, квадрат: или -
OL (нумерованные списки)
Для создания ненумерованного списка используется элемент
OL. Тип нумерации элемента списка определяется атрибутом type.
или -
Атрибут start позволяет начать нумерацию списка не с единицы.
Например:
Значение атрибута value элемента LI позволяет изменить номер
данного элемента списка. При этом изменяется и нумерация всех
последующих элементов списка. Например: - Атрибут
value может заменять атрибут start, если включен в первый элемент
списка.
DL (списки определений)
В списке определений для каждого пункта предоставляется не
одна, а две строки. Для написания каждого пункта списка приме-
няются два элемента: DT – определяемый термин (Definition Term)
21
и DD – описание определения (Definition Data). Известное исполь-
зование списка определений – словарь.
Вложенные списки
Каждый пункт списка может представлять собой самостоятель-
ный список. Вложение списков в списки создает несколько уровней
информации. Можно вкладывать друг в друга разные типы списков.
Каждый внутренний список должен иметь открывающий и закры-
вающий теги UL или OL.
Задание
Используя редактор текста Блокнот (Notepad) разработайте стра-
ницу, содержащую:
1. Ненумерованные списки.
2. Нумерованные списки.
3. Списки определений.
4. Используя теги предварительного форматирования сделайте
такое же расположение заголовков и ячеек, как в образце.
5. Сделайте фоном вашей страницы подходящее графическое
изображение из каталога изображений, используя его в каче-
стве значения атрибута background в открывающем теге эле-
мента тела вашего документа Body.
Посмотрите на свою страницу с помощью установленного на
компьютере броузера и добейтесь максимального подобия в пред-
ставлении страницы.
Для выполнения данной работы вам необходимо использовать
следующие теги элементов языка HTML:
Пример тега Пояснение
;
</ TITLE> </HEAD>;
<BODY> </BODY>
Обязательные теги для любой
страницы HTML.
<UL><LH>
</LH><LI>...<LI></UL>
атрибут type=disc|circle|square
Оформление ненумерованных
списков.
<OL><LH>
</LH><LI>...<LI></OL> атрибут
type=1|A|a|I|i атрибут start =
Оформление нумерованных
списков.
22
<DL><LH> </LH>
<DT><DD>...<DT><DD></DL>
атрибут compact
Оформление списков опреде-
лений.
<PRE> </PRE> Предварительное форматиро-
вание. Для сохранения распо-
ложения текста, заданного
при наборе, этот текст поме-
щают между открывающим и
закрывающим тегами PRE.
<IMG SRC="url"> Подстановка изображения.
атрибуты: bgcolor, background
открывающего тега элемента
<BODY> </ BODY>
Управление цветом фона стра-
ницы и задание в качестве фо-
на страницы графического
изображения.
Вариант 1
1.Ненумерованный список
Основные функции упаковки для мясной продукции:
oсохранение первоначального качества мясных продуктов;
oучастие в формировании бренда;
oпредставление информации о продукте и производителе;
oзащита торговой марки от подделок;
oпривлекательная и удобная для покупателя форма
(использование элемента UL для ненумерованных списков, маркер элемента списка –
окружность, разметка заголовка списка полужирным шрифтом с помощью элементов
физического форматирования)
2.Нумерованный список
Материалы, используемые для упаковывания мясных
продуктов:
B. Целлофан.
C. Полистирол.
D. Полиолефиновые пленки.
E. Многослойные материалы.
F. Комбинированные материалы.
(использование элемента OL для нумерованных списков , способ нумерации элементов
списка – заглавные латинские буквы, начиная с В, разметка заголовка списка полу-
жирным шрифтом с помощью элементов физического форматирования)
23
3.Список определений
Аббревиатуры для обозначения наиболее распространенных
полимеров, используемых в упаковочном производстве:
PETE или PET
Полиэтилентерафталат – ПЭТФ (ПЭТ)
HDPE
Полиэтилен низкого давления, высокой плотности ПЭНД
LDPE
Полиэтилен высокого давления, низкой плотности ПЭВД
(использование элемента DL для списков определений, разметка полужирным
шрифтом и курсивом с помощью элементов физического или логического формати-
рования)
4.Предварительное форматирование
Виды тары
Вид тары
Конструктивное ис-
полнение
По размерам
Коробки
Неразборная Малогабаритная
Разборная Крупногабаритная
(оформите текст по образцу, используя теги предварительного форматирования)
Вариант 2
1.Ненумерованный список
Алюминиевая фольга в упаковке:
упаковка для скоропортящихся продуктов;
фольга для асептической упаковки жидкостей;
фольга для сигарет;
фольга для упаковки кофе, детского питания, сухого молока,
мучных и кондитерских изделий, чая, пряностей, супов;
фольга для упаковки масла, маргарина, мороженого, творога и
творожных сырков.
(использование элемента UL для ненумерованных списков, маркер элемента списка –
диск, разметка заголовка списка полужирным шрифтом с помощью элементов
физического или логического форматирования)
2.Нумерованный список
Правильно подобранная упаковка сыра позволяет:
3. улучшить показатели качества сыров, созревание и хранение;
4. увеличить рентабельность производства за счет уменьшения
стоимости процессов упаковки, созревания и хранения сыра;
24
5. улучшить товарный вид и привлекательность упаковки;
6. увеличить срок хранения и удобство при транспортировании
(использование элемента OL для нумерованных списков, способ нумерации элементов
списка арабские цифры, начиная с 3, разметка заголовка списка полужирным шрифтом
с помощью элементов физического или логического форматирования)
3.Список определений
Аббревиатуры для обозначения наиболее распространенных
полимеров, используемых в упаковочном производстве:
PVC
Поливинилхлорид ПВХ
PVDC
Поливиниденхлорид ПВДХ
PP
Полипропилен ПП
(использование элемента DL для списков определений, разметка полужирным
шрифтом и курсивом с помощью элементов физического или логического
форматирования)
4.Предварительное форматирование
Классификация тары
Функциональное
назначение
Потребительская Производственная
Картонная
Неразборная
Бумажная
(оформите текст по образцу, используя теги предварительного форматирования)
Вариант 3
1.Ненумерованный список
Виды упаковки
первичная
вторичная
потребительская
транспортная
(использование элемента UL для ненумерованных списков .маркер элемента списка –
квадрат, разметка заголовка и элементов списка шрифтом различного начертания
с помощью элементов физического или логического форматирования)
25
2.Нумерованный список
Средства пакетирования:
0. поддоны
1. стяжки
2. пакетирующие стропы
3. обвязки
(использование элемента OL для нумерованных списков, способ нумерации элементов
списка арабские цифры, начиная с 0, разметка заголовка списка полужирным шрифтом
с помощью элементов физического или логического форматирования)
3.Список определений
Аббревиатуры для обозначения наиболее распространенных
полимеров, используемых в упаковочном производстве:
PS
Полистирол ПС
PA
Полиамид ПА
РС
Поликарбонат ПК
(использование элемента DL для списков определений, разметка полужирным шрифтом
и курсивом с помощью элементов физического или логического форматирования)
4.Предварительное форматирование
Потребительская тара
Стеклянная Пластиковая Виды тары
для жидкостей
Бутылки
Баллоны
(оформите текст по образцу, используя теги предварительного форматирования)
Вариант 4
1.Ненумерованный список
По конструктивному исполнению упаковку бывает:
неразборная
разборная
складная
герметичная
(использование элемента UL для ненумерованных списков, маркер элемента списка –
диск с переопределением в 3-м элементе на квадрат, разметка заголовка списка полужир-
ным шрифтом с помощью элементов физического или логического форматирования)
26
2.Нумерованный список
По степени жесткости конструкции различают:
II. хрупкую упаковку
III. жесткую упаковку
IV. мягкую упаковку
V. полужесткую упаковку
(использование элемента OL для нумерованных списков, способ нумерации элементов
списка большие римские цифры, начиная с II, разметка заголовка списка полужир-
ным шрифтом с помощью элементов физического или логического форматирования)
3.Список определений
Аббревиатуры для обозначения наиболее распространенных
полимеров, используемых в упаковочном производстве:
PETE или PET
Полиэтилентерафталат – ПЭТФ (ПЭТ)
PVC
Поливинилхлорид ПВХ
РС
Поликарбонат ПК
(использование элемента DL для списков определений, разметка полужирным шрифтом
и курсивом с помощью элементов физического или логического форматирования)
4.Предварительное форматирование
Упаковочные материалы
Полимеры Картон Бумага
Полистирол
Гофрированный
Пергамент
Полипропилен Жиронепроницаемая
(оформите текст по образцу, используя теги предварительного форматирования)
Вариант 5
1.Ненумерованный список
Виды мягкой упаковки
мешки-пакеты
мешки-конверты
27
мешки продуктовые
мешки технические
(использование элемента UL для ненумерованных списков, маркер элемента списка –
квадрате переопределением в 3-м элементе на диск, разметка заголовка списка полужир-
ным шрифтом с помощью элементов физического или логического форматирования)
2.Нумерованный список
По форме упаковку различают:
c.цилиндрическую
d.конусную
e.круглую
f.овальную
g.сложной конфигурации
(использование элемента OL для нумерованных списков, способ нумерации элементов
списка строчные латинские буквы, начиная с "с", разметка заголовка списка полужирным
шрифтом с помощью элементов физического или логического форматирования)
3.Список определений
Аббревиатуры для обозначения наиболее распространенных
полимеров, используемых в упаковочном производстве:
HDPE
Полиэтилен низкого давления, высокой плотности ПЭНД
PVDC
Поливиниденхлорид ПВДХ
PP
Полипропилен ПП
(использование элемента DL для списков определений, разметка полужирным шрифтом
и курсивом с помощью элементов физического или логического форматирования)
4.Предварительное форматирование
Характеристики полимеров
Наименование мате-
риала
Характеристика материала
Полиэтилен Плотность
Полипропилен
Степень усадки Напряжение усадки
Полистирол
(оформите текст по образцу, используя теги предварительного форматирования)
28
Лабораторная работа № 5
Разработка WEB-страницы на языке HTML
с использованием таблиц
Цель работы: разработать WEB-страницу с использованием
таблиц.
Таблицы, в отличие от списков позволяют располагать данные не
только по строкам, но и по столбцам. Каждая ячейка таблицы нахо-
дится в определенной строке и столбце. Таблицы на Web-страницах
часто используют для разметки структуры всей страницы. С помо-
щью таблиц можно создать невидимый "каркас" страницы, помога-
ющий расположить текст и изображения так, как вам нравится.
Кроме использования тегов <HTML>, <HEAD>, <TITLE> и
<BODY>, которые в соответствии со стандартами HTML и WWW
должны присутствовать в каждой WEB-странице, при организации
текста внутри WEB-документа с помощью таблиц применяются
соответствующие элементы языка HTML с определенным набором
тегов и требуемых атрибутов.
Задание
Используя редактор текста Блокнот (Notepad) разработайте стра-
ницу, содержащую таблицы по представленному образцу.
Для выполнения данной работы вам необходимо использовать
следующие теги элементов языка HTML:
Пример тега Пояснение
<TABLE> </TABLE>; <CAPTION>
</CAPTION>; <TR> </TR>; <TH>
</TH> ;<TD> </TD>
Оформление таблицы.
атрибуты открывающего тега элемента
<TABLE> </TABLE>: border, cellspacing,
cellpadding, width, align, bgcolor, border-
color, background
Управление параметрами
таблицы.
атрибуты : align, valign открывающего
тега элементов: <TR> </TR>; <TH>
</TH> ; <TD> </TD>
Выравнивание текста в ячей-
ках таблицы.
атрибут rowspan открывающего тега
элементов: <TH> </TH> ; <TD> </TD>
Объединение нескольких
строк в одну ячейку.
атрибут colspan открывающего тега
элементов: <TH> </TH> ; <TD> </TD>
Объединение нескольких
столбцов в одну ячейку.
29
Вариант 1
Создание таблиц
Таблица 1
Классификация тары
Функциональное
назначение
Потребительская Производственная
Картонная
Неразборная
Бумажная
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: border=4 width="80%" bgcolor="skyblue" bordercolor="red" cellspacing=3
и атрибутов rowspan и colspan для объединения строк и столбцов, а также атрибутов
для выравнивания текста в ячейках таблицы)
Таблица 2
логотип баннер
меню
Основная часть страницы
Таблица 3
выравнивание
слева
выравнивание
по центру
выравнивание
справа
выравнивание
слева по верхне-
му краю
вертикальное
выравнивание по
центру
вертикальное вы-
равнивание по
нижнему краю
30
Таблица 4
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: ширина внешней рамки=0; ширина таблицы=200; высота таблицы=200;
цвет фона таблицы=#999999; расстояние между границами соседних ячеек=4; расстоя-
ние между рамкой каждой ячейки таблицы и содержащимся в ней материалом=0;
цвет фона ячеек, переопределенный в теге <TR> =#СССССС)
Вариант 2
Создание таблиц
Таблица 1
Мировое потребление (тыс. тонн) основных видов полимерных
упаковочных материалов
Страна
Полимер
ПВХ
Полиолефины
ПС
ПЭНД ПЭВД ПП
США 4082 5428 4010 3738 2297
Япония 2028 1621 958 1793 1277
Западная
Европа
4745 4982 2807 3369 1611
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: border=5 width="80%" bgcolor="silver" bordercolor="blue" cellspacing=4
и атрибутов rowspan и colspan для объединения строк и столбцов, а также атрибутов
для выравнивания текста в ячейках таблицы)
31
Таблица 2
баннер логотип
Основная часть страницы
меню
Таблица 3
выравнивание
по центру
выравнивание
слева
выравнивание
справа
выравнивание
слева по верхнему
краю выравнивание
справа по нижнему
краю
вертикальное
выравнивание
по центру
Таблица 4
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: ширина внешней рамки=0; ширина таблицы=200; высота таблицы=200;
цвет фона таблицы=#999999; расстояние между границами соседних ячеек=4; расстоя-
ние между рамкой каждой ячейки таблицы и содержащимся в ней материалом=0;
цвет фона ячеек, переопределенный в теге <TR> =#СССССС)
32
Вариант 3
Создание таблиц
Таблица 1
Сравнение температурного поведения полимерных упаковочных
материалов
Класс Полимер
Температура, °С
плавления разложения стеклования
Полиолефины
ПЭВД 135 360
ПЭНД 110 335 -80
ПП 170 330 -9
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: border=4 width="80%" bgcolor="lime" bordercolor="red" cellspacing=4
и атрибутов rowspan и colspan для объединения строк и столбцов, а также атрибутов
для выравнивания текста в ячейках таблицы)
Таблица 2
Основная часть страницы
меню
баннер логотип
Таблица 3
выравнивание
справа
выравнивание
по центру
выравнивание
слева
вертикальное
выравнивание
по центру
выравнивание
слева по верхнему
краю выравнивание
справа по нижнему
краю
33
Таблица 4
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: ширина внешней рамки=0; ширина таблицы=200; высота таблицы=200;
цвет фона таблицы=#999999; расстояние между границами соседних ячеек=4; расстоя-
ние между рамкой каждой ячейки таблицы и содержащимся в ней материалом=0;
цвет фона ячеек, переопределенный в теге <TR> =#СССССС)
Вариант 4
Создание таблиц
Таблица 1
Внешние признаки полимерных упаковочных материалов
Вид
полимера
Внешние признаки
Механические
Состояние
поверхности
на ощупь
Цвет
Прозрач-
ность
ПЭВД Мягкая,
эластичная,
стойкая к раздиру
Маслянистая,
гладкая
Бес-
цвет-
ная
Прозрачная
ПЭНД Жестковатая,
стойкая к раздиру
Слегка
маслянистая,
гладкая, слабо
шуршащая
Полупро-
зрачная
ПП Жестковатая,
слегка эластичная,
стойкая к раздиру
Сухая, гладкая Прозрачная
или полупро-
зрачная
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: border=7 width="80%" bgcolor="silver" bordercolor="red" cellspacing=3
и атрибутов rowspan и colspan для объединения строк и столбцов, а также атрибутов
для выравнивания текста в ячейках таблицы)
34
Таблица 2
баннер логотип
Основная часть страницы
меню
Таблица 3
выравнивание
слева
выравнивание
справа
выравнивание
по центру
выравнивание
справа по нижнему
краю
вертикальное
выравнивание
по центру
выравнивание
слева по верхнему
краю
Таблица 4
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: ширина внешней рамки=0; ширина таблицы=200; высота таблицы=200;
цвет фона таблицы=#999999; расстояние между границами соседних ячеек=4; расстоя-
ние между рамкой каждой ячейки таблицы и содержащимся в ней материалом=0;
цвет фона ячеек, переопределенный в теге <TR> =#СССССС)
35
Вариант 5
Создание таблиц
Таблица 1
Энергопотребление производства 1 тонны упаковок из стекла
Материал
Производ-
ственный
процесс
Энергопотребление, МДж
Электри-
ческая
энергия
Нефте-
продукты
Другие Итого
Стекло
Сырье 0,080 2,276 0,942 3,298
Стекло 1,224 6,195 4,977 12,396
Итого 1,304 8,471 5,919 15,694
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: border=7 width="80%" bgcolor="aqua" bordercolor="green." cellspacing=4
и атрибутов rowspan и colspan для объединения строк и столбцов, а также атрибутов
для выравнивания текста в ячейках таблицы)
Таблица 2
меню
Основная часть страницы
логотип баннер
Таблица 3
выравнивание слева
выравнивание
справа
выравнивание
по центру
выравнивание слева
по верхнему краю
выравнивание
справа по
нижнему краю
вертикальное
выравнивание
по центру
36
Таблица 4
(использование элементов оформления таблицы для создания таблицы со следующими
параметрами: ширина внешней рамки=0; ширина таблицы=200; высота таблицы=200;
цвет фона таблицы=#999999; расстояние между границами соседних ячеек=4; расстоя-
ние между рамкой каждой ячейки таблицы и содержащимся в ней материалом=0;
цвет фона ячеек, переопределенный в теге <TR> =#СССССС)
Лабораторная работа № 6
Разработка WEB-страницы на языке HTML
с использованием графики, гиперссылок
и изображений-карт
Цель работы: разработать WEB-страницу с использованием
графики, оформить с помощью гиперссылок гипертекстовые пере-
ходы, разработать интерактивную карту-изображение.
Любой Web-документ может содержать ссылки на другие доку-
менты или на определенное место текущего или другого документа.
Гипертекстовая ссылка – это подчеркнутый и выделенный опреде-
ленным цветом фрагмент текста, указывающий на ресурс Интерне-
та, файл на локальном диске или на метку внутри страницы доку-
мента. При активизации ссылки осуществляется переход по указан-
ному в гиперссылке адресу. В языке HTML гиперссылки создаются
с помощью элемента <А></A>, включающего открывающий тег с
атрибутом href, определяющим адрес ссылки. Между открывающим
и закрывающим тегами помещается текст или рисунок для щелчка,
активизирующий гиперссылку. Шаблон элемента гиперссылки име-
ет вид: <A href="Адрес ссылки"> текст для щелчка, отсылающий
по адресу ссылки </A>
Для перехода к определенной части страницы документа необ-
ходимо поставить в начале этой части страницы метку с помощью
тегов: <A name="Метка"> текст </A> Текст не обязателен.
37
При использовании рисунка вместо видимой части гиперссылки
ее шаблон будет иметь вид: <A href="Адрес ссылки"> <IMG
src="Адрес файла рисунка"></A>
Задание
Используя редактор текста Блокнот (Notepad) разработайте
страницу, содержащую:
1. Вставленные изображения с различными типами выравни-
вания и обтекания текстом.
2. Создайте в текстах HTML-файлов лабораторных работ № 3,
4, 5 гиперссылки к HTML-файлу лабораторной работы № 6. Эле-
менты этих гиперссылок разместите перед закрывающим тегом
</ BODY>.
3. Создайте в тексте текущего HTML-файла метку с именем
"top". Элемент этой метки разместите сразу после открывающего
тега <BODY>.
4. Создайте в тексте текущего HTML-файла гиперссылки
В начало к началу документа, то есть к метке "top". Элемент этой
гиперссылки разместите после вставленных изображений.
5. C помощью тега <IMG>вставьте рядом с текстом созданной
гиперссылки графическое изображение кнопки. Создайте графиче-
скую гиперссылку на это изображение к началу документа.
6. Создайте гиперссылки к разделам вашей страницы:
Обтекание рисунков текстом
Изображения – гиперссылки
Изображения-карты
Разместите эти гиперссылки после элемента метки с именем
"top" в начале страницы.
7. Используя графический редактор Paint создайте графический
файл (по образцу), содержащий изображение прямоугольников и кру-
га, которые будут использоваться в качестве указателей для перехода
по гиперссылкам к Вашим файлам лабораторных работ № 3, № 4, № 5
и на главную страницу БНТУ (http://www.bntu.by). Запишите необ-
ходимые для описания изображения-карты координаты созданных
прямоугольника и круга. Сохраните созданный файл с именем
"menu" и расширением gif, то есть как menu.gif в текущем каталоге
или в папке рисунков image.
38
8. Используя элементы <MAP name="karta"><AREA></MAP>
и <IMG> с необходимыми атрибутами сделайте созданный Вами
графический файл изображением-картой. Проверьте правильность
переходов к файлам лабораторных работ и на страницу БНТУ при
использовании в качестве гиперссылок фрагментов созданного Ва-
ми изображения-карты.
9. Сохраните страницу в рабочем каталоге.
Для выполнения данной работы вам необходимо использовать
следующие теги элементов языка HTML:
Пример элемента Пояснение
<A href="Адрес ссылки"> текст
для щелчка</A>
Элемент гиперссылки.
<A name="Метка"></A> Элемент метки.
<A href="Файл.html#Метка">
текст для щелчка</A>
Элемент гиперссылки для перехо-
да к метке. Для перехода к метке
текущего файла его имя не указы-
вается.
<A href="Адрес ссылки"> <IMG
src="Адрес файла рисунка"></A>
Элемент гиперссылки при исполь-
зовании изображения вместо текста
гиперссылки.
<MAP name="Имя
карты"><AREA></MAP>
Элемент изображения-карты.
атрибуты элемента <AREA>:
href, alt, shape, coords.
Задание адреса ссылки, альтерна-
тивного текста, формы и координат
областей изображения-карты.
атрибут элемента <IMG>:
usemap="#Имя карты".
Придает элементу <IMG>, который
используется для вставки на WEB-
страницу графического файла
изображения-карты, свойства ги-
перссылки, то есть возможность
осуществления переходов к не-
скольким документам, используя
отдельные фрагменты изображения
в качестве указателей переходов.
39
Вариант 1
Использование графики, карт и гиперссылок
Обычные изображения и обтекание рисунков текстом
Использование изображений в качестве гиперссылок
Использование изображений – карт в качестве гиперссылок
Обычные изображения и обтекание рисунков текстом
Тег <IMG> может иметь собственный атрибут ALIGN=,
который управляет расположением рисунка относительно
текста. ALIGN="left" — текст обтекает рисунок, который
располагается слева.
Чтобы рисунок не слишком “прижимался” к тексту, можно оставить меж-
ду ними немного “воздуха”. Для этого в теге <IMG> ис-
пользуют атрибуты HSPACE= и VSРАСЕ=, значения которых задают со-
ответственно горизонтальное и вертикальное “поля” рисунка.
в начало
Использование изображений в качестве гиперссылок
В текст веб-страницы можно вставлять гиперссылки трех типов:
ссылки в другие места той же страницы;
ссылки на другие страницы этого же сайта или сервера;
ссылки на страницы, расположенные на любом другом сервере в Интер-
нете.
Ссылками может быть текст, изображение и часть изображения (карта)
в начало
Использование изображений - карт в качестве гиперссылок
в начало
Содержание
Лабораторная работа №3
Лабораторная работа №4
.
Лабораторная работа №5
таблиц
БНТУ
40
Вариант 2
Использование графики, карт и гиперссылок
Обычные изображения и обтекание рисунков текстом
Использование изображений в качестве гиперссылок
Использование изображений – карт в качестве гиперссылок
Обычные изображения и обтекание рисунков тек-
стом
Тег <IMG> может иметь собственный атрибут ALIGN=, ко-
торый управляет расположением рисунка относительно тек-
ста. ALIGN ="right" — текст обтекает рисунок, который
располагается справа.
Чтобы рисунок не слишком “прижимался” к тексту,
можно оставить между ними немного “воздуха”. Для
этого в теге <IMG> используют атрибуты HSPACE=
и VSРАСЕ=, значения которых задают соответствен-
но горизонтальное и вертикальное “поля” рисунка.
в начало
Использование изображений в качестве гиперссылок
В текст веб-страницы можно вставлять гиперссылки трех типов:
ссылки в другие места той же страницы;
ссылки на другие страницы этого же сайта или сервера;
ссылки на страницы, расположенные на любом другом сервере в Интер-
нете.
Ссылками может быть текст, изображение и часть изображения (карта)
в начало
Использование изображений - карт в качестве гиперссылок
в начало
Содержание Лабораторная работа №3
Лабораторная работа №4
.
Лабораторная работа №5
таблиц
БНТУ
41
Вариант 3
Использование графики, карт и гиперссылок
Обычные изображения и обтекание рисунков текстом
Использование изображений в качестве гиперссылок
Использование изображений – карт в качестве гиперссылок
Обычные изображения и обтекание рисунков текстом
ALIGN="top" — рисунок рас- полагается внутри текстовой
строки, и его верхняя граница совпадает с верхней границей
букв текста (можно также при- менять значение "texttop").
Чтобы рисунок не слишком “прижимался” к тексту, мож-
но оставить между ними немного “воздуха”. Для
этого в теге <IMG> используют атрибуты HSPACE= и VSРАСЕ=, значе-
ния которых задают соответственно горизонтальное и вертикальное “по-
ля” рисунка.
в начало
Использование изображений в качестве гиперссылок
В текст веб-страницы можно вставлять гиперссылки трех типов:
oссылки в другие места той же страницы;
oссылки на другие страницы этого же сайта или сервера;
oссылки на страницы, расположенные на любом другом сервере в Интер-
нете.
Ссылками может быть текст, изображение и часть изображения (карта)
в начало
Использование изображений - карт в качестве гиперссылок
в начало
Содержание
Лабораторная работа №3
Лабораторная работа №4
.
Лабораторная работа №5
таблиц
БНТУ
42
Вариант 4
Использование графики, карт и гиперссылок
Обычные изображения и обтекание рисунков текстом
Использование изображений в качестве гиперссылок
Использование изображений – карт в качестве гиперссылок
Обычные изображения и обтекание рисунков текстом
ALIGN="middle" — рисунок располагается
внутри текстовой строки, которая вертикально выравнивается по центру
рисунка (можно также при менять значение "absmiddle")
Чтобы рисунок не слишком “прижимался” к тексту,
можно оставить между ними немного “воздуха”. Для
этого в теге <IMG> используют атрибуты HSPACE= и
VSРАСЕ=, значения которых задают соответственно го-
ризонтальное и вертикальное “поля” рисунка.
в начало
Использование изображений в качестве гиперссылок
В текст веб-страницы можно вставлять гиперссылки трех типов:
oссылки в другие места той же страницы;
ссылки на другие страницы этого же сайта или сервера;
ссылки на страницы, расположенные на любом другом сервере в Интер-
нете.
Ссылками может быть текст, изображение и часть изображения (карта)
в начало
Использование изображений - карт в качестве гиперссылок
в начало
Содержание
Лабораторная работа №3
Лабораторная работа №4
.
Лабораторная работа №5
таблиц
БНТУ
43
Вариант 5
Использование графики, карт и гиперссылок
Обычные изображения и обтекание рисунков текстом
Использование изображений в качестве гиперссылок
Использование изображений – карт в качестве гиперссылок
Обычные изображения и обтекание рисунков текстом
ALIGN="bottom" – рисунок располагается внутри текстовой
строки, и его нижняя граница совпадает с нижней границей букв текста
(можно также применять значение "absbottom" или
"baseline").
Чтобы рисунок не слишком “прижимался” к тексту, мож-
но оставить между ними немного “воздуха”. Для этого в
теге <IMG> используют атрибуты HSPACE= и VSРАСЕ=,
значения которых задают соответственно горизонтальное
и вертикальное “поля” рисунка.
в начало
Использование изображений в качестве гиперссылок
В текст веб-страницы можно вставлять гиперссылки трех типов:
ссылки в другие места той же страницы;
ссылки на другие страницы этого же сайта или сервера;
ссылки на страницы, расположенные на любом другом сервере в Ин-
тернете.
Ссылками может быть текст, изображение и часть изображения (карта)
в начало
Использование изображений - карт в качестве гиперссылок
в начало
Содержание
Лабораторная работа №3
Лабораторная работа №4
.
Лабораторная работа №5
таблиц
БНТУ
44
Лабораторная работа № 7
Использование форм при разработке WEB-страницы
на языке HTML
Цель работы: разработать WEB-страницу с использованием
вложенных списков разных типов.
Формы предназначены для размещения ответов на адресован-
ные автором страницы посетителям вопросы. Как и любые бумаж-
ные формы они используются, в частности, для:
анкетирования посетителей WEB-сайта или страницы
выяснения спроса на предлагаемые товары или услуги
выяснения цен на интересующие товары или услуги
получения отзывов
Форма должна содержать определенное разработчиком страни-
цы число элементов управления: поля ввода, кнопки, переключате-
ли, флажки, меню и другие. Каждый элемент управления создается
при помощи одного из соответствующих элементов языка HTML с
необходимыми атрибутами, определяющими особенности работы
той или иной формы.
Для выполнения данной работы вам необходимо использовать
следующие элементы языка HTML:
Примеры элементов
и их атрибутов
Пояснение
<FORM>...</FORM>
Элемент, определяющий область формы на WEB-
странице.
Атрибуты элемента
<FORM>...</FORM>:
action
Определяет протокол доступа к серверу программы-
обработчика формы, адрес и имя этой программы.
method
Атрибут, задающий метод ввода данных на сервере
программы-обработчика формы.
enctype
Атрибут, указывающий способ кодирования содер-
жимого формы для передачи программе-
обработчику.
<INPUT>
Элемент позволяет создавать различные части форм,
такие как флажки, переключатели, поля ввода.
45
атрибуты элемента
<INPUT>:
name
Значение атрибута определяет имя поля формы,
то есть имя блока данных, введенных в это поле.
value Ввод текста, определение надписи на кнопке.
checked
Показывает, что флажок должен быть установлен
по умолчанию. В отличие от переключателей,
одновременно может быть установлено любое
количество флажков. Не имеет значения.
size
Задает длину поля ввода. Длина выражается
в символах.
readonly
Позволяет создать элемент, недоступный
для редактирования.
type определяет вид элемента INPUT.
Значения атрибута type элемента INPUT:
Значения атрибута Пояснение
type="text"
Создание поля ввода, в котором можно автоматиче-
ски разместить произвольный текст, используя
атрибут value.
type="password"
Создание поля для ввода пароля. Введенная
информация отображается звездочками.
type="checkbox"
Создание флажка. Для нескольких флажков
необходимо использовать соответствующее
количество элементов <INPUT>.
type="radio"
Определение одного переключателя из группы.
Для всей группы переключателей необходимо
использовать соответствующее количество элементов
<INPUT.> Если один из переключателей должен
быть выбран по умолчанию, то в элемент <INPUT>
этого переключателя вставляется атрибут checked
без значения.
type="button" Создание кнопки произвольного назначения.
type="submit"
Создание кнопки, щелчок на которой подтверждает
ввод информации в форму.
Атрибут value используется для определения
надписи на кнопке.
type="reset" Кнопка для отмены ввода данных в форму.
46
type="image"
Создание кнопки с рисунком.
Для указания графического файла используется
атрибут src.
type="file"
Средство выбора файла для присоединения к форме.
Имя файла записывается в поле ввода. Кроме того,
браузер автоматически создает рядом с полем
ввода кнопку Обзор, которая позволяет запустить
стандартный для операционной системы диалог
выбора файлов.
Элементы, которые могут использоваться самостоятельно
(не в составе элемента <FORM>...</FORM>:)
Примеры элементов
и их атрибутов
Пояснение
<SELECT> <OPTION> </SELECT>
Элемент SELECT используется
для создания списка или меню, а
элемент OPTION – для создания
пунктов списка. Количество
элементов OPTION определяет
число пунктов списка.
Атрибуты элемента
<SELECT>...</SELECT>:
name Определяет имя меню.
multiple
Разрешает выбрать сразу
несколько пунктов списка
(при нажатой клавише Ctrl).
Атрибут не имеет значения.
size
Определяет количество видимых
на экране пунктов списка.
По умолчанию видна только первая
строка, а при щелчке на кнопке
со стрелкой раскрывается полный
список.
Атрибуты элемента <OPTION>:
selected
Определяет, какой из пунктов
списка должен быть выбран
по умолчанию. Не имеет значений.
Может быть присвоен только одному
пункту списка.
47
value
Значение атрибута в паре с именем
меню (значением атрибута name)
передается на сервер для обработки
формы.
<TEXTAREA>...</TEXTAREA>
Элемент TEXTAREA
используется для создания
области фиксированного размера
для ввода или просмотра текста
неограниченного размера.
Атрибуты элемента
<TEXTAREA>...</TEXTAREA>:
name Определяет имя области.
rows Определяет количество строк.
cols
Определяет количество столбцов
(в символах).
Задание
Используя редактор текста Блокнот (Notepad):
1. Создайте WEB-страницу, содержащую в составе элемента
<FORM>...</FORM> элементы форм <INPUT> всех типов.
2. Создайте на WEB-странице элементы форм <SELECT>
<OPTION> </SELECT> и <TEXTAREA>...</TEXTAREA> .
3. Создайте на WEB-странице форму с произвольным набором
элементов.
Лабораторная работа № 8
Использование фреймов при разработке WEB-страницы
на языке HTML
Цель работы: разработать WEB-страницу с использованием
фреймовой верстки.
При создании страницы с фреймами разрабатывается несколько
HTML-файлов, которые отличаются по своему назначению. Доку-
мент (файл) раскладки определяет структуру окна браузера, то есть
количество и вид областей, на которые разделено это окно. Необхо-
48
димое количество областей и их вид (горизонтальные или верти-
кальные или комбинация) определяется разработчиком WEB-стра-
ницы. Документы (файлы) содержания предназначены для заполне-
ния информацией каждой из областей.
Для выполнения данной работы вам необходимо использовать
следующие элементы языка HTML (в дополнение к использован-
ным ранее):
Примеры элементов
и их атрибутов
Пояснение
<FRAMESET><FRAME>
</FRAMESET>
Элемент для создания WEB-страницы
с фреймами.
атрибуты элемента <FRAMESET>...</ FRAMESET>:
rows Создание горизонтальных областей деления
окна браузера.
cols Создание вертикальных областей деления
окна браузера.
frameborder Задание рамки фрейма.
framespacing Задание толщины рамки фрейма.
<FRAME> Элемент, определяющий содержание
и структуру каждой области деления
окна браузера.
атрибуты элемента <FRAME>:
name Имя фрейма.
src Ссылка на файл документа содержания,
помещаемого в данную область.
noresize Запрет на перемещение границ фрейма
при помощи мыши.
scrolling Управление прокруткой внутри области
фрейма.
marginheight Величина отступа содержимого фрейма
от верхней и нижней границы фрейма.
marginwidth Величина левого и правого полей
содержимого фрейма.
<A target="Имя фрейма"
href="имя_файла.html">
Текст меню</A>
Элемент гиперссылки с использованием
атрибута target.
49
Задание
Используя редактор текста Блокнот (Notepad) разработайте
WEB-страницу с фреймами и организацией загрузки HTML-файлов
лабораторных работ № 3–7 в один из фреймов с помощью выбора
пунктов меню в другом фрейме в соответствии с указаниями вари-
анта задания.
Вариант 1
Создать WEB-страницу по предложенному образцу и органи-
зацией загрузки HTML-файлов лабораторных работ № 3–7 в правый
фрейм с помощью выбора пунктов меню в левом фрейме.
1.Создайте файл с оглавлением Вашего документа в виде списка
ссылок на HTML-файлы лабораторных работ № 3, 4, 5, 6, 7.
Сохраните созданный файл с именем menu.html
2.Создайте страницу above.html, в которой разместите краткую ин-
формацию о себе.
3.Используя шаблон элемента FRAMESET создайте HTML-файл
документа раскладки основной страницы с именем index.html,
содержащий описание двух вертикально расположенных в окне
браузера фреймов и одного горизонтального. С помощью атри-
бута cols задайте ширину левой вертикальной области в три ра-
за уже правой и нижней области в 10 % от экрана. С помощью
атрибутов frameborder и framespacing задайте рамку между
фреймами и ее толщину.
4.Левому фрейму с помощью атрибута name присвойте имя
"menu", с помощью атрибута src укажите имя созданного фай-
ла оглавления – menu.html, который будет загружаться в этот
фрейм. Правому фрейму с помощью атрибута name присвойте
имя "info", с помощью атрибута src укажите имя файла перво-
го документа – Имя файла лабораторной работы 3.html, ко-
торый будет загружаться в этот фрейм. Нижнему фрейму –
name –"autor", src – about.html
5.Посмотрите на HTML-файл своей страницы – index.html с помо-
щью установленного на компьютере броузера и добейтесь мак-
симального подобия в представлении страницы броузером.
6.Проверьте правильность переходов к файлам лабораторных работ
при использовании гиперссылок.
50
Вид страницы:
Содержание
Лаб. 3.
Лаб. 4.
Лаб. 5.
Лаб. 6.
Лаб. 7.
Об авторе:
Вариант 2
Создать WEB-страницу по предложенному образцу и органи-
зацией загрузки HTML-файлов лабораторных работ № 3–7 в сред-
ний фрейм с помощью выбора пунктов меню в верхнем фрейме.
1.Создайте файл с оглавлением Вашего документа в виде списка
ссылок на HTML-файлы лабораторных работ № 3, 4, 5, 6, 7.
Сохраните созданный файл с именем menu.html
2.Создайте страницу above.html, в которой разместите краткую ин-
формацию о себе.
3.Используя шаблон элемента FRAMESET создайте HTML-файл
документа раскладки основной страницы с именем index.html,
содержащий описание двух вертикально расположенных в окне
браузера фреймов и одного горизонтального. С помощью атри-
бута rows задайте высоту верхней области 30 %, ширину ниж-
ней области в 10 %, для средней – все, что останется. С помо-
щью атрибутов frameborder и framespacing задайте рамку меж-
ду фреймами и ее толщину.
4.Верхнему фрейму с помощью атрибута name присвойте имя
"menu", с помощью атрибута src укажите имя созданного фай-
ла оглавления – menu.html, который будет загружаться в этот
фрейм. Правому фрейму с помощью атрибута name присвойте
51
имя "info", с помощью атрибута src укажите имя файла перво-
го документа – Имя файла лабораторной работы 3.html, ко-
торый будет загружаться в этот фрейм. Нижнему фрейму –
name –"autor", src – about.html
5.Посмотрите на HTML-файл своей страницы – index.html с помо-
щью установленного на компьютере броузера и добейтесь мак-
симального подобия в представлении страницы броузером.
6.Проверьте правильность переходов к файлам лабораторных работ
при использовании гиперссылок.
Вид страницы:
Содержание
Лаб. 3. Лаб. 4.Лаб. 5.Лаб. 6. Лаб.7.
Об авторе:
Вариант 3
Создать WEB-страницу по предложенному образцу и органи-
зацией загрузки HTML-файлов лабораторных работ № 3–7 в правый
фрейм с помощью выбора пунктов меню в левом фрейме.
1.Создайте файл с оглавлением Вашего документа в виде списка
ссылок на HTML-файлы лабораторных работ № 3, 4, 5, 6, 7.
Сохраните созданный файл с именем menu.html
2.Создайте страницу above.html, в которой разместите краткую ин-
формацию о себе.
3.Используя шаблон элемента FRAMESET создайте HTML-файл
документа раскладки основной страницы с именем index.html,
52
содержащий описание двух вертикально расположенных в окне
браузера фреймов и одного горизонтального. С помощью атри-
бута rows задайте ширину верхней области в 10 % от нижней. С
помощью атрибута cols задайте ширину левой вертикальной об-
ласти в три раза уже правой. С помощью атрибутов frameborder
и framespacing задайте рамку между фреймами и ее толщину.
4. Верхнему фрейму с помощью атрибута name присвойте имя
"menu", с помощью атрибута src укажите имя созданного фай-
ла оглавления – menu.html, который будет загружаться в этот
фрейм. Правому фрейму с помощью атрибута name присвойте
имя "info", с помощью атрибута src укажите имя файла перво-
го документа – Имя файла лабораторной работы 3.html, ко-
торый будет загружаться в этот фрейм. Нижнему фрейму –
name –"autor", src – about.html
5.Посмотрите на HTML-файл своей страницы – index.html с помо-
щью установленного на компьютере броузера и добейтесь мак-
симального подобия в представлении страницы броузером.
6.Проверьте правильность переходов к файлам лабораторных работ
при использовании гиперссылок.
Вид страницы:
Об авторе:
Содержание
Лаб. 3.
Лаб. 4.
Лаб. 5.
Лаб. 6.
Лаб. 7.
53
Вариант 4
Создать WEB-страницу по предложенному образцу и органи-
зацией загрузки HTML-файлов лабораторных работ № 3–7 в левый
фрейм с помощью выбора пунктов меню в правом фрейме.
1.Создайте файл с оглавлением Вашего документа в виде списка
ссылок на HTML-файлы лабораторных работ № 3, 4, 5, 6, 7.
Сохраните созданный файл с именем menu.html
2.Создайте страницу above.html, в которой разместите краткую ин-
формацию о себе.
3.Используя шаблон элемента FRAMESET создайте HTML-файл
документа раскладки основной страницы с именем index.html,
содержащий описание двух вертикально расположенных в окне
браузера фреймов и одного горизонтального. С помощью атри-
бута cols задайте ширину правой вертикальной области в три
раза уже левой. С помощью атрибута rows задайте ширину
нижней области в 10 % от верхней. С помощью атрибутов
frameborder и framespacing задайте рамку между фреймами и ее
толщину.
4. Верхнему фрейму с помощью атрибута name присвойте имя
"menu", с помощью атрибута src укажите имя созданного фай-
ла оглавления – menu.html, который будет загружаться в этот
фрейм. Правому фрейму с помощью атрибута name присвойте
имя "info", с помощью атрибута src укажите имя файла перво-
го документа – Имя файла лабораторной работы 3.html, ко-
торый будет загружаться в этот фрейм. Нижнему фрейму –
name –"autor", src – about.html
5.Посмотрите на HTML-файл своей страницы – index.html с помо-
щью установленного на компьютере броузера и добейтесь мак-
симального подобия в представлении страницы броузером.
6.Проверьте правильность переходов к файлам лабораторных ра-
бот при использовании гиперссылок.
54
Вид страницы:
Содержание
Лаб. 3.
Лаб. 4.
Лаб. 5.
Лаб. 6.
Лаб. 7.
Об авторе:
Вариант 5
Создать WEB-страницу по предложенному образцу и органи-
зацией загрузки HTML-файлов лабораторных работ № 3–7 в сред-
ний фрейм с помощью выбора пунктов меню в нижнем фрейме.
1.Создайте файл с оглавлением Вашего документа в виде списка
ссылок на HTML-файлы лабораторных работ № 3, 4, 5, 6, 7.
Сохраните созданный файл с именем menu.html
2.Создайте страницу above.html, в которой разместите краткую ин-
формацию о себе.
3.Используя шаблон элемента FRAMESET создайте HTML-файл
документа раскладки основной страницы с именем index.html,
содержащий описание двух вертикально расположенных в окне
браузера фреймов и одного горизонтального. С помощью атри-
бута rows задайте высоту верхней области 10 %, ширину ниж-
ней области в 30 %, для средней – все, что останется. С помо-
щью атрибутов frameborder и framespacing задайте рамку меж-
ду фреймами и ее толщину.
4. Верхнему фрейму с помощью атрибута name присвойте имя
"menu", с помощью атрибута src укажите имя созданного фай-
ла оглавления – menu.html, который будет загружаться в этот
55
фрейм. Правому фрейму с помощью атрибута name присвойте
имя "info", с помощью атрибута src укажите имя файла перво-
го документа – Имя файла лабораторной работы 3.html, ко-
торый будет загружаться в этот фрейм. Нижнему фрейму –
name –"autor", src – about.html
5.Посмотрите на HTML-файл своей страницы – index.html с помо-
щью установленного на компьютере броузера и добейтесь мак-
симального подобия в представлении страницы броузером.
6.Проверьте правильность переходов к файлам лабораторных работ
при использовании гиперссылок.
Вид страницы:
Об авторе:
Содержание
Лаб. 3. Лаб. 4.Лаб. 5.Лаб. 6. Лаб.7.
56
Лабораторная работа № 9
Технология CSS. Разработка цвето-шрифтовой схемы
и навигации сайта с помощью каскадных таблиц стилей
Цель работы: Изучить основы технологии CSS на примере
разработки собственного сайта.
Технология CSS
Каскадные таблицы стилей или CSS (от английского Cascading
Style Sheets) являются следствием дальнейшего развития HTML и
дают нам возможность перейти на следующий уровень представле-
ния информации. Таблицы стилей позволяют разделить смысловое
содержимое странички и его оформление.
Подключение таблиц стилей CSS к HTML-документу
Для осуществления этой задачи используют 3-х метода:
In-line-описание,
описание в секции заголовка.
внешний файл,
Метод 1: Инлайн/In-line (атрибут style)
или описание, встроенное в тег:
<p style="color:red; text-align:center;">
Этот текст переопределен стилем
</p>
Метод 2: Описание в секции заголовка (тэг style)
Его действие распространяется на всю страничку. Определение
стилей происходит при помощи классов, которые представляют собой
списки с определением всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо
разместить в секции заголовка:
<head> ....
<style type="text/css">
<!--
.header {
text-align :center;
font-size : 27pt;}
.red {color : red; }
-->
57
</style>
</head>
Теперь эти стили можно применять в любом месте html-кода.
Для этого используется следующая конструкция:
<p class=header>Этот текст написан стилем
header<p>
<p class=red>Этот текст написан красным
цветом<p>
Кроме определения новых классов мы также имеем возмож-
ность переопределять стандартные теги. Например, тег <p>:
<style type="text/css">
<!-- p { text-align : center; font-size
:12pt;}
--> </style>
Теперь весь текст, заключенный в теги <p></p>, будет выгля-
деть так, как определено данным стилем.
Метод 3:Вынесение описания стилей во внешний файл
(ссылка на таблицу стилей).
Диапазон его воздействия простирается на все файлы, в которые
включено описание. В случае, если нам потребуется изменить
внешний вид сайта, то будет достаточно скорректировать лишь
один этот файл.
Для начала создается стилевой файл с описанием всех нужных
нам классов (mystyle.css):
.header { text-align : center; font-size :
27pt;}
.red { color :red; }
p { text-align : center; font-size : 12pt;}
А потом ссылка на него внедряется в документ при помощи тега
<link>:
<head>
....
<link rel="stylesheet" type="text/css"
href="css/mystyle.css" title="MyStyleSheet">
....
</head>
Это самый удобный способ, и для основной таблицы стилей ре-
комендуется пользоваться именно им.
58
Синтаксис CSS
Общее описание синтаксиса CSS:
В качестве селектора может выступать тег HTML, класс или
псевдокласс.
Описание каждого класса делается при помощи конструкции,
подобной этой:
.small { font-size: 9pt; }
Сначала указывается имя класса - оно может быть произволь-
ным, но желательно все-таки давать осмысленное название. Далее,
в фигурных скобках перечисляются все необходимые параметры
для данного класса. Параметры отделяются друг от друга точкой с
запятой.
Заметьте, что имя класса начинается с точки и таким образом
определяет универсальный класс, т.е. такой, который может быть
применен к любому тегу. И делается это при помощи следующей
конструкции:
<p class=small>Накладываем стиль на этот
текст</p>
Существуют универсальные классы и, так называемые, теговые
классы:
p.small { font-size: 9pt; }
Класс, определенный таким образом, сработает только в том те-
ге, для которого он предназначен, а для всех остальных будет про-
игнорирован.
59
Мы можем определять параметры не только для одного тега, но
и сразу для нескольких. Для этого в определении стиля достаточно
перечислить их через запятую:
p, td { font-size: 9pt; color:green;}
Такой прием называется группировкой, и в данном случае мы
определили и для <p>, и для <td> одинаковый размер и цвет текста.
В случае переопределения существующих тегов, в описании
стиля можно указывать не все параметры, а лишь те из них, кото-
рые мы хотим изменить. Все остальные параметры примут значения
по умолчанию, которые для разных тегов различны.
Псевдоклассы
В CSS есть такое понятие как псевдокласс. В отличие от обыч-
ного класса, действие псевдокласса распространяется не на весь
текст, к которому применен данный стиль, а лишь на его часть и
возможно лишь в определенном состоянии. Чтобы было понятнее,
давайте разберем эффект, при котором ссылки подчеркиваются
лишь при наведении на них курсора. Эффект достаточно распро-
страненный, и его можно наблюдать в том числе и на этом сайте.
Вот фрагмент таблицы стилей, который позволяет достигать выше-
описанного эффекта:
a { text-decoration: none; }
a:hover { text-decoration: underline;}
Верхняя строчка - это переопределение стандартного тега <a>,
которое запрещает подчеркивать ссылки, а вот нижняя - это опре-
деление стиля для псевдокласса hover, который описывает стиль
ссылки в момент, когда курсор находится над ней.
Пример псевдокласса - определение буквицы вначале абзаца:
p:first-letter { font-size: 200\%; font-
weight: bold; }
И в другом случае действие стиля распространяется либо на
определенное состояние (пользователь собирается щелкнуть по
ссылке), либо на фрагмент текста (изменяется только первая буква
абзаца). В этом и заключается смысл псевдоклассов.
При создании таблицы стилей можно пользоваться коммента-
риями.:
/* Этот текст является комментарием */
Основные параметры шрифта
font-weight: [bold|normal|number] - жирность шрифта
60
font-style: [normal|italic|oblique] - наклон шрифта
font-size: number - размер шрифта
font-family: name - гарнитура шрифта
color:number - цвет шрифта
background-color: number - цвет подложки
background: url – изображение в качестве подложки
псевдоклассы Ссылок
A:active{} Таблица стилей для активных ссылок (при нажатии)
A:link{} Таблица стилей для собственно ссылок
A:visited{} Таблица стилей для посещённых ссылок
A:hover {} Таблица стилей для ссылок при наведении указателя
мыши
Основные параметры абзаца
text-align: [left|right|center|justify] - выравнивание
text-indent: number - отступ красной строки
line-height: number –межстрочное расстояние
letter-spacing: number – интервал между буквами
Единицы измерения в CSS
В свойствах, которым требуется указание размеров, можно ис-
пользовать несколько способов для их задания:
относительный размер в процентах (%)
относительный размер при помощи словесного описания (larger,
smaller, xx-small, x-small, small, medium, large, x-large, xx-
large)
абсолютный размер в типографских единицах - размер может
задаваться в пунктах (pt), пиках (pc), пикселях (px), средней
шириной буквы "m" (em), средней шириной буквы "x" (eх)
абсолютный размер в стандартных единицах длины - размер
может задаваться в сантиметрах (cm), миллиметрах (mm),
дюймах (in) абсолютный в пикселях (px)
Задание цвета в CSS
Цвет для тех свойств, где это нужно, может быть определен од-
ним из трех способов:
при помощи названия цвета: yellow, red, green, grey,..
шестнадцатеричным заданием цвета в формате #RRGGBB:
#ff0000, #883490, #ffffff,..
десятичным заданием составляющих цвета в формате rgb(red,
green, blue): rgb(255,0,0), rgb(100,23,78),..
61
Примеры описания таблицы стилей:
.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}
p.big {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}
.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}
a:hover {
color: #b63a3a;
text-decoration: none;
}
Задание
1. Создать внешнюю таблицу стилей (файл с расширением
css).
2. Разработайте цвето-шрифтовую схему сайта, которая будет
повторяться на всех его страницах.
В таблице стилей должны присутствовать следующие элементы
оформления:
цвет фона страницы
фоновое изображение на странице
стилевое оформление абзацев
контекстные селекторы для оформления слов в абзацах по-
лужирным, курсивным начертанием
стилевое оформление гиперссылок
62
стилевое оформление рамок таблиц
3. Подключить внешнюю таблицу стилей ко всем лаборатор-
ным работам (в тег <LINK>)
4. Для страницы с содержанием переопределить стиль для
оформления меню (гиперссылки) с использованием псевдо-
классов. ля создания "вместилища" панели используйте div.
Примерные стили для вместилища и для ссылок даны на ри-
сунке.
5. Создайте отдельный класс для выделения той гиперссылки,
которая указывает на текущую страницу. Это позволит поль-
зователю по виду панели определить, на какой странице он
находится.
6. Для страницы со списками определить стиль для маркиро-
ванных списков, в котором для маркера используется изоб-
ражение. Изображение найти в стандартной коллекции
Windows.
Лабораторная работа № 10
Технология CSS. Проектирование оформления web-сайта
с помощью каскадных таблиц стилей
Цель работы: Изучить основы технологии CSS на примере
разработки собственного сайта.
63
Основные параметры границ (рамок)
border-width: number – толщина рамки
border-color: number – цвет рамки
border-style: [dotted|dashed|solid|double|groove|ridge|inset|outset] –
тип рамки
Основные параметры блоков (элементов типа "Box")
padding-left: number – отступ от текста слева
padding-right: number – отступ от текста справа
padding-top: number – отступ от текста сверху
padding-bottom: number – отступ от текста снизу
margin-left: number – отступ от границы слева
margin-right: number – отступ от границы справа
margin-top: number – отступ от границы сверху
margin-bottom: number – отступ от границы снизу
Свойство writing-mode:tb-rl позволяет размещать текст под
углом 90o.
Задание
Задание 1
В лабораторной работе № 3 для всех абзацев с помощью стилей
переопределите в секции заголовка (тег slyle) тег <p> и псевдо-
классы тега <p>:
– выравнивание абзаца
– отступ красной строки-
– размер и цвет первой буквы
Задание 2
В лабораторной работе № 4 с помощью стилей встроенных в те-
ги, оформить ненумерованные списки с помощью маркеров-рисун-
ков из стандартной коллекции Windows.
Нумерованные списки оформить с помощью стилей, встроен-
ных в теги.
Задание 3
В работе № 6 задайте с помощью стилей обтекание рисунков
текстом в соответствии с вариантом.
Задание 4
В лабораторную работу № 5 добавьте таблицы, оформленные с
помощью стилей.
64
Таблица 1
Текст
те
кст
Таблица 2
Текст
Текст
Таблица 3
График
2008 2009 2010 П
о
к
а
з
а
т
е
л
ь
50 25 100
Задание 5
1. Добавьте в документ следующий HTML-код:
<html>
<body>
<span>ВНИМАНИЕ!</span>
</body>
</html>
Определите стили таким образом, чтобы страница выглядела так,
как показано ниже: (Новые HTML-теги добавлять нельзя!)
65
Задание 6
2. Добавьте в документ следующий HTML-код:
<body>
<h1>Классификация тары и упаковки.</h1>
<p>Основными признаками, по которым классифицируют тару
и упаковку, являются <em>назначение, материал, состав, кон-
струкция, технология производства</em>.
<p >По <em>назначению</em> тару и упаковку можно разде-
лить на <em>производственную, транспортную, потребитель-
скую, специальную (консервирующую)</em>.</p>
<p><em>Потребительская</em> тара и упаковка предназнача-
ются для продажи населению товара, являются частью товара и
входят в его стоимость, а после реализации переходят в полную
собственность потребителя, как правило, не предназначаются
для самостоятельного транспортирования и перевозятся в транс-
портной упаковке. Потребительская тара имеет ограниченную
массу, вместимость и размеры. В большинстве случаев ее сум-
марный периметр не должен превышать <em>600 мм.</em></p>
<p><em>Транспортная</em> тара представляет собой самосто-
ятельную транспортную единицу и предназначена для перевоз-
ки, складирования и хранения продукции.</p>
<p><em>Производственная</em> тара предназначена для вы-
полнения внутрицеховых, внутризаводских и межзаводских
перевозок и накопления сырья, материалов, полуфабрикатов,
заготовок, готовых изделий и отходов.</p>
</body>
Определите стили таким образом, чтобы страница выглядела так,
как показано ниже: (Новые HTML-теги добавлять нельзя!)
66
Лабораторная работа № 11
Технология CSS. Позиционирование и визуализация,
использование статических и динамических фильтров
Цель работы: Знакомство со свойствами позиционирования и
визуализации CSS. Использование статических и динамических
фильтров.
Абсолютное позиционирование
Элемент, позиционированный абсолютно, не получает никако-
го пространства к документе. Это означает, что после позициониро-
вания он не оставляет после себя пустое пространство.
Для абсолютного позиционирования элемента свойство position
должно иметь значение absolute. Вы можете использовать значения
left, right, top и bottom для размещения бокса.
Относительное позиционирование
Позиция элемента, размещаемого относительно, обсчитывается
относительно его оригинальной позиции в документе. Это означает,
что вы смещаете элемент вправо, влево, вверх или вниз. Таким об-
67
разом, элемент всё ещё занимает в документе пространство после
позиционирования.
Чтобы позиционировать элемент относительно, установите в
свойстве position значение relative.
Перекрытие элементов
CSS оперирует в трёх измерениях - высота, ширина и глубина.
Для того, чтобы наложить элементы друг на друга необходимо
присвоить каждому элементу номер (z-index). Элемент с бóльшим
номером перекрывает элемент с меньшим номером.
Задание
1. Создать новую страницу. На странице с помощью стилевого
оформления, используя абсолютное позиционирование, создать
объемный заголовок.
1.1. Cоздайте HTML-документ, используя в качестве содержи-
мого следующий код:
<div
style="position:absolute;left:55;top:13">
COMPUTER
</div>
<div
style="position:absolute;left:50;top:10;color:re
d">COMPUTER
</div>
1.2. Задайте значение z-индекса для второго блока так, чтобы
верхний текст оказался впереди соответствующего слоя. Про-
смотрите полученные результаты.
1.3. Установите значение свойства visibility текстового слоя так,
чтобы текст стал невидимым.
1.4. Измените свойства слоя и текста так, чтобы текст позицио-
нировался, начиная с позиции top:50 left:50, а серый слой по-
зиционировался относительно текста на расстоянии 100 пик-
селов левее текста.
1.5. Создайте html-документ, используя позиционирование и
z-индекс для воспроизведения заголовка, приведенного на
рисунке.
68
1.7. Измените позиционирование вертикального слоя в примере
и расположите его в левой части окна браузера.
1.8. Измените позиционирование логотипа произвольным обра-
зом.
2. На этой же странице набрать текст объемом не менее 8 строк
(по вашему усмотрению). Оформить текст буквицей. В качестве
буквицы использовать изображение. Изображение создать в
графическом редакторе Paint. Файл сохранить с расширением
gif или jpg. Буквицу создать с помощью абсолютного позицио-
нирования.
3. На странице создать таблицу 2х4. В ячейки таблицы вставить
изображение van_gog76_big.jpg. Применить к изображениям
фильтры:
1. Alpha
2. Blur
3. Choma
4. FlipH
5. FlipV
6. Gray
7. Invert
8. XRay
4. Создать 5 таблиц с одной ячейкой в которой находится текст:
Пример фильтра.
1. Применить к ячейкам таблицы следующие фильтры.
2. DropShadow
3. Shadow
4. Glow
5. Mask
6. Wave
69
Лабораторная работа №12
Разработка динамических страниц с использованием Ja-
vaScript
Цель работы: ввести понятия сценария, теги интерактивности
Сценарии
Язык HTML служит для описания структуры текста, язык CSS –
для описания того, как эта структура должна отображаться браузе-
ром. Эти два языка не предусматривают возможности обмена ин-
формацией с пользователем. Однако часто это бывает необходимо.
Например, при создании учебного сайта есть потребность с веб-
странице, реализующей тестирование.
Существует язык, называемый языком сценариев, который поз-
воляет реализовывать простейшие действия над данными, которые
вводит пользователь, а также над свойствами элементов веб-
страницы. В нашем случае этот язык называется JScript.
Модель веб-страницы, в которой все элементы образуют иерар-
хию объектов, где на вершине находится объект window, называет-
ся Document Object Model (DOM). У каждого объекта есть состав-
ляющие, к которым можно обращаться с помощью символа "точка"
(прежде всего это свойства):
объект.свойство
Пример: обращение к свойству в команде присваивания
window.status = 'Это строка состояния'
Эта команда ("записать в строку состояния окна данный текст")
могла бы работать в какой-либо определенной ситуации, например,
при наведении указателя мыши на тот или иной элемент веб-
страницы. Подобные ситуации называются событиям. Сценарий –
это одна или несколько команд, которые запускаются при наступ-
лении события.
Рассмотрим типичный случай, когда в качестве свойства рас-
сматривается стиль некоторого элемента. Для обращения к объекту
(элементу P) используется слово this. Событием будет наведение
мыши: onmouseover
<p style="color:green"
onmouseover="this.style.color='red'">Интерактивный
абзац</p>
70
Мы можем видеть, что цвет текста абзаца при наведении на
текст указателя мыши изменяется на красный. Чтобы сработала об-
ратная ситуация (цвет менялся снова на зеленый), нужно внести
сценарий в описание события onmouseout:
<p style="color:green"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='green'">Интерактивный
абзац</p>
Обработка данных пользователя
Рассмотрим два способа получения информации от пользовате-
ля:
ввод текста;
подтверждение щелчком.
Для приема текста от пользователя предназначен элемент
<input type="text" name="имя" />
Для создания кнопки предназначен элемент
<input type="button" value="Надпись" onclick="сценарий" />
Воспользуемся командой alert(текст) для вывода на экран окна с
сообщением:
<input type="text" name="поле" />
<input type="button" value="Значение поля" onclick="alert
(поле.value)" />
после щелчка по кнопке появляется текст, введенный пользова-
телем
Применение сценариев
71
Точно так же, как вместо повторений одного и того же содер-
жимого атрибута style пользуются однократной записью стилей во
внешнем файле или в элементе <style></style>, вместо записи непо-
средственно в описании события можно ссылаться на сценарий, ко-
торый размещен в элементе <script></script>. Как и <style></style>,
он размещается в элементе <head></head>.
Чаще всего сценарий появляется там в виде функции.
function имя_функции(ноль или более аргументов){
команды сценария
}
Рассмотрим пример:
<script>
function приветствие (кого) {
alert ("Привет, " + кого + "!")
}
</script>
…
<input type="text" name="кто" />
<input type="button" value="Здороваться!"
onclick="приветствие (кто.value)" />
Мы начали обсуждение сценариев с упоминания тестов на веб-
странице. Чтобы создать примитивный тест, нам понадобится еще
один элемент HTML, принимающий ввод – радиопереключатель – и
конструкция языка JScript, выполняющая одно или другое действие
в зависимости от условия – условный оператор. Если выбран пра-
вильный вариант ответа, сценарий выводит положительную реак-
цию, иначе – отрицательную.
if (условие) команда1; else команда2
Если условие истинно, то будет выполнена команда1,
иначе будет выполнена команда2.
Пример:
В каком году заложен г. С.-Петербург?
<br/>
<input type="radio" name="вопрос1" />1812<br/>
<input type="radio" name="вопрос1" />1703<br/>
<input type="radio" name="вопрос1" />1624<br/>
<input type="button" value="Проверить!"
72
onclick="if (вопрос1[1].checked) alert('Верно!'); else
alert('Нет верного ответа!')" />
В данном примере условие – это выбранность (checked) одного
из радиопереключателей. Всего имеется три переключателя, у кото-
рых одно имя (Вопрос1). Доступ к ним осуществляется с помощью
индекса (номера в квадратных скобках, отсчитываемого с нуля –
Вопрос1[0], Вопрос1[1] и Вопрос1[2]).
Если вопросов два и более, удобнее создать одну на всех функ-
цию проверки. Она могла бы выглядеть следующим образом:
function проверка(верный) {
if (верный.checked) alert ('Верно!'); else alert ('Нет верно-
го ответа!')
}
…
<input type="button" value="Проверить!"
onclick="проверка(вопрос1[1])" />
Задание
1. Создайте функцию, которую можно подключать как к собы-
тию onmouseover, так и к событию onmouseout, которая меняет цвет
границы либо на на цвет фона, либо на контрастный. Тогда при
наведении мыши на элемент вокруг него будет вырисовываться
граница, а при удалении – исчезать.
2. Пусть есть два текстовых поля: число1 и число2. Команда
alert(число1.value+число2.value) не будет давать сумму, если в по-
лях введены два числа.
73
Чтобы содержимое поля трактовалось как число, нужно под-
вергнуть его преобразованию: parseFloat(число1.value)
Создайте калькулятор, выполняющий четыре арифметических
действия (+, -, * и /). Реализуйте для функции, отвечающей за деле-
ние, проверку деления на нуль.
3. Создайте тест из пяти вопросов.
3*. Если в элементе Script поместить команду var имя, то в па-
мяти будет созданя переменная имя. Создайте функцию, в которой
значение переменной увеличивается на 1 (имя = имя + 1 или имя++)
в случае правильного ответа, а затем выдается общее число пра-
вильных ответов. Соответственно, в этом тесте будет не пять кно-
пок после каждого вопроса, а одна после всего теста.
Добавления:
1. Если в блоке ветвления нужно использовать несколько ко-
манд, применяется форма:
if (условие) {
блок 1
} else {
блок 2
}
74
2. При необходимости использовать цикл применяют конструк-
цию for:
for (переменная=значение; условие; операция) {
тело цикла
}
Например, подсчитаем сумму чисел 1..10:
s = 0;
for (i=1; i<11; i++) {
s+= I;
alert (i);
}
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
1. Протоколы информационно-вычислительных сетей. Спра-
вочник. Под ред. И. А. Мизина и А. П. Кулешова, Радио и
связь, Москва, 1990.
2. Локальные вычислительные сети. Справочник. Под ред.
С.В.Назарова. М.: Финансы и статистика, 1994.
3. Бождай А.С., Финогеев А.Г. Сетевые технологии. Элек-
тронное учебное пособие, 2004.
4. Нанс Б. Компьютерные сети. - Пер с англ. - М.: Бином,
1995.
75
СОДЕРЖАНИЕ
ВВЕДЕНИЕ ....................................................................................................... 3
Лабораторная работа № 1
Браузер MS Internet Explorer ..................................................................... 4
Лабораторная работа № 2
Поиск информации в Internet .................................................................... 7
Лабораторная работа № 3
Разработка простой WEB-страницы на языке HTML
с использованием форматирования шрифтов и текста .............. 10
Лабораторная работа № 4
Разработка WEB-страницы на языке HTML
с использованием списков ..................................................................... 20
Лабораторная работа № 5
Разработка WEB-страницы на языке HTML
с использованием таблиц........................................................................ 28
Лабораторная работа № 6
Разработка WEB-страницы на языке HTML
с использованием графики, гиперссылок
и изображений-карт .................................................................................... 35
Лабораторная работа № 7
Использование форм при разработке WEB-страницы
на языке HTML .............................................................................................. 44
Лабораторная работа № 8
Использование фреймов при разработке WEB-страницы
на языке HTML .............................................................................................. 47
Лабораторная работа № 9
Технология CSS. Разработка цвето-шрифтовой схемы
и навигации сайта с помощью каскадных таблиц стилей ........... 56
Лабораторная работа № 10
Технология CSS. Проектирование оформления web-сайта
с помощью каскадных таблиц стилей ................................................. 62
Лабораторная работа № 11
Технология CSS. Позиционирование и визуализация,
использование статических и динамических фильтров .............. 66
Лабораторная работа № 12
Разработка динамических страниц
с использованием JavaScript ................................................................. 69
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ......................................... 74
Учебное издание
КОСТЮКЕВИЧ Елена Казимировна
ОСТАПЕНКО Инесса Витальевна
ИНФОРМАЦИОННЫЕ И СЕТЕВЫЕ ТЕХНОЛОГИИ
В УПАКОВОЧНОМ ПРОИЗВОДСТВЕ
Методическое пособие
для студентов специальности
1-36 20 02 «Упаковочное производство»
Технический редактор О.В. Песенько
Подписано в печать 27.05.2011.
Формат 60х84 1/16. Бумага офсетная.
Отпечатано на ризографе. Гарнитура. Таймс.
Усл. печ. л. 4,42. Уч.-изд. л. 3,45. Тираж 100. Заказ 493.
Издатель и полиграфическое исполнение:
Белорусский национальный технический университет.
ЛИ № 02330/0494349 от 16.03.2009.
Проспект Независимости, 65. 220013, Минск.