Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.
Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер-качество изображения - это GIF, JPG (JPEG) и PNG.
Тег или
как вставить изображение в HTML?
Для вставки
изображения в HTML страницу используется
тег . Это самый обычный встроенный
(inline, уровня строки)
элемент, то есть он не создает впереди
и после себя переводы строк в начало.
Но вот содержимого у него не может быть,
так как
не имеет закрывающего
тега и является пустым
.
У тега есть
два обязательных
атрибута
-
это src, который указывает путь (URL) к
изображению и alt, выводящий альтернативный
текст, когда в браузере отключен показ
изображений. Если src вы вряд ли забудете
указать, ведь без него изображение
просто-напросто не загрузится, то про
alt очень часто забывают даже опытные
вебмастеры.
Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега , только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.
Пример вставки изображений в HTML-страницу
Такие вот разные птицы.
Результат в браузере
Изменение размеров изображений в HTML
По умолчанию все
браузеры показывают изображения в их
натуральные размеры. Но при помощи
атрибутов width и height тега можно
изменить их высоту и ширину. Значения
указываются в числах, которые означают
размеры в пикселях (ставить в конце
чисел буквы px не нужно) или процентах,
в этом случае в конце надо поставить
знак %.
Пример изменения размеров изображений
Результат в браузере
Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.
Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.
Выравнивание изображений
В старых версиях
HTML для выравнивания изображений у тега
имелся уже известный вам атрибут
align, но в современном HTML его нет, поэтому
будем использовать тоже уже знакомый
вам, и, надеюсь, ставший родным style.
style="float:left" - прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.
style="float:right" - прижимает изображение к правой стороне блока, а текст обтекает его слева.
Пример выравнивания изображения по левому краю.
Первый параграф.
Текст перед картинкой.
После картинки.
Последний параграф.
Результат в браузере
style="clear:left" - прерывает обтекание изображений выровненных по левой стороне.
style="clear:right" - прерывает обтекание изображений выровненных по правой стороне.
style="clear:both" - прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
Первый параграф.
Текст перед картинкой.
После картинки.
Последний параграф.
Результат в браузере
Всплывающий текст-подсказка у изображений в HTML
Как и у многих
других HTML-тегов, у тега есть
атрибут title, выводящий текстовую подсказку
при наведении курсора мыши на изображение.
title="Любой текст."
Изображения для фона
Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.
Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.
В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега
<тег style="background:url("адрес картинки")">...
Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега
.<тег style="background:#цвет url("адрес картинки")">...
Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение - это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится... Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста.
Пример создания фоновых изображений в HTML
Созвездия в
заоблачной дали
Раздумьям тщетным
многих обрекли.
Одумайся, побереги
рассудок -
Мудрейшие и те в тупик
зашли.
Омар Хайам.
Таблицы
Чаще всего таблицы в HTML используются не по их прямому назначению - отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом - другое, в среднем располагают основную информацию и так далее.
Существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. По многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее.
Если вы создаете сайт и хотите сделать его действительно интересным, живым и наглядным, вам непременно нужно будет добавлять в текст своих страниц картинки. В данной статье мы рассмотрим, как вставить картинку в html и xhtml.
Теги картинок
Тег, который отвечает за вывод изображения на сайте, является универсальным для всех версий html. Это тег . Он может немного по-разному оформляться, но суть остается прежней.
Например, в html вы можете просто использовать одиночный тег . В xhtml все теги должны быть закрытыми. Поэтому в конце тега вы должны поставить правый слеш:
.
Атрибуты тега картинок
При вставке изображений используется несколько атрибутов. Давайте последовательно их рассмотрим.
- Ключевой атрибут - src. Он указывает адрес картинки, которую вы хотите загрузить на веб-страницу. Пример для html будет выглядеть так:
Пример для xhtml будет выглядеть следующим образом:
- Еще два атрибута касаются размеров изображения. А именно атрибут width предлагает определить ширину, а height, соответственно, высоту картинки. Пример для html:
Для xhtml: - Атрибут alt должен включать краткое описание картинки. Данный текст появляется в том случае, если картинка не загрузилась или если пользователь ищет информацию через поисковик в разделе «Картинки». Пример строчки кода:
- Title дает заголовок картинке. Он также важен при поиске пользователем необходимой информации.
- Атрибут vspace задает отступ по вертикали между картинкой и другими элементами разметки (например, текстом). Значение измеряется в пикселях.
- Атрибут hspace задает такой же отступ, но уже по горизонтали. Значение также измеряется в пикселях. Пример для двух последних атрибутов:
- С помощью атрибута border картинка очерчивается рамкой. Если значение специально не выставлено, то по умолчанию значится 0. Пример:
Дополнительные возможности для картинок
Картинку можно не только вставить в текст веб-страницы, но и сделать фоном. Картинка-фон это атрибут тега body или стиль css. Подробнее о том, как вставить картинку в фон вашего сайта, вы узнаете в статье .
Вы можете вставить картинку в таблицу. Тогда картинка будет фоном не для всей страницы, а лишь для определенной области. И при этом место изображения будет зафиксировано, независимо от окружающего текста. Для этого необходимо создать таблицу html. Напомним, тег таблицы - table, тег строки - tr (строка), тег колонки - td.
Картинку вставляем после тега td. Вот как это будет выглядеть:
2-я ячейка 3-я ячейка 4-я ячейка
26.06.2015
Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML
-документ, как сделать картинку фоном
, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?
Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.
Обычное изображение
будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG)
, GIF
и PNG
.
○ Как сделать картинку фоном в HTML
Чтобы сделать картинку фоном, для тега
нужно прописать атрибут «background» :
Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.
и в HTML файл вставьте вот этот код:
Jpg">
Результат будет таким:
Внимание
Не правильное название:
Правильное название:
○ Как вставить картинку в HTML
Чтобы вставить картинку в HTML-документ, используют тег
с параметром «src»
, которое определяет путь или адрес к картинке.
Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:
Здравствуйте, это моя первая страница на сайт.
Результат будет таким:
Внимание : название картинки должно быть написано на латинице, иначе картинка не отобразится.
Не правильное название:
Правильное название:
Я думаю, вы до этого момента все поняли. Теперь попробуем скомбинировать два примера вместе. Сделаем на веб-странице фон, вставим изображение и текст.
Jpg">
○ Как вставить картинку, если она находится в папке « img » или « images»?
Если картинка находится в папке «img» или «images» , тогда нужно указать путь от HTML файла к папке «img» или «images» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:
Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.
Предыдущая запись
Следующая запись
Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.
Для фреймов в HTML:
Для фреймов в XHTML:
Изображения друг под другом
При выводе изображений вертикально с переводом строки через
картинки в почти стандартном режиме выводятся слитно без промежутков. В примере 1.2 показан код для вывода двух изображений.
Пример 1.2. Вывод двух изображений
HTML 4.01 IE Cr Op Sa Fx
Поскольку рисунки предварительно были одним и «разрезаны» для удобства, они образуют единое изображение (рис. 1.1).
Рис. 1.1. Вывод изображений в почти стандартном режиме
В стандартном режиме между изображениями образуется небольшой промежуток (рис. 1.2).
Рис. 1.2. Вывод изображений в стандартном режиме
Для обхода этой особенности в стандартном режиме существует два основных способа:
- добавить display : block для изображений;
- использовать свойство line-height для родительского контейнера.
Рассмотрим эти способы подробнее.
Превращение тега
в блочный элемент еще не раз поможет нам для обхода различных неприятностей, связанных с изображениями. В этот раз воспользуемся той особенностью, что блочные элементы выстраиваются друг под другом слитно (отступы в расчёт не принимаем). При этом тег
из кода, конечно же, следует убрать (пример 1.3).
Пример 1.3. Использование свойства block
Не обязательно применять свойство display , также можно воспользоваться line-height , это свойство задаёт межстрочный интервал. Установив значение 1px для тега
Внутри которого располагаются изображения, мы получим аналогичный результат (пример 1.4).
Пример 1.4. Использование свойства line-height
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Изображения в таблице
При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE .
Пример 1.5. Изображение в таблице
HTML 4.01 CSS 2.1 IE Cr Op Sa Fx
|
Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).
 |
 |
