Отступы
Если рисунки прилегают вплотную к тексту, это мешает читать. Поэтому рекомендуется делать отступы, отделяющие рисунок от текста. Вертикальные и горизонтальные отступы задаются в параметрах VSPACE (от английского vertical space - вертикальный отступ) и HSPACE (от английского horizontal space - горизонтальный отступ) тэга IMG.
|
|
|
Рисунок в первом примере вставлен без указания отступов
<IMG SRC="image.jpg" ALIGN="left">
а рисунок справа — с отступами в 10 пикселов:
<IMG SRC="image.jpg" ALIGN="left" VSPACE="10" HSPACE="10">
Другие параметры
Тэг IMG имеет и другие параметры, наиболее важные из которых следующие:
WIDTH — ширина рисунка в пикселах
HEIGHT — высота рисунка в пикселах
ALT — текстовое описание
BORDER — ширина рамки вокруг рисунка
Если размеры рисунка не указаны, они определяются из файла (для этого, естественно, надо загрузить файл из Интернета). Если указанные размеры не совпадают с размерами рисунка в файле, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок.
Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах.
Вот пример использования этих параметров:
<IMG SRC="photo.jpg" ALT="Моя фотография" WIDTH="50" height="80" BORDER="0">
Рисунки-ссылки
Рисунки очень часто являются гиперссылками. Если вы хотите сделать рисунок ссылкой, надо заключить соответствующий ему тэг <IMG> внутрь тэга <A> (см. раздел Ссылки). Например сылка на сайт www.mail.ru описывается так:
<A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" BORDER="0"> </A>
При
этом на экране браузера вы увидите
значок
,
который и будет ссылкой. Нулевое значение
параметра BORDER тэга <IMG> служит для
того, чтобы избавиться от синей границы
вокруг рисунка-ссылки.
Таблицы
Простейшая таблица
Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок.
Ниже приведен код простейшей таблицы
<BODY> <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> </BODY>
и вид окна браузера
Таблица начинается тэгом <TABLE> (от английского table — таблица) и заканчивается парным ему тэгом </TABLE>. Параметр BORDER тэга <TABLE> обозначает ширину рамки таблицы.
Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом <TR> (от английского table row — строка таблицы) и заканчивается парным ему тэгом </TR>.
Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом <TD> (от английского table data — данные таблицы) и заканчивается парным ему тэгом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).