Что такое HTTP 27 страница

Физические стили

Элементами, определяющими физические стили, являются:

• <b> — жирный;
• <i> — курсив;
• <tt> — моноширинный шрифт, как на печатающей машинке;
• <u> — подчеркивание;
• <big> — увеличенный размер;
• <small > — уменьшенный размер;
• <sub> — нижний индекс;
• <sup> — верхний индекс.

Например:

<р>Этот текст написан <i>курсивом</i>,
этот - <b>жирным</b>.

этот выделен <tt_>моноширинным шрифтом</tt>,
а этот - <u>подчеркнут</u>.</р>

Логические стили

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

Список логических элементов:

• <ет> — выделенный;
• <strong> — особо выделенный;
• <cite> — цитата или ссылка на внешний источник;
• <code> — вставка исходного программного кода;
• <dfn> — определение;
• <samp> — пример, часто выглядит как <code>;
• <kbd> — нечто подлежащее вводу с клавиатуры;
• <var> — переменная или значение;
• <q> — цитированный текст в кавычках;
• <abbr> — аббревиатура;
• <acronym> — акроним.

Особенно интересен логический стиль <q>. Он в большинстве браузеров окружает текст кавычками. А если указать в атрибуте lang какой-нибудь язык, в котором эти кавычки обычно выглядят не так, как в английском, то они действительно будут перерисованы!

<ins> и <del>

Эти два логических стиля используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже) вставлен или удален. Часто применяется при создании сайта группой дизайнеров. Среди атрибутов этих элементов могут быть datetime, cite и title. В datetime можно указать дату и время удаления/ вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. Используя атрибут title, можно вставить пояснения прямо в тег.

Например:

<р>Важная информация для
<ins datetime="2001-12-05T09:00:00-05:00"
title="Изменить после голосования">Совета директоров
</ins>

<del>
Президента компании
</del>: акционеры вами недовольны.</р>

Списки

Списки являются элементами блокового уровня, контейнерами, содержащими определенные пункты, определяемые с помощью элемента <li>. Чтобы изменить стиль списка, нужно изменить контейнер, в котором содержатся все <l i>.

Упорядоченный список задается с помощью элемента <ol>. Перед каждым пунктом в этом случае ставится его порядковый номер.

Например:

<оl>
<li>ПерВЫЙ ПУНКТ<li>
<li>Второй пункт</li>
<li>Третий пункт</li>

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

Если вы работаете с переходным DTD, то можете смело использовать атрибуты start, value и type для настройки упорядоченных списков. (В стандарт XHTML 1.0 они не вошли.) Значения type следующие:

• <оl type="A"> — прописные буквы;
• <ol type="a"> — строчные буквы;
• <оltype="I"> — большие римские цифры;
• <ol type="i"> — маленькие римские цифры;
• <ol type="l"> — арабские цифры (по умолчанию).

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

• <ul type="disc"> — кружок;
• <ul type="square"> — квадратик;
• <ul type="circle"> — кольцо.

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

Например:

<ol start="10">

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

Например:

<li value="1 ">#!</li>
<li>#2</li>
</ol>

Есть еще третий, менее распространенный тип списка, задаваемый элементом <dl>. Это список определений. Соответственно, внутри списка один из элементов (<dt>) является контейнером для термина, а другой (<dd>) — для описания этого термина. Никто не обязывает вас использовать их исключительно вместе друг с другом, однако наиболее ценен такой список именно тогда, когда он состоит из этих двух частей. В списке определений (словаре, если хотите) перед пунктами не ставятся ни номера, ни маркеры.

Например:

<dl>
<dt>TepMHH l</dt>
<dd>описание термина l</dd>
<dt>Термин 2</dt>
<dd>0писание термина 2
</dd>

Изображения, гиперссылки, Java и плагины

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

Вставка изображений

