Приглашаем посетить
Романтизм (19v-euro-lit.niv.ru)

Графика в документах HTML

Графика в документах HTML


На прошлом уроке мы разобрали основные теги управлния текстом, проработали некоторые виды тегов управления текстом. Сегодня мы рассмотрим вставку графики в наш сайт. З.Ы. - большие графические - файлы не рекомендуется вставлять в сайт, дабы не перезагружать и без того малый пропускной канал соединения с интернет/ т.е. время загрузки страницы превратить в вечность/.

<теория>

Вставка графических изображений.

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

Для вставки графического изображения применяется тэг<IMG>

Атрибуты тэга <IMG>:
src="URL" URL-адрес файла изображения.
alt="text" Текст, который будет отображаться вместо изображения, при невозможности его вывода.
align Выравнивание изображения. Может принимать значения:
  • left -выравнивание изображения по левой границе экрана браузера;
  • right -выравнивание изображения по правой границе экрана браузера;
  • top -выравнивание текста по верхней границе изображения;
  • middle -выравнивание текста по центру изображения;
  • bottom -выравнивание текста по нижней границе изображения;
  • texttop -выравнивание текста по верхний границе изображения, относительно самых высоких символов;
  • absmiddle -выравнивание середины строки относительно середины изображения;
  • baseline -выравнивание нижней рамки изображения относительно базовой линии текстовой строки;
  • absbottom -выравнивание нижней границы изображения относительно нижней границы текущей строки.
height Высота картинки в пикселях.
width Ширина картинки в пикселях.
border Ширина рамки вокруг картинки в пикселях (только NN).
hspace Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали.
vspace Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали.

Примеры выравнивания изображения:
left Графика в документах HTMLИзображение прижимается к левому полю окна.
Текст обтекает изображение с правой стороны.
right Графика в документах HTMLИзображение прижимается к правому полю
окна. Текст обтекает изображение с левой стороны.
top Графика в документах HTMLВерхняя граница изображения выравнивается
по самому высокому элементу текущей строки.
middle Графика в документах HTMLВыравнивание середины изображения
по базовой линиитекущей строки
bottom Графика в документах HTMLВыравнивание нижней границы изображения
по базовой линии текущей строки
texttop Графика в документах HTMLВерхняя граница изображения выравнивается
по самому высокому текстовому элементу теущей строки
absmiddle Графика в документах HTMLВыравнивание середины изображения
посередине текущей строки
baseline Графика в документах HTMLВыравнивание нижней границы изображения
по базовой линии текущей строки
absbottom Графика в документах HTMLВыравнивание нижней границы изображения
по нижней границе текущей строки

Пример кода:

<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>

Графика в документах HTML 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>

Графика в документах HTML www.yshastie.com

Рисунок в качестве фона.

Сделать фон страницы можно с помощью атрибута background тэга <body> например:
<body background="bgr.gif">

<практика>

[шаг 1. откройте обычный блокнот, попытаемся сваять страничку с графикой имея наш предыдущий код]

[шаг 2. скопируйте код и сохрание его как в предыдущих занятиях]

[шаг 3. скопируйте рисунки и сохраните их в папке "images" у себя на компьютере, н-р: "папка1" - "images"; в папке1(родительская папка по отношению к "images")  мы сохраняем наш сайт, а впапке "images" графику присутствующую в сайте]

[Назад] [Содержание] [Вперед]