Задание 12. Атрибуты изображения
1. Самостоятельно внесите изменения в файл RASP.HTM, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH.
Примечание. Всегда обращайте внимание на размеры (объем в байтах) своего графического файла, т.к. это влияет на время загрузки Web-страницы.
Задание 13. Фоновое изображение графики на Web -странице
Информация. Фоновое изображение – это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно независимо от его размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY> в начале файла HTML.
1. Внесите изменения в файл RASP.HTM:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </ТIТLЕ>
</HEAD>
<BODY BACKGROUND="BGR.JPG" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B> Расписание
</B></FONT><BR>
<FONT SIZE="6"> <I>занятий на stophhk</I></FONT><BR><BR>
<IMG SRC=="Wagon.gif">
</P>
</BODY>
</HTML>
На экране вы увидите (рис. 1): На самом деле графический файл
BGR.JPG выглядит так (рис. 2):
Рис. 1 Рис. 2
Задание 14. Таблицы
Информация. Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой.
|
|
|
Ячейки могут содержать в себе текст графику или другую таблицу.
Таблица состоит из трех основных частей:
ü название таблицы;
ü заголовки столбцов;
ü ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустой ячейки используется пробел.
Таблица 5 – Теги оформления таблиц
| Тег | Форма записи | Описание |
| TABLE | <ТАВLЕ>текст</TABLE> | Объявление таблиц |
| CAPTION | <CAPTION>текст</CAPTION> | Заголовок таблицы |
| TR | <TR>текст</TR> | Тег строки |
| TD | <TD>текст</TD> | Тег данных |
Таблица 6 – Атрибуты тегов <TABLE>, <TD>, <TR>
| Атрибут | Форма записи | Описание |
| BORDER | <TABLE BORDER=n> | Задает рамку вокруг таблицы |
| WIDTH | <TABLE WIDTH=n%> | Задает ширину таблицы как n% от ширины страницы или как n пикселей (аналогично для <TD>, <TR>) |
| HEIGHT | <TABLE HEIGHT=n%> | Задает высоту таблицы как n% от ширины страницы или как n пикселей (аналогично для <TD>, <TR>) |
| BGCOLOR | <TABLE BGCOLOR= "#RRGGBB"> | Задает цвет фона таблицы |
| ALIGN | <TD ALIGN=значение> | Устанавливает выравнивание по горизонтали (Right, Left, Center) |
| VAL1GN | <TD VALIGN= значение> | Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) |
| BGCOLOR | <TD BGCOLOR= "#RRGGBB"> | Задает цвет фона ячейки |
Создадим новый HTML-документ.
|
|
|
1. Запустите стандартную программу Блокнот.
2. Наберите в окне редактора:
<HTML>
<HEAD>
<TITLE> Расписание занятий 2 курса </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" BGCOLOR="99CCCC">
<TR BGCOLOR="CCCCFF" ALIGN=CENTER>
<TD>пара</TD> <TD>2 A</TD> <TD>2 Б</TD> <TD>2 B</TD>
</TR>
<TR>
<TD>1</TD> <ТD>Геометрия</ТD> <ТD>Философия</ТD>
<ТD>Физика</ТD>
</TR>
<TR>
<TD>2</TD> <TD>Aлre6pa</TD> <ТD>Информатика</ТD>
<ТD>Англ. язык</ТD>
</TR>
<TR>
<TD>3</TD> <ТD>Мат. анализ</TD> <TD>Алгебра</TD> <TD>
Информатика</TD>
</TR>
</TABLE>
</BODY>
</HTML>
3.Сохраните файл под именем 2.HTM.
4.Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
Упражнение 2
|
|
|
1. Дополните полученную Web-страницу по аналогии расписанием на последующие дни Вторник, Среду, Четверг, Пятницу, Субботу
2. Внесите в расписание свои занятия.
Задание 15. Ссылки в пределах одного документа
Информация. Важнейшим свойством языка HTML является возможность включения в документы ссылок на другие документы. Возможны ссылки:
ü на удаленный HTML файл;
ü на некоторую точку в текущем HTML-документе;
ü на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать текст или графику.
Ссылки в пределах одного документа требуют наличие двух частей метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется атрибуты
LINK = и VLINK =
тэга <BODY…>
Формат ссылки:
<А HR Е F ="#ПН">Понедельник</А>
Перед именем метки (ПН), указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке.
Формат метки:
<А N АМЕ="ПН">Понедельник</А>
|
|
|
1. Дополните файл 2.НТМ таблицей, содержащей название дней недели, поместив ее в начало Web-страницы:
…
<TABLE WIDTH=100%>
<TR>
<ТD>Понедельник</ТD>
<ТD>Вторник</ТD>
<TD>Cpeда</TD>
<TD>Четверг</TD>
<ТD>Пятница</TD>
<TD>Cyббота</TD>
</TR>
</TABLE>
<BR>
…
2. Вставьте в файл 2.HTM метку, указывающую на Понедельник:
…
<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>
<ТD>Среда</ТD>
…
4. Дополните документ ссылками на другие дни недели.
5. Сохраните файл.
6. Просмотрите полученную Web-страницу.
На экране вы должны увидеть (рис. 3):
Рис. 3
Дата добавления: 2021-03-18; просмотров: 213; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!