Как поместить картинку на сайт html

Изображения в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

• были информативными
• соответствовали цветовой гамме вашего сайта
• были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус — список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно ��

Форматы изображений

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format — формат для обмена изображениями)

это первый формат, который начал использоваться в интернете. Плюсы такого формата — наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток — используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.

jpeg , он же jpg (Joint Photographic Experts Group — Объединенная группа экспертов по фотографии — так называется организация-разработчик)

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

png (Portable Network Graphics — Портативная сетевая графика. Произносится так же как ping, т.е. [ pɪŋ ])

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало «весит» и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif — для анимации

jpeg — для фотографий

png — для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

Для добавления картинки на страницу используется тег <img> (от англ. image — изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.

Атрибут src (от англ. source — источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере — используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье «Ссылки».

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

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

Как вставить в html картинку

Добавление изображения или фото в HTML не вызовет у вас особых хлопот благодаря этой статье, в ней мы рассмотрим не только вставку картинки в HTML. Например, еще мы научимся вставлять картинку в таблицу и многое другое. Зачем? Потому что картинки — наше все! С ними статьи выглядят лучше, подробнее, качественнее, веселее.

Тег <img> для вставки картинки

Итак, для размещения изображения на веб-странице используется тег <img>, у которого есть атрибуты src и alt. Src показывает браузеру где лежит картинка, а alt это альтернативный текст, который видит пользователь в случае если у него отключены картинки, во время загрузки или если изображение не загружается.

Для HTML4, HTML5

Берем и недолго думая вставляем картинку в html. Результат:

Учтите, что тег <img> это строчный элемент. Значит, когда используется XHTML/строгий HTML4, его можно размещать только внутри блочного элемента (<p>, <div>)

В остальных случаях (HTML4, HTML5) это не обязательно.

Параметры, применяемые к изображениям в HTML

Для того чтобы проводить небольшие манипуляции с изображениями, в HTML используются определенные параметры для картинок. Например:

width – ширина картинки
height – высота картинки

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

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

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

alt – альтернативный текст (краткое описание изображения)

Несмотря на то что эра медленного интернета прошла и картинки никто не отключает, по этому тегу дополнительно ориентируются поисковые системы ранжируя результаты в поиске по картинкам, а также определяя тематику веб-страницы. Содержание параметра alt не показывается при наведении мышкой на картинку.

title – заголовок картинки

Подсвечивается при наведении пользователем мышки на картинку и также используется в поисковой оптимизации.

Следующие атрибуты это vspace, hspace и border.

vspace – этот атрибут задает отступ по вертикали между изображением и текстом вокруг (в пикселях)

hspace – этот атрибут задает отступ по горизонтали между изображением и текстом вокруг (в пикселях)

border – этот атрибут задает рамку вокруг картинки (в пикселях)

align – (right, left, middle) этот атрибут выравнивает изображение по одному из краев, либо по центру

Помимо этого можно использовать обычный атрибут style, если вам так хочется:

Вот что получится:

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

На этом базовая часть теории закончена, перейдем к дополнительным возможностям.

. Пояснение для новичков.
• Как установить счетчик посещений на сайт? Устанавливаем счётчик LiveInternet, Яндекс.Метрика и Google Analytics: https://blogwork.ru/kak-ustanovit-schetchik-poseshhenij-na-sajt/
• Перенос сайта с Денвера на хостинг — перенос WordPress с localhost.

Размещаем изображение с чужого сайта

Можно ли вставить картинку с чужого сайта? Можно. Это называется хотлинк (hotlink). Не все вебмастера это любят и позволяют делать, потому что картинка подгружается с чужого хостинга и если мы все начнем подгружать картинки с чужого хостинга, а он будет слабым и вообще не предназначенным для этого (как специальные сайты-хостинги картинок) то будет печаль. Но Вконтакте не такой. Вот смотрите, захожу в чужие сохраненные картинки Вконтакте и вставляю в html прямо на этой странице:

Как я это сделал? Очень просто:

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

Как вставить картинку в таблицу на веб-странице

Сделать это очень просто — достаточно поместить <img> внутри тега ячейки <td>

А вот результат:

Как вставить картинку, сделав ее в качестве фона html страницы

Для этого вам нужно указать в параметре background тега body путь к картинке, которую вы хотите сделать фоном страницы (пропишите путь к картинке, как и при обычном размещении):

В качестве страховки от того что картинка не будет загружать можно оставить bgcolor.

Бонус — почему может не показывается картинка, если вы «все правильно указали»?

В заключении расскажу о нюансе, с которым я сталкивался лично. Называется он несоответствие расширения файла.

Бывает, что хостинг или движок сайта не видит разницы в регистре между html-kartinka.png и html-kartinka.PNG. А, бывает что разница есть и поэтому картинга не загружается. Еще обратите внимание на сам файл, ведь он может быть html-kartinka.jpg, а может быть и html-kartinka.jpeg. Внимательнее!

Сидишь под вечер голову ломаешь, а там все легко. И проверить просто, — достаточно заглянуть на хостинг:

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img> . Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt :

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

Единицами измерения по умолчанию служат пиксели, и в html-коде для ширины и высоты изображения их указывать не нужно.

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

то путь будет состоять из названия изображения и его расширения:

Если картинку перенести в папку img:

то путь к ней будет начинаться с названия папки, в которой она находится:

Если файл index.html поместить в папку files:

то путь к изображению будет начинаться с конструкции ../ :

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

Всплывающая подсказка

В этом уроке познакомимся с еще одним очень полезным атрибутом, который можно применять практически ко всем тегам – это атрибут title , он служит для отображения всплывающей подсказки. Например:

WEBTEORETIK

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

• Главная
• О сайте
• Карта сайта
• Обратная связь

• Главная
• >>
• Раздел >> Уроки HTML
• >>
• Материал >>
• Как вставить изображение в HTML.

Как вставить изображение в HTML.

Категория: Уроки HTML Просмотров: 5101 Коментариев: 0 Дата: 2017-04-02 Добавил: admin

Мы продолжаем изучение HTML, и в этом уроке пойдет речь о том, как вставить изображение в HTML документ. Для этого существует специальный тег, который называется <img>. Тег <img> это сокращение от английского image, что обозначает изображение. У этого тега НЕТ парного закрывающегося тега, тег <img> является одинарным тегом.

При создании любого сайта, для изображений создается отдельная папка, из которой потом картинка и выводятся. Поэтому давайте создадим эту папку. Заходим в ранее созданную общую папку HTML, в ней уже находится файл index.html, рядом создаем папку с название images. И так папку создали, теперь в нее скопируйте какую-то картинку, не большого размера формата jpg или png.

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

Заголовок для вставки изображения.

Одного тега <img> для результата мало, поэтому должен быть указан самый главный, основной атрибут src, сокращение от английского — source, что переводится как – источник. С помощью этого атрибута мы указываем адрес, где расположено наше изображение. В нашем же случае это images/Название картинки.jpg. Не которые зададут вопрос: почему путь к картинки задается с папки images, а не, например с HTML? – Путь к изображению записывается относительно нашего документа index.html, т.е. относительно главной страницы сайта или, как еще говорят, корня сайта.

Так же, в нашем теге <img> нужно указать высоту и ширину картинки, чтобы браузер точно знал какие размеры отводить под данное изображение. Если же не указывать, то браузер все отобразит правильно, но у него на это уйдет больше времени, так как браузер сначала загрузит картинку, а потом только определит ее размеры. Прежде чем указать размеры изображения нам их надо узнать самим. Как это делается? Нажимаем правый клик мыши на картинке и выбираем пункт свойства, в открывшемся окне выбираем вкладку Подробно. У Вас должен получиться результат, как показан ниже.

И так, размеры узнали теперь приступим к нашим атрибутам и что бы указать ширину используется атрибут width=»», для высоты атрибут height=»».

Также, является обязательным атрибут alt =»», так как: первое — без него Ваш код не пройдет валидацию по коду, а второе — если у кого-то в браузере картинки отключены или по какой-то причине картинка не загрузилась, то в место нее выведется альтернативный текст который и указывается в внутри атрибута alt =»», в примере выше это слово images.

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

Ниже кратко расскажу о других существующих атрибутах, они уже устарели и в HTML не используются, но нужно знать, что такое есть.

И первый такой атрибут это align=»». Если мы посмотрим на результат работы кода выше, то увидим, что картинка расположилась слева, а справа осталось пустое место. Иногда нужно чтобы там не было пустого места, а текст заполнил его. Для этого и используется атрибут выравнивания. Можно выровнять по левому краю — left и правому краю — right. Если атрибут указан align=«left», то картинка будет находиться с лева, а текст ее будет обтекать с правой стороны и наоборот, если указать align=«right».

Ели мы посмотрим на результат, то текст очень близко прилегает к изображению. Эти отступы увеличивается с помощью атрибутов, они, повторюсь, уже устарели и все это сейчас делается через CSS. Это атрибуты hspace=»» — отступ по горизонтали и vspace=»» — отступ по вертикали. В результате наш тег <img> с атрибутами получил такой вид:

Все значения, что отмечены в атрибутах считаются в пикселах — px. Вот так, с помощью HTML вставляется изображения в документ, рекомендую поиграться со значениями в атрибутах, чтобы лучше понять, как оно работает, а на этом все, жду в следующем уроке.