Для вставки изображений используется элемент <img />. При этом указывается абсолютный или относительный путь к графическому файлу в подходящем формате (GIF, JPEG, некоторые браузеры работают с PNG). Для этого нужен атрибут
src.

Например:

<img src="imagel.gif" />

Кроме этого, у <img /> может быть еще много атрибутов, среди которых, например, alt, в котором указывается текст, заменяющий изображение при отсутствии возможности его отображения. Атрибут longdesc может содержать URL с подробным текстовым описанием изображения. Это тоже сделано для тех браузеров и людей, которые по тем или иным причинам не могут просматривать картинки. Если изображена какая-нибудь таблица или график, то словесное описание иногда может заменить и то и другое.

Например:

<img src="chartl.jpg" аlt=
"Таблица продаж за первый квартал"
longdesc="/img_desc/ chartl.html" />

У <img /> также может быть атрибут align, позволяющий задать расположение картинки относительно окружающего текста. Изображение становится «плавающим», если в качестве значения align указать left или right. Текст при этом как бы обтекает графику.

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

Например:

<img src="chartl.jpg" alt="chart #1" align=
"left" height="330" width="200" />

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

Гиперссылки создаются с помощью особого элемента под названием «якорь» (<а>). Однако сам по себе якорь не означает почти ничего. Сама гиперссылка задается атрибутом href, значением которого может быть относительный или абсолютный адрес. Якорь является контейнерным элементом, — это значит, что между его открывающим и закрывающим тегами может располагаться любой текст со своей разметкой, изображение или даже мультимедийный элемент. Единственное ограничение заключается в невозможности создания вложенных ссылок. То есть один <а> внутрь другого вы поместить не можете.

Примеры:

<а href="http://www.w3.org">Посетите сайт W3C
</a>
<а href="products/productl.html">
<img src="productl.jpg" alt="Фрукт-продукт №1" />
</а>

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

ПРИМЕЧАНИЕ

Атрибут name не входит в стандарт XHTML 1.0, поэтому лучше всего использовать переходный DTD, а также одновременно name и id в одном и том же якоре.

Итак, давайте создадим поименованную секцию:

<а name="answerl" id="answerl"><h2>Ответ:

Потому что оно синее. </h2>
</a> А теперь создадим ссылку на нее:
<а href="#answerT'>Bonpoc: Почему небо синее?
</а>

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

<а href="http://www.fakecorp.com/questions.
html#answerl">
Bonpoc: Почему небо синее?</а>

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

У <а> может быть и еще один интересный атрибут под названием target. С его помощью можно указать целевой фрейм либо вообще целевой объект, в котором будет открыта ссылка. Эти объекты могут быть следующими:

• _blank — ссылка будет загружена в новое окно обозревателя;
• _top — загружает ссылку в текущее окно, независимо от наличия фреймов;
• _parent — загружает ссылку в родительский фрейм;
• _sel f — загружает ссылку в текущий фрейм.

Пример:

<а href="productl.html" tаrgеt="_blank">
Ссылка будет открыта в новом окне.</а>

Карты ссылок

Можно и совместить изображения и гиперссылки и создать нечто, называемое картой ссылок. Что это такое? Представьте себе, что мы мысленно разбиваем изображение на части и каждая из них является отдельной ссылкой.

Как это сделать? Для этого существует атрибут элемента <img /> под названием usemap. В нем указывается ссылка на некий поименованный объект, часть страт цы, в которой определена карта ссылок.

Например:

<img src="banner.gif" usemap="#banner_map" аlt=
"навигационный баннер" border="0" />

ПРИМЕЧАНИЕ

Обратите внимание на атрибут border. Он используется тогда, когда изображение является ссылкой, а также в картах ссылок, чтобы избежать нежелательного автоматического появления синей (или какой-нибудь другой) рамки вокруг картинки.

Атрибут usemap сообщает браузеру о том, что где-то рядом должно быть определение карты ссылок. Оно создается с помощью <тар>, в котором отдельными элементами <агеа /> задаются «горячие области». У <тар> имеется атрибут name — идентификатор карты ссылок.

