До проведення лабораторних занять та виконання
Г.В. Штинь
В.В. Сур
ІНФОРМАЦІЙНІ СИСТЕМИ ТА ТЕХНОЛОГІЇ
В ЕКОНОМІЦІ
Вивчення мови HTML. Розробка web-сторінок.
Методичні вказівки
До проведення лабораторних занять та виконання
контрольних робіт
для студентів ЗДІА за напрямками
7.0501 – «Економіка і підприємництво»
7.0502 – «Менеджмент»
Запоріжжя
Міністерство освіти і науки України
Запорізька державна інженерна академія
ІНФОРМАЦІЙНІ СИСТЕМИ ТА ТЕХНОЛОГІЇ
В ЕКОНОМІЦІ
Вивчення мови HTML. Розробка web-сторінок.
Методичні вказівки
до проведення лабораторних занять та виконання
контрольних робіт
для студентів ЗДІА за напрямками
7.0501 – «Економіка і підприємництво»
7.0502 – «Менеджмент»
Рекомендовано до видання
на засіданні кафедри ЕК,
протокол № 1 від 30.08.2005 р.
Інформаційні системи і технології в економіці. Вивчення мови HTML. Роробка web-сторінок. Методичні вказівки до проведення лабораторних занять та контрольних робіт для студентів ЗДІА за напрямками 7.0501 – «Економіка і підприємництво», 7.0502 – «Менеджмент»/ Укл.: ас. Штинь А.В., ас. Сур В.В. – Запоріжжя: ЗДІА, 2005. – 50с.
Методичні вказівки призначені для студентів ЗДІА за напрямками 7.0501 – «Економіка і підприємництво», 7.0502 – «Менеджмент», які виконують лабораторні завдання та контрольні роботи по курсу “Інформаційні системи і технології в економіці”. Вказівки містять повний опис лабораторних занять, завдання по варіантах на контрольну роботу, список рекомендованої літератури.
Укладачі:
Штинь Ганна Василівна, асистент
Сур Валентина Василівна, асистент
Відповідальний за випуск : Зав. кафедрою ЕК
проф., к.т.н. Никітін Г.Ф.
ЗМІСТ
Часть I. Создание Web-страниц. Изучение языка HTML. 6
................................................. 9
Общее задание 1. 9
................................................................. 9
................................... 10
Общее задание 2. 11
........................................ 13
Общее задание 3. 13
.............. 14
Общее задание 4. 16
................ 17
Общее задание 5. 19
............... 20
Общее задание 6. 21
................................................ 22
................................................. 23
............................................... 24
................................................... 24
Общее задание 7. 24
Индивидуальное задание №1 «Моя личная web-страница». 25
Часть II. Формы... 27
Тэг FORM.. 27
Элементы формы: TEXTAREA. 29
Элементы формы: SELECT. 31
Элемент <OPTION>.. 32
Элементы формы: <INPUT>.. 33
Индивидуальное задание №2. «Создание формы». 38
Задания на контрольную работу. 45
ТЕСТЫ... 50
ЛИТЕРАТУРА.. 51
Часть I. Создание Web-страниц. Изучение языка HTML.
HTML - Hyper Text Markup Language.
Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW -Всемирная Паутина - распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно использовать, например MicroSoft Internet Explorer или Opera (просмотрщик или броузер).
Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
Существуют три способа создания Web-страниц (или документов HTML):
1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Технология создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm.
Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид/Источник. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
3) Использование WinWord, где создается текст документа, который затем конвертируется в HTML-формат.
Рассмотрим основные понятия языка HTML.
1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов.
2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например:
<HTML> Конечный тег всегда снабжается косой чертой: </HTML>.
3. Атрибуты (параметры) тега – следуют за именем тега и отделяются друг от друга одним или несколькими знаками табуляции или пробелами. Порядок записи атрибутов в теге значения не имеет. Значение атрибута следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута – одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов.
4. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
5. Фрейм - область гипертекстового документа со своими полосами прокрутки.
6. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
7. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей.
8. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы.
Рассмотрим общую структуру типичного простейшего документа HTML:
<COMMENT>Комментарий</COMMENT>
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY>
Здесь расположен текст самого документа HTML.
</BODY>
</HTML>
 |
| <HTML> . . . </HTML> | Определяет начало и конец документа. |
| <HEAD> . . . </HEAD> | Определяет начало и конец заголовка документа. |
| <TITLE> . . . </TITLE> | Здесь указывается заглавие текущей страницы. |
| <BODY> . . . </BODY> | Определяет начало и конец тела документа. |
| Атрибуты тега BODY: | |
| BGCOLOR=" . . . " | - определяет цвет фона; |
| BACKGROUND=" . . . " | - указывает адрес файла для фона; |
| TEXT=" . . . " | - задаёт цвет текста; |
| LINK=" . . . " | - задаёт цвет гиперсвязей (ссылок); |
| VLINK=" . . . " | - задаёт цвет ссылок, где пользователь уже побывал; |
| ALINK=" . . . " | - задаёт цвет активной гиперсвязи; |
| <! . . . > | - используется для вставки комментария; |
| Пример использования: <BODY BACKGROUND="31.jpg" LINK="880000" VLINK="0a00ab" ALINK="ffff00"> |
Общее задание 1. Создайте простой html-документ index_ВашеИмя.html c заголовком «Мой первый html-документ», фон документа – коралловый (coral), цвет текста – желтый (yellow), цвет ссылок – индиго (indigo). Между тегами <BODY> и </BODY> введите любой текст для просмотра цветовых решений (цвет ссылок вы пока не увидите).
 |
