Таблицы в HTML Организация расположения элементов

СОДЕРЖАНИЕ
Лабораторная работа №1. ................................................................................... 2
CОЗДАНИЕ ЭТАЛОННЫХ WEB-СТРАНИЦ ................................................. 2
Лабораторная работа №2. ................................................................................... 5
УСЛОЖНЕННЫЕ СТРУКТУРЫ ТЕКСТА НА .............................................. 5
WEB-СТРАНИЦАХ ............................................................................................ 5
Лабораторная работа №3. ................................................................................. 14
САМОСТОЯТЕЛЬНАЯ РАБОТА ................................................................... 14
Лабораторная работа №4. ................................................................................. 17
КОНТРОЛЬНАЯ РАБОТА............................................................................... 17
Лабораторная работа №5. ................................................................................. 20
РАБОТА СО СПИСКАМИ ............................................................................. 20
Лабораторная работа №6. ................................................................................. 27
САМОСТОЯТЕЛЬНАЯ РАБОТА ................................................................... 27
Лабораторная работа №7. ................................................................................. 35
CОЗДАНИЕ ТАБЛИЦ ...................................................................................... 35
Лабораторная работа №8. ................................................................................. 39
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ТАБЛИЦ .............................................. 39
Лабораторная работа №9. ................................................................................. 43
КОНТРОЛЬНАЯ РАБОТА.............................................................................. 43
Лабораторная работа №10. ............................................................................... 48
ИСПОЛЬЗОВАНИЕ ГРАФИКИ ...................................................................... 48
Лабораторная работа №11. ............................................................................... 52
САМОСТОЯТЕЛЬНАЯ РАБОТА ................................................................... 52
Лабораторная работа №12. ............................................................................... 53
ГИПЕРТЕКСТОВЫЕ ССЫЛКИ ...................................................................... 53
Лабораторная работа №13. ............................................................................... 56
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФОРМ ................................................... 57
Лабораторная работа №14. ............................................................................... 61
САМОСТОЯТЕЛЬНАЯ РАБОТА. .................................................................. 61
Лабораторная работа №15. ............................................................................... 64
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ ........................................... 64
Контрольная работа №16. ................................................................................ 67
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ ........................................... 67
ПРИЛОЖЕНИЕ 1 .............................................................................................. 69
ПРИЛОЖЕНИЕ 2 .............................................................................................. 73
Лабораторная работа №1.
CОЗДАНИЕ ЭТАЛОННЫХ WEB-СТРАНИЦ
Цель:



ознакомиться с элементами окна редактора HTML;
научиться создавать самые простые WEB-странички;
освоить основные приемы работы с заголовком, цветом,
шрифтом.
1. Выбрать пункт меню File-New
2. Создать Web-страницу:
2.1. Ввести заголовок страницы: My first Home Page
(Моя первая базовая страница)
2.2. Организовать абзац с содержанием: Hello, World!
(Здравствуй, мир!)
2.3. Сохранить страницу в каталог HTML под именем
d1_1.html
2.4. Просмотреть страницу с помощью браузера: Internet
Explorer
3. Работаем с созданной Web-страницей:
3.1.
Организовать
другой
абзац
с
содержанием:
“Среди ключевых технологий, на которых держится современная сеть Internet, одной из важнейших и, как это ни странно, вызывающих наиболее ожесточенные споры является язык HTML,
предназначенный для разметки и оформления документов World
Wide Web.”
3.2. Сделать переход на новую строку и набрать:
“Необычайно интересно проследить историю развития этого
языка - историю, в которой столкнулись противоположные подходы
к проблеме компьютерного представления текста, и которая послужила ареной сотрудничества и противоборства крупнейших компьютерных компаний, определяющих пути развития и будущее
Internet.”
3.3.Сохранить страницу в каталог HTML под именем
d1_1.html.
3.4.Просмотреть страницу с помощью браузера
4. Продолжаем работать с созданной Web-страницей:
4.1. Вводим внутренние заголовки документа:
Using Heading Levels (Использование внутренних уровней
заголовка)
4.2. Вставить в документ тег <Н1> и ввести заголовок:
This is a level 1 heading (заголовок уровня 1)
4.3. Вставить в документ тег <Н2> и ввести заголовок:
This is a level 2 heading (заголовок уровня 2)
4.4. Вставить в документ тег <Н3> и ввести заголовок:
This is a level 3 heading (заголовок уровня 3)
4.5. Вставить в документ тег <Н4> и ввести заголовок:
This is a level 4 heading (заголовок уровня 4)
4.6. Вставить в документ тег <Н5> и ввести заголовок:
This is a level 5 heading (заголовок уровня 5)
4.7. Вставить в документ тег <Н6> и ввести заголовок:
This is a level 6 heading (заголовок уровня 6)
4.8. Сохранить страницу под именем d1_1.html
4.9. Просмотреть страницу с помощью браузера
5. Продолжаем работать с созданной Web-страницей:
5.1. Ввести заголовок страницы: Using Paragraphes
(Использование абзацев)
5.2. Вставить в документ заголовок: Example of
Paragraph Formatting (Примеры форматирования абзацев)
5.3. Вставить и ввести содержание первого абзаца:
This is paragraph 1 (Это абзац 1)
5.4. Вставить и ввести содержание второго абзаца:
This is paragraph 2.
This is was tacked on the end of paragraph 2.
(Это абзац 2. Это было добавлено в конце абзаца 2)
5.5. Вставить и ввести содержание третьего абзаца:
This is paragraph 3 (Это абзац 3)
5.6. Сохранить страницу под именем d1_1.html
5.7. Просмотреть страницу с помощью браузера
6. Продолжаем работать с созданной Web-страницей:
6.1. Ввести заголовок страницы: Using Line Breaks
(Использование обрыва строки)
6.2. Вставить в документ заголовок: Example of Line Breaks
(Примеры обрыва строки)
6.3. Во втором абзаце вставить метку перехода на новую строку после слов: This is paragraph 2 и добавить следующее содержимое.
«В языке HTML нет никаких средств для создания абзацного отступа (красной строки), поэтому для удобства между абзацами
обычно вводят пустую строку. Для создания разделителей в тексте
используются горизонтальные полоски - линейки, они создаются с
помощью дескриптора HR »
6.4. Во втором абзаце вставить метку перехода на новую строку после слов: This is was tacked on the
6.5. Вставить и ввести содержание третьего абзаца:
This is paragraph 3 (Это абзац 3) со следующим содержимым.
«Все лишние пробелы между словами и переходы на новую строку
при воспроизведении документа игнорируются. Для перехода на новую строку без создания абзаца используется дескриптор BR или
PRE »
6.6. Сохранить страницу под именем d1_1.html
6.7.Просмотреть страницу с помощью браузера:
Internet Explorer
7. Продолжаем работать с созданной Web-страницей:
7.1. Ввести заголовок страницы: Using Comment
(Использование комментариев)
7.2. Вставить в документ заголовок: Exsamples of Comment
(Примеры комментариев)
7.3.Просмотрите содержание первого абзаца:
This is paragraph 1 (Это абзац 1)
7.4. Просмотрите содержание второго абзаца: This is was
tacked on the end of paragraph 2
(Это абзац 2. Это было добавлено в конце абзаца 2.)
7.5. Во втором абзаце вставить комментарий:
This comment is in the middle of paragraph
(комментарий в середине абзаца)
7.8. Сохранить страницу под именем d1_1. html
7.9. Просмотреть страницу с помощью браузера:
Internet Explorer
8. Создать свою Web-страницу (наполнение может быть любое, тема ваша):
8.1. Ввести заголовок страницы.
8.2. Вставить в документ заголовок
8.3. Вставить и ввести содержание трех абзацев
8.4. Третий абзац организовать с тремя переходами на новую
строку
8.5. Между абзацами поставить горизонтальные линии
8.6. После заголовка документа вставить комментарий
8.7.Сохранить станицу под именем d1_2.html
8.8.Просмотреть страницу с помощью браузера. Защитить лабораторную работу у преподавателя.
Лабораторная работа №2.
УСЛОЖНЕННЫЕ СТРУКТУРЫ ТЕКСТА НА
WEB-СТРАНИЦАХ
Цель:






ознакомиться с метками цитирования, акцентирования,
усиления;
научиться создавать метки кода, образца, метки переменной;
освоить основные приемы физического форматирования;
внедрение в текст горизонтальной линии (тэг HR);
использование тэга PRE;
освоить работу с цветом, шрифтом.
1. Создать Web-страницу с использованием метки
цитирования для следующего фрагмента:
Автоматизация офисной деятельности изложена в учебнике
"Пакеты программ офисного назначения" под редакцией С. В. Назарова.
1.1. Сохранить страницу под именем d2_l . html
1.2. Просмотреть страницу с помощью браузера Internet Explorer
2. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием меток акцентирования и усиления для
выделенных фрагментов:
КЛАССЫ РЕШАЕМЫХ ЗАДАЧ В ОФИСЕ
Первый класс - наиболее простые задачи, состоящие из полностью формализуемых процедур.
Второй класс - более сложные задачи - задачи принятия решений в условиях риска.
Третий класс задач составляют слабоструктурированные задачи, содержащие неизвестные компоненты.
Четвертый класс задач образуют задачи принятия решений в
условиях противодействия.
Пятый класс - наиболее сложные задачи принятия решений.
2.1. Сохранить страницу под именем d2_1.html
2.2. Просмотреть страницу с помощью браузера Internet Explorer.
3 . Продолжаем работать с созданной Web-страницей, добавляя текст с использованием меток цитирования, акцентирования,
усиления для выделенных фрагментов:
Издательство
"Финансы и статистика"
предлагает следующее издание:
А.М. Вендров CASE-ТЕХНОЛОГИИ.
Современные методы и средства
проектирования информационных систем, 2011.
Книга представляет собой введение в современное проектирование информационных систем, основу которого составляют
CASE-технологии.
Рассматриваются методология проектирования, структурный
подход, основные функции и компоненты CASE-средств и их практическое воплощение в наиболее развитых программных продуктах.
“Клавиату́ра Дво́рака — раскладка клавиатуры, запатентованная профессором Вашингтонского университета Августом Двораком и Вильямом Дилли в 1936 для набора английских символов
как альтернатива раскладки QWERTY.
Сейчас большинство операционных систем (например, GNU/Linux,
Mac OS и Microsoft Windows) имеют встроенную поддержку всех
версий клавиатуры Дворака. Но, несмотря на это, QWERTY всё ещё
используется подавляющим большинством пользователей”.
3.1. Сохранить страницу под именем d2_1.html
3.2. Просмотреть страницу с помощью браузера Internet Explorer
4. Продолжаем работать с созданной Web-страницей, добавляя
текст с использованием метки кода для выделенных фрагментов:
“В языке C используют условные операторы if, switch.
В языке C используются операторы переходов: break,
continue, return, goto.”
4.1. Сохранить страницу под именем d2_1.html
4.2. Просмотреть страницу с помощью браузера Internet Explorer.
5. Продолжаем работать с созданной Web-страницей, добавляя
текст с использованием метки образца:
Microsoft Internet Explorer 7
Средства просмотра HTML - кода позволяют сохранить документ и даже модифицировать его.
Команды Правка - Текущая страница и Вид - Источник
подключают внешние редакторы.
5.1. Сохранить страницу под именем d2_1.html
5.2. Просмотреть страницу с помощью браузера
Internet Explorer.
6. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием метки переменной:
Процедуры и функции
Параметры - переменные.
Они определяют выходные данные процедуры, которые передаются в основную программу.
Присваивания параметрам sum и sub внутри тела процедуры
будут означать соответствующие присваивания переменным
sumab и subab, переданными процедуре, как параметры переменные.
6.1. Сохранить страницу под именем d2_1.html
6.2.Просмотреть страницу с помощью браузера Internet Explorer.
7. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием метки определения:
Элементы HTML
Дескрипторы - это коды языка HTML, с помощью которых
выполняется разметка исходного текста.
Элемент HTML - это начальный и конечный дескрипторы
контейнера вместе с заключенным между ними содержимым.
7.1.Сохранить страницу под именем d2_1.html
7.2.Просмотреть страницу с помощью браузера Internet Explorer.
8. С использованием стилей физического форматирования
создать Web-страницу из 7 фрагментов: (пример фрагмента)
Кемеровский институт (филиал) РГТЭУ
РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ТОРГОВОЭКОНОМИЧЕСКИЙ УНИВЕРСИТЕТ
8.1. Первый фрагмент набрать жирным шрифтом.
8.2. Второй фрагмент набрать курсивом.
8.3. Третий фрагмент набрать моноширинным шрифтом.
8.4. Четвертый фрагмент набрать с подчеркиванием.
8.5. Пятый фрагмент набрать подстрочными символами.
8.6. Шестой - надстрочными символами.
8.7. Седьмой - с перечеркиванием.
8.8. Сохранить страницу под именем doc2_2.html
8.9. Просмотреть страницу с помощью браузера Internet
Explorer.
9. Продолжаем работать с созданной Web-страницей, добавляя
7 строк, используя стиль физического форматирования:
Информационные системы в экономике
9.1. Первую строку набрать жирным шрифтом.
9.2. Вторую строку набрать курсивом.
9.3. Третью строку набрать моноширинным шрифтом.
9.4. Четвертую строку набрать жирным курсивом.
9.5. Пятую строку набрать жирным моноширинным шрифтом.
9.6. Шестую строку набрать курсивом моноширинным.
9.7. Седьмую строку набрать жирным курсивом моноширин
ным.
9.8. Сохранить страницу под именем d2_2. html
9.9. Просмотреть страницу с помощью браузера Internet
Explorer.
10. С использованием стилей "подстрочный текст" и "надстрочный текст" продолжаем работать с созданной Webстраницей, добавляя текст :
“Это пример нижнего индекса X1
Это пример верхнего индекса X3
10.1. Сохранить страницу под именем d2_2.html
10.2. Просмотреть страницу с помощью браузера Internet
Explorer.”
11. С использованием стилей " подстрочный текст" и "над
строчный текст" продолжаем работать с созданной Webстраницей, добавляя текст:
“Однородность дисперсий при выборках одинакового объема
m1 =m2=mn проверяют по критерию Кохрена.
Оценка значимости коэффициента проводится по критерию
Стьюдента, где bj-j-ый коэффициент уравнения регрессии,
S2 -дисперсия.”
11.1. Сохранить страницу под именем d2_2.html
11.2. Просмотреть страницу с помощью браузера Internet Explorer.
12. Продолжаем работать с созданной Web-страницей, добавляя: свойство
описание
font-family
имя гарнитуры шрифта или ее тип
(serif – с засечками, sans-serif – рубленная,
monospace-моноширинная, cursive-рукописная,
fantasy-декоративная)
font-style
курсивное начертание ( normal, italic, oblique )
font-variant регистр букв (normal, small-caps)
font-weight полужирное начертание
(normal, bold, bolder, lighter)
12.1. Сохранить страницу под именем d2_2.html
12.2. Просмотреть страницу с помощью браузера Internet Explorer.
13. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием выравнивания и цвета:
СПЕЦИАЛЬНОСТЬ 080801
(цвет шрифта синий, размер больше обычного на 3 пункта)
«ПРИКЛАДНАЯ ИНФОРМАТИКА (В ЭКОНОМИКЕ)»
( шрифт жирный)
Квалификация – информатик – экономист
«Если Вы увлекаетесь компьютерными технологиями от игрушек до Web-программирования, интересуетесь новостями
высокотехнологического сектора экономики, Вам интересны
программирование и Вы мечтаете освоить компьютерную
графику, поэкспериментировать с новыми операционными системами или создать и администрировать локальную компьютерную сеть, то специальность «Прикладная информатика (в
экономике)»
(цвет
шрифта
красный)для
Вас!»
( фон абзаца желтый)
Особенности данной специальности со специализацией «Корпоративные экономические информационные системы» (цвет
шрифта синий) заключается в том, что Вы будете владеть знаниями как в области экономики, так и в области создания и сопровождения информационных систем, что повысит Вашу
конкурентоспособность на рынке труда и позволит построить собственный бизнес.
При обучении специалистов данного профиля интенсивно используются инновационные педагогические методы (цвет шрифта синий): кейс-технологии, позволяющие Вам быстро и правильно решать различные практические задачи, связанные с
проблемами компьютерной техники и сетей; деловые игры,
интеллектуальный штурм, дистанционные и мультимедийные
технологии, обучающие программы.
Окончив специальность «Прикладная информатика (в экономике)» (цвет шрифта синий), Вы сможете работать в должностях:
программист, системный архитектор, специалист по информационным системам, системный аналитик, специалист по системному администрированию, менеджер информационных
технологий, менеджер по продажам решений и сложных технических систем, специалист по информационным ресурсам,
администратор баз данных. Специальность универсальна.
Кроме того, полученные знания достаточны, чтобы создавать
и успешно вести собственное дело.
13.1. Сохранить страницу под именем doc2_2.html
13.2. Просмотреть страницу с помощью браузера Internet Explorer.
14. Продолжаем работать с созданной Web-страницей, добавляя:
Пример использования горизонтальных линий
HR как нельзя лучше позволяет выделить
различные части страницы.
14.1. Используйте варианты с различными значениями для
выбора толщины линии.
14.2. Используйте варианты с различными значениями для
выбора длины линии.
14.1. Сохранить страницу под именем doc2_2. html
14.2. Просмотреть страницу с помощью браузера Internet Explorer.
15. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием метки центрирования:
Экономическая информация
Эффективная технология
15.1. Сохранить страницу под именем d2_2.html
15.2. Просмотреть страницу с помощью браузера Internet Explorer
16. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием метки мерцания:
Имитационная модель
Информационная модель
16.1. Сохранить страницу под именем d2_2.html
16.2. Просмотреть страницу с помощью браузера Internet Explorer
17. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием различных размеров шрифта:
Экономическая система
Элемент системы
Оптимальная Модель
17.1. Сохранить страницу под именем d2_2.html
17.2. Просмотреть страницу с помощью браузера Internet Explorer
18. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием различных цветов шрифта:
Математическое моделирование
Математическое моделирование
Математическое моделирование
Математическое моделирование
Математическое моделирование
Математическое моделирование
Математическое моделирование
Математическое моделирование
18.1. Сохранить страницу под именем d2_2.html
18.2. Просмотреть страницу с помощью браузера Internet Explorer
19. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием различных цветов шрифта:
Аналитическая модель
Аналоговая модель
Дескриптивная модель
Макроэкономическая модель
Микроэкономическая модель
Оптимальная модель
19.1. Сохранить страницу под именем d2_2.html
19.2. Просмотреть страницу с помощью браузера Internet Explorer
20. Продолжаем работать с созданной Web-страницей, добавляя текст с использованием различных цветов шрифта:
Теория экономической информации
Теория экономической информации
Теория экономической информации
20.1. Сохранить страницу под именем d2_2.html
20.2. Просмотреть страницу с помощью браузера Internet Explorer
21. Продолжаем работать с созданной Web-страницей, добавляя определения:
Информация – совокупность знаний о фактических
данных и зависимостях между ними.
Язык – любая знаковая система, используемая для
сбора, обработки, хранения и распространения информации.
Экономическая информация – информация об общественных процессах производства, обмена, распределения, накопления и потребления материальных
благ.
Теория экономической информации – научная дисциплина, изучающая сущность, способы применения
и совершенствования экономической информации.
21.1. В первом абзаце сделать мерцающим слово «Информация »
21.2. Второй абзац выделить красным цветом
21.3. Третий абзац воспроизвести шрифтом очень маленького
размера
21.4. Четвертый абзац воспроизвести шрифтом очень большого размера
21.5. Сохранить страницу под именем d2_2.html
21.6. Просмотреть страницу с помощью браузера Internet Explorer
22. Продолжаем работать с созданной Web-страницей, добавляя текст (фон документа – желтый, текст - синий):
Система – множество элементов, находящихся в отношениях и связях друг с другом, которое образует
определенную целостность, единство.
22.1. Сохранить страницу под именем d2_2. html
22.2. Просмотреть страницу с помощью браузера Internet Explorer
23. Продолжаем работать с созданной Web-страницей, добавляя текст (фон документа – серебристый, текст - пурпурный):
Большая система – система, состоящая из множества
частей и элементов, выполняющих некоторые функции и связанных между собой.
23.1. Сохранить страницу под именем d2_2. html
23.2. Просмотреть страницу с помощью браузера Internet Explorer. Защитить лабораторную работу у преподавателя.
Лабораторная работа №3.
САМОСТОЯТЕЛЬНАЯ РАБОТА
Цель: свободное ориентирование в тэгах, примененных в лабораторной работе №1;
1. Создать Web-страницу:
Важнейшие дела часто зависят от вещей, кажущихся ничтожными, поэтому надо
быть осторожными и вдумчивыми даже в малых делах.
(цвет зеленый)
Люди как реки (цвет красный):
вода во всех одина-
ковая и везде одна и та же, но каждая река бывает то
узкая,
быстрая, то широкая, то (цвет синий) тихая (цвет красный), то
чистая, то холодная, то мутная, то теплая. Так и люди.
то
Каждый человек носит в себе зачатки всех свойств людских и
иногда проявляются одни, иногда другие (цвет синий).
2. Создать Web-страницу:
СПЕЦИАЛЬНОСТЬ 080801
(цвет шрифта синий, размер больше обычного на 3 пункта)
«ПРИКЛАДНАЯ ИНФОРМАТИКА (В ЭКОНОМИКЕ)»
( шрифт жирный)
Квалификация – информатик – экономист
«Если Вы увлекаетесь компьютерными технологиями от игрушек до Web-программирования, интересуетесь новостями
высокотехнологического сектора экономики, Вам интересны
программирование и Вы мечтаете освоить компьютерную
графику, поэкспериментировать с новыми операционными системами или создать и администрировать локальную компьютерную сеть, то специальность «Прикладная информатика (в
экономике)»- для Вас!» ( фон абзаца желтый)
Особенности данной специальности со специализацией «Корпоративные экономические информационные системы» (цвет
шрифта синий) заключается в том, что Вы будете владеть знаниями как в области экономики, так и в области создания и сопровождения информационных систем, что повысит Вашу
конкурентоспособность на рынке труда и позволит построить
собственный бизнес.
При обучении специалистов данного профиля интенсивно используются инновационные педагогические методы (цвет шрифта синий): кейс-технологии, позволяющие Вам быстро и правильно решать различные практические задачи, связанные с
проблемами компьютерной техники и сетей; деловые игры,
интеллектуальный штурм, дистанционные и мультимедийные
технологии, обучающие программы.
Окончив специальность «Прикладная информатика (в экономике)» (цвет шрифта синий), Вы сможете работать в должностях:
программист, системный архитектор, специалист по информационным системам, системный аналитик, специалист по системному администрированию, менеджер информационных
технологий, менеджер по продажам решений и сложных технических систем, специалист по информационным ресурсам,
администратор баз данных. Специальность универсальна.
Кроме того, полученные знания достаточны, чтобы создавать
и успешно вести собственное дело.
3.
Начало истории HTML следует отнести к далекому 1986 году,
когда Международная организация по стандартизации (ISO)
приняла стандарт ISO-8879, озаглавленный "Standard
Generalized Markup Language (SGML)". Стандарт этот посвящен описанию SGML - обобщенного метаязыка, позволяющего строить системы логической, структурной разметки любых разновидностей текстов. Слово "структурная" означает,
что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о внешнем виде документа,
а лишь указывают границы и соподчинение его составных частей - т. е. задают его логическую структуру.
Создатели SGML стремились максимально абстрагироваться
от проблем представления электронного текста в разных программах, на разных компьютерных платформах и устройствах
вывода. Так, если с помощью SGML размечается документ,
содержащий заголовки, идеология языка запрещает указывать,
что такой-то заголовок должен набираться, скажем, шрифтом
Times полужирного начертания кегля 12 пунктов. SGML в таком случае требует ограничиться указанием на уровень заголовка и его место в иерархической структуре документа.
Благодаря таким ограничениям размеченный текст
сможет без труда интерпретировать любая программа,
работающая с любым мыслимым устройством вывода.
К примеру, при работе в графическом интерфейсе заголовок может действительно выводиться полужирным шрифтом повышенного кегля; программа, использующая текстовый интерфейс, выделит его пустой
строкой сверху и снизу и, возможно, повышенной яркостью символов; синтезатор речи, читающий документ вслух, сможет отметить заголовок паузой и изменением интонации. Можно сказать, что SGMLразметка обнажает нематериальную "душу" текста, для
которой
впоследствии
любая
программаинтерпретатор сможет подобрать подходящее к случаю "тело".
Однако абстрактность SGML этим не исчерпывается.
SGML представляет собой не готовую систему разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для конкретных обстоятельств. Жизнь многообразна и непредсказуема: сегодня вам требуется выделять в текстах заголовки, а
завтра, возможно, понадобится размечать подписи в
письмах, математические формулы или имена действующих лиц в пьесе. Стандарт SGML определяет
лишь синтаксис записи элементов разметки - тегов - и
их атрибутов, а также правила определения новых тегов и указания структурных отношений между ними.
Для практической же разметки документов нужно
приложение SGML - набор определенных в соответствии со стандартом тегов, представляющий собой, по
сути, формальное описание структуры документа.
Сохранить в папке общего доступа, которую укажет преподаватель
под именем d3_ФИО. html.
Лабораторная работа №4.
КОНТРОЛЬНАЯ РАБОТА
Цель: свободное ориентирование в тэгах, примененных в лабораторной работе№1,2;
применение полученных знаний при защите лабораторной работы (создание любой структуры минимальной вложенности
не более чем за одну минуту).
основы работы с языком разметки HTML:
 разбиение текста по логическим частям: заголовки, абзацы и т.д.;
 научиться изменять положение текста на странице с помощью параметра "ALIGN";
 форматирование текста с использованием тэгов физических стилей (B, I, U, SUB, SAB, STRIKE, TT);



