- •XX столетия Ванневар Буш (Vannevar Bush) объявил миру новое слово — «ги-
- •Interface), asp, jsp (Java Server Pager), ssi (Server Side Includes), vrml (Virtual
- •33 Удивительнейшие буквы русского алфавита передают человечеству события, факты,
- •Identifier) — это унифицированный идентификатор ресурса, в состав которого
- •24 Бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов
- •155 Пикселов (листинг 3 2) Хотя листинги 3 1 и 3 2 практически совпадают,
- •140 Различных цветов с указанием их оригинальных названий и шестнадцатерич-
- •Vspace, scrollamount Урок 7 Списки
- •Iab (Internet Advisory Board) - координационный совет Интернета
- •Ietf - международная организация, в которую входят специалисты по сетевым технологиям
- •20, Показана в листинге 8 10 (рис 8 10)
- •100 % Если, соответственно, сумма меньше 100 %, то размеры пропорционально
- •Institute на машине пользователя:
- •Xml, xhtml, dhtml Урок 13 Баннерная реклама
- •25 % Выше, чем у их статичных баннеров
- •2 % Возникает ощущение, что только 2 % показов баннера идут на пользу рекла-
- •Interfaces Так, например, если проверить связь с сайтом электронной почты www.
- •Iso не зарегистрирован, поэтом нужно указывать знак – (минус)
- •1995 Года, когда сам недавно образованный (и в декабре 1994 года проведший
- •40Px; font-family: arial"
- •3 Мбайт) никто не поместит на свою веб-страницу На рис 18 5 показано то же
- •Internet
- •2002 Года Он предназначен для аудиокомпрессии и относится к тому же типу
- •VbScript, 19
Identifier) — это унифицированный идентификатор ресурса, в состав которого
входит URL
Текст, обозначенный тегом <BLOCKQUOTE>, выводится с отступом от левого края
документа на 8 пробелов Пример использования тега показан на рис 2 16 (ли-
стинг 2 16)
Рис 2 16 Фрагмент веб-страницы с длинной цитатой50 Урок 2. Текст
Листинг 2 16 Пример создания веб-страницы, содержащей цитату
<HTML>
<HEAD>
<TITLE> Цитата </TITLE>
</HEAD>
<BODY>
<BLOCKQUOTE>
Тег BLOCKQUOTE добавляет поля слева и справа от текста. <BR>
Этот тег позволяет расположить текст компактно и в центре страницы. <BR>
При использовании этого тега несколько раз текст все больше сжимается к центру.<BR>
Данный тег предназначен для обозначения в документе цитаты из другого источника.<BR>
<BLOCKQUOTE>Текст, помеченный тегом, отступает от левого края документа на 8 пробелов
<BLOCKQUOTE>
</BODY>
</HTML>
Данный тег появился в HTML версии 2 0 Он обеспечивает вставку более длин-
ных цитат по сравнению с тегом <Q>
Тег <Q> оформляет текст в виде краткой цитаты Тег имеет атрибут CITE=»URI», где
URI задает цитируемый документ или сообщение Тег <Q> предназначен для ото-
бражения более коротких цитат по сравнению с тегом <BLOCKQUOTE> Обычно в со-
став цитаты не входят символы разрыва строки, и цитата считается элементом
текстового уровня Символы кавычек отображает браузер
Пример использования тега <Q> показан на рис 2 17 (листинг 2 17)
Рис 2 17 Фрагмент веб-страницы с короткой цитатой
Листинг 2 17 Пример создания веб-страницы, содержащей тег <Q>
<HTML><HEAD><TITLE>Цитата</TITLE></HEAD>
<BODY BGCOLOR=BBAAFF>
<Q>”Постер” - наружная реклама, плакат </Q></BODY></HTML>
Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, ко-
торые сохраняются при передаче документа по сети, но не отображаются браузе-
ром Синтаксис комментария: Акронимы 51
<!-- Это комментарий -->
Комментарии могут встречаться в документе где угодно и в любом количестве
Данный тег появился в HTML версии 2 0
Акронимы
Два тега <ABBR> и <ACRONYM> (см урок 19) позволяют выделять акронимы, или
аббревиатуры (сокращения полных названий), в пределах текста Содержимое те-
гов <ABBR> и <ACRONYM> выводится в виде всплывающих подсказок, которые дают
пользователю возможность увидеть расшифровку акронимов
Пример использования тега <ACRONYM> показан на рис 2 18 (листинг 2 18)
Рис 2 18 Фрагмент веб-страницы, содержащей акроним
Листинг 2 18 Пример создания веб-страницы, содержащей акроним
<HTML>
<HEAD>
<TITLE> Акроним </TITLE>
</HEAD>
<BODY>
<!-- Акроним, или аббревиатура, — это сокращение известных названий -->
<ACRONYM TITLE=”Северо-западный институт печати”> СЗИП </ACRONYM>
<ACRONYM TITLE=”Санкт-Петербургский государственный университет технологии и дизайна”>
СПГУТД </ACRONYM>
</BODY>
</HTML>
Не следует забывать, что знак равенства (=) в программе не должен быть
окружен пробелами.
Тег <ACRONYM> появился в HTML версии 4 0 52 Урок 2. Текст
Определения
Если название поместить между тегами <CITE>, то это название отобразится кур-
сивом Термины можно задать еще и тегом <DFN> Пример использования этих те-
гов показан на рис 2 19 (листинг 2 19)
Листинг 2 19 Пример создания веб-страницы, содержащей определения
<HTML>
<HEAD>
<TITLE> Определение </TITLE>
</HEAD>
<BODY>
<CITE> “Переулок Джамбула, дом 13”</CITE> Это адрес Северо-Западного института печати <BR>
Санкт-Петербургского государственного университета технологии и дизайна<BR>
<DFN> PR - деньги из воздуха </DFN> В России PR пока недооценивается.<BR>
Его репутация не слишком высока, а само слово PR превратилось в “пиар” и вызывает
негативные<BR>
ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в 20$ млн.<BR>
Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок <BR>
- стало больше статей под шапкой “на правах рекламы”.
</BODY>
</HTML>
Рис 2 19 Фрагмент веб-страницы с определениями
Тег <CITE> появился в HTML версии 2 0 Он определяет цитату или ссылку на ис-
точник, содержимое данного тега обычно воспроизводится курсивом
Шрифтовое выделение
Тег <EM> используется с целью выделения особым шрифтом (обычно курсивом)
слова или текста Синтаксис:
<EM> Текст </EM>
Пример использования этого тега можно посмотреть на рис 2 20, а код програм-
мы — в листинге 2 20 Использование моноширинных шрифтов 53
Листинг 2 20 Пример создания веб-страницы со специфическим форматированием
<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD>
<BODY BGCOLOR=00FFFC> Имидж -<EM> образ, (знаковый символ фоторекламного успеха
и рекламного бизнеса, устойчивый престиж искусства фоторекламы, полномасштабная
профессиональная компетентность команды фоторекламистов и их лидера, философия
индивидуальной позиции фоторекламного творчества),
</EM> исключительный и качественный признак в ряду иных подобий, впечатление, которое
свойственно данному товару/услуге, рекламному агентству, мастеру-фоторекламисту,
фоторекламной акции, рекламной корпорации Интернет-услуг.
</BODY></HTML>
Рис 2 20 Веб-страница, содержащая тег <EM>
Тег <EM> появился в версии HTML 2 0, чаще всего содержимое данного тега выво-
дится курсивом
Использование моноширинных шрифтов
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов
<CODE>, <KBD> и <SAMP> Результаты применения этих тегов обычно идентичны
Тег <CODE> используется с целью дополнительного выделения фрагментов про-
граммного кода моноширинным шрифтом Данный элемент предпочтительнее,
чем элемент <TT> (см раздел «Задание начертания») Синтаксис:
<CODE> Код </CODE>
Пример использования этого тега можно посмотреть на рис 2 21, а код програм-
мы — в листинге 2 21
Листинг 2 21 Пример создания веб-страницы, содержащей тег <CODE>
<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD>
<BODY BGCOLOR=#00FFEC> Промоушн - <CODE> продвижение продаж - комплекс различных мер
стимулирования покупки товаров.</CODE>
Промоушн включает в себя такие методы, как купонирование, продажи со скидкой, лотереи,
викторины, представление бесплатных образцов.
</BODY></HTML>54 Урок 2. Текст
Рис 2 21 Веб-страница, содержащая тег <CODE>
Тег <CODE> появился в версии HTML 2 0; чаще всего содержимое данного тега вы-
водится моноширинным шрифтом
Тег <KBD> используется с целью выделения диалога пользователя с компьютером
Синтаксис:
<KBD> Ввод с клавиатуры </KBD>
Пример применения этого тега можно посмотреть на рис 2 22, а код программы —
в листинге 2 22
Рис 2 22 Веб-страница, содержащая тег <KBD>
Листинг 2 22 Пример создания веб-страницы, содержащей тег <KBD>
<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD>
<BODY BGCOLOR=#EC1DFC> Имидж - <KBD> модификация образа личности, фирмы, товара путем
сгущения красок, приукрашивания или очернения.</KBD>
Теория создания имиджей именуется имиджелогией, или иконикой.
</BODY></HTML>
Тег <KBD> появился в версии HTML 2 0 Чаще всего содержимое данного тега вы-
водится моноширинным шрифтом
Тег <SAMP> используется с целью выделения диалога пользователя с компьюте-
ром Синтаксис: Добавление текста с другой страницы 55
<SAMP> Системное сообщение компьютера </SAMP>
Пример использования этого тега можно посмотреть на рис 2 23, а код програм-
мы — в листинге 2 23
Листинг 2 23 Пример создания веб-страницы, содержащей тег <SAMP>
<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD>
<BODY BGCOLOR=#EC1DDA><FONT size=5>Корпоративная реклама –
<SAMP>реклама, создающая потребность не в конкретной марке товара, а в полном товарном
ассортименте.</SAMP></FONT></BODY></HTML>
Рис 2 23 Веб-страница, содержащая тег <SAMP>
Тег <SAMP> появился в версии HTML 2 0 Обычно содержимое данного тега ото-
бражается моноширинным шрифтом
Добавление текста с другой страницы
Тег <INS> позволяет вывести на странице текст с другой страницы, указав ее адрес
Определяет и отображает текст, который был включен в документ по сравнению с
его предыдущей версией Визуально вставленный текст выделяется подчеркива-
нием, например:
<INS CITE=»www.uprint.spb.ru/listing.htm» DATETIME=»2004-08-15»> (доступный фрагмент
текста) </INS>
Для вывода даты предусмотрен атрибут DATETIME
Пример можно посмотреть на рис 2 24, а код программы — в листинге 2 24
Листинг 2 24 Пример создания веб-страницы, содержащей тег <INS>
<HTML><HEAD><TITLE>Пример вставки</TITLE></HEAD>
<BODY BGCOLOR=CAAAAA><INS CITE=»Листинг 2.21.htm» DATETIME=»2004-8-15»> ДОСТУПНЫЙ
ФРАГМЕНТ </INS></BODY></HTML>
Данный тег появился в версии HTML 4 0 Он может быть элементом блочного
либо текстового уровня Изменение вложенного блокового содержания должно
выполняться на нижнем уровне 56 Урок 2. Текст
Рис 2 24 Веб-страница, содержащая тег <INS>
Расстановка пробелов
Если набрать текст в Блокноте и расставить в нем множество пробелов, то браузер
проигнорирует эти пробелы и сократит их до минимума, а если воспользоваться
тегом <LISTING>, который выводит блок текста моноширинным шрифтом, то текст
отразится таким, как он есть, со всеми пробелами и т д
Пример текста с множеством пробелов, окруженного тегами <LISTING> и </LISTING>,
можно посмотреть на рис 2 25, а код программы — в листинге 2 25
Рис 2 25 Веб-страница, содержащая текст и теги <LISTING>
Листинг 2 25 Пример создания веб-страницы, содержащей текст и теги <LISTING>
<HTML><HEAD><TITLE>Цитата</TITLE></HEAD>
<BODY BGCOLOR=BBCCFF>
Реклама - одна из форм маркетинговых коммуникаций,
Оплаченная рекламодателем, имеющая неличный характер,
распространяемая через СМИ с целью оказать воздействие на целевую аудиторию.
<LISTING> Существуют следующие виды рекламы:
товарная,
корпоративная,
социальная,
политическая.
</LISTING></BODY></HTML> Подведем итоги 57
Подведем итоги
В этом уроке рассматриваются основные теги, предназначенные для работы с тек-
стом Тег <Hx> предназначен для создания заголовков Теги <FONT>, <P>, <PRE>,
<B>, <I>, <TT>, <STRONG>, <U>, <BIG>, <SMALL>, <STRIKE>, <SUB>, <SUP>, <BLOCKQUOTE>,
<DFN>, <CITE>, <EM>, <CODE>, <KBD>, <VAR>, <SAMP>, <WBR>, <BASEFONT>, <DIV>, <SPAN>,
<INS>, <Q>, <LISTING>, <S> позволяют форматировать текст, изменять его цвет, кра-
сиво располагать на странице Для разрыва строк служат теги <BR> и <NOBR> Тег
<ACRONYM> используется для создания всплывающих подсказок Урок 3 Графика
Одна из наиболее привлекательных черт WWW — возможность вклю- WWW — возможность вклю- — возможность вклю-
чения ссылок на графические файлы в HTML-документ. Графика —
лучшее украшение веб-узла. Под графикой подразумевают значки,
рисунки, фотографии и карты изображений, занимающие часть окна
браузера.
При размещении графики на веб-странице необходимо следить за
тем, чтобы размер графических файлов был как можно меньше.
Хотя в принципе размеры графических файлов в байтах могут быть
неограниченными, следует помнить, что передача большого файла
может занять очень много времени, особенно при низкой пропуск-
ной способности линий. Если тот, кто смотрит вашу веб-страницу,
платит деньги за время нахождения в Интернете, вряд ли он захочет
смотреть ваши следующие страницы, учитывая, что первая страница
загружается очень долго. В этом уроке будут рассмотрены приемы
работы с графикой.
Урок Размещение графики на веб-странице 59
Размещение графики на веб-странице
Для вставки графики в веб-страницу используется тег <IMG> Графика позволяет
значительно улучшить внешний вид и функциональность документов Тег <IMG>
(от англ image — изображение) появился в HTML версии 2 0 Он имеет атрибуты
SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP, ALIGN, BORDER, HSPACE, VSPACE
Пример:
<img src="url" alt="текст" height="длина" width="длина"
align=top|middle|bottom|left|right ismap>.
Атрибут SRC Атрибут SRC (от англ source — источник) определяет местора-
сположение изображения, включаемого в состав документа URL — обязатель-
ный параметр, который указывает браузеру, где находится рисунок Рисунок
должен храниться в графическом формате, например в формате GIF или JPG
Если графический файл находится в том же каталоге, что и содержащий его
HTML-документ, достаточно указать только имя этого файла, например:
<img src=file1.gif>
Если графический файл находится на том же сервере, что и содержащий его
HTML-документ, но в другом каталоге, следует указать имя каталога и имя
этого файла, например:
<img src=picture/file1.gif>.
Если графический файл находится не на том сервере, на котором находится со-
держащий его HTML-документ, необходимо указать полный адрес этого фай-
ла, например:
<img src="http://www.uprint.ru/picture/file1.gif">.
Атрибут ALT Необязательный атрибут ALT задает альтернативный текст, кото-
рый выводится браузером, пока идет загрузка изображения (или браузером, не
поддерживающим отображение графики) Обычно это короткое описание изо-
бражения, которое пользователь мог бы или сможет увидеть на экране Если
этот атрибут не задан, на месте изображения большинство браузеров выводят
значок, щелкнув на котором, пользователь сможет увидеть изображение Атри-
бут ALT рекомендуется указывать, если ваши пользователи применяют браузер,
не поддерживающий графический режим, например Lunix
Атрибут LONGDESC Необязательный атрибут LONGDESC задает ссылку на
удаленный ресурс
Атрибут HEIGTH Необязательный атрибут HEIGTH определяет высоту рисун-
ка в пикселах Если данный параметр не указан, используется оригинальная
высота рисунка Этот параметр позволяет сжимать или растягивать изображе-
ния по вертикали, что дает возможность точнее контролировать внешний вид
документа Однако некоторые браузеры не поддерживают данный параметр
Иногда экранное разрешение на разных компьютерах может быть разным, по-
этому при задании абсолютной величины графического объекта следует быть
внимательным
Атрибут WIDTH Необязательный атрибут, используется для указания шири-
ны рисунка в пикселах 60 Урок 3. Графика
Атрибут ALIGN Необязательный атрибут, используется для точного пози-
ционирования объектов на экране Доступные значения:
top — верхний край объекта выравнивается по верхнему краю строки;
middle — центр объекта выравнивается по базовой линии строки;
bottom — нижний край объекта выравнивается по базовой линии строки;
left — объект выравнивается по левому краю, при этом возможно обтекание
объекта текстом;
right — объект выравнивается по правому краю, при этом возможно обтека-
ние объекта текстом
Если данный параметр не указан, большинство браузеров располагает изобра-
жение в левой части экрана, а текст — справа от него
Атрибут BORDER Атрибут BORDER задает толщину обрамления для изобра-
жения
Атрибут VSPACE Атрибут VSPACE позволяет задать размер в пикселах пустого
пространства над и под изображением, чтобы текст не «наезжал» на изображение
Атрибут HSPACE Атрибут HSPACE позволяет задать размер в пикселах пустого
пространства слева и справа от изображения, чтобы текст не «наезжал» на изо-
бражение
Форматы графических файлов
Большинство форматов файлов в компьютерной графике позволяет хранить ин-
формацию об изображении как о наборе точек Точно так же (в виде набора точек)
изображения выводятся на экран
Обычно в Интернете используются два растровых формата — JPEG и GIF Кроме
того, в Интернете довольно много изображений, имеющих форматы BMP и PCX
Специалисты считают, что довольно большие перспективы есть у формата PNG —
самого современного формата переносимой сетевой графики
Формат GIF
Формат GIF (Graphic Interchange Format — формат обмена графическими дан-
ными) служит для записи и хранения растровых графических изображений Этот
формат был разработан корпорацией Compuserve с использованием технологии
Unisys Формат GIF применяется для хранения 256-цветных изображений (или
изображений с меньшим количеством цветов), сжатых по методу Лемпела—Зива
(LZW) Тот же метод сжатия характерен для архиваторов файлов
Формат GIF дольше других представлен в Интернете и поддерживается разными
графическими редакторами В нем используются индексированные цвета Вер-
сия GIF89a этого формата обеспечивает возможность чересстрочной разверт-
ки, что позволяет постепенно повышать качество принятого через канал связи
изображения Это самый распространенный формат изображений в Интернете Форматы графических файлов 61
Изображения в формате GIF хранятся в файлах с расширением .gif К достоин-
ствам GIF-изображений относится то, что вид изображения не зависит от браузе-
ра и платформы Лучше всего отображаются чертежи, рисунки, изображения с не-
большим количеством однородных цветов, прозрачные изображения и анимаци-
онные последовательности В GIF-изображениях используется алгоритм сжатия
без потери информации
Формат JPEG
Применяющийся в формате JPEG (Joint Photographic Expert Group — объеди-
ненная группа экспертов в области фотографии) алгоритм обработки изображе-
ний разработан группой экспертов как средство сжатия изображений с палитрой