| Параграфы и абзацы: | |
| <BR> | Начало новой строки, перевод строки. |
| <P> или <P>…</P>(если с атрибутом) | Начало нового абзаца, перевод строки с отступом. |
| <DIV> . . . </DIV> | Для создания раздела в тексте. |
| Атрибуты тегов Р и DIV: | |
| ALIGN=left ALIGN=right ALIGN=center | - определение способа выравнивания блока (слева, справа, по центру); |
| Заголовки: | |
| <H1> . . . </H1> | Заголовок первого уровня. |
| <H6> . . . </H6> | Заголовок шестого уровня. |
| Пример H# с атрибутом: <H2 align=center> | |
| Разделители: | |
| <HR> | Горизонтальная линия, идущая через весь экран. |
| Атрибуты тега HR: | |
| SIZE=" . . . " | - определение толщины линии (в пикселах); |
| WIDTH=" . . . " | - определение длины линии (в пикселах или в процентах от ширины страницы); |
| COLOR=" . . . " | - определение цвета линии; |
| ALIGN=left ALIGN=right ALIGN=center | - определение способа выравнивания линии (слева, справа, по центру); |
| NOSHADE | - без использования трёхмерных эффектов; |
| Примеры использования HR: <HR COLOR="008000" SIZE="1" NOSHADE> <HR SIZE="3" WIDTH="50" ALIGN=right> <HR SIZE="5" WIDTH="50%" ALIGN=сenter> |
 |
Начертание в правом столбце даёт пример применения описываемого тега.
| <BASEFONT SIZE= . . . > | Установка размера базового шрифта. Диапазон - от 1 до 7. (По умолчанию принимается 3). | |
| <BIG> . . . </BIG> | Текст будет отображаться шрифтом большего размера. | |
| <SMALL> . . . </SMALL> | Текст будет отображаться шрифтом меньшего размера. | |
| <B> . . . </B> | Полужирный текст. | |
| <I> . . . </I> | Текст, выделенный курсивом. | |
| <U> . . . </U> | Подчёркнутый текст. | |
| <STRIKE> . . . </STRIKE> или <S> . . . </S> | | |
| <TT> . . . </TT> | Шрифт фиксированной ширины. | |
| <BLINK> . . . </BLINK> | Мигающий текст. | |
| <SUB> . . . </SUB> | Текст смещается вниз. | |
| <SUP> . . . </SUP> | Текст смещается вверх. | |
| <FONT> . . . </FONT> | Определение цвета, размера и гарнитуры текста. | |
| Атрибуты тега FONT: | ||
| COLOR=" . . . " | - определение цвета текста; | |
| FACE=гарнитура | - определение типа гарнитуры; | |
| SIZE=" . . . " | - определение размера шрифта от 1 до 7 или относительно базового размера с помощью значений +n или -n; | |
| Примеры использования FONT: <FONT FACE="arial" SIZE="2" COLOR="5e0000"> <FONT SIZE="+3" COLOR="red"> | ||
Общее задание 2.
1) Установите размер базового шрифта равный трем.
2) Создайте центральный заголовок второго уровня «Операционные системы».
3) Затем введите определение:
«Операционная система - это программа, которая управляет аппаратными и программными средствами компьютера, предназначенными для выполнения задач пользователя».
4) До и после определения начертите горизонтальные линии серого цвета.
5) Создайте заголовок третьего уровня «Операционная система Linux» с выравниванием по центру,
6) Затем прочертите красную горизонтальную линию толщиной 20 пикселей, занимающую 30% ширины экрана,
7) Затем введите абзацы:
Первый абзац - выравнивание по правому краю: базовый цвет текста, размер текста – на 1 больше базового, все английские слова – курсивом, все заглавные буквы – полужирным:
«Linux - это операционная система для IBM-совместимых персональных компьютеров и рабочих станций. Это многопользовательская ОС с сетевой оконной графической системой X Window System.»
Второй абзац - выравнивание по левому краю: цвет текста – синий, гарнитура текcта - Comic Sans MS, все английские слова смещены вниз, все заглавные буквы – разными цветами, остальные эффекты показаны в тексте:
«ОС Linux поддерживает стандарты открытых систем и протоколы сети Интернет и совместима с системами Unix, DOS, MS Windows. Все компоненты системы, включая исходные тексты, распространяются с лицензией на свободное копирование и установку для неограниченного числа пользователей».
 |
| <A HREF="Адрес"> горячая точка</A> | Гипертекстовая связь с другой страницей сервера. |
| <A HREF="#Имя"> горячая точка</A> | Гипертекстовая связь в этом же документе (ссылка на закладку) |
| <A NAME="Имя"> место перехода</A> | Определяет место перехода по гиперсвязи в документе (закладка). |
| <A HREF="Адрес#Имя"> горячая_точка</A> | Гиперсвязь к определённой точке на другой странице сервера. |
| <A HREF="Адрес"> <IMG SRC="Имя"></A> | Гиперсвязь по изображению с другой страницей сервера (активное изображение). |
| <A HREF="file://fname.mov"> горячая точка </A> | Гиперсвязь к файлу изображения, видеофайлу, аудиофайлу и т.п. |
| Атрибуты тега A HREF: | |
| <A HREF="Адрес" TARGET="_TOP"> горячая точка </A> | Атрибут TARGET указывает, что страница, заданная ссылкой, загрузится в новом экземпляре броузера. |
| <A HREF="Адрес" TARGET="_BLANK"> горячая точка </A> | - страница, заданная ссылкой, загрузится в новом пустом окне. |
| <A HREF="Адрес" TARGET="_SELF"> горячая точка </A> | - страница, заданная ссылкой, загрузится в окне, содержащем ссылку. |
| <A HREF="Адрес" TARGET= "_PARENT"> горячая точка </A> | - страница, заданная ссылкой, загрузится в окне, являющемся непосредственным владельцем набора фреймов. |
| <A HREF="Адрес" TARGET="Имя_фрейма"> горячая точка </A> | Атрибут TARGET указывает, что страница, заданная ссылкой, загрузится в указанном фрейме. |
Общее задание 3. Создайте новый документ lesson3.html, содержащий ссылку на уже созданный вами ранее документ index_ВашеИмя.html.Ссылкой является текст «Перейти на главную страницу «Операционные системы». Страница, заданная ссылкой, открывается в новом окне.
Теперь в lesson3.html создайте ссылку «ОС LINUX», которая перейдет на закладку, расположенную на странице index_ВашеИмя.html (до этого необходимо создать закладку в файле index_ВашеИмя.html). При нажатии на ссылку должен открыться документ index_ВашеИмя.html сразу на заголовке «Операционная система Linux».
 |
В правом столбце даётся пример применения описываемого тега.
| Элементы списка: | |
| <LI>aaa <LI>bbb <LI>ссс | |
| Для того, чтобы задать список, каждый элемент его помечается (можно в строку). | |
| Атрибуты тега LI (значения указаны ниже): | |
| TYPE="CIRCLE/DISK/SQUARE" | Тип метки для этого и последующих элементов в неупорядоченном списке. |
| TYPE="A/a/I/i/1" | Тип нумерации для этого и последующих элементов. |
| VALUE="n" | Указывается номер, с которого начинать отсчёт. |
| Неупорядоченные (маркированные) списки: | |
| <UL> . . . </UL> |
|
| Атрибуты тега UL: | |
| <UL COMPACT> . . . </UL> | Атрибут COMPACT указывает, что список будет представлен в более компактном виде. |
| <UL TYPE="CIRCLE"> . . . </UL> |
|
| <UL TYPE="DISK"> . . . </UL> | · Атрибут TYPE="DISK" указывает, что метка будет в виде диска (по умолчанию). |
| <UL TYPE="SQUARE"> . . . </UL> |
|
| Упорядоченные списки: | |
| <OL> . . . </OL> | 1. Упорядоченный список. |
| Атрибуты тега OL: | |
| <OL TYPE="A"> . . . </OL> | A. Атрибут TYPE="A" указывает, что метки будут в виде прописных букв. |
| <OL TYPE="a"> . . . </OL> | a. Атрибут TYPE="a" указывает, что метки будут в виде строчных букв. |
| <OL TYPE="I"> . . . </OL> | I. Атрибут TYPE="I" указывает, что метки будут в виде больших римских цифр. |
| <OL TYPE="i"> . . . </OL> | i. Атрибут TYPE="i" указывает, что метки будут в виде маленьких римских цифр. |
| <OL TYPE="1"> . . . </OL> | 1. Атрибут TYPE="1" указывает, что метки будут в виде арабских цифр (по умолчанию). |
| <OL START="3"> . . . </OL> | 3. Атрибут START="3" определяет, что список будет пронумерован с указанной цифры. |
| Списки определений: | |
| <DL> . . . </DL> | Список определений (словарь терминов). |
| <DT> . . . | Этот тег стоит перед Термином. |
| <DD> . . . | Этот тег стоит перед Определением указанного выше Термина. |
| Пример использования: <DL> <DT>Internet <DD>Всемирная компьютерная сеть сетей, предоставляющая доступ к информации по всему миру. <DT>Гипертекст <DD>Система гипертекста устанавливает связи между небольшими фрагментами информации, упрощая поиск необходимых данных. <DL> | |
| Internet Всемирная компьютерная сеть сетей, предоставляющая доступ к информации по всему миру. Гипертекст Система гипертекста устанавливает связи между небольшими фрагментами информации, упрощая поиск необходимых данных. |
Общее задание 4.
Посредством создания маркированного и упорядоченного списков введите следующий текст: