Добавление изображений в html. Изображения в HTML
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» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:
Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.
Предыдущая запись
Следующая запись
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Изображения моментально дают нам понять, насколько данный сайт или статья могут быть для нас интересными, создают настроение, по новому могут раскрыть тему. Иногда одно фото стоит тысячи слов.
Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:
- были информативными
- соответствовали цветовой гамме вашего сайта
- были уместны
Если у вас нет подходящего фото, можно воспользоваться так называемым фотостоком (фотобанком ) - местом, где хранится множество фотографий, иллюстраций и векторной графики. Таких ресурсов море, вы возможно даже слышали об одном из крупнейших - Shutterstock, но скачивания там платные.
Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус - список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂
Форматы изображений
Во Всемирной паутине в основном используются 3 вида изображений:
gif
(Graphics Interchange Format - формат для обмена изображениями
)
это первый формат, который начал использоваться в интернете. Плюсы такого формата - наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток - используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.
jpeg , он же jpg (Joint Photographic Experts Group - Объединенная группа экспертов по фотографии - так называется организация-разработчик)
подходит для создания полноцветных, высококачественных изображений, фотографий . Размер таких картинок велик, поэтому они обычно дают большую нагрузку на сервер. Если нужно сжать jpeg (для меньшего веса картинки) рекомендуем брать размер итогового изображения кратный восьми , так потери качества будут минимальными.
png (Portable Network Graphics - Портативная сетевая графика . Произносится так же как ping, т.е. )
этот формат изначально разрабатывался для веба, т.е. изображение обычно мало "весит" и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.
Подытожим
gif - для анимации
jpeg - для фотографий
png - для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном
Вставка изображения в html-файл
Для добавления картинки на страницу используется тег
(от англ. image - изображение, картинка).
Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.
Атрибут src (от англ. source - источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере - используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье "Ссылки ".
Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:
Атрибут alt (от англ. alternative - альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет - причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.
Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты
В примере ниже мы умышленно указали несуществующий путь для изображения, чтобы вы увидели, как работает атрибут alt
Высота и ширина изображений
Также можно установить высоту и ширину изображения, если оригинальная картинка напр. больше, чем вам нужна.
В HTML5 это рекомендуется делать с помощью CSS или атрибута style
, вот так:
В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов
, как единицы измерения.
Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:
< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:30%;" > |
Также ширину и высоту можно задавать в пикселях.
В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.
Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.
Попробуйте запустить такой код и посмотрите на результат:
< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:399px;" > |
Всегда устанавливайте размеры изображения. Обычно картинки грузятся дольше, чем остальной html-код. Если браузер будет знать, сколько места резервировать на имиджи, он сможет продолжить загрузку сайта не дожидаясь, пока загрузятся изображения.
Немножко нафталина
Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height . Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.
В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней - как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая - файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.
Разница в результате на лицо 🙂
Также в старых версиях html использовались такие атрибуты:
align , с помощью которого выравнивалось изображение по горизонтали или вертикали.
hspace - отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)
vspace - отступ сверху и снизу от картинки до контента вокруг.
border - задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)
Сейчас все эти манипуляции (и гораздо больше) делаются с помощью CSS, поэтому мы решили здесь не забивать вам этим голову. Если все же интересно, как работать с этими атрибутами - пишите в комментариях, мы добавим этот пункт 🙂
Размещение картинки в коде
От того, где мы расположим наш тег зависит то, как он будет отображаться в браузере.
Пример №1 - перед параграфом:
Такие элементы как
И
относятся к блочным элементам
. Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить ![]()
, а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.
Пример №2 - в начале параграфа
это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код
прописан внутри
Подписи к иллюстрациям
Чтобы пометить или подписать фото на странице используется тег
Тег
Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега
Итак, мы с вами научились
- добавлять изображение на страницу: с помощью тега
- узнали обязательные атрибуты для этого тега: src для указания пути и alt для описания картинки
- поняли какой формат лучше для чего использовать: jpeg для фотографий, png для логотипов и скриншотов, gif для анимации
- как лучше задать картинке размеры: с помощью атрибута style с параметрами width и height
- разобрались как будет отображаться картинка в зависимости от места в коде: отдельно
, если перед блочным элементом и с обтеканием
, если внутри блочного элемента (например
)
А чтобы нам было с чем работать, нужно откуда-то взять эти изображения, при этом не нарушив ничьих авторских прав.
Значит, пришло время бонуса 🙂
Список бесплатных фотобанков
Прежде, чем начнём, обратите внимание, что каждый скриншот здесь - это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье "Ссылки ".
На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.
В фотобанке 390 тыс. бесплатных фото и картинок. Здесь сложнее найти крутой имидж, но тоже попадаются неплохие экземпляры. Порядком отвлекает реклама платных фотобанков. Мы поставили этот ресурс на второе место из-за количества изображений, но по дружелюбности он будет пожалуй на последнем в нашем рейтинге.
У фотостока более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.
На множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.
Сайт создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск - только на английском.
Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.
Атрибут SRC
Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.
Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):
src="image/primer.jpg" >
То, без чего не создать сайт: ∼ ∼Как вставить картинку на страницу html
Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику (к файлу-картинке) при помощи тега img Тег img
- это сокращение от английского imagе (имидж, изображение), Источник - по английски source, сокращенно src
Важно
: вес и размер
картинки (небольшой), имя файла
(без пробелов и только латинские буквы и цифры), формат картинки
(расширения. GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Путь к картинке указывается абсолютный или относительный, в зависимости от того, где картинка находится у вас или в интернете на сторонних ресурсах (тогда надо указать URL)
Туман. Художник Владимир Княгницкий
Код. В коде указан относительный адрес (относительно папки у меня на сервере)
Код. В коде указан абсолютный адрес картинки
Размер изображения и толщина рамки
Реальный размер этой картинки: Ширина (width)="499" Высота (height)="434". Не прибегая в фотошопу можно сделать так, чтоб на экране картинка выглядела больше или меньше своих реальных размеров. Для этого используются атирибуты width и height . Например, чтоб картинка выглядела в 2 раза меньше, указываем ширину (width)="250" и высоту (height)="217" . И добавляем рамку толщиной 4 пикселя(border ="4"). Слева изображение с рамкой, справа, для срвнения, без рамки
Атрибуты тэга IMG
src -Обязательный атрибут, указывающий URL рисунка (его адрес, месторасположение)IMG SCR= " img/kartinka.gif"
align
- Выравнивает изображение к одной из сторон документа
align="left" - Выравнивание по левому краю
align="right" Выравнивание по правому краю
align="bottom"Выравнивание по нижнему краю
align="top" Выравнивание по верхнему краю
align="middle" Выравнивание по середине
alt
- Выводит текст к картинке. Альтернатива графике, если она не грузится
border
- Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.
width
ширина картинки в пикселях или процентах
height
- высота картинки в пикселях или процентах
hspace
отступ по горизонтали
vspace
отступ по вертикали
Примеры выравнивания картинки с текстом при помощи HTML
Картинка размещена перед текстом без указания каких либо атрибутов. Без форматирования текста. В результате получилось то,что вы видите.
Картинка расположена слева от текста про помощи атрибута align со значенем left
. align="left"
.Это, конечно, намного лучше предыдущего варианта расположения картинки с текстом. Но не думаю что кому то нравится, когда изображение прижато вплотную к тексту. На картинке бабочка, бабочка, бабочка. И текст, текст, текст про бабочку, бабочку, бабочку. Слишком близко к изображению. Картинка не должна сливаться с текстом, даже если текст написан просто как текст, чтоб наглядно продемонстировать обтекание картинки текстом. Очень важно чтобы на экране картинкал не сливалась с текстом, чтобы не раздражала, чтобы радовала глаз и была на своем месте. Достаточное количество текста нагляднее десонмтрирует пример.
Есть правила верстки в книгоиздательстве, должны быть правила верстки и при сайтостроении. Картинка расположена слева от текста про помощи атрибута align со значением LEFT, отступ от текста - 20 пикслелей по горизонтали.
align="left" hspace=20 Отступы добавляются при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE (отступ по вертикали) . В данном случае отступ по вертикали равен нулю, чтобы верх картинка был на одном уровне с верхней строкой текста. Если отступ равен нулю, он не указывавется. Ну а отступ по вертикали указан в атрибуте. И хотя в настоящее время вебмастеров убеждают отказаться от атрибутов HTML и полностью перейти на CSS, мне кажется что простота такого метода дает ему право на существование.
КОД Картинка расположена справа от текста про помощи атрибута align о значением RIGHT , добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали). и VSPACE (отступ по вертикали). В принципе всё то же, что в предыдущем варианте, только вместо лево , указано право и картинка вставлена не перед текстом, а примерно посредине. Форматирование при помощи атрибутов align (линейное выравнивание) и при помощи отступов по горизонтали и вертикали дает вполне нормальный результат. Картинка обтекается текстом слева, сверху, и снизу (если текста достаточно много). Отступ текста от картинки слева, сверху и снизу рвняется 20 пикселям. Все так, как мы указали в коде.
Два вида выравнивая (по левому краю и по правому краю) используются чаще всего, а остальные... Почти все остальные считаются устаревшими. На современных сайтах все изображения (да и вообще весь дизайн) оформлятеся при помощи каскадных таблиц стилей (CSS)
Текст, текст, текст продолжение текста
Картинка расположена про помощи атрибута align со значением middle . Добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE . Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем
Как использовать атрибуты alt и title.
Атрибуты alt
и title
содержат название картинки. ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинку
Если вы делаете сайт только для себя, то можете не применять эти атрибуты. Если сайт предназначен для людей, то эти атрибуты надо заполнить дав четкое точное описание изображения.
Во-первых, это удобно для посетителей, во вторых, необходимо для поисковых машин. Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.
КОД картинки с заполнеными alt и title
Как сделать картинку ссылкой
Любая ссылка делается при помощи тега А
и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег
Источник картинки
закрывающий тег
В данном материале я вам расскажу об очень важных тегах HTML, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.
Картинки сделают твой сайт уникальным и будет выделять из общей массы. Однако помни, что чрезмерное использование графики на сайте может быть плохим фактором.
Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.
на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.
И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег , у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:
Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:
Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:
- width — ширина картинки (можно указывать пиксели или проценты);
- height — высота картинки (можно указывать пиксели или проценты).
Если не указывать данные атрибуты, браузер загрузит реальные размеры картинки. Однако не стоит переусердствовать со значениями данных атрибутов, ведь увеличение длины или ширины картинки может её исказить, что испортит её, например фотографию человека, где изменятся пропорции человека.
Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:
еще пример html-кода:
Бывают случаи, когда в браузере отключена возможность отображения графики, в том числе и картинок, и чтобы ваша страница не потеряла смысл, применяют атрибут alt, в котором мы пишем альтернативный текст, если картинка не под грузилась на страницу. html-код на примере:
- left — картинка расположится слева, а текст, который рядом — справа;
- right — картинка расположится справа, а текст, который рядом — слева.
Приведу HTML-код:
Текст, радом с картинкой.
а браузер выведет следующее:
Текст, радом с картинкой.
HTML-код для значения right:
Текст, радом с картинкой.
на html-странице будет так:
Текст, рядом с картинкой.
Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:
- left — не обтекать текстом, который выровнем по левому краю;
- right — не обтекать текстом, который выровнем по правому краю;
- all — не обтекать текстом, который выровнем по левому и правому краям.
Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:
- vspace — делает верхнее и нижнее поля в пикселях;
- hspace — делает боковые поля (слева и справа) в пикселях.
Приведу простой html-код на примере:
Вот такая красивая картинка.
Что получится по данному примеру попробуй посмотреть сам.
Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение, тем больше рамка вокруг изображения. HTML-код будет таким:
на html-странице будет вот так:
Я написал основные теги HTML, необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.
Дата публикации: 15 мая, 2012