Лабораторный практикум. Части 1-2

Язык HTML. Создание первой Internet страницы сайта

 

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

Для создания WEB - страниц необходим текстовый редактор, в частности Блокнот, т.к. HTML – документ представляет собой обычный текстовый файл.

В качестве команд используются специальные последовательности символов – теги.

 

Задание. Требуется создать первую страницу. Требования к ней:

1. В качестве фона использовать рисунок, провести горизонтальную линию
2. Разместить бегущую строку с установкой ширины, высоты, цвета фона и ее поведения.
3. Используя различные теги форматирования, представить информацию об организации / предприятии.
4. Включить в текст список.
5. Указать электронный адрес организации / предприятия.

 

Основные теги, их назначение

< html> < /html> - сообщает, что документ написан на языке HTML

< title> < /title> - указывает заголовок WEB-страницы

< head> < /head> - отмечает вводную и заголовочную часть документа

< body> < /body> - содержит основные данные

< p> < /p> - отдельный абзац текста, после него добавляется пустая строка

< h1> < /h1> - заголовок первого уровня

< h2> < /h2> - заголовок второго уровня

< h3> < /h3> - заголовок третьего уровня

< a> < /a> - ссылка на другой объект (e-mail, файл, гиперссылка)

< em> < /em> - шрифт курсив

< b> < /b> - полужирный шрифт

< center> < /center> - выравнивание информации по центру

< br/> - обрыв строки

< font size=”” face=”” color=””> < /font> - установка размера, типа, цвета шрифта

< big> < /big> - увеличение шрифта на один размер

< marquee> < /marquee> - бегущая строка

< hr color=" " width=" " height=" " > < /hr> - рисование линии

< ul> < /ul> - создание маркированного списка

< li> < /li> - создание пункта списка

В качестве задачи ставится цель создания Web-сайта организации (предприятия). Он должен содержать 4 страницы, первая – главная, вторая - характеристика товара / услуги, третья - форма заказа на приобретение товара / услуги, четвертая – путеводитель по сайту. Все страницы должны быть выполнены в одном стиле, выдерживать предъявляемые к ним требования: размеры страниц (в Кб), размеры рисунков, количество различных типов шрифтов, цветовых гамм пр.

 

Страница может выглядеть так:

Рис. 14

 

Лабораторная работа № 10

Таблица стилей. Создание второй страницы

 

HTML – язык гипертекстовой разметки, которым определяется структура документа (абзацы, заголовки, таблицы, списки). Несмотря на то, что HTML не имеет никакого отношения к настольным издательским системам, в этот язык включены несколько атрибутов форматирования (элементы типа < font>).

Впервые идея форматирования HTML-документов с помощью каскадных таблиц стилей (Cascading Style Sheets - CSS) была рекомендована Консорциумом W3C в 1996 г. Эта рекомендация, которая была обновлена в середине 1998 г., используется web-разработчиками по сей день. Теория, стоящая за таблицами стилей, такова: их применение основано на принципе разделения информативной и оформительской частей работы над страницами. С появлением CSS у разработчиков появилась возможность отделить структуру документа от его формата.

Таблица стилей – набор правил, которыми определяется применение стилей форматирования к дескрипторам HTML документа. CSS предполагает три типа таблицы стилей – встроенная, внутренняя, внешняя.

Встроенная - свойство стиля указывается в верхней части HTML документа в пределах дескриптора < style>. Стиль, который назначен определенному дескриптору, будет унаследован всеми такими же дескрипторами в данном HTML документе. Предпочтительны для форматирования отдельных элементов одной web страницы.

Внутренняя – атрибуты стиля могут быть объявлены в любой части кода страницы, т.е. каждому HTML дескриптору назначают собственные атрибуты стиля. Особенно удобны для форматирования отдельных дескрипторов, формат которых должен коренным образом отличаться от стилей других элементов.

Внешняя – свойство стиля находятся в отдельном файле, такие файлы могут быть связаны с любым HTML документом. Для этого в код страницы необходимо включить дескриптор < link>, который должен находиться в пределах дескриптора < head>. Следует использовать для форматирования большинства заголовков и ссылок страниц.

 

