Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

• Название: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
• Автор: Владимир Дронов
• Жанр: Прочая справочная литература
• Год: 2011
• ISBN: 978-5-9775-0596-3

Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.

---

Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом "Список версий HTML: ", который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ("Поддона" наша таблица не имеет, так что обойдемся без секции завершения.)

В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.

Листинг 5.9

.

<P>Пожалуй, ни убавить ни прибавить…</P>

<HR>

<TABLE>

<CAPTION>Список версий HTML:</CAPTION>

<THEAD>

<TR>

<TH>Версия HTML</TH>

<TH>Год выхода</TH>

<TH>Особенности</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>1.0</TD>

<TD>1992</TD>

<TD>Официально не была стандартизована</TD>

</TR>

.

<TR>

<TD>5.0</TD>

<TD>?</TD>

<TD>В разработке</TD>

</TR>

</TBODY>

</TABLE>

<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>

.

Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. И сразу увидим, что текст "Список версий HTML" теперь выровнен по центру таблицы. Это и неудивительно — ведь мы превратили его в заголовок таблицы. Сама же таблица ничуть не изменилась (что тоже понятно — ведь ее секции Web-обозреватель никак не выделяет).

Объединение ячеек таблиц

Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10.

Листинг 5.10

<TABLE>

<TR>

<TD>1</TD>

<TD>2</TD>

<TD>3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

<TR>

<TD>6</TD>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

<TR>

<TD>11</TD>

<TD>12</TD>

<TD>13</TD>

<TD>14</TD>

<TD>15</TD>

</TR>

<TR>

<TD>16</TD>

<TD>17</TD>

<TD>18</TD>

<TD>19</TD>

<TD>20</TD>

</TR>

</TABLE>

Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.

А теперь рассмотрим таблицу на рис. 5.3.

Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?

Специально для этого теги <TD> и <TH> поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.

Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению

Рис. 5.3. Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)

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

1. Найти в коде HTML тег <TD> (<TH>), соответствующий первой из объединяемых

ячеек (если считать ячейки слева направо).

2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.

3. Удалить теги <TD> (<TH>), создающие остальные объединяемые ячейки данной строки.

Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.

Листинг 5.11

<TR>

<TD>1</TD>

<TD COLSPAN="2">2 + 3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.

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

1. Найти в коде HTML строку (тег <TR>), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).

2. Найти в коде этой строки тег <TD> (<TH>), соответствующий первой из объединяемых ячеек.

3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.

4. Просмотреть последующие строки и удалить из них теги <TD> (<TH>), создающие остальные объединяемые ячейки.

Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).

Листинг 5.12

<TR>

<TD ROWSPAN="2">1 + 6</TD>

<TD COLSPAN="2">2 + 3</TD>

<TD COLSPAN="2">4 + 5</TD>

</TR>

<TR>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

Обратим внимание, что мы удалили из второй строки тег <TD>, создающий шестую ячейку, поскольку она объединилась с первой ячейкой.

Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна (о табличном Web-дизайне см. в главе 10), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.

Что дальше?

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

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

ГЛАВА 6. Средства навигации

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

Осталось связать эти разрозненные Web-страницы воедино — в Web-сайт. Как это осуществить? С помощью средств навигации — гиперссылок.

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

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

Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.

Создание гиперссылок

Создать текстовую гиперссылку очень просто. Достаточно найти в блочном элементе (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.

Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:

Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:

<A HREF="http://www.somesite.ru/pages/page125.html">Страница № 125</A>

А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):

<A HREF="archive.zip">Архив</A>

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

<P><A HREF="22.html">Предыдущая страница</A>,

<A HREF="24.html">следующая страница</A>.</P>

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

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

Пример:

<A HREF="http://www.somesite.ru/pages/page125.html">Страница

<EM>№ 125</EM></A>

Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение "_blank", целевая страница будет открыта в новом окне Web- обозревателя.

Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):