Всегда обращайте внимание на размер графического файла (в байтах), так как это влияет на время загрузки Web-страницы.




 

2. Просмотрите изменения вашей Web-страницы в браузере.

 

 

Задание № 12. Установка фонового изображения на Web-странице

 

Фоновое изображение –это графический файл с небольшим рисунком,который многократноповторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге <BODY>.

 

1. Внесите изменения в файл RASP.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE> </HEAD>

 

<BODY BACKGROUND="FON.PNG" TEXT="#330066"> <P ALIGN="CENTER">

 

<FONT COLOR="#008080" SIZE="7">

<B>Расписание</B></FONT><BR>

 

<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>

 

<IMG SRC="CLOCK.PNG" ALIGN="MIDDLE"> </P>

</BODY>

 

</HTML>

 

На экране вы увидите то, что изображено на рисунке 6.

 

 

Рис. 6

 

Рисунок, который использовался в качестве фонового, имеет вид

 

 

Рис. 7

 

2. Поэкспериментируйте с фоновым рисунком Web-страницы и выберите оптимальный с вашей точки зрения.

 

Задание № 13. Создание таблицы

 

Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.

 

Таблица состоит из трех основных частей:

 

· названия таблицы,

· заголовков столбцов,

· ячеек таблицы.

 

Таблица в Web-документе заполняется по строкам (слева направо по строке,затем переход нановую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

 

1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.

 

<HTML>

<HEAD>

 

<TITLE>Расписание занятий

</TITLE> </HEAD>

<BODY BGCOLOR="FFFFFF">

<P ALIGN="CENTER">

 

<FONT COLOR="RED" SIZE="6" FACE="ARIAL"> <B>2 Курс ФНО</B></FONT><BR></P>

 

<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"> <B>Понедельник</B></FONT><BR>

<TABLE BORDER="1" WIDTH=100% BGCOLOR="#99CCCC">

<TR BGCOLOR="#CCCCFF" ALIGN="CENTER">

<TD>Занятие</TD> <TD>Группа </TD> <TD>Группа</TD>

 

<TD>группа</TD>

</TR>

<TD>1</TD> <TD>Русский язык</TD>

 

<TD>Литература</TD> <TD>История</TD> </TR>

<TD>2</TD> <TD>Математика</TD>

 

<TD>Информатика</TD> <TD>Английский язык</TD> </TR>

<TD>3</TD> <TD>История</TD>

 

<TD>Математика</TD> <TD>Информатика</TD> </TR>

 

</TABLE>

</BODY>

</HTML>

 

2. Сохраните файл в личной рабочей папке под именем Infor.HTML

 

3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.

 

На экране вы увидите то, что показано на рисунке 8.



 

 

Задание № 14. Построение гипертекстовых связей

 

Важнейшим средством языка HTML является возможность включения в документ ссылок на

другие документы.

Возможны ссылки:

 

· на удаленный HTML-файл,

· на некоторую точку в текущем HTML-документе,

· на любой файл, не являющийся HTML-документом.

В качестве ссылки можно использовать любой текст или графику.

 

Ссылки в пределах одного документа

 

Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.

 

Описание ссылки

 

<A HREF="#ПН">Понедельник</A>

 

Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.

 

Определим метку

 

<A NAME="ПН">Понедельник</A>

 

1. Дополните файл Infor.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы.

 

...

<TABLE WIDTH=100%>

 

<TR>

<TD>Понедельник</TD>

<TD>Вторник</TD>

<TD>Среда</TD>

 

<TD>Четверг</TD>

<TD>Пятница</TD>

<TD>Суббота</TD>

 

</TR>

</TABLE>

<BR>

...

 

2. Вставьте в файл Infor.HTML метку, указывающую на понедельник.

 

...

<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>

<A NAME="ПН">Понедельник</A></B></FONT><BR>

 

...

 

3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:

 

...

 

<TABLE WIDTH=100%>

<TR>

<TD><A HREF="#ПН">Понедельник</A></TD>

<TD>Вторник</TD>

 

<TD>Среда</TD>

...

 

4. Создайте таблицы расписаний для других дней недели.

5. Сохраните файл Infor.HTML в личной рабочей папке.

6. Просмотрите полученную Web-страницу.

 

 

Задание № 15. Создание ссылки на другой HTML-документ

 

Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.

 

Опишем ссылку:

 

<A HREF="Infor.HTML">2 Курс ФНО</A>

 

После имени файла (Infor.HTML) между символами «>» и «<» располагается текст («2 Курс ФНО »), на котором должен быть произведен щелчок для перехода к этому файлу.

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE> </HEAD>

 

<BODY BGCOLOR="#FFFFFF" TEXT="#330066"> <P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

 

<B>Расписание</B></FONT><BR>

 

<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>

 

<IMG SRC="CLOCK.PNG" ALIGN="TOP">

 

</P>

<CENTER>

<TABLE WIDTH=60%>

 

<TR><TD><A HREF="Infor.HTML">2 курс ФНО</A></TD> <TD>3 курс ФНО</TD> </TR> <TR><TD>4 курс ФНО</TD>

</TR>

 

 

</TABLE>

</CENTER>

</BODY>

</HTML>

 

2. Сохраните файл RASP.HTML

 

 
 

 

 


 

Рис. 10

 

Задание № 16. Создание ссылки на другой HTML-документ

 

1. Внесите изменения в файл 5.HTML так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий 5 классов (RASP.HTML). В качестве ссылки используйте графический файл (HOME.GIF) следующим образом:

 

...

</TABLE><BR>

<CENTER>

 

<A HREF="RASP.HTML"><IMG SRC="HOME.PNG" BORDER="0"></A> </CENTER>

...

 

 

В качестве ссылки выступает рисунок – стрелка

 

Рис. 11

 

Задание № 17. Самостоятельное итоговое задание

 

Разработайте Web-страницы, рассказывающие о группе. На головной странице разместите рассказ о группе, Кураторе. Рассказы о студентах разместите на отдельных Web-страницах. Укажите ссылки на страницы студентов с головной Web-страницы. Не забудьте разместить ссылки возврата на головную страницу.

 

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-10-25 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: