 |
Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR .
|
|
|
|
Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Необходимо указывать значения параметров HSPACE и VSPACE, даже если хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое–то небольшое значение, не равное нулю.
EMBED
(В спецификациях W3C отсутствует) – Embed
Используется для вставки в HTML различных объектов: не–HTML документов и media–файлов. Тип вставляемого объекта, будь то музыкальный wav/midi–файл или трехмерный мир VRML, должен быть зарегистрирован на машине пользователя как проигрываемый одним из имеющихся plug–in'ов или поддерживаемый каким–либо приложением. Если браузер поддерживает элемент EMBED, содержащиеся между начальным и конечным тэгами текст и элементы будут игнорироваться.
Параметры:
Вставка объекта происходит так же, как и вставка изображения (см. элемент IMG): под внедряемый объект необходимо сначала выделить место. Поэтому элемент EMBED имеет ряд одинаковых с элементом IMG параметров, а именно: NAME, ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE и VSPACE.
Другие параметры:
SRC – обязательный параметр. Определяет имя файла вставляемого объекта.
PLUGINSPACE – указывает на адрес (URL), по которому можно найти plug–in, необ–ходимый для просмотра типа файлов, аналогичных указанному в параметре SRC.
PALETTE – определяет тип цветовой палитры для просмотра объекта. Данный параметр работает только на Windows–машинах с 256–цветной системной палитрой. Возможные значения:
background – использовать background–палитру для отображения объекта (используется по умолчанию).
foreground – использовать foreground–палитру для отображения объекта.
HIDDEN – определяет, отображать указанный объект или нет. Возможные значения:
|
|
|
true – отображать объект.
false – не отображать объект (используется по умолчанию).
TYPE – явно указывает браузеру к какому типу файлов относится загружаемый объект, помогая определить необходимое средство просмотра (plug–in). В качестве значения указывается зарегестрированный MIME–тип файла.
<EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>
NOEMBED
(HTML 3.2) – No Embed
Определяет текст, который будет отображен, если браузер по какой–либо причине не работает с элементом EMBED.
<EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED> Ваш браузер морально устарел;–D </NOEMBED>
</EMBED>
APPLET
(HTML 3.2) – Applet
Имеет начальный и конечный тэги. Используется для вставки в HTML Java–апплетов – программ на языке Java, исполняемых браузером на вашем компьютере. Java–апплет исполняется в специально отведенном для него месте, отображаясь в документе наподобие картинки. Поэтому многие параметры элемента APPLET сходны с параметрами элемента IMG.
Если ваш браузер не имеет встроенной виртуальной Java–машины (и, соответственно, не поддерживает элемента APPLET), то на месте окошка Java–апплета вы увидите текст, заключенный между начальным и конечным тэгами.
Параметры:
CODE – обязательный параметр. Определяет имя файла исполняемого Java–апплета.
CODEBASE – указывает базовый адрес (URL), по которому находится файл с кодом исполняемого Java–апплета. Если парамер CODEBASE опущен, используется URL текущего документа.
ALIGN – обязательный параметр. Указывает способ выравнивания Java–апплета. Может принимать те же значения, что и аналогичный параметр элемента IMG.
HEIGHT и WIDTH – обязательные параметры. Определяют ширину и высоту (в пикселах) окошка вывода программы.
HSPACE и VSPACE – определяют отступ (в пикселах) по горизонтали и вертикали от других объектов документа.
NAME – указывает имя Java–апплета, уникальное для данного документа. Позволяет Java–апплетам на данной странице находить себе подобных и взаимодействовать друг с другом.
|
|
|
ALT – определяет текст, отображаемый на месте апплета браузером, если браузер понимает элемент APPLET, но не может выполнять Java–апплеты.
SRC – указывает адрес (URL), ассоциированный с апплетом. Например, адрес сайта разработчика апплета.
<APPLET CODE="JumpingGirl.class" WIDTH="30" HEIGHT="40" ALIGN="left" ALT="Прыгающая девочка">
Если вы видите этот текст, значит ваш браузер не поддерживает Java.
</APPLET>
В результате слева отображается окошко (размером 30x40 точек) с прыгающей девочкой. Само собой, у вас должен быть файл JumpingGirl.class, который должен лежать в той же директории, что и текущий документ.
<APPLET CODEBASE="http://www.igf.ru/javagames" CODE="CrazyTetris.class" WIDTH="300" HEIGHT="500" ALIGN="right" SRC="http://www.igf.ru" ALT="Игра Тетрис">
</APPLET>
В данном примере справа отображается окошко (размером 300x500 точек) с игрой Тетрис. Браузер будет пытаться загрузить игру используя URL "http://www.igf.ru/javagames/СrazyTetris.class".
Примечание: Для передачи Java–программе каких–либо параметров используется элемент PARAM.
PARAM
(HTML 3.2) – Parameter
Располагается в начале элемента APPLET. Используется для передачи Java–программе каких–либо параметров. Элемент задает пару "имя – значение" переменной, которая будет передана Java–программе.
Задание:
Создать в своей директории свою страницу "photo.htm". Страница должна содержать не менее 6 фотографий и должна иметь следующий вид:
| img | img | ||
| img | img | ||
| img | img | ||
| img | Img |
Контрольные вопросы:
Опишите элементы, необходимые для работы с объектами HTML–документов.
Опишите элемент IMG и его параметры.
Опишите элемент EMBED и его параметры.
Для чего необходим элемент NOEMBED.
Опишите элемент, который используется для вставки в HTML Java–апплетов, а также укажите его параметры.
Опишите элемент PARAM.
Лабораторная работа № 5
Тема: Оформление HTML-документа. Таблицы
Цель: Научится создавать и оформлять таблицы в HTML-документах
Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
|
|
|
Создание строки таблицы — тег <ТR> Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Определение ячеек таблицы – тег <ТD> Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов
<ТD></ТD> в строке определяет число ячеек (открыть)
<TABLE>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
<TABLE >
<TR>
<TH>Заголовок центрирован по умолчанию</TH>
<TH COLSPAN=2>Заголовок может объединять столбцы</TH>
</TR>
<TR>
<TH>Заголовок может быть расположен перед столбцами</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TH ROWSPAN=3>Заголовок может объединять строки</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
Использование заголовков таблицы — тег <САРТIОN>
|
|
|
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
<TABLE>
<CAPTION ALIGN=top>Заголовок над таблицей</CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE>
<CAPTION ALIGN=bottom>Заголовок под таблицей </CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую–нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
<TABLE BORDER="3">
<TR>
<TD>Если вы хотите сделать какую–нибудь
ячейку шире, чем верхняя или нижняя,
</TD>
<TD>можно воспользоваться атрибутом
СОLSPAN=, </TD>
</TR>
<TR>
<TD BGCOLOR=white COLSPAN="2" > чтобы
растянуть ее над любым количеством
обычных ячеек.</TD>
</TR>
</TABLE>
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТR> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
|
|
|
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPASING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN.
Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB–код или стандартное название цвета.
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Задание:
1. Постройте таблицу следующего вида:
2. Постройте таблицу следующего вида:
3. Постройте таблицу следующего вида:
4. Постройте таблицу следующего вида:
Использование стандартного параметра BORDER приводит к неоднозначности отображения границы таблицы. Точнее каждый браузер интерпретирует вид границы по–своему. Для устранения подобного разночтения создают таблицу с простой однопиксельной рамкой. Последовательность действий такова:
Создать таблицу "подложку", состоящую из одной строки и одного столбца. Залить ее требуемым цветом.
Далее в эту таблицу помещаем вложенную, заливая каждую ячейку нужным цветом.
Устанавливаем свойство CELLSPACING вложенной таблицы равным 1, тогда нижняя таблица будет просвечивать и образует рамку толщиной 1 пиксель.
Контрольные вопросы:
|
|
|
