Средства создания html-файлов
HTML-файл может быть создан одним из ниже перечисленных способов:
- в простом текстовом редакторе. При его создании следует использовать теги, описанные выше. При сохранении созданного документа файлу следует давать имя с расширением htm или html, например, index.htm
- в специальных программах - редакторах HTML текстов (HotDog, HomeSite, с Dream Weaver и многих других).
- из различных приложений, путем сохранения в HTM-формате (например, если сохранять документ, подготовленный в программе WORD, то при сохранении следует выбрать тип файла «WEB-страница»)
Следует отметить, что эти приложения добавляют много дополнительной служебной информации, которая лишь загромождает WEB-страницу, поэтому важно знать основные принципы HTML-формата, чтобы грамотно и элегантно создавать страницы для их размещения в сети Интернет.
Задание 1. Простая web-страница
Подготовить личную страницу для размещения в сети ИНТЕРНЕТ и страницу с формой «Отзывы и предложения».
Подготовительный этап
Подготовить текстовую информацию для проектирования своей личной страницы.
Подготовить графические иллюстрации
Спланировать размещение информации на страницах и связи между страницами.
Порядок выполнения работы
Запустите программу «Блокнот» (меню Пуск -> Программы -> Стандартные -> Блокнот)
Создайте HTML – документ по образцу:
<html>
<head>
<title>Личная страница Иванова Вани</title>
</head>
<body>
<p align="center"><font size="6">Привет, Друзья!!!</font></p>
<p align="center"><font size="4">Я рад приветствовать вас на моем сайте</font></p>
<p align="center"><font size="4">Меня зовут Иванов Иван, мне 20 лет, я учусь в Российском государственном гидрометеорологическом университете</font></p>
<p align="center"><font size="4">Это моя первая страница</font></p>
<p>Мой любимый сайт - <a href="http://www.roshydromet.ru">сайт РГГМУ</a></p>
<p>А также моя почта-<a href="http://www.webmail.aport.ru">Aport</a></p>
</body>
</html>
Сохраните созданный документ в папке своей группы с именем <Ваша фамилия>.htm
Откройте созданную WEB-страницу в броузере Вашего компьютера (двойным щелчком «мыши»)
Отредактируйте созданную WEB-страницу средствами MS FrontPage, добавив элементы оформления, рисунки и ссылки.
Создайте новый HTML-документ с формой «Отзывы и предложения» по образцу, приведенному на рисунке 15:
Рис.15. Образец формы «Отзывы и предложения»
Создайте ссылку на этот документ с Вашей личной страницы.
Сохраните страницу.
Обновите отредактированную страницу в броузере.
Сравните текст HTML-документа, полученный при помощи HTML-редактора и Блокнота.
Задание 2. Страница с управляющими элементами
Составить Web-страницу, включающую управляющие элементы (поле ввода, радиокнопки, флажки, раскрывающие меню, кнопки) и обработчики событий (onClick, onCheck, onChange) для активных элементов (рис. 16).
Пример: Страница, генерирующая сообщение о регистрации участника конференции
<html>
<title>Регистрационная форма участника конференции</title>
<body>
<script language="JavaScript">
function Confirm(FIO,Doklad)
{
alert('Уважаемый ' + FIO +'! Ваш доклад '+' " '+ Doklad+ ' " '+' принят.')
}
</script>
Участник:
<input type="text" style="width:300" Name="FIO">
<p>
Название доклада:
<input type="text" style="width:300" Name="Doklad">
<p>
<input type="button"
value="Отправить" onClick=Confirm(FIO.value,Doklad.value)>
</body>
</html>
Рис.16. Образец регистрационной формы
Элементы, которые должны быть включены в личную страницу
Заголовок страницы
Приветствие (девиз)
1-3 рисунка13
Curriculum Vitae
Управляющий элемент, вызывающий Форму «Отзывы и предложения»
Форма «Отзывы и предложения»
Ссылки:
на сайт РГГМУ
на любимые страницы
обратную связь