Картинки. Что ж, редко какая страничка обходится без графического оформления, хотя есть и такие. Прежде всего, нужно для себя выбрать, что будет основным носителем информации на вашей страничке, так как картинки иногда привлекают к себе больше внимания, чем от них это требуется. Так же картинки требуют некоторое время для своей загрузки, что тоже не всегда выглядит привлекательно и некоторые пользователи просто закрывают страничку так и не дождавшись ее полного отображения. Но согласитесь сухой текст, не разбавленный рисунком читать тоже не великое удовольствие.
Ну, перейдем от слов к делу. Для вставки изображения нам понадобится одиночный тэг <img>, обладающий следующими параметрами:
| Параметр |
Назначение |
| SRC | Указание полного имени файла изображения |
| ALIGN | Выравнивание рисунка относительно страницы и текста |
| VSPACE | Расстояние между текстом и рисунком (по вертикали) |
| HSPACE | Расстояние между текстом и рисунком (по горизонту) |
| ALT | Альтернативный текст, подсказка |
| WIDTH | Ширина рисунка |
| HEIGHT | Высота рисунка |
| BORDER |
Рамка рисунка |
Ух. Вот, вроде все перечислил. Параметров целое множество, начнем потихонечку с ними знакомиться. Сразу напомню что параметры тэга могут применяться как по отдельности так и все вместе.
И так, начнем, параметр SRC необходим тэгу IMG, как нам воздух, ведь именно с помощью него мы укажем полное имя картинки которую Мы хочем показать на страничке. И помните что имя файла нужно указывать точно так как оно указанно у рисунка: name.jpg; name.Gpg; Name.jpg - все имена разные, хотя и выглядят они одинаково, но большенство браузеров их различают. Рассмотрим пример:
 |
<IMG SRC = "name.jpg"> - вставка рисунка из того же каталога в котором находится страничка |
| <IMG SRC = "papka/name.jpg"> - вставка рисунка из подкаталога. |
|
| <IMG SRC = "../name.jpg"> - вставка рисунка из каталога что находится на один уровень выше чем каталог в котором находится страничка. |
|
| <IMG SRC = "http://www.home.ru/name.jpg"> - вставка рисунка расположенного на другом сайте. |
Следующий параметр уже немного Вам знаком, с помощью align мы выравнивали текст на страничке, ну а теперь посмотрим что он делает с рисунком:
<src="kartinka1.gif" align="left"> - данный параметр поставит картинку по левому краю странички
ну а текст соответственно займет правую сторону.
Попробуем и другой вариант выравнивания, а именно поставим текст слева
на страничке а картинку с правой стороны. Выглядеть это будет примерно так:
<img src="kartinka2.gif" align="right">
Если весь текст умещается в одну строку, то его можно подравнять еще и вертикально:
<img src="kartinka3.gif" align="top"> - верхние выравнивание
выравнивание по середине: <img src="kartinka4.gif" align="middle">
<img src="kartinka1.gif" align="bottom"> - выравнивание по нижней грани.
Параметр VSPACE - задает расстояние между текстом и рисунком (по вертикали). Это растояние задаеться в пиксилях и выглядит это так:<img src="kartinka1.gif" vspace="20"> - данная запись означает что сверху и снизу у указаного рисунка будут сделаны отступы размером в 20 пикселей.
Подобным образом работает и параметр HSPACE - только он задает отступы по горизонту, следовательно запись: <img src="kartinka1.gif" hspace="20"> - означает отступы на 20 пикселей слева и справа от рисунка.
ALT - данный параметр обозначает альтернативный текст, проще говоря подсказку, наведи курсор на рисунок и задержись на несколько
секунд, и ты его увидешь. Его так же видно если в браузере на твоем ПК отключены картинки. Вообщем то, это просто краткое описание
рисунка.
Параметры WIDTH и HEIGHT предназначены для задания ширины и высоты рисунка соответственно. Данные параметры можно задавать как в пикселях так и в процентах от велечины экрана: запись WIDTH="100" может быть так же представленна следующим образом WIDTH=20%.
Ну и последний параметр. Параметр BORDER - это толщина рамки вокруг рисунка. Задается данный параметр в пикселях и рисует чёрную рамку указаной толщины вокруг изображения.
С параметрами закончили, но остановимся на минутку. Раз МЫ говорим сегодня про рисунок позвольте мне показать Вам еще одно применение картинки. Вы наверника видели страницы где фоном служил рисунок. Зделать это на своем сайте не сложно, нужно лишь в тэге BODY прописать параметр BACKGROUND = "ПОЛНОЕ ИМЯ РИСУНКА", как только Вы это сделаете весь задний фон странички зальёться указаной картинкой.
Вот и подошел к своему завершению мой урок. Мы с Вами еще вернемся к картинкам так как рассмотренные на уроке параметры далеко не исчерпывают возможностей рисунка. Но про это в моих следующих уроках. Так что если Вы не устали, то вперед Вас ждет еще много интересного...
|
||