Графика в документах HTML
На прошлом уроке мы разобрали основные теги управлния текстом, проработали некоторые виды тегов управления текстом. Сегодня мы рассмотрим вставку графики в наш сайт. З.Ы. - большие графические - файлы не рекомендуется вставлять в сайт, дабы не перезагружать и без того малый пропускной канал соединения с интернет/ т.е. время загрузки страницы превратить в вечность/.
Вот Вы с приятелями отмечали свой/мой/его/... день рождения, понятное дело нафоткались, сделали эти самые фотки и решили их выкинуть на свой сайт, пусть пипл любуется какой- Я и мои друзья. Вот это самое сейчас и замутим.
Для вставки графического изображения применяется тэг<IMG>
src="URL" | URL-адрес файла изображения. |
alt="text" | Текст, который будет отображаться вместо изображения, при невозможности его вывода. |
align | Выравнивание изображения. Может принимать значения:
|
height | Высота картинки в пикселях. |
width | Ширина картинки в пикселях. |
border | Ширина рамки вокруг картинки в пикселях (только NN). |
hspace | Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали. |
vspace | Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали. |
left | Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны. |
right | Изображение прижимается
к правому полю окна. Текст обтекает изображение с левой стороны. |
top | Верхняя граница изображения
выравнивается по самому высокому элементу текущей строки. |
middle | Выравнивание середины
изображения по базовой линиитекущей строки |
bottom | Выравнивание нижней границы
изображения по базовой линии текущей строки |
texttop | Верхняя граница изображения
выравнивается по самому высокому текстовому элементу теущей строки |
absmiddle | Выравнивание середины
изображения посередине текущей строки |
baseline | Выравнивание нижней
границы изображения по базовой линии текущей строки |
absbottom | Выравнивание нижней
границы изображения по нижней границе текущей строки |
Пример кода:
<IMG src="адресКартинки/вашаКартинка.расширение(gif,jpeg)"align="положение">
т.е
<IMG src="/files/004/image1.jpeg"align="right">
Если вставить картинку между тэгами <A></A> то получится ссылка в виде картинки. В этом случае браузер обведет картинку рамкой, убрать которую можно указав значение атрибута border="0" тэга <IMG>.
Пример:Картинка-ссылка с рамкой:<a
href="www.yshastie.com">< IMG src= "/images/004/inet242_2.jpg" align= "absmiddle"></a>
http://www.yshastie.com/
Здесь мы видим, что ссылка на сайт -www.yshastie.com присвоена рисунку расположенному по адресу -/images/004/inet242_2.jpg, и имеющего положение на странице -absmiddle.
Картинка-ссылка без рамки:<a
href="www.yshastie.com"><IMG src="/images/004/inet242_2.jpg" border="0" align=
"absmiddle"></a>www.yshastie.com< /FONT>< /FONT>
www.yshastie.com
Сделать фон страницы можно с помощью атрибута
background тэга <body> например:
<body background="bgr.gif">
[шаг 1. откройте обычный блокнот, попытаемся сваять страничку с графикой имея наш предыдущий код]
[шаг 2. скопируйте код и сохрание его как в предыдущих занятиях]
[шаг 3. скопируйте рисунки и сохраните их в папке "images" у себя на компьютере, н-р: "папка1" - "images"; в папке1(родительская папка по отношению к "images") мы сохраняем наш сайт, а впапке "images" графику присутствующую в сайте]
[Назад] [Содержание] [Вперед]