4.1. Встраивание изображений

4.1. Встраивание изображений

Начнем с добавления изображения, потому что это самый простой для добавления и самый распространенный мультимедийный элемент, встречающийся в Интернете. У изображений много плюсов: статичность, небольшие размеры файлов (относительно других типов мультимедиа-содержимого), широкая область применения. Сейчас трудно представить сайт без картинок. Дизайнеры научились использовать их очень разумно. Современные скорости соединений позволяют размещать большое количество графики на странице. Однако нужно знать меру, сайт не должен выглядеть пустым, но в то же время не стоит и злоупотреблять рисунками. Грамотное и уместное использование изображений поможет сделать сайт красивым, интересным и удобным. Бывают ситуации, когда без большого количества картинок невозможно обойтись, например при создании галереи, фотоальбома, каталога. В таких случаях умелое распределение файлов по сайту и удобная навигация помогут сэкономить время загрузки и трафик. Получается, что при создании сайта без изображений вам не обойтись, этот объект является самым простым, удобным и распространенным.

Для встраивания изображений в HTML-документ применяется элемент IMG. Он имеет обязательный атрибут src, значением которого должен быть адрес встраиваемого изображения.

Простейший вариант записи для включения картинки: <IMG src=" image.jpg">. При такой записи размер картинки на экране будет соответствовать ее реальному размеру.

Примечание

Адрес изображения может быть указан либо полностью (например, когда картинка находится на другом сервере (http://www.mypage.ru/IMG/myfoto.jpg)), либо относительно местоположения вашего документа (например, если картинка находится во вложенной папке (IMG/myfoto.jpg)). Во втором случае для указания директории, находящейся выше в иерархии каталогов, используются символы../ (переход из папки DOC, находящейся в одном каталоге с папкой IMG, будет выглядеть так:. /IMG/myfoto.jpg).

В листинге 4.1 продемонстрирован простейший вариант встраивания картинки.

Листинг 4.1. Простое встраивание изображения в документ

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg"/>

</body>

</html>

На рис. 4.1 показан результат обработки браузером кода из листинга 4.1 – простое встраивание картинки, без редактирования.

Рис. 4.1. Вставка изображения

Рисунок на странице отображается в реальном размере. Это простейший вариант вставки картинки, его можно использовать, когда нет необходимости ни в какой трансформации рисунка, например, если рисунок будет единственным элементом на странице.

Один рисунок на странице встречается нечасто, обычно на странице, помимо рисунка, присутствуют другие объекты, и большие размеры картинки становятся проблемой, но ничего страшного – размеры изображения можно легко подкорректировать.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Клипы изображений

Из книги Pinnacle Studio 11 автора Чиртик Александр Анатольевич

Клипы изображений Напомним, что как только материал (видео, изображение, звук, титры и т. д.) помещен в проект, мы уже ведем речь о клипах, составляющих проект. Внимание! Здесь рассматривается работа с изображениями только в режиме Линия времени, так как в других режимах окна


Вставка изображений

Из книги ArchiCAD. Начали! автора Орлов Андрей Александрович

Вставка изображений Инструментарий ArchiCAD, предназначенный для визуализации разрабатываемого проекта, не ограничивается рассмотренными механизмами автоматического или интерактивного создания видов. Часто в проект требуется поместить уже готовые изображения, причем


8.3.2. Расширение и встраивание языков

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

8.3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,


Встраивание

Из книги Microsoft Visual C++ и MFC. Программирование для Windows 95 и Windows NT автора Фролов Александр Вячеславович

Встраивание В некоторых случаях более удобно и эффективно выполнять подстановку тела функции вместо ее вызова. Непосредственная подстановка тела функции позволит сэкономить время процессора на вызове функции. В языке Си этого можно достичь при помощи директивы


8.3.2. Расширение и встраивание языков

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

8.3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,


Использование изображений

Из книги Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете автора Мухутдинов Евгений


Встраивание драйверов в ядро

Из книги Операционная система UNIX автора Робачевский Андрей М.

Встраивание драйверов в ядро Драйвер устройства является частью кода ядра операционной системы и обеспечивает взаимодействие других подсистем UNIX с физическими или псевдоустройствами. Существует два основных метода встраивания кода и данных драйвера в ядро


Встраивание объектов

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

Встраивание объектов Итак, есть способ загрузить наш мультимедиа-файл на страницу сразу, при этом надо учитывать, с помощью какой программы будет воспроизводиться файл, потому что загружать динамический объект нужно вместе с проигрывателем. Для обращения к этой


Встраивание аудио

Из книги Цифровая фотография. Трюки и эффекты автора Гурский Юрий Анатольевич

Встраивание аудио Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого


Встраивание видео

Из книги автора

Встраивание видео Сейчас встраивать видео на сайт можно без опасений – нынешних скоростей доступа в Интернет достаточно, чтобы у пользователей не было проблем с просмотром и скачиванием видео. Тем более что сейчас перемещение видеоархивов в сеть становится весьма


Встраивание Flash-графики

Из книги автора

Встраивание Flash-графики Необходимость Flash-графики не всегда очевидна, однако красиво нарисованная заставка может оживить вашу страницу. Не стоит ни пренебрегать Flash-графикой, ни переоценивать ее действие. Переизбыток подобного содержимого может замедлить загрузку


7.1. Встраивание CSS в HTML

Из книги автора

7.1. Встраивание CSS в HTML Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).Листинг 7.1. Простой HTML-документ<html><head><title>Моя домашняя страница</title></head><body><h1>Моя домашняя страница</h1><p>На этой странице вы найдете информацию обо мне


Встраивание сценариев в рамках элемента SCRIPT

Из книги автора

Встраивание сценариев в рамках элемента SCRIPT Кроме возможности обработки событий, для внедрения сценариев в веб-страницы в языке разметки HTML есть специальный элемент SCRIPT. Браузер, встретив тег <script> в процессе разбора кода, интерпретирует текст, последующий до


9.5. Закрашивание изображений

Из книги автора

9.5. Закрашивание изображений Прежде чем перейти к следующим простым инструментам рисования, нужно внести уточнения, касающиеся принципов их работы, основных способов применения, а также общих концепций обращения с ними.Существует несколько вариантов закрашивания