Итак, поговорим об элементе <агеа />. Он задает не только расположение и размеры области (атрибут coords), можно указать и ее форму (атрибут shape). Конечно же, должен присутствовать атрибут href — собственно ссылка на URL. У shape могут быть следующие значения:

• rect — прямоугольник, требуются четыре координаты, задающие отступ слева, верхний отступ, правый и нижний;
• ci rcl e — зона в форме окружности, нужны три координаты: х центра, у центра, а также радиус.;
• polygon — многоугольник, каждая вершина задается парой координат (х, у).

Например:

<map name="banner_map">
<area shape="rect" coords=
"0. 0.100, 100" href ="index.html" аlt="Индекс" />
<area shape="rect" coords=
" 100. 0.200. 100" href="products.html" alt="Products" />
<area shape="rect" coords=
"200. 0.300. 100" href ="about. html" alt="0
компании" />
</map>

Если вы хотите создать серверную карту ссылок, можно использовать атрибут ismap="ismap" элемента <img />. Затем поместить последний внутрь якоря, ссылающегося на файл карты на сервере.

Например:

<а href="/maps/topbanner.map">
<img src="topbanner.gif" ismap=
"ismap" аlt="Баннер" />

Мультимедийные элементы

Самый традиционный способ вставки мультимедийных элементов — это применение элемента <а>. Иногда тем не менее их внедряют прямо в окно документа. Это означает, что они будут выглядеть как обычные изображения, вставленные в страницу с помощью элемента <img />.

Для этого существует элемент <embed> (который, правда, не входит в стандарт XHTML 1.0, то есть нужно применять DTD для XHTML Transitional). Он загружает специальный плагин, который обеспечивает выполнение дополнительных функций Netscape-совместимыми браузерами. В зависимости от типа подгружаемых данных, у <embed> могут быть несколько разных атрибутов. Наиболее часто встречаются следующие: src, width, pluginspage и в некоторых случаях autoplay. Нужно смотреть документацию по конкретным плагинам (а также главу 13).

Например:

<embed name="Moviel" src="moviel.mov" width="240"

height="120" piuginspage=
"http://www.apple.com/quicktime/download/">
</embed>

Java-апплеты

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

Вставляются апплеты с помощью элемента <object>, входящего в стандарт XHTML Наряду с ним, впрочем, популярен и устаревший ныне Netscape-элемент <applet>. Что же касается <object>, то он должен иметь атрибут classid, ссылающийся на файл с апплетом. Может быть и другой атрибут — codebase, если требуется указать полный URL Java-апплета.

Например:

<object codetype="application/java"
codebase="http://www.fakecorp.coin/applets/"
classid="java:myapplet.class"
standby="HfleT загрузка..." width=400 height=350>
</object>

Создание таблиц

Элементы таблицы позволяют размещать данные в строках и столбцах на странице. Их можно использовать для того, чтобы представлять табличные данные, а можно просто организовывать таким образом страницу. При этом границы можно сделать невидимыми, и пользователю будет казаться, что все само так удачно расположилось. Подробности этих подходов раскрываются в главах 8 и 9.

Таблицы создаются при помощи элемента <table>, у которого может быть множество атрибутов:

• width — устанавливает относительную ширину (в процентах) таблицы относительно окна браузера, можно указать и абсолютное значение в пикселах;
• Border — определяет ширину окружающей таблицу рамки (в пикселах);
• Cel I spaci ng — межклеточное расстояние;
• Cel I paddi ng — внутриклеточный отступ;
• Rules — определяет, какие из внутренних линий таблицы будут видны (значения: none, groups, rows, cols или all);
• Frames — определяет, какие части внешней рамки таблицы будут видны (значения: above, below, hsides, Ihs, rhs, vsides, box или border).

Еще один атрибут, align, может задавать расположение таблицы относительно окружающего текста (тогда таблица будет называться «плавающей»), однако он не входит в стандарт XHTML. Его значениями могут быть right и left.

Например:

<table border="1" cellpadding="5"
cellspacing="5" width="50%">
</table>

Еще у элемента <table> может быть атрибут summary, особенно широко используе-
мый различными нестандартными браузерами.

Например:

<table summary="B этой таблице показано,
что объем продаж за первый квартал текущего года
в северном регионе составил 500 единиц, в западном
он составил 400 единиц, в восточном - 600 единиц,
а в южном - 300. ">

Внутри контейнера <table> располагаются различные элементы, составляющие таблицу. Среди них может быть необязательный элемент <capt1 оп>, в котором указывается текст заголовка.

Например:

<table>
<сарtion>
<b>Объемы продаж в регионах за первый квартал
текущего года</b>
</сарtion>

</table>

Далее следуют контейнеры строк <tr>, контейнеры заголовков столбцов или строк <th>, а также контейнеры ячеек <td>.

Например:

<table>
<сарtion><b>0бъемы продаж в регионах по
кварталам текущего года</b>
</caption>

<tr><th>Becнa</th><td>500</td>
<td>300</td><td>200</td></tr>
<tr><th>Лето</th><td>600</td>
<td>400</td><td>650</td></tr>
</table>

Как строки таблицы, так и ячейки могут иметь параметры val ign и align. Первый применяется для вертикального выравнивания данных в ячейке и может иметь значения top, middle и bottom. Второй, соответственно, применяется для горизонтального выравнивания данных и может иметь значения left, center и right. Значения, указанные для конкретных ячеек (<td> или <th>) перекрывают значения, установленные для целой строки (<tr>).

Например:

<table border»" 1">
<tr valign="top">
<td><img src="imagel.gif" /></td>
<td valign="bottom"><img src="image2.gif" />
</td>

<td><img src="image3.gif" /></td>
</tr>
</table>

Ячейки можно «растягивать» в разных направлениях, точнее, объединять их с другими. Для этого используются атрибуты rowspan и colspan.

Например:

<table>
<tr><th>Студент</th>
<th colsраn="2">0ценки</th>
</th> <tr><td>Миша</td><td>100</td>
<td>90</td></tr> <tr><td>Caша</td>
<td>85</td><td>100</td></tr> <tr>
<td>Taня</td>
<td colspan="2">95</td></tr>
</table>

ПРИМЕЧАНИЕ

У строк и отдельных ячеек может быть атрибут bgcolor, с его помощью можно задать цвет заднего фона (в шестнадцатеричном формате или указав название). Так, например, значению в шестнадматеричном формате #FFFFFF будет соответствовать название white (белый). Имейте в виду, что этот атрибут не вошел в стандарт XHTML, а значит, может применяться только с переходным DTD.

Кроме всех перечисленных элементов, в контейнер <tab1e> могут входить еще три: <thead>, <tfoot> и <tbody>. Особенно интересный эффект получается при просмотре таблицы с такими элементами в браузере, который их может нормально интерпретировать. В этом случае пользователь заметит, что при прокручивании длинной таблицы (<tbody>) вниз ее заголовок (<thead>) и основание (<tfoot>) остаются неподвижными. Спецификация XHTML требует, чтоб в исходном коде контейнер <tfoot> следовал сразу за <thead>. Это нужно для того, чтобы браузер мог корректно обработать эти элементы. Вместе с тем такое их расположение может привести к тому, что поменяется порядок секций при просмотре в каких-нибудь старых браузерах.

Например:

<table>
<thead>

Данные заголовка
</t_head>
<tfoot>.

Данные основания

</tfoot>
<tbody>

Данные тела таблицы

</tbody>
</table>

Создание наборов фреймов

С помощью элементов <frameset> и <frame> можно сделать так, что в одном и том же окне браузера будут отображаться сразу несколько HTML-документов. Кроме того, с помощью атрибута target можно задавать целевой фрейм для тех или иных ссылок.

