Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.

Атрибут src = имя файла

Всем хорошо известна таблица умножения. Она представляет собой прямоугольник, расчерченный на клетки. Вертикальные ряды клеток образуют столбцы, горизонтальные -- строки. Каждая строка и столбец в таблице может иметь свой заголовок. Заголовки записываются в первой строке и первом столбце.

В общем случае таблицы используют для хранения информации с двумя характерными признаками. Значения одного признака расписано в заголовках строк, другого -- в заголовках столбцов. А в каждую клетку таблицы заносят значение, одновременно обладающее признаком строки и столбца, на пересечении которых она расположена.

Для таблицы умножения признаками служат значения сомножителей. Первый признак -- это значение первого сомножителя, второй -- значение второго.

Как задать таблицу

Атрибуты команды TABLE

Атрибуты команды TD (TH)

Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):

Содержимое обычной ячейки по умолчанию горизонтально выравнивается по левому краю, а ячейки-заголовка -- по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом.

Команды TD и TH имеют следующие атрибуты:

Многоликие таблицы

Наложение картинок

Еще одна необычная практика использования таблиц: построение коллажей.

Постановка задачи. Имеются две картинки:

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

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

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

Да... Получилось не очень хорошо. Для задания высоты ячейки (и таблицы) создатели HTML не придумали атрибута. Мы видим только верхний кусочек фоновой картинки.

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

Нарисовать вспомогательную картинку очень просто -- это должен быть одноцветный GIF, в котором единственный цвет объявлен прозрачным. Тогда пользователь на экране эту картинку и не увидит:

Замечание

На самом деле рисовать невидимый GIF можно любой величины. Оптимальной является картинка в один пиксел. Ведь мы всегда можем указать экранные размеры в команде IMG, и наша вспомогательная картинка будет растягиваться до нужного размера. Искажений можно не опасаться -- их не будет, а кроме того, эту картинку нельзя увидеть на экране ни в какую лупу!

Для того, чтобы использование невидимой картинки empty.gif (из каталога pic) было более понятным, ниже она заменена на такую же однопикселную картинку empty1.gif, но без режима "прозрачности", а картинка с лосем показана с рамкой:

Таблицы стилей

Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными.

С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).

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

Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.

Способы определения таблиц стилей

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

Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:

ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <link> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.

Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа;

внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:

<STYLE TYPE="text/CS3">

<! --

BODY { font-family: Arial, Helvetica; }

INPUT { background-color: ICECECE; }

-- >

</STYLE>

Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);

включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например:

<Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana;"> Текст параграфа...

В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:

<TABLE>

<TR>

<TD CLASS="header"X/TD>

<TD CLASS="text"X/TD>

</TR>

</TABLE>

Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):

<STYLE TYPE="text/css">

<! --

.header { font-weight: bold; color: gray; }

.text { color: black; font-size: llpx; }

-->

</STYLE>

В данном случае текст табличной ячейки класса .header будет отображаться жирным начертанием и серым цветом, а ячейки класса . text -обычным начертанием, черным цветом и размером шрифта 11 пикселов;

импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:

<STYLE TYPE-"text/css">

<! --

@import: url(style.ess);

-->

</STYLE>

Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов -- отдельные конструкции либо в теге <style>, либо в кодовых конструкциях самих тегов.

Листинг. Совмещение различных способов определения стилевого шаблона CSS

<HTML> <HEAD>

<Т1ТЬЕ>Совмещение различных способов определения CSS</TITLE>

<LINK REL="stylesheet" TYPE="text/css" HREF="style . css"> <STYLE TYPE="text/css"> <! --

P { text-align: justify; color: green; }

.title { color: blue; font-weight: bold; font-size: 16px; } -- >

</STYLE> </HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="|OOFFOO" ALINK="IOOFFOO" VLINK="blue">

<FONT CLASS="title">Cnoco6bi определения шаблонов CSS</FONT>

Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования.

<UL>

<Ы>Ссьшка на внешний файл

<Ы>Внедрение в документ

<Ы>Включение в теговые конструкции

<Ы>Импортирование

</UL>

</BODY>

</HTML>

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

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

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

При использовании способа включения стиля в сам документ наличие слишком большого количества шаблонов CSS заметно увеличит конечный размер HTML-страницы, что скажется на времени загрузки документа в браузере.

CSS и Dynamic HTML -- просто и привлекательно! 187

При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape "плохо относится" к использованию символа нижнего подчеркивания ( _ ) в указании классов для элементов HTML (.news_titie, ._about и т. д.). Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то CLASS="text">TeKCT</TD> выведет текст по умолчанию, a <tdxfont CLASS="text">TeKCT</FONT></TD> отобразит текст заданным стилем.

Запись шаблона CSS

Любое правило таблицы стилей CSS состоит из селектора и определения шаблона.

Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора). Определение шаблона -- это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки.

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет -- синий, шрифт -- Tahoma, либо Verdana, либо Arial.

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

Сравнив запись вида:

НЗ { color: blue; }

НЗ { font-family: Tahoma, Verdana, Arial; }

И

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

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

Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например:

TD, ТН, Р, DIV { text-align: justify; color: gray: font-size: Юрх; }

Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>), а также параграфов (<р>) и блоков (<div>), а именно: тивыравнивания -- по ширине, цвет -- серый, размер шрифта -- 10 пикселов.

Селекторы

В качестве селектора CSS могут выступать:

О элементы HTML. Переопределение стиля для конкретного элемента страницы:

BODY { color: orange; }

В этом случае весь текст в пределах раздела body будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек;

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

.red { color: red; }

В этом случае любой элемент HTML, позволяющий менять цвет, будет отображаться красным, если ему присвоить класс . red:

<FONT CLASS="red">TeKCT красным цветом</ГОЫТ>

ИЛИ

<HR CLASS="red">

Если мы дополним селектор класса наименованием конкретного HTML-элемента, то действие стилевого правила будет распространяться только на данный элемент:

HR.red { color: red; }

При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваемый типереопределения стиля. Например, запись вида:

HR { text-align: justify; }

будет бессмысленной, т. к. горизонтальный разделитель относится к области структурного форматирования и не может содержать текст, который, согласно стилевому правилу, следует растянуть по ширине;

идентификаторы. Запись идентификатора начинается с символа # (диез) и заканчивается наименованием:

fblack { background-color: black; }

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

<TD 1П="Ыас1<">Ячейка черного цвета</ТО>

Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом -- чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте). В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах.

В заключение необходимо обратить особое внимание на невозможность сочетания селекторов различных типов. Нельзя одновременно переопределить стиль для стандартного элемента HTML и для него же, но по конкретному классу/идентификатору.

Псевдоклассы

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

В основном, псевдоклассы предназначены для задания различных типов форматирования по нескольким разновидностям элементов. Рассмотрим функциональность псевдоклассов на примере гиперссылок.

Согласно спецификации HTML и стандарту CSS, гиперссылка может принимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши

(hover). Первые три СОСТОЯНИЯ (link, visited, active) обычно ПрОПИСЫ-

ваются в теге <body> HTML-документа (уровень CSS 1). Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover).

Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне:

A:link { color: blue; }

A:active { text-decoration: underline; }

A:visited { color: gray; }

A:hover { color: orange; }

В данном случае все присутствующие в электронном документе гиперссылки будут отображаться в соответствии с заданным стилевым правилом. Однако часто возникает необходимость визуально выделить одни ссылки относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов:

A:active.red { color: red; } A:hover.red { color: blue; } A:active.white { color: white; } A:hover.white { color: black; }

Применение таблиц стилей CSS

Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<strong>), а в CSS -- конструкция font-weight: bold; (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида

text-decoration: underline; И Т. Д.

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

CSS в форматировании текста

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

Единицы измерения в таблицах стилей

Все единицы измерения свойств элементов в CSS можно разделить на абсолютные и относительные (табл. 9.1).

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

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

Единицы измерения CSS

Абсолютные

Относительные

in (дюйм ~ 2,5 см)

mm (миллиметр)

cm (сантиметр)

pt (пункт ~ 1/7 дюйма)

рс (пика =12 пунктов)

em (высота шрифта элемента)

ех (высота буквы х)

рх (пиксел)

% (процентное соотношение)

В табл. 9.2 приведены наиболее распространенные свойства форматирования текста в CSS.

Свойства форматирования текста в CSS

Свойство

font-family

font-size

font-style

font-weight

font-variant

text-decoration text-align text-transform letter-spacing

line-height Color Background-color

Формат записи

font-family: Tahoma, Arial;

font-size: llpx; font-style: italic; font-weight: bold;

font-variant: small-caps;

text-decoration: underline;

text-align: right;

text-transform: uppercase;

letter-spacing: lem;

line-height: 5mm; color: tFFFFFF;

background-color: white;

Функция

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

Размер шрифта

Выбор наклона текста (курсив)

Наличие/отсутствие жирного начертания

Преобразование строчных букв в прописные с изменением пропорций

Подчеркивание текста

Определение типа выравнивания текста

Выбор регистра букв Межбуквенный интервал

Межстрочный интервал Цвет текста Цвет фона текста

<FONT CLASS="text">

CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (<FONT STYLE="text-decoration: underline;">подчеркивание</ГОМТ>, <FONT ID="kursiv">KypCMB</FONT>, '<FONT STYLE="font-weight: bold;">жирное начертание</ГОЫТ>, <FONT STYLE= "font-family: Times New Roman;">выбор гарнитуры</ГОЫТ> и <SPAN CLASS="font">pa3Mep шрифта</ЗРШ>), с помощью средств CSS возможно <FONT С1АЗЗ="со1ог">изменять такие параметры</ГОЫТ>, как <FONT STYLE= "letter-spacing: Зрх;">межбуквенный</РОМТ> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;">тирегистра</ЕОМТ> (строчные и прописные буквы) и многое другое.

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

Структурное форматирование

Также каскадные таблицы стилей CSS привнесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: р, div и пр.

В табл. 9.3 приведены наиболее распространенные свойства структурного форматирования в CSS.

Таблица 9.3. Свойства структурного форматирования в CSS

list-style-image list-style-image: url(«bullet.gif");

Свойство

margin

border-width border-style border-color list-style-type

Формат записи

border-width: 20px;

border-style: solid;

border-color: gray;

list-style-type: square;

margin: Ipx 2px 3px 4px;

Функция

Ширина границы структурного элемента

Ти декоративного отображения границы элемента

Цвет границы структурного элемента

Тинумерованного или маркированного списка

Указание пути к графическому маркеру

Определение размера поля относительно верхнего, правого, ниж-

JavaScript

JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. После его изучения вы сможете заниматься разработкой Web-приложений на качественно новом уровне. Для написания сценариев JavaScript обязательно требуется знание языка HTML. В этой главе вы получите первое представление о JavaScript еще до того, как начнете создавать свой первый сценарий.

Здесь приводится следующая информация:

Q важность изучения JavaScript; а история JavaScript;

а некоторые различия между языками подготовки сценариев и языками программирования; а инструменты, необходимые для написания сценариев JavaScript.

Использование JavaScript

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

Таким образом, вы можете наблюдать JavaScript в действии, а создать подобные эффекты может любой человек, знающий этот язык. Причем без особого труда.

Рекомендация Следует понаблюдать за тем, что создают с помощью JavaScript другие разработчики. Это отличный способ найти свежее решение.

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

Важность изучения JavaScript