изменение внешнего вида шрифта с помощью тэга FONT
и его параметров SIZE, COLOR, FACE;
внедрение в текст горизонтальной линии (тэг HR);
использование тэга PRE.
1. Создать Web – страницу следующего вида:
Элементы форматирования текста
Текст первого абзаца.
Текст второго абзаца.
Центрированный текст абзаца.
Щелкни меня
Использование элемента BQ
Использование элемента B
Использование элемента BIG
Использование элемента SMALL
Использование элемента EM
Использование элемента I
Использование элемента STRIKE
Обычный текст и элемент SUB
Обычный текст и элемент SUP
Использование элемента TT
Использование элемента U
Использование элемента CENTER
Использование элемента DIV
Использование элемента BLINK (не должен работать)
Элемент BR обеспечивает разрыв
строки
Эта строка, хоть и длинная, не должна разрываться броузером, потому что
текст этой строки находится внутри элемента NOBR
Использование элемента PRE.
Он запрещает форматирование
текста браузером и выводит его
так,
как определил пользователь.
Внутри элемента PRE можно использовать ссылку: Щелкни
(переход в начало документа)
Использование символов LF и CR в элементе PRE.
Продолжение строки.
Направление текста можно изменить
Бегущая строка (работает в Internet Explorer)
Задание абсолютных размеров шрифтов
Шрифт размера 7
Шрифт размера 6
Шрифт размера 5
Шрифт размера 4
Шрифт размера 3
Шрифт размера 2
Шрифт размера 1
Задание относительных размеров шрифтов
Шрифт размера +4
Шрифт размера +3
Шрифт размера +2
Шрифт размера +1
Шрифт размера +0
Шрифт размера -1
Шрифт размера -2
Задан зеленый цвет шрифта
Шрифт типа Courier
1.1. Сохранить страницу под именем FIO_кон.html
1.2. Просмотреть страницу с помощью браузера Internet Explorer.
Сохранить в папке общего доступа, которую укажет преподаватель под
именем d4_ФИО. html.
Лабораторная работа №5.
РАБОТА СО СПИСКАМИ
Цель: получить у преподавателя задание на создание списков;
создать список требуемого типа.



работа с упорядоченным списком;
работа с неупорядоченным списком;
работа с вложенным комбинированным списком;
1. Создать Web-страницу с использованием упорядоченного
списка:
Дисциплины для специальности "Информационные системы в экономике"
1. Информационные статистические системы
2. Моделирование экономических процессов
3. Вычислительная математика
4. Компьютерные технологии
5. Теория экономических информационных систем
-------------------------------------------------------------------Направление 080700: «Бизнес-информатика»
Квалификация: «Бакалавр бизнес-информатики»
Срок обучения: 4 года
Система обучения
Выпускающая кафедра: ВТ и ИТ
Обучение
Перечень учебных дисциплин (по блокам)
Математические дисциплины:











математический анализ;
линейная алгебра;
дискретная математика;
теория вероятностей и математическая статистика;
оптимизация и математические методы принятия решений;
дифференциальные и разностные уравнения;
анализ данных и прогнозирование;
математическое и имитационное моделирование;
численные методы;
эконометрика;
теория систем и системный анализ.
Основные информационно-технологические дисциплины:






















информатика и программирование;
вычислительные системы и телекоммуникации;
базы данных;
объектно-ориентированный анализ и программирование;
операционные системы, среды и оболочки;
проектирование информационных систем;
моделирование и анализ бизнес-процессов;
управление проектами;
информационные системы;
лингвистическое обеспечение информационных систем;
информационные технологии;
теория экономических информационных систем;
предметно-ориентированные информационные системы;
экономическая безопасность;
хранилища данных;
архитектура корпоративных информационных систем;
информационная безопасность;
правовая защита интеллектуальной собственности;
интеллектуальные информационные системы;
мировые информационные ресурсы и сетевая экономика;
программная инженерия;
стандартизация и управление качеством программного обеспечения;
 электронный бизнес;
 нечеткая логика и нейронные сети.
Трудоустройство
Сферы деятельности выпускников:
системный анализ;
моделирование и оптимизация бизнес-процессов на современных предприятиях;
3. проектирование; внедрение и сопровождение корпоративных
информационных систем;
4. электронный бизнес.
1.
2.
Перечень возможных должностей и профессий:
a.
b.
c.
d.
e.
f.
g.
h.
i.
j.
k.
l.
m.
n.
o.
p.
q.
бизнес-аналитик;
бизнес-консультант;
ИТ-консультант;
ИТ-менеджер;
аналитик в средних и крупных компаниях;
специалист по развитию бизнеса;
эксперт по реинжинирингу бизнес-процессов;
руководитель отдела информационных технологий;
системный аналитик/архитектор;
начальник IT-службы;
системный администратор;
информационный аналитик;
специалист в области электронной коммерции;
менеджер проектов;
предприниматель в сфере информационных технологий;
менеджер корпоративных информационных систем;
программист-аналитик.
Дальнейшее обучение
Магистратура (на базе бакалавриата)
Магистерские программы: «Информационные технологии в моделировании и организации бизнес-процессов»;
«Прикладная информатика в аналитической экономике»
Квалификация: «Магистр прикладной информатики»
Срок обучения: 2 года
1.1. Сохранить страницу под именем d5.html
1.2. Просмотреть страницу с помощью браузера Internet Explorer.
2. Добавить на Web-страницу список определений:
Список определений
Система.
Множество элементов, находящихся в отношениях и связях друг с другом, которое образует
определённую целостность, единство.
Большая система.
Система, состоящая из множества частей и элементов, выполняющих некоторые функции и
связанных между собой.
Экономическая система.
Часть системы более высокого порядка социально-экономической системы.
Абстрактная конструкция, упрощённо отражающая основные черты реальной экономической
системы.
2.1. Сохранить страницу под именем d5.html
2.2. Просмотреть страницу с помощью браузера Internet Explorer.
3. Добавить на Web - страницу следующую информацию, используя неупорядоченный список:
Специальное программное обеспечение

