Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Содержание раздела дисциплины Результаты обучения
р
Тема 2.5. Использование форм и
фреймов в HTML
Область применения форм в
HTML-документах. Тег <FORM>.
Основные элементы, используемые
в формах: текстовое поле, переключатель, открывающееся меню,
кнопки. Атрибуты тега <FORM>.
Определение элементов управления формы – тег <INPUT>. Атрибуты тега <INPUT>. Использование тега <TEXTAREA> для
создания многострочных областей
ввода текста. Атрибуты тега
<TEXTAREA>. Использование
списков в форме
его атрибуты.
Задание фреймовой структуры. Теги, определяющие фреймовую
структуру документов. Подготовка
содержимого фрейма. Подготовка
главного фрейма. Макети
фреймов – тег <FRAMESET>. Атрибуты тега <FRAMESET>. Создание вложенных фреймов. Примеры использования фреймовых
структур в HTML-документах
– тег <SELECT>,
ование
2 МЕТОДИЧЕСКИЕ УКАЗАНИЯ И ПУТЕВОДИТЕЛЬ
ПО ЛИТЕРАТУРЕ ДЛЯ ИЗУЧЕНИЯ КУРСА
HTML является простым подмножеством универсального языка
разметки документов SGML (Standard Generalized Markup Language – стандартный язык разметки документов), являющегося стандартом для обмена
документами между различными платформами. Язык гипертекстовой разметки лежит в основе формирования документов World Wide Web.
Для бакалавров направления подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность» компетенции, формируемые
при
изучении курса «Web-технологии», необходимы для будущей профессио-
11
нальной деятельности. Изучение этой дисциплины направлено на формирование знаний и умений по созданию сайтов, электронных выставок и
коллекций.
Дисциплина «Web-технологии» имеет ярко выраженную практическую направленность: основными видами учебной работы студентов
при освоении данного курса являются лабораторные работы. Цель лабораторных работ – сформировать у студента практические навыки по созданию
web-сайтов.
Первый раздел учебной дисциплины «Языки разметки: основные понятия» посвящен характеристике языков разметки. В первой теме данного
раздела представлена общая характеристика языков разметки: SGML,
HTML, XML. Для получения более полной информации о SGML и его
взаимосвязях с HTML можно ознакомиться со спецификацией по HTML
на русском языке (http://www.w3.org/MarkUp/html4-updates/translations).
О диалектах XML подробнее можно узнать из практического пособия
[7].
В рекомендуемых источниках [3; 4; 6] представлена информация
о принципах гипертекстовой разметки, структуре HTML-документа и его
базовых элементах.
Второй раздел «Основы форматирования в HTML» посвящен освоению технологий созданий HTML-документов. На получение практических
навыков по созданию web-страниц ориентирован лабораторный практикум.
Лабораторные работы составлены таким образом, чтобы максимально активизировать деятельность студентов при изучении HTML-технологий: представлена технология работы как в Microsoft FrontPage 2003,
так и работа с HTML-кодом в программе Блокнот.
Лабораторная работа состоит из теоретической части, описания технологии ее выполнения, заданий и контрольных вопросов для самопроверки. Теоретическая часть каждой лабораторной работы содержит описание
основных тегов и их атрибутов, а также примеры их применения.
Источниками дополнительной
литературы при изучении тем второго
раздела могут служить [1; 3; 5; 6; 12], а также информационные ресурсы
Интернета, указанные в «Полезных ссылках».
Рекомендуется при изучении темы 2.4, создании проектов исполь-
зовать рекомендуемые источники [1; 3; 5].
12
3 ОПИСАНИЯ ЛАБОРАТОРНЫХ РАБОТ
Лабораторная работа 1
Базовые элементы языка и структура HTML-документа
2 часа
Цель работы: получить представление о базовых элементах языка
и структуре HTML-документа.
Задачи работы:
1) Ознакомиться с тегами, определяющими структуру HTML-доку-
мента.
2) Ознакомиться с интерфейсом программы MS FrontPage 2003.
3) Овладеть навыками создания гиперссылок.
Формируемые компетенции:
готовность к овладению основными методами, способами и сред-
ствами получения, хранения, переработки информации, наличие навыков
работы с компьютером как средством управления информацией (ОК-12);
готовность к овладению перспективными методами библиотечно-
информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
базовые конструкции гипертекстового языка разметки (ОК-12);
уметь:
использовать базовые конструкции гипертекстового языка размет-
ки в своей учебной и профессиональной деятельности (ПК-4);
владеть:
навыками создания гиперссылок (ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать простейшие HTML-страницы средствами текстово-
го редактора Блокнот и HTML-редактора MS FrontPage 2003.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде HTML-документа и ответов на контрольные вопросы.
Теоретические сведения
Элемент – это конструкция языка HTML, предписывающая способ
интерпретации помещенных внутри
нее данных.
13
Элемент разметки или оформления, входящий в формат HTML,
называется тег.
НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки
("<" и ">").
Любой тег имеет общий вид:
<имя> область действия тега </имя>
Теги определяют границы действия элементов.
Атрибут – параметр или свойство
элемента.
Запись атрибута в общем виде:
имяАтрибута="значение"
Все атрибуты записываются внутри стартового тега.
Запись стартового тега с атрибутом в общем виде:
<тег имяАтрибута="значение">
Атрибуты внутри стартового тега разделяются пробелами. Порядок
записи атрибутов в теге значения не имеет. Регистр символов в именах тегов и атрибутов не учитывается, чего
нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе
URL (Universe Resource Locator, унифицированный указатель ресурса),
других документов в качестве значения атрибута HREF.
Теги могут вкладываются в друг друга иерархически. Допустимо
вложение вида
<тег1><тег2></тег2></тег1>
Действие вложенных тегов объединяются.
Рассмотрим структуру HTML-документа.
Любой документ начинается с тега <HTML>,
который сообщает
программе просмотра, что данный файл – это документ на языке HTML.
Заканчивается документ тегом </HTML>, который является закрывающим
тегом, парным тегу <HTML>.
Далее – между тегами <HEAD> и </HEAD> – следует головная часть
документа, внутри которой, между тегами <TITLE> и </TITLE>, находится
название документа. Название выводится в заголовке окна браузера.
Как правило, оно предлагается в качестве имени файла при
сохранении
HTML-документа. Между тегами <BODY> и </BODY> помещается ос-
новная часть документа, так называемое тело документа.
14
Создание гиперссылок
Одним из основных элементов HTML-документа является гиперссылка, с помощью которой можно переходить от одного документа
к другому или к отдельному элементу (закладке) на той же или на другой
странице.
Для создания гиперссылки служит тег вида:
<A HREF="URL_документа" >текст ссылки</A>
Тег <A> имеет обязательный атрибут HREF, в качестве значения которого
используется
адрес документа (URL).
Адрес ссылки может быть как абсолютным, так и относительным.
Относительные ссылки построены относительно текущего документа. Подобную адресацию целесообразно использовать для связи страниц на
локальном веб-узле, так как при перемещении группы страниц не придется
изменять все адреса URL, если страницы расположены одинаково по отношению друг к другу.
Примером относительных адресов URL могут служить следующие
записи:
text.htm
Web-технологии/lesson.htm
В первом случае относительный адрес URL содержит только имя
файла и указывает на файл в папке, в которой расположена текущая
страница.
Во втором – адрес URL указывает на файл, который расположен на
более низком уровне структуры папок. Так, если текущей страницей является файл
index.htm, то браузер предполагает, что папка «Web-технологии»
расположена в той же папке, что и файл «index.htm». Следовательно, браузер ищет файл «lesson.htm» в этой папке.
Для указания файла (test.htm), находящегося в папке, расположенной
на один уровень выше по отношению к папке, в которой расположен
текущий файл, необходимо использовать следующую запись:
../test.htm
Интерфейс программы Microsoft FrontPage 2003
Интерфейс программы
состоит из стандартных для различных
Windows-приложений частей (рис. 1).
15
Рисунок 1 – Интерфейс программы Microsoft FrontPage 2003
Строка меню (рис. 2) имеет стандартный для большинства Windowsприложений вид и предлагает доступ к основным командам и настройкам
программы.
Рисунок 2 – Строка меню
Панель инструментов (рис. 3) состоит из ряда частей. Содержимое
панели пользователь может выбирать с помощью меню Вид.
Рисунок 3 – Панель инструментов
Основное окно программы (рис. 4) содержит четыре вкладки: Кон-
структор, С разделением, Код, Просмотр.
Рисунок 4 – Основное окно программы
16
Вкладка Конструктор позволяет работать с HTML-документом
как с обычным текстовым файлом. В этом случае программа автоматически расставляет все необходимые теги в документе, которые в этом режиме не видны на экране.
Вкладка С разделением предназначена для одновременной работы
с макетом страницы и кодом. В этом представлении экран разделен на две
части: область кода и область конструктора. При выборе элементов
в одной области другая область прокручивается и в ней идентифицируется
соответствующий элемент.
Можно работать как в области кода, так и в области конструктора.
Если редактируется HTML-код в области кода, то следует обновить страницу (нажать клавишу F5), чтобы увидеть измененную страницу в
области
конструктора.
При внесении изменений в области конструктора код автоматически
обновляется в области кода, поэтому в обновлении необходимости не возникает.
Вкладка Код предназначена для просмотра и редактирования исходного кода HTML-документа. Это представление удобно в том случае, если
необходимо много места для написания или редактирования кода, например, если набирается
большой фрагмент кода для сложной таблицы.
Вкладка Просмотр предоставляет возможность просмотра созданного HTML-документа с помощью встроенного web-браузера.
Наличие четырех вкладок дает возможность пользователю работать
с HTML-документом как с обычным текстом и использовать все возможности его редактирования: изменение параметров редактирования текста,
его размещения на странице, добавление таблиц, изображений и
т. д.
Создание страницы в Microsoft FrontPage
Для создания нового файла можно воспользоваться кнопкой Создание новой обычной страницы на панели инструментов или командой
Создать меню Файл. В первом случае будет создан документ со следую-
щим кодом HTML (рис. 5). Как видно из рисунка, теги, определяющие
структуру HTML-документа, сгенерировались автоматически.
При использовании меню Файл пользователю
будет предложено
выбрать один из примеров, на основе которого будет создан новый документ.
Основные параметры созданной страницы изменяются с помощью
команды Свойства меню Файл. Эта команда доступна для вызова, если
17
пользователь находится на вкладке Конструктор. При вызове этой команды появляется окно Свойства страницы (рис. 6).
Рисунок 5 – HTML-код страницы
Рисунок 6 – Окно Cвойства страницы
18
На вкладке Общие пользователь может ввести название документа,
которое располагается между тегами <TITLE> и </TITLE> и его местоположение (Базовое расположение).
Пользователь также может выбрать звуковой файл, который будет
проигрываться при просмотре страницы.
Вкладка Форматирование (рис. 7) позволяет пользователю определять цвет фона (Фон) и текста (Текст), выбирать фоновое изображение
(Фоновый рисунок), а
также цвета активных (Активная ссылка), посещен-
ных (Просмотренная ссылка) и непосещенных ссылок (Гиперссылка).
Рисунок 7 – Вкладка Форматирование окна Свойства страницы
С помощью вкладки Дополнительно (рис. 8) можно изменить отступы от границ документа.
Вкладка Другие (рис. 9) предназначена для определения служебных
meta-тегов и задания из значений.
19
Рисунок 8 – Вкладка Дополнительно окна Свойства страницы
Рисунок 9 – Вкладка Другие окна Свойства страницы
Вкладка Язык (рис. 10) позволяет задать кодировку, с помощью
которой следует просматривать содержимое документа.
20
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]