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

33 Удивительнейшие буквы русского алфавита передают человечеству события, факты,

настроение, переживания, радость и вдохновение, то есть все, что можно видеть,

слышать, пробовать, трогать, чем можно наслаждаться. Как же буквы могут передать

огромное количество информации? Буквы образуют слово, слова собираются в предложения,

предложения могут составить целую книгу. Книги состоят из текста и рисунков.

</BODY>

</HTML>

Как видно на рисунке, то что находится между тегами <TITLE> и </TITLE>, не появ-

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

в первую очередь и отображается в заголовке окна браузера Если текст заголовка

достаточно информативен, пользователь в процессе поиска нужных документов уже

на этапе загрузки может определить, действительно ли ему нужен этот документ,

а если не нужен, то сразу отказаться от его загрузки и перейти к загрузке следующего

Текст названия требуется и при создании закладки на данный документ, с этой

точки зрения его информативность также очень важна

Уровни заголовков

Заголовки различного уровня позволяют структурно разделить формально не

ограниченный по длине текст на отдельные разделы и абзацы Первый уровень

заголовков (самый высокий) обозначается цифрой 1, следующий — 2, и т д Теги   Уровни заголовков   37

с меньшими номерами определяют заголовки более высокого уровня Большин-

ство браузеров поддерживает интерпретацию шести уровней заголовков, опреде-

ляя каждому из них собственный стиль Заголовок самого верхнего уровня имеет

признак 1 Синтаксис заголовка первого уровня (H от англ head — заголовок):

<H1> Заголовок первого уровня </H1>

Заголовок любого уровня может быть представлен в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

Здесь x — цифра от 1 до 6, определяющая уровень заголовка

Атрибут ALIGN управляет горизонтальным выравниванием, принимая значения

LEFT (влево), CENTER (по центру), RIGHT (вправо) или JUSTIFY (по ширине от левой

границы до правой)

На рис 2 2 показано окно программы, содержащей заголовки, при просмотре

в браузере (листинг 2 2)

Рис 2 2  Веб-страница с заголовками разных уровней

Листинг 2 2  Пример создания веб-страницы с заголовками

<HTML>

<HEAD>

<TITLE> Заголовки </TITLE>

</HEAD>

<BODY>

<H1> Заголовок 1 - Транспортный протокол</H1>

<H2> Заголовок 2 - Протокол маршрутизации</H2>

<H3> Заголовок 3 - Протокол передачи файлов</H3>

<H4> Заголовок 4 - Протокол передачи почты</H4>

<H5> Заголовок 5 - Сетевой протокол</H5>

<H6> Заголовок 6 - Протокол поддержки сетевого адреса</H6>

</BODY>

</HTML>38     Урок 2. Текст

Данный тег появился в HTML версии 2 0 Заголовки более высокого уровня ото-

бражаются шрифтом большего размера

Шрифт

Тег <FONT> позволяет с помощью атрибутов управлять размером и цветом шрифта

Атрибут SIZE управляет размером шрифта Шрифт может иметь размер от 1 до 7

Можно указать размер шрифта непосредственно цифрой или задать смещение

относительно базового значения (по умолчанию — 3) в положительную или от-

рицательную сторону Соответствие размера шрифта величине в пунктах иллю-

стрирует табл 2 1

Таблица 2 1  Типичные размеры шрифтов и их величины в пунктах

Размер шрифта Типичная величина в пунктах

1 8

2 10

3 12

4 14

5 18

6 24

7 36

Размер шрифта можно изменить при помощи следующей команды:

<FONT SIZE=+|- n>

Для изменения базового значения служит такая команда:

<BASEFONT SIZE=n>

Пример использования шрифтов разного размера показан на рис 2 3 (листинг 2 3)

Рис 2 3  Веб-страница с буквами разного размера

Листинг 2 3  Пример создания веб-страницы, содержащей буквы разного размера

<HTML>

<HEAD>

<TITLE> Размер шрифта </TITLE>  Шрифт   39

</HEAD>

<BODY>

<P>П

<FONT SIZE=+1>Е</FONT>

<FONT SIZE=+2>Т</FONT>

<FONT SIZE=+3>Е</FONT>

<FONT SIZE=+4>Р</FONT>

<FONT SIZE=+3>Б</FONT>

<FONT SIZE=+2>У</FONT>

<FONT SIZE=+1>Р</FONT>

Г</P>

</BODY>

</HTML>

Данный тег появился в HTML версии 3 2, однако в настоящее время он не реко-

