Лабораторные работы дисциплина: «Введение в интернет» № 1-5

Лабораторная работа N 1
Базовое форматирование текста
Используя шаблон html-файла cоздать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 1",а на экране текст указанного вида.

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

2-я часть задания
текст следующего вида, где каждая строка имеет начертание, соответствующее тому, что написано. Между собой строки разделены горизонтальными линиями разного цвета.

Ответы на контрольные вопросы:
1.Что такое тэги и их атрибуты?
2. В чем сходство синтаксиса заголовков и горизонтальных линий?
3. Как работают команды <P> и <BR>?
4. Каким образом задаются стиль и размер шрифта?
5. Для чего служат символьные примитивы?
6. Назовите два способа задания цвета в документе.

Лабораторная работа № 2
Шрифты, списки, гиперссылки

Задание
Cоздать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 2".
Задать разный цвет для непосещенной, посещенной и активной гиперссылок.
Фон задать в виде рисунка из имеющихся в директории FONS.
Обратить внимание на использование шрифтов Arial и Courier New.
"Лабораторная № 1" - гиперссылка на соответствующий файл - должна быть справа на экране;
"Лабораторная № 2" - заголовок (по центру экрана и соответствующим шрифтом);
"Предметы" оформить в виде вложенных списков по образцу предложенному ниже (предметы 2-го и 3-го курсов добавить самостоятельно);
"Факультеты" - заголовок (по центру экрана и соответствующим шрифтом); написать сокращенное и расшифрованное название факультетов с использованием списков определений (самостоятельно добавить еще 2 названия факультетов).

Ответы на контрольные вопросы:
1.Опишите способ задания цвета, размера и вида семейства шрифтов.
2.Какие тэги задают нумерованный список, ненумерованный список и список определений?
3.Как задать значок ненумерованного списка?
4.Что такое гиперссылка и URL?
5.Опишите особенности использования сокращенных URL.
6.В какой команде задаются цвета гиперссылок?

Лабораторная работа N 3
Таблицы. Фреймы

Первая часть задания. Таблицы
Создать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 3-1". С использованием команд создания таблицы сформировать таблицу по указанному варианту.
Обратить внимание на ширину первого столбца (задать в процентах от ширины таблицы), шрифт (курсив, Courier New, Arial) и расположение текста (по центру, слева, справа).

Вторая часть задания. Фреймы
Используя описанные команды, создать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 3-2", а экран разделен на 3 фрейма:
Вверху фрейм и файл имеют имя head; слева - index; справа - main.
В файле head.htm содержится заголовок "РАСПИСАНИЕ ЗАНЯТИЙ" - по центру.
В файле index.htm - дни недели, являющиеся гиперссылками, при нажатии на которые справа выводится список занятий в данный день.
Файл main.htm содержит только фразу: "Выбирайте день недели".
Для отдельных дней недели нужно создать файлы с именами вида d1.htm ... d6.htm.

Ответы на контрольные вопросы:
1.Назовите 2 основных тэга, определяющих таблицу.
2.Как регулировать размеры таблицы, ее ячеек и рамки?
3.Как группировать ячейки таблицы?
4.Каковы возможности фреймов?
5.Объясните атрибуты команды <FRAMESET>.

Лабораторная работа N 4
Графика и картинки

Первая часть задания. Графика
Создать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 4-1", а на экране используя таблицу собрать мозаику из приведенных ниже элементов (они расположены в директории RIS/LAB04):
Обязательно сделать так, чтобы при наведении мышки на картинку, рядом с указателем мышки появлялось название файла.
Рамку вокруг таблицы не отрисовывать. Название таблицы: "МОЗАИКА" - расположить сверху по центру.
Для того, чтобы между картинками не было промежутков, в команде <TABLE> задайте атрибуты BORDER=0, CELLSPACING=0, CELLPADDING=0.

Вторая часть задания. Активные рисунки
Используя описанные команды создать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 4-2", а экран разделен на два фрейма:
В одном фрейме (слева) выведен htm-файл с картинкой ris.jpg, которая является активным рисунком.
Во втором фрейме (справа) должны появляться названия того, на что указывает мышка (для каждого названия свой htm-файл), например: "это глобус", "это линейка" и т.д.

Примечание
Для того, чтобы определить координаты элементов рисунка, нужно файл под названием ris.bmp из директории RIS открыть в графическом редакторе Paint и выбрать инструмент "Карандаш". При движении курсором по рисунку, справа внизу будут показываться X и Y координаты курсора в пикселях.

1.Объясните атрибуты команды <IMG>.
2.Как задать картинку, "обтекаемую" текстом?
3.Как задать использование картинки в качестве гиперссылки?
Картинка может быть средством задания и управления выбором гиперссылок в HTML документе. В этом случае на команду IMG должна указывать гиперссылка, определяемая командой A.
4.Опишите способ создания "активной" картинки, в которой разные части картинки имеют разные ссылки.

Лабораторная работа N 5
Формы. Каскадный стиль документа

Задание
Используя описанные команды, создать документ, в котором в заголовке окна браузера должна быть надпись "Лабораторная 5", а экран содержал бы форму, включающую в себя следующие поля:
1. Имя пользователя (идентификатор "nm");
2. Пароль (идентификатор "psw");
3. Пол (мужскому полу соответствует идентификатор "m", женскому - "f");
4. Город проживания (идентификатор "city", город задается выбором из списка "Новосибирск", "Томск", "Красноярск", "Омск", "Другой");
5. Есть ли у Вас высшее образование? (идентификатор "ed");
6. Ваша биография (идентификатор "bio");
а также кнопок Отправить" и "Очистить".
Файл Lab5.htm

Ответы на контрольные вопросы:
1.Объясните атрибуты команды <FORM>.
2.Назовите 4 основных команды, задающих интерфейсные элементы формы, и объясните особенности этих команд.
3.Для каких целей удобно использовать каждый из типов команды <INPUT>?
4.В каких местах документа можно задавать его стиль?
5.Назовите основные элементы CSS.

Все лабораторные работы зачтены
Специальность ПОВТиАС (ПОиВТ)