Тема: Создание WEB – документов и их размещение в Internet
Продолжительность 4 часа
Вопросы (задачи), подлежащие исследованию.
1.1. Структура документа HTML
1.2. Элементы HTML
1.3. Гипертекстовые ссылки
1.4. WEB-графика и создание описания фреймов
1.5. Форматирование текста
1.6. Списки
1.7. Интерактивные WEB – документы
1.8. Публикация WEB – документов
2. Краткие теоретические или справочно-информационные материалы.
2.1. Всемирная паутина (World Wide Web - WWW) является глобальной распределенной гипертекстовой и мультимедийной информационной системой. Она позволяет связать в одном документе разнородную информацию, хранящуюся на разных компьютерах. Гипертекстовые документы, с которыми работает WWW, называются Web-страницами. Гипертекст – это документ, который наряду с обычной текстовой и графической информацией содержит ссылки на другие документы, включая и мультимедийные (графические, звуковые и видео). Ссылку можно узнать по виду курсора мыши. Когда ссылка оказывается в фокусе мыши, курсор мыши принимает вид кисти руки с указующим перстом.
2.2. Для создания гипертекстовых документов используется язык HTML, который позволяет задать необходимую разметку текста и встроить в него необходимые ссылки. 
2.3. Для работы с WWW используются специальные программы-клиенты, называемые навигаторами, обозревателями или броузерами. Помимо просмотра Web-страниц при работе с WWW, обозреватели дают возможность пользоваться и другими сервисами Internet (посылать электронные письма абонентам сети, получать файлы с анонимного FTP и др.). Одной из таких программ является рассматриваемый ниже обозреватель Internet Explorer 5.0.
3. Рекомендации студентам по подготовке к лабораторной работе с указанием литературы.
При подготовке к выполнению лабораторной работы необходимо изучить следующие вопросы:
3.1. .Технология Создания WEB - документов
3.2. Применение языка HTML.
3.3. Публикация WEB - документов.
3.4. Источники
3.4.1. Симонович С.В. Информатика. Базовый курс. Учебник для ВУЗов. Изд-во «Питер». СПб 2005.
3.4.2. Иванов М.И, Уткин Ю.Г. . Информатика. Учебное пособие М.: Изд-во «Альтаир» МГАВТ, 2004.
3.4.3. Карабутов Н.Н. Создание интегрированных документов в Microsoft Office: введение в анализ данных и подготовку документов Учебное пособие. Из-во «Солон» 2005г.
Описание лабораторного оборудования.
4.1. . Персональный компьютер – ПЭВМ.
4.2. .Программное обеспечение: OC WindowsXP (9х – любой версии), браузера INTERNET EXPLORER, сеть INTERNET.
5. Краткое содержание работы, выполняемой студентами в ходе занятия.
5.1. Ввод HTML – кода WEB – страницы.
5.2. Загрузка файла в окно браузера INTERNEN EXPLORER для просмотра.
5.3. Ввод дополнений в контейнер <BODY>.
5.4. Вставка изображения и обтекающий его текст.
5.5. Выполнение аналогичного самостоятельно задания:
5.6. Создание кода панели навигации.
5.7. Создание кода задающего список
5.8. Создание кода текстового поля для ввода данных
5.9. Самостоятельно оформление страницы.
Порядок проведения работы.
6.1. Открыть окно текстого редактора Блокнота – Ввести HTML – код WEB – страницы
<HTML>
<HEAD>
<TITLE> МГАВТ</TITLE>
</HEAD>
<Body>
Давайте знакомиться –
Московская государственная академия водного транспорта
</Body>
</HITL>
6.2. Сохранить файл под именем INDEX.HTM в вашей папке
6.3. Загрузить этот файл в окно браузера INTERNEN EXPLORER для просмотра. Дать команду Файл - Открыть.
6.4. В созданный файл ввести дополнение контейнер <BODY>. Для этого , с использованием контекстного меню вызвать программный код “Просмотр в виде HTML”
<H1 ALIGN = “center”>
<FONT COLOR = “blue”>
Давайте знакомиться –
Московская государственная академия водного транспорта
</FONT>
</H1>
<HR>
</Body>
6.5. Вызвать редактор Paint, задайте атрибуты рисунка 400х300 и с использованием инструментов редактора создайте изображение эмблемы с именем com.bmp в Вашей папке.
6.6. Вызвать “Блокнот” и ввести в созданный файл INDEX.HTM изменения и дополнения в контейнер <Body> для тега вставки изображения и обтекающий его текст. Просмотреть результат в браузере
<IMG SRC = “com.bmp”
ALT = “Эмблема”
ALIGN = “right”>
Морской и речной флот - часть истории государства Российского. Моря и реки сделали Россию великой державой.
Водному транспорту нашей страны требуются специалисты с высоким уровнем образования и всесторонней профессиональной подготовкой.
Подготовку таких специалистов государство поручило Московской государственной академии водного транспорта(МГАВТ). Академия является единым учебным комплексом. На ее базе впервые в России внедрено в транспортной отрасли трехуровневое обучение учащихся, курсантов, студентов.
6.7. Выполните самостоятельно задания:
6.7.1. Получите бегущую строку “Давайте знакомиться - Компьютер” с использованием тегов:
<marquee>
</marquee>
6.7.2. .Измените размер (Н3) и цвет (Red) для текста.
6.7.3. Измените цвет фона.
6.8. С использованием «Блокнот» создать пустые страницы «Факультеты», «Кафедры», «Студсовет», «Анкета» и сохранить их в файлах с именами fakul.htm, kaf.htm, student.htm, anketa.htm в Вашей папке.Каждая страница будет содержать следующий HTML – код, например software.htm
<HTML>
<HEAD>
<TITLE> Факультеты </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
6.9. С использованием “Блокнот” вставить в файл Index.htm код, создающий панель навигации.Просмотреть в IE
<P ALIGN = “CENTER”>
[<A HREF = “fakul.htm”> Факультеты </A>]
[<A HREF = “kaf.htm”> Кафедры </A>]
[<A HREF = “student.htm”> Студсовет </A>]
[<A HREF = “anketa.htm”>анкета </A>]
</P>
6.10. Открыть в блокноте файл fakul.htm и добавить следующий HTML – код, задающий список
<UL>
<LI> судовождения и эксплуатации флота
<LI>водных путей, портов и портового оборудования
<LI>судомеханический
<LI>экономики и управления
</UL>
6.11. Добавить HTML код, задающий вложенный список для элемента <LI>. судовождения и эксплуатации флота.
<UL>
<LI> судовождение
<LI> организация перевозок и управление на водном транспорте
<LI> </UL>
6.12. Открыть в Блокноте файл kaf.htm и добавить следующий HTML – код, задающий список
<DL>
<DT> Cудовождения
<DD>Ведет подготовку по предметам морского и речного судовождения
<DT>Организация перевозок и АСУ на водном транспорте.
<DD>. Ведет подготовку по предметам эксплуатации флота и АСУ на водном транспорте.
6.13. Открыть в блокноте файл anketa.htm и добавить следующий HTML – код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере.
<FORM>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE = “TEXT”
NAME = “name” SIZE = 30><BR>
E-mail: <BR>
<INPUT TYPE = “TEXT”
NAME = “E-mail” SIZE = 30>
</FORM>
6.14. Добавить HTML – код, создающий группу !!!получателей!!! для выбора одного варианта. Просмотреть страницу в браузере. Укажите к какой социальной группе Вы себя относите: <BR>
<INPUT TYPE = “radio”
NAME = “group” VALUE =
“schoolboy”> учащийся <BR>
<INPUT TYPE = “radio”
NAME = “group” VALUE = “student”> студент <BR>
<INPUT TYPE = “radio”
NAME = “group”
VALUE = “teacher”> учитель <BR>
6.15. Добавить HTML – код, создающий кнопки. Просмотра страниц в браузере
<INPUT TYPE = “submit”
VALUE = “Отправить”>
<INPUT TYPE = “reset”
VALUE = “Очистить”>
6.16. Самостоятельно оформите страницу
6.16.1. Сделать подпись
6.16.2. Произвести вставку рисунка
6.16.3. Оформить фон страницы.
Техника безопасности.
При выполнении лабораторной работы необходимо строго соблюдать меры безопасности, для чего:
7.1. Включать электропитание ПК только по команде преподавателя (с разрешения преподавателя);
7.2. Строго соблюдать последовательность включения и выключения ПК; ИБП .
7.3. Категорически запрещается :
7.3.1. производить вскрытие системных блоков;
7.3.2. отключение и подключение интерфейсных кабелей и кабелей питания как во время работы, так и при отключенном напряжении;
7.3.3. производить несанкционированные действия с элементами системы ввода (мышь, клавиатура);
7.3.4. Делать перестановки оборудования на рабочем месте
Исходные данные для работы.
8.1. Операционная система MS Windows, браузер INTERNET EXPLORER, сеть INTERNET
8.2. конспект лекций;
8.3. указания преподавателя по подготовке и проведению лабораторной работе.
9. Методика анализа полученных результатов. Контрольные вопросы.
9.1. Полученные в ходе работы файлы и папки должны иметь образец оформления и содержания, представленный в папке Мои документы\образ\лаб4
9.2. Что такое WEB – документ?
9.3. Какие теги должны присутствовать в HTML-документе обязательно?
9.4. Какую функцию выполняет гиперссылки?
9.5. Какие существуют варианты технологии публикации WEB – документа?
10. Порядок оформления отчета по лабораторной работе и его защиты.
10.1. Название работы, дата выполнения, исполнитель.
10.2. Цель работы.
10.3. Исходные данные.
10.4. Перечень применяемых приборов и материалов.
10.5. Ход и результаты работы.
10.6. Самостоятельные задание (создание WEB – документа по теме специальности)
10.7. Ответы на контрольные вопросы.
10.8. Выводы.
ЛАБОРАТОРНАЯ РАБОТА № 5