мендован к применению Вместо него желательно использовать средства каскад-

ных листов стилей (см урок 17)

Чтобы изменить цвет шрифта используется атрибут COLOR тега <FONT>:

<FONT COLOR=»#xxxxxx»>

Цвет указывается в цветовой модели RGB соответствующими значениями цве-

товых составляющих в шестнадцатеричном формате Например, белый цвет обо-

значается FFFFFF, черный — 000000, синий — 0000FF и т п

Пример веб-страницы, содержащей текст разного цвета, показан на рис 2 4

(листинг 2 4)

Рис 2 4  Веб-страница с разноцветным текстом

Листинг 2 4  Пример создания веб-страницы с разноцветным текстом

<HTML>

<HEAD>

<TITLE> Цвет шрифта </TITLE>

</HEAD>

<BODY>

<FONT COLOR=»#FF0000»>

Красный </FONT>

<FONT COLOR=»#00FF00»>40     Урок 2. Текст

Зеленый </FONT>

<FONT COLOR=»#0000FF»>

Синий </FONT>

</BODY>

</HTML>

Тег <BASEFONT> определяет базовый (основной для всей страницы) размер шриф-

та, имеет открывающий дескриптор SIZE — атрибут тега, который определяет ба-

зовый размер этого шрифта SIZE меняется в пределах от 1 до 7 По умолчанию

используется величина 3 Пример применения этого тега можно посмотреть на

рис 2 5, а код программы — в листинге 2 5

Рис 2 5  Веб-страница, содержащая тег <BASEFONT>

Листинг 2 5  Пример создания веб-страницы, содержащей тег <BASEFONT>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD>

<BODY BGCOLOR=#EEEAAA><BASEFONT size=8>Логотип - элемент фирменного стиля,<BR>

<BASEFONT size=6>оригинальное начертание наименования рекламодателя,<BR>

<BASEFONT size=5>одна из форм торгового знака

</BODY></HTML>

Тег <BASEFONT> появился в версии HTML 3 2 Вместо данного тега рекомендует-

ся использовать средства каскадных листов стилей (см урок 17), а шрифт может

быть изменен с помощью тега <FONT>

Абзацы и разрывы строк

В HTML-документе невозможно разбить текст на абзацы, используя клавишу

Enter Нажатие этой клавиши улучшает внешний вид исходного текста, но не вли-

яет на получаемое изображение Для перехода на следующую строку следует вос-

пользоваться тегом <BR>, а для создания пустой строки — тегом <P>

Тег <P> позволяет разделить текст на абзацы Если этого не сделать, документ бу-

дет выглядеть как один большой абзац

ALIGN — атрибут выравнивания тега <P> Этот атрибут может иметь значения

LEFT, CENTER, RIGHT, JUSTIFY, что позволяет выровнять абзац соответственно по   Абзацы и разрывы строк   41

левому краю, по центру, по правому краю или по ширине Например, следующая

запись выравнивает абзац по левому краю:

<P ALIGN=LEFT>

Данный тег появился в HTML версии 2 0, он не может содержать другие откры-

вающие и закрывающие теги, то есть между тегами <P> и </P> может быть только

текст и разрыв строки, но не другие теги

Тег <BR> извещает браузер о разрыве строки Дополнительный параметр CLEAR по-

зволяет расширить возможности тега <BR>, обеспечивая не просто перевод стро-

ки, а размещая следующую строку, начиная с левой (LEFT), правой (RIGHT), обеих

(ALL) границ окна браузера, или обычным способом (NONE) Например, если рядом

с текстом слева должен располагаться рисунок, то можно использовать тег <BR>

для смещения текста под рисунок

Данный тег появился в HTML версии 2 0 В настоящее время атрибут CLEAR не

рекомендован к применению, вместо него желательно использовать средства ка-

скадных листов стилей (см урок 17)

Тег <DIV> (от англ division — раздел) позволяет выделить в структуре докумен-

та несколько разделов Он является блочным элементом, функционирующим

во многом подобно элементу <P> Если закрывающий тег </P> опущен, то <DIV>

эффективно заменяет его, начиная новый абзац Он может иметь атрибут ALIGN,

который имеет значения LEFT, CENTER или RIGHT и указывает отступ Каждый сле-

дующий раздел игнорирует значение ALIGN, заданное для предыдущего раздела

Синтаксис:

<DIV ALIGN=отступ> Текст раздела </DIV>

Пример использования этого тега можно посмотреть на рис 2 6, а код програм-

