WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


1 января С Новым Годом!

Наша 12 января Со Старым Новым Годом!

15 февраля Мы любим Вас!

Прайс-лист 23 февраля Надеемся, повестка и телефоны обошла Вас стороной...

сайта 1 марта Рис. Для того чтобы расширить встроенный фрейм, пара метрами width и height — их можно задавать как в пикселях, так и в процентах Как вы могли заметить, точно такие параметры есть в дескрипторе Вообще, фрейм обычный и фрейм встроенный в смысле параметров очень похо жи. Как и в в дескрипторе внутренние отступы — расстояния от границ встроенного фрейма до его содержимого сверху, снизу, справа и слева определяются параметрами marginheight и Как и там, здесь можно отменить отображение рамки с помощью параметра и изменить ре жим прокрутки с помощью параметра scrolling. Наконец, встроенный фрейм, как и обычный, может иметь имя, описываемое параметром name, чтобы к нему можно было обращаться по гиперссылке.

Фреймы Резюме Фреймы — мощное средство HTML, позволяющее разделить пространство ок на броузера на самостоятельные информационные зоны.

Фреймовая система описывается в HTML-коде с помощью дескриптора В нем помещаются дескрипторы описывающие параметры от дельных фреймов. HTML-коды содержимого этих фреймов находятся в отдельных файлах, имена которых указаны в дескрипторах с помощью параметров src.

Деление окна броузера на части осуществляется с помощью параметров деск риптора Для деления по вертикали используется параметр cols, а по го ризонтали — параметр rows. Их значениями являются размеры (ширина или высо та) полученных областей, перечисленные через запятую, в пикселях или процентах.

Если размер области не имеет значения, его можно заменить символом *.

В одном дескрипторе может присутствовать только один из этих параметров — или cols, или rows. Поэтому для того чтобы разделить окно и по вертикали, и по горизонтали, используются вложенные фреймы: вместо описания очередного фрейма помещается фреймовая структура Каждый фрейм имеет рамку стандартной толщины и цвета. Эту рамку посети тель страницы может перетаскивать с помощью мыши. Если содержимое фрейма не помещается в отведенной ему области окна, то у этой области появляется по лоса прокрутки. Таковы свойства фрейма по умолчанию. Однако их можно изме нить. С помощью параметров дескрипторов и изменить толщину и цвет рамки или вовсе ее убрать, а также запретить прокрутку содер жимого фрейма и убрать с экрана соответствующую полосу прокрутки.

При ссылках на элементы фреймовой структуры широко используются имена фреймов, назначаемые с помощью параметра name. Затем эти имена присваивают ся параметру target дескриптора гиперссылки <А>.

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

Тесты 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

rows=70,*> ••• б) в)...

д) rows=*,*> rows=2*,*> ••• Глава ж) rows=**,*> и) rows=*> 2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

cols=*,*> в) д) cols=*,*> 3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

frameborder=no> в) border=no> Фреймы г) д) border=10> 4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

cols=*,*>

Pages:     | 1 | 2 || 4 |

«Самоучитель то освоению языка Язык HTML Г помощью этого руководства вы быстро язык HTML и узнаете как Создавать и редактировать гипертекстовые документы Структурировать, форматировать и размечать ...»

-- [ Страница 3 ] --

Иногда — правда, все реже и реже — встречаются броузеры, которые не поддерживают фреймы. Специально для них в HTML оставлен дескрип тор Что помещают внутрь структуры Лучше всего, если удается (и если у создателя страницы есть такое же лание) поместить там версию страницы без фреймов — пусть не так красиво, но все же хоть что-то... Но, поскольку броузеры, не поддержи вающие фреймы, скоро будут встречаться примерно так же часто, как динозавры, время дескрипторов тоже проходит. И если уж какой-нибудь особо вежливый автор HTML-страницы их использует, то он, как правило, пишет что-то в таком роде:

К сожалению, Ваш броузер устарел.

Обновите его и приходите снова!

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

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

178 Глава Левый фрейм фрейм Рис. 11.19. Задачу создания на странице центрального "окна" с прокруткой можно ре шить с помощью "классической" фреймовой структуры. Но это громоздко и неудобно И все-таки такое решение далеко от идеала. Хотя рамки и можно убрать, гра ницы между фреймами все равно остаются, и с ними приходится считаться. И это уже не говоря о прочих неудобствах, связанных с тем, что цельный по замыс лу кусок страницы приходится резать на четыре части, размещать в четырех фай лах — left.html, и — и потом совмещать границы фреймов так, чтобы внешне все смотрелось как единое целое.

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

Для создания встроенного фрейма используется дескриптор (от анг лийского inline frame). Это парный дескриптор, очень похожий на дескриптор Но дескриптор — непарный, a — парный! Что же тогда находится между и Здесь самое время вспомнить, что, несмотря на то, что HTML — стандарт, далеко не все дескрипторы этого стандарта одинаково поддерживаются всеми броузерами.

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

Фреймы

:й <РХй услуги <РХЙ и

1 января С Годом! i 1 января С Новым и Годом!

I января Со Новым Годом!

Рис. 11.20. Содержимое дескриптора предназначено на тот случай, если броузер не поддерживает этот дескриптор В принципе если вы не предусматриваете замены страницы с фреймом, закрывать дескриптор не обязательно.

Для простоты в примере на рис. дескриптор имеет только один параметр — src. Значением этого параметра, как обычно, является файл, "подключаемый" для отображения в данной точке, — Однако отсутст вие прочих параметров отрицательно сказывается на эстетичности страницы.

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



и сайта Новым

в) Содержимое встроенного Глава Глава Формы В этой главе...

Основная схема формы * Из чего состоит форма * Текстовые строки Кнопки Текстовые поля Списки вариантов 4 Списки-переключатели Раскрывающиеся списки Основная схема формы Web-сайт — это почти всегда диалог. Конечно, встречаются "односторонние" сайты, авторы которых стремятся только показать, но не услышать отзыв о пока занном. Но даже там редко обходится без ссылки на автора: "Все, что вы думаете по этому поводу, пишите сюда".

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

Как получить данные и передать их для обработки?

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

