Инструментальные средства Internet-технологий. Лабораторный практикум
.pdfЛабораторная работа №2
Создание и форматирование таблиц
Задание 1. Самостоятельное форматирование таблицы
Указания к выполнению
•Создайте новую Web-страницу в редакторе Блокнот.
•В элементе <TITLE> укажите название странички ″Л/р № 2. Задание 1″.
•Создайте таблицу 4/3.
•Задайте ширину бордюра таблицы равной 7 пикселям.
•Ширину таблицы сделайте равной ширине экрана.
•Текст в первой строке на тему: «Информационные ресурсы Internet» – выравнивание по центру, по горизонтали и по вертикали.
•Сделайте фон второй строки голубого цвета.
•Шрифт, которым будет написан текст на тему «Администрирование сети Internet» внутри второй строки , сделайте белым.
•В первую ячейку третьей строки вставьте рисунок из файла.
•Во второй ячейке третьей строки напишите описание данного рисунка.
•В третьей ячейке третьей строки сделайте фон красного цвета и укажите имя файла рисунка в правом нижнем углу ячейки.
•В четвертую строку вписать «Примечания».
Задание 2. Самостоятельное проектирование и создание таблицы
Указания к выполнению
•Создайте таблицу с содержанием на тему: «Информационные
ресурсы Internet».
•Ширину таблицы укажите 90 %.
•Самостоятельно задайте ширину бордюра таблицы.
•В первом столбце укажите номер каждой страницы (выравнивание по центру).
•Во втором столбце укажите перечень содержимого данной страницы (выравнивание по левому краю ячейки и размер шрифта 10).
•В последующих ячейках укажите краткое объяснение каждого пункта.
•Во всех столбцах фон сделайте разным цветом.
•Перед таблицей поместите заголовок «ИНФОРМАЦИОННО-
КОММУНИКАЦИОННЫЕ ВОЗМОЖНОСТИ INTERNET», вы-
делив его тегами<H2> и</h2>.
81
•Заголовок сделайте синим .
•Покажите умение форматировать текст с помощью традиционных элементов:
–– выделить фрагменты курсивом; –– полужирным шрифтом; –– выбрать шрифт; –– размер и цвет шрифта;
–– применить различные способы нумерации и ненумерованный список.
Сохраните листинг данного задания для размещения на вашем
Web-узле.
82
Лабораторная работа №3
Создание наборов рамок и связывание их с источниками данных
Задание 1. Создание фреймовой структуры
Указания к выполнению
•Создайте новую Web-страницу в редакторе Блокнот
•В элементе <TITLE> укажите название странички ″Л/р № 3. Задание 1″ и сохраните в файле frame.htm
•Создайте и сохраните в этой же папке файлы banner.htm, contents.htm, mypage.htm.
•Поделите окно по горизонтали на две рамки. Размер первой рамки 110 пикселей.
•Добавьте в первую рамку файл banner.htm с отформатированным текстом по теме: « ПЕРЕДАЧА ДАННЫХ В КОМПЬЮТЕР-
НЫХ СЕТЯХ»
•Разделите вторую рамку на две дополнительные вертикальные рамки, используя структуру вложенных фреймов размером 25 %, 75 %.
•Добавьте в первую вертикальную рамку файл contents.htm с отформатированным текстом по теме: «Эталонная модель внутри- и
межсетевого взаимодействия».
•Текст разместите по центру, используя полужирный шрифт
•Добавьте во вторую вертикальную рамку файл mypage.htm с отформатированным текстом по теме: «Организация межсетевого взаимодействия».
•Задайте ширину бордюра таблиц равной 5 пикселям.
•Сделайте фон второй рамки желтого цвета.
•Шрифт, которым будет написан текст внутри рамки, сделайте синим.
•Покажите умение форматировать текст с помощью традиционных элементов:
–– выделить фрагменты курсивом; –– выбрать размер и цвет шрифта;
–– применить способ нумерации римскими цифрами; –– текст разместить по центру, используя полужирный шрифт
Сохраните листинг данного задания для размещения на вашем Web-узле.
83
Лабораторная работа № 4
Фреймовая структура и форматирование текста на Web-странице
Задание1. Создание фреймовой структуры
Указания к выполнению
•Создайте новую Web-страницу в редакторе Блокнот.
•В элементе <TITLE> укажите название странички ″Л/р №4. Задание 1″ и сохраните в файле frame.htm
•Создайте и сохраните в этой же папке файлы banner.htm, contents.htm, mypage.htm.
•Поделите окно по горизонтали на две рамки. Размер первой рамки 100 пикселей.
•Добавьте в первую рамку файл banner.htm с отформатированным текстомпотеме:«ПРОТОКОЛЫ ТРАНСПОРТНЫХ УРОВНЕЙ».
•Во второй рамке создайте фреймовую структуру с тремя столбцами, используя структуру вложенных фреймов размером 30 %, 45 %, 25 %.
•Добавьте в первую вертикальную рамку файл contents.htm с от-
форматированным текстом по теме: «Система адресов Internet».
•Текствыровняйтеполевомукраю,используяшрифтразмером12.
•Добавьте во вторую вертикальную рамку файл mypage.htm с
отформатированным текстом по теме: «Система доменных имен».
•Задайте ширину бордюра таблиц равным 5 пикселям.
•Сделайте фон второй рамки желтого цвета.
•Укажите контактную информацию людей, осуществляющих поддержку документа: адреса электронной почты, телефоны и прочее.
•Добавьте в третью вертикальную рамку файл с отформатированным текстом по теме: «Система универсальных идентификаторов
ресурсов URL/URI».
•Используйте вложенный список.
•Шрифт, которым будет написан текст внутри рамок, сделайте разным.
•Покажите умение форматировать текст с помощью традиционных элементов:
–– выделить фрагменты курсивом; –– выбрать размер и цвет шрифта;
–– воспользоваться маркировкой переменных;
84
––применить разные способы нумерации;
––воспользоваться парой тегов <big> и <small>.
• Укажите контактную информацию людей, осуществляющих поддержку документа: адреса электронной почты, телефоны и прочее.
Сохраните листинг данного задания для размещения на вашем
Web-узле.
85
Лабораторная работа № 5
Запись html кода на Web-странице по образцу рисунка
Задание 1. Запись html кода на Web-странице по рисунку «Данные
документа»
Указание к выполнению
1.Написать html код для рис.1.
2.В окне тип документа указать: Реферат, Практическая работа, Лабораторная работа.
3.Внести личные данные студента из зачетной книжки.
Рис. 1. Данные документа
86
Рис. 2. Регистрация нового пользователя
Задание 2. Запись html кода на Web-странице по рисунку
«Регистрация нового пользователя»
Указание к выполнению
1.Написать html код для рис. 2.
2.В качестве данных пользователя внести личные данные студента.
87
Лабораторная работа № 6
Создание гиперссылок
Задание1. Создание гиперссылок
Указания к выполнению
•Создайте новую Web-страницу в редакторе Блокнот.
•В элементе <TITLE> укажите название странички ″Л/р №6. Задание 1″.
•Создайте и сохраните в этой же папке файлы page1.htm, page2. htm, page3.htm.
•Фон страниц сделайте разного цвета.
•Напервойстраницесоздайтетаблицу2×2шириной760пикселей.
•Верхнюю строку отведите под заголовок страницы и укажите название темы раздела: «ОСНОВЫ ТЕХНОЛОГИИ INTERNET\
INTRANET».
•Воспользуйтесь уровнем заголовка H2.
•Левый столбец отведите под меню раздела.
•Впишите меню и примените его в качестве внутренней гипер ссылки:
1. Главная страница
2. Сервисы INTRANET.
3. Преимущества и недостатки внедрения INTRANET-систем.
Примените полужирный шрифт 12 и выравнивание слева.
•На каждой странице поместите отформатированный текст соответствующий содержанию меню.
•На страницах page1.htm, page2.htm, page3.htm в теге < BODY>
определите цвет гиперссылок :
––все гиперссылки на странице – белые;
––активные гиперссылки – красные;
––посещенные гиперссылки – серые.
•Задайте ширину бордюра таблиц равной 7 пикселям.
•На странице page2.htm используйте рисунок в качестве гипер
ссылки.
• Покажите умение форматировать текст с помощью традиционных элементов:
––выделить фрагменты курсивом;
––выбрать размер и цвет шрифта;
––принять горизонтальную линейку;
88
––применить способ нумерации римскими цифрами;
––текст выровнять слева, используя полужирный шрифт.
• Установите гиперссылку на контактную информацию людей осуществляющих поддержку документа: адреса электронной почты, телефоны и прочее.
Сохраните листинг данного задания для размещения на вашем
Web-узле.
89
Лабораторная работа №7
Разметка Web-страницы при помощи таблиц и графических гиперссылок
Задание 1. Создание графических гиперссылок
Указания к выполнению
•Создайте новую Web-страницу в редакторе Блокнот.
•В элементе <TITLE> укажите название странички ″Л/р №7. Задание 1″.
•Создайте и сохраните в этой же папке файлы page1.htm, page2. htm, page3.htm.
•Фон страниц сделайте разного цвета.
•На первой странице создайте таблицу 2×2, шириной 740 пиксе-
лей.
•Верхнюю строку отведите под заголовок страницы и укажите название темы раздела: «ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА
ИНФОРМАЦИОННЫХ СЕРВИСОВ INTERNET».
•Воспользуйтесь уровенем заголовка H3.
•Левый столбец отведите под меню раздела.
•Создайте графическое меню с содержанием :
1.Главная страница
2.Поисковые системы Internet.
3.Глобальные справочники ресурсов и поисковые системы.
•Примените полужирный шрифт 12 и выравнивание слева.
•На каждой странице поместите отформатированный текст, соответствующий содержанию меню.
•На странице page1.htm поместите тематическое изображение в
правой части рабочей зоны.
•На страницах page1.htm, page2.htm, page3.htm в теге <BODY>
определите цвет гиперссылок :
–– все гиперссылки на странице – белые; –– активные гиперссылки – красные.
•На странице page2.htm поместите динамическое изображение.
•На странице page3.htm отформатированный текст согласно со-
держанию поместите в рамку.
•Задайте разный цвет границы сразу для всех сторон рамки .
•Покажите умение форматировать текст с помощью традиционных элементов:
90