- •Практическая работа создание html-документа с использованием текстового редактора
- •Практическая работа использование таблиц и графических изображений при формировании html-документа
- •Практическая работа создание гиперссылок и html-документа с фреймовой структурой
- •Практическая работа создание сайта с фреймовой структурой в среде microsoft frontpage
- •Практическая работа применение панели гиперссылок для организации навигации по страницам сайта
- •Практическая работа оформление сайта в среде frontpage
Практическая работа создание гиперссылок и html-документа с фреймовой структурой
Цель работы: создать Web-документ, содержащий гиперссылки; создать Web-документ с фреймовой структурой
ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ
Фреймы, фреймовая структура HTML-документа.
Формирование фреймов в HTML-документе.
Гиперссылки и их формирование.
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Гиперссылка – это часть HTML-документа, содержащая ссылку на другой HTML-документ или на другую часть данного документа. Использование гиперссылок значительно упрощает работу с электронными документами и является одним из важнейших принципов организации поиска и ранения информации в сети Интернет.
Фрейм – это самостоятельная часть Web-документа, которая отображается в отдельно выделенной части окна при просмотре документа с помощью Web-браузера. Информация, отображаемая в данном фрейме, автономна и напрямую не зависит от информации, размещенной в других фреймах. Фрейм может иметь собственные полосы прокрутки, URL-адрес, отличный от адресов других фреймов. В то же время фреймы обычно связываются с помощью гиперссылок.
Для работы с гиперссылками и фреймами изображениями в этой работе будут использоваться следующие элементы языка HTML:
1.
2.
3.
|
<a> …</a> – контейнер гиперссылки. Содержит атрибут href, с помощью которого после знака « = » указывается URL-адрес ссылки. Адрес может быть абсолютным (например http://www.gtek.gomel.by) или относительным (указывает расположение ссылки относительно открытого файла, содержащего данную гиперссылку). Элемент может содержать также атрибут target, который используется при необходимости отображения полученной информации в другом фрейме (имя которого указывается после target)
<frameset> … </frameset> - контейнер формирования фреймовой структуры. Заменяет контейнер <body>…</body>. Может содержать атрибуты cols (при вертикальной разбивке окна на фреймы) или rows (при горизонтальной разбивке). Например, <frameset cols=”30%, 70%”> Разбивает окно браузера вертикальной линией на два фрейма, первый из которых использует 30% ширины окна, а второй – 70%.
<frame> - указывает источник для заполнения фрейма. Атрибут src позволяет указать URL-адрес загружаемого документа. Атрибут name задает имя фрейма, которое можно в дальнейшем использовать для загрузки в данный фрейм меняющейся информации. Это имя в дальнейшем указывается при формировании гиперссылки после атрибута target.
|
ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКОЙ РАБОТЫ
Задание 1
Создайте Web-документ, имеющий следующую структуру:
|
|
|
Курс лекций по информатике
Тема 1. Операционная среда Windows
Тема 2. Работа в среде Microsoft Office
Тема 3. Компьютерные сети |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Здесь содержится информация по теме 1.
Возврат на главную страницу |
|
Здесь содержится информация по теме 2.
Возврат на главную страницу |
|
Здесь содержится информация по теме 3.
Возврат на главную страницу |
|||
Создайте папку KURS. Информацию о главной странице разместите в этой папке в файле kurs.html. информацию по темам 1, 2 и 3 – в этой же папке соответственно в файлах kurs1.html, kurs2.html, kurs3.html.
Предусмотрите создание гиперссылок для перехода с главной страницы на каждую из трех страниц с информацией по соответствующим темам.
Предусмотрите возможность возврата с любой страницы на главную.
Убедитесь в работоспособности гиперссылок при запуске документа kurs.html в Internet Explorer.
Запишите HTML-код созданных файлов в тетрадь, дайте комментарии о назначении каждого тега, имеющегося в этих документах.
Для выполнения этого задания в папке KURS необходимо создать четыре файла:
файл kurs.html:
<html>
<head>
<title> Курс лекций </title>
</head>
<body>
<h2><p> курс лекций по информатике </p></h2>
<h4>
<p><a href="kurs1.html"> Тема 1. Операционная среда Windows </a></p>
<p><a href="kurs2.html"> Тема 2. Работа в среде Microsoft Office </a></p>
<p><a href="kurs3.html"> Тема 3. Компьютерные сети</a></p>
</h4>
</body>
</html>
файл kurs1.html:
<html>
<head>
<title> Тема 1 </title>
</head>
<body>
<h4>
<p> Здесь содержится информация по теме 1.</p>
<p><a href="kurs.html"> Возврат на главную страницу </a></p>
</h4>
</body>
</html>
файл kurs2.html:
<html>
<head>
<title> Тема 2 </title>
</head>
<body>
<h4>
<p> Здесь содержится информация по теме 2.</p>
<p><a href="kurs.html"> Возврат на главную страницу </a></p>
</h4>
</body>
</html>
файл kurs3.html:
<html>
<head>
<title> Тема 3 </title>
</head>
<body>
<h4>
<p> Здесь содержится информация по теме 3.</p>
<p><a href="kurs.html"> Возврат на главную страницу </a></p>
</h4>
</body>
</html>
Задание 2
Сформируйте Web-документ, имеющий следующую структуру:
Тема 1. Операционная среда Windows
Тема 2. Работа в среде Microsoft Office
Тема 3. Компьютерные сети
|
Здесь содержится информация по теме 1 (по теме 2, по теме 3)
|
HTML-документы, необходимые для создания указанной структуры разместите в папке FRAME. Предусмотрите возможность изменения содержимого правой части Web-страницы при выборе соответствующей темы в ее левой части.
Убедитесь в работоспособности гиперссылок при запуске документа kurs.html в Internet Explorer.
Запишите HTML-код созданных файлов в тетрадь. дайте комментарии о назначении каждого тега, имеющегося в этих документах.
Для выполнения этого задания в папке FRAME необходимо создать 5 файлов:
frame.html
<html>
<head>
<title> Курс лекций </title>
</head>
<frameset cols="30%, 70%">
<frame src=menu.html>
<frame name=tema>
</frameset>
</html>
menu.html
<html>
<head>
<title> Меню </title>
</head>
<body>
<p><a href="tema1.html" target=tema>
Тема 1. Операционная среда Windows</a><p>
<p><a href="tema2.html" target=tema>
Тема 2. Работа в среде Microsoft Office</a><p>
<p><a href="tema3.html" target=tema>
Тема 3. Компьютерные сети</a><p>
</body>
</html>
tema1.html
<html>
<head>
<title> Тема 1 </title>
</head>
<body>
<h4>Здесь содержится информация по теме 1 </h4>
</body>
</html>
tema2.html
<html>
<head>
<title> Тема 2 </title>
</head>
<body>
<h4>Здесь содержится информация по теме 2 </h4>
</body>
</html>
tema3.html
<html>
<head>
<title> Тема 3 </title>
</head>
<body>
<h4>Здесь содержится информация по теме 3 </h4>
</body>
</html>
Задание 3.
В подготовленном на прошлом занятии HTML-документе с названием «Моя личная страничка» создайте структуру, включающую главную страницу с гиперссылками на другие страницы, содержащие Вашу фотографию и результаты успеваемости