загрузка...

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

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

как вставить картинку в html на фон

К тому же, ближе к концу статьи мы расскажем о том, как поставить картинку на фон сайта html, что тоже весьма полезно и привлекательно. Инструкция будет изобиловать наглядными примерами, так что добавляйте это руководство на сайте Kak Club в избранное, что бы не потерять и иметь возможность подглядывать как в шпаргалку. Ну что ж, давайте переходить к конкретике или о том как поставить пароль на папку читать.

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

1 – тег img.Чтобы понять, как вставить картинку в таблицу html нужно будет воспользоваться тегом img. В этот тег вы вставите ссылку на вашу картинку, при этом важно помнить, что тег не требует закрытия. То есть не правильно. Правильно так:

kak_vstavit_kartinku_v_tablitcu_html_1

Сложности возникают и с правильным размещением ссылки. Можно указывать абсолютный путь к картинке или относительный, с учетом места на хостинге, куда изображение залито. Сейчас объясним подробнее. Если изображение находится в главной директории (в корне), то тег можно заполнить так:

kak_vstavit_izobrazhenie_v_html_2

Если изображение находится, например, в папке img (а именно так чаще всего и бывает), то пишем так:

kak_vstavit_kartinku_v_html_po_centru_3

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

kak_vstavit_kartinki_v_html_4

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

2 – атрибуты. Двигаемся дальше. Вы прочитали, что написано выше, попробовали и у вас получилось, вы рады и довольный собой. Но появилась новая задача – узнать, как вставить картинку в html по центру, например, или установить отступ в несколько десятков пикселей от текста. Эту задачу можно решить несколькими путями, самый простой, но не самый «грамотный» — использовать атрибуты.

Атрибуты вставляются в сам тег и в них указывается позиция или какое-нибудь цифровое значение. Например, так:

kak_postavit_kartinku_v_html_po_centru_5

align=’left’ сообщает о том, что изображение будет выровнено по левому краю и будет обтекаться текстом. Width и height говорят о отображаемых размерах фотки, это нужно если вы залили бОльшего размера чем нужно и теперь хотите «подогнать» под дизайн страницы. Теперь подробнее о том, какие можно использовать атрибуты, помогающие осознать, как вставить картинки в html. Вот название, краткое описание и возможные значения каждого атрибута:

width – ширина изображения – пишется само значение в пикселях, без указания px
height – высота изображения
border – толщина рамки, вокруг всего изображения. Указывается только цифровое значение в пикселях, как с шириной и высотой. Если у вас фото будет являться ссылкой (как это сделать расскажем чуть ниже), значит, рамка будет добавлена автоматически. Чтобы избавиться от нее, необходимо указать нулевое значение, например, так — border=’0′
align – указывает, куда будет прижато или как выровнено изображение и как оно будет обтекаться текстовым контентом. Есть 5 значений этого атрибута – bottom, left, middle, right, top. Так что если желаете понять, как поставить картинку в html по центру, то указывайте в теге img следующее — align=’middle’
alt – очень важный атрибут, крайне необходимый для оптимизации, страницы, для удобства работы с нею поисковых машин. Это текст для изображения, по которому его будут искать пользователи в сети. Не ленитесь заполнять этот атрибут. Остальные атрибуты не такие важные и используются крайне редко.
hspace — отступ от изображения по горизонтали
vspace — отступ от изображения по вертикали
longdesc – если к фотографии имеется расширенная аннотация, то ссылку на нее можно указать в этом атрибуте

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

3 — изображение-ссылка. В случае с баннером, подписью, или чем-нибудь еще, необходимо чтобы фотка вела на какую-нибудь страницу – ваш сайт, профиль и так далее. Как же сделать картинку ссылкой? Очень просто:

html_tegi_vstavit_kartinku_6

Прописали alt и добавили target=’_blank’ чтобы при клике на фото страница указанного сайта открывалась в новом окне. Если нужно закрыть ссылку от индексации поисковиками, добавьте noindex и nofollow. Например, так:

kak_vstavit_kartinku_v_html_kod_7

4 — атрибуты css. Конечно, возникают задачи, для решения которых не достаточно использовать указанные атрибуты и не достаточно знать, как вставить картинку в html код или как убрать webalta, нужно более точное позиционирование. Это можно сделать, если вставить в тег img атрибут style=» и указать в нем нужные команды css. Например, вот так:

kak_vstavit_izobrazhenie_v_tablitcu_html_8

Можно перечислять любое количество команд, главное разделять их точкой с запятой:

kak_vstavit_kartinku_v_tablitcu_html_9

5 – внешний css файл. Вставлять css в тег img конечно здорово, но почти всегда не удобно. На сайтах сотни изображений и в каждом указывать css команды долго и не правильно. По этому подключаем внешний css файл со всеми командами и, когда разбираемся, как вставить изображение в таблицу html используем идентификаторы или классы в связке с div или span. Вот как будет выглядеть ваш код:

kak_vstavit_izobrazhenie_v_html_10

А в вашем css файле на хостинге прописываете:

kak_vstavit_kartinku_v_html_po_centru_11

А потом, если нужно будет изменить цвет рамки, например, то вы не потратите несколько дней на то, чтобы руками «обойти» все теги img и подправить цвет. Вы просто измените показатели класса primercss в файле css и на этом работа закончится.

6 – изображение в фоне сайта. Мы уже подробнейшим образом рассказали о том, как вставить картинку в ячейку таблицы html, но не объяснили, как добавить изображение на фон. Хотя обещали. Делается все очень просто, больше времени потратите на подготовку паттерна (повторяющегося узора, разместив который стык в стык, получите цельный и красивый фон без швов). Предположим картинку вы создали в фотошопе или сгенерировали онлайн на одном из сайтов по генерации паттернов. Может быть даже на этом bgpatterns.com.

Заливайте паттерн в папку img на хостинге и находите в html файле тег body. Прописываете туда pattern.jpg:

kak_vstavit_kartinki_v_html_12

Разумеется, то, что уже в теге прописано не удаляете, просто добавляете один атрибут. Либо открываете ваш файл css и прописываете фон туда:

kak_postavit_kartinku_v_html_po_centru_13

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

Нравится   0
Еще инструкции на эту тему
kak_smotret_televizor_cherez_internet

Как смотреть телевизор через интернет

thumb_PeQeDSWk6M80

Как узнать кто оставил мнение в контакте

kak_otkryt_reestr_windows_7

Как открыть реестр

thumb_Kak-sdelat-usilitel-zvuka

Как сделать усилитель звука

загрузка...

Высказать свое мнение