| а | б |
Рис. 1.3. Изображение в таблице. а - почти стандартный режим, б - стандартный режим
Заметно, что в стандартном режиме появляется небольшой отступ внизу картинки. Откуда он берется? Если добавить в ячейку текст и увеличить масштаб (рис. 1.4), то хорошо заметно, что изображение как строчный элемент выравнивается по базовой линии текста, а не по его нижнему краю. Соответственно, разница между базовой линией и нижним краем текста и есть значение промежутка под картинкой.
Рис. 1.4. Базовая линия текста
Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега
в блочный элемент с помощью свойства display
со значением block
(см. пример 1.3). Стиль в таком случае будет следующий:
TABLE IMG { display: block; }
Если наряду с изображениями внутри ячейки находится текст, этот стиль может привести к нежелательным последствиям. Вместо того чтобы картинка располагалась рядом с текстом, она, как блочный элемент, появится на новой строке. В этом случае рекомендуется задать выравнивание изображений по нижнему краю через свойство vertical-align со значением bottom (пример 1.6).
Пример 1.6. Выравнивание изображений
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Текст 
|
Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 - по верхнему.
Однопиксельные рисунки
Во времена табличной вёрстки активно применялось прозрачное изображение размером один на один пиксел, так называемый однопиксельный рисунок. Помещённый в ячейку таблицы такой рисунок не давал ей сжиматься до определенных пределов, но сам легко масштабировался, задавая тем самым ширину или высоту ячейки. Поскольку рисунок прозрачный, можно установить для ячейки фоновый цвет и получить горизонтальные или вертикальные линии заданной толщины.
В стандартном режиме нас ожидают те же проблемы, что и при использовании обычных рисунков внутри ячеек. Высота ячейки будет расширена, поскольку к изображениям добавляется отступ снизу. Решается эта проблема гораздо проще и не требует использование дополнительного стиля. Современные браузеры прекрасно отображают заданные размеры ячеек и без наличия дополнительных изображений внутри. Поэтому достаточно просто удалить однопиксельный рисунок из ячейки.
Здесь класс line задает размеры ячейки.
