 Автор урока
 В La_Perla
( Маргарита )
ВСЕ О КОДЕ
ИЗОБРАЖЕНИЯ
Для того, чтобы изображение (картинка) появились на нашем экране (в
Новой записи блога или в комментарии) мы должны написать код этого
изображения.
Код изображения - это, заключенный в угловые скобки
тег 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" class="pad_right" - прижимает картинку к правому краю
соответственно (При этом текст будет слева от картинки)
Для выравнивания по вертикали относительно текста используются
значения
align="top" - текст выравнивается по верху картинки
align="middle" - текст выравнивается по центру картинки
align="bottom" - текст выравнивается по низу картинки
Текст выравнивается
по верху картинки по
верху картинки
по центру по
центру
по низу по
низу
*******
Я
долгое время не могла понять как попроще сделать,
чтобы текст не прилегал плотно к картинке,
прижатой к левой стороне поста при помощи
параметра align="left" так, как вы видите сейчас на картинке.
И, наконец, волшебные параметры, были найдены!!!
7. Параметры hspace и vspace
Эти параметры регулируют отступ текста от картинки по горизонтали и
вертикали соответственно.
Например, введя в код изображения параметры hspace="20" vspace="5",
мы обеспечим, чтобы текст обтекал картинку не плотно, а отстоял от
нее на 20px по горизонтали и на 5px - по вертикали.
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
Привет Привет Привет Привет
P.S. Все параметры вставляются в угловые скобки тега IMG через
пробел в произвольном порядке.
Однако, лично я предпочитаю, чтобы первым шел - №1 src="Адрес" , а
последним №3 border="0" , а между ними - как получится.
Ну вот, пожалуй и все
Удачи в творчестве.
С уважением La_Perla
(Маргарита).
При написании поста частично использовалось сообщение Rost
|
La_Perla — 11.04.2010
Круглые переходы для воздуховодов: надёжные решения для эффективной вентиляции 
Новости архитектуры и реставрации. Обзор интересных публикаций 
Кэти Остин позирует в купальниках 
Дарт Вэйдер 
Фото дня 
Города Италии. Эмилия-Романья. Часть 1 
Первомайский хлеб из "Перекрёстка" 
Издержки неопопулизма 2025 
12 кадров. Встречные 
