Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Комолова.doc
Скачиваний:
16
Добавлен:
27.08.2019
Размер:
1.1 Mб
Скачать

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 — объеди-

ненная группа экспертов в области фотографии) алгоритм обработки изображе-

ний разработан группой экспертов как средство сжатия изображений с палитрой