Воскресенье, 17.12.2017, 07:31
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

учебник HTML - Страница 8


Урок 6: вставляем картинки.



Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему.

Пара слов о форматах:

GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым количеством оттенков. Этот формат поддерживает прозрачность изображений.

JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).

PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.

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

Вставить изображение на страницу очень просто. Для этого нужно в папке рядом с вашей страничкой создать ещё одну папку и назвать её img (вы эту папку можете назвать как угодно, главное запомнить что именно в ней у вас находятся картинки к сайту). И в эту папку размещаем картинку (картинку я назвал dog).

Затем в нашем документе пишем:


<img src="/img/dog.jpg">


А в браузере вместо текста отображается картинка:


вставить картинку


Как вы заметили всё очень просто!!!

Теперь рассмотрим необходимые атрибуты:

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="Моя собака ">


title

то при наведении на него мышкой будет высвечиваться комментарий к картинке. В примере: Моя собака.


Теперь сделаем из картинки ссылку, это применяется в основном для рекламы или баннеров:

Для этого нужно в простой ссылке заменить текст на адрес картинки и всё. Вот как на этих примерах:


<a href="http://htmlbook.name"><img src="/img/dog.jpg" width="65" height="59" border="0"></a>

<a
href="http://htmlbook.name" target="_blank"><img src="/img/dog.jpg" width="65" height="59" border="0"></a>



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

Вот мы и разобрались с изображениями.


Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет