5.0 0.5 5 46

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

bysknop
bysknop
19 декабря 2014
188
Оцените:
Как вставить картинку в html?

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

Теги картинок

Тег, который отвечает за вывод изображения на сайте, является универсальным для всех версий html. Это тег <img>. Он может немного по-разному оформляться, но суть остается прежней.

Например, в html вы можете просто использовать одиночный тег <img>. В xhtml все теги должны быть закрытыми. Поэтому в конце тега вы должны поставить правый слеш: <img />.

Атрибуты тега картинок

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

  • Ключевой атрибут - src. Он указывает адрес картинки, которую вы хотите загрузить на веб-страницу. Пример для html будет выглядеть так: <img src= 'http://mysite.ru/picture.png'> Пример для xhtml будет выглядеть следующим образом: <img src= ”http://mysite.ru/picture.png”/>
  • Еще два атрибута касаются размеров изображения. А именно атрибут width предлагает определить ширину, а height, соответственно, высоту картинки. Пример для html: <img src='picture.png' width ='300' height='100' > Для xhtml: <img src=”picture.png’ width =”300” height=”100” /> Дальнейшие атрибуты целесообразно прописывать для какого-то одного языка программирования, так как везде прослеживается четкая аналогия.
  • Атрибут alt должен включать краткое описание картинки. Данный текст появляется в том случае, если картинка не загрузилась или если пользователь ищет информацию через поисковик в разделе «Картинки». Пример строчки кода: <img src='picture.png' alt ='Интересная картинка' >
  • Title дает заголовок картинке. Он также важен при поиске пользователем необходимой информации. <img src='picture.png' title ='Картинка'>
  • Атрибут vspace задает отступ по вертикали между картинкой и другими элементами разметки (например, текстом). Значение измеряется в пикселях.
  • Атрибут hspace задает такой же отступ, но уже по горизонтали. Значение также измеряется в пикселях. Пример для двух последних атрибутов: <img src='picture.png' vspace ='5' hspace = '5'>
  • С помощью атрибута border картинка очерчивается рамкой. Если значение специально не выставлено, то по умолчанию значится 0. Пример: <img src='picture.png' border ='1' >

Дополнительные возможности для картинок

Картинку можно не только вставить в текст веб-страницы, но и сделать фоном. Картинка-фон это атрибут тега body или стиль css. Подробнее о том, как вставить картинку в фон вашего сайта, вы узнаете в статье Как сделать фон в html.

Вы можете вставить картинку в таблицу. Тогда картинка будет фоном не для всей страницы, а лишь для определенной области. И при этом место изображения будет зафиксировано, независимо от окружающего текста. Для этого необходимо создать таблицу html. Напомним, тег таблицы - table, тег строки - tr (строка), тег колонки - td.

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

  • <table border= ‘0’>
  • <tr align=’left’>
  •    <td><img src=’picture.png’></td>
  •    <td> 2-я ячейка </td>
  •  </tr>
  • <tr align="right">
  •    <td> 3-я ячейка </td>
  •     <td> 4-я ячейка </td>
  •  </tr>
  • </table>
Подписывайтесь на наши группы в социальных сетях - смешные статьи, картинки и факты!