: the image embed element

Вставка картинок в html страницы

Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег img. Браузер помещает изображение в том месте веб-страницы, где встретит тег img.


Код вставки картинки в html страницу имеет такой вид:

Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src. Что такое атрибут html-тега я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла.

Приведу еще несколько примеров указания адреса файла с изображением:

этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.

В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:

Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.

Тег img является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега «Р» — абзац:

Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:

Тогда html-код страницы со вставленной картинкой будет таким:

И смотрим результат отображения в браузере:


Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега «img».

Образ диска

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

Способ 1: CloneCD

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

В интерфейсе программы легко разобраться даже тем, кто только начинает постигать азы компьютерной грамотности. Она не создает виртуальных приводов, поэтому просмотреть содержимое файла IMG с ее помощью не получится. Для этого нужно воспользоваться другой программой или записать образ на диск. Вместе с образом IMG CloneCD создает еще два служебных файла с расширениями CCD и SUB. Для того, чтобы образ диска открылся корректно, он должен находится в одной директории с ними. Для создания образов DVD-дисков существует отдельная разновидность программы под названием CloneDVD.

Утилита CloneCD платная, но пользователю предлагается для ознакомления пробная 21-дневная версия.

Способ 2: Daemon Tools Lite

DAEMON Tools Lite относится к одним из самых популярных средств для работы с образами дисков. Файлы формата IMG создавать в ней нельзя, но открываются они с ее помощью очень просто.

Чтобы смонтировать образ, необходимо:

  1. Щелкнуть по значку программы правой кнопкой мыши и выбрать пункт «Эмуляция».
  2. В открывшемся проводнике указать путь к файлу образа.

После этого образ будет смонтирован в виртуальный привод как обычный компакт-диск.

Способ 3: UltraISO

UltraISO — еще одна очень популярная программа для работы с образами. С ее помощью файл IMG можно открыть, смонтировать в виртуальный привод, записать на компакт-диск, конвертировать в другой тип. Для этого в окне программы достаточно щелкнуть по стандартной иконке проводника или воспользоваться меню «Файл».

Атрибуты «width» и «height»

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

Пример: использования атрибутов width и height

  • Результат
  • HTML-код
  • Попробуй сам »
Если вам нужно значительно изменить размеры изображения, то используйте специальные графические редакторы для работы с изображениями. Они смогут изменить размеры изображения вовсе без искажений.

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

Если вы используете атрибуты width и height для того, чтобы изменить размеры изображения в браузере, то можно сказать, что вы применяете их для оформления веб-страницы, а в этом случае, лучше использовать CSS, что позволит добиться тех же результатов. Вы можете использовать атрибут style указав свойства width и height изображения:

Styling with CSS

is a replaced element; it has a value of by default, but its default dimensions are defined by the embedded image’s intrinsic values, like it were . You can set properties like /, /, , , etc. on an image.

has no baseline, so when images are used in an inline formatting context with , the bottom of the image will be placed on the text baseline.

You can use the property to position the image within the element’s box, and the property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).

Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. SVG images, for instance, have no intrinsic dimensions if their root element doesn’t have a or set on it.

Атрибут «src».


Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Пример HTML:

Попробуй сам

Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:

Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:

При такой записи размер изображения на экране будет соответствовать его реальным размерам.

CSS background-images

Также альтернативой является использование css изображений (или JavaScript, но это совсем другая история). CSS-свойство  , и другие  свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

p {
  background-image: url("images/dinosaur.jpg");
}

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же париться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы хотите просто добавить что-нибудь красивое на вашу страницу, всё круто. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!

Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS

Замечание: Вы можете узнать больше о CSS background images в нашей теме о CSS.

Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.

Обзор: Multimedia and embedding Далее

Изображения в таблице

При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE.

Пример 1.5. Изображение в таблице

HTML 4.01CSS 2.1IECrOpSaFx

Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).

а б

Рис. 1.3. Изображение в таблице. а — почти стандартный режим, б — стандартный режим

Заметно, что в стандартном режиме появляется небольшой отступ внизу картинки. Откуда он берется? Если добавить в ячейку текст и увеличить масштаб (рис. 1.4), то хорошо заметно, что изображение как строчный элемент выравнивается по базовой линии текста, а не по его нижнему краю. Соответственно, разница между базовой линией и нижним краем текста и есть значение промежутка под картинкой.

Рис. 1.4. Базовая линия текста

Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега <img> в блочный элемент с помощью свойства display со значением block (см. пример 1.3). Стиль в таком случае будет следующий:

TABLE IMG { display: block; }

Если наряду с изображениями внутри ячейки находится текст, этот стиль может привести к нежелательным последствиям. Вместо того чтобы картинка располагалась рядом с текстом, она, как блочный элемент, появится на новой строке. В этом случае рекомендуется задать выравнивание изображений по нижнему краю через свойство vertical-align со значением bottom (пример 1.6).

Пример 1.6. Выравнивание изображений

XHTML 1.0CSS 2.1IECrOpSaFx

Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 — по верхнему.

Растровое изображение

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

Способ 1: CorelDraw

Так как данный тип IMG файла является детищем компании Novell, вполне естественно, что открыть его можно с помощью графического редактора от этого же производителя — Corel Draw. Но делается это не напрямую, а через функцию импорта. Для этого нужно сделать следующее:

  1. В меню «Файл» выбрать функцию «Импорт».
  2. Указать тип импортируемого файла как «IMG».

Способ 2: Adobe Photoshop

Формат IMG используется также для хранения графических элементов различных популярных игр, в частности, GTA, а также для устройств GPS, где в нем отображаются элементы карт, и в некоторых других случаях. Но все это очень узкие сферы применения, которые интересны больше для разработчиков данной продукции.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.


С этим читают