мы — в листинге 2 6

Рис 2 6  Веб-страница, содержащая тег <DIV>

Листинг 2 6  Пример создания веб-страницы, содержащей тег <DIV>

<HTML><HEAD><TITLE> Теги форматирования символов</TITLE></HEAD>

<BODY BGCOLOR=#EEAAAE><DIV ALIGN=CENTER> Аттитюд - социально-психологическая установка,

внутренняя потребность человека к каким-либо действиям (например, к покупке

рекламируемого товара)</DIV> 42     Урок 2. Текст

<DIV> Афиша - старейшее средство наружной рекламы, выполненное на плотной бумаге или

картоне </DIV>

<DIV ALIGN=RIGHT> Булл-Марк - реклама издательства, вкладываемая в книгу, журнал,

каталог, в виде красочной закладки</DIV>

<DIV> Марка - имя, термин, знак, символ, рисунок или их сочетание, идентифицирующее

товары или услуги одного или нескольких производителей (продавцов) и отличающие их от

товаров и услуг конкурентов</DIV>

</BODY></HTML>

Так как данный тег появился в версии HTML 3 2 и используется в сочетании

с каскадными листами стилей, он представляет собой мощное средство задания

структуры документа

Выравнивание

Как уже упоминалось, атрибут ALIGN позволяет выровнять текст по левому или

правому краю, по центру или по ширине страницы

По умолчанию текст, графика и элементы таблицы выравниваются по левому

краю и не выравниваются по правому краю, то есть начало строк находится

на одном уровне, а конец — на разных Выравнивание по левому краю задается

атрибутом ALIGN=LEFT, выравнивание по правому краю — атрибутом ALIGN=RIGHT

Центрирование элементов документа можно производить разными способами,

например с помощью тега

<ALIGN=CENTER>

Вы можете также центрировать все элементы документа в окне браузера Для

этого можно использовать тег <CENTER> Все элементы между тегами <CENTER>

и </CENTER> будут находиться в центре окна

Центрирование можно производить и в абзаце:

<P ALIGN=CENTER>

Пример веб-страницы, содержащей текст, выровненный различными способами,

показан на рис 2 7 (листинг 2 7)

Рис 2 7  Веб-страница с текстом, выровненным различными способами  Предварительное форматирование   43

Листинг 2 7  Пример выравнивания текста различными способами

<HTML>

<HEAD>

<TITLE> Центрирование и выравнивание </TITLE>

</HEAD>

<BODY>

<P ALIGN=CENTER> Атрибут ALIGN позволяет выровнять текст по левому или правому краю, <BR>

по центру или по ширине </P>

<P ALIGN=RIGHT>По умолчанию текст, графика и элементы таблицы выравниваются по левому

краю <BR>

и не выравнивается по правому краю, то есть начало строк находится на одном уровне,

а конец - на разных.<BR>

Выравнивание по левому краю задается атрибутом ALIGN=LEFT. Выравнивание по правому краю

задается<BR>

атрибутом ALIGN=RIGHT </P>

<P ALIGN=LEFT>Центрирование элементов документа можно производить разными способами,<BR>

например с помощью тега ALIGN=CENTER</P>

</BODY>

</HTML>

Предварительное форматирование

Тег <PRE> позволяет представлять на экране текст со специфическим форматиро-

ванием Предварительно отформатированный текст заканчивается завершающим

тегом </PRE> Внутри предварительно отформатированного текста разрешается ис-

пользовать:

символы перевода строки; 

символы табуляции (сдвиг на 8 символов вправо); 

непропорциональный шрифт, устанавливаемый браузером 

Форматирование абзаца, заданное другими тегами, такими как <Hx> и <ADDRESS>,

будет игнорироваться браузером при помещении их между тегами <PRE>

и </PRE>

Рис 2 8  Веб-страница с текстом, имеющим специфическое форматирование44     Урок 2. Текст

Пример веб-страницы, содержащей текст со специфическим форматированием,

показан на рис 2 8 (листинг 2 8)

Листинг 2 8  Пример специфического форматирования текста

<HTML>

<HEAD>

<TITLE> Специфическое форматирование </TITLE>

</HEAD>

<BODY>

<PRE>

Тег предварительного форматирования PRE позволяет представлять текст со специфическим <BR>

форматированием на экране. Предварительно отформатированный текст заканчивается<BR>

завершающим тегом /PRE. Внутри предварительно отформатированного текста разрешается<BR>

использовать:

· символы перевода строки

· символы табуляции (сдвиг на 8 символов вправо)

· непропорциональный шрифт, устанавливаемый браузером

</PRE>

</BODY>

</HTML>

Данный тег появился в HTML версии 2 0 В заранее отформатированный текст

нежелательно включать символы табуляции, поскольку при этом может нару-

шиться выравнивание

Пример, который можно посмотреть на рис 2 9, а код программы в листинге 2 9,

содержит текст разной высоты и тег <PRE>

Рис 2 9  Веб-страница с текстом разной высоты

Листинг 2 9  Пример создания веб-страницы, содержащей текст разной высоты

<HTML><HEAD><TITLE>Размер шрифта</TITLE></HEAD>

<BODY BGCOLOR=VIOLET>

<PRE> Размер шрифта изменяется в пунктах </PRE>

<FONT SIZE=2> 1пункт равен 1/72 дюйма </FONT>

<FONT SIZE=7> 1пункт равен 0,353 мм </FONT>

<PRE><FONT SIZE=+,- n> текст</FONT>

n - число пунктов,на которое необходимо увеличить или уменьшить размер шрифта  Задание начертания   45

Теги PRE - теги отформатированного текста

</HIML></PRE></BODY></HTML>

Задание начертания

Для выделения текстовой информации в документах можно использовать различ-

ное начертание Большинством браузеров поддерживаются полужирное и курсив-

ное начертание, моноширинный шрифт, большой и маленький шрифты, а также

подстрочный и надстрочный индексы Эти и подобные им варианты начертания

задаются следующими тегами:

<B>Этот текст жирный </B>

<I>Этот текст наклонный </I>

<U>Этот текст подчеркнутый </U>

<TT>Этот текст с моноширинным шрифтом </TT>

Этот текст <BIG> большой </BIG>

Этот текст <SMALL> маленький </SMALL>

Этот текст <STRONG> увеличенный </STRONG>

Этот текст <STRIKE> перечеркнутый

Этот текст <SUB> подстрочный </SUB>

Этот текст <SUP> надстрочный </SUP>

Результат применения этих тегов показан на рис 2 10 (листинг 2 10)

Рис 2 10  Веб-страница с текстом разного начертания

Теги <B>, <I>, <TT>, <STRONG> появились в HTML версии 2 0, теги <U>, <BIG>, <SMALL>,

<STRIKE>, <SUB>, <SUP> — в HTML версии 3 2 Хотя пользоваться этими тегами не

запрещено, консорциум W3C (World Wide Web Consortium) рекомендует приме-

нять вместо них средства каскадных листов стилей (см урок 17)

Листинг 2 10  Пример создания веб-страницы, содержащей текст разного начертания

<HTML>

<HEAD>

<TITLE> Стили шрифта </TITLE>46     Урок 2. Текст

</HEAD>

<BODY>

<B> Этот текст жирный </B><BR>

<I> Этот текст наклонный </I><BR>

<U> Этот текст подчеркнутый </U><BR>

<TT> Этот текст с непропорциональным шрифтом </TT><BR>

Этот текст <BIG> большой </BIG><BR>

Этот текст <SMALL> маленький </SMALL><BR>

Этот текст <STRONG> увеличенный </STRONG><BR>

Этот текст <STRIKE> перечеркнутый </STRIKE><BR>

Этот текст <SUB> подстрочный </SUB><BR>

Этот текст <SUP> надстрочный </SUP><BR>

</BODY>

</HTML>

Тег <VAR> используется с целью дополнительного выделения переменных в коде

Синтаксис:

<VAR> переменная </VAR>

Пример использования этого тега можно посмотреть на рис 2 11, а код програм-

мы — в листинге 2 11

Рис 2 11  Веб-страница, содержащая тег <VAR>

Листинг 2 11  Пример создания веб-страницы, содержащей тег <VAR>

<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD>

<BODY BGCOLOR=#EC1DFC><FONT SIZE=6> Доджер - <VAR>рекламный проспект

</VAR></FONT></BODY></HTML>

Тег <VAR> появился в версии HTML 2 0 Он определяет переменную или параметр

программы и обычно отображается курсивом

Тег <SPAN> позволяет выделить фрагмент текста для его последующего форматиро-

вания, однако в отличие от тега <DIV> не начинает новый абзац Тег <SPAN> создает

структуру текстового уровня, определяемую пользователем Пример использова-

ния этого тега можно посмотреть на рис 2 12, а код программы — в листинге 2 12

