Расчетное задание №2 Внедрение графики в html-документ и использование гиперссылок

Цель работы: научиться связывать HTML-документы и использовать графические объекты.

1. Создайте сайт по предложенной вам теме (варианты с заданием указаны в ч.1 стр.31 данных методических указаний).

2. Разместите на вашем сайте необходимые графические объекты.

3. Оформите работу по следующей схеме:

   1. записать HTML-код каждой Web-страниц с указанием имени (страниц должно быть не менее трех);

   2. вывести результат отображения каждой страницы в окно браузера;

   3. указать список графических файлов, используемых на HTML-странице;

   4. обеспечить связь между страницами сайта с помощью гиперссылок.

Элементы html для построения таблиц

Недостаток списков – одномерность. Это означает, что информация может располагаться только в следующих друг за другом строках одного столбца. Таблицы позволяют располагать данные не только по строкам, но и по столбцам.

Табл. 6 позволяет систематизировать имеющиеся средства языка HTML для построения таблиц и фреймов.

Таблица 7

Таблицы и фреймы

Тэг	Атрибуты	Назначение
<table></table>		Создание таблицы
	border=n	Ширина рамки
	bgcolor="#rgb"	Цвет фона
	cellpadding=n	Расстояние между границей каждой ячейки и ее содержимым
	cellspacing=n	Промежуток между столбцами
	bordercolor="#rgb"	Цвет рамки
	background="url"	Фоновое изображение
<caption> </caption>		Заголовок таблицы
	align=buttom	Помещает заголовок под таблицей
<th> </th>		Заголовок столбца
<tr> </tr>		Строка таблицы
<td> </td>		Ячейка строки таблицы
	width=n% или width=n	Общая ширина табли­цы может быть ука­зана как в процентах, так и в пикселях
	align={значение1}	Выравнивание текста в ячейке по го ризон­тали. Значение1 может быть равным одному из трех: CENTER, LEFT или RIGHT.
	valign={значение2}	Выравнивание текста в ячейке по вертикали. Значение2 может быть равным: TOP, MIDDLE или BOTTOM.
	bgcolor="#rgb"	Цвет фона
	bordercolor="#rgb"	Цвет рамки
	background="url"	Фоновое изображение
<frameset> </frameset>		Разбивка рабочего по­ля браузера на верти­кальные или горизон­тальные фреймы
	border=n	Ширина рамки
	frameborder=n	Ширина рамки вокруг фрейма

Продолжение табл. 7
	cols="nl, n2, ..., nN" или rows="nl, n2,...,nN"	Ширина вертикальных (cols) или горизон­тальных (rows) фрей­мов. Числа nl, n2, nN указывают ширину (вы­соту) каждого из фрей­мов. Вместо числа мож­но указать символ * (звездочка), в этом слу­чае ширина (высота) данного фрейма будет определяться исходя из общей ширины (высо­ты) поля браузера, ми­нус сумма всех широт (высот) остальных фреймов
<frame>		Располагается внутри тэговой пары <FRAMESET> </FRAMESET> и специфицирует один из фреймов, указанных в атрибуте cols (rows) тэга <FRAMESET>. Общее количество тэ­гов <FRAME> должно соответствовать коли­честву фреймов, задан­ных в атрибуте cols (ROWS) тэга <FRAMESET>
	src="url"	HTML-документ,' ко­торый будет загружен в данный фрейм
	name="имя"	Имя фрейма, которое может быть использовано для загрузки в него документов через другие фреймы
	marginwidth	Отступ по ширине
	marginheight	Отступ по высоте
	scrolling="no"	Если атрибут указан, запре­щается скроллинг дан­ного фрейма
	noresize	Если атрибут задан, запреща­ется изменение разме­ра фрейма
<noframes> </noframes>		Располагается внутри тэга <FRAMESET> </FRAMESET> после всех фреймов <frame> и предназ­начен для хранения информа­ции для тех браузеров, которые не поддер­живают фреймов

Приведем пример шаблона для любой таблицы.

<table border=”0” cellpadding=“0” cellspacing=”0” width=100%>

<tr> <! – Строка заголовка – >

<th> </th>

<th> </th>

<th> </th>

</tr>

<tr> <! – Строка 1 – >

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr> <! – Строка 2 – >

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

В ячейку таблицы, обрамленную парой <td> </td>, можно помещать: любой текст, любые изображения, списки, гиперссылки и так далее. Используя атрибуты bgcolor=”#цвет” и background=”файл”, которые можно добавить к тэгу <table> или <tr>, или даже <td>, можно получить довольно сложное мозаичное изображение.

Фреймы

Фреймы – это области, которые создаются в окне браузера для одновременного просмотра нескольких документов. Последние версии браузеров поддерживают фреймы в обязательном порядке.

Для установки правила разбивки окна Web-обозревателя на фреймы существует тэговая пара <frameset> </frameset> (см. табл. 6). Но просто указать структуру разбиения рабочей области Web-браузера не достаточно, необходимо указать какой именно HTML-документ должен быть загружен в тот или иной фрейм. Для этого имеется тэг <frame>, который используется без закрывающей пары. Этот тэг имеет следующие обязательные атрибуты:

• src, задает URL загружаемого во фрейм документа.

• name, задает уникальное имя фрейма, которое затем может быть использовано в атрибуте target тэга<a>.

Имя фрейма может быть использовано, когда список ссылок расположен в одном фрейме, а загружать документ требуется в другой.

Приведем пример HTML-документа, который задает разбивку рабочей области на два вертикальных фрейма.

Пример 3. Разбивка на фреймы

<html>

<head><title>Фреймы</title></head>

<frameset cols="30%,*" border=0 frameborder=1>

<frame name="menu" src="leftdoc.html" noresize>

<frame name="info" src="rightdoc.html" scrolling=”auto”>

</frameset>

</html>

Пример 4.Текст HTML-документа leftdoc.html

<html>

<head><title>Левый фрейм</title></head>

<body text="black" bgcolor="gold">

<h3>Меню сайта:</h3>

<hr>

<A target=_parent href="index.html" > Главная страница </a> <br>

<A href="p1.htm" target="info" > Первая страница </a><br>

<A href="p2.htm" target="info" > Вторая страница </a> <hr>

</body> </html>

Текст HTML-кода страниц p1.htm и p2.htm здесь не приводятся – это могут быть любые страницы.

Пример5.Текст HTML-документа rightdoc.html

<html>

<head><title>Правый фрейм</title></head>

<body background="fon01.gif" text="black">

<h1> Правый фрейм </h1>

<hr>

<b> <a href=”index.html” target=_parent> Переход

на главную страницу </a></b>

</body></html>

Первоначально (пример 3) вся рабочая область браузера разбивается на две колонки. Левая колонка занимает 30% от всей ширины рабочей области, а правая – всю остальную (задается звездочкой: cols=”30%,*”).

Левый фрейм получает имя menu и в него загружается документ leftdoc.html. Скроллинг левого фрейма запрещен. Правый фрейм получает имя info и в него загружается документ rightdoc.html. Все ссылки записаны в документе leftdoc.html, но в их атрибуте target браузеру указывается, что загружать соответствующие HTML-страницы следует во фрейм с именем info, т.е. – в правый фрейм.

Общий вид браузера после загрузки HTML-документа, текст которого приведен в примере 3, представлен на рис. 5.

Рис. 5