Размещение изображений на Web-страницах
Для вставки изображения в текст Web-страницы используется одинарный тег <IMG> (табл. П 1). Атрибуты этого тега задают все параметры изображения, размещаемого на странице. Обязательным является атрибут SRC, определяющий адрес и имя графического файла. Если атрибут SRC не установлен, то будет отображаться только значок пустого изображения.
Структура тега <IMG> с атрибутом SRC имеет вид:
<IMG SRC = "Адрес и имя файла">.
Если графический файл с именем Институт находится в той же папке, что и Web-страница, то для его размещения следует записать:
<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>
Рис. 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.
Рис. 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>
Рис. 5.1. Страница с таблицей
Текст в ячейках заголовков таблицы (рис. 5.1) отображается полу-жирным шрифтом с выравниванием по центру ячейки, а в обычных ячейках текст не выделяется и выравнивается по левому краю.
Следует отметить, что в HTML-коде приведенной страницы тег <TABLE> содержит атрибут BORDER со значением "1". Это означает, что в таблице, приведенной на рис. 5.1, толщина внешней границы равна
1 пикселю. Если записать
<TABLE BORDER = "6"> … </TABLE >,
то толщина внешней границы будет равна 6 пикселям. Чтобы границы таблицы не отображались, необходимо атрибуту BORDER присвоить значение, равное 0, или просто этот атрибут опустить.