Для начала нужно указать в начале документа особый DTD, соответствующий стандарту наборов фреймов. После этого должен следовать элемент <frameset>, который чем-то напоминает <body> обычных документов. У него может быть два атрибута: rows и col s. Каждый <frameset> определяет либо строку, либо столбец фреймов. Если вам нужно вложить одно в другое, следует использовать несколько элементов <f rameset>. Значения атрибутов rows и col s могут указываться либо в пикселах, либо в процентах. Одним из стандартных значений является *, которая означает «оставшаяся часть окна».

Например:

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Frameset/EN"
"http://www.w3.org/TR/xhtmll/DTD/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Frameset</title>
</head>
<frameset cols="150.*">
</frameset>
</html>

Внутри каждого <frameset> могут быть элементы <frame> и <noframe>. Яричем там будет столько <f rame>, сколько столбцов или строк вы определили для данного <frameset> (если только вы не вкладываете их один в другой, о чем будет сказано далее). Но на всю страницу может быть не более одного элемента <nof rames>. Последний позволяет задать альтернативный текст или разметку для браузеров, не поддерживающих фреймы.

У элемента <frame> должен быть атрибут src, определяющий URL страницы, которая будет выводиться в данном фрейме. Может быть еще необязательный атрибут id — идентификатор, на который можно сослаться как на обозначение целевого объекта.

ПРИМЕЧАНИЕ

Хотя id — это вполне стандартный атрибут с точки зрения XHTML, но для совместимости со старыми браузерами следует вставлять еще и атрибут name.

Как я уже говорил, содержимое элемента <nof rame> будет выведено только теми браузерами, которые ничего не знают о фреймах.

Например:

frameset cols="150.*">
<frame src="index.html" />
<frame src="viewer.html" name="main_viewer" id=
"main_viewer" />
<noframes>
<р>Если ваш браузер не поддерживает фреймы,
перейдите напрямую к
<а href="/articles/index.html">
списку статей</а>
direktly.</р>
</noframes>.
</frameset>

У элемента <frame> может быть еще ряд дополнительных атрибутов:

• noresize="noresize" — запрещает изменение размера фрейма пользователем;
• frameborder — значения — 1 или 0 (например, frameborder="l"); в первом случае у фрейма будет граница, во втором — нет;
• scrolling — значения — yes, no или auto; этот параметр задает режим прокрутки: разрешено (всегда видна полоса прокрутки), запрещено или «прокрутка по требованию»;
• marginwidth — изменяет правый и левый отступы во фреймах; единицы измерения — пикселы;
• marginheight — изменяет верхний и нижний отступы во фреймах; единицы измерения — пикселы;
• longdesc — позволяет указать ссылку (то есть URL) на HTML-документ, содержащий описание содержимого фрейма; пользователи нестандартных браузеров будут вам благодарны, если вы вставите этот атрибут.

Существует возможность создания вложенных наборов фреймов. Таким образом можно, например, организовать две строки фреймов в одной колонке или что-нибудь в этом роде. Это делается просто: заменяем один из элементов <frame> на второй <frameset>.

Например:

<frameset rows="150,*">
<frame src="topbanner.html" />
<frameset cols="25*.75r>
<frame src="leftcol.html"
name="left_col" id="left_col" />
<frame src-"default.htmV
name="viewer" id="viewer" />
</frameset>
</frameset>

Атрибут target элемента <а>, как уже говорилось, применяется для задания целевого фрейма. Скажем, в предыдущем примере ссылка на 1 eftcol.html могла бы выглядеть так:

<а href="newpage.html" tагдеt="viеwеr">
Щелкните здесь, чтобы увидеть новую страницу</а>

При этом документ newpage.html загрузится во фрейм под именем viewer.

Создание форм

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

Элемент <form>

