Помогая другим, помогаешь себе.
Создадим реальнyю виртyальность !
Урок 6: вставляем картинки.
Изображения - это
неотъемлемая часть любого сайта в сети
интернет. Они используются везде, поэтому
давайте разберемся что к чему.
Пара слов о форматах:
GIF - использует всего
256 цветов и соответственно лучше подходит
для рисунков с малым количеством
оттенков. Этот формат поддерживает
прозрачность изображений.
JPEG - формат изображений,
который использует до миллиона цветов.
Обычно используется для фотографий и
качественной графики(с огромным
количеством оттенков).
PNG - сравнительно новый
формат . По многим параметрам превосходит
JPEG и GIF: миллионы цветов и эффективное
сжатие. Также поддерживает прозрачность.
В каком формате брать
изображения - дело Ваше, однако старайтесь
добиться максимального качества при
минимальном размере, чтобы ваш сайт
быстрей открывался.
Вставить изображение
на страницу очень просто. Для этого
нужно в папке рядом с вашей страничкой
создать ещё одну папку и назвать её img
(вы эту папку можете назвать как угодно,
главное запомнить что именно в ней у
вас находятся картинки к сайту). И в эту
папку размещаем картинку (картинку я
назвал dog).
Затем в нашем документе
пишем:
А в браузере вместо
текста отображается картинка:
Как вы заметили всё
очень просто!!!
Теперь рассмотрим
необходимые атрибуты:
ALIGN - определяет способ
выравнивания картинки по горизонтали.
Очень полезное свойство при обтекании
картинки текстом. Обычно используют
LEFT (выравнивание по левому краю, текст
будет обтекать справа) и RIGHT (выравнивание
по правому краю, текст обтекает слева)
.Если на странице есть текст, то это
обязательное свойство.
HSPACE и VSPACE - отступы в
пикселях по горизонтали и по вертикали
от картинки до других объектов документа.
Легко запомнить название если взять и
просто перевести с английского. HSPACE -
Horizontal Space - горизонтальный отступ и
VSPACE - Vertical Space - вертикальный отступ.
HEIGHT и WIDTH - высота и
ширина изображения в пикселях. Золотое
правило web-мастера – всегда явно задавать
размеры картинки в атрибутах HEIGHT и
WIDTH, резервируя тем самым место в окне
браузера еще до загрузки изображения.
В противном случае документ при загрузке
каждой картинки будет заново
перерисовываться. А на медленных машинах
(или при подключении к сети через модем)
это смотрится просто отвратительно. Но
в принципе, можно и не задавать размеры,
просто будет дольше загружаться. И еще,
не советую Вам искажать реальные размеры
картинки.
Теперь рассмотрим всё
на примере:
<!-- первый пример с отступами и выравниванием по левому краю-->
<p align="justify"> <img src="/img/dog.jpg" width="150" height="113" hspace="15" vspace="15" align="left">
На этом примере width означает ширину картинки, а height высоту. hspace
зазор между текстом и картинкой по горизонтали, а vspace по вертикали. Таким образом картинка расположена слева, а с права её обтекает текст с зазором в 15 пикселей. Я советую располагать изображения именно так. </p>
<!-- второй пример с отступами и выравниванием по правому краю-->
<p align="justify"> <img src="/img/dog.jpg" width="150" height="113" hspace="15" vspace="15" align="right">
На этом примере width означает ширину картинки, а height высоту. hspace зазор между текстом и картинкой по горизонтали, а vspace по вертикали. Таким образом картинка расположена
с права, а слева её обтекает текст с зазором в 15 пикселей. Я советую располагать изображения именно так.</p>
<!--третий пример без отступов, с выравниванием по левому краю-->
<p align="justify"> <img src="/img/dog.jpg" width="150" height="113" align="left">
На этом примере width означает ширину картинки, а height высоту. Зазоров между картинкой и текстом нет. Я не рекомендую так делать, потому что при маленькой скорости интернета страница будет открываться значительно дольше. </p>
|
В браузере это будет
так:
Теперь поговорим о
термине TITLE, если его добавить и написать
пояснение как в примере:
<img src="/imgs/dog.jpg" width="150" height="113" title="Моя собака ">
|
то при наведении на
него мышкой будет высвечиваться
комментарий к картинке. В примере: Моя
собака.
Теперь сделаем из
картинки ссылку, это применяется в
основном для рекламы или баннеров:
Для этого нужно в простой
ссылке заменить текст на адрес картинки
и всё. Вот как на этих примерах:
<a href="index.html"><img src="/img/dog.jpg" width="65" height="59" border="0"></a>
<a href="index.html" target="_blank"><img src="/img/dog.jpg" width="65" height="59" border="0"></a>
|
В первом варианте ссылка
откроется в этом же окне, а во втором
варианте в новом окне. При этом добавлю,
что border писать не обязательно, но
желательно, так как без него картинка
будет в рамке.
Вот мы и разобрались с
изображениями.