Подобно фреймам, таблицам и другим "крупногабаритным" элементам Web страницы, форма — это блок HTML-кода, образованный специальными элементами HTML. Границами такого блока служат, как легко догадаться, дескрипторы Какие параметры имеет этот дескриптор?

Давайте задумаемся: какие вообще могут быть параметры у всех этих тексто вых полей, списков, "точек", "галочек" и кнопочек, с которыми по нашей мило сти возится пользователь? Раз эти параметры выносятся "за скобки", в заглавный дескриптор блока, то они должны быть общими для всех описанных элементов интерфейса. Но ведь элементы эти такие разные, такие непохожие друг на друга!

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

Первое, что приходит в голову: эту информацию нужно как-то обрабатывать.

Поэтому параметры дескриптора должны описывать то, что нужно делать дальше с полученными данными. И это действительно так!

В самом деле: ввел, предположим, посетитель электронного магазина в одной строке адрес, куда доставить покупку, в другой — номер кредитной карточки, с кото рой перечислить деньги, выбрал из списка товар, щелкнул на кнопке "купить" и...

что дальше? А дальше все это нужно передать на сервер и там как-то обработать.

Действие, которое следует выполнить с введенными в форму данными, определя ется параметром action. Точнее, параметр определяет не столько само действие, сколько по которому расположен обработчик данных. Чаще всего в качестве такого обработчика выступает специальная программа. Эта программа может быть расположена как на удаленном сервере, так и на компьютере посетителя страницы.

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

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

Каким способом передаются данные? Уточним сразу: HTML не вмешивается в способы кодирования и передачи информации по сетям Internet. Однако сущест вует два принципиально разных метода: первый заключается в передаче самих данных ("покупатель: Александр Петров;

номер карточки: 123456789;

покупка:

костюм мужской и т.д."), второй — в передаче указателя на то место, где они на ходятся (например, URL). То, какой именно из них используется для данной формы, определяется параметром method. Передача данных соответствует значе нию post (в переводе с английского "переслать"), а передача ссылки — значению get ("получить"). По умолчанию используется последний вариант. Действитель но, зачем лишний раз нагружать сеть? Лучше передать ссылку и этим ограни читься. Но передавать данные формы по электронной почте приходится полно стью, а для этого используется значение post.

Вы, должно слышали о существовании различных типов кодирования инфор мации, передаваемой через Internet. Тип кодирования данных, введенных через форму, определяется параметром (от английского encryption type — тип В данном случае имеются в виду типы кодирования MIME. По умолчанию параметр enc type принимает значение но при отправке данных электронной почтой используется тип text/plain. Таким образом, для того чтобы дан ные формы передавались по электронной почте, код формы должен выглядеть так:

186 Глава Наконец, обратим внимание еще на одну деталь. Как правило, после заполнения формы содержащее ее окно закрывается, и на его месте появляется другое, — напри мер, с сообщением о том, что данные успешно введены и получены. Как описать, в каком окне или фрейме будет открыта следующая страница? Правильно, с помощью уже знакомого нам параметра target (см. главу Из чего состоит форма Уф... Кажется, с самой формой мы разобрались. Но, как учат философы, форма без содержания — ничто. Правда, другие философы с ними спорят и доказывают обратное... Но, если говорить не об абстрактной форме, а о формах HTML, то факт налицо: HTML-формы без содержания действительно не имеют смысла.

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

Масса пустых строчек, куда нужно вписать фамилию, адрес, дату... Нужное подчерк нуть... Отметить "птичками" один несколько из предлагаемых вариантов (а если анкета электронная, не забыть убрать выделенные варианты, предлагающие присы лать вам по электронной почте всякую Да, и еще, конечно же, обычный текст — пояснения, что и куда нужно вписывать. Как правило, маловразумительные...

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

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

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

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

Например, какие общие свойства присущи таким элементам и, соответст венно, какие общие параметры есть у описывающих их дескрипторов? Таких свойств два. Во-первых, это информация, которую вводит пользователь через данный элемент формы. Эта информация присваивается параметру Во вторых, это уникальное в пределах формы имя, по которому данный элемент от личается от других. Это имя присваивается параметру name — аналогичный пара метр нам уже встречался в фреймах (см. главу Формы Текстовые строки Строки для ввода текста на HTML-страницах встречаются сплошь и рядом.

Тому, кто хоть раз пользовался поисковым Internet-сервером, не надо объяснять, что это такое: узкий вытянутый прямоугольник, внутри которого можно ввести с клавиатуры одну строку текста (рис. 12.1).

' Расширенный поиск дом Вильяме Настройки • Языковые инструменты Искать в интернете г Искать в русском, Всё о Google In English Рис. Интерфейс поисковой системы — это тоже форма. Обычно она состоит из текстовой строки и кнопки ввода Для ввода однострочных полей используется дескриптор Это непарный дескриптор, обладающий целым "выводком" параметров, описывающих самые раз нообразные свойства. В зависимости от значения параметра type этот дескриптор мо жет "принимать вид" самых разных элементов формы. В частности, когда этот пара метр имеет значение text, дескриптор "превращается" в текстовую строку.

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

Глава ffj Рис. 12.2. Простейшая форма, содержащая текстовую строку Обратим внимание на несколько интересных моментов.

Прежде всего: что находится внутри формы? Кроме текстовой строки для вво да данных, — обычный форматированный текст, такой же, как везде. Текстовая строка имеет имя search и начальное значение 123456789123456789123456789, при своенное параметру value. Как видим, этот параметр используется не только для передачи введенных данных, но и для вывода исходных значений.

Зачем мы выбрали такую последовательность цифр? Чтобы измерить длину стро ки. Как видим, в ней помещается 18 знаков. Как растянуть ее или, наоборот, сузить?

За это "отвечает" параметр size. Его значением является число символов, по мещающихся в строке. Например, если нужно ввести что-то очень короткое — скажем, сегодняшнее число — то строку можно сократить до двух символов, при своив параметру size значение 2. Но помешает ли это посетителю ввести более длинное число? Нет. Просто символы, введенные первыми, "уедут" из видимой части строки влево (рис. 12.3).

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

А теперь рассмотрим несколько специфических вариантов текстовых строк.

Довольно часто встречаются ситуации, когда вводимая строка не должна быть видна на экране. Типичный случай — пароль. Для того чтобы обеспечить конфи денциальность такого рода, используются текстовые строки специального вида параметру type присваивается значение password (рис. 12.5).

Формы сегодняшнее :INPUT Введите сегодняшнее число.......

(moil) Рис. 12.3. Ограничение длины видимой текстовой строки с помощью пара метра size не мешает пользователю ввести значение, превышающее ее длину

Рис. 12.4. Параметр ограничивает длину вводимой текстовой строки Глава пароль:

• Введите пароль Форма из Microsoft Рис. 12.5. Ввод пароля: в окне броузера отображаются звездочки, но для обработки передается значение, введенное в действительности Пожалуй, не менее часто возникает необходимость в передаче файла, имя ко торого вводится в HTML-форме. До сих пор в некоторых приложениях встреча ются моменты, когда от пользователя требуется вводить имя вручную — полно стью, вместе с длинным путем. И неоткуда скопировать... Если вы с такой про блемой сталкивались, то поймете меня, а если нет — поверьте на слово: это сущее наказание. Неудивительно, что пользователь всеми силами избегает по пасть в такую ситуацию второй раз. Грамотные разработчики помещают рядом со строкой, куда нужно ввести имя файла, стандартную кнопку Обзор. Щелкнув на ней, пользователь открывает стандартное окно Windows, в котором и выбирает нужный файл. Для того чтобы такая кнопка появлялась рядом с текстовой стро кой HTML-формы, параметру type присваивается значение file (рис. 12.6).

Иногда возникает необходимость передать из формы обработчику некую скрытую информацию — такую, которую пользова тель не то что не вводит, но даже и не видит. Для этого используется дескриптор с параметром type=hidden:

name=secret этом письме содержится Формы text/plain Выберите i.

Выберите файл:

из Microsoft Explore Рис. 12.6. Для ввода имени файла используется тек стовая строка с параметром Кнопки Кнопки — главный элемент любой электронной формы. Не согласны? Что ж, возможно, вы правы. Но как сообщить о том, что ввод данных завершен, если форма лишена кнопки "Отправить"?

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

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

Как это ни странно, кнопки создаются с помощью того же дескриптора что и текстовые строки. Однако значение параметра type в этом случае другое — в зависимости от назначения кнопки.

Чаще всего — практически всегда — в формах встречается кнопка для передачи данных программе-обработчику. Надписи на ней бывают разные — "Принять", "Отправить", В сущности, это не важно. То, что происходит при щелчке определяется не надписью.

Глава

Убираем параметр name и получаем как раз то, что нужно (рис. 12.8).

Формы

главу 8). Кроме того, при этом программе-обработчику передаются дополнительные данные — координаты точки, в которой посетитель щелкнул на (рис. 12.9). Отсчет ведется в пикселях, от верхнего левого угла изображения.

Глава FORM act INPUT P Петр Петрович [ III Форме из Microsoft Internet Explorer Петр Петрович Рис. 12.9. Кнопка, превращенная в картинку, сохраняет все параметры изображения Следующая по распространенности функция кнопки в электронной форме — вернуть все, как было. Конечно, если форма состоит из единственной строчки, посетитель вполне справится и сам. Но представьте себе длиннющую анкету, ко торую нужно целиком "обнулить". Обрадовала бы вас перспектива почистить все поля с помощью мыши и клавиатуры? По-моему, вопрос излишен.

Для создания кнопки возврата параметру type присваивается значение reset. В результате получаем точно такую же кнопку, что и в случае submit, только резуль тат ее действия другой, вместо того чтобы отправить данные на обработку, дан ные просто удаляются, и форма приводится к исходному состоянию (рис. 12.10).

Обратите внимание: можно заменить рисунком кнопку отправки дан ных, но не кнопку отмены. Увы...

Формы

Если необходимо создать кнопку, назначение которой отличается от приема данных и сброса, используется значение Действие, выполняе мое при щелчке на кнопке, определяется параметром onclick (см. главу 16).

Глава Текстовые поля Не всегда текст, который нужно ввести, помещается в одной строке. Бывает, что он растягивается на несколько строк или даже абзацев. Конечно, можно обойтись текстовой строкой "бесконечной" длины (без указания значения пара метра maxlength). Однако выглядит такая строка — без начала, без конца — не изящно, а пользоваться ею очень неудобно.

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

"Елена из книги • бесплатный ящик на http://freemail.ukr.net Т файла не сообщение Рис. Типичный пример поля ввода — форма электронного письма Для создания текстового поля используется дескриптор Что полу чится, если просто использовать его интуитивно, применяя параметры name и value по аналогии с текстовыми строками? Явная ошибка (рис.

Прежде всего: почему в поле ввода оказался весь остальной код? Потому что дескриптор — парный, а мы его не закрыли. Внутри него помещается текст, который должен оказаться в поле ввода по умолчанию. Это логичнее, чем делать его значением параметра value: ведь текст может быть довольно длинным.

Формы text/plain ввести длинный "Начинайте пряно <Р

Рис. 12.12. Поле ввода очень похоже на строку ввода, но использо вать дескриптор по аналогии с type=text> — ошибка Несмотря на то, что содержимое поля ввода не является значением па раметра value и, теоретически, может содержать дескрипторы формати рования, на практике оно форматированию не подлежит. Весь текст вы водится, как правило, моноширинным шрифтом ("пишущая машинка").

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

Высота поля ввода определяется параметром rows и измеряется в строках, шири на — параметром cols и измеряется в символах. Поскольку текст выводится моно ширинным шрифтом, такой подход оказывается точным и не приводит к появле нию строк разной ширины.

Теперь мы знаем достаточно, чтобы создать такое поле ввода, как нам хочется (рис. 12.13). Почти. Осталось выяснить еще один нюанс. Что происходит, если со держимое не помещается в окне? Если строк слишком много, полоса прокрутки справа от них "оживает" и начинает оправдывать свое существование. А если стро ка слишком длинная? Разумеется, когда она приближается к правой границе окна, очередное слово появляется "этажом ниже". Но в каком виде такая "разорванная" строка передается на обработку? Отдельными кусками или целиком?

Оказывается, можно и так, и эдак. Способ представления текста, вводимого в окно, определяется параметром wrap. По умолчанию все происходит именно так, как ожидается: в окне текст автоматически разбивается на строки, но при пере даче эта автоматическая разбивка не сохраняется: если вы ввели все одной стро кой, то оно так и будет передано. Этот режим соответствует значению virtual.

Если мы хотим, чтобы переход на новую строку в окне происходил только когда Глава пользователь нажимает , мы должны присвоить параметру wrap значение off. Наконец, если мы хотим, чтобы переход на новую строку происходил авто матически и эта разбивка сохранялась при передаче текста на обработку, нужно использовать значение hard (рис. 12.14).

здесь ввести текст:

пряно Здесь можно ввести длинный текст Начинайте прямо отсюда Microsoft Explore прямо отсюда Рис. 12.13. Так работает "правильное" поле ввода act ввести <Р cols= очень просто Еиа Здесь можно ввести длинный текст:

очень длиная предлинная, просто строка а из Microsoft очень длиная-предлинная, просто бесконечная строка Глава текст:

<Р очень просто •. т Здесь можно ввести длинный текст очень S очень длиная-предлинная, просто бесконечная строка можно ввести длинный <Р Очень, очень просто <Р В

очень просто строка I из Microsoft очень длиная предлинная, просто бесконечная строка в) Рис. 12.14. Три режима отображения и передачи длинных строк, определяемые парамет ром wrap: перенос при вводе (а), отсутствие переноса (б), и перенос при вводе и передаче (в) Списки вариантов В электронных формах существует два типа списков, из которых посетителю страницы предлагается что-то выбрать. В первом случае допускается выбор не скольких вариантов, во втором — только одного. Мы будем называть список пер вого типа списком а список второго типа — списком-переключателем.

Обычно пункты списков вариантов снабжены квадратными "окошками", в ко торых при выборе появляются "птички" (checkbox). Для создания такого списка используется уже знакомый нам дескриптор с параметром type=checkbox.

Как это выглядит? Очевидно, таких дескрипторов должно быть столько же, сколько вариантов в списке. В остальном — кажется, мы уже знаем, как пользо ваться параметрами name и value... Однако, видимо, в данном случае ими нужно пользоваться как-то иначе (рис.

202 Глава <1NPUT

Рис. 12.15. Попытка создать список вариантов: использование знакомых параметров не приводит к желаемому результату text/plain INPUT INPUT type=checkbox INPUT P INPUT INPUT Ваше любимое блюдо г заварные пирожные фруктовый коктейль шоколадный торт из fruit=on Рис. 12.16. Код списка вариантов состоит из самостоятельных деск рипторов в качестве пояснений используется обычный текст Формы Для создания списка вариантов в самом деле нужно столько дескрипторов сколько в нем есть вариантов. Однако имена у них должны быть разные — у каждого варианта свое. Зачем это нужно? Дело в том, что, хотя логически список является цельным элементом формы, с точки зрения кода это всего лишь набор разрозненных, несвязанных дескрипторов. У каждого — свое имя и значение. А для того чтобы стало ясно, что именно нам предлагают выбрать, нужно снабдить эти квадратики поясне ниями. Обычными текстовыми — параметр value здесь явно не годится (рис. 12.16).

Обратите внимание: имена всех элементов списка — разные. Что будет, если сделать одинаковыми все или некоторые из них? Если вы думаете, что завизжит сирена и броузер выдаст сообщение об ошибке, то оши баетесь. Броузер молча "проглотит" вашу оплошность и впоследствии будет вести себя так, как будто ничего не случилось. Но случилось ли что-то на самом деле? Решать вам 12.17).

FORM <1>

заварные пирожные фруктовый коктейль шоколадный торт т Рис. 12.17. что получается, если разные варианты списка имеют одинаковые значения параметра name Глава Отметим еще одну важную особенность. Как передаются данные о выбранных вариантах? Очень просто. Если соответствующий пункт списка выбран, его имя включается в состав передаваемых данных со значением on (см. рис. 12.16). А как поступить, чтобы один из пунктов был выбран по умолчанию? Естественно пред положить, что для этого нужно включить в соответствующий дескриптор параметр value со значением on. Однако, если вы проверите эту версию на прак тике, то убедитесь, что она не работает: каким бы ни было значение параметра value, в случае списка вариантов оно игнорируется. Если мы хотим, чтобы какой то из пунктов был выбран по умолчанию, то нам понадобится дополнительный параметр — checked. Значений он не имеет — просто включите его в состав соот ветствующего дескриптора (рис. 12.18).

FORM am» I> INPUT INPUT «с INPUT P INPUT INPUT J Ваше любимое блюдо г заварные пирожные фруктовый коктейль шоколадный торт Explorer.

I Рис. 12.18. Для того чтобы один из пунктов списка вариантов был вы бран по умолчанию, используется не имеющий значений параметр checked Заполняя различные Internet-анкеты, вы могли обратить внимание на то, что такие списки, "заполненные" по умолчанию, встречаются достаточно часто — чаще, чем хотелось бы. Обычно в конце длинной-предлинной Формы формы мелким шрифтом стоит что-то вроде "Я хочу регулярно получать по почте рекламу продукции", а рядом — незаметная "птичка". И кто обвинит владельца сайта в распространении спама? Ведь вы сами его "попросили", не дочитав до конца и поторопившись щелкнуть на кнопке...

ючатели В списках-переключателях слева от пунктов имеются причем в центре кружка, соответствующего пункту, появляется жирная точка ton). Для создания таких списков используется тот же дескриптор что и для списка вариантов, но параметру type присваивается значение radio. Как и в списке вариантов, каждому элементу списка-переключателя соответствует отдельный деск риптор Однако, в отличие от списка вариантов, все элементы списка-перек лючателя имеют одно имя. Иначе и не может быть: ведь мы хотим получить только одно значение из всего перечня. Наконец, здесь, как и в списке вариантов, для выбо ра одного из пунктов по умолчанию используется параметр checked (рис. 12.19).





что-нибудь Выберите что-нибудь одно:

г пирожные фруктовый коктейль 3 шоколадный торт из Microsoft Internet Explorer Рис. 12.19. Список-переключатель формируется из дескрипторов с параметром type=radio Глава Раскрывающиеся списки Списки часто бывают очень длинными и скучными. И занимают много места.

Если форма бумажная — ничего не поделаешь. Тяжко вздыхаем и заправляем в принтер еще один лист. Но если форма электронная и мы не хотим зря занимать место, можно воспользоваться раскрывающимся списком. Что это такое, знает любой, кто имел дело с Windows дольше получаса: строка, в которой что-то на писано, а справа — небольшая кнопка со стрелкой. Если щелкнуть на стрелке, вниз "выпадает" список. Щелкаем на одном из его пунктов — и список сворачи вается обратно, а в строке появляется выбранный пункт.

Как сделать подобный список на HTML-странице? Сам список создается с помощью дескриптора и Вообще-то, дескриптор

Формы Как видим, система — работает просто:

ботчику передается имя дескриптора , а их вид определяется зна чением параметра type. Так, значение text соответствует строке ввода, file — строке выбора файла, password — строке ввода пароля;

значения submit, reset и button определяют кнопки различных видов, а значения checkbox и radio — два типа списков: список вариантов и список-переключатель, соответственно.

Еще два вида элементов ввода, используемых в формах, создаются с помощью следующих дескрипторов. Дескриптор позволяет создавать поля ввода — прямоугольные окна с собственными средствами прокрутки, в которые можно вво дить произвольный текст (без форматирования). Дескриптор — парный.

Внутри него помещается текст, который содержится в поле ввода по умолчанию.

Наконец, еще один распространенный элемент электронных форм — раскры вающийся список — создается с помощью конструкции HTML, образуемой деск рипторами б) type=reset value=Cancel> Формы в)

а) длинный б) в) name=ltext длинный текст >Введите длинный г) длинный д) name=ltext длинный 7. Какой или какие из следующих списков позволяют выбрать несколько ва риантов?

type=checkbox

Глава Наконец, если значением атрибута margin служит единственное число, это оз начает, что все отступы одинаковые.

Для того чтобы задать определенный внешний отступ, используются атрибуты margin-top, margin-right, margin-bottom и margin-left — для верхнего, правого, нижнего и левого отступов соответственно. Их значением служит число, опреде ляющее величину отступа аналогично правилам для атрибута margin.

Подобным образом определяется величина внутреннего отступа, отделяющего рамку от самого элемента страницы. Только соответствующий атрибут называется padding, а атрибуты, определяющие величину отступов сверху, справа, снизу и слева, — padding-top, padding-right, padding-bottom и Для рамки элемента определены три свойства: толщина, цвет и стиль линии.

Толщина и цвет задаются так же, как аналогичные значения других атрибутов.

Что же касается стиля, то здесь возможны следующие варианты:

попе — рамка отсутствует;

* dotted — рамка состоит из точек;

* dashed — пунктирная рамка;

* solid — сплошная рамка;

* double — двойная рамка;

* groove, ridge, inset, outset — различные варианты "трехмерных" рамок.

Свойства рамки могут быть одинаковыми для всех четырех сторон, а могут и различными. В случае если они одинаковы, их можно присвоить общему атрибуту border. Например, двойная красная рамка толщиной 10 пикселей опи таким стилем (рис. 15.21):

20cm red Для описания свойств одной из сторон рамки используются атрибуты, где по слова border указывается соответствующая сторона — left, right, top или bot tom. Например, для того чтобы описать те же свойства, но только для верхней границы элемента (рис. 15.22), используется стиль 20cm red Если требуется описать только одно из свойств рамки, можно воспользоваться гем же атрибутом border, а можно использовать одну из его "производных": bor для описания ширины, border-color для описания цвета или border для описания стиля. Наконец, если нужно описать свойство только одной из сторон рамки, используется "третья производная", где между словом border и наименованием свойства указывается нужная сторона — left, right, top или bot tom. Так, например, для описания цвета верхней границы рамки используется ат рибут border-top-color.

Наконец, внутренняя зона имеет всего два свойства — ширину и высоту, опи соответственно атрибутами width и height.

Основные принципы каскадных таблиц стилей red double) текст текст текст текст текст текст текст текст текст текст текст текст текст текст <Р fl Стык текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст Рис. Атрибут border позволяет описать свой ства рамки различных элементов Web-страницы : red текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст Рис. 15.22. Для того чтобы описать свойства только одной из сторон рамки, к имени border добавляется название этой стороны Глава Резюме Каскадные таблицы стилей — мощное средство, значительно расширяющее возможности стандартного HTML. Стили, создаваемые посредством CSS, позво ляют создать единый дизайн страниц, экономят труд и размер кода.

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

color: white;

background-color:

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

U I б) U в) I г) I д) ж) з) font-weight=bold;

252 Глава 1i Глава Понятие событий В этой главе...

4 Понятие динамического HTML 4 Виртуальные события 4 События мыши 4 События клавиатуры 4 События форм 4 События страницы Понятие динамического HTML Как вы могли убедиться, ознакомившись с предыдущими главами этой книги, HTML — это средство форматирования электронных документов.

разметки гипертекста изначально не рассчитан на выполнение каких-либо действий. Этим HTML радикально отличается от языков программиро выполняющих последовательность команд.

Но жизнь требует от Web-страниц более широких возможностей. В первую они заключаются в реакции на определенные действия пользователя — к тому или иному элементу окна, манипуляции мышью и т.д. Так поя динамический HTML (DHTML), представляющий собой сочетание HTML и языка сценариев JavaScript.

Более сложные вещи, такие как обработка и хранение информации, полу чаемой от посетителя страницы, осуществляются с помощью других язы ков программирования, таких как РНР и См. также М. Ос вой самостоятельно РНР4 за 24 часа. Вильяме, Пирс К. Освой са мостоятельно Perl за 24 часа. Вильяме, 2000.

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

Любое событие имеет "хозяина" - элемент Web-страницы, с которым это со бытие происходит. Таким "хозяином" может быть, например гиперссылка, а со бытиями — наведение на нее указателя мыши или щелчок на ней. Кроме того, каждое событие имеет зарезервированное имя, одновременно являющееся пара метром дескриптора. Этот параметр определяет, какое именно событие нужно обрабатывать — движение мыши, ввод текста, загрузку страницы и т.п. Значени ем параметра является действие, которое нужно выполнить:

<ДЕСКРИПТОР содержимое дескриптора Например, на рис. 16.1 показан код, реализующий "виртуальный светофор":

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

