Для того, чтобы изображение (картинка) появились на нашем экране (в Новой записи блога или в комментарии) мы должны написать код этого изображения.
Код изображения - это, заключенный в угловые скобки
тег IMG от английского слова "image" - изображение.
Параметры тега IMG
1. Параметр SRC
Главным атрибутом тега IMG является параметр SRC от английского слова "source" - источник.
Вы спросите - а что это за Адрес?
Если картинка хранится на вашем компьютере, то прежде всего ее надо куда-то загрузить в интернет, на один их хостингов - хранителей изображений.
Это всем известный Радикал, Фото@Mail.Ru, Яндекс фотки, ImageShack.us и многие другие...
После загрузки изображение получит свой законный АДРЕС вида ( http:// ), который мы и внесем в наш код.
ВАЖНО!!! При вставке в код Адреса между Адресом и кавычками в начале и конце
НЕ ДОЛЖНО БЫТЬ ПРОБЕЛОВ. Оставите пробел - и картинка не появится.
А как узнать АДРЕС чужого изображения, например, красивого фона, найденного в интернете, чтобы вставить его в код своей рамочки???
Наводим курсор на изображение, жмем на правую кнопку мыши, и из открывшегося меню выбирает "СВОЙСТВА". При этом открывается табличка, откуда мы можем узнать об изображении буквально все - его тип, адрес в интернете, размеры (ширину и длину в пикселях)
Если нам нужен адрес, например для фона, то мы наводим курсор на адрес, правая кнопка мыши, из открывшегося меню выбираем "Выделить все"...(при этом весь адрес синеет) и далее копируете этот адрес.
Описанный выше прием ( "Выделить все" ) я советую использовать всегда, когда нужно копировать любой код, код поста или рамочки, а не тянуть его от начала до конца.
Итак, "вернемся к нашим баранам".
Какие еще параметры, кроме адреса может включать код изображения???
Это прежде всего размеры "width" (ширина) и "height" (высота).
2 Параметры "width" (ширина) и "height" (высота).
Значения этих параметров может быть
- в пискелях. Например: width="100" height="100"
- в процентах от ширины отведенной для картинки области (ленты записей в блоге).
Например: width="50%" означает, что картинка займет половину ленты записей
(в Блогах по моим расчетам это примерно 820-830 пикселей, а на ЛиРу ширина такой области равно 700 пикселям). Это важно знать, если мы, размещая в своей записи много фотографий разного размера, хотим получить красивый пост и выровнять все фотки по ширине.
При этом код изображения будет выглядеть так:
Меняя эти параметры мы сможем легко отмасштабировать изображение - увеличить его, или уменьшить.
Но ГЛАВНОЕ СОБЛЮДАТЬ ПРОПОРЦИИ.
Позволю себе напомнить формулу пропорциональности из школьного курса.
Если W - ширина, а H - длина изображения
W1 H1
W2 X
X=(W2 * H1) / W1
Например, наша картинка для width = height = "50", "100", "150", "200" будет выглядеть так:
width="50" height="50
width="100" height="100"
width="150" height="150
width="200" height="200"
Здесь мы видим, что сильно увеличивать картинку нельзя, т.к. теряется качество изображения.
3. Параметр "border" .
Что это такое, и для чего он нужен?
"Border" в переводе с английского - граница, определяет толщину рамки вокруг изображения.
Я советую обязательно прописывать этот параметр в код изображения даже если изначально код, который вы берете из Радикала его не содержит. Особенно это важно для картинок на прозрачном фоне формата PNG или GIF, которые используются как банеры, т.е. являются ссылками.
При отсутствии в кодах этих изображений параметра border="0" вокруг них образуется не красивая тоненькая рамочка.
Вы когда-нибудь видели разделители текста в тонкой синей рамке - вот это оно и есть.
Введем в код border="0" и рамочка пропадет.
А вот я сделала параметр border="5" и вокруг изображения появилась черная рамка шириной 5px
4 Параметр "title"
Заголовок изображения или всплывающая подсказка.
За заголовок изображения отвечает параметр "title" (в переводе с английского "название", "заголовок").
Заголовок - это текст, который будет "всплывать" при наведении на изображение мышкой.
Например, введем в код параметр title="Оптические иллюзии"
При наведении курсора на эту картинку должен появиться заголовок (всплывающая подсказка) "Оптические иллюзии".
Этот параметр очень важен, когда изображение используется как ссылка (банер). В него хорошо прописать название сайта, куда ведет эта ссылка, чтобы понять, а стоит ли на него нажимать.
Можно записать в Титле размеры изображений, их вес, а можно оставить шутливое сообщение типа
"Всем привет", введя в код картинки параметр title="Всем привет"
5. Параметр "alt"
За альтернативный текст отвечает параметр "alt" (сокращение от "alternative", переводе с английского "альтернативный").
Сначала объясню, что такое альтернативный текст.
Это - тот текст, который можно видеть, если изображение не загрузилась по какой-то причине.
В качестве альтернативного текста можно использовать все, что угодно. Как правило там пишут краткое описание, размеры в пикселях или в кБайтах, например alt=" (400x21, 1Kb)"
6. Параметр "align"
Этот параметр отвечает за выравнивание изображения.
("align" - в переводе с английского "выравнивание")
Для выравнивания по горизонтали используются значения
align="left" - прижимает картинку к левому краю поста или рамочки (Текст будет обтекать картинку справа)
align="right" - прижимает картинку к правому краю соответственно (При этом текст будет слева от картинки)
Для выравнивания по вертикали относительно текста используются значения
align="top" - текст выравнивается по верху картинки
align="middle" - текст выравнивается по центру картинки
align="bottom" - текст выравнивается по низу картинки
Текст выравнивается
Я долгое время не могла понять как попроще сделать,
чтобы текст не прилегал плотно к картинке,
прижатой к левой стороне поста при помощи
параметра align="left"
7. Параметры hspace и vspace
Эти параметры регулируют отступ текста от картинки по горизонтали и вертикали соответственно.
Например, введя в код изображения параметры hspace="20" vspace="5", мы обеспечим, чтобы текст обтекал картинку не плотно, а отстоял от нее на 20px по горизонтали и на 5px - по вертикали.
=270094]источник
|
|
|
|
, 
, 
, 
.
