Графика на веб-страницах - Статьи о Html и о веб-дизайне - Каталог статей - Сайт ПоZитиФФки Воскресенье, 13.07.2025, 20:18
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта
Категории каталога
Статьи о Html и о веб-дизайне [7]
Почитаете - узнаете больше!
Истории [7]
Смешные, грустные... Любые!
Наш опрос
Оцените мой сайт
Всего ответов: 25
Главная » Статьи » Статьи о Html и о веб-дизайне

Графика на веб-страницах
Лучше всего размещать на сайте картинки форматов gif или jpg. Иногда нужны и png, а вот bmp'шки не рекомендуются из-за своего гигантского размера: чем больше весит картинка, тем дольше она будет загружаться при просмотре ваших страниц, в результате чего гость просто сбежит с вашего сайта или отключит показ картинок в браузере :)

Картинки вставляются с помощью тега IMG с указанием адреса самой картинки (можно через http. Кстати, url-адрес любой картинки в сети можно узнать, кликнув правой кнопкой по выбранной картинке и выбрать там пункт «свойства») в src:

<img src="images/cat.gif" width="100" height="200">

width — ширина картинки в пикселах;
height — высота картинки, тоже в пикселах.

Не забывайте указывать параметры width и height! Это один из способов ускорения загрузки графики.

А еще, для каждой картинки можно прописать alt-текст. В этом случае при наведении мышки на картинку появится всплывающий комментарий. Например:

<img src="images/cat.gif" width="100" height="200" alt="котенок :)">

Если пользователь отключит показ картинок в своем браузере, то вместо картинок увидит эти надписи-комментарии. А по стандартам html указывать alt обязательно всегда, в некоторых случаях можно писать пустой alt="".

Кроме alt'a существует еще и title. В отличие от alt'a, с отключенными картинками при title на экране мы не увидим никаких комментариев к отключенным изображениям в IE. В Firefox наоборот: видимы значения title, но не видны alt'ы (alt всплывает). И еще, title можно приписывать к текстовым ссылкам. Бывает полезно и очень удобно:)

Обтекание картинок текстом

Картинку можно расположить слева или справа от текста. За ее расположение отвечает параметр align:

<img src="cat.gif" width="100" height="200" align="right">

right — картинка справа от текста;
left — картинка слева от текста;
bottom — нижняя линия строки текста выравнивается по нижнему краю картинки;
top — верхняя линия строки текста выравнивается по верху картинки;
middle или center — строка текста выравнивается по середине картинки.

Иногда бывает полезно задать поля вокруг картинки. Это делается с помощью параметров hspace и vspace:

<img src="cat.gif" width="100" height="200" align="right" hspace="15" vspace="10">

Разместить картинку по центру можно с помощью тега center:

<center><img src="cat.gif" width="100" height="200"></center>

Не забывайте закрыть тег, иначе вся информация на вашей страничке, идущая после картинки, отцентрируется :)

А вообще, размещать картинки, текст и другие элементы страницы удобно в табличках, сделав невидимые границы. Об этом читайте в темке «таблицы».

 

Категория: Статьи о Html и о веб-дизайне | Добавил: Amy (27.07.2008)
Просмотров: 528 | Комментарии: 1 | Рейтинг: 5.0/1 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Поиск
Друзья сайта

Copyright MyCorp © 2025
Сделать бесплатный сайт с uCoz