Вставка изображения в документ html. Вставка графических изображений

Всем привет!!! По этой статье вы научитесь вставлять картинку в 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", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

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

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

Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображений, посмотрим как задать обтекание фотографии текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять их размер и задавать выравнивание (по центру, влево и вправо).

Использование тега Img и его атрибутов Src, Width и Height

Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом , к которым относятся всего лишь четыре , одни из которых мы уже упомянули, а три остальных — (современный вариант использования фреймов), (для вставки видео и другого медиа контента).

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

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

Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.

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

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

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

На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).

Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, .

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

Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и , о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.

Т.е. Src может содержать, например, следующие записи:

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

Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.

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

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

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

Ru/image/webcamxp.png">

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

Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt .

Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

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

Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.

Делается это с помощью специального атрибута Title , который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.

Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.

Pngя" height="71" width="90" alt="" title="">

На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.

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

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить , а так в сервисах . Однако с этим нужно быть осторожным , ибо довольно легко можно попасть под .

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align . Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.

Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах ( и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align="bottom" ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align="top":

Png" align="top">

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

Возможно еще одно значение этого атрибута align="middle" :

Png" align="middle">

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

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right . Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится и текст начинает ее обтекать.

Например, при align="left" мы получим такой результат:

Png" align="left">

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align="right" картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

Png" align="right">

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

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace . С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в , например:

Png" align="left" hspace="30" vspace="30">

Background — как сделать фон для сайта в чистом Html

Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в с использованием свойств CSS являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.

Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и , показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).

Например, добавив в Body атрибут Background следующего вида:

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

Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor , в качестве значения которого вы может вставить , например, так:

То получим следующий цвет фона заданный через bgcolor:

Точно так же, как и в случае с атрибутом background, bgcolor можно еще использовать и для задания фона всей таблицы или же отдельных ее элементов.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)

Визуальная часть является одним из важнейших аспектов при работе с сайтами. Она, конечно, уступает функционалу, но не следует скидывать ее со счетов раньше времени. Сегодня речь пойдет о том, как установить изображение HTML на свой сайт. Для этого существует только одна возможность или несколько? Как вставить на сайт изображение HTML, чтобы его могли видеть другие пользователи? Что лучше использовать для этой цели – сервер или компьютер? Что представляет собой язык HTML? Данную аббревиатуру можно расшифровать следующим образом: язык разметки гипертекстовых документов.

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

Как использовать тег img?

Перейдем к вопросу использования графики. Каким образом можно вставить в HTML-документ изображение? Прежде всего под данной операцией имеют в виду вставку файла в качестве отдельного объекта страницы. Для такого добавления и используется тег img. Данный тег относится к строчным элементам, в которых присутствует замещаемый контент. К нему относят всего четыре части языка гипертекстовой разметки. Одна из них – src, height, width. О них речь пойдет далее. Другие части – это object, embed, iframe. Тег работает таким образом, словно в нем присутствует строчный элемент. Разница заключается в том, что используется посторонний внешний контент, который отображается. При этом должен обязательно присутствовать сторонний файл, который будет подгружаться. Если у вас имеются вопросы о восстановлении фонового изображения в HTML, то их лучше сразу отбросить. Отображаться оно будет только тогда, когда работает компьютер, на котором находится изображение.

Использование атрибута src

Прорабатываем вопрос о вставке в документ HTML графического изображения. Чтобы указать путь к рисунку, который должен будет подгружаться, применяют src. Общая схема выглядит следующим образом: необходимо использовать данный атрибут, знак равно и прописать адрес. Когда при разборе HTML браузер дойдет до тега, он создаст область, в которой будет отображен строчный элемент. В него в дальнейшем и будет грузится внешний файл. Данный путь не должен содержать ошибок, поскольку именно в нем будет идти программа. Если данная программа не найдет файл, то будет отображен значок ошибки, что выглядит не слишком эстетично.
Для того, чтобы вставить изображение в таблицу документа HTML, необходимо прописать в нужной ячейке весь необходимый код.

Настройка изображения

Теперь вы знаете, каким образом можно вставить изображение в HTML. Разберемся, каким образом его можно настроить. Когда файл начнет загружаться на компьютер пользователя, будет автоматически определен размер картинки. Если начальные параметры файла не соответствуют желаемым, то в данном случае смогут помочь параметры width и height, которые указываются в пикселях. Код в данном случае будет прописываться следующим образом: src, а затем адрес файла. По похожей инструкции также указывается width и задается ширина, которая должна быть. Последним параметром является height и высота. Довольно часто вебмастера допускают следующую ошибку: они загружают на сервер один большой файл, размер которого достигает нескольких Мб. Затем прописывают путь и корректируют изображение до нужного размера. Таким образом пользователь может наблюдать, как небольшое изображение подгружается очень медленно. Со стороны это выглядит не слишком привлекательно.

Рекомендации по работе

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

Пример возможностей записи

Рассмотрим, каким образом, можно прописать путь к изображению.

1.Задать только имя файла;
2. Указать адрес изображения, которое находится на локальном компьютере (сервере);
3. Детальный путь к месторасположению файла, который находится на другом хосте.

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

Назначение alt и title

Что делать, если по какой-то причине графический файл не загружается вместе с документом HTML? В случае если он неправильно прописан, нужно использовать атрибут alt. Данный атрибут выполняет задачу альтернативного представления картинки. Допустим, что графика не грузится, но при этом браузер все равно будет формировать область для изображения. Это также необходимо в тех случаях, когда пользователь ожидает подгрузки и необходимо показать ему, что программа готовится принять графику. Чтобы продемонстрировать сопровождающий текст, необходимо использовать атрибут title. Это по сути просто всплывающая подсказка, ее можно использовать практически для любого видимого элемента HTML-кода. Это неплохо, поскольку позволяет пояснить некоторые отдельные аспекты. Использование двух атрибутов, приведенных в данном подзаголовке, выглядит следующим образом: после height к рассмотренному ранее примеру сначала добавляется alt, а затем title, Данные атрибуты могут служить не только для обеспечения удобства посетителя. Они также могут положительно сказаться на продвижении сайта. По этой причине следует постоянно применять в них ключевые слова. Это улучшит ранжирование ресурса в сервисах картинок поисковых систем и рейтингах сайтов. Однако во всем нужно придерживаться рациональности и осторожности.

Выравнивание картинок

Для всех четырех элементов языка разметки, упомянутых ранее, был введен атрибут align. С помощью данного атрибута можно легко поменять месторасположение картинки. Она по умолчанию выравнивается по нижнему краю. Отвечает за это bottom. Как сделать выравнивание по верхнему краю? Для этого необходимо использовать top. На практике это будет выглядеть так: после атрибута src, где пользователь указывает адрес изображения, добавляется атрибут align и его значение. В строке, в которой расположена картинка, она будет выровнена по верхнему краю. Как выставить по центру изображение в HTML? Имеется еще одна возможность выравнивания изображения middle. При использовании данной функции ничего кардинально не изменится.

Рисунок при использовании такого кода будет выровнен посередине. Можно сделать таким образом, чтобы текст обтекал картинку. Для этого используются атрибуты left и right. Изображение в таких случаях становится плавающим. Смещение влево выглядит таким же образом, как и другие варианты написания. Использование атрибута right приносит подобный результат, но с одним отличием: картинка будет размещаться справа. Использование данных конструкций имеет свои особенности. Так, например, одной из важных проблем является слишком близкое расположение текста к изображению. В результате создается так называемый эффект прилипания, который очень неприятен для глаз. Это можно исправить за счет использования HTML-кода или каскадной таблицы стилей. Для таких изменений необходимо использовать атрибуты hspace и vspace. Первый задает отступы справа и слева, а второй – снизу и сверху.

Как задать фон

При вставке изображения на HTML страницу сайта, атрибут background является очень полезным. Данный атрибут является составляющей элемента body. Предназначение заключается в том, чтобы задать путь к графическому файлу, который должен заливать отдельную ячейку, таблицу или страницу. Использование данного объекта на практике выглядит следующим образом: адрес используемого изображения прописывается как значение параметра bodybackground. Установленное таким образом фоновое изображение, будет повторяться по осям абсцисс и ординат, начиная с верхнего левого угла.

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

Если все же у вас нет Notepad++ или проблема с его скачиванием и вас мучает вопрос - как вставить картинку в html в блокноте?

Ответ прост, работа в обычном блокноте отличается лишь тем, что в нем отсутствует подсветка кода разными цветами, для удобочитаемости и разделения кода от самого текста.

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

После установки редактора, в контекстном меню, выпадающем по правому клику на любой файл, появится соответствующий пункт.

Теперь для редактирования такого файла достаточно вызвать контекстное меню правым кликом по нему, далее «Edit with Notepad++».

Для наблюдений результатов изменений в коде будет использована тестовая страница.

Чтобывставить картинку в htmlкод используется одиночный строчный тегimg . Основной его атрибут – источник фото.

Это может быть любой файл, на жестком, так и ссылка на существующее в сети изображение. Обрамляется тегами< p>p> .

Для добавления фото, понадобится вписать такую строку:

.

Вот так она будет выглядеть в редакторе:

А вот так ее наличие отобразится на странице:

Src указывает на источник картинки. Одного названия файла достаточно, если файл с изображением находится в одной с документом html директории.

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

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

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

Таблица форматирования пути к файлу

Чтобы изменить размер изображения понадобится добавить два атрибута:width иheight . Значение оформляется так же, как и для любого атрибута.

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

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

Выравнивание и редактирование картинки

Как вставить фото в html по центру? Для назначения положения картинки на странице служит align , относящий к тегуp .

Для него допустимо несколько значений:center (центр),left (левый край) иright (правый край).

Вот выглядит изображение на странице с прилеганием к центру и правому краю.

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

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

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

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

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

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

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

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

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

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

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

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

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

	Описание
src =””	Указатель источника изображения. Может использоваться как сохраненное на жестком диске, так и размещенное в сети (указывается адрес вместо расположения на жестком диске).
width =””; height=””	Указатели высоты и ширины изображения. Если задан только один, то второй автоматически масштабируется, в соответствии с первым. Числовое значение означает количество пикселей.
align= ””	Атрибут расположения изображения относительно текста. Допустимые значения:top, middle, bottom, left, right .
border =””	Назначает рамку вокруг изображения. Числовое значение соответствует толщине рамки в пикселях.
vspace =””; hspace=””	Указатели отступа от соседних элементов по вертикали и горизонтали. Значение указывает количество пикселей между элементами. При обтекании текстом, атрибут назначает расстояние до текста.
alt =””	Назначает альтернативное описание на случай, если картинка почему-то не прогрузилась. Значение произвольное.
title =””	Задает текст подсказки при наведении. Значение произвольное.

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

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

Основы HTML. Как вставить изображение на интернет-страницу

Как вставить картинку в HTML - редактирование, выравнивание, атрибуты

Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.

Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!

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

В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.

§ 1. Как вставить картинку

Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

src="logo.jpg">

Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:

images/logo.jpg">

А можно не мучиться и указать полный адрес картинки . Например, так:

http://www..png">

В последнем случае браузер отобразит код так:

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

П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.

§ 2. Указание размеров картинки

Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:

• width - ширина картинки в пикселах или процентах;


• height - высота картинки в пикселах или процентах.

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

Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

width="50" height="20">

width="10%" height="5%">

§ 3. Альтернативный текст

В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :

В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :

П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.

§ 4. Выравнивание картинки

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

• left - изображение располагается у левого края страницы, а текст обтекает картинку справа;


• right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

Н апример, HTML-код

браузер покажет так

А этот HTML-код:

будет выглядеть вот так:

Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:

• left - прекращение обтекания текстом картинок, выровненных по левому краю;


• right - прекращение обтекания текстом картинок, выровненных по правому краю;


• all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.