Создание web-сайта

Атрибут TARGET содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом подчеркивания. Одно из наиболее часто встречающихся значений атрибута TARGET="_blank" отображает открываемый по ссылке документ HTML в новом окне броузера.

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

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

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

Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы разделили участок текста. При активизации подобной гиперссылки броузер «отматывает» экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке, так называемой «закладки» —специальной метки с уникальным в пределах данного документа именем, присваиваемым «закладке» посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:

<А NAME="имя_закладки">ключевое слово или заголовок раздела</А>

Второй этап — создание самой ссылки при помощи такой команды:

<А HREF="#имя_закладки">текст ссылки</А>

Помните, что для задания имени «закладки» лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя «закладки» предваряется символом «#».

Если вы хотите разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем «закладки» указывается URL документа. В этом случае рекомендуется также использовать атрибут TARGET с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:

<А HREF="http://www.server.ru/document.html#имя_закладки"

TARGET="_blank">текст ссылки</А>

ВНИМАНИЕ Помните, что броузеры не поддерживают режим «отката» при переходе— " по гиперссылке внутри документа. Иными словами, обратившись посредством ссылки к какому-либо разделу одной и той же страницы, при нажатии кнопки «НАЗАД» вы попадете не на тот участок документа, который отображался до активизации гиперссылки, а но ту страницу, которая загружалась в броузер последней.

  Ссылки на адрес электронной почты

Наверняка в процессе работы во Всемирной сети вы не раз сталкивались с гиперссылками, при активизации которых автоматически запускается установленная на вашем компьютере почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем Subject. Подобные гиперссылки также можно реализовать с использованием тега <А>. В виде кода HTML ссылку на адрес электронной почты представляют следующим образом:

<А HREF="mailto:user-l@server.ru?cc=user-2@server.ru, user-3@server.ru&subject=тема_письма" >текст ссылки</А>

Давайте рассмотрим все перечисленные выше параметры атрибута HREF более подробно. Директива mail to: указывает на основной адрес электронной почты, куда следует отправлять созданное автоматически письмо. В минимальной записи атрибута HREF при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail. Функция ?сс позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд через запятую без пробелов. И наконец, с помощью функции Subject можно задать тему отсылаемого сообщения.

Простым примером организации гиперссылки на адрес электронной почты автора этой книги может служить приведенный ниже отрывок html-кода:

<А HREF="mailto:alvion@rednet.ru&subject=комментарии читателей">Жду писем!</А>

  Ссылки на файловые объекты

Гиперссылка на некий файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом ZIP. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Мнемоника записи подобной команды выглядит следующим образом:

<А HREF="http://www.myserver.com/fi1es/archive.ziр">текст гиперссылки</А>

Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file://", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp://". Если искомый файл расположен в тойже директории, что и вызывающий его документ, в качестве значения атрибута HREF можно просто указать его имя.

15.  Теги создания таблиц

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

Для создания таблиц в HTML 3.2 применяется тег <TABLE>, структура записи которого в общем виде следующая:

<TABLE ALIGN="значение" WIDTH="значение" BORDER=''целое число"

CELLSPACING="qenoe число" CELLPADDING=''целое число">

<TR ALIGN="значение" VALIGN="значение">

<TD ALIGN="значение" VALIGN="значение" COLSPAN="целое число"

ROWSPAN="целое число" НЕIGНТ="целое число" NOWRAP> Содержимое ячеек</ТD>

</TR>

</TABLE>

Рассмотрим эту структуру более подробно. Как видите, основополагающим тегом в блоке описания таблицы является директива <TABLE>, в нее вкладываются все остальные команды блока. Данный тег может использовать следующие атрибуты: ALIGN — задает горизонтальное позиционирование всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER. Атрибут WIDTH определяет ширину всей таблицы и может принимать значение целого числа,если ширина таблицы указывается в пикселах, либо числа от 1 до 100 с символом «%» (например, «60 %»), если ширина таблицы задается в процентах отширины экрана пользователя. Атрибут BORDER указывает на толщину обрамления столбцов и ячеек таблицы в пикселах. Если значение данного атрибута равно нулю, таблица становится «невидимой». Атрибут CELLSPACING позволяет задать промежуток между ячейками в пикселах, a CELLPADDING — промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселах.

В теги <TABLE> </TABLE> вкладываются теги <TR> и </TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк. Команда <TR> может использовать атрибут ALIGN, определяющий горизонтальное

позиционирование содержимого ячейки внутри самой ячейки, а также атрибутVALIGN, задающий вертикальное выравнивание содержимого ячейки. Первый из них может принимать традиционные значения LEFT, RIGHT и CENTER, второй значения TOP, MIDDLE, BOTTOM и BASELINE.

В своеобразный контейнер, образуемый тегами <TR> и </TR>, вкладываются команды <TD>, описывающие сами ячейки. Тег <TD> оперирует атрибутами ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега <TR>.Они применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки. Кроме того, тег <TD> оперирует следующими необязательными атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN —число строк, перекрываемых ячейкой, HEIGHT — высота ячейки в пикселах и NO WRAP — запрет переноса слов внутри ячейки.

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

  Простые таблицы

Предположим, поставленная перед web-мастером задача требует использования таблицы, состоящей из четырех значений одинакового формата. Такая таблица содержит две строки по две ячейки в каждой, или, другими словами, два элемента <TR>, каждый из которых содержит по два элемента <TD>. Отрывок html-кода, описывающего такую таблицу, можно представить следующим образом:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

<TD>D</TD>

</TR>

</TABLE>