Главный элемент данной спецификации — это контейнер <form>. Его атрибутами являются method и action. Значениями первого могут быть get или post. Метод get означает, что данные формы будут в явном виде добавлены к URL обрабатывающего их скрипта. Это накладывает серьезные ограничения на их размер. Метод post отсылает данные отдельно, а значит, никаких практических ограничений на размер быть не может.

Вторым атрибутом является action, значение которого представляет собой URL скрипта, который будет обрабатывать данные. Обычно скрипты хранятся в каталоге bin или cgi -bin на сервере.

Например:

<form method="post" action=

"http://www.fakecom.net/cgi-bin/ survey.pl">
</form>

Кроме этих двух основных атрибутов, у <f orm> могут быть следующие параметры:

• enctype — позволяет указать разновидность (MIME) содержимого передаваемых данных;
• name и id — идентификатор формы (нужен скриптам или таблицам стилей, при этом id входит в стандарт XHTML, a name требуется исключительно для совместимости со старым ПО);
• accept — типы данных (через запятую), поддерживаемые сервером; используются имена MIME;
• accept-charset — поддерживаемые сервером кодировки.

<textarea>

Элемент <textarea> позволяет пользователю вводить несколько строк данных. Это контейнер, в нем можно задать текст, который будет в текстовом поле по умолчанию. У него могут быть атрибуты rows и cols, определяющие размеры поля, а также атрибут name —идентификатор.

Например:

<textarea name="comments" rows="4" cols="40">
Введите комментарии, касающиеся нашего сайта.
Не забудьте оставить свой e-mail!
</textarea>

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

Элемент <input />

У этого элемента может быть атрибут type, с его помощью определяется тип элемента управления.

Его значения:

• text — поле ввода (то же самое, что текстовое поле, но меньше по размеру);
• password — то же самое, что text, но вместо букв показываются звездочки;
• checkbox — флажок, который можно установить и снять;
• radio — переключатель, можно выбрать только один из нескольких;
• hidden — скрытое поле, которое пользователь не может изменить;
• reset — кнопка очистки формы;
• submit — кнопка подтверждения формы.

У элемента <input /> может быть атрибут name, используемый для определения уникального идентификатора. Атрибут value — начальное значение (а также текст на кнопках очистки и подтверждения формы).

СОВЕТ

Если значением type является text или password, то можно в состав атрибутов <input /> включить size (размер поля) и maxlength (максимальная длина строки).

Например:

<form method="post" action="cgi-bin/form.pi">
<pre>
Имя:<input type="text" name="name"
length="40" />
Выберите свой приз:
<input type="checkbox" name="car" />Новая машина
<input type="checkbox" name="cash" />Деньги
<input type="checkbox" name="land" />Квартира
Хотите узнать больше о наших рассылках?
<input type="radio" name="subs" value-
"yes" checked="checked" />Да
<input type="radio" name="subs"
value="no" />Нет
<hr />
<input type="submit" value-''Подтвердить" />
<input type="reset" уа!ие="0чистить" />
</pre>
</form>

Обратите внимание: все флажки (checkbox) имеют разные значения name, в то время как вся группа переключателей имеет один и тот же идентификатор. Также обратите внимание на атрибут checked. Он позволяет задать начальное значение флажка или исходное положение переключателей.

Элемент <select>

Элемент <sel ect> применяется для создания выпадающих и прокручиваемых меню. Ему требуется параметр name. С помощью size можно определить число пунктов, одновременно показываемых на экране. <select> является контейнером, содержащим несколько элементов <opti оп>. Последние должны иметь уникальные значения, которые при выборе того или иного пункта присваиваются переменной, имеющей имя, указанное в <select>. С помощью атрибута selected="selected" указывается пункт, выбранный по умолчанию.

Например:

Ваше хобби
<select name="hobby">
<option sеlected="sеlected">Поедание пищи</орtion>
<option>Домино</option>
<орtion>Программирование</орtion>
<орtion>Кулинария</орtion>
</select>

Дата добавления: 2014-12-29