Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Средства создания HTML-файлов





HTML-файл может быть создан одним из ниже перечисленных способов:

- в простом текстовом редакторе. При его создании следует использовать теги, описанные выше. При сохранении созданного документа файлу следует давать имя с расширением htm или html, например, index.htm

- в специальных программах - редакторах HTML текстов (HotDog, HomeSite, с Dream Weaver и многих других).

- из различных приложений, путем сохранения в HTM-формате (например, если сохранять документ, подготовленный в программе WORD, то при сохранении следует выбрать тип файла «WEB-страница»)

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

 

Задание 1. Простая WEB-страница

Подготовить личную страницу для размещения в сети ИНТЕРНЕТ и страницу с формой «Отзывы и предложения».

 

Подготовительный этап

Подготовить текстовую информацию для проектирования своей личной страницы.

Подготовить графические иллюстрации

Спланировать размещение информации на страницах и связи между страницами.

Порядок выполнения работы

1. Запустите программу «Блокнот» (меню Пуск -> Программы -> Стандартные -> Блокнот)

2. Создайте 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>

 

3. Сохраните созданный документ в папке своей группы с именем <Ваша фамилия>.htm

4. Откройте созданную WEB-страницу в броузере Вашего компьютера (двойным щелчком «мыши»)

5. Отредактируйте созданную WEB-страницу средствами MS FrontPage, добавив элементы оформления, рисунки и ссылки.

6. Создайте новый HTML-документ с формой «Отзывы и предложения» по образцу, приведенному на рисунке 15:

 

Рис.15. Образец формы «Отзывы и предложения»

 

7. Создайте ссылку на этот документ с Вашей личной страницы.

8. Сохраните страницу.

9. Обновите отредактированную страницу в броузере.

10. Сравните текст 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. Заголовок страницы

2. Приветствие (девиз)

3. 1-3 рисунка[13]

4. Curriculum Vitae

5. Управляющий элемент, вызывающий Форму «Отзывы и предложения»

6. Форма «Отзывы и предложения»

7. Ссылки:

· на сайт РГГМУ

· на любимые страницы

· обратную связь

Задание 3. HTML-документ с фреймами.

Создайте личную страницу, состоящую из трех фреймов: верхний (top) – горизонтальный, нижний – разделенный на 2 части (menu и main) по макету, приведенному на рисунке 17. Оформите верхний фрейм, вставив в него изображение, используя шрифтовое и цветовое оформление. В левой части (menu) разместите несколько гиперссылок, в правой – элементы, указанные в таблице 11, согласно индивидуальному заданию Вашего варианта.

Размещайте WEB-страницы, составляющие HTML-документ, в папке \Информационные технологии\WEB\

В имя файла включите номер Вашей группы и номер Вашей фамилии в списке группы, например, top_206_01.htm, menu_206_01.htm, main_206_01.htm.

Используйте прием стилевого оформления документа. Разместите информацию о стилях во внешнем файле style_206_01.css.

 

Рис.17. Макет HTML-документа с фреймами.

Таблица 11. Индивидуальные задания к лабораторной работе №9

№вар Обязательные элементы Гиперссылки Элементы шрифтового оформления Цветовая гамма
1. Таблица «Расписание занятий» … на раздел текущей страницы заголовки 1-го уровня ранний закат
2. 2 Таблица «График дежурства» … на новую страницу курсив морской бриз
3. 3 Таблица «прогноз погоды» … на почтовый сервер жирный спелая рожь
4. Таблица «Расписание экзаменов» … на файловый сервер подчеркнутый, курсив бирюза
5. Список аудиозаписей … на раздел текущей страницы Цветной баклажан
6. Список групп по факультету … на почтовый сервер Жирный спелая рожь
7. Список видеокассет … на новую страницу заголовки 3-го уровня ранний закат
8. Изображение (пейзаж) … на новую страницу курсив, жирный морской бриз
9. Изображение (фото) … на почтовый сервер подчеркнутый бирюза
10. Список «Расписание движения автобуса №5» … на раздел текущей страницы цветной, жирный баклажан
11. Изображение (фото) … на новый сайт цветной баклажан
12. Изображение (схема движения на сложном перекрестке) … на файловый сервер курсив, цветной морской бриз
13. Список литературы по предмету … на файловый сервер заголовки 2-го уровня ранний закат
14. Изображение (схема выхода из метро «Новочеркасская») … на новую страницу жирный, зачеркнутый спелая рожь
15. Список видеокассет … на новый сайт подчеркнутый бирюза

 







ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.