| | HTML - это просто Глава 4. Графика в HTML Наверняка, после того, как мы научились наводить красоту с помощью изменения свойств текста, возникло желание поработать с рисунками. Мне доводилось видеть поразительной красоты странички созданные совсем без включения каких бы то ни было рисунков, но совсем отказаться от рисунков было бы глупо. Итак, вставляем в нашу страничку рисунки. Картинка вставляется в документ с помощью тега <img src="имя_файла_картинки">. Если мы хотим вставить в страничку картинку из файла picture.jpg, которая лежит в той же папке, где находится файл нашей странички, то тогда мы сделаем это так: <img src="picture.jpg">, если она лежит в папке images, которая, в свою очередь, лежит в той же папке, что и страничка, то ссылка на нее оформится так: <img src="images/picture.jpg">, а если картинка лежит в папке, в которой находится папка, где лежит наша страничка (иными словами - уровнем выше), то тогда она вызывается так: <img src="../picture.jpg">. Если картинка вообще находится на другом сайте, то требуется указать ее абсолютный адрес: <img src="http://www.fotos.ru/images/picture.jpg">. Для удобства рекомендую картинки складывать в ту же директорию, что и странички, или, в крайнем случае в специально отведенную для графики поддиректорию. Видите, картинка не вставляется в html-документ как в файлы текстовых редакторов, просто в коде странички браузеру сообщается, где находится картинка, которую надо вставить в страницу. | | <html>
<head>
<title>Мой фотоальбом</title>
</head>
<body text="#000080" bgcolor="#ccff33">
<center><h3>Привет!</h3></center>
<p><img src="images/photo_5.jpg">Здесь можно увидеть мои фотографии, чтобы не только узнать, какой я есть, но и увидеть меня. Фотографии я стараюсь подбирать покрасивее и поярче, но кроме того, я слежу еще и за тем, чтобы размер файла картинки не был очень большим, чтобы пользователь, который захочет посмотреть их, не ждал долго, пока картинки загрузятся.</p>
</body>
</html> |
Ну, и как вам результат? Не очень? Да, действительно, было бы лучше если бы текст как-нибудь обтекал картинку. Для этого существует тег align. Если он равен left (то есть в документе мы напишем <img src="picture.jpg" align="left">), то картинка прижмется к левому краю окна, а текст будет обтекать ее справа. Если right, то наоборот - картинка справа, текст слева. Кроме того, текст может располагаться внизу картинки (bottom) (это по умолчанию), вверху (top) и посередине (middle). | | <html>
<head>
<title>Мой фотоальбом</title>
</head>
<body text="#000080" bgcolor="#ccff33">
<center><h3><font face="Verdana">Привет!</font></h3></center>
<p><font face="Verdana"><img src="images/photo_5.jpg" align="left">Здесь можно увидеть мои фотографии, чтобы не только узнать, какой я есть, но и увидеть меня. Фотографии я стараюсь подбирать покрасивее и поярче, но кроме того, я слежу еще и за тем, чтобы размер файла картинки не был очень большим, чтобы пользователь, который захочет посмотреть их, не ждал долго, пока картинки загрузятся.</font></p>
<p><font face="Verdana">Только фотография эта не моя. Это - Элвис Пресли.</font></p>
</body>
</html> |
Кроме параметра align у тега img существует еще ряд атрибутов. Параметр vspace задает расстояние от картинки по вертикали в пикселях (минимальных единицах экрана). Например, при vspace="15", картинка будет ниже верхнего текста и выше нижнего на 15 пикселей. Параметр hspace задает то же самое, но по горизонтали. Параметр alt позволяет увидеть текст, если задержать курсор над иллюстрацией (подведите курсор к глазу на этой странице, для этого эффекта я указал alt="Посмотрите пример."). Этот же текст высвечивается вместо картинки, если отключить в обозревателе отображение графики. Параметры width и height задают соответственно ширину и высоту картинки, точнее размеры ее отображения. Задав width="200" и height="200" для картинки, чьи физические размеры 100×100, мы получим ее увеличенное в четыре раза изображение. Точно так же можно и уменьшить картинку, но уменьшать картинку я бы не советовал. К тому же при задании размеров отображения не следует забывать о пропорциях, так как их нарушение исказит картинку. Кроме того, задание размеров картинки позволяет браузеру построить страничку еще до того, как картинки загрузятся, а в случае отключенной графики это спасет дизайн страницы от искажений. Параметр border задает рамку вокруг картинки (в пикселях). Очень редко пригождается. Все вышеперечисленные параметры могут употребляться совместно. Используем их на нашей страничке. Установим расстояние от картинки до текста в 20 пикселей, укажем альтернативное описание, установим размер: | | <html>
<head>
<title>Мой фотоальбом</title>
</head>
<body text="#000080" bgcolor="#ccff33">
<center><h3><font face="Verdana">Привет!</font></h3></center>
<p><font face="Verdana"><img src="images/photo_5.jpg" align="left" width="300" height="268" alt="Элвис Пресли" hspace="20">Здесь можно увидеть мои фотографии, чтобы не только узнать, какой я есть, но и увидеть меня. Фотографии я стараюсь подбирать покрасивее и поярче, но кроме того, я слежу еще и за тем, чтобы размер файла картинки не был очень большим, чтобы пользователь, который захочет посмотреть их, не ждал долго, пока картинки загрузятся.</font></p>
<p><font face="Verdana">Только фотография эта не моя. Это - Элвис Пресли.</font></p>
</body>
</html> |
 Картинку можно представить еще и фоном страницы. Скажем, имеется у вас такая вот картинка. Если ее прописать в открывающем теге body в параметре background, то из нее построится фон всей странички. Для этого нужно написать <body bgcolor="#cccccc" background="image.jpg">. Вы спросите, зачем прописывать цвет фона, если мы указываем фоновую картинку? Это нужно для того, чтобы фон был все-таки раскрашен, если картинка не загрузится, или пользователь отключит отображение графики.
