6. Форматирование рисунков

Внедрение изображений

Для внедрения изображений применяют тег <IMG>.

Пример:<IMG SRC = "some.gif" ALIGN = LEFT BORDER = 2 VSPACE = 10 HSPACE = 10 >

Атрибуты тега <IMG>:

WIDTH = ... - ширина изображения в процентах или пикселях.

HEIGHT = ... - высота изображения в процентах или пикселях.

ALT = "..." - альтернативный текст, который отображается браузером на стадии загрузки изображения или в том случае, ели изображение не может быть отображено.

ALIGN – обтекание.

BORDER – ширина рамки.

VSPACE – вертикальное поле сверху и снизу изображения.

HSPACE – горизонтальное поле слева и справа от изображения.

Сочетание текста и графики

Атрибут "ALIGN" служит для обтекания изображения текстом.

<IMG BORDER = 4 ALIGN = RIGHT> - таблица сместится вправо, а текст будет омывать ее слева.

<IMG SRC = "some.gif" ALIGN = LEFT> - рисунок сместится влево, а текст будет омывать справа.

Выравнивание рисунков

<IMG VALIGN="top" SRC="pres01.gif" ALT="презент 01"> - верхний край рисунка совпадает с базовой линией.

<IMG VALIGN="middle" SRC="pres01.gif" ALT="презент 01"> - середина рисунка совпадает с базовой линией.

<IMG VALIGN="bottom" SRC="pres01.gif" ALT="презент 01"> - нижний край рисунка совпадает с базовой линией.

Внедрение других объектов

Внедрение звукового файла

<bgsound src="url/name.wav" loop="2"> - внедрение фоновой мелодии с указанием проиграть 2 раза

<embed src="url/name.wav"> - внедрение звукового файла, при этом на экране появляется панель управления проигрыванием звука

<a href="url/name.wav">Прослушать музыку</a> - внедрение звукового файла

Внедрение видеофайла

<embed src="url/name.avi"> - внедрение видеофайла с панелью управления проигрыванием видео

<img dynsrc="url/name.avi"> - внедрение видеофайла без панели управления, видео будет проиграно один раз

<a href="url/name.avi">Просмотреть видео</a> - внедрение видеофайла по ссылке

Гиперссылки

Для создания гиперссылок применяют тег A. Гиперссылки могут быть абсолютными и относительными. Абсолютные ссылки имеют следующий формат:

<A href=URL>Текстовая строка</a>

Текстовая строка будет выделена (например, синим цветом и подчеркнутым стилем), при наведении курсора мыши на этот текст он принимает форму руки, а после щелчка левой кнопкой мыши активизируется ссылка.

Пример абсолютной ссылки:

<A href="http://www.microsoft.com">Корпорация Microsoft</a>

Относительные ссылки указывают пути от местоположения текущего документа.

Пример ссылки на документ внутри текущего каталога:

<A HREF = "some.html" target ="_ blank"> текст </A>

Target =_ blank - загрузка документа в новое окно

Target =_ parent - в родительское окно

Target =_ search - в панель поиска браузера

Target =_ self (по умолчанию) - в то же окно

Пример ссылки на фрагмент внутри текущего документа:

<A HREF = "#имя_фрагмента">Ссылка 1 </А> ...

< A NAME = "имя_фрагмента"> текст </A> или

< A NAME = " имя_фрагмента" > </A>

Пример ссылки на фрагмент внутри внешнего файла в текущем каталоге:

<A HREF = "secondfile.html#ИМЯ_ФРАГ "> Ссылка 2 </A>

Здесь ИМЯ_ФРАГ может быть любым словом или символом.

Пример ссылки на документ во вложенном каталоге текущего каталога:

<A href = "gif/some.gif"> текст </A>

Пример ссылки на файл в каталоге, расположенном уровнем выше:

<A href = "../some.html"> текст </A>

Пример ссылки на файл в каталоге, расположенном двумя уровнями выше:

<A href = "../../some.html">текст</A>

Пример ссылки на файл во внешнем сайте или другом ресурсе:

<A HREF = "http://www.somesite.ru/somedif/some.html">сайт </A>

<A HREF = ftp://ftp.netscape.com/pub/cc32e47.exe > Скачать NC 4.7 </A>

Пример ссылки на адрес электронной почты:

<A HREF = "mailto: some@some.ru"> Текст </A>

Здесь mailto вызывает почтовую программу по умолчанию.

Пример ссылки на адрес электронной почты с указанием темы сообщения:

<A HREF = "mailto: some@some.ru? Subject = тема "> Текст </A>

На месте текста может быть рисунок <IMG>.

Лекция 4. ГРАФИЧЕСКИЕ ФАЙЛЫ (6 часов)

План.

1. Что такое изображение.

2. Понятие растровой и векторной графики

3. Растровые рисунки

4. Векторные рисунки

5. Цветные изображения

1. Поговорим об изображениях. Изображение стоит у колыбели человеческой истории. Кто первым додумался запечатлеть на камне мир, который его окружал? Этого мы уже не узнаем никогда. Наши взгляды на то отдаленное время, в основном, сформировали книги и фильмы. Впрочем, кинематограф, также берущий свое начало с того, первого изображения (ведь кино - это не что иное, как последовательность быстро сменяющихся статических картинок), так и не уделил достаточного внимания проработке этой темы, посчитав ее скучной и мало интересной для высокоразвитого Homo Sapiens. На память приходят лишь псевдоисторический "Миллион лет до нашей эры", начальные эпизоды "Космической одиссеи 2001 года" Стэнли Кубрика да "Борьба за огонь" Жан-Жака Анно. И наши предки изображенные в этих картинах, очень далеки от своего истинного облика. Они ведь умели мечтать, фантазировать, придумывать новое, стремились не просто создавать полезные орудия труда, а вносить в них элемент красоты.

Изображения обычно поступают в компьютер следующими основными способами:

• Вводятся через сканер

• Выбираются из файлов, содержащих набор графических вставок и поставляемых специализированными фирмами

• Создаются заново пользователями с помощью пакетов графических программ.

После этого изображения можно подвергнуть последующей обработке различными способами.

Сканеры воспринимают цветные и черно-белые изображения с различным разрешением и позволяют вводить информацию о цвете. Полученное со сканера изображение (или его часть) можно вставить в нужное приложение или документ в неизменном виде, либо воспользоваться графическими программами для обработки, например для раскрашивания или прорисовки деталей, изменения размеров, контраста, яркости.

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