Турбо-бухгалтер

Инфо-бухгалтер

1С: Бухгалтерия

1С: Торговля

1С: Склад

Галактика
3.1. Сохранить страницу под именем d5. html
3.2. Просмотреть страницу с помощью браузера Internet Explorer.
4. Добавить на Web - страницу следующую информацию, используя упорядоченный список:
A. Язык SGML - это типичное детище академической
науки, изящная игрушка теоретиков. Его создание не было вызвано насущной практической необходимостью.
Принципы, на которых строится этот язык, значительны
и интересны; несомненно, идеология SGML оказала влияние на многие компьютерные разработки. Однако сам
по себе SGML не получил сколько-нибудь заметного
распространения - до тех пор, пока в 1991 г. сотрудники
Европейского института физики частиц (CERN,
http://www.cern.ch), занятые созданием системы передачи
гипертекстовой информации через Internet, не выбрали
SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык - самое известное
из приложений SGML - был назван HTML (HyperText
Markup Language, "язык разметки гипертекста").
B. Изначально HTML, как и положено SGML-приложению,
разделял все особенности идеологии SGML. Из сорока с
небольшим тегов HTML версии 1.2 (датированной
июнем 1993 г.) всего три, да к тому же и не рекомендованных к использованию, тега осмеливались намекать на
физические параметры представления документа. Вся
разметка была чисто логической, и лишь в описательной
части стандарта, сопровождающей формальное определение тегов, можно было прочесть что-нибудь вроде "в
графических браузерах действие этого тега может передаваться курсивным начертанием".
C. А первым (и долгое время единственным) графическим
браузером в те далекие времена была программа Mosaic,
разработанная, как и собственно WWW, в научном учреждении - Национальном центре суперкомпьютерных
приложений США (National Center for Supercomputer
Applications, NCSA; http://www.ncsa.uiuc.edu). Так что нет
ничего удивительного в том, что в этот "золотой век" никаких противоречий между официальными стандартами
и их реализацией в браузерах еще не существовало.
HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась
подготовка спецификации следующей версии языка - 2.0.
Этим занимался образованный в том же году Консорциум
W3
(W3
Consortium,
сокращенно
W3C;
http://www.w3.org/pub/WWW), унаследовавший от CERN
верховную власть и авторитет в мире WWW.
4.1. Выполнить нумерацию элементов списка п.4 с помощью
строчных букв алфавита
4.3. Сохранить страницу под именем d5.html
4.4. Просмотреть страницу с помощью браузера Internet Explorer.
5. Добавить на Web - страницу следующую информацию, используя упорядоченный список:
5.1. Открыть Web - страницу d5. html
5.2. Выполнить нумерацию элементов списка п.3 с помощью
прописных букв алфавита
5.3. Сохранить страницу под именем d5. html
5.4. Просмотреть страницу с помощью браузера Internet Explorer.
6. Создать Web - страницу с использованием упорядоченного
списка:
6.1. Открыть Web-страницу d5.html
6.2. Выполнить нумерацию элементов списка п.3 с помощью
прописных римских цифр
6.3. Сохранить страницу под именем d5_2.html
6.4. Просмотреть страницу с помощью браузера Internet Explorer.
7. Создать Web - страницу с использованием упорядоченного
списка:
7.1. Открыть Web - страницу d5.html
7.2. Выполнить нумерацию элементов списка с помощью
арабских цифр, начиная с цифры 6
7.3. Сохранить страницу под именем d5_3.html
7.4. Просмотреть страницу с помощью браузера Internet Explorer.
8. Создать Web-страницу с использованием упорядоченного
списка:
8.1. Открыть Web-страницу d5.html
8.2. Bыполнить нумерацию элементов списка с помощью
строчных букв алфавита, начиная с буквы "n"
8.3. Сохранить страницу под именем d5_4.html
8.4. Просмотреть страницу с помощью браузера Internet Explorer.
9. Создать Web-страницу с использованием неупорядоченного
списка:
9.1.Открыть Web-страницу d5.html
9.2. В качестве маркера использовать заполненный квадратик
9.3. Сохранить страницу под именем d5_5.html
9.4. Просмотреть страницу с помощью браузера Internet Explorer.
10. Создать Web-страницу с использованием неупорядоченного списка:
10.1. Открыть Web-страницу d5.html
10.2. В качестве маркера использовать незаполненный кружок
10.3. Сохранить страницу под именем d5_6.html
10.4. Просмотреть страницу с помощью браузера Internet Explorer.
11. Добавить на Web-страницу вложенные маркированные
списки:
Вложенные маркированные списки





Глава 1
Глава 2
Глава 3
 Постановка задачи
 Блок-схема алгоритма
 Программа и её описание
 Контрольный пример
Глава 4
Глава 5
11.3. Сохранить страницу под именем d5.html
11.4. Просмотреть страницу с помощью браузера Internet Explorer
12. Добавить на Web-страницу вложенные комбинированные
списки:
Вложенные комбинированные списки
1. Галактика
2. БЭСТ
3. 1С: Предприятие
 1С: Бухгалтерия
 1С: Торговля
 1С: Склад
 1С: Заработная плата
4. Турбо-бухгалтер
5. Инфо-бухгалтер.
12.1. Сохранить страницу под именем d5.html
12.2. Просмотреть страницу с помощью браузера Internet Explorer. Защитить лабораторную работу у преподавателя под именем
d5_ФИО.html.
Лабораторная работа №6.
САМОСТОЯТЕЛЬНАЯ РАБОТА
Цель: свободное ориентирование в тэгах, примененных в
лабораторной работе №5;
Часть I.
1. Создать Web-страницу следующего образца:
А) вариант №1
Списки.
Тэги списков (синий цвет)
Существует три основных вида списков в HTML-документе:
 пронуменрованный
 непронуменрованный
 список описаний
Вы можете создавать вложенные списки, используя различные тэги
списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий)
внутри другой. Будут ли элементы вложенного списка иметь те же
маркеры, обозначающие элемент списка - зависит от браузера. Более
подробно смотри в разделе "Вложенные списки".
Пронумерованные списки (цвет синий)
В пронумерованном списке браузер автоматически вставляет номера
элементов по порядку. Это означает, что если вы удалите один или
несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга
<LI>. Например:
<OL>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</OL>
1. Программирование
2. Алгоритмизация
3. Проектирование
Тэг <OL> может иметь параметры:
<OL TYPE=A|a|I|i|1 START=n> где:
TYPE
Вид счетчика:
 A - большие латинские буквы (A,B,C...)
 a - маленькие латинские буквы (a,b,c...)
 I - большие римские цифры (I,II,III...)
 i - маленькие римские цифры (i,ii,iii...)
 1 - обычные цифры (1,2,3...)
START=n
Число, с которого начинается отсчет
Например:
<OL TYPE=I START=15>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</OL>
XV.
XVI.
XVII.
Программирование
Алгоритмизация
Проектирование
Б) вариант №2
Непронумерованные списки
Для непронумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга
<LI>. Например:
<UL>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</UL>



Программирование
Алгоритмизация
Проектирование
Тэг <UL> может иметь параметр:
<UL TYPE=disc|circle|square>
Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:
<UL TYPE=square>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</UL>
 Программирование
 Алгоритмизация
 Проектирование
В) вариант №3
Вложенные списки
Дадим пример вложенных списков:
<HTML>
<HEAD>
<TITLE> Список студентов </TITLE>
</HEAD>
<BODY>
<H2> Список студентов нашей группы </H2>
<H3> Составлено: 22 сентября 2011 года </H3>
Данный список содержит фамилии и имена всех студентов нашей группы. <P>
Список представлен в деканат. <P>
<OL>
<LI> Первая подгруппа
<UL>
<LI> Ф.И.О
<LI> Ф.И.О
</UL>
<LI> Вторая подгруппа
<UL>
<LI> Ф.И.О
<LI> Ф.И.О
</UL>
</OL>
</BODY>
</HTML>
Вот, что вы увидите на экране браузера:
Список студентов нашей группы
Составлено: 22 сентября 2011 года
Данный список содержит фамилии и имена всех студентов нашей
группы.
Список представлен в деканат.
1. Первая подгруппа
2. Вторая подгруппа
 Ф.И.О
 Ф.И.О
Г) вариант №4
Элемент списка <LI>
Тэг <LI> может иметь параметры:
<OL TYPE=disc|circle|squade> или <OL
TYPE=A|a|I|i|1 VALUE=n>
в зависимости от того, в списке какого вида находится данный элемент.
TYPE
Вид маркера (см. <UL>) или счетчика (см.OL)
VALUE=n
Значение для элемента пронумерованного списка (его номер).
Все дальнейшие номера элементов списка будут отсчитываться
от этого номера.
Например:
<OL TYPE=I START=15>
<LI> Программирование
<LI TYPE=i VALUE=25> Алгоритмизация
<LI> Проектирование
</OL>
XV.
XVI.
XVII.
Программирование
Алгоритмизация
Проектирование
Список определений
Список определений начинается с тэга <DL> и завершается тэгом
</DL>. Данный список служит для создание списков типа "термин""описание". Каждый термин начинается тэгом <DT> , а описание тэгом <DD>. Например:
<DL>
<DT> <B> Отдел маркетинга </B>
<DD> Данный отдел занимается продвижением продук-
тов и услуг
<DT> <B> Финансовый отдел </B>
<DD> Данный отдел занимается всеми финансовыми
операциями
<DT> <B> Отдел кадров </B>
<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков,
отслеживанием больничных листов и т.д.
</DL>
Отдел маркетинга
Данный отдел занимается продвижением продуктов и услуг
Финансовый отдел
Данный отдел занимается всеми финансовыми операциями
Отдел кадров
Данный отдел занимается учетом и набором новых сотрудников
фирмы, распределением отпусков, отслеживанием больничных
листов и т.д.
2. Сохранить документ под именем v_N.html, где N – номер варианта.
Часть II
А) вариант №1
ЭКОНОМИЧЕСКИЙ
Факультет
СПЕЦИАЛЬНОСТИ:
 080109-БУХГАЛТЕРСКИЙ УЧЕТ, АНАЛИЗ И АУДИТ
СПЕЦИАЛИЗАЦИЯ:
- бухгалтерский учет, анализ и аудит в коммерческих организациях
(кроме банков и других финансово-кредитных организаций).
КВАЛИФИКАЦИЯ:
- экономист.
 080105-ФИНАНСЫ И КРЕДИТ
СПЕЦИАЛИЗАЦИИ:
- финансовый менеджмент;
- банковское дело;
- страхование.
КВАЛИФИКАЦИЯ:
- экономист.
 080801-ПРИКЛАДНАЯ ИНФОРМАТИКА (В ЭКОНОМИКЕ)
СПЕЦИАЛИЗАЦИЯ:
- корпоративные экономические информационные системы
КВАЛИФИКАЦИЯ:
- информатик - экономист.
Лица, имеющие среднее профессиональное образование по компьютерной
специализации, принимаются в институт на обучение в сокращенные сроки
(3 года) по очной форме обучения на договорной основе.
Б) вариант №2
Факультет
ВНЕШНЕЭКОНОМИЧЕСКОЙ
ДЕЯТЕЛЬНОСТИ (ВЭД)
СПЕЦИАЛЬНОСТЬ:
 080102-МИРОВАЯ ЭКОНОМИКА
(только на очном отделении)
СПЕЦИАЛИЗАЦИИ:
- внешнеэкономическая деятельность предприятий и фирм;
- экономика международного туризма.
КВАЛИФИКАЦИЯ:
- экономист.
В) вариант №3
Факультет
КОММЕРЦИИ И МАРКЕТИНГА
СПЕЦИАЛЬНОСТИ:
 080301-КОММЕРЦИЯ (ТОРГОВОЕ ДЕЛО)
СПЕЦИАЛИЗАЦИЯ:
- организация коммерции;
- коммерция в сфере туризма.
КВАЛИФИКАЦИЯ:
- специалист коммерции.
 080401 -ТОВАРОВЕДЕНИЕ И ЭСПЕРТИЗА ТОВАРОВ (товароведение, экспертиза и оценка товаров во внутренней и внешней торговле)
СПЕЦИАЛИЗАЦИИ:
- товароведение и экспертиза продовольственных товаров;
- товароведение и экспертиза непродовольственных товаров;
КВАЛИФИКАЦИЯ:
- товаровед-эксперт.
 080111 -МАРКЕТИНГ
СПЕЦИАЛИЗАЦИЯ:
- маркетинг в торговле;
- маркетинг туристических услуг.
КВАЛИФИКАЦИЯ:
- маркетолог.
 032401 -РЕКЛАМА
КВАЛИФИКАЦИЯ:
- специалист по рекламе.
 100100 -СЕРВИС
КВАЛИФИКАЦИЯ:
- бакалавр сервиса.
ЮРИДИЧЕСКИЙ факультет
 030501 - ЮРИСПРУДЕНЦИЯ
СПЕЦИАЛИЗАЦИЯ:
- гражданско-правовая.
КВАЛИФИКАЦИЯ:
- юрист.
Г) вариант №4
Факультет
МЕНЕДЖМЕНТА
СПЕЦИАЛЬНОСТИ:
 080507-МЕНЕДЖМЕНТА ОРГАНИЗАЦИИ
СПЕЦИАЛИЗАЦИЯ:
- менеджмент торговых предприятий.
КВАЛИФИКАЦИЯ:
- менеджер.
 080505-УПРАВЛЕНИЕ ПЕРСОНАЛОМ
КВАЛИФИКАЦИЯ:
- менеджер.
 080502 - ЭКОНОМИКА И УПРАВЛЕНИЕ НА ПРЕДПРИЯТИИ
(в торговле)
СПЕЦИАЛИЗАЦИИ:
- экономика и управление на предприятии торговли;
- экономика и управление на предприятии туризма;
КВАЛИФИКАЦИЯ:
- экономист-менеджер.
 080502 - ЭКОНОМИКА И УПРАВЛЕНИЕ НА ПРЕДПРИЯТИИ
(операции с недвижимым имуществом)
СПЕЦИАЛИЗАЦИИ:
- экономика и управление на предприятии торговли;
- экономика и управление на предприятии туризма;
КВАЛИФИКАЦИЯ:
- экономист-менеджер.
Лабораторная работа №7.
CОЗДАНИЕ ТАБЛИЦ
Цель:



научиться публиковать данные в табличной форме;
уметь создавать сложные таблицы: различные виды ячеек, выравнивание данных в ячейках, расстояния между
отдельными ячейками, положение самой таблицы на
странице и т.д.;
самостоятельно освоить возможность использования таблиц для макетирования общего интерфейса сайта.
1. Создать Web – страницу с использованием таблицы из 4
столбцов и 3 строк:
1
2
3
Простая таблица
11
21
12
22
13
23
31
32
33
1.1. Сохранить страницу под именем tab1.html
1.2. Просмотреть страницу с помощью браузера Internet
Explorer.
2. К таблице, созданной в п.1 добавить границы:
1
2
3
Простая таблица
11
21
12
22
13
23
31
32
33
2.1. Сохранить таблицу под именем tab1.html
2.2. Просмотреть страницу с помощью браузера Internet
Explorer.
3. Добавить таблицу в виде одной ячейки:
Автоматизированный курс
3.1. Сохранить таблицу под именем tab1.html
3.2. Просмотреть страницу с помощью браузера Internet
Explorer.
4. Добавить следующую таблицу.
Наименование
Ананасы
Виноград
Персики
Количество
9
11
2
Цена
45
53
25
Использовать атрибуты горизонтального выравнивания: 1
столбец – влево, 2 столбец – по центру, 3 столбец – вправо.
4.1. Сохранить таблицу под именем tab1.html
4.2. Просмотреть страницу с помощью браузера Internet
Explorer.
5. В таблице созданной в п.4 выделить строки таблицы разными цветами.
5.1. Сохранить таблицу под именем tab1.html
5.2. Просмотреть страницу с помощью браузера Internet
Explorer.
6. Создать Web – страницу с использованием таблицы:
Портфельные инвестиции
Виды бумаг
Портфель АН
Акции
65
Облигации
25
Ценные бумаги
10
Портфель КИ
20
45
35
6.1. Сохранить таблицу под именем tab1.html
6.2. Просмотреть страницу с помощью браузера Internet
Explorer.
7. Добавить на Web – страницу следующую таблицу:
Расписание занятий
Время
9:00
11:00
13:00
понедельник
Математика
История
Ин. язык
вторник
среда
Информатика
Ин.язык Математика
ЭТ
История
четверг
пятница
ЭТ
Логика
Физкультура
Культурология
7.1. Сохранить таблицу под именем tab1.html
7.2. Просмотреть страницу с помощью браузера Internet
Explorer.
8.Добавить на Web – страницу следующую таблицу:
Расписание занятий
Время
9:00
11:00
13:00
Понедельник
Математика
Ин. язык
вторник
История
среда
ЭТ
Физ-ра
Культурология
четверг
Ин. язык
Логика
пятница
Информатика
8.1. Сохранить таблицу под именем tab1.html
8.2. Просмотреть страницу с помощью браузера Internet
Explorer.
9. Добавить следующую таблицу:
Эффективность использования основных фондов
Показатель
Прошлый год
Отчётный год
58000
63000
Выручка
Стоимость ОФ
Фондоотдача ОФ
Фондоёмкость
продукции
42647
1.36
0.73
42567
1.48
0.67
9.1. Сохранить таблицу под именем tab1.html
9.2. Просмотреть страницу с помощью браузера Internet
Explorer.
10. Добавить на Web – страницу таблицу вида:
Реализации продукции
Наименование товара
Бананы
Огурцы
Яблоки
Апельсины
Количество
14
28
38
13
Цена
24
20
28
25
10.1. Сохранить таблицу под именем tab1.html
10.2. Просмотреть страницу с помощью браузера Internet Explorer.
11. Добавить следующую таблицу:
Структура института
Факультеты
Коммерции
ВЭД
Менеджмента
Учётно финансовый
Использовать
атрибуты
вертикального
выравнивания:
1 столбец – по верхней границе ячейке, 2 столбец – по центру,
3 столбец – по нижней границе ячейки.
11.1. Сохранить таблицу под именем tab1.html
11.2. Просмотреть страницу с помощью браузера Internet
Explorer.
12. Добавить на Web – страницу следующую таблицу:
РГТЭУ- В БУДУЩЕМ УВЕРЕНЫ!
080301
080401
080111
032401
080109
080105
080801
080102
080507
080505
080502
080502
030501
100100
Специальности и направления подготовки
Коммерция (торговое дело)
Товароведение и экспертиза товаров
(товароведение, экспертиза и оценка
товаров во внутренней и внешней
торговле)
Маркетинг
Реклама
Бухгалтерский учет, анализ и аудит
Финансы и кредит
Прикладная информатика
(в экономике)
Мировая экономика
Менеджмент организации
Управление персоналом
Экономика и управление на предприятии (в торговле)
Экономика и управление на предприятии (операции с недвижимым имуществом)
Юриспруденция
Сервис
Фон первого столбца – синий, 2-го светло-серый.
12.1. Сохранить таблицу под именем tab1.html
12.2. Просмотреть страницу с помощью браузера
Internet Explorer. Защитить лабораторную работу у
преподавателя.
Лабораторная работа №8.
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ТАБЛИЦ
Цель:



