Файл: Основы программирования на языке HTML.pdf

Изображения могут сделать текст вашего документа более содержательным. Представьте некий сухой HTML-документ, содержащим, например, описание придуманного вами технического устройства. Если он состоит из одного текста, то многим покажется скучным и порой непонятным. А если его «разбавить» несколькими иллюстрациями, размещенными в нужных местах, документ станет более читабельным и визуально привлекательным. [1, c. 59]

Изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного встраиваемые в документ. [1, c. 60]

Существует много способов описания графической информации, соответственно имеется значительное количество форматов хранения графических файлов, — порядка нескольких десятков.

Все форматы хранения графической информации можно разделить на два типа: векторный и растровый.

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

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

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

Растровая графика предполагает хранение данных о каждой точке изображения. Для отображения растровой графики не требуется сложных математических расчетов, достаточно лишь получить данные о каждой точке и отобразить их на экране. Все наши фотографии, сделанные на современных фотоаппаратах, сохраняются именно в растровых форматах. При масштабировании растровой графики обычно происходит потеря разрешения, что ухудшает качество изображения. [1, c. 62]

Графические форматы

В Web используются три графических формата: GIF, JPEG, PNG.

Все эти форматы сохраняют сжатое изображение.

Сжатие осуществляется за счёт отбрасывания несущественной информации и поиска в рисунке повторяющихся фрагментов.

Формат GIF

Формат GIF подходит для сохранения изображений с ограниченным количеством цветов и большими областями, заполненными сплошным цветом. [2, c.42] Стандарт был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). [1, c. 63]

Формат JPEG

Формат JPEG был разработан специально для сохранения фотографий. JPEG не подходит для сохранения изображений со сплошными областями и множеством деталей. [2, c.42]

В стандарте применен специальный алгоритм компрессии данных — при повышении степени сжатия качество изображения ухудшается за счет изъятия «ненужной» информации (в отличие от алгоритма сжатия GIF, который позволяет производить подобную процедуру практически без потерь).

На сегодняшний день стандарт JPEG занимает лидирующее место по популярности и используется для создания изображений, в композицию которых входят фотографии, сложные коллажи (компьютерный монтаж нескольких разнородных графических объектов), объекты, подвергнутые действию различных графических эффектов и фильтров.

Не останавливаясь на деталях хранения информации в этом формате, отметим, что файлы JPG следует использовать, прежде всего, для хранения фотореалистичных изображений. Ограничение в 256 цветов, присущее GIF, может снизить качество изображения, что исключается при использовании JPG. Поскольку JPG основан на сжатии данных с потерями, учитывающими особенности восприятия изображения человеком, то без значительного ухудшения картинки можно обеспечить значительную степень сжатия и, как следствие, небольшой размер файла.

Различают две схемы хранения — обычная и прогрессивная (progressive). Прогрессивная схема хранения такова, что при выводе таких изображений создается впечатление постепенного проявления рисунка на экране с всё большим уточнением отдельных деталей.

Файлы формата JPG, в отличие от файлов формата GIF, не могут иметь несколько изображений, которые будут при просмотре сменять друг друга. [1, c. 64]

Формат PNG

Формат PNG был разработан как альтернатива GIF. Формат PNG -единственный из распространенных форматов, позволяющий получать полноцветные изображения с прозрачным фоном. PNG подходит для сохранения фотографий, на которых недопустимы никакие потери. Помимо этого, PNG используется на изображениях со сплошными областями. [2, c.42] Стандарт разрабатывался с учетом особенностей Интернета. PNG вобрал в себя наиболее сильные стороны двух предыдущих стандартов и исключил их недостатки.

В стандарте реализованы следующие средства:

• прозрачный фон;
• построчное чередование;
• сжатие без потерь и др.

Однако PNG, несмотря на свои преимущества, не получил пока такого признания пользователями Интернета, как стандарты GIF и JPEG (одна из возможных причин — отсутствие поддержки анимации). В Сети можно встретить графические файлы с расширением png, но достаточно редко. [1, c. 65]

Добавление изображения <IMG>

Для добавления изображения на страницу воспользуйтесь элементом <img>. Он является пустым (то есть без закрывающего тега). Для него должны быть указаны следующие два атрибута. [6, c.96]

Src - данный атрибут сообщает браузеру расположение нужного изображения. Как правило, его значением будет относительный URL-адрес, указывающий на изображение, хранящееся в директориях вашего собственного сайта. (в данном примере все изображения расположены в подпапке images. Об относительных URL-адресах речь шла в предыдущей главе.)

Alt - Данный атрибут предоставляет текстовое описание изображения, выводимое на экран в случае, если нет возможности показать само изображение. Текст, указываемый в значении атрибута alt, часто называют замещающим текстом. Он должен представлять собой точное описание изображения, чтобы оно могло быть распознано программным обеспечением экранного доступа (используемым людьми с нарушением зрения) и поисковыми системами.

Если вы используете изображение лишь как декорацию для улучшения оформления сайта (и оно не несет никакой смысловой нагрузки, как, например, графический разделитель — горизонтальная линия), используйте атрибут alt с пустым значением (между кавычек не должно быть никакого текста). [6, c.96]

Задание размеров выводимого изображения

Единственным обязательным параметров тега <IMG> является, как уже было описано выше, SRC. Использование остальных параметров не обязательно, однако рекомендуется по ряду причин.

Так, параметры WIDTH и HEIGHT:

• позволяют во время загрузки изображения сразу зарезервировать на странице столько места, сколько это необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает «скакать», поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла;
• поместить рисунок в окне браузера, не прибегая к помощи полос прокруток, которые автоматически возникают, если размеры изображения слишком велики. В таком случае, достаточно в HTML-коде указать пропорционально уменьшенные размеры этого рисунка. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению.

Значения параметров WIDTH и HEIGHT могут указываться как в пикселах, так и в процентах от размеров окна просмотра. Последний вариант дает команду браузеру растянуть или сузить рисунок в соответствии с размерами окна страницы.

Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. [1, c.69]

Выравнивание изображения по горизонтали ALIGN

Align

Атрибут align раньше использовался для обозначения того, как остальные части страницы должны обтекать изображение. Этот атрибут был исключен из стандарта HTML5 — при создании новых сайтов для выравнивания изображений нужно использовать каскадные таблицы стилей CSS (о чем вы прочтете в главе 16).

Мы решили все же упомянуть об этом атрибуте по той причине, что при изучении исходного кода старых сайтов вы довольно часто будете с ним встречаться, а также потому, что некоторые визуальные редакторы используют именно его, когда вы устанавливаете выравнивание изображения. Атрибут align может иметь одно из двух значений выравнивания по горизонтали.

Left – это значение выравнивает изображение по левому краю (позволяя тексту обтекать его справа).

Right - это значение выравнивает изображение по правому краю (позволяя тексту обтекать его слева). [6, c.100]

Выравнивание изображения по вертикали ALIGN

Атрибуту а1ign допускается присваивать одно из трех значений, устанавливающих выравнивание изображения по вертикали относительно окружающего его текста.

Top - то значение выравнивает первую строку текста с верхней границей изображения.

Middle - то значение устанавливает выравнивание первой строки текста относительно середины изображения.

Bottom - это значение выравнивает первую строку текста относительно нижней границы изображения.

В этой главе мы рассмотрели добавление изображения с использованием тега <IMG>. Форматы добавляемого изображение и его форматирование на станице, размеры расположение, обтекание текстом. [6, c.101]

5. Ссылки, гиперссылки

Ссылки — определяющая черта Всемирной паутины, так как они позволяют перемещаться с одного сайта на другой, иными словами, путешествовать по Всемирной паутине.

Чаще всего вы будете встречаться со ссылками следующих типов:

• ссылки с одного сайта на другой;
• ссылки с одной страницы сайта на другую страницу этого же сайта;
• ссылки с одной части страницы на другую часть этой же страницы;
• ссылки, открывающие новое окно браузера;
• ссылки, запускающие программу для отправки электронных писем, установленную на вашем компьютере, и тем самым позволяющие отправить письмо на определенный адрес электронной почты. [6, c.74]

Web-сайт - это совокупность связанных между собой Web-страниц, объединенных общей идеей. Связать страницы между собой позволяют гиперссылки. Гиперссылка - это активный элемент страницы, позволяющий вызывать другие html страницы и прочие ресурсы в сети. При щелчке на гиперссылке в браузер загружается указанный ресурс.

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

При наведении курсора мыши на гиперссылку, ее указатель принимает вид «ладони». [2, c.32]

Ссылки <A>

Ссылки создаются с помощью элемента <а> и атрибута href. Значением атрибута href является страница, на которую вы собираетесь переадресовать посетителя, когда он щелкнет мышью по ссылке.

Можно щелкнуть по любому слову текста, помещенного между открывающим <а> и закрывающим </а> тегами элемента, после чего произойдет переход на страницу, адрес которой указан в значении атрибута href.

При ссылке на другой сайт значением атрибута href должен быть полный, или абсолютный, URL-адрес этого сайта.

По умолчанию браузеры отображают текст ссылки синим цветом с подчеркиванием. [6, c.78]

Текст, помещенный между открывающим <а> и закрывающим </а> тегами, называется «текстом ссылки». По мере возможности он должен пояснять посетителям, куда они будут переведены в результате щелчка мышью (а не просто гласить «щелкните здесь»). На рисунке ниже вы можете видеть ссылку на сайт «Кинопоиск».

Многие люди переходят между страницами, находя ссылки в тексте. Ясный и доходчивый текст способен помочь посетителям вашего сайта отыскать именно то, что нужно им. Это оставит у них больше приятных впечатлений о вашем сайте, что, в свою очередь, поощрит их посещать его чаще. (Кроме того, это поможет людям, использующим программы

экранного доступа.) Чтобы создать хороший текст ссылки, подумайте над тем, какие запросы станут использовать люди при поиске страницы с информацией, на которую вы ссылаетесь. Например, вместо текста наподобие «места, где можно переночевать», напишите что-то более конкретное, например, «гостиницы Москвы». [6, c.77]

Итак, указатель ссылки описывается парным тегом <А>, а адрес перехода реализован с помощью параметра HREF этого тега. Все, что находится между <А> и </А>, и является указателем ссылки или, как еще говорят, «гиперссылкой».

Значением параметра HREF является путь к тому или иному Интернет - ресурсу. Все гиперссылки разделяют на два типа: внешние и внутренние. Внешние ссылки ведут на другие ресурсы глобальной сети или другие документы одного Web-сайта, а внутренние позволяют посетителю путешествовать в пределах одного HTML-документа.