ИТ ЛР 1
.docx
Министерство образования и науки Российской Федерации
Муромский институт (филиал)
Государственного образовательного учреждения высшего профессионального образования
«Владимирский государственный университет
имени Александра Григорьевича и Николая Григорьевича Столетовых»
(МИ (филиал) ВлГУ)
Факультет ИТ
Кафедра ИС
Лабораторная работа №1
по: Интернет технологии .
Тема: Создание HTML документов
Руководитель
Андриянов Д.Е.
(фамилия, инициалы)
(подпись) (дата)
Студент ИСз-209
(группа)
Халитов А.В. _
(фамилия, инициалы)
(подпись) (дата)
Муром 2013
Лабораторная работа №1
Практическое занятие 1. Создание HTML документов.
-
Знакомство со структурой HTML документа;
-
Получение навыков в организации гипертекстовой документации.
Задание: Разработка рекламного проспекта в виде HTML страницы «Салон мебели»
Текст страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Мебель</title>
</head>
<body>
</body>
</html>
Результаты работы:
Рисунок 1 – начало
Практическое занятие 2. Текст в HTML документе
Создадим заголовок вида
<center><h4>Мебель по размерам заказчика "ИП Пруцков Н.Н."</h4></center>
И используя теги <br> и <p> отформатируем следующий текст
<center><h4>Мебель по размерам заказчика "ИП Пруцков Н.Н."</h4></center>
<br>
Адрес г. Выкса ул. Красные Зори 99ж<p>
Телефон +7 (83177) 3-66-64<p>
Результат работы:
Рисунок 2 – Создание текста
Практическое задание 3. Организация списков в HTML документе
Создадим ненумерованный список:
<ul>
<li>Кухни
<li>Кабинет
<li>Лестницы
<ul>
Результат работы:
Рисунок 3 – Создание списков
Практическое задание 4. Организация вложенных списков в HTML документе.
Создаем вложенный список:
<ol>
<li>Основное производство
<ul>
<li>Кухни
<li>Кабинет
<li>Лестницы
<li>Спальни
</ul>
<li>Побочное
<ul>
<li>Резьба по дереву
<li>Реставрация старой мебели
</ul>
</ol>
Результат работы:
Рисунок 4 – Создание вложенных списков
Практическое занятие 5. Организация гиперссылок в HTML документе
Создадим ссылку на страницы «О нас» и «Портфолио»:
<a href="aboutus.html"> О нас </a>
<br>
<a href="portfolio.html"> Портфолио </a>
Результат работы:
Рисунок 5 – Гиперссылки в документе
Практическое занятие 6. Ссылки на точки внутри документа
Создадим маркеры и ссылки на них:
<a name="one"></a><li>Основное производство
<a name="two"></a><li>Побочное производство
<a href="#one"><li>Основное производство</a>
<a href="#two"><li>Побочное производство</a>
Результат работы:
е
Рисунок 6 – Работа ссылок на точки внутри документа
Практическое задание 7. Организация гипертекстовых ссылок на графическое изображение в HTML документах.
Добавим ссылку на изображение на струницу:
<img src="frontrow_5016.ico" align=middle ismap>
Результат работы:
Рисунок 7 – Изображение на странице
Практическое занятие 8. Использование графических объектов в HTML документах.
Зададим цвет фона, текста и ссылок на станице и разделительные линии:
<body bgcolor="#faebd7" text="#00008b" link="#dc143c">
<hr size=5 width=100% align=center>
Результат работы:
Рисунок 8 – Использование графических объектов в HTML документах
Практическое задание 9. Добавление стилей в HTML документ
Изменим цвет заголовка:
<font color="#8b0000"<h4>Мебель по размерам заказчика "ИП Пруцков Н.Н."</h4></font>
Добавим имя автора страницы:
<center><address>Автор /7@PAHouK Халитов А.В.</address></center>
Результат работы:
Рисунок 9 – Добавление стилей в HTML документ
Практическое занятие 10. Организация таблиц в HTML документах
Делаем разметку для нашей страницы с помощью таблиц
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Мебель</title>
</head>
<body bgcolor="#faebd7" text="#00008b" link="#dc143c">
<table >
<tr>
<td colspan="3">
<center>
<font color="#8b0000"<h4>Мебель по размерам заказчика "ИП Пруцков Н.Н."</h4></font>
<br>
<img src="frontrow_5016.ico" align=middle ismap>
<br>
Адрес г. Выкса ул. Красные Зори 99ж<p/>
Телефон +7 (83177) 3-66-64<p/>
</center>
</td>
</tr>
<tr>
<td width="20%">
тут будут кнопки тут будут кнопки тут будут кнопки тут будут кнопки
</td>
<td>
<a href="#one"><li>Основное производство</a>
<a href="#two"><li>Побочное производство</a>
<ol>
<a name="one"></a>
<li>Основное производство
<ul>
<li>Кухни
<li>Кабинет
<li>Лестницы
<li>Спальни
</ul>
<a name="two"></a><li>Побочное производство
<ul>
<li>Резьба по дереву
<li>Реставрация старой мебели
</ul>
</ol>
<hr size=5 width=100% align=center>
<a href="aboutus.html"> О нас </a>
<br>
<a href="portfolio.html"> Портфолио </a>
</td>
</tr>
<tr>
<td colspan="3">
<center><address>Автор /7@PAHouK Халитов А.В.</address></center>
</td>
</tr>
</table>
</body>
</html>
Результат работы:
Рисунок 10 – Разметка страницы с помощью таблиц
Практическое занятие 11. HTML фреймы
Создадим несколько тестовых страниц
Практическое занятие 13. HTML формы
Создадим страницу для отправки отзыва:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body bgcolor="#faebd7" text="#00008b" link="#dc143c">
<table >
<tr>
<td colspan="3">
<center>
<font color="#8b0000"<h4>Мебель по размерам заказчика "ИП Пруцков Н.Н."</h4></font>
<br>
<img src="frontrow_5016.ico" align=middle ismap>
<br>
Адрес г. Выкса ул. Красные Зори 99ж<p/>
Телефон +7 (83177) 3-66-64<p/>
</center>
</td>
</tr>
<tr>
<td width="20%">
тут будут кнопки тут будут кнопки тут будут кнопки тут будут кнопки
</td>
<td>
<font color="#0000CD"><H4>Напишите отзыв</H4></font>
<br>
<FORM name=formtest METHOD="post" ACTION="formtest.html">
Введите Вашу фамилию, имя и отчество:
<input name=FIO size=50><br> <br>
Введите ваш отзыв
<textarea name=address></textarea><br><br>
<input type="submit" value="Отправить данные">
</td>
</tr>
<tr>
<td colspan="3">
<center><address>Автор /7@PAHouK Халитов А.В.</address></center>
</td>
</tr>
</table>
</body>
</html>
Результат работы:
Рисунок 13 – Работа с формами
Практическое занятие 14. Меню выбора в формах
Создадим меню выбора для теста:
<SELECT SINGLE NAME=tovar SIZE=10 MULTIPLE=19>
<option>Материал 1
<option>Материал 2
<option>Материал 3
<option>Материал 4
<option>Материал 5
<option>Материал 6
<option>Материал 7
<option>Материал 8
<option>Материал 9
<option>Материал 10
</select single>
Результат работы:
Рисунок 14 – Меню выбора
Практическое задание 15. Создание карты изображений
Создадим страницу вида:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center><IMG SRC="7.jpeg" USEMAP="7.jpeg#map_name"></center>
<MAP NAME="map_name">
<AREA COORDS="0,0,200,150" HREF="index.html">
<AREA COORDS="200,150,400,300" HREF="portfolio.html">
<AREA COORDS="202,0,400,150" HREF="formtest.html">
<AREA COORDS="0,152,204,300" HREF="aboutus.html">
</MAP>
</body>
</html>
Результат работы:
Рисунок 15 – Карта изображений
При выборе какой-либо части изображения, происходит переход на соответствующую страницу.
Вывод: в процессе выполнения лабораторной работы были получены основные навыки по созданию HTML-страниц, изучены принципы создания фреймов, форм, карт изображения.