| | <html>
<head>
<title>Мой фотоальбом</title>
</head>
<body text="#000080" bgcolor="#cccccc" background="images/back_comp.jpg">
<center><h3><font face="Verdana">Привет!</font></h3></center>
<p align="justify"><font face="Verdana"><img src="images/photo_6.jpg" align="right" alt="Конфеты" hspace="20" width="200" height="156">Здесь можно увидеть мои фотографии, чтобы не только узнать, какой я есть, но и увидеть меня. Фотографии я стараюсь подбирать покрасивее и поярче, но кроме того, я слежу еще и за тем, чтобы размер файла картинки не был очень большим, чтобы пользователь, который захочет посмотреть их, не ждал долго, пока картинки загрузятся.</font></p>
<p align="justify"><font face="Verdana">Только фотография эта не моя. Это конфеты.</font></p>
</body>
</html> |
Есть еще один параметр у тега body - параметр bgproperties. Если указать bgproperties="fixed", то при перематывании содержимого страницы в окне браузера все содержимое будет перемещаться, а фон останется неподвижным. Теперь давайте отвлечемся и просто поговорим. Web-браузеры "понимают" множество графических форматов: *.gif, *.jpg, *.png, *.bmp, *.tif, *.wmf, *.ras, *.eps, *.pcx, *.pcd, *.tga. С некоторыми из этих форматов я даже не встречался, но это не значит, что можно использовать все это множество, мало того - нельзя. Рекомендуется пользоваться только первыми тремя форматами графики (*.gif, *.jpg и *.png), так как они предоставляют максимальные возможности по сжатию объема файла. Прежде чем вставлять графику в свою страничку, воспользуйтесь каким-нибудь мощным графическим редактором (рекомендую Adobe Photoshop и Jasc Paint Shop Pro, я пользуюсь ими) для того чтобы сохранить картинку в "нужном" формате (в разных форматах одна и та же картинка может сжиматься по разному), с минимально допустимым низким качеством, когда картинка еще не теряет своего вида. Совсем не обязательно, чтобы страничка блистала изысканной графикой, когда основная смысловая нагрузка у нее - информационная, - а грузиться будет быстрее. Также не переборщите с анимированными картинками, так как они активно привлекают к себе внимание. Из всего вышесказанного сделайте один вывод: графика должна быть в "правильном" формате и немного "весить". Теперь на другую тему: мы уже знаем, что с помощью параметров width и height можно задавать размеры картинки и выставлять их отличными от номинального. Посмотрите:
Это одна и та же картинка, только первая увеличена, третья - уменьшена. Занижение размеров позволяет "впихнуть" на страничку картинку любого размера, но и грузиться она будет всеми своими сотнями килобайт. К тому же при занижении размеров могут смазаться некоторые детали и картинка будет выглядеть хуже, чем она есть на самом деле. Зато иногда это позволяет вписать в дизайн картинку, которая чуть-чуть не подходит по размерам, не изменяя ее реальных размеров. И увеличением, и уменьшением следует пользоваться осторожно. Да, мы поговорили о том, как сделать так, чтобы текст обтекал картинку слева или справа, но не знаем, как отдельно от текста картинку поставить посередине или справа. Для этого тег картинки помещают в тег параграфа с соответствующим выравниванием. Например: <p align="center"><img src="image.jpg" hspace="10" alt="Вот так это деелается"></p> Вообще, картинку следует понимать как символ, будучи вставленной в текст она ведет себя так же, как и остальные буквы, если в ее параметрах не указано иное. Вот, собственно, и все о картинках, можно переходить к следующей главе. Начало | Содержание | Словарь
Глава 3. Форматирование текста | Глава 5. Ссылки | |