Задание. Необходимо создать вторую страницу, посвященную рекламе

товара / услуги. Требования к ней:

1. Для форматирования всех объектов, содержащихся на странице, обратиться к встроенной таблице стилей
2. Включить внутренние ссылки по странице
3. Использовать таблицу
4. Добавить небольшой графический объект, при щелчке на который появляется другой графический объект или видеоизображение

Основные теги, их назначение

< html> < /html> - сообщает, что документ написан на языке HTML

< title> < /title> - указывает заголовок WEB-страницы

< head> < /head> - отмечает вводную и заголовочную часть документа

< body> < /body> - содержит основные данные

< p> < /p> - отдельный абзац текста, после него добавляется пустая строка

< br/> - обрыв строки

< style type=" text/css" > < /style> - описание стиля отдельных объектов страницы

< a> < /a> - ссылка на другой объект (e-mail, файл, гиперссылка)

< table> < /table> - создание таблицы

< tr> < /tr> - создание новой строки в таблице

< td< /td> - создание ячейки (столбца) в строке

< img src=" " alt=" " height=" " width=" " > - внедрение рисунка с всплывающей подсказкой

 

Таблица 6

Свойства стиля

Свойство	Применение, значения
background	Цвет фона
color	Цвет шрифта
font-family	Шрифт текста
font-size	Размер шрифта, указывается в пунктах или в % от размера шрифта другого дескриптора
font-style	Начертание шрифта – возможно italic (курсив)
font-weight	Полужирный шрифт bold
text-align	Выравнивание текста, линий – left, right, center, justify (по ширине страницы)
text-indent	Величина отступа
text-decoration	Видоизменение шрифта – underline (подчеркнутый), overline (подчеркнутый сверху), strikethround (зачеркнутый)
height	Длина линии в % от доступного пространства
width	Высота в пикселях
margin-left/right/top: числоpx	Размеры отступов в пикселях(px), см (cm) слева, справа, сверху

 

 

Страница может выглядеть так:

Рис. 15

 

Лабораторная работа № 11

JavaScript. Создание третьей страницы

 

Язык HTML дает возможность создать и оформить статический документ. Придать же WEB документам динамику помогает множество www технологий. Для изменения содержимого страницы после загрузки в браузер, необходимо воспользоваться специализированными web-приложениями и /или сценариями. В результате применения этих программных средств вы сможете «запрограммировать» поведение тех или иных элементов страницы, в зависимости от действий пользователя (например, от щелчка мышью, перемещения указателя мыши).

JavaScript – это язык написания сценариев, используемый при оформлении документации HTML. JavaScript позволяет добавить элементы функциональности в статический www - документ и открыть новые возможности эффективного обмена данными клиента и сервера. Сценарий JavaScript – это интерпретируемая программа, управляющая обменом данными и обеспечивающая эффективную работу пользователя с приложением. Сам код языка можно создавать в любом текстовом редакторе или в специализированных. Для написания кода не требуется среда разработки, т.к. JavaScript является интерпретатором, встроенным в браузер.

 

Задание. Требуется создать третью страницу, предназначенную для заказа товара / услуги. Требования к странице:

1. Задать различные отступы от края
2. Создать форму, включив в нее поле ввода, список, переключатель, флажок и кнопки Отправить заказ и Просмотр заказа с всплывающей подсказкой
3. Кнопку Просмотр заказа использовать для проверки правильности вводимых данных и просмотра бланка заказа
4. Использовать различные способы форматирования объектов в форме

 

Основные теги, их назначение

< html> < /html> - сообщает, что документ написан на языке HTML

< title> < /title> - указывает заголовок WEB-страницы

< head> < /head> - отмечает вводную и заголовочную часть документа

< body> < /body> - содержит основные данные

< p> < /p> - отдельный абзац текста, добавляется пустая строка

< style type=" text/css" > < /style> - описание стиля отдельных объектов страницы

< script language=" JavaScript" > < /script> - текст фрагмента программы, содержащий сценарий

< select> < option> < /select> - создание списка

