Как вставить изображение в HTML, тег img и его атрибуты

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, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.

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

Не награмождай 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, а также как сделать картинку ссылкой.

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

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

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

1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла , встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Форматы графики для web-сайтов

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

Есть еще формат: PNG , который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24 . Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG .

Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения ). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

Пишем код для вставки картинки на web-страницу

Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

Листинг 8.1.

Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

Само изображение "вставляется" с помощью тега: img src . Полностью запись выглядит вот так: img src="img/mers1.jpg" , где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img , а имя графического файла (картинки): mers1.jpg .

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

Давайте рассмотрим дополнительные параметры:

border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1 , - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0" .

width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

Если не указать параметры: width и height , то изображение может получить геометрические искажения.

hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

Точно таким же образом мы "вставим" на web-страницу и второе изображение, с той лишь разницей, что выравнена оно будет по правому краю.

Комментарии к этой статье (уроку):

Скажите пожалуйста, где именно надо создать папку img?

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

Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

Спасибо большое, все получилось.

Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: б

Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

Если Вы заметили у меня картинка лежит в папке img

Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

вот мой код ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

А если я возьму изоброжение с чужого сайта это не будет нарушением авторских прав?

Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

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

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

Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

не знаю почему у всех запара!? нужно просто коды не копировать-затем вставлять, а самим прописывать и усе будет работать..вот текст моей картинки

Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

АндрейК пожалуйста скажите где ошибка? сколко пробывал не получается((

Андрей, подскажите, почему не получается увидеть картинку. Мой код: Надпись есть, картинки нет. Мой адрес: [email protected] Спасибо.

Тоже долго мучилась, но получилось! Действительно папку imj надо открыть в HTML-документе.

Обязательно попробую,Спасибо

ииииииииууууууу крррррроши мои

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

Андрей я вставляю:

Андрей я вставляю: и у меня нет картинки в документе только надпись!!!Мой адрес:[email protected]

мой код...тоже нет картинки. Папка img находится в тойже папке что и index... помогите,пожалуйста. [email protected] Спасибо!

Ну не знаю. Прочитала все комментарии. Перепробовала все. Копировала, вставляла свои данные. Ничего не получается. Папка с картинками (img) лежит там же,где index.html. Но картинки нет. Вместо нее крестик красный и надпись.Работаю в браузере IE. Вот, что я ввела:

Посмотрела HTMLкод страницы на месте фото в уроке: Код на странице отличается от того, что в листинге. Почему? и, кстати на странице код "mers1.jpg" подчеркнут. Скопировать с подчеркиванием не удалось. Пробовала и так вставлять. Все равно картинки нет. В чем дело?

Сами спрашиваем, сами и отвечаем. Долго мучилась картинка не вставлялась. Оказалось: 1, вместо тега src у меня было srk 2. запуталась,когда составляла путь к картинке. Переименовала папку в IMG и все получилось. На это потратила почти два дня.Но это того стоило.

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

Здраствуйте а подскажите как разместить одно изображение сверху второе ниже слева, а третье снизу справа))))

...........в чем моя ошибка отсутствия изображения?

В коде все правильно, если ничего не напутали все должно работать. Но название файла (картинки) пишите английскими буквами. Многие сервера не воспринимают латиницу.

Но вот что странно... пока называла папку разными именами, никак картинка не хотела появляться, хоть и путь был прописан правильно. Как только назвала IMG,сразу появилась. В чем подвох?

Марина, никакого подвоха и провокаций нет:). В код Листинга 8.1. указано, что данное избражение лежит в папке: img. Если Вы меняете у себя на хосте название папки для изображениий, то поменяйте и в листинге, вот и вся хитрость.

Я пытаюсь вставить изображение!!! прописываю все через блокнот я все верно делаю может через блокнот не стоит??

И открываю все в мозиле файр фокс последний))

Путь моей картинкаи C:Documents and SettingsденисРабочий столkoffevinogradwwwImg и сама картинка названа gif тоже в название входит 1.gif...Я в блокноте делаю так делал и полный путь не выходит мозила не видит фото еxpoler красным крестом выделяет

Денис, переименуйте папку Img в img , т.е. все прописными буквами, и путь до нее тоже переименуйте. Многие сервера некорректно отображают заглавные регистры.

у меня все тот же вопрос: почему не изображения, а только надпись. я создала отдельную папку для сайта: в ней Web-страница и рисунок. Вставила: ПОМОГТЬЕ, В ЧЕМ ОШИБКА МОЯ ПОЧТА: [email protected]

А как сделать картинку, чтобы её можно было увеличивать или уменьшать?

У меня тоже почему-то не центрирует картинку. В чем подвох?.. Код такой:

Изображения в 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, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега

его не было. Сегодня я вам покажу способ, который можно применить абсолютно к любым HTML-тегам и опять мы используем стили (CSS), а точнее атрибут style. Общий синтаксис такой:

<тег style="background:url("адрес картинки")">...

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

<тег style="background:#цвет url("адрес картинки")">...

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

Пример создания фоновых изображений в HTML

Созвездия в заоблачной дали
Раздумьям тщетным многих обрекли.
Одумайся, побереги рассудок -
Мудрейшие и те в тупик зашли.
Омар Хайам.

Таблицы

Чаще всего таблицы в HTML используются не по их прямому назначению - отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом - другое, в среднем располагают основную информацию и так далее.

Существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. По многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее.

Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.

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

Приступим.

Как вставить картинку в html?
Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.

kartinka - это название картинки
jpg - это расширение картинки. Расширение может быть gif, png, bmp.

Если картинка размещена в папке images, тогда путь к картинке будет таким:

images - название папки, где лежит картинка "kartinka.jpg ".

Если картинка лежит на другом сайте, тогда код будет таким:

https://www.сайт - это адрес сайта.

Пример :

Для этого просто заключите картинку между ссылочным элементом:

Атрибуты для картинок

ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
left - выравнивание по левому краю, текст будет обтекать справа.
right - выравнивание по правому краю, текст обтекает слева.

Результат :

выравнивание по правому краю

HSPACE - отступы от картинки по горизонтали (в пикселях).
VSPACE - отступы от картинки по вертикали (в пикселях).

Результат :

отступы от картинки

HEIGHT - высота изображения (пикселях).
WIDTH - ширина изображения (пикселях).

Результат :

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

title="Всем привет - сайт!!! ">

Результат :

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

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

Результат :

А если поменять значение border на 5:

Результат :

Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background .

background="ваш_фон.jpg" >

На картиночном фоне может отображаться текст.

Пример :

Результат :

Картинка как фон

На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

Вот теперь точно все. Переходим к следующему уроку.