html картинка – послужит очень хорошим дополнением к тексту на любой веб странице. Иногда, только с помощью картинки, посетитель сайта сможет получить ту информацию, которую он ищет.

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

Поэтому, использование картинки, как элемента, web страницы, рекомендовано к использованию, а иногда, без картинки просто нельзя обойтись.

Единственным минусом картинки является тот факт, что в окне браузера, она открывается гораздо дольше, чем текст.

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

Итак, давайте посмотрим, как вставить картинку в html, для этого откроем html справочник.

Выберем в меню справочника последовательно пункты: «Теги по типам» - «Изображения» - «IMG».

Мы видим, что для отображения на web странице изображений используется тег «IMG». Вот синтаксис написания кода:

<img src="URL">

Параметр src, является обязательным, так ка этот параметр указывает путь к графическому файлу картинки.

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

<img src="URL" title="Всплывающая подсказка">

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

В этом случае, чтобы браузер отобразил на месте картинки альтернативный текст, для тега «IMG», применяется параметр alt.

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

Если картинку разместить в контейнере тега «A», то данная картинка станет ссылкой. В этом случае, кликнув на картинку, посетитель сайта перейдет на адрес ссылки.

Как вы помните, для изменения фона шапки сайта, мы использовали изображение header.jpg, полный путь к этой картинке: img\header.jpg

Давайте в качестве эксперимента, используя тег «IMG», добавим эту картинку в на нашу страницу.

Для этого, откроем файл нашей страницы блокнотом и вставим следующий html код:

<p><img src="img\header.jpg"></p>

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

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

Для выравнивания картинки относительно окна браузера и относительно текста, используется параметр align, который может принимать значения bottom, left, middle, right, top. По умолчанию, картинка выравнивается слева.

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

А теперь - важный момент! Картинка загружается гораздо быстрее, если размеры картинки будут указаны в параметрах, так как браузер не будет терять время на расчеты размеров картинки!

Размеры картинки задаются с помощью параметров height (высота) и width (ширина). Значения высоты и ширины картинок, это целые положительные числа, выраженные в пикселах – px.

Есть еще пара параметров тега «IMG», которые являются достаточно полезными и часто используемыми.

Это параметры, которые задают вертикальный и горизонтальный отступы от окружающего контента.

С помощью параметра hspace – можно менять расстояние до контента в горизонтальном направлении, а с помощью параметра vspace – в вертикальном направлении.

Аргументы параметров hspace и vspace так же, как и ширина с высотой, могут принимать целые положительные значения, выраженные в пикселах.

Перейти к Уроку 15: Меню для сайта

Перейти к Уроку 13:html ссылка