научиться публиковать данные в табличной форме;
уметь создавать сложные таблицы: различные виды ячеек, выравнивание данных в ячейках, расстояния между
отдельными ячейками, положение самой таблицы на
странице и т.д.;
самостоятельно освоить возможность использования таблиц для макетирования общего интерфейса сайта.
1. Создать Web - страницу с содержанием:
Табличная структура
Ячейка заголовка (первая строка)
Ячейка данных (вторая строка)
Вторая ячейка данных
1.1. Сохранить страницу под именем str1.html
1.2. Просмотреть страницу с помощью браузера Internet Explorer.
2. Используя таблицу п.1, добавить следующие таблицы:
Таблица без рамок border =0
Таблица с самой тонкой рамкой
Border=1
Таблица с толстой рамкой
Border=7
2.1. Сохранить страницу под именем str1.html
2.2. Просмотреть страницу с помощью браузера Internet
Explorer.
3. Добавить следующие таблицы:
Просвет между содержимым ячейки таблицы и рамкой
Таблица без просвета
Cellpadding=0
Таблица с малым просветом
Cellpadding=5
Таблица с большим просветом
Cellpadding=15
3.1. Сохранить страницу под именем str1.html
3.2. Просмотреть страницу с помощью браузера Internet
Explorer.
4. Добавить на Web-страницу таблицы следующего содержания:
Ширина рамки вокруг ячейки111111111111111111111111
Таблица с минимальной шириной рамки ячеек
Атрибут отсутствует
Таблица с малой шириной рамки ячеек
Cellpadding=5
Таблица с большой шириной рамки ячеек
Cellpadding=15
4.1. Сохранить страницу под именем str1.html
4.2. Просмотреть страницу с помощью браузера Internet
Explorer.
5. Добавить на Web-страницу таблицы следующего содержания:
Таблица с абсолютной шириной
Width=200
Таблица с относительной шириной
Width=80%
5.1. Сохранить страницу под именем str1.html
5.2. Просмотреть страницу с помощью браузера Internet
Explorer.
6. Добавить таблицы следующего содержания:
Таблица с различным выравниванием по вертикали
Строка таблицы с выравниванием по вертикали
Valign =
top
Строка таблицы с выравниванием по вертикали
Valign
Строка таблицы с выравниванием по вертикали
Valign =bottom
=center
6.1.Сохранить страницу под именем str1.html
6.2. Просмотреть страницу с помощью браузера Internet
Explorer.
7. Создать таблицу ледующего содержания:
Четыре строки
Строка 1
Строка 2
Строка 3
Строка 4
Две строки
Одна ячейка /строка
Еще
Две строки
Три строки
7.1. Сохранить страницу под именем str1.html
7.2. Просмотреть страницу с помощью браузера Internet
Explorer.
8.Добавить на Web-страницу следующую таблицу:
Таблицы в HTML
Организация расположения элементов документов на странице, отличного от линейного с трудом реализуется в HTML. В современных
браузерах найден выход из сложившейся ситуации: в них предусмотрены дескрипторы для определения таблиц на HTML - страницах.
Внутри таких таблиц ячейки произвольного размера можно размещать
в произвольных позициях, разрешается выход ячеек за рамки одной
строки или колонки, выравнивание.
8.1. Сохранить страницу под именем str1.html
8.2. Просмотреть страницу с помощью браузера Internet
Explorer. Защитить лабораторную работу у преподавателя.
Лабораторная работа №9.
КОНТРОЛЬНАЯ РАБОТА
Цель: свободное ориентирование в тэгах, примененных в
лабораторной работе №7,8;
уметь создавать сложные таблицы: различные виды ячеек, выравнивание данных в ячейках, расстояния между отдельными
ячейками, положение самой таблицы на странице и т.д.
1. Создать Web-страницу следующего образца:
.ОБЫЧНАЯ ТАБЛИЦА 3X2
A…
B… C…
D
E
F
ДВА ПРИМЕРА С ROWSPAN
Item 1
Item 4
Item 2
Item 3
Item 5
Item 1
Item 2
Item 5
Item 3
Item 6
ПРИМЕР С COLSPAN
Item 1
Item 2
Item 3
Item 4
Item 4
Item 7
Item 5
ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>)
Head1
A
D
Head2
B
E
Head3
C
F
ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ
Head1
A
B
E
F
Head2
C
D
G
H
ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN
Head1
Head 3
Head 4
A
B
E
F
Head2
Head 5
Head 6
C
D
G
H
ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPAN
Head1
Head2
Item 1
Item 5
Item 9
Item 2
Item 6
Item 10
Item 3
Item 7
Item 11
Item 4
Item 8
Item 12
ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ
Gender
Males
Females
Average
Height
Weight
1.9
0.003
1.7
0.002
ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN,
размер ячеек как на рисунке
A
1 2
3 4
C D
ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ
ТАБЛИЦА БЕЗ РАМКИ
Item 1
Item 4
Item 2
ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10
Item 1
Item 3
Item 2
Item 4
CELLPADDING И CELLSPACING
A
D
B
E
C
F
A
B
C
D
E
F
Item 3
Item 5
ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ
И ПОДТАБЛИЦЫ
ДЕМОНСТРАЦИЯ MНОЖЕСТВЕННЫХ СТРОК В ТАБЛИЦЕ
January
February
This is cell 1
Cell 2
Cell 4
and now this
is cell 5
March
Another cell,
cell 3
Cell 6
ALIGN=LEFT|RIGHT|CENTER
может применяться к отдельным ячейкам или всей строке
January
February
March
Another cell,
all aligned center
Cell 2
cell 3
default,
aligned right aligned to center
aligned left
VALIGN=TOP|BOTTOM|MIDDLE
может применяться к отдельным ячейкам или всей строке
January
February
March
and now this
all aligned to top
Cell 3
is cell 2
aligned to the top
default alignment,
aligned to the bottom
center
CAPTION
ALIGN==TOP|BOTTOM
Верхний заголовок
January
February
This is cell 1
Cell 2
March
Another cell,
cell 3
January
This is cell 1
February
Cell 2
March
Another cell,
cell 3
Нижний заголовок
ВЛОЖЕННЫЕ ТАБЛИЦЫ:
ТАБЛИЦА ABCD ВНУТРИ ТАБЛИЦЫ 123456
размер ячеек как на рисунке
1 2
3
AB
CD
4 5
6
ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ
Width=50%
3
ШИРИНА 50%
Width=50%
4
Item width affects cell size 2
3
4
WIDTH=100%
3
This is item 2
4
ЦЕНТРИРОВАНИЕ ТАБЛИЦЫ НА СТРАНИЦЕ
A
D
B
E
C
F
ШИРИНА ТАБЛИЦЫ И ВЛОЖЕННЫЕ ТАБЛИЦЫ
Item 1
Item A
Item 2
Item 4
Item B
HEIGHT=15%
HEIGHT=15%
3
Item 2
4
Сохранить в папке общего доступа
d9_ФИО. html, которую укажет преподаватель.
под
именем
Лабораторная работа №10.
ИСПОЛЬЗОВАНИЕ ГРАФИКИ
Цель:




научиться внедрять в HTML документы рисунки;
освоить методы форматирования текста с помощью рисунков;
самостоятельно изучить возможность использования рисунков в виде фона: страницы, таблицы (в частности - отдельных ячеек);
освоить основные приемы работы с рисунками.
1. Создать Web – страницу с встроенным изображением – паутиной паука (файл web.gif) или любым другим изображением, каждое задание отделяется горизонтальной чертой:
Метка простого изображения
рис. паутины
паука
Паутина паука
1.1. Сохранить страницу под именем ris1.html
1.2. Просмотреть страницу с помощью браузера Internet
Explorer.
2. Добавить на Web – страницу с любым встроенным изображением следующее:
Информационная технология
сбора и обработки информации
- система способов
Рис.
2.1. Сохранить страницу под именем ris1. html
2.2. Просмотреть страницу с помощью браузера Internet
Explorer.
3. Добавить на Web – страницу с любым встроенным изображением следующее:
Рис.
Информационная технология
сбора и обработки информации
- система способов
3.1. Сохранить страницу под именем ris1.html
3.2. Просмотреть страницу с помощью браузера Internet
Explorer.
4. Добавить на Web – страницу следующее:
Информационная технология
сбора и обработки информации
Рис.
- система способов
4.1. Сохранить страницу под именем ris1.html
4.2. Просмотреть страницу с помощью браузера Internet
Explorer.
5. Добавить на Web – страницу с встроенным отображением
следующее:
Что такое парадигма?
Парадигма - это система идей,
взглядов и понятий, различных
моделей решения множества
проблем, а также методов исследования, принятых, как привило,
в научном сообществе в определенный исторический период и
являющихся в этот период основной методологической базой
для всего мирового научного сообщества.
(Студент-ботаник
дал/дала значение слова парадигма)
Парадигма - это совокупность
определенных представлений и
определений, каких-либо терминов, а также ценностных установок, которые принимаются и
разделяются научным сообществом. А, значит, консолидируют
его членов, что обеспечивает
преемственность развития науки
и научного творчества. Может
также обозначать совокупность,
систему фундаментальных научных
установок.
(Философ
дал/дала значение слова пара-
дигма)
Парадигма - это система идей, взглядов и понятий,
различных моделей решения множества проблем, а также методов
исследования, принятых, как привило, в научном сообществе в
определенный исторический период и являющихся в этот период
основной методологической базой для всего мирового научного сообщества. (Студент-ботаник дал/дала значение слова парадигма)
Парадигма - это совокупность определенных представлений и
определений, каких-либо терминов, а также ценностных установок, которые принимаются и разделяются научным сообществом. А, значит, консолидируют его членов, что обеспечивает
преемственность развития науки и научного творчества. Может также обозначать совокупность, систему фундаментальных научных установок. (Философ дал/дала значение слова
парадигма)
5. Добавить на Web – страницу с встроенным отображением –
паутиной паука (файл web1.gif) следующее:
Выравнивание изображений
рис. паука
Паук выровнен с использованием левого
выравнивания.
Паутина паука выровнена с использованием правого выравнивания
рис. паутины
паука
5.1. Сохранить страницу под именем ris1.gif
5.2. Просмотреть страницу с помощью браузера Internet
Explorer.
6. Добавить на Web – страницу с любым встроенным изображением следующее:
Экономическая информация
Информация
Рис. 1
Метаинформация
Теория экономической информации
Рис. 2
Рис. 3
6.1. Сохранить страницу под именем ris1.html
6.2. Просмотреть страницу с помощью браузера Internet
Explorer.
7. Добавить на Web – страницу с любым встроенным изображением следующее:
Большая система
Связи в системе
Рис.
Система
Экономическая система
Элемент системы
7.1. Сохранить страницу под именем ris1.html
7.2. Просмотреть страницу с помощью браузера Internet
Explorer.
Лабораторная работа №11.
САМОСТОЯТЕЛЬНАЯ РАБОТА
Цель: свободное ориентирование в тэгах, примененных в лабораторной работе №9,10;
Задание:
1. Внедрить в файл, созданный во второй лабораторной работе,
рисунки (в случае, если работа №2 не защищена, создать копию
файла и работать с ней).
2. количество рисунков не менее восьми;
 три рисунка (размер не менее: 100х100 px) используются для
демонстрации владения методиками, описывающими поведение
текста относительно рисунков;
 три рисунка (размер соизмерим с высотой строки) внедряются как элементы строки;
 возможность использования таблицы как инструмента макетирования осваивается самостоятельно и демонстрируется непосредственно при защите самостоятельной работы.
 два рисунка (размер произвольный) используются в качестве фона страницы и (или) таблицы (ее элементов)
3. Сохранить как d4_сам.html в папке общего доступа, кото-
рую укажет преподаватель.
Требования к сдаче лабораторной работы:
 документы, удовлетворяющие заданию;
 свободное ориентирование в тэгах, примененных в лабораторной работе;
 применение полученных знаний при защите лабораторной
работы (создание любой структуры минимальной вложенности не более чем за одну минуту);
 знание атрибутов таблицы и рисунков.
Лабораторная работа №12.
ГИПЕРТЕКСТОВЫЕ ССЫЛКИ
Цель:


научиться создавать и применять гипертекстовые ссылки;
освоить основные приемы работы с текстовыми ссылками;


задание цветов фона, текста и ссылок;
графические ссылки, обрамление графических ссылок.
I. Определение связи в пределах Web – страницы.
1. Создать Web – страницу:
Перейти к Z:
A
D
C
D
E
.
.
.
Z
2. Сохранить под именем gts1.html
3. Просмотреть страницу с помощью браузера Internet
Explorer.
II. Определение связи с другой Web – страницей.
1. Создать
Web
–
страницу
(W1.html):
Большая система – система , состоящая из множества частей элементов, выполняющих некоторые функции и связанных между собой.
2. Создать Web – страницу (W2.html)
Система – множество элементов, находящихся в
отношение связях друг с другом, которое образует определенную целостность, единство.
3. Создать Web – страницу (W3.html)
Связи в системе – то, что объединяет элементы
системы в одно целое.
4. Создать Web – страницу (W4.html)
Элемент системы – часть системы, которая рассматривается без дальнейшего членения как
единое целое; его внутренняя структура не является предметом исследования.
5. Просмотреть страницу с помощью браузера
Internet Explorer.
III.
Определение связи с другой Web – страницей.
1. Создать Web – страницу следующего содержания:
(WW1.html):
Текстовые ссылки
Текстовые ссылки позволяют щелчком мышки по выделенному слову или фрагменту перейти к другому файлу. Эта возможность
называется гипертекстом. Ссылки выделяются цветом или подчеркиванием (как настроен браузер).
 Перед именем файла укажите открывающий тег
<A HREF= >. <A > - тег, который является "якорем", а HREF – атрибут, определяющий гипертекстовую ссылку.
 Укажите в кавычках имя файла, на который вы хотите сослаться.
 Между символами > и < поместите текст, на котором
будут делать щелчок мышкой.
 В конце текста поставьте закрывающий тег якоря
</A>
Пример:
<A HREF="color.html" >Щелкните по этой ссылке</A>
Щелкните по этой ссылке.
2. Создать Web – страницу следующего содержания
(WW2.html):
Задание цветов фона, текста и ссылок
При изображении фона, текста и ссылок (просмотренных и непросмотренных) браузеры используют цвета, установленные по умолчанию. Фон обычно бывает серым и белым. Текст – черным. Цвет
фона, текста и ссылок устанавливается в начале файла HTML в теге
<BODY…>. Цвет задается как композиция красной, зеленой и синей
составляющих в шестнадцатеричном представлении. Цвет можно
задавать не только числом, но и по названию. Названия и коды
наиболее распространенных цветов приведены в приложении_2.
Нужно учитывать, что графика с прозрачным фоном выглядит не
очень хорошо, когда ложится на темный фон страницы.
Откройте тег <BODY….>
Задайте атрибуты BGCOLOR=(цвет фона), TEXT=(цвет текста),
LINK=(цвет не просмотренных ссылок), VLINK=( цвет просмотренных ссылок).
Пример:
<BODY BGCOLOR="303030" TEXT="#807060" LINK="BLUE"
VLINK="GREEN">
3. Создать Web – страницу следующего содержания
(WW3.html):
Графические ссылки
Графические ссылки позволяют щелкнуть на изображении к другому файлу. Они упрощают работу с документом. Графические ссылка
выделяется рамкой, цвет которой зависит от параметров настройки
броузера. Для того, чтобы сделать графическую ссылку, надо
набрать тот же код, что и для текстовой ссылки. Но в том месте где
стоял, выделенный для ссылки гипертекст, поставьте графическое
изображение, на котором будет производиться щелчок.
Пример:
<A href="cat.html"><img src="example01.jpg"></A>
cat.html Щелкните по картинке и увидите фотографию моей кошки.
4. Создать Web – страницу следующего содержания
(WW4.html):
Обрамление графических ссылок
Браузеры показывают обычные картинки без рамок, а графические
ссылки – в рамках. Однако этим можно управлять. Толщина рамок
измеряется в пикселях.
Пример:
<IMG SRC="examp.jpg" BORDER=5>
Сделайте обрамление графической ссылки без рамки, с рамкой,
толщина рамки 5 пикселей.
5. Создать Web – страницу (main.html), в которой
не менее 8 ссылок:
4 ссылки будут внешние(WW1.html-WW4.html), 2
внутренние, в которых есть еще ссылки.
Лабораторная работа №13.
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФОРМ
Цель:



научиться публиковать данные с помощью форм;
уметь создавать следующие виды форм: переключатель,
флажок, список;
самостоятельно освоить возможность использования таблиц для макетирования общего интерфейса сайта.
Использование форм
1. Создать Web - страницу с использованием формы, где допустимым значением является текстовое поле:
ТОВАРЫ НА СКЛАДЕ
Наименование товара
Количество
Учетная цена
Цена продажи
Единицы измерения
Код товара
1.1. Сохранить страницу под именем forma1.html
1.2. Просмотреть страницу с помощью браузера Internet
Explorer.
2. Добавить в предыдущую форму следующие текстовые поля:
Платежное поручение №
Плательщик
Рога и копыта
Банк
Черноморбанк
Расчетный счет
1234567
Получатель
АО "Геркулес"
Сумма
1000000
2.1. Сохранить страницу под именем forma1.html
2.2. Просмотреть страницу с помощью браузера Internet
Explorer.
3. Добавить в предыдущую форму следующие поля:
РЕГИСТРАЦИЯ ПОЛЬЗОВАТЕЛЯ
Организация
Пользователь
Пароль
3.1. Сохранить страницу под именем forma1.html
3.2. Просмотреть страницу с помощью браузера Internet Explorer.
4. Добавить на Web-страницу следующую форму:
Выберите смежную специальность:
 Коммерция
 Маркетинг
 Прикладная информатика (в экономике)
 Бизнес информатика
 Мировая экономика
 Менеджмент организации
 Управление персоналом






Юриспруденция
Сервис
Реклама
Бухгалтерский учет, анализ и аудит
Финансы и кредит
Экономика
4.1. Сохранить страницу под именем forma1.html
4.2. Просмотреть страницу с помощью браузера Internet Explorer.
5. Добавить на Web-страницу следующую форму:
Анализ
 по наименованиям
 по товарным кодам
Вид платежа
 наличный
 безналичный
5.1. Сохранить страницу под именем forma1.html
5.2. Просмотреть страницу с помощью браузера Internet Explorer.
6. Добавить на Web-страницу следующую форму:
ФОРМА
Пользователь
Пароль
Подача запроса
Сброс
6.1. Сохранить страницу под именем forma1.html
6.2. Просмотреть страницу с помощью
браузера Internet Explorer.
Добавить на Web-страницу следующую форму:
Метод регрессии:
 линейная регрессия
 параболическая регрессия
 множественная регрессия
7. Добавить на Web-страницу следующую форму:
Метод дисперсионного анализа
 однофакторный
 двухфакторный
Запрос
7.1. Сохранить страницу под именем forma1.html
7.2. Просмотреть страницу с помощью браузера Internet Explorer.
8. Создать Web - страницу с использованием формы для
многостраничной области ввода ( 5 строк, ширина – 40) :
Создание многостраничной области ввода
Пример текста
8.1. Сохранить страницу под именем forma2.html
8.2. Просмотреть страницу с помощью браузера Internet Explorer.
9. Добавить на Web - страницу с использованием формы в виде списка так, чтобы на экране присутствовала одна строка:
Компьютеры
386
В список ввести наименования компьютеров: 286, 386, 486,
Pentium.
9.1. Сохранить страницу под именем forma2.html
9.2. Просмотреть страницу с помощью браузера Internet
Explorer.
10. Добавить на Web-страницу с использованием формы в виде списка при условии, что на экране задано отображение нескольких строк:
Программы
Microsoft Word
Microsoft Excel
Microsoft Access
В список ввести наименования программ: Microsoft Word, Microsoft Excel, Microsoft Access, Quattro Pro, MS Office.
10.1. Сохранить страницу под именем forma2.html
10.2. Просмотреть страницу с помощью браузера Internet Explorer.
Лабораторная работа №14.
САМОСТОЯТЕЛЬНАЯ РАБОТА.
Цель:


закрепить навыки работы с таблицами, списками, формами;
уметь создавать следующие виды форм: переключатель,
флажок, список;
ГИПЕРТЕКСТОВЫЕ ИНФОРМАЦИОННЫЕ
ТЕХНОЛОГИИ С ИСПОЛЬЗОВАНИЕМ
РЕДАКТОРА HTML
1. Создать Web–страницу:
CASE-ТЕХНОЛОГИИ
Современные методы и средства
проектирования информационных систем
1. Общие требования к технологии проектирования ИС.
 поддержка полного ЖЦ ПО
 гарантированное достижение целей разработки ИС
 возможность выполнения крупных проектов в виде
подсистем
 минимальное время получения работоспособной ИС
 зависимость выполняемых проектных решений от
средств реализации ИС (СУБД, ОС и языков программирования).
2. Сущность структурного подхода.
 принцип «разделяй и властвуй»
 принцип иерархического упорядочения
 принцип абстрагирования
 принцип формализации
 принцип непротиворечивости
 принцип структурирования данных.
Моделирование потоков данных
Внешняя сущность
Заказчик
ПОДСИСТЕМА
Поле номера
1
Поле имени
Подсистема обслуживания клиентов
Поле имени проектировщика
Накопитель данных:
Получаемые счета
Филиал банка
123678
Критерии оценки
и выбора CASE–средств:
использованием формы для
многостраничной области ввода
Российский рынок программного обеспечения располагает
следующими наиболее развитыми CASE–средствами:
ERwin+BPwin
CASE.Аналитик
Designer/2000
Vantage Team Builder
S-Designor
Таблица структур данных
Информация руководства
Новый поставщик
Запрос отчета о новых членах
Запрос отчета о поставщиках
Запрос отчета об аренде
Запрос отчета о продаже
Информация для руководства
Отчет о новых членах
Отчет о поставщиках
Отчет об аренде
Отчет о продаже
Описание типов связей
Уровень
значимости
0
1
Тип связи
Случайная
Логическая
2
Временная
3
Процедурная
4
Функциональная
Характеристика типа связи
Для функций
Для данных
случайная
Случайная
Функции одного
Данные одного типа
типа
Функции одного
Данные в одном вреПериода времени
менном интервале
Функции, работаДанные, используемые
ющие в одной фаво время одной фазы
зе
Функции для выДанные, связанные с
полнения одной
одной функцией
функции
Лабораторная работа №15.
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ
Цель:



научиться применять в HTML документах фреймы;
уметь создавать сложные фреймовые структуры с различными параметрами;
самостоятельно изучить параметры, влияющие на отображение фреймов.
ФРЕЙМЫ
1. Создать Web – страницу с использованием фрейма:
На этой странице фреймовой На этой странице фреймовой
структуры обычно располага- структуры обычно располагается оглавление сервера
ется содержимое выбранной
страницы
1.1. Сохранить под именем frаm1.html
1.2. Просмотреть страницу с помощью браузера Internet
Explorer.
2. Создать Web – страницу, имеющую горизонтальную фреймовую структуру:
30%
70%
2.1. Для верхнего фрейма создать файл data1.html с содержанием:
Портфельные инвестиции
АИ - активный инвестор
КИ - консервативный инвестор
2.2. Для нижнего фрейма создать файл data2.html с содержванием:
Виды бумаг
Портфель АИ
Портфель КИ
Акции
Облигации
Ценные бумаги
65
25
10
20
45
30
2.3. Сохранить под именем frаm2.html
2.4. Просмотреть страницу с помощью браузера Internet
Explorer.
3. Создать Web – страницу, имеющую вертикальную фреймовую структуру:
40%
60%
3.1. Для левого фрейма создать файл data3.html с содержанием:
Эффективность
основных
фондов
3.2. Для правого фрейма создать файл data4.html с содержанием:
Показатели
Выручка
Среднегодовая стоимость ОФ
Фондоотдача
Фондоёмкость продукции
Прошлый год
58000
42647
1,36
0,73
Отчёт год
63000
42567
1,48
0,67
3.3. Сохранить под именем frаm3.html
3.4. Просмотреть страницу с помощью браузера Internet Explorer.
4. Создать Web – страницу, имеющую вертикальную фреймовую структуру:
Оглавление сервера
 Товары
 Финансирование
 Обслуживание
Финансовые показатели
При расчёте финансовых показателей
применяются методы:
 нормативный
 расчётно-аналитический
 балансовый
 экономико – математическое моделирование
.
4.3. Сохранить под именем frаm4.html
4.4. Просмотреть страницу с помощью браузера Internet Explorer.
5. Создать Web – страницу, имеющую вложенную фреймовую
структуру:
1
3
20%
40%
2
60%
5.1. Сохранить под именем frаm5.html
5.2. Просмотреть страницу с помощью браузера Internet Explorer.
6. Создать Web – страницу, имеющую фреймовую структуру:
Новости
 Новости
 Прогноз погоды
 Компании
Финансы
 Обзоры
 Курсы валют
Культура
 Театральная афиша
 Шоу - бизнес
Твёрдая
экономия
времени
Новости дня
 Новости стран СНГ
 Новости российских регионов
 Общенациональный экономи-
6.1. Сохранить под именем frаm6.html
Просмотреть страницу с помощью браузера Internet Explorer.
Контрольная работа №16.
CОЗДАНИЕ И ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ
Цель:

уметь создавать сложные фреймовые структуры с различными параметрами;
ФРЕЙМЫ
1. Создать Web – страницу, имеющую фреймовую структуру:
Первый
документ
Третий
документ
Четвёртый
документ
Второй
документ
Пятый
документ
Седьмой
документ
Шестой
документ
Восьмой
документ
Девятый
документ
Для каждого документа сделать свой фон.
1.1. Сохранить страницу под именем frem7.html
1.2. Сохранить под именем frаmsam.html
1.3. Просмотреть страницу с помощью браузера Internet
Explorer.
ПРИЛОЖЕНИЕ 1
ИНСТРУМЕНТАЛЬНЫЕ ПАНЕЛИ HTML
New – новый
Open – открыть
Save – сохранить
Cut – вырезать
Copy – копировать
Paste – вклеить
Undo – отменить
Redo – восстановить
Find – найти
Find Next – найти следующий
Check spelling – проверить орфографию
Tesaurus – тезаурус
Show/Hide Tags – показать/скрыть метки
Insert Element – вставить элемент
Remove Tags – удалить элемент
Validate SGML – подтвердить правильность SGML
Insert Table – вставить таблицу
Abbut – информация о…
Средняя панель
Heading 1 – заголовок 3 уровня
Heading 2 – заголовок 2 уровня
Heading 3-6 – заголовки 3-6 уровней
Emphasis – акцент
Strong – сильный акцент
Paragraph – абзац
Block quote – блок в кавычках
Address – адрес
Unordered list – неупорядоченный список
Ordered list – упорядоченный список
Definition list – список определений
Definition term – термин определения
Definition description – описание определения
Image – изображение
Break – обрыв строки
Horizontal rule – горизонтальная линейка
Anchor – якорь
Connect link – установить связь
Name tagert – имя объекта назначения
Нижняя панель
Preformatted – предварительно форматированный
Code elements – элементы кода
Italic – курсив
Bold – жирный шрифт
Tele Type – телетайп
Citation – цитата
Head Elements – элементы заглавия
Form Elements – элементы формы
Other lists – другие списки
ISINDEX – есть индекс
Extensions to HTML 2.0 – расширения HTML 2.0
Insert comments – вставить комментарии
Spesial characters – спецсимволы
Таблица1. Назначение пунктов меню редактора
HTML – CoffeeCup
FILE
Файл
New
Create directory
Open Web-Page
Image Companion
Close
Save
Save as…
Save all
Print
Recent files
Exit
Новый
Создать директорию для проекта
Открыть Web- страницу
Библиотека (справочник) графических объектов
Закрыть
Сохранить
Сохранить как…
Сохранить все
Печать
Новые файлы
Выход
EDIT
Редактирование
Undo
Cut
Copy
Paste
Delete
Select All
Strip HTML from
Selected Text
Convert
to
UPPERCASE
Convert to lowercase
Convert to Propercase
Find fnd Replace
Отмена (откат) операции
Вырезать
Копировать
Вставить
Удалить
Выделить все
Полоса HTML из выделенного текста
Преобразовать в заглавные (верхний регистр)
Преобразовать в строчные (в нижнем регистре)
Преобразовать в рациональные (правильные)
Найти и заменить
TAGS
Обновить метку выделенной информации на
экран
Метки телесети
Каналы связи
Отобразить графические объекты библиотеки
Gallery
Озвучить графические объекты библиотеки
Gallery
Список, перечень, таблица
Горячая вставка :
in Использование шрифтов в таблице стилей
Refresh Tag Highlights
WebTV Tags
Links
Image Gallery
Sound Gallery
List
Hot Stuff :
Use fonts
Style Sheet
Page forwarding
Mouse over
Style Sheet
Layering
Two
Images
Build a Simple
Frame
View Source
Страница выбора направления передачи данных
Таблица стилей
Иерархическое представление двух графических объектов
Построение простого кадра
Просмотр исходного текста (файла, каталога)
Display You Hard
Drive
Close Window
One Hot Little
Button
Include Sounds
Include Two
Background
Отображение вашего накопителя на жестких
магнитных дисках
Закрыть окно
Маленькая горячая кнопка
Активная область текста или изображения на
экране
Включение звука
Включение двух фонов (фоновых планов)
Paragraph
Break
Left Align
Center
Right Align
Bold
Italic
Underline
Strike
Header Sizes
Font tag Designer
Font Size
Font Color
Абзац, параграф
Прерывание, остановка
Выравнивание влево
Выравнивание по центру экрана
Выравнивание вправо
Выделить полужирным курсивом
Курсив
Подчеркивать
Перечеркивать
Заглавные размеры (шрифты)
Конструктор метки шрифта
Размер шрифта
Цвет шрифта
TOOLS
Инструментальные средства (Сервис)
Test with Favorite
Browser
Test with Defaul
Browser
Turn on/off Tag
Highlighting
Tables
Insert
Spesial
Characters
Search for Undocumented Characters
Insert ActiveX object Tag
Form Designer
Проверка (контроль) выбранным браузером
Проверка браузером, используемым по
умолчанию
Включить/Выключить метку выделения информации на экране
Таблицы
Вставка специальных символов
Поиск неописанных символов
Вставка метки объекта ActiveX
Конструктор формы представления данных в
пвмяти машины
Конструктор обрамления изображения (кадра)
Image Companion
Справочник графических объектов
FTR Upload & Протокол передачи файла по сети из Вашего
Download
компьютера в другой и из удаленного компьютера в ваш компьютер
Launch
Image Запуск графического преобразователя
Mapper ++
Preferences
Глобальные параметры
Set Editon Font
Установить шрифт Редактора
Toolbars and Men- Панели инструментов в меню :
us :
Customize
Настройка
Save Current
Сохранить текущую конфигурацию как…
Configuration
as…
CoffeeCup
Классический (образцовый) CoffeeCup
Classic
Check Spelling
Контроль правописания
Frame Designer
WINDOWS
ОКНА
Cascade
Tile Horizontally
Каскад
Мозаика по вертикали (расположение окон
сверху вниз)
Слева направо (вертикальное расположение
окон)
Tile Vertically
HELP
ПОМОЩЬ
Tip of the day
Editor ++ Help
Советы дня
Редактор
ПРИЛОЖЕНИЕ 2
НАЗВАНИЯ КОДОВ И ЦВЕТОВ
RGB - КОД
АНГЛИЙСКОЕ НАЗВАНИЕ
РУССКОЕ
НАЗВАНИЕ
#FFFFFF
#FF0000
#FFFF00
#00FF00
#00FFFF
#0000FF
#FF00FF
#A52A2A
#000000
#008000
#800000
#808000
#800080
#C0C0C0
#808080
#008080
#000080
WHITE
RED
YELLOW
LIME
AQUA
BLUE
FUCHSIA
BROUN
BLACK
GREEN
MAROON
OLIVE
PURPLE
SILVER
GRAY
TEAL
NAVY
БЕЛЫЙ
КРАСНЫЙ
ЖЕЛТЫЙ
СВЕТЛО-ЗЕЛЕНЫЙ
БИРЮЗОВЫЙ
СИНИЙ
ФУКСИНОВЫЙ
КОРИЧНЕВЫЙ
ЧЕРНЫЙ
ЗЕЛЕНЫЙ
КАШТАНОВЫЙ
ОЛИВКОВЫЙ
ПУРПУРНЫЙ
СЕРЕБРИСТЫЙ
СЕРЫЙ
СИЗЫЙ
УЛЬТРАМАРИН