Данный тег появился в HTML 4 0 Так как он используется в сочетании с каскад-

ными листами стилей (см урок 17), в данном примере его преимущества не слиш-

ком заметны   Задание начертания   47

Листинг 2 12  Пример создания веб-страницы, содержащей тег <SPAN>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD>

<BODY BGCOLOR=#EAAAAc>

Медиапланирование -<SPAN><I> составление оптимального плана размещения рекламы в СМИ на

основе маркетинговых и медиаисследований. </SPAN></I>

Паблисити - <SPAN><I>неоплаченная информация, стимулирующая спрос на товар или деловую

кампанию посредством распространения о них коммерческих и (или) социальных сведений

в средствах коммуникации</SPAN></I>

<SPAN><I>Характерные признаки: достоверность (в сравнении с рекламными сообщениями);

широкий охват аудитории (новинка, сенсация, напоминание); броскость (эффективная

и многожанровая форма).</SPAN></I></BODY></HTML>

Рис 2 12  Веб-страница, содержащая тег <SPAN>

Тег <S> выводит текст зачеркнутым Все, находящееся между тегами <S> и </S>, бу-

дет написано перечеркнутым шрифтом Это встроенный парный тег Обязательных

атрибутов не имеет Пример использования тега можно посмотреть на рис 2 13,

а код программы — в листинге 2 13

Рис 2 13  Веб-страница, содержащая тег <S>

Листинг 2 13  Пример создания веб-страницы, содержащей тег <S>

<HTML><HEAD><TITLE>Перечеркнутый текст</TITLE></HEAD>

<BODY BGCOLOR=#CCCCFF> <S> Хот-шоп-творческое рекламное ателье, выполняющее отдельные

функции дизайна по созданию элементов фирменного стиля, разработке оригинал-макетов

печатной рекламы.

</S></BODY></HTML>48     Урок 2. Текст

Тег <S> появился в версии HTML 4 0 Вместо данного тега консорциум W3C реко-

мендует использовать средства каскадных листов стилей (см урок 17)

Неразрывные строки

Тег <NOBR> (от англ no break — без разрыва) дает команду браузеру отображать

весь текст в одной строке, не разрывая ее Этим тегом размечается текст, который

необходимо уместить на одной строке, причем этот текст ни при каких обстоя-

тельствах не должен быть разбит на несколько строк Таким образом, тег <NOBR>

противоположен по функциям тегу <BR>

Если строку текста разместить между тегами <NOBR> и </NOBR>, то браузер не

начнет новую строку, даже если она выйдет за границы экрана; вместо этого брау-

зер позволит горизонтально прокручивать окно Пример такой строки показан

на рис 2 14 (листинг 2 14)

Рис 2 14  Веб-страница с неразрывной строкой

Листинг 2 14  Пример создания веб-страницы, содержащей текст в одной строке без 

разрыва

<HTML>

<HEAD>

<TITLE> Строки без разрыва </TITLE>

</HEAD>

<BODY>

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает

какого-либо разбиения где бы то ни было </NOBR>

</BODY>

</HTML>

Если все же необходимо разбить строку на две, то в нужное место вставляется тег

<WBR>, хотя в последнее время он не рекомендуется к использованию

Тег <WBR> задает «мягкий разрыв строки» внутри тега <NOBR> С помощью тега

<WBR> в данном месте текста при необходимости браузер выполняет переход на

новую строку Пример использования этого тега можно посмотреть на рис 2 15,

а код программы — в листинге 2 15   Вставка цитат   49

Листинг 2 15  Пример создания веб-страницы, содержащей теги <WBR> и <NOBR>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD>

<BODY BGCOLOR=#EB1DDA><FONT size=5><NOBR> Ключевые понятия - <WBR>

Классифицированная реклама<WBR> Профессиональный риск<WBR> Персонализация рекламы<WBR>

Фактор интеграции<WBR> Бесприбыльные связи<WBR></NOBR> </FONT></BODY></HTML>

Рис 2 15  Веб-страница, содержащая теги <WBR> и <NOBR>

Вставка цитат

Тег <BLOCKQUOTE> определяет текст как цитату большого размера и отображает

его с отступами от левого и правого краев Этот тег позволяет расположить текст

компактно в центре страницы При использовании этого тега несколько раз,

текст все больше сжимается к центру Тег <BLOCKQUOTE> имеет атрибут CITE=»URI»,

где URI задает цитируемый документ или сообщение URI (Uniform Resource