Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Билеты по информатике.docx
Скачиваний:
6
Добавлен:
23.09.2019
Размер:
169.02 Кб
Скачать

Билеты по информатике

Билет 1. Понятие HTML-документа, его структура и характеристика тегов, составляющих эту структуру.

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

СТРУКТУРА ДОКУМЕНТА

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

В отличие от других языков программирования команды носят названия «теги» (от англ. Tag-отметка). Синтаксис записи <тег>.

Практически все теги, за исключением отдельно оговоренных случаев - парные: открывающий тег <тег> и закрывающий </тег>.

<тег> обрабатываемое значение </тег>.

HTML-документ в упрощенном виде представляет собой схему, представленную на рис. 1.1.

HTML-документ

Заголовок документа

Внешний заголовок

Тело документа

Основной код

Рис. 1.1. Схема HTML-¬документа

HTML-документ – это команда, которая сообщает браузеру о том, что это HTML-документ и является тегом верхнего уровня.

<HTML> Содержимое документа </HTML>

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

<HEAD> Содержимое заголовка </HEAD>

Внешний заголовок – название страницы при её открытии, которая отображается в заголовке окна браузера.

<TITLE> Внешний заголовок </TITLE>

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

<BODY>

Здесь будет размещено содержимое страницы

</BODY>

Предусматривается вложение одного тега в другой

<тег 1>

<тег2> обрабатываемое значение </тег 2>

</тег1>

Таким образом, структура всего HTML-документа примет вид, который показан ниже.

<HTML>

<HEAD>

<TITLE> Моя первая WEB-страница </TITLE>

</HEAD>

<BODY>

Здесь будет размещено содержимое страницы

</BODY>

</HTML>

Билет 2. Понятие тега и атрибута, виды тегов. Способы записи атрибутов и правила записи тегов.

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

HTML-тэг записывается в угловых скобках (< >) и состоит из имени, за которым может следовать список атрибутов (для большинства тэгов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Записывать тэги можно в любом регистре – прописными или строчными буквами.

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами, воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тэгами могут располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг <IMG SRC="pict.gif"> вызывает вставку рисунка из файла pict.gif.

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

Примеры тэгов с атрибутами:

<BODY BGCOLOR="LIGHTBLUE"> – задает светло-синий фон для документа,

<FONT SIZE="+2" COLOR="RED"> текст </FONT> – парный тэг, дает указание Браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

Тэги, определяющие структуру HTML-документа

HTML-документ заключается в тэги <HTML> и </HTML>. Между этими тэгами располагаются две секции: секциязаголовка (между тэгами <HEAD> и </HEAD>) и секция тела документа (между тэгами <BODY> и </BODY>).

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

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

<HTML>

<HEAD>

<ТIТLE>Пример НТМL-документа</ТIТLE>

</HEAD>

<BODY>

Самый простой HTML-документ

</BODY>

</HTML>

Браузер отобразит этот документ, выведя в своем окне строку текста, расположенную в секции тела документа: Самый простой HTML-документ. Благодаря наличию тэга <ТIТLE> в заголовке окна Браузера будет выведено не имя файла, а заголовок, обычно несущий смысловое содержание. В данном случае заголовок окна Браузера будет: Пример НТМL-документа.

Стиль записи тэгов в Блокноте не регламентируется. Можно записать несколько тэгов в одной строке или начинать запись каждого тэга с новой строки. Рекомендуется записывать текст HTML-документа так, чтобы он был легко читаемым и понятным.

Билет 3 Краткая характеристика тегов, составляющих логические и физические группы.

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

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

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

Действие тега

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

Тег логического форматирования

Полужирный текст

<B>

<STRONG>

Курсив

<I>

<EM>

Моноширинный шрифт

<TT>

<CODE> (для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины)

Перечеркнутый текст

<S>

<DEL> (в настоящее время распознаётся только браузером Microsoft Internet Explorer)

Другие теги логического форматирования:

<DFN>

– служит для описания определений;

<CITE>

– служит для выделения цитат;

<INS>

– отмечает свой текст как вставку;

<KBD>

– используется для ввода с клавиатуры пользователя;

<SAMP>

– используется для отметки результатов, выдаваемых программами, для выделения нескольких символов моноширинным шрифтом:;

<VAR>

– используется для символьных переменных;

<ABBR>

– используется для аббревиатур (СНГ, КПСС, WWW);

<ACRONYM>

– используется для сокращений (стр., англ.) с атрибутом TITLE;

<Q>

– цитированный текст в кавычках.

Теги <INS> и <DEL> используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже) вставлен или удален. Применяются при создании сайта группой дизайнеров. Могут иметь атрибуты datetime, cite, title. В datetime можно указать дату и время удаления/вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. С помощью title пояснения вставляются прямо в тег.

Не путайте тег <CODE> с тегом <PRE>, являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов кода!

Билет 4. Теги предназначенные для структурного форматирования

Комментарии <COMMENT >

Элемент позволяет скрыть от пользователя комментарии к исходному коду, а также для сокрытия сценариев Java Script от браузеров, которые не поддерживают их.

Синтаксис: <COMMENT> Текст комментария </COMMENT>

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

Синтаксис: <!- - Текст комментария //- ->

Шесть уровней заголовков <Hn>

Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> назначается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right.

Синтаксис: <Hn align=отступ> Текст заголовка </Hn>

Разделительные линии <HR>

Элемент <HR> используется для проведения горизонтальной черты в документе, он может иметь атрибуты : color, задающий цвет линии, size высота в пикселах width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега.

Синтаксис: <HR align="center" size=n width=n color="цвет">

Элемент <P>

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align.

Синтаксис: <P align=отступ> Текст абзаца </P>

Элемент <BR>

Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений, вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear.

Синтаксис: <BR clear=обтекание> Текст

Может быть отменен тэгами <NOBR> и </NOBR>

Элемент <WBR>

Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку.

Синтаксис: <WBR >Текст

Элемент <PRE>

Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того, текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT>

Синтаксис: <PRE width=число символов >...текст.. .</PRE>

Элемент <DIV>

Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.

Синтаксис: <DIV align=отступ> Текст раздела </DIV>

Элемент <CENTER>

Элемент <CENTER> текст </CENTER> полностью идентичен конструкции

Синтаксис: <DIV align=center> Текст раздела </DIV>

Элемент <ADDRESS>

Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона.

Синтаксис: < ADDRESS>контактная информация </ADDRESS>

Элемент <BLOCKQUOTE>

Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста.

Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>

Элемент <SPAN>

Билет 5. Теги, используемые при создании нумерованных и маркированных списков. Приведите примеры созданных списков.

Для создания нумерованных списков используются тэги <OL> <LI>

Тэгом <OL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.

Значение Нумерация

TYPE

A A, B, C..

a a, b, c..

I I, II, III..

i i, ii, iii..

1 1. 2. 3..

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

При помощи атрибутов START VALUE можно изменить порядок нумерации списка.

START - служит для задания начального номера списка, отличного от 1.

VALUE - дает возможность назначить произвольный номер любому элементу списка.

Пример:

HTML-код:

<ol>

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol type="A">

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol start="5">

<li>элемент 1</li>

<li value="9">элемент 2</li>

<li>элемент 3</li>

</ol>

Отображение в браузере:

элемент 1

элемент 2

элемент 3

элемент 1

элемент 2

элемент 3

элемент 1

элемент 2

элемент 3

Маркированный список html страницы

Для создания маркированных списков применяют тэги <UL <LI>

Тэгом <UL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования.

В пределах одного списка можно использовать различную маркировку элементов списка.

Пример:

HTML-код:

<ul type="circle">

<li>элемент 1</li>

<li>элемент 2</li>

<li type="disc">элемент 3</li>

<li type="square">элемент 4</li>

</ul>

Отображение в браузере:

элемент 1

элемент 2

элемент 3

элемент 4

Билет 6 Понятие гиперссылки, ее виды и способы задания

Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит дескриптор <A>

