Подготовка простейших Web- страниц

Лабораторная работа, 07 Декабря 2012, автор: пользователь скрыл имя

Описание работы

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

Скачать полностью (244.45 Кб) Сколько стоит заказать работу?

Работа содержит 1 файл

Создание Web.doc

— 359.50 Кб (Скачать)

Файлы формата JPEG (Joint Photographic Expert Group — по названию группы исследователей, предложившей этот формат, (читается «джей-пег») могут иметь расширение JPEG или JPG. Формат предназначен для хранения фотографических изображений, использующих 24-разрядный цвет.

Использование таблиц на Web-странице. Фреймы.

Таблицы удобны для представления больших объемов данных, а многие Web-дизайнеры используют их также для точного размещения элементов Web-страниц Таблица в языке HTML задается при помощи парного тега <ТАВLЕ>. Она может содержать заголовок таблицы, определяемый парным тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов и строк задают парным тегом <ТН>, а обычные ячейки — парным тегом <TD>. Закрывающие теги </ТН> и </TD> можно опускать.

Таблица 1. Атрибуты элементов, используемых при создании таблицы

Атрибут	Элемент	Назначение
ALIGN=	Таблица, заголовок, строка, ячейка	Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей
VALIGN=	Строка, ячейка	Выравнивание по вертикали
WIDTH=	Таблица, ячейка	Ширина
HEIGHT=	Ячейка	Высота
COLSPAN=	Ячейка	Протяженность в несколько столбцов
ROWSPAN=	Ячейка	Протяженность в несколько строк
BGCOLOR=	Таблица, ячейка	Цвет фона
CELLSPACING=	Таблица	Зазор между ячейками
CELLPADDING=	Таблица	Зазор между содержимым ячейки и ее границей
BORDER=	Таблица	Отображение границ ячеек и внешней рамки таблицы

Язык HTML позволяет в рамках одной Web-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей — фреймов. Разбиение страницы описывается документом HTML особого рода, структура которого отличается от обычной. Тело документа заменяется описанием фреймов, задаваемым парным тегом <FRAMESET>. Элемент BODY в таком документе должен отсутствовать, а при наличии — игнорируется браузером.

При помощи атрибута rows тэга <frameset> мы указываем, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописываем высоту каждого фрейма (в пикселях). Звёздочка (*) указывает на то, что данный фрейм будет занимать всё оставшееся пространство по высоте. Тэг frame сообщает браузеру, какие документы у нас будут загружены во фреймах.

Практическая часть

Задание 1

Откройте программу Блокнот
Наберите следующий текст:

<html>

<head>

<title>финансово-экономические программы</title>

</head>

<body>

<h1 align=center>Российский рынок финансово-экономических программ</h1>

<hr>

<h2>Введение</h2>

<h3>Часть 1</h3>

<Dl>

<dt>Классификация программных продуктов

<dt>Обзор программных продуктов ведущих фирм

<dt>Организация и аналитические возможности бухгалтерских программ

<dt>Организация бухгалтерских программ

<dt>Глубина детализации учета в программных продуктах

</dl>

</body></html>

Сохраните текст под именем 1.htm
Запустите Internet Explorer
Откройте файл 1.htm.

Задание 2

Пример использования тэгов параграфа, перевода строки и горизонтали:

Наберите в программе Блокнот следующий текст:

<html>

<head>

<title>Параграфы и линии</title>

</head>

<body>

<h1>Волжский институт экономики, педагогики и права</h1>

<hr>

<h2>Экономический факультет</h2>

Экономический факультет осуществляет подготовку по специальностям:<br>

Менеджмент организации<br>

Бухгалтерский учет анализ и аудит<br>

Налоги и налогообложение<br>

Срок обучения: 5 лет (дневная форма обучения)<br> 6 лет (заочная форма обучения)

<hr>

</body></html>

Сохраните текст под именем 2.htm.
Запустите Internet Explorer.
Откройте файл 2.htm.

Задание 3

1. Самостоятельно создайте Web-документ следующего содержания, сохраняя стили и выполнив заголовок «Европа приглашает…» оранжевым цветом, а «Европейская научно-техническая…» - зеленым:

ЕВРОПА ПРИГЛАШАЕТ РОССИЙСКИХ УЧЕНЫХ И
СПЕЦИАЛИСТОВ К СОТРУДНИЧЕСТВУ

__________________________________________

Европейская научно-техническая программа
«Технологии информационного общества» открыта
для научно-исследовательских организаций России

При поддержке Комиссии Европейского Союза и администраций 10 регионов России создана сеть региональных центров по научно-техническому сотрудничеству с ЕС. Задача сети – содействие участию российских научных и исследовательских коллективов в финансируемой Комиссией ЕС программе «Технологии информационного общества».

Сохраните файл под именем 3.htm.
Запустите Internet Explorer.
Откройте файл 3.htm.

Задание 4

Создайте новый Web-документ 4.htm. В новом документе создайте гиперссылку на документ 3.htm.

Откройте документ 1.htm в программе Блокнот.
Перед строчкой </BODY> введите фразу: Текст до ссылки;
Введите тег: <А HREF="3.htm">;
Введите фразу: Европейская программа;
Введите закрывающий тег </А>;
Введите фразу: Текст после ссылки;
Сохраните документ под именем 4.htm;
Запустите обозреватель Internet Explorer;
Откройте файл 4.htm.
Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).
Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

Задание 5

Создайте изображение и поместите его на Web-странице.

Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок > Атрибуты).
Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.
Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.
Сохраните рисунок под именем picl .gif (в формате GIF).
Откройте документ 3.htm в программе Блокнот.
Установите текстовый курсор в начало текста «При поддержке Комиссии… .
Введите тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">.
Сохраните документ под именем picture.htm.
Запустите обозреватель Internet Explorer.
Откройте файл picture.htm. Посмотрите на получившийся документ, обратите внимание на изображение.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке "Обновить" на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке «Обновить» на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке «Обновить» на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

Задание 6

Создайте упорядоченные (нумерованные) и неупорядоченные (маркированные) списки на Web-странице.

Откройте документ 3.htm в программе Блокнот.
Вставьте в документ тег <OL>, который начинает упорядоченный (нумерованный) список.
Вставьте в документ следующие элементы списка:

классификация финансово-экономических программ,
основные функции финансово-экономических программ,
корпоративные системы и их назначение,
предваряя каждый из них тегом <LI>.

Завершите список при помощи тега </0L>.
Сохраните полученный документ под именем 5.htm.
Запустите обозреватель Internet Explorer.
Откройте файл 5.htm.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <OL TYPE="I">, который начинает упорядоченный (нумерованный) список.
Вставьте в документ следующие элементы списка:

Завершите список при помощи тега </0L>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Обратите внимание на полученный результат.
Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <UL>, который начинает неупорядоченный (маркированный) список.
Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Обратите внимание на полученный результат.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <UL TYPE="SQUARE">, который начинает неупорядоченный (маркированный) список.
Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <UL TYPE="CIRCLE">, который начинает неупорядоченный (маркированный) список.
Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <DL>, который начинает список определений.
Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.
Вставьте в список соответствующие определения, предваряя их тегом <DD>.
Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений (рис. 1).

<ol>