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

Меню

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

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

<теория>

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

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

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

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

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

Пример кода:

т.е

Графическое изображение - ссылка.

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

Пример:Картинка-ссылка с рамкой:< IMG src= "images/inet242_2.jpg" align= "absmiddle">

http://www.yshastie.com/

Здесь мы видим, что ссылка на сайт -www.yshastie.com присвоена рисунку расположенному по адресу -images/inet242_2.jpg, и имеющего положение на странице -absmiddle.

Картинка-ссылка без рамки:www.yshastie.com

www.yshastie.com

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

Сделать фон страницы можно с помощью атрибута background тэга например:

<практика>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"; <META NAME="Description" content="краткое описание сайта/страницы"> <META NAME="Keywords" content=" ключевые слова через запятую/смысловая нагрузка страницы "> <TITLE> Страничка начинающего мегакулпорталостроителя </TITLE> </HEAD>   <BODY background="images/bgrnd.gif" text="#000000" link="Red" vlink="Maroon" alink="Fuchsia" font face="Arial,'Comic Sans MS',Courier" > <basefont size="2">  <IMG src="images/product_page_hdr1.jpg" mce_src="images/product_page_hdr1.jpg" width=403 align=top border=0> <HR ALIGN="center" SIZE="3" WIDTH="100%" color="#00ee0" NOSHADE> <H1> Введение в крокАдиловодство </H1> <H2> Определение крокАдиловодства как науки!!! </H2> :крокАдиловодство сегодня одна из наиболее развивающихся отраслей домашнего хозяйства. Юные крокАдиловоды, занимающиеся своим любимым делом в саду, т.е ловлей порноБелочек, иногда забывают о домашних питомцах - крокАдилах, а они без присмотра иногда устраиваивают для нас настоящие сюрпризы... Страничка начинающего мегакулпорталостроителя занимающегося разведением породы домашних крокАдилов...  <A href="www.srRUSkaktuses.com" mce_href="www.srRUSkaktuses.com"> <IMG vspace= 1; hspace= 1;height=82 alt="kaktus.com" src="images/nurd.gif" mce_src="images/nurd.gif" width=140 align=left border=0> </A> А здесь можно почитатать полное руководство по разведению zx32RTW@ Кактусов. <HR ALIGN="center" SIZE="3" WIDTH="100%" color="#00ee0" NOSHADE> </BODY> </HTML>

<<<Работа с текстом / основные тэги управления стилем текста | Ссылки в документах HTML>>>

Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка instagram

По вашему желанию муфта мувп-10 на лучших условиях.

WWW.REDKOSTI.OKIS.RU