Пример:

HTML-код:

<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>

<a href="../index.html">Ссылка на главную страницу сайта</a>

Отображение в браузере:

Ссылка на главную страницу сайта Ссылка на главную страницу сайта

Гиперссылка в пределах html страницы

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

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга<A>. Имя должно содержать только буквы и цифры.

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

Пример:

HTML-код:

<a href="#Начало страницы">Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

<a name="Начало страницы"></a>

Отображение в браузере:

Наверх страницы

Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.

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

Пример:

HTML-код:

<a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a>

Отображение в браузере:

admin@on-line-teaching.com

Открытие html страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код:

<a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</a>

Отображение в браузере:

Ссылка на главную страницу сайта

Цвет текста гиперссылок

Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.

Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

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

Билет 7 Способы встраивания графики и мультимедиа в HTML-документ

Элементы MULTICOL, LAYER и другие

Внедрение изображений в документы HTML было предусмотрено с момента появления этого языка, для чего был предусмотрен элемент IMG. Последующие расширения HTML в области мультимедиа позволяют включать в документы графические изображения, видеоклипы, звук и апплеты Java, а также различные интерактивные элементы типа Flash-роликов, VRML и многого другого.

До появления HTML 4 различные фирмы-производители браузеров предлагали свои расширения. Так, Microsoft для включения в документ видеоклипов AVI предлагала атрибут DYNSRC для элемента IMG. Netscape еще в версии 1.2 своего браузера ввела в обиход элемент APPLET (для включения апплетов Java), а в 2.0 – EMBED (для взаимодействия с неподдерживаемыми самим браузером типами файлов через подключаемые модули). В 3-й версии Internet Explorer также появилась поддержка элемента EMBED, но для использования элементов ActiveX. Кроме того, существует элемент SOUND, появившийся в браузере-прародителе MOSAIC и BGSOUND, введенный в MSIE.

Для того чтобы внести ясность во все это изобилие, консорциумом W3C был предложен универсальный элемент OBJECT. Он может заменить собой элементы IMG, APPLET, EMBED, а заодно и IFRAME. К сожалению, его поддержка браузерами все еще хромает.

В общем случае, для вставки стандартных для Web графических файлов (JPEG, PNG, GIF) используйте элемент IMG. Для вставки звука и видеоизображений можно использовать как EMBED, так и OBJECT. А для апплетов, написанных на Java – APPLET. Примеры использования графики и внедренных объектов вы найдете в папке Part_2/Objects.

ПРИМЕЧАНИЕ

В HTML5 все-таки были введены специальные элементы — AUDIO и VIDEO — для поддержки звука и видео, соответственно. К сожалению, эти теги поддерживаются лишь браузерами, выпущенными не ранее 2010 года.

Элемент IMG

Элемент IMG широко используется для внедрения рисунков на страницы Web. Он имеет два обязательных атрибута – SRC и ALT, определяющих расположение рисунка и альтернативное (текстовое) описание соответственно:

<img src="fox.jpg" alt="Лиса" />

ВНИМАНИЕ

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

Еще два атрибута – HEIGHT и WIDTH, определяющие размеры изображения, хотя и не являются обязательными, но рекомендуются к повсеместному использованию, поскольку позволяют браузеру сразу выделить необходимое место на странице, не дожидаясь загрузки собственно файла с рисунком:

<img src="fox.jpg" alt="Лиса" width="120" height="150" />

В данном примере мы определили элемент IMG, который ссылается на файл fox.jpg с размерами 120x150 пикселей и с альтернативной подписью «Лиса».

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

<a href="fox.html"><img src="fox.jpg" alt="Лиса" /></a>

Здесь мы определили ссылку на файл fox.html, которая выглядит как обведенный в рамку рисунок. Собственно за наличие или отсутствие такой рамки отвечает еще один часто применяемый (хотя и устаревший) атрибут IMG – это BORDER, определяющий толщину рамки. Исторически сложилось так, что если атрибут BORDER явно не указан, то браузеры не выводят рамку для обычных картинок, и выводят для рисунков, являющихся ссылками. Из этого следует, что во избежание неожиданностей следует стараться всегда указывать и этот атрибут:

<img src="fox.jpg" alt="Лиса" width="120" height="150" border="0" />

Таким образом, мы уже насчитали целых пять собственных атрибута IMG, причем два из них (ALT и SRC) всегда должны присутствовать. Кроме них, для этого элемента определены еще четыре собственных атрибута. Это NAME, LONGDESC, ISMAP и USEMAP. Кроме того, существует еще ряд фирменных расширений, да и устаревшие атрибуты оформления не ограничиваются одним лишь BORDER. Все это великолепие собрано в таблице2.37.

Таблица 2.37 Атрибуты элемента IMG

Атрибут Примечание Описание

id, class Общие Идентификаторы элемента

lang, dir Общие Информация о языке и направление текста

title, style Общие Определяют заголовок и стиль элемента

name Отменен в XHTML 1.1 Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости

src Обязательный атрибут Указывает URI изображения

alt Обязательный атрибут Указывает текст, который должен быть показан на месте изображения, если оно не было загружено

longdesc Только Mozilla Определяет URI файла с расширенным описанием изображения

usemap - Указывает URI клиентской карты рисунка

ismap - Указывает, что должна быть использована серверная карта рисунка

align Устаревший Определяет выравнивание относительно окружающего блока текста. Может принимать значения bottom, middle, top, left, right

width, height - Определяют размер изображения по горизонтали и вертикали соответственно

hspace, vspace Устаревшие Указывают величину отступа от рисунка до окружающего его текста в пикселях: hspace – слева и справа, vspace – сверху и снизу

border Устаревший Определяет наличие и ширину рамки вокруг изображения в пикселях

lowsrc Нестандартный Netscape Указывает на URI компактного изображения, которое должно быть отображено до загрузки основного. После загрузки основного файла (указанного в src) изображение будет заменено

dynsrc Нестандартный MSIE Указывает на URI видеоклипа в формате AVI

start, loop, loopdelay, controls Нестандартные MSIE, используются совместно с dynsrc Определяют момент запуска клипа, количество повторов, паузу между повторами и необходимость отображения элементов управления проигрыванием клипа соответственно

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Общие Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Атрибут NAME был введен для того, чтобы к изображению могла обратиться программа-сценарий на JavaScript – возможно, вам уже встречались в Web рисунки, при наведении на которые указателя мышки происходили, например, замены изображения и тому подобные действия. Такое поведение мы еще рассмотрим в соответствующем разделе книги, а примеры использования остальных (преимущественно, устаревших) атрибутов вы можете осмотреть в файле images.html. Что же касается карт изображений, то они подробно рассматриваются в контексте элементов AREA и MAP.

Еще один часто встречающийся атрибут элемента IMG – это ALIGN, отвечающий за выравнивание рисунка по тому или иному краю страницы:

<img src="fox.jpg" alt="Лиса" width="120" height="150" align="left" />

В данном случае рисунок будет передвинут в максимально возможную левую позицию.

ПРИМЕЧАНИЕ

Поскольку атрибут ALIGN является устаревшим, то в CSS ему предусмотрена замена – в данном случае это свойство float, о котором будет рассказано в соответствующей части этой книги, в главе, посвященной позиционированию.

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

В завершение знакомства с элементом IMG следует отметить, что в качестве форматов графических файлов современные программы просмотра поддерживают GIF, JPEG и PNG. Кроме того, MSIE «понимает» BMP, а последние версии Mozilla – MNG и JNG. Каждый графический формат обладает собственными преимуществами и недостатками (кроме, пожалуй, BMP, у которого преимуществ фактически нет), а потому выбор формата графического файла может в ту или иную сторону повлиять на конечный вид и время загрузки страницы.

ПРИМЕЧАНИЕ

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

Свойства IMG

Закрывающий тег: нет.

Совместимость: все.

Вложение: недопустимо (пустой элемент).

Уникальный: нет.

Элемент OBJECT

Все современные графические браузеры имеют встроенную поддержку для наиболее распространенных типов данных, таких, как изображения GIF и JPEG, а также для текстовых файлов и т.д. Элемент OBJECT может использоваться для взаимодействия с иными объектами, например, документами Adobe Acrobat, видеоклипами, или графическими изображениями в различных форматах. При этом задействуются дополнительные программы – подключаемые модули (Plug-ins).

Для примера возьмем нестандартный для Windows тип файла – PICT и попробуем внедрить его на Web-страницу при помощи элемента OBJECT:

<object data="sun.pct" height="150" width="250" type="image/pict"></object>

ВНИМАНИЕ

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

В результате, если у вас установлена поддержка мультимедийных форматов Macintosh (например, проигрыватель Apple QuickTime), то вы увидите внедренное изображение в формате, который самим браузером не поддерживается (рис. 2.24).

Рис. 2.24. Страница с внедренным в качестве объекта рисунком в формате PICT

В то же время, допустимо использование элемента OBJECT и для стандартных типов данных, например, рисунков JPEG:

<object data="sun.jpg" height="150" width="250" type="image/jpeg"></object>

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

<object data="sun.pct" height="150" width="250" type="image/pict">

<object data="sun.jpg" height="150" width="250" type="image/jpeg">

Солнце – рисуют дети

</object>

</object>

В данном случае, если браузер не сможет найти модуль поддержки рисунков PICT, он попытается вывести JPEG-рисунок. Если же он не сможет сделать и этого (например, файл «затерялся»), или вообще не распознает элемент OBJECT, то выведет то, что находится внутри контейнера OBJECT, в данном случае – строку «Солнце – рисуют дети».

ПРИМЕЧАНИЕ

Браузер MSIE не поддерживает вложение объектов, а, следовательно, и их полноценную деградацию. Так, если он не сможет распознать тип объекта, то лишь выведет альтернативное содержание, а если распознает, но не загрузит – то покажет пустое место.

В начале этой главы было сказано, что элемент OBJECT может использоваться не только вместо IMG, но и в качестве замены для плавающего фрейма (IFRAME). Делается это очень просто: достаточно в качестве источника указать HTML-документ, и установить соответствующий тип файла:

<object data="file.html" height="300" width="200" type="text/html"></object>

Такой код по своему конечному результату полностью идентичен тому, что можно получить, использовав элемент IFRAME с соответствующими параметрами:

<iframe src="file.html" height="300" width="200"></iframe>

Во всех предыдущих примерах мы рассматривали OBJECT как расширенную замену другим элементам – IMG и IFRAME. Однако область применения этого элемента гораздо шире. Например, при помощи OBJECT можно встраивать в документы HTML любые программы. Самый распространенный случай – это внедрение Flash-роликов. В принципе, делается это аналогично внедрению уже рассмотренных объектов – вся разница будет лишь в типе данных:

<object data="simple.swf" type="application/x-shockwave-flash" width="400" height="200"></object>

Если внедрить ролик Flash в HTML-документ подобным образом и посмотреть результат в Mozilla или Opera, то может показаться, что все в порядке. Но если посмотреть в MSIE, то вы увидите, что, хотя в обозначенную область и загружен проигрыватель Flash, сам клип в него не загрузился. Эта проблема вызвана отличиями в браузерах и остается лишь искать обходные пути. В качестве наиболее безопасного варианта в данном случае можно рекомендовать указание файла Flash при помощи элемента PARAM, вложенного в контейнер OBJECT:

<object data="simple.swf" type="application/x-shockwave-flash" width="400" height="200">

<param name="movie" value="simple.swf" />

</object>

Такая запись, с одной стороны, не противоречит стандартам, и в то же время будет совместима практически со всеми встречающимися браузерами (см. файл flash.html). Что касается самого элемента PARAM, то мы рассмотрим его несколько позже, а пока что сосредоточимся на атрибутах элемента OBJECT, обратившись для этого к таблице 2.38.

Таблица 2.38 Атрибуты элемента OBJECT

Атрибут Примечание Описание