Информация.
Тэг <IMG …> позволяет
вставить изображение в документ. Изображение появится в том месте документа, в
котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий
тэг не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге HTML, где находится и наша Web-страница.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге HTML, где находится и наша Web-страница.
1.
Внесите изменения в файл RASP.HTM:
<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="Wagon.gif">
</P>
</BODY>
</HTML>
Тэг <IMG …> имеет немало
атрибутов (см. таблицу 2), которые можно задавать дополнительно. Они могут
располагаться где угодно в тэге после кода IMG.
Атрибуты
изображения
Атрибут
|
Формат
|
Описание
|
ALT
|
<IMG SRC="Wagon.gif"
ALT="картина">
|
Если броузер не воспринимает изображение, вместо него
появляется заменяющий текст.
|
BORDER
|
<IMG
SRC="Wagon.gif" BORDER="3">
|
Задает толщину рамки вокруг изображения. Измеряется в
пикселах.
|
ALIGN
|
<IMG
SRC="Wagon.gif" ALIGN=TOP>
|
Выравнивает изображение относительно текста:
по верхней части изображения – TOP,
по нижней – BOTTOM,
по средней – MIDDLE.
|
HEIGHT
|
<IMG SRC="Wagon.gif" HEIGHT=111>
|
Задает вертикальный размер изображения внутри окна
броузера.
|
WIDTH
|
<IMG
SRC="Wagon.gif" WIDTH=220 >
|
Задает горизонтальный размер изображения внутри окна
броузера.
|
VSPACE
|
<IMG
SRC="Wagon.gif" VSPACE="8">
|
Добавляет верхнее и нижнее пустые поля.
|
HSPACE
|
<IMG
SRC="Wagon.gif" HSPACE="8">
|
Добавляет левое и правое пустые поля.
|
Задание 2. Атрибуты изображения.
1. Самостоятельно внесите
изменения в файл RASP.HTM, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH.
Всегда обращайте внимание на размеры
(объем в байтах) своего графического файла, т.к. это влияет на время загрузки Web-страницы.
Задание 3. Фоновое изображение графики на Web-странице
Информация.
Фоновое изображение – это графический
файл с изображением небольшой прямоугольной плашки. При просмотре в броузере
эта плашка многократно повторяется, заполняя все окно, независимо от его
размеров.
Графика, используемая в качестве
фоновой, задается в тэге <BODY> в начале файла HTML.
1. Внесите изменения в файл RASP.HTM:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML
</TITLE>
</HEAD>
<BODY BACKGROUND="BGR.GIF" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080"
SIZE="7"><B> Расписание </B></FONT><BR>
<FONT SIZE="6">
<I>занятий на вторник</I></FONT><BR><BR>
</P>
</BODY>
</HTML>
Задание 4. Таблицы.
Информация.
Таблицы представляют собой особую
часть HTML-документа. Данные
в ней организованы в виде прямоугольной сетки, состоящей из вертикальных
столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой.
Ячейки могут содержать в себе текст,
графику или другую таблицу.
Таблица состоит из трех основных частей:
·
название таблицы,
·
заголовки столбцов,
·
ячейки.
Таблица заполняется горизонтальными
рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего
угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для
создания пустых ячеек используются пробелы.
Теги оформления таблиц
Тег
|
Форма записи
|
Примечание
|
TABLE
|
<TABLE>текст</TABLE>
|
Объявление таблиц.
|
TR
|
<TR>текст</TR>
|
Тег строки.
|
TD
|
<TD>текст</TD>
|
Тег данных.
|
Атрибуты тега <TABLE>
Атрибут
|
Форма записи
|
Примечание
|
BORDER
|
<TABLE
BORDER=X>
|
Задает рамку вокруг таблицы.
|
WIDTH
|
<TABLE
WIDTH=XX%>
|
Задает ширину таблицы как ХХ% от ширины страницы или как
ХХ пикселов.
|
BGCOLOR
|
<TABLE
BGCOLOR= "#RRGGBB">
|
Задает
цвет фона таблицы.
|
Атрибуты тегов <TD> и <TR>
Атрибут
|
Форма записи
|
Примечание
|
ALIGN
|
<TD
ALIGN=X>
|
Устанавливает выравнивание по горизонтали (Right, Left, Center)
|
VALIGN
|
<TD
VALIGN=X>
|
Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline)
|
BGCOLOR
|
<TD
BGCOLOR= "#RRGGBB">
|
Задает цвет фона ячейки.
|
1. Запустите стандартную
программу Блокнот (Notepad).
2. Наберите в окне редактора:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<TITLE> Расписание занятий 5 классов </TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6"
FACE="ARIAL"><B> 5 класс </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>5 А</TD> <TD>5
Б</TD> <TD>5 В</TD>
</TR>
<TR>
<TD>1</TD> <TD>Русский язык</TD>
<TD>Литература</TD> <TD>История</TD>
</TR>
<TR>
<TD>2</TD> <TD>Алгебра</TD>
<TD>Информатика</TD> <TD>Англ.язык</TD>
</TR>
<TR>
<TD>3</TD> <TD>История</TD>
<TD>Информатика</TD> <TD> Алгебра </TD>
</TR>
</TABLE>
</BODY>
</HTML>
3. Сохраните файл под именем
5.HTM.
4. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
Комментариев нет:
Отправить комментарий