Как вставить картинку в HTML на своем сайте

Как вставить картинку в HTML на своем сайте

Добавление изображений на ваш сайт или профиль социальной сети — это отличный способ украсить вашу страницу. HTML (Hypertext Markup Language) отличается большим количеством функций веб-разработки, и при этом код, необходимый для добавления изображений, является довольно простым.

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

Загрузите вашу картинку на сайт бесплатного хостинга изображений, например, Photobucket или TinyPic, которые обеспечивают постоянный доступ к загруженному файлу. После копирования ссылка на изображение появится непосредственно на сайте хостинга. Вместе с тем, если вы оплачиваете премиум-услуги такого сервиса, лучше использовать дополнительные возможности. Это более надежно, поскольку на бесплатных хостингах изображений картинки иногда не открываются по причине перегрузки. После того как вы «залили» картинку на один из онлайн-сервисов, откройте на своем компьютере новый документ в текстовом редакторе (например, в Notepad) или зайдите на панель редактирования нужной страницы вашего сайта (где вы сможете изменить код HTML).

Продолжая говорить о том, как вставить картинку в HTML, начните с тега IMG. После него вы должны добавить пробел и знак слэш перед закрывающим символом. Таким образом, вы должны набрать следующую комбинацию —< img />. Кроме этого, существует множество доступных атрибутов, но только один из них является абсолютно необходимым. Таковым является адрес или URL вашего изображения. Он указывается следующим образом — < img src ="URL_вашей_картинки" / >.

Далее, пытаясь вставить картинку в HTML, вы должны добавить атрибут Alt. Это определяет альтернативный текст в том случае, если изображение не загружается. Такой текст также предназначен для слабовидящих пользователей, которые используют программы чтения с экрана. Если навести курсор мыши на изображение, альтернативный текст отобразится во всплывающей подсказке, однако эта функция присутствует только в Internet Explorer. Для того чтобы увидеть его в других приложениях, потребуются специальные плагины. Чтобы ввести такую всплывающую подсказку, введите ее в дополнение к Alt. (Вы можете по желанию пропустить этот шаг). Если вы используете эту функцию, ссылка будет выглядеть следующим образом:

Размеры и параметры картинки

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

Значение для этих атрибутов является либо положительным значением пикселей, либо процентным соотношением с оригиналом (1-100%). Говоря о том, как вставить картинку в HTML, также можно отметить, что она может быть размещена в любом месте веб-страницы с атрибутом выравнивания — верхний, нижний, средний, правый, левый и т.д. Атрибут HSPACE используется для вставки изображений по горизонтали по левой и правой стороне, VSPACE — для загрузки по вертикали между верхней и нижней частью страницы и относительно другого содержимого. Если говорить в общем о HTML – как вставить картинку, и как дополнить контент страницы, главное – не переусердствовать. В противном случае ваш ресурс будет выглядеть неаккуратно и слишком «пестро». Для отображения логотипов или анимации формат GIF будет лучшим решением, а для качественных картинок и фотографий больше подходит формат JPEG.

Дополнительные операции с изображениями

К картинке принято устанавливать описание, которое покажется при наведении:

По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0

Чтобы узнать как установить ссылку на изображение читайте следующую статью.

Как вставлять картинки и производить их позиционирование в HTML

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

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

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

Если вам нужны различные графические элементы то можете зайти в раздел Графика для сайтов, там вы найдете уроки посвященные созданию web графики.

Ну а теперь о том как вставить картинку в html документ. Для вставки изображений используется тег . Этот тег не имеет закрывающего тега. Вставка изображений при помощи его осуществляется следующим образом:

В кавычках необходимо указать путь к этому изображению.

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

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

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

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

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

Существуют следующие значения этого атрибута:

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

Картинка будет прижата к правому краю, а текст будет обтекать ее слева.

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

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

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

Следующий атрибут, определяющий положение изображения называется vspace=»». Он определяет расстояние между текстом и изображением по вертикали. В кавычках указывается любое необходимое значение в пикселях.

Расстояние между текстом и изображением по горизонтали определяется атрибутом hspace=»».

Следующие атрибуты это width=»» определяет ширину картинки и height=»» определяет высоту картинки. Если вы их не пропишите картинка все равно отобразится и будет того размера как она и есть. Но лучше всего прописывать ширину и высоту картинки. Например, для нашей картинки это будет выглядеть так:

Следующий атрибут очень важен в плане поисковой оптимизации вашей страницы. Это атрибут alt=»» где в кавычках указывается описание картинки. Поисковые системы обращают внимание на то, что написано между кавычек. Это описание будет отображаться, если подержать курсор над картинкой несколько секунд. Для нашей картинки можно прописать так:

Ну и последний атрибут это border=»» определяет ширину рамки вокруг картинки. В кавычках указывается ширина рамки, например, так:

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

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

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

Полный код страницы будет следующий:

Таким образом, мы расположили наше первое изображение слева, тест его обтекает справа, задали отступы между изображением и текстом в 10 пикселей, указали его высоту и ширину, а в качестве фона задали еще одно изображение.

Вставка изображений с помощью img и через css

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

И когда кто-либо загружает вашу веб-страницу, именно браузер, фактически в этот момент, получает изображение с сервера и вставляет его в отведенное место ().

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

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