- •Лабораторная работа № 5 Создание Web-документов с помощью языка гипертекстовой разметки html
- •Краткие теоретические сведения
- •Порядок выполнения лабораторной работы
- •Варианты заданий
- •Содержание отчета
- •Вопросы
- •Литература
- •Учебное издание Информационные системы в менеджменте
- •0502 – “Менеджмент” специальности 6.050201 – “Менеджмент организаций”
- •49000, Г. Днепропетровск, ул. Набережная Ленина, 18
Информационные системы в менеджменте
Лабораторная работа № 5 Создание Web-документов с помощью языка гипертекстовой разметки html
Цель работы: приобретение практических навыков в освоении основных приемов по разработке и созданию HTML-страниц.
Краткие теоретические сведения
В лабораторной работе используются приемы расположения и форматирования текста, расположения рисунков, задания списков, а также приемы формирования таблиц при создании HTML-документов.
Для задания горизонтальной линейки используется тег <HR>.
Синтаксис:
<HR ALIGN=”расположение” SIZE=”толщина” WIDTH=”значение”>
Основные приемы форматирования текста заключаются в использовании различных парных тегов:
<B> (полужирный шрифт);
<I> (курсив);
<U> (подчеркивание);
<S> (вычеркивание);
<SUB> (нижний индекс);
<SUP> (верхний индекс).
Для размещения рисунка необходимо ввести следующую команду:
<IMG SRC=”pic.gif” ALIGN=” * ”>
Для задания списка могут быть записаны следующие теги:
<H2> Цвета радуги </H2>
<OL TYPE=”A”>
<LI> Красный;
<LI> Оранжевый;
<LI> Желтый;
<LI> Зеленый.
</OL>
Основные параметры таблицы могут быть записаны следующим образом:
<TABLE BGCOLOR=”RED” WIDTH=”60%”>
<CAPTION ALIGN=”TOP”> Фрукты</CAPTION >
<TR BGCOLOR=”YELLOW” ALIGN=”CENTER”>
<TD>яблоки<TD>бананы<TD>вишни</TR>
<TR ALIGN=”CENTER”>
<TD>5 кг<TD>7 кг<TD>3 кг</TR>
</TABLE>
Порядок выполнения лабораторной работы
Запустите текстовый редактор Блокнот, выполнив следующую последовательность команд: (Пуск, Программы, Стандартные, Блокнот).
Введите следующий документ (фамилию и инициалы необходимо указать в именительном падеже):
<HTML>
<HEAD>
<TITLE>ЛР Ф.И.О.</TITLE>
</HEAD>
<BODY>
Введите тег: <P>
Введите половину страницы произвольного текста (с конспекта лекций), используя при этом теги <P> и <HR>. Тег <HR> выберите по варианту заданий (табл. 3.6.1).
4. Введите тег: <P>
Введите произвольное стихотворение (до 10 строк) используя при этом в названии стихотворения заголовок первого уровня (<H1> и </H1>) и тег перехода на новую строку <BR>.
5. Введите тег: </BODY>
</HTML>
6. Сохраните этот документ под именем – имя 1.htm (имя 1 – это произвольное имя, и этот файл Вы в дальнейшем будете использовать при создании гиперссылок).
Следует обратить внимание на следующий аспект. Перед сохранением убедитесь, что сброшен флажок «Не показывать расширения для зарегистрированных типов файлов». Для просмотра выполните следующую последовательность действий: (Пуск, Настройка, Свойства папки, Вид).
В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .txt.
7. Запустите программу Internet Explorer, выполняя следующую последовательность действий: (Пуск, Программы, Internet Explorer).
8. Выполните команду (Файл, Открыть). Щелкните на кнопке «Обзор» и откройте файл имя 1.htm.
Посмотрите, как отображается этот файл. Где отображается содержимое элемента «TITLE»? Где отображается содержимое элемента «BODY»? Проверьте, что происходит с уменьшением ширины окна.
9. Откройте документ имя 1.htm в программе Блокнот.
10. Установите курсор после стихотворения (но перед тегом </BODY>).
10.1. Введите тег: <P>.
10.2. Введите тег: <A HREF=”имя 1.htm”>.
10.3. Введите фразу: «Ссылка на мой первый файл».
10.4. Введите закрывающий тег: </A>.
10.5. Введите тег: <P>.
10.6. Введите абзац текста, в котором на некоторых фразах или словах покажите основные приемы форматирования текста.
11. Сохраните документ под именем имя 2.htm.
12. Повторите пункты 7 и 8. Убедитесь при этом, что текст между тегами <A> и </A> выделен как ссылка (цветом и подчеркиванием). Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка. Щелкните на кнопке «Назад» на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.
13. Создание изображения и использование его на Web-странице.
13.1. Откройте программу Paint, выполнив следующие действия:
(Пуск, Программы, Стандартные, Paint).
Задайте размеры нового рисунка, например 80 100 точек с помощью действий: (Рисунок, Атрибуты).
Изобразите произвольный рисунок с обязательной вставкой в центре рисунка своей фамилии, имени и шифра группы.
Сохраните рисунок под именем pic.gif (где pic – произвольное имя, в формате GIF) и закройте программу Paint.
14. Вернитесь в программу Блокнот в файл имя 2.htm.
14.1. Установите текстовый курсор перед тегом </BODY>.
14.2. Введите тег: <HR> .
14.3. Введите произвольный текст в объеме 6 - 7 строк.
15. Установите курсор в начало введенного абзаца и введите команду для размещения рисунка. Размещение рисунка необходимо выполнить по индивидуальному заданию (табл. 3.6.2).
16. Сохраните документ под тем же именем.
17. Повторите пункты 7 и 8 и вернитесь в программу Блокнот.
18. Установите текстовый курсор перед тегом </BODY>.
19. Введите тег: <P>
20. Вставьте произвольный список. Название списка оформите как заголовок второго уровня (теги <H2> и </H2>). Тип списка и его параметры выбираются по индивидуальному заданию (табл. 3.6.3).
21. Введите тег: <P>
22. Вставьте таблицу. Основные параметры таблицы выбираются по индивидуальному заданию (табл. 3.6.4).
23. Сохраните документ под тем же именем.
24. Повторите пункты 7 и 8.
25. Просмотрите созданный Вами Web-документ и подготовьтесь к защите лабораторной работы.