Графика на Web-страницах. Внедренные элементы



Предыдущая | Следующая

Графика на Web-страницах. Внедренные элементы
Продолжим наши эксперименты с языком HTML и Web-страницами. И на этот раз поговорим о том, как поместить на нашу страничку графическое изображение.
Но сначала давайте введем еще один термин, который поможет нам в дальнейшей работе. Пусть любой абзац текста, любой его фрагмент, являющийся содержимым парного тега, а также все, что помещается на Web-страницу одинарным тегом, называется элементом страницы.
Ранее мы имели дело только с текстовыми элементами Web-страниц. Это пресловутые абзацы текста, заголовки, фрагменты курсива и полужирного текста. Они создаются с помощью уже знакомого нам кода HTML, который пишется в текстовом редакторе и сохраняется в текстовых файлах с расширением htm[l]. А теперь разговор пойдет о тех элементах страниц, которые нельзя закодировать с помощью HTML, — о внедренных элементах. Все внедренные элементы хранятся в отдельных файлах, а в самом коде HTML проставляется ссылка на нужный файл.
Внедренные элементы — это, в частности, графические изображения. В самом деле, графическую информацию невозможно сохранить в текстовом виде; для хранения рисунков, фотографий, схем придуманы свои собственные форматы — GIF, JPEG, BMP, TIFF и др. Для работы с ними текстовые редакторы не подходят — нужны специальные программы графических редакторов.
Предположим, у нас имеется некая картинка, которую мы хотим поместить на нашу Web-страницу. Что для этого нужно сделать?
Прежде всего, нам нужно определить, в какое место Web-страницы будет помещен рисунок, и найти соответствующий участок HTML-кода. После этого остается вставить туда особый одинарный тег <img>:
<Н1>Пример ДОеЬ-страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
<ЕМ>Блокноте</ЕМ> и отображенная в <EM><STRONG>Microsoft</STRONG>
Internet Explorer</EM>.</P>
<IMG SRC="exclam.gif">
Встретив этот тег, Web-обозреватель пошлет Web-серверу еще один запрос — на файл exclam.gif. Получив этот файл, он выведет его содержимое на Web-странице в том месте, где стоит тег <img> (см. рис. 2.5).
Здесь мы столкнулись с так называемыми атрибутами тега — особыми дополнительными параметрами тегов, задающими некоторые дополнительные условия или значения. В нашем случае тег <img> содержит атрибут src, которому присвоено значение exclam.gif — имя нужного нам файла. (Все значения пишутся в двойных кавычках "...".)
Атрибуты бывают обязательными и необязательными. Обязательный атрибут в любом случае должен присутствовать в теге. Необязательный же атрибут присутствовать не обязан; если же он не указан, то Web-обозреватель считает, что ему присвоено некое значение по умолчанию. Атрибут src тега <img> — обязательный, ведь чтобы поместить на Web-страницу изображение, нужно указать Web-обозревателю, откуда его брать. Типичный пример необязательного атрибута — это alt того же тега <img>, задающий текст, который будет выводиться на страницу, если файл с изображением почему-то не удастся загрузить {текст-замена):
<IMG SRC="exclam.gif" АЪТ="Здесь должен быть восклицательный знак">
 

На Web-страницах используют графические изображения, сохраненные в одном из следующих форматах: GIF, JPEG и PNG. Давайте кратко рассмотрим их.
Формат GIF (Graphic Interchange Format, формат обмена графикой) замечательно подходит для сохранения штриховых изображений, состоящих из набора линий разной длины, формы и цветов. Поэтому его используют для хранения элементов оформления страниц (линии, маркеры списков и т. п.), всяческих схем, чертежей, рисунков карандашом и т. п. Кроме того, формат GIF имеет одну очень интересную особенность — с его помощью можно сохранить в одном файле целый фильм (анимированный GIF), что незаменимо в рекламе.
Формат JPEG (Joint Pictures Encoding Group, группа кодирования неподвижных изображений), напротив, замечательно подходит для хранения полутоновых изображений, состоящих из множества точек, имеющих разный цвет. Поэтому картины и сканированные фотографии хранят только в этом формате.
Формат PNG (Portable Network Graphics, перемещаемая сетевая графика), как говорят его создатели, объединяет возможности GIF и JPEG, не "прихватывая" заодно с собой их недостатки. Надо сказать, что задумка получилась удачная: в PNG можно сохранять и штриховые, и полутоновые изображения без потери качества. Только вот что-то он пока никак не завоюет заслуженную популярность.
 Примечание
В Интернете, кроме трех перечисленных ранее, применяются также и другие форматы графики. В частности, очень популярен формат Shockwave/Flash, разработанный фирмой Macromedia и позволяющий создавать, кроме статичных изображений, также фильмы и даже целые программы. Но, в отличие от GIF, JPEG и PNG, эти форматы не поддерживаются Web-обозревателями напрямую и требуют дополнительных программ, а для помещения их на Web-страницы используются другие теги.

 

Содержание Книга по php и mysql