< input type=" " /> - создание поля ввода, переключателя, флажка, кнопки

 

Страница и бланк заказа могут выглядеть так:

Рис. 16

 

Рис. 17

 

При обработке заказа предусмотреть следующие возможности, согласно номеру варианта.

Таблица 7

Задания к форме

Вариант	Особенности формы
	Вывести в окно alert значение флажка (включен / выключен). Проверка символьного поля на пустое значение
	При выходе из символьного поля проверить, не является ли первый символ числом. Вывести диалоговое окно «Вам действительно нужен < товар>?»
	Автоматическое заполнение поля количества товара значением, равным номеру текущего месяца. Вывести в окно alert название включенного переключателя
	Автоматическое заполнение поля даты текущей датой. Проверка числового поля на цифры
	Вывести диалоговое окно «Вам действительно требуется < число> единиц?». Предоставить возможность ввести с помощью окна prompt новое значение
	Вывести в окно alert инициалы покупателя. Проверить числовое поле на пустое значение
	Автоматическое заполнение поля даты текущей датой. Проверка числового поля на диапазон значений
	Проверить, является первый символ символьного поля числом, в этом случае вывести сообщение об ошибке. Создать вторую кнопку, при нажатии на которую выводилась информация об авторе сайта.
	Вывести в окно alert название включенного переключателя. Создайте подтверждение с помощью окна confirm
	Вывести в окно alert только фамилию покупателя (символы до первого пробела). Проверить символьное поле на пустое значение

 

 

Лабораторная работа № 12

Фреймы. Создание домашней страницы

 

Домашняя страница – страница, открываемая браузером при обращении к сайту. Как правило, она является путеводителем по сайту, т.е. имеет ссылки на все страницы сайта.

 

Задание. Необходимо создать четвертую страницу – путеводитель по сайту и главную. Требования к страницам:

1. Четвертая страница должна содержать список ссылок на первую, вторую и третью страницы, вторая и третья должны загружаться в первую.
2. Создать текстовый файл, позволяющий создать главную страницу, состоящую из двух вертикальных фреймов: в левый фрейм загружается четвертая страница, в правый – первая. Сделать страницу доступной для поисковых систем.
3. Использовать различные способы форматирования страниц.

 

 

Основные теги, их назначение

< html> < /html> - сообщает, что документ написан на языке HTML

< title> < /title> - указывает заголовок WEB-страницы

< head> < /head> - отмечает вводную и заголовочную часть документа

< body> < /body> - содержит основные данные

< meta> - команды, предназначенные для браузера

< p> < /p> - отдельный абзац текста, после него добавляется пустая строка

< style type=" text/css" > < /style> - описание стиля отдельных объектов

< frameset> < /frameset> - создание фреймов

< frame src=" " name=" " > - указывается страница, загружаемая во фрейм

 

Таким образом, главная страница может выглядеть так:

Рис. 18

 

Литература

 

1. Экономическая информатика: Учебник / Под ред. Конюховского П.В., Колесова Д.Н. – СПб.: Питер, 2000 – 560 с.
2. Экономическая информатика: Учебник / Под ред. Косарева В.П.- М.: Финансы и статистика, 2004. -592 с.
3. В. Попов. Практикум по Интернет-технологиям: учебный курс. – СПб.: Питер, 2002. – 480 с.

 

Оглавление

 

1. Построение таблицы. Форматирование. Сортировка данных. Построение диаграмм.

2. Использование стандартных функций в расчетах. Способы адресации. Копирование формул. Построение диаграмм.

3. Пользовательский формат чисел

4. Проверка вводимых данных на рабочем листе

5. Поиск решения

6. Создание сводной таблицы и структуры рабочего листа

7. Элементы управления (ЭУ) на рабочем листе. Макрорекордер

8. Создание и обработка базы данных средствами Excel

9. Язык HTML. Создание первой Internet страницы сайта

10. Таблица стилей. Создание второй страницы

11. JavaScript. Создание третьей страницы

12. Фреймы. Создание домашней страницы

13. Список литературы

 

Лабораторный практикум. Части 1-2