- •Система адресации
- •Ip-адрес
- •Ip-адрес: 01111011110010000011001001100100
- •Адрес url
- •Сервисы Интернета
- •Общие сведения о языке html
- •Теги html
- •Структура документа html
- •Функциональные разделы документа
- •Создание списков
- •Создание таблиц
- •Задание 1. Ввод текста
- •Задание 2. Создание списков
- •Задание 3. Формирование таблиц
- •Гипертекстовые ссылки и якоря
- •Рисунки наWeb-страницах
- •Управление стилем шрифта
- •Форматирование фраз
- •Задание 1.Изменение оформления документа
- •Задание 2. Изменение оформления фрагментов документа
- •Задание 3. Создание гиперссылок
- •Задание 4. Использование графики
- •5. Создание фреймов
- •6. Использование фреймов
Задание 3. Создание гиперссылок
Внесите в документ Lab1.htm фразу: «С некоторыми приёмами использования языка HTML можно ознакомиться в методических указаниях к лабораторной работе».
Фрагмент фразы, поясняющий, где можно найти сведения о языке, оформите ссылкой на соответствующий документ. Для этого текст ссылки запишите между тегами <A> и </A> и с помощью атрибута HREF задайте путь к файлу, на который указывает ссылка.
Сохраните документ в файле Lab4.htm.
Запустите обозреватель и откройте документ Lab4.htm. Убедитесь, что текст между тегами <A> и </A> выделен как ссылка.
Щёлкните по ссылке, чтобы загрузить документ, на который указывает ссылка.
Щёлкните по кнопке Назад на панели инструментов, чтобы вернуться к исходному документу. Убедитесь, что ссылка теперь считается просмотренной и отображается другим цветом.
Задание 4. Использование графики
Создайте в блокноте новый документ. Задайте для документа голубой фон.
Откройте графический редактор Paint (Пуск|Программы|Стандартные|Paint) и задайте размеры создаваемого рисунка 300300. На цветном фоне создайте рисунок из простейших графических примитивов, закрашенных разными цветами.
Сохраните рисунок в файле c именем Pic1 в папке Pic (можно использовать готовый рисунок). Для рисунка используйте формат gif (Pic\Pic1.gif).
Добавьте в документ рисунок, сохранённый в файле.
Сохраните документ под именем Graph1.htm
Просмотрите документ, обратив внимание на размеры и расположение рисунка.
Создайте новый документ и вставьте в него рисунок Pic1.gif, расположив его у правой границы окна. Для этого используйте тег <IMG> c атрибутами SRC и ALIGN.
Сохраните документ под именем Graph2.htm.
Просмотрите документ в браузере, обратив внимание на размеры и расположение рисунка.
Вернитесь в блокнот и в файле Graph2.htm измените размеры и расположение рисунка. С помощью атрибутов WIDTH и HEIGHT задайте ширину рисунка 200, а высоту 100.
В теге <IMG> с помощью атрибута ALT задайте альтернативный текст, содержащий описание изображения.
Используя атрибут BORDER, задайте рамку рисунка.
Сохраните документ под именем Graph3.htm.
Просмотрите документ в обозревателе. Проверьте, изменились ли размеры и расположение рисунка, появились ли рамка и альтернативный текст.
Создайте новый документ и разместите в нём две кнопки Button1.gif и Button2.gif. Задайте для кнопок альтернативный текст Рисунок и Таблица. Чтобы расположить кнопки одна под другой используйте тег абзаца <p> или перехода на новую строку <BR>.
Сохраните документ под именем menu.htm.
5. Создание фреймов
Создайте в блокноте новый документ.
Введите приведённый ниже текст HTML-документа, формирующего на экране фреймы.
<html>
<head>
<title>Применение фреймов</title>
</head>
<frameset cols="20%,*">
<frameset rows="60%,*">
<frame name="navigator"src="Content1.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
<frame name="task" src="Menu.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
</frameset>
<frame name="info" src="Lab28.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
</frameset>
</html>
Сохраните документ под именем frames.htm.
Просмотрите документ frames.htm в обозревателе. Установите соответствие между заданными областями и их расположением и размерами на экране.