«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Графика является важной составляющей Интернет. Без графических изображений не обходится ни один сайт. Различные фотографии, иконки, значки, кнопки, рекламные баннеры и т.д. и т.п. являются неотъемлемыми элементами современных веб-страниц.



Как вставить изображение?

В основном на страницах размещают изображения в одном из трех графических форматов: gif, jpg/jpeg или png (подробнее здесь...).

Для вставки изображения на веб-страницу предназначен тег <img> и его обязательный атрибут src, который указывает адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...).

Атрибут align тега <img> позволяет разместить изображение справа или слева относительно текста и других элементов страницы, либо расположить его определенным образом относительно базовой линии текущей строки.

Фрагмент кода
<p> <img src="img/peng.gif" align="middle"> Выравниваем изображение по базовой линии текущей строки. </p>
Результат

Вставляем изображение Выравниваем изображение по базовой линии текущей строки.

Рамка вокруг изображения

Атрибут border тега <img> позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.

Фрагмент кода
<p> <img src="img/peng.gif" align="middle" border="2px"> Изображение заключено в рамку, толщиной 2 пикселя. </p>
Результат

Рамка вокруг изображения Изображение заключено в рамку, толщиной 2 пикселя.

Размер изображения

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

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

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

Фрагмент кода
<p>
<img src="img/peng.gif" height="32" width="32">
<img src="img/peng.gif" height="64" width="64">
<img src="img/peng.gif" height="128" width="128">
</p>
Результат

Размер изображения Размер изображения Размер изображения

Отступы от изображения

Отступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно.

Отступы задаются в пикселях.

Фрагмент кода
<p> <img src="img/peng.gif" align="left" border="2px" hspace="50px"> В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 50 пикселей. </p>
Результат

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

Альтернативный текст и всплывающая подсказка

При помощи атрибута alt тега <img> к изображению добавляют альтернативный текст.

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

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

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

Фрагмент кода
<p><img src="img/peng.gif" align="left" border="1px" alt="Альтернативный текст" title="Пингвин думает!" hspace="50px"> Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст". </p>
Результат

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

HTML по шагам

Все теги HTML
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта