Как добавить картинку в html – Как добавить картинку на веб-страницу?

Важно! Чтобы назначить расположение фото относительно текста, а не страницы, атрибут align нужно использовать в теге img. Значения такие же, как и у атрибута тега p.

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

Чтобы разместить изображение в тексте, достаточно вписать тег img (со всем обрамлением) в текстовом блоке в редакторе.

Для добавления рамки используется атрибут border с числовым значением, которое означает толщину рамки в пикселях.

Чтобы задать вертикальный и горизонтальный отступы, используются vspace и hspace. Их числовое значение означает расстояние от текста до картинки, непосредственно в пикселях.

В примере атрибуту vspace задано значение в 50 пикселей.

Размер горизонтального отступа укажет расстояние, на котором будет находиться текст при обтекании изображения.

Еще два полезных атрибута – alt и title. Первый задает альтернативный текст изображению.

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

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

Текст, указанный как значение атрибута title, будет выводить подсказку при непосредственном наведении мыши на картинку. В коде его оформление не отличается от прочих атрибутов.

Использование такой возможности рекомендуется если необходимо вставить картинку с ссылкой в html. Также таким образом можно добавлять краткие разъяснения к картинкам.

Далее рассмотрим, как вставить картинку в таблицу. Для этого понадобится просто скопировать тег img (с обрамлением и атрибутами) вставить его в код ячейки таблицы.

После обновления страницы результат будет таким:

Таблица атрибутов тега img

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

Добавление, форматирование и размещение картинок на странице станет простым и приятным делом.

geek-nose.com

Добавление рисунка | htmlbook.ru

Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

<img src="URL" alt="альтернативный текст">

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

• Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
• Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
• Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 10.1. Пример размещения файлов

• Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

Пример 10.1. Вставка изображения в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Добавление рисунков</title>
 </head>
 <body>
  <p><img src="http://webimg.ru/themes/cloverfield/images/ref_collage.gif" 
        alt="Это абсолютный адрес размещения изображения"></p>
  <p><img src="/example/images/home.png" 
        alt="Адрес размещения изображения относительно корня сайта"></p>
  <p><img src="images/home.png" 
        alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
 </body>
</html> 

Как правило, в качестве формата графического файла выступает GIF и JPEG.

htmlbook.ru

Особенности вставки картинки в HTML

Здравствуйте, дорогие друзья!

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

Навигация по статье:

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

За вставку картинки в HTML отвечает тег img, который имеет свои атрибуты

<img src=»images/example.jpg»>

В атрибуте src мы указываем путь к изображению, причём путь может быть относительным или абсолютным.

Например, если у вас есть файл index.html, в который вы хотите вставить картинку, расположенное в папке

<img src=»images/example.jpg»>

А абсолютный так:

<img src=»http://site.ru/images/example.jpg»>

Атрибут alt используются для задания альтернативного текста. Именно на него обращают внимание поисковые системы чтобы понять что изображено на картинке и определить по какому запросу нужно высвечивать эту картинку в

Так же если у посетителя сайта в браузере отключен показ изображений или картинка по каким либо причинам не загрузилась то на его месте должен будет высветиться этот альтернативный текст, указанный в атрибуте «alt»

Например:

<img src=»http://site.ru/images/example.jpg» alt=»Вставка изображения»>

Обратите внимание, что альтернативный текст должен соответствовать тому что изображено у вас на картинке, в противном случае вы рискуете попасть под один из фильтров поисковых систем!

Однако это не значит, что на картинке с изображением дивана в атрибуте alt можно написать «диван» и ничего более. Это может быть текст, соответствующий какому-то ключевому запросу, по которым вы продвигаете свой сайт, например, «перетяжка мягкой мебели» или «купить диван в Москве» и так далее.

В WordPress этот атрибут можно добавит при вставке или редактировании картинки:

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

Атрибут title используется для задания заголовка картинки, которое высвечивается при наведении курсора на картинку:

Например:

<img src=»http://site.ru/images/example.jpg» alt=»Вставка изображения» title=»Пример вставки изображения»>

В WordPress этот атрибут задаётся в окне редактирования картинки

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

Как задать размер изображения html?

Для этого в HTML существуют специальные атрибуты для тега img

• width – для задания ширины картинки
• height – для задания высоты картинки

Размер картинки мы можем задавать как в пикселях так и в процентах.

Например:

<img src=»”http://site.ru/images/example.jpg» alt=»Вставка изображения»> <img src=»http://site.ru/images/example.jpg» alt=»Вставка изображения»>

Лично мне больше нравится задавать размер изображения в CSS так как там можно задавать ещё минимальную и максимальную ширину и высоту для изображений. Это особенно актуально если нужно несколько разных по размеру изображений выровнять по высоте или ширине.
Для этого можно использовать CSS свойства:

• max-width – максимальная ширина изображения
• min-width – минимальная ширина изображения
• max-height – максимальная высота
• min-height – минимальная высота

Например:

Img { max-width: 300px; }

Так же при задании ширины или высоты изображения в CSS для того чтобы не происходило деформации изображения используется значение auto.
Например:

img { height: 200px; width: auto; }

Как сделать картинки адаптивными?

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

1. 1.При помощи html с использованием атрибута width
   Например:
   

   <img src=»images/example.jpg» alt=»Вставка изображения»>

   <img src=»images/example.jpg» alt=»Вставка изображения»>

2. 2.При помощи CSS. Например:
   

   img { width: 100%; height: auto; }

   img { width: 100%; height: auto; }

Так же не стоит забывать о свойстве max-width, которое позволяет сделать так чтобы на больших экранах ваша картинка занимала не более 300 пикселей, к примеру. А на маленьких оно было на всю ширину.

Делается это следующим образом:

img { width: 100%; max-width: 300px; height: auto; }

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

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

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

Успехов вам и процветания!

С уважением Юлия Гусарь

impuls-web.ru

HTML-уроки. Как вставить картинку в html

Очень часто при работе с сайтами нам надо вставить картинку на страницу. В html для вставки картинок используется специальный тег . Разберем основные для нас атрибуты которые имеют тег:

1. align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом;
2. alt — альтернативный текст для изображения, такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений;
3. border — толщина рамки вокруг изображения;
4. height — высота изображения;
5. width — ширина изображения;
6. src — путь к картинке;
7. hspace — горизонтальный отступ от изображения до окружающего контента;
8. vspace — Вертикальный отступ от изображения до окружающего контента.

В статье про HTML-редакторы я использовал несколько картинок, давайте в качестве примера возьмем одну из них, например скриншот программы SublimeText. Ссылка на эту картинку: https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png

Итак, в нашей рабочей папке создаем подпапку «Урок 2», копируем туда наш файл, который мы сделали в прошлом уроке и добавляем в него тег <img> в атрибуте src которого содержится ссылка на выбранную нами картинку.

<h2>Вставка изображения в html-страничку</h2> <img src=»https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png» alt=»Изображение из статьи про html-редакторы» align=»left» border=»2″ hspace=»20″ /> Это текст моей html-странички, а ниже картинка.

Если мы сохраним эту картинку у себя на компьютере, то увидим, что она имеет довольно большой размер — 1600px x 903px. Для того чтобы изменить размеры картинки при выводе на нашей странице применяются атрибуты height и width. Эти атрибуты можно применять как вместе, так и по отдельности. Я задал ширину картинки при выводе на экран — 500px, а высоту задавать не стал — в этом случае браузер сам, пропорционально подберет высоту.

Теперь можно попробовать поменять местами теги <p> и <img> при этом задав атрибут align=»left» — изображение будет расположено у левого края страницы, а текст обтекать справа. А если задать атрибут align=»right», то изображение будет расположено у правого края страницы, а текст обтекать слева.

В случае когда текст обтекает справа мы можем заметить, что между картинкой и текстом нет отступа, давайте зададим этот отступ с помощью атрибута hspace=»20″. Теперь картинка слева и справа имеет отступ 20px.

С помощью атрибута border мы можем задать рамку вокруг изображения — border=»2″ — у картинки будет черная рамка с толщиной 2px. Цвет рамки мы можем изменить только с помощью css и о том, как это сделать я расскажу в следующих уроках.

Похожие записи

codernote.ru

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

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

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

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
     
Заголовок для вставки изображения.
 
    
    
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
    Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
</body>
</html>

Одного тега <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> с атрибутами получил такой вид:

HTML

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

webteoretik.ru

Как добавить рисунок на свой сайт? Графические изображения. Учебник html

Глава 3

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

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

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

делается это так:

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег <img> не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс
<img src=»http://www.site.ru/foto/foto.jpg»>

Ну что, давайте попробуем выложить фото.

Вот мой пример:

Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы..

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

Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align «выравнивание» применим и к данному тегу

Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 — будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

Теперь продолжим..

А еще изображение можно сделать фоном страницы.. для этого используем атрибут background «фон» открывающего тега <body>

Вот так:

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

Пример:

Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!

Итог главы:

Единственное, что Вам в этом примере не знакомо так это надпись — &nbsp; — это есть так называемый спецсимвол в данном случае — пробел.. о спецсимволах и их назначении я расскажу более подробно в отдельной главе.

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

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

• Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы:

• Если рисунки выполняют роль кнопок (см. глава ссылки), обязательно подписывайте их (атрибут alt) к примеру: «Перейти на главную страницу» или «Скачать» дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.

• Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>)

  вот так например:

  <body bgcolor=»#008000″ background=»fon.jpg»>

  Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным — что лучше, нежели чем белый цвет в общем дизайнерском решении сайта.

www.webremeslo.ru