Картинки в HTML

Суббота, 22 Июня 2013 г. 17:07 + в цитатник

Картинки в HTML

1.Как вставить картинку

Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

<img src="logo.jpg" />

Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:

<img src="images/logo.jpg" />

    Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее.

2.Указание размеров картинки

    Начнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:

width — ширина картинки в пикселах или процентах;

height — высота картинки в пикселах или процентах.

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

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

<img src="logo.jpg" width="50" height="20" />

или

<img src="logo.jpg" width="10%" height="5%" />

3.Альтернативный текст

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

<img src="logo.jpg" alt="Логотип сайта www.seoded.ru" />

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

4.Выравнивание картинки

    С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:

left — изображение располагается у левого края страницы, а текст обтекает картинку справа;

right — изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

    Например,

HTML-код картинки слева
<img src="logo.jpg" align="left" />

А этот

HTML-код картинки справа
<img src="logo.jpg" align="right" />

Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про форматирование текста в html). У тега BR есть атрибут clear, который может принимать три значения:

left — прекращение обтекания текстом картинок, выровненных по левому краю;

right — прекращение обтекания текстом картинок, выровненных по правому краю;

all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.

5.Создание отступов вокруг картинки

По-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:

vspace — создает верхний и нижний отступы;

hspace — создает боковые отступы (слева и справа).

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

<img src="logo.jpg" align="left" vspace="5" hspace="20" />

Сравни это с тем, как вся «композиция» выглядела раньше (выше).

6.Рамка вокруг картинки

Вокруг картинок можно создать чёрную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код

<img src="logo.jpg" border="5" />

в браузере выглядит так

7.Заключение

На этом раздел о тегах HTML, которые нужны для вставки картинок на страницы сайта можно считать завершенным.
more]

Серия сообщений "Мои уроки":
Часть 1 - Картинки в HTML
Часть 2 - Утилита Unlocker
Часть 3 - Проект"Улыбка Онлайн"
Часть 4 - Анимация воды плагином Flood v1.20

<a href="https://www.liveinternet.ru/users/4383415/post280870118/">РљР°СЂС‚РёРЅРєРё РІ HTML</a><br/>

РљР°СЂС‚РёРЅРєРё РІ HTML

1.РљР°Рє РІСЃС‚Р°РІРёС‚СЊ РєР°СЂС‚РёРЅРєСѓ

В В В  Р”Р»СЏ РІСЃС‚Р°РІРєРё РєР°СЂС‚РёРЅРѕРє РІ HTML РёСЃРїРѕР»СЊР·СѓРµС‚СЃСЏ С‚РµРі IMG СЃ РѕР±СЏР·Р°С‚РµР»СЊРЅС‹Рј Р°С‚СЂРёР±СѓС‚РѕРј SRC. РС‚РѕС‚ Р°С‚СЂРёР±СѓС‚ СѓРєР°Р·С‹РІР°РµС‚ Р±СЂР°СѓР·РµСЂСѓ РїСѓС‚СЊ Рє С„Р°Р№Р»Сѓ РёР·РѕР±СЂР°Р¶РµРЅРёСЏ. Рў.Рµ. РґР»СЏ РІСЃС‚Р°РІРєРё РєР°СЂС‚РёРЅРєРё СЃ РЅР°Р·РІР°РЅРёРµРј logo.jpg РІ РѕРїСЂРµРґРµР»РµРЅРЅРѕРµ РјРµСЃС‚Рѕ СЃС‚СЂР°РЅРёС†С‹ (РїСЂРё СѓСЃР»РѕРІРёРё, С‡С‚Рѕ Рё СЃС‚СЂР°РЅРёС†Р°, Рё РєР°СЂС‚РёРЅРєР° СЂР°СЃРїРѕР»РѕР¶РµРЅС‹ РІ РѕРґРЅРѕР№ РїР°РїРєРµ (РєР°С‚Р°Р»РѕРіРµ)) РЅСѓР¶РЅРѕ РІ СЌС‚РѕРј РјРµСЃС‚Рµ РІСЃС‚Р°РІРёС‚СЊ СЃР»РµРґСѓСЋС‰РёР№ html-РєРѕРґ:

Р•СЃР»Рё РєР°СЂС‚РёРЅРєР° Рё СЃС‚СЂР°РЅРёС†Р° СЂР°СЃРїРѕР»РѕР¶РµРЅС‹ РІ СЂР°Р·РЅС‹С… РєР°С‚Р°Р»РѕРіР°С… (РїР°РїРєР°С…), С‚Рѕ РЅСѓР¶РЅРѕ СѓРєР°Р·Р°С‚СЊ РїСѓС‚СЊ Рє РёР·РѕР±СЂР°Р¶РµРЅРёСЋ РѕС‚РЅРѕСЃРёС‚РµР»СЊРЅРѕ СЃС‚СЂР°РЅРёС†С‹. РќР°РїСЂРёРјРµСЂ, РµСЃР»Рё html-СЃС‚СЂР°РЅРёС†Р° Р»РµР¶РёС‚ РІ РєР°С‚Р°Р»РѕРіРµ (РїР°РїРєРµ) site, РІ СЌС‚РѕРј ... <a href="https://www.liveinternet.ru/users/4383415/post280870118/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Цитатник

-Метки

-Приложения

-Новости

-Ссылки

-Видео

-

-

-Музыка

-Рубрики

-Фотоальбом

-Поиск по дневнику

-Подписка по e-mail

-Интересы

-Друзья

-Сообщества

-Статистика

Картинки в HTML