Поделиться
Задание 4 Работа с изображениями.doc
Язык создания Web-страниц HTML
Занятие 4. Работа с изображениями
Для вставки графических изображений (рисунков, фотографий и т.д) в текст используется тег <IMG SCR=имя файла>
Данный тег имеет несколько атрибутов, которые будут рассмотрены ниже. Если файл с изображением находится в другой папке, необходимо указать полное имя файла с учетом пути. Рекомендуется все же размещать файлы c изображениями в той же папке, где располагаются и все файлы, относящиеся к этому сайту. Изображения статичного вида должны иметь расширение jpg. Используется еще формат gif для анимации. Имена файлов необходимо задавать латинскими буквами, иначе могут возникнуть сложности после размещения файлов в Интернет. После внедрения изображения, следует сохранить страницу, в которую оно было внедрено, на носителе. Тогда при просмотре изображение будет отражаться, а иначе возможен только вид рамки.
Пример 1.
Это рисунок: <html>
<head>
<title> Кошки </title>
</head>
<body BGCOLOR=white TEXT=BLACK link=blue alink=red vlink=purple>
<FONT color=red>
<H2> Породы кошек</H2>
</FONT>
<BR>
<img src= risunok1.jpg width=200 height=150 border=0 >
Сибирская кошка является одной из излюбленных пород человечества. Котята отличаются выносливостью, игривостью, устойчивостью к заболеваниям. Взрослая сибирская кошка отличается особым умом и при правильном воспитании может понимать значение 30 слов. При правильном питании шерсть отличается особой пушистостью и красотой. Сибирские кошки не только умные, но они замечательные лекари.
</body>
</html>
Сохраните в своей папке эту страницу под именем, например, INDEX.HTM, и просмотрите страницу.
Рассмотрим атрибуты тега IMG.
Border определяет толщину рамки вокруг изображения в пикселях. 0 – невидимая рамка.
ЗАДАНИЕ. Сделай рамку равной 5, далее 2 и верните 0.
Атрибуты width=200 height=150 означает размер изображения по ширина и длине в 200 и 150 пикселей.
ЗАДАНИЕ. Измените это размер, задав параметры 400 и 300 соответственно. Верните обратно параметры 200 и 150.
Как видно, текст располагается ниже изображения. Возможно выполнить обтекание изображения текстом. Добавьте в тег IMG новый атрибут ALIGN=left
Изображение будет располагаться слева, а текст обтекать справа.
ЗАДАНИЕ. Задавая параметры right, top, middle, выполните другие виды обтекания, смещая изображение вправо, по верху, посередине. Верните параметр left.
С помощь дополнительных атрибутов HSPACE и VSPACE возможно задание отступов в пикселях по горизонтали и вертикали относительно изображения и обтекающего его текста.
ЗАДАНИЕ. Добавьте атрибуты HSPACE=50 VSPACE=50
Теперь задайте параметры, равные 10. А теперь уберите второй атрибут и задай HSPACE=10.
Атрибут ALT позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику или в случае ошибки. Например,
<IMG SCR=risunok1.jpg ALT= «Репродукция»>
Для того чтобы при нажатии на изображение можно было осуществлять переход на другую страницу, перед тегом IMG добавляется стандартная ссылка <a href=имя файла>
Пример 2. Файл INDEX.htm содержит
две фотографии, посвященные школьной жизни – библиотека и компьютерный класс. В
свою папку скопируйте два файла risunok2.jpg и risunok3.jpg.
Изображения сделайте ссылками. При щелчке на них осуществляется переход на соответствующие страницы, из которых возможен обратный возврат на главную страницу.
Файл INDEX.htm
<html>
<head>
<title> Школьная жизнь </title>
</head>
<body BGCOLOR=white TEXT=BLACK link=blue alink=red vlink=purple>
<FONT color=red>
<H2> Мы в школе </H2>
</FONT>
<BR>
<BR>
Библиотека
<BR>
<A href=01.htm>
<img border=0 src= risunok2.jpg width=154 height=115>
</A>
<BR>
Компьютерный класс
<BR>
<A href=02.htm>
<img border=0 src= risunok3.jpg width=128 height=96>
</A>
</body>
</html>
Файл 01.htm
<html>
<head>
<title> Библиотека </title>
</head>
<body BGCOLOR=white TEXT=BLACK link=blue alink=red vlink=purple>
<BR><BR><BR><BR><BR>
<H3>
<FONT color=green>
Наша библиотека имеет большой фонд. Мы можем найти не только
учебники, но и книги как классиков, так и современных авторов.
</font>
</H3>
<BR> <BR>
<A href=index.htm> Возврат к главной странице </A>
</body>
</html>
Файл 02.htm
<html>
<head>
<title> Компьютерный класс </title>
</head>
<body BGCOLOR=white TEXT=BLACK link=blue alink=red vlink=purple>
<BR><BR><BR><BR><BR>
<H3>
<FONT color=green>
В нашем компьютерном классе мы изучаем программирование,
прикладные программы и только иногда играем.
</font>
</H3>
<BR> <BR>
<A href=index.htm> Возврат к главной странице </A>
</body>
</html>
Поэкспериментируйте с полученными страницами, выполняя переходы.
ПРАКТИЧЕСКОЕ ЗАДАНИЕ
На главной странице выводится заголовок: Картины русских художников. Ниже представляются репродукции картин «Прилив» (risunok4.jpg – width=234, height=321), «Натюрморт» (risunok5.jpg – width=336, height=269) и «Старая мельница» (risunok6.jpg – width=342, height=219).
 |
Соответствующие файлы скопируйте в свою папку.
Эти картины должны являться ссылками, по которым осуществляется переход на соответствующие страницы с содержанием:
Файл 01.htm
Содержит информацию о картине ПРИЛИВ. Текст страницы: Автор картины – И.К. Айвазовский. Находится в Серпуховском историко-художественном музее. Размер полотна 106 на 81.
Файл 02.htm
Содержит информацию о картине НАТЮРМОРТ. Текст страницы: Автор картины – . И.И. Козловский. Находится в Ульяновском областном художественном музее. Размер полотна 57 на 72.
Файл 03.htm
Содержит информацию о картине СТАРАЯ МЕЛЬНИЦА. Текст страницы: Автор картины – В.Д. Поленов. Находится в Серпуховском историко-художественном музее. Размер полотна 88 на 135.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
