Размещение изображений на Web-страницах

Для вставки изображения в текст Web-страницы используется одинарный тег <IMG> (табл. П 1). Атрибуты этого тега задают все параметры изображения, размещаемого на странице. Обязательным является атрибут SRC, определяющий адрес и имя графического файла. Если атрибут SRC не установлен, то будет отображаться только значок пустого изображения.

Структура тега <IMG> с атрибутом SRC имеет вид:

<IMG SRC = "Адрес и имя файла">.

Если графический файл с именем Институт находится в той же папке, что и Web-страница, то для его размещения следует записать:

Размещение изображений на Web-страницах - student2.ru Размещение изображений на Web-страницах - student2.ru <IMG SRC = "Институт.JPG">.

Имя файла Формат

Для размещения графического файла с именем МИНСК, нахо-дящегося по адресу D:\Коллекция\Города\ МИНСК.GIF, следует записать <IMG SRC = "D:\Коллекция\Города\ МИНСК.GIF">.

С помощью тега <IMG SRC = "URL-адрес файла"> на Web-странице размещается графический файл, находящийся на другом компьютере в глобальной сети «Интернет».

Чтобы создать Web-страницу с фотографией нашего института, которая приведена на рис. 4.1, нужно ввести следующий HTML-код:

<HTML>

<HEAD>

<TITLE> Web-страница с фотографией </TITLE>

</HEAD>

<BODY>

<H2 ALIGN = "CENTER"> Наш институт </H2>

<P ALIGN = "CENTER">

<IMG SRC = "Институт.JPG" HEIGHT = "200" WIDTH = "300">

</Р>

</BODY>

</HTML>

Размещение изображений на Web-страницах - student2.ru

Рис. 4.1. Web-страница с фотографией института

В приведенном примере высота фотографии (HEIGHT) составляет 200 пикселей, а ширина (WIDTH) – 300 пикселей. Для размещения фотографии создается абзац с выравниванием по центру.

Горизонтальные линии

Размещение на Web-странице горизонтальных линий осуществляется с помощью одинарного тега <HR>. С помощью атрибутов SIZE, WIDTH,COLOR и ALIGN изменяются соответственно толщина, ширина, цвет и способ выравнивания линий.

Рассмотрим несколько примеров, поясняющих размещение гори-зонтальных линий:

1. <HR> - горизонтальная линия на всю страницу толщиной 2 пикселя.

2. <HR COLOR = "GREEN" SIZE = "15"

WIDTH = "200" ALIGN="RIGHT"> – горизонтальная линия зеленого цвета толщиной 15 пикселей, шириной 200 пикселей и вырав-ниванием по правому краю.

3. <HR COLOR = "BLUE" SIZE = "25"> – горизонтальная линия синего цвета на всю страницу толщиной 25 пикселей.

4. <HR COLOR = "RED" SIZE = "20"

WIDTH = "300" ALIGN = "LEFT"> – горизонтальная линия красного цвета толщиной 20 пикселей, шириной 300 пикселей и выравниванием по левому краю.

Отображение линий для четырех записанных примеров показано на рис. 4.2.

Размещение изображений на Web-страницах - student2.ru

Рис. 4.2. Линии на Web-странице

ТАБЛИЦЫ

Создание таблиц

Создание таблицы осуществляется с помощью парного тега <TABLE> … </TABLE >. Этот тег создает таблицу в том месте, где он добавлен
в коде HTML.

Любая таблица состоит из строк, а строки – из ячеек. Для фор-мирования строк и ячеек таблицы используются следующие теги:

<TR> ... </TR> – новая строка;

<TH> ... </TH> – ячейка заголовка;

<TD> ... </TD> – обычная ячейка таблицы.

Эти теги записываются внутри парного тега <TABLE> … </TABLE >.

Формирование таблицы происходит по строкам – вначале задается одна строка и в ней указывается необходимое количество ячеек, затем вторая строка и т.д.

Для того чтобы на Web-странице получить таблицу, представленную на рис. 5.1, необходимо набрать следующий HTML-код:

<HTML>

<HEAD>

<TITLE> Страница с таблицей </TITLE>

</HEAD>

<BODY>

<TABLE BORDER="1">

<TR>

<TH> Автомобили </TH> <TH> Цена </TH>

</TR>

<TR>

<TD> Форд </TD> <TD> 5000 </TD>

</TR>

<TR>

<TD> Гольф </TD> <TD> 6000 </TD>

</TR>

</TABLE >

</BODY>

</HTML>

Размещение изображений на Web-страницах - student2.ru

Рис. 5.1. Страница с таблицей

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

Следует отметить, что в HTML-коде приведенной страницы тег <TABLE> содержит атрибут BORDER со значением "1". Это означает, что в таблице, приведенной на рис. 5.1, толщина внешней границы равна
1 пикселю. Если записать

<TABLE BORDER = "6"> … </TABLE >,

то толщина внешней границы будет равна 6 пикселям. Чтобы границы таблицы не отображались, необходимо атрибуту BORDER присвоить значение, равное 0, или просто этот атрибут опустить.

Наши рекомендации