Блокнот <НЗ =

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

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

Самое первое событие, связанное с мышью, которое приходит в голову, — это простой щелчок. Такое событие в HTML носит имя onclick (от английского on click — "при щелчке"). Например, при щелчке на гиперссылке происходит переход на другую HTML-страницу. Однако для обработки такого события, как мы уже знаем, достаточно обычного HTML. Другое дело, если мы захотим, чтобы одновре менно с переходом по ссылке изменялся вид самой ссылки, скажем одна картинка заменялась другой. Для этого можно использовать код, показанный на рис. 16.2.

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

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

щелкните на пиктограмме:

<Р = Чтобы отправить Чтобы отправить письмо, щелкните письмо, щелкните на на пиктограмме:

пиктограмме:

Рис. 16.2. При щелчке на ссылке происходят две вещи:

открывается бланк письма и меняется картинка В примере на рис. 16.2 для замены картинки использован код JavaScript. В JavaScript все однородные объекты на странице — картинки, таблицы, формы, гиперссылки — объединены в группы, именуемые массивами.

Понятие событий Массив изображений называется images. Каждому элементу массива при своен собственный порядковый номер, начиная от нуля: первая по поряд ку картинка на странице имеет номер 0, вторая — 1 и т.д. Для обращения к определенному изображению на странице используется запись ' ages [N], где N — порядковый номер этого изображения. Для обращения к определенному свойству данного объекта используется имя этого свойст ва. Между именем свойства и объекта ставится разделитель — точка. На пример, для того чтобы изменить источник первого изображения на стра нице, используется запись наподобие Наконец, объекты страницы могут "вкладываться" друг в друга, как матрешки. На пример, кнопка является элементом формы, а форма — элементом всего электронного документа. Для обращения к таким исполь зуется та же запись имен через точку. Поэтому полный код, позволяющий изменить источник первого изображения на странице, выглядит так: docu В JavaScript много стандартных объектов, описывающих основные элементы HTML-страницы.

Событие, которое должно происходить после двойного щелчка, описывается с помощью параметра onDblClick (от английского on double click — "по двойному щелчку"). На рис. 16.3 предыдущий пример дополнен еще одним действием: по сле двойного щелчка содержимое окна исчезает, и появляется забавная надпись.

Чтобы отправить письмо, щелкните На ПИКТОГрамме: || Не щелкай много Рис. После двойного щелчка содержи мое окна меняется В примере, представленном на рис. 16.3, использован код JavaScript с функцией write. Эта функция позволяет выводить на экран произволь ный текст, в том числе и с дескрипторами HTML.

Глава Обратите внимание: события можно использовать не только в дескрип торе гиперссылки <А>, но и в других дескрипторах HTML.

В Internet часто встречаются страницы, на которых кнопки в виде пиктограмм меняют вид в момент щелчка, а после него возвращаются в исходное состояние.

этого используются события и onMouseUp. Первое из них гт состояние, когда кнопка мыши нажата, но еще не отпущена, так что щелчок гще не состоялся (ее название происходит от английского on mouse down — "при нажатии кнопки мыши"). Второе событие описывает состояние, когда кнопка мыши уже отпущена (ее название происходит от английского on mouse up — "при кнопки мыши"). Пример использования этих событий приведен на рис. 16.4: при нажатии кнопки мыши изображение закрытого замка заменяется на изображение открытого;

при отпускании кнопки замок снова "закрывается".

и на он и откроется Р Нажми на замок, Нажми на замок, он и откроется: он и откроется:

Рис. 16.4. События onMouseDown и onMouseUp позволяют "откры вать" и "запирать" замок путем нажатия и отпускания кнопки мыши Наконец, для того чтобы страница "сработала", не обязательно щелкать кноп кой мыши. Можно написать код так, чтобы было достаточно простого движения указателя. Для этого используются события onMouseOver, и onMouseOut.

Событие onMouseOver описывает ситуацию, когда указатель мыши "наползает" на объект, onMouseMove — когда движется по объекту и onMouseOut — когда "сползает" с объекта. Пример использования этих событий показан на рис. 16.1.

Все это касается только левой кнопки мыши. Правая кнопка не обраба тывается, она используется броузером для вывода контекстного меню.

Понятие событий События клавиатуры События, связанные с клавиатурой и распознаваемые динамическим HTML, аналогичны событиям мыши. Однако их меньше: только нажатие клавиши onKeyPress, движение клавиши вниз и вверх На рис. 16.5 пред ставлен пример страницы, позволяющей определить код нажатой клавиши.

Код нажатой клавиши сохраняется в объекте JavaScript Функция используется для вывода стандартного окна преду преждения. Значением этой функции является текстовая строка. В JavaScript можно составлять строки из фрагментов с помощью выражений вида Рис. 16.5. Полезная страничка: позволяет уз нать код нажатой клавиши События форм Если вы сами попробовали, как "работает" предыдущий пример, то должны бы ли заметить, что он "срабатывает" не всегда, а только тогда, когда кнопка выделе на. Такое выделение еще называют фокусом ввода. Для того чтобы элемент формы стал активен (получил фокус), щелкните на нем кнопкой мыши. Если форма со стоит из нескольких элементов, то для перехода между ними (передачи фокуса) можно использовать клавишу Разумеется, вводить что-то в элемент формы можно только тогда, когда он активен, т.е. когда он имеет фокус ввода.

Событие получения фокуса элементом формы называется onFocus, потери фо куса — На рис. 16.6 показан улучшенный вариант рассмотренного выше примера: когда кнопка не активна, надпись приглашает щелкнуть на ней мышью;

когда же кнопка получает фокус, надпись меняется.

Глава

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

В примере на рис. 16.7 проиллюстрировано еще одно свойство языка JavaScript: условный оператор if. Выражение, стоящее в скобках, явля ется условием, в случае истинности которого выполняется выражение, следующее за скобками.

Событие onSelect "срабатывает" тогда, когда пользователь выделяет в поле ввода некий текст. При этом переходить к другому элементу формы вовсе не обя зательно. На рис. 16.8 показана страница, в зависимости от того, что пользо ватель намерен делать с текстом (вводить или редактировать выделенный фраг мент), меняется пиктограмма.

Понятие событий INPUT Вход > Рис. 16.7. Пример использования события onChange

