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

Автор: Пользователь скрыл имя, 07 Декабря 2012 в 19:34, лабораторная работа

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

Цель работы: изучение языка гипертекстовой разметки, получение практических навыков работы по оформлению и подготовке материалов к публикации в Интернет, созданию документов, имеющих формат, принятый в Интернете, а также 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

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

<html>

<head>

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

</head>

<body>

<font color=red>

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

<hr>

<font color=green>

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

<hr width=50% align=left>

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

<Dl>

<font size=4 color=orange>

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

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

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

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

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

</dl>

</body></html>

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

Задание 2

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

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

<html>

<head>

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

</head>

<body>

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

<hr>

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

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

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

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

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

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

<hr>

</body></html>

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

Задание 3

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

 

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

__________________________________________

 

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

 

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

 

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

Задание 4

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

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

Задание 5

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

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

Задание 6

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

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

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

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

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

  1. Завершите список при помощи тега </0L>. Сохраните документ под тем же именем.
  2. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Обратите внимание на полученный результат.
  3. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.
  4. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
  5. Вставьте в документ тег <UL>, который начинает неупорядоченный (маркированный) список.
  6. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
  7. Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
  8. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Обратите внимание на полученный результат.
  9. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
  10. Вставьте в документ тег <UL TYPE="SQUARE">, который начинает неупорядоченный (маркированный) список.
  11. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
  12. Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
  13. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
  14. Вставьте в документ тег <UL TYPE="CIRCLE">, который начинает неупорядоченный (маркированный) список.
  15. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
  16. Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
  17. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.
  18. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
  19. Вставьте в документ тег <DL>, который начинает список определений.
  20. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.
  21. Вставьте в список соответствующие определения, предваряя их тегом    <DD>.
  22. Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.
  23. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений (рис. 1).

<ol>

<LI>Классификация финансово-экономических программ

<LI>Основные функции финансово-экономических программ

<LI>Корпоративные системы

</ol>

<ol type="I">

<LI>Классификация финансово-экономических программ

<LI>Основные функции финансово-экономических программ

<LI>Корпоративные системы

</ol>

 

<ul>

<LI>Классификация финансово-экономических программ

<LI>Основные функции финансово-экономических программ

<LI>Корпоративные системы

</ul>

 

<ul type="square">

<LI>Классификация финансово-экономических программ

<LI>Основные функции финансово-экономических программ

<LI>Корпоративные системы

</ul>

 

<ul type="circle">

<LI>Классификация финансово-экономических программ

<LI>Основные функции финансово-экономических программ

<LI>Корпоративные системы

</ul>

 

<DL>

<DT>Интегрированные бухгалтерские системы

<DD>Это системы, объединяющие и поддерживающие ведение всех основных учетных функций<br> и разделов бухгалтерского учета.

<DT>Бухгалтерия-Офис

<DD>Это системы автоматизации управления предприятием.

<DT>Финансово-аналитические системы

<DD>Это системы для анализа, прогнозирования и управления бизнесом.<br> Позволяют получить наиболее эффективные варианты развития предприятия,<br>принять взвешенные, просчитанные решения.

</DL>


 

Рис. 1

Задание 7

Создайте таблицу «Список телефонов».

  1. Откройте документ 1.htm в программе Блокнот.
  2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов.
  3. Введите тег <TABLE BORDER="10" WIDTH="100%">.
  4. Введите строку:<CAPTION АLIGN="ТОР">Список телефонов</САРТION>.
  5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:<TR BGCOLOR="YELLOW" ALIGN="CENTER">

<ТН>Фамилия<ТН>Номер телефона

  1. Определите последующие строки таблицы, предваряя каждую из их тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.
  2. Последнюю строку таблицы задайте следующим образом:

<TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.

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