Изучаем Java

Вы здесь: Главная >> Java-самоучитель >> Рисунки в HTML

Обучающие курсы:

Курс обучения профессии "Программист Java"
Nota Bene!!! Обучаем на веб-разработчика!!! Спешите!!!

Рисунки в 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.

 


Партнеры сайта