Р IMG INPUT Рис. 16.9. По окончании ввода данных появляется информационное окно События страницы С функционированием страницы в целом связаны следующие события: загрузка и выгрузка страницы, а также прерванная загрузка и ошибка загрузки. Событие загрузки называется onLoad и часто используется для временной замены больших и загружающихся объектов меньшими. Таким образом, например, посетитель страницы, вместо того чтобы ожидать окончания загрузки большого изображения, может первое время довольствоваться его уменьшенным вариантом (рис.

В коде на рис. использованы последовательно две команды JavaS cript. Разделителем между ними служит точка с запятой.

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

Понятие событий Рис. 16.10. До окончания загрузки страницы большое изображение можно временно заменить маленьким ••

Эта последняя глава книги — только краткое введение в другую инте область — JavaScript и динамический HTML. Если же вы за хотите глубже изучить этот язык, рекомендую книгу М. "Освой самостоятельно JavaScript за 24 часа" Вильяме, 2001.

Резюме HTML рассчитан только на статическое отображение гипертекста. Для созда ния динамично меняющихся страниц используются другие средства, дополняю щие и расширяющие этот язык. Одним из таких средств является, в частности язык сценариев JavaScript.

"Сигналами" к действиям служат события — одинарный или двойной щелчок, движение указателя мыши, нажатие клавиши, передача фокуса элементу формы и т.д. Каждому событию соответствует свой параметр. Этот параметр указывается в дескрипторе, описывающем элемент страницы, с которым происходит данное со бытие. Значением параметра является строка, представляющая собой код на язы ке сценариев.

Тесты 1. В каком случае вывод сообщения произойдет по щелчку мыши?

а) <Р здесь б) <Р Щелкните здесь в) <Р Щелкните здесь г) <Р Щелкните здесь 2. В каком случае вывод сообщения произойдет при наведении указателя мы ши на изображение?

а) Когда посетитель щелкнет на кнопке Назад (Back).

б) Когда посетитель щелкнет на кнопке Вперед (Forward).

в) Когда посетитель щелкнет на кнопке Обновить (Refresh).

г) Когда посетитель щелкнет на кнопке Остановить (Stop).

5. В состав страницы входит следующий код:

а) Когда посетитель щелкнет на кнопке Назад (Back).

б) Когда посетитель щелкнет на кнопке Вперед (Forward).

в) Когда посетитель щелкнет на кнопке Обновить (Refresh).

г) Когда посетитель щелкнет на кнопке Остановить (Stop).

264 Глава Приложение А Ответы на вопросы тестов Введение 1. Что из нижеперечисленного является броузером?

Microsoft — неправильно. Это текстовый процессор. Хотя он и по зволяет просматривать Web-страницы, но это только одна из функций данного приложения.

Microsoft Internet Explorer — правильно.

в) Microsoft FrontPage Express — правильно.

г) HomeSite — неправильно. Это редактор HTML-страниц.

д) Netscape Navigator — правильно.

е) Opera — правильно.

ж) Mozilla — правильно.

з) Notepad — неправильно. Это простейший текстовый редактор, с помо щью которого можно написать код HTML-страницы.

и) PhotoShop — неправильно. Это графический процессор, с помощью которого можно обрабатывать изображения для HTML-страниц.

к) Google.com — неправильно. Это поисковый сервер Internet.

2. Что из нижеперечисленного используется для просмотра HTML-страницы?

Microsoft Word — правильно (см. тест 1 этой главы).

б) Microsoft Internet Explorer — правильно.

в) Microsoft FrontPage Express — правильно. Это визуальный редактор HTML-страниц, позволяющий в том числе увидеть, как будет выглядеть страница в броузере.

г) HomeSite — правильно. Это редактор HTML-страниц, позволяющий в том числе увидеть, как будет выглядеть страница в броузере.

д) Netscape Navigator — правильно.

е) Opera — правильно.

ж) Mozilla — правильно.

з) Notepad — неправильно. В этом редакторе можно просмотреть только код HTML-страницы, но не то, как она должна выглядеть для посетителя.

и) Windows - неправильно. Windows — это семейство операционных систем, под управлением которых работают различные приложения, в том числе и средства для просмотра HTML-страниц.

к) Linux — неправильно (см. ответ (и) этого теста).

л) PhotoShop — неправильно (см. тест 1 этой главы).

м) Google.com — неправильно. С помощью этого поискового сервера можно найти нужные страницы в Internet, но отображаются эти страницы, как впрочем и страницы Google.com, в броузере.

3. Что из нижеперечисленного используется для просмотра кода HTML-страницы?

Microsoft Word — правильно.

б) Microsoft Internet Explorer — неправильно. По команде Вид В виде HTML из Internet Explorer открывается Notepad или другой HTML редактор, который используется по умолчанию.

в) Microsoft FrontPage Express — правильно.

г) HomeSite — правильно.

д) Netscape Navigator — неправильно (см. пункт (б) этого теста).

е) Opera — неправильно (см. пункт (б) этого теста).

ж) Mozilla — неправильно (см. пункт (б) этого теста).

з) Notepad — правильно.

и) Windows — неправильно (см. тест 2 этой к) Linux — неправильно (см. тест 2 этой главы).

л) PhotoShop — неправильно.

м) Google.com — неправильно.

Глава 1. Какие из фрагментов HTML-кода содержат ошибку?

а) Зачем когда можно мягко — ошибок нет.

Этот код будет выглядеть так: Зачем КРИЧАТЬ, когда можно мягко расста вить б) Текст курсивом: — формально ошибок нет. Но конструкция бессмысленна, так как внутри нее ничего нет.

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

2. Какие из следующих фрагментов HTML-кода не содержат ошибки?

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

б) С помощью вложенных дескрипторов и «В» достигается эффект полужирного курсива — ошибки нет. Впрочем, форматирования тоже нет. Для того 266 Приложение А чтобы оно было, дескрипторы должны заключаться не в угловые кавыч ки, а между знаками < и >.

в) Контейнерные дескрипторы бывают например: — формально ошибки нет. Однако ставить в код контейнерные дескрипто ры, внутри которых отсутствует текст, бессмысленно.

