Формат jpeg
Для поиска лучшего способа записи больших объемов графической информации при международном комитете по стандартизации была создана исследовательская группа Joint Photographic Experts Group (JPEG, объединенная экспертная группа по фотографии). Работа группы завершилась предложениями по созданию файлового формата с высокой степенью сжатия данных. Свое название формат унаследовал от наименования группы разработчиков.
В отличие от формата GIF формат JPEG поддерживает глубину цвета в 24 бита. Это значит, что он способен отображать более шестнадцати миллионов цветов и оттенков, что сравнимо с разрешающей способностью нетренированного человеческого глаза.
Формат PNG
Формат PNG (Portable Network Graphics) — это растровый формат, который разработан как преемник формата GIF.
Вставка изображений в HTML документ
Тэг <IMG> используется для вставки изображений в HTML-документ. Это один из самых популярных элементов, незаменимый инструмент web-дизайнера.
Атрибуты тега IMG
SRC - обязательный параметр. Указывает адрес (URL) файла с изображением.
HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.
LOWSRC - указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.
Пример: <IMG src="picture.gif" WIDTH="45" HEIGHT="53" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.
Вопросы к теме
Какие виды графических форматов вы знаете?
Какие форматы графических файлов вы знаете?
С помощью какого тэга в HTML документ вставляется изображение?
Каким атрибутом указывается имя файла с изображением?
Каким атрибутом задается размер изображения?
Каким атрибутом задается отступ от изображения?
Как для изображения указать всплывающую подсказку?
В каких единицах измерения устанавливается рамка для изображения?
Практическое задание
Задание 1:
Сделайте HTML документ собирающий мозаику из графических фрагментов.
Задание 2:
Создайте документ показанные на рисунке ниже.
Рис 1. Лабораторная работа №2.2
Лекция №4 (2 часа)
Тема: Гиперссылки
Создание гиперссылки
Понятие внешней и внутренней ссылки
Абсолютный, относительный URL
Структура web-узла
Вопросы к теме
Практическое задание
Ссылки на другие документы в HTML создаются c помощью тэга <A>
Параметры тэга А:
HREF - определяет находящийся между начальным и конечным тэгами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного параметра. Возможные значения:
http://... - создает ссылку на www-документ;
ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:.. - создает ссылку на конференцию сервера новостей;
telnet://... - создает ссылку на telnet-сессию с удаленной машиной; wais://... - создает ссылку на WAIS - сервер;
gopher://... - создает ссылку на Gopher - сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк <A HREF="docs/title.html"> Документация </A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME – уникальное имя ссылки. Используется для внутренних ссылок.
TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self - указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме;
_parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм;
_top - указывает, что документ должен отображаться в окне-родителе всей текущей фэймовой структуры;
_blank - указывает, что документ должен отображаться в новом окне.
Пример:
<A HREF=http://html.manual.ru target=_blank>Справочник HTML</A>
При нажатии на эту ссылку в новом окне браузера откроется сайт http://html.manual.ru
Понятие внешней и внутренней ссылки
Кроме общепринятой функции перехода со странички на страничку (внешние ссылки), гиперссылки могут обеспечить и переходы внутри одной странички (внутренние ссылки). Такие "урезанные" гиперссылки называются "якоря", и работают по принципу меток.
Разместив где-либо в тексте "якорь" вида <A NAME="имя якоря">, вы можете позиционировать страничку этой меченой строкой по верхней кромке окна браузера.
Переход к якорю осуществляется с помощью ссылки вида:
<A HREF=”#имя якоря”>текст для ссылки</A>
Способы указания источника файла для ссылок и иллюстраций: абсолютный, относительный URL
Способ, называемый абсолютном адресацией, требует для указания документа записи его полного адреса URL. В общем случае такой адрес может быть весьма громоздким, поскольку должен включать в себя название протокола, имя сервера, путь по вложенным каталогам и подкаталогам, имя файла и ссылку на фрагмент. Например, адрес стартовой страницы сайта справочника HTML:
http://html.manual.ru/book/html.php
Обычно этот способ адресации применяют для ссылки на документы, расположенные на удаленных серверах. Нет принципиальных ограничений и против использования абсолютных адресов в пределах одного локального сайта или сервера, но такой подход требует больших накладных расходов на запись и хранение длинных имен и не обладает достаточной устойчивостью. При смене доменного имени, вызванной, например, переносом сервера, структура абсолютных связей нарушается.
В большинстве случаев вместо указания громоздких абсолютных адресов удобнее взять за начало отсчета текущий документ и от этой “реперной точки” задавать координаты связанных файлов. Такой способ называется документно-зависимой (document-relative) относительной адресацией. Его преимущества очевидны: общую часть адреса текущего и связанного документов в этом случае можно не записывать. Достаточно указать координаты связанного документа в древовидной структуре папок и файлов, корнем которой служит текущий документ.
Чтобы создать ссылку на документ, лежащий в другой ветви иерархической файловой системы, можно использовать символическое имя родительского каталога несколько раз подряд, разделяя его последовательные включения символом косой черты, например ../../images /picture.gif. В этом примере относительной адресации требуется подняться вверх в системе каталогов на два уровня, перейти вниз в каталог images и адресоваться к изображению picture.gif.
Существует еще один вариант относительной адресации, в котором точкой отсчета служит корневой каталог сайта. Этот способ называется адресацией относительно корня (root-relative). Координаты файлов, записанные в этой системе, начинаются с символа косой черты, например /projects/images/ picture.gif. Во многих операционных системах (в частности в многочисленных клонах UNIX) эта литера означает корневой каталог файловой системы.
Структура web-узла
Управляющие цепочки, информационные связи, семантические отношения, существующие между отдельными страницами и источниками данных, складываются в некоторую целостность, самостоятельное образование, которую принято называть структурой. Можно выделить три основных типа узловых структур: линейные, иерархические и многосвязные.
Линейная структура
Этот способ организации источников информации абсолютно доминировал в докомпьютерную эпоху. Преимущественно линейную структуру имеют все объемные печатные издания: художественные книги, учебники, справочники, технические руководства и др. В наши дни такой способ построения применяется при создании мультимедийных учебников и электронных руководств. В линейную цепочку выстраиваются шаги оформления заказа в электронном магазине, сложные процедуры регистрации или оформления доступа к некоторым сетевым ресурсам.
Точкой входа узла с линейной структурой служит первая страница. Эта главная страница обычно называется index.htm или main.htm. Она играет роль, которая в печатных изданиях отводится обложке, титульному листу, аннотации и заглавию.