А теперь несколько усложним задачу. Положим, ваша таблица включает всего три значения, два — в двух верхних ячейках и одно — в нижней. В представлении такой таблицы в виде кода HTML также ничего сложного нет. Таблица по-прежнему содержит две строки, однако первая из них включает две ячейки, а нижняя — всего одну. Иными словами при описании второй строки мы должны использовать лишь один элемент <TD>:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

</TR>

</TABLE>

  Стандартная таблица с текстовыми ячейками

Таблица с ячейками, заполненными текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца, определяемый тегом <ТН>, или заголовок всей таблицы, задаваемый тегом <CAPTION>. Директива <ТН> определяет выделенный жирным шрифтом заголовок каждого столбца таблицы, поясняя его содержимое. В общем виде данный тег записывается следующим образом:

<ТН ALIGN="заначение" VALUE="значение" WIDTH="значение" НЕIGНТ="значение" COLSPAN="целое число" ROWSPAN="целое число" NOWRA>содержимое заголовка</ТН>

Все атрибуты этой команды записываются аналогично атрибутам других тегов, определяющих внутреннее наполнение таблиц, их значения идентичны таковым для атрибутов тега <ТО>. Напомним, что атрибут ALIGN в данном случае определяет горизонтальное выравнивание заголовка столбца в ячейке, атрибут VALIGN — вертикальное выравнивание, WIDTH — ширину ячейки в пикселях, HEIGHT — ее высоту, COLSPAN указывает на число столбцов, охваченных ячейкой, ROWSPAN — на число охваченных ячейкой строк и, наконец, параметр NOWRAP запрещает перенос слов внутри ячейки. По умолчанию значения атрибутов COLSPAN и ROWSPAN равны 1, для заголовка столбцов задается выравнивание по центру ячейки, в отличие от содержимого самих ячеек, определяемых тегом <TD>, оно выравнивается по левому краю столбца. Директива <CAPTION> задает заголовок таблицы в целом. Синтаксис ее записи в общем виде таков:

<CAPTION ALIGN="значение">текст. заголовка</САРТION>

Заголовок таблицы всегда позиционируется относительно ее центра, поэтому в качестве значения атрибута ALIGN в данном случае может быть указан параметр ТОР или BOTTOM, с помощью которого вы можете разместить заголовок либо над таблицей, либо под ней.

Использование заголовков таблиц считается хорошим тоном и принято для представления соответствующей информации в html-дакументах. Заголовок таблицы должен быть по возможности кратким и содержательным, не следует включать в него развернутое описание представленных в таблице данных. При использовании директивы <CAPTION> следует помнить простое правило: в заголовке надо указывать лишь что показывает данная таблица, а все объяснения, рассказывающие, почему данная таблица включена в документ, лучше приводить отдельным текстом, предваряющим таблицу.

В качестве простого примера, демонстрирующего механизм применения команд<ТН> и <CAPTION>, приведу небольшой отрывок кода HTML:

<TABLE BORDER="1">

<CAPTION А!Л6М="ТОР">Пример перевода ряда английских слов на русский язык</САРТЮМ><TR>

<ТН>Английское написание</ТН>

<ТН>Русское написание</ТН>

<ТН>Часть речи</ТН>

</TR>

<TR>

<TD>To go</TD>

<ТD>Идти</ТD>

<ТD><ЕМ>Глагол</ЕМ></ТD>

</TR>

<TR>

<TD>The table</TD>

<ТD>Стол</ТD>

<ТD><ЕМ>Существительное</ЕМ></TD>

</TR>

<TR>

<TD>To sleep</TD>

<TD>Cnaib</TD>

<ТD><ЕМ>Гла гол</ЕМ></ТD>

</TR>

</TABLE>

  Таблица с параллельными текстами

Иногда web-мастеру приходится представлять на странице текст в виде нескольких разделенных небольшим расстоянием колонок, например, если дизайн сайта как бы копирует размещение текста на газетной полосе или если необходимо показать перевод текста на двух и более языках. В принципе для решения такого рода задач можно применить тег <PRE>, позволяющий выводить на экран предварительно отформатированный текст, однако в некоторых броузерах такое представление данных может быть нарушено в силу неадекватности обработки кода HTML их интерпретаторами. В подобных ситуациях рекомендуется использовать невидимые таблицы, в которых для каждого отрывка текста отводится отдельная строка. Безусловно, web-дизайнеру придется изрядно повозиться, чтобы текст размещался в ячейках таблицы корректно, однако игра, безусловно, стоит свеч, поскольку при подобном представлении информация гарантирована от искажений в броузерах разных версий и при разном экранном разрешении пользовательского монитора. Примером реализации такой таблицы может служить следующий отрывок кода HTML:

<TABLE BORDER="0" CELLSPACING="3">

<CAPTION><STRONG>Отрывки из книги Бытия на трех языках</STRONG></САРТION>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11"></ТН>

<TH WIDTH="223">Латынь</ТН>

<TH WIDTH="271>Английский</ТН>

<TH WIDTH="240">Pyccкий</TH>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">1</TH>

<TD WIDTH="223">In principio creavit Deus caelum et terram.</TD>

<TD WIDTH="271">In the beginning God created the heaven and the earth.</TD>

<TD WIDTH="240">B начале сотворил Бог Небо и Землю.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">2</TH>

<TD WIDTH="223">Terra autem erat inanis et vacua et tenebrae super faciemabyssi et spiritus Dei ferebatur super aquas.</TD>

<TD WIDTH="271">And the earth was without form, and void: and darkness wasupon the face of the deep. And the Spirit of God moved upon the face of thewaters.</TD>

<TD ШОТН="240">Земля же была без видна и пуста, и Тьма над Бездною: и Дух Божий носился над Водою.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">