г) Разметка гипертекста средствами HTML производится путем вставки в текст — ошибки нет. Текст в окне броузера будет выглядеть так: гипертекста средствами HTML производится путем вставки в текст 3. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы:

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

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

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

Глава 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Р> Для того чтобы перейти на новую используется тег <Р> — фор мально ошибок нет. Второй дескриптор <Р> приведет к тому, что сле дующий текст будет выводиться с новой строки.

б) <Р> Для того чтобы перейти на новую строку, используется тег <Р> формально ошибок нет. Второй дескриптор <Р> приведет к переходу на новую строку. Закрывающий дескриптор не обязателен.

в) <Р> Для того чтобы перейти на новую строку, используется тег ошибок нет.

г) Для того чтобы перейти на новую строку, используется тег — ошибка: дескриптора не существует.

д) Для того чтобы перейти на новую строку, используется тег Р — фор мально ошибки нет. Но если под «Р» подразумевался дескриптор абзаца, его нужно заключать не в кавычки, а в угловые скобки: <Р> 2. В каком случае абзац будет выровнен по левому краю:

а) <Р align = center> Этот абзац выровнен по левому краю? — нет, этот абзац выровнен по центру.

б) <Р align = left> Этот абзац выровнен по левому краю? — да, этот абзац выровнен по левому краю. * в) <Р align = right> Этот абзац выровнен по левому краю? — нет, этот абзац выровнен по правому краю.

Ответы на вопросы тестов г) <Р align = justify> Этот абзац выровнен по левому краю? — нет, этот аб зац выровнен по ширине.

д) <Р> Этот абзац выровнен по левому краю? — да. Когда параметр align не указан, то по умолчанию абзац выравнивается по левому краю.

е) <Р align> Этот абзац выровнен по левому краю? — да. Поскольку значение параметра align не указано, броузер его игнорирует и по умолчанию ус танавливает выравнивание по левому краю.

3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Р align=center> Этот текст выровнен по центру — ошибок нет.

б) <Р Этот текст выровнен по центру — и здесь ошибок нет:

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

в) Этот текст выровнен по центру — ошибка: между деск риптором и параметром должен стоять пробел, а не знак подчеркивания.

г) <Р align = center> Этот текст выровнен по ошибок нет. Между дескриптором и параметрами может стоять как пробел, так и знак пере хода на новую строку.

д) <Р aLiGn=cEnTeR> Этот текст выровнен по центру — ошибок нет. Дескрип торы и параметры могут быть набраны в любом регистре.

е) <Р center = align> Этот текст выровнен по центру — ошибка: параметр должен стоять слева от знака равенства, значение — справа, а не наобо рот. Броузер проигнорирует эту ошибку, абзац будет выровнен по левому краю — так, как предусмотрено по умолчанию.

4. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы?

<р align = Где переход на новую строку:

здесь?
Или здесь?

<Р> А может быть, и здесь тоже?

Правильный вариант — (б).

Варианту (а) соответствует код <р align = Где переход на новую строку:

здесь? <Р> здесь?

<Р> А может быть, и здесь тоже?

Варианту (в) соответствует код <р align = Где переход на новую строку:

здесь? <Р align = right> Или здесь?

<Р align = right> А может быть, и здесь тоже?

Глава 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) Есть три типа кавычек: «елочки», "верхние лапки" и „нижние лапки". Ошибка. Символы, не входящие в стандартный набор ASCII, не всегда 268 Приложение А правильно интерпретируются броузером. Для того чтобы они отобража лись правильно, необходимо использовать или мнемонические имена.

б) Есть три типа кавычек: "верхние лапки" и — Ошибка. Эти символы, за исключением нижней одиночной кавычки, вообще не являются кавычками. Это знаки "больше" и "меньше", сим волы дюйма и минут. Их использование в данном случае противоречит правилам орфографии и полиграфическим канонам.

в) Есть три типа кавычек: и — Правильно. Для отображения кавычек в ко де использованы их мнемонические имена.

г) Есть три типа кавычек: и — Правильно. Для отображения кавычек в ко де использованы соответствующие esc-последовательности.

д) Есть три типа кавычек: и -- Правильно. Для отображения кавычек в коде использованы соответствующие esc-последовательности и мнемо ническое имя. Их можно комбинировать.

е) Есть три типа кавычек: и -- Неправильно. — Мнемоническое имя правой кавычки, а на этом месте должна стоять левая кавычка. Ее мнемоническое имя — 2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) HTML-страница не должна содержать ошибок - в том числе орфографических. И ее объем не должен превышать 5-10 Кбайт. — С точки зрения кода — пра вильно, с точки зрения орфографии — нет. Кроме того, следует позабо титься о правильной расстановке переносов.

б) HTML-страница не должна содержать ошибок в том числе орфографиче ских. И ее объем не должен превышать Кбайт. Неправильно.

Не существует символа с мнемоническим именем в) HTML-страница не должна содержать ошибок в том числе орфографиче И ее объем не должен превышать — С точки зрения кода — правильно, с точки зрения орфографии — все должно быть на оборот: между цифрами нужно использовать короткое тире, а между словами — длинное.

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

д) HTML-страница не должна содержать том числе орфографиче ских. И ее объем не должен превышать 5 Sndash;

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

е) HTML-страница не должна содержать числе объем не должен превышать — Все тире и неразрывные пробелы расставлены правильно.

3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

а) <Р align=center> По-моему, весь этот текст должен выводиться в одной строке — код правильный, но утверждение неверно: если окно бро узера окажется чем эта строка, она будет разорвана.

б)

в) — Код правильный, но утверждение неверно:

конечно, неразрывные пробелы сделают свое дело, но строка может быть разорвана после дефиса.

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

4. В каких точках (А, В, С, D, Е) следующего фрагмента возможен переход на новую строку?

Где на новую здесь?

может быть, и здесь Переход возможен во всех точках, кроме а: в середине слова дескриптор не "срабатывает".

Глава 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

Этот текст набран другим — формально ошибок нет.

Но дескриптор без параметров, сам по себе, не меняет вида текста.

б) Этот текст набран другим — ошибка:

название шрифта, состоящее из двух слов, нужно заключать в кавычки.

Иначе броузер воспримет как значение параметра face только первое слово — в данном случае в)

Pages:     | 1 | 2 || 4 |





© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.