Вы здесь: Главная >> Java-самоучитель >> Рисунки в HTML
Рисунки в HTML
Поместим теперь на нашу HTML-страницу рисунки. Это делается с помощью дескриптора <img> (листинг 12.1).
Листинг 12.1.
Пример Web-страницы, использующей рисунки
<HTML>
<HEAD>
< ТIТLЕ >Работа с рисунками</ТIТLЕ>
</HEAD>
<BODY>
<IMG SRC="my.GIF">
</BODY>
</HTML>
Это будет выглядеть примерно так, как показано на рис. 12.1.
Рис 12.1. Результат выполнения листинга 12.1
У данного дескриптора имеется несколько атрибутов. В атрибуте SRC мы указываем адрес рисунка, который мы хотим поместить на страничку. Кроме этого атрибута дескриптор <img> содержит следующие атрибуты.
• Align — выравнивание.
• Ait — текст, выводимый вместо картинки, если ее загрузка запрещена.
• Border — толщина рамки, обрамляющей картинку.
• Height — высота картинки.
• Hspace — горизонтальный отступ картинки от текста.
• Vspace — вертикальный отступ картинки от текста.
• Width — ширина картинки.
Следует подробней рассмотреть значения атрибута Align.
Возможны следующие значения:
left (слева от текста),
right (справа от текста),
top (по верху текущей строчки),
middle (посередине от "базовой" линии),
bottom (по низу текущей строки).
Пример использования данных атрибутов представлен в листинге 12.2.
Листинг 12.2.
Пример использования разных атрибутов
<HTML>
<HEAD>
< ТIТLЕ >Работа с рисунками 2</ ТIТLЕ >
</HEAD>
<BODY>
<Р ALIGN="center"> Давайте посмотрим на картинку:
<IMG SRC="My.gif" АLТ="Нет картинки" ALIGN="middle" BORDER="5">
FACE="Arial" COLOR="#00FF00">Впечатляет, да?
</BODY>
</HTML>
Рисунок можно использовать и как ссылку.
Давайте приведем пример использования рисунков в этом качестве (листинги 12.3 и 12.4).
Листинг 12.3.
Пример использования рисунка как ссылки (первая страница)
<HTML>
<HEAD>
< ТIТLЕ >Первая страница</ ТIТLЕ >
</HEAD>
<BODY>
<Р>. На этой странице расположен рисунок. Щелкните на рисунке и перейдите на страницу с другим, очень похожим рисунком. По памяти найдите у этих рисунков 10 отличий. Переход от первой страницы на вторую и обратно (подглядывание) засчитывается за одно очко. Кто наберет меньше очков, тот и победил</Р>
<А HREF="2.htm"><IMG SRC="1.jpg"></А>
</BODY>
</HTML>
Листинг 12.4.
Пример использования рисунка как ссылки (вторая страница)
<HTML>
<HEAD>
< ТIТLЕ >Вторая страница</ ТIТLЕ >
</HEAD>
<BODY>
<Р>Чтобы вернуться на предыдущую страницу, щелкните на рисунке </Р>
<А HREF="1.htm"><IMG SRC="2.jpg"></A>
</BODY>
</HTML>
Чтобы убрать рамку у рисунков, необходимо указать у атрибута BORDER значение равное 0.
Есть дескрипторы, которые могут позволить поместить музыку и видеофильмы на Web-страницу. Если вы хотите заниматься этим серьезно, следует почитать специальную литературу. В данной книге даются лишь основы HTML.
Сергей Владимирцев
25.03.2011