Теги HTML для вставки картинки, изображения в HTML. Как вставить картинку в HTML — редактирование, выравнивание, атрибуты

Доброго всем времени суток, мои дорогие друзья, читатели и гости моего блога. Вроде отпуск, а времени ни на что не хватает. Всё как-то впопыхах. Но это явление временное, скоро всё устаканится. А с вами мы сегодня продолжим постигать азы html. Друзья, как вы думаете, без чего любая интернет страница будет безликой, серой и скучной? Правильно, без графического наполнения, будь то фотографии, логотипы или фон.

Так вот, вставка картинки в html — это также одна из самых важный составляющих, поэтому ее непременно должен знать любой, кто собирается делать сайты самостоятельно. Вот именно этим мы сегодня и займемся всей этой вакханалией)))

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

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

В общем давайте смотреть на примере, чтобы закрепить всё это действие. Правильно я говорю? Загрузите материалы для урока и откройте html файл в блокноте. И теперь перед основным текстом напишите следующее:

Всё. Вот такая коротенькая запись обеспечит нас картинкой на нашем сайте. Попробуйте напишите ее в документе.

А теперь сохраните файл и запустите его в вашем браузере. Посмотрим, что у нас получится. У меня получилось так.

Атрибуты

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

Alt

Если вдруг картинка по какой-либо причине не прогрузилась или недоступна, что вы увидите текст, который был написан в значении атрибута Alt . Обычно здесь пишется то, что изображено на картинке, т.е. если изображено что-то про национальности, то и в alt лучше всего так и написать «Мужчины и женщины разных национальностей». На примере это выглядит так:

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

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

Width и Height

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

Width отвечает за ширину изображения, а в его значениях ставится сам размер. В общем если у вас есть картинка, например, 640*480 пикселей, а вам нужно отобразить ее на сайте 320*240, то вам просто нужно будет сделать следующее:

Всё. Теперь, когда вы сохраните документ и откроете его с помощью браузера, то вы увидите уменьшенную кртинку. Причем заметьте, мы изменили только параметр ширины, а картинка уменьшилась пропорционально, т.е. высота уменьшилась автоматически.

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

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

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

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

Align

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

Всего для align существует пять параметров:

• left — выравнивание по левому краю
• right — выравнивание по правому краю
• middle — выравнивание изображения по базовой линии строки (на примере увидите, что это значит)
• top — верхняя граница данного изображения выравнивается по высоте с самым высоким элементом в данной строке
• bottom — выравнивание нижней границы картинки по тексту

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

Ну а теперь сохраняем как обычно наш документ и смотрим, что у нас получилось. Ну что? Видите разницу? Теперь вы знаете, чем отличаются данные параметры).

Border

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

Hspace и Vspace

Ну и рассмотрим последние на сегодня атрибуты тега img. Space (англ.) переводится как пространство, космос, пробел (клавиша) и т.д. Приставки H и V означают горизонтальность и вертикальность. Тут вопросов не должно быть.

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

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

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

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

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

Ну а чтобы не пропустить всё самое интересное на моем блоге, то обязательно подпишитесь на обновления статей. Ну и конечно же посмотрите другие статьи. Я уверен, что вы найдете для себя много полезной информации. Удачи вам. Увидимся в других статьях. Пока-пока!

С уважением, Дмитрий Костин

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

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

Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.

на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.

И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег , у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:

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

Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:

• width — ширина картинки (можно указывать пиксели или проценты);
• height — высота картинки (можно указывать пиксели или проценты).

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

Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:

еще пример html-кода:

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

• left — картинка расположится слева, а текст, который рядом — справа;
• right — картинка расположится справа, а текст, который рядом — слева.

Приведу HTML-код:

Текст, радом с картинкой.

а браузер выведет следующее:

Текст, радом с картинкой.

HTML-код для значения right:

Текст, радом с картинкой.

на html-странице будет так:

Текст, рядом с картинкой.

Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:

• left — не обтекать текстом, который выровнем по левому краю;
• right — не обтекать текстом, который выровнем по правому краю;
• all — не обтекать текстом, который выровнем по левому и правому краям.

Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:

• vspace — делает верхнее и нижнее поля в пикселях;
• hspace — делает боковые поля (слева и справа) в пикселях.

Приведу простой html-код на примере:

Вот такая красивая картинка.

Что получится по данному примеру попробуй посмотреть сам.

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

на html-странице будет вот так:

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

Дата публикации: 15 мая, 2012

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

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

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