Регистрация в web-каталогах и индексация сайта поисковыми системами
Процесс регистрации в каталогах достаточно прост. Проблему представляет такая регистрация, после которой пользователь сможет по соответствующему запросу быстро найти именно ваши web-страницы. Для этого, прежде всего web-сайт должен быть достаточно качественным, чтобы модератор каталога не отказал в его регистрации.
Реклама с использованием электронной почты
E-mail маркетинг
Одним из самых эффективных инструментов коммуникации и продвижения товаров и услуг является электронная почта, являющаяся одним из самых дешевых и в тоже время наиболее эффективных способов Internet-рекламы.
Продвижение товаров и услуг с помощью электронной почты получило название e-mail маркетинга, под которым понимается распространение сообщений только по подписке, адресатам, пожелавшим определенную информацию от определенного отправителя
Преимущества e-mail маркетинга:
· - электронная почта появилась задолго до появления WWW и существует у большинства пользователей Internet;
· - возможность персонализированного сообщения;
· - прямое воздействие на целевую аудиторию;
· - возможность быстрого распространения.
Основные виды воздействия на клиента с помощью E-mail:
· ведение собственной электронной рассылки. Рассылка по своей сути является электронным аналогом газет и журналов. На рассылки можно подписаться и получать их в свой электронный ящик.
· размещение рекламы в существующих рассылках. Так как ведение отдельной рассылки требует постоянных усилий, можно размещать рекламу в выходящих электронных изданиях.
· распространение полностью рекламных писем подписчикам, пожелавшим получать подобную информацию. Такой вид рекламы функционирует по принципу традиционного директ-мейла и называется direct e-mail или адресная электронная реклама.
В рамках e-mail маркетинга покупатели получают информацию о тех товарах, в которых они заинтересованы, а продавцы – возможность обратиться точно к своей целевой аудитории.
Многие пользователи блокируют рекламу в интернете. В Европе около 73% пользователей блокируют тот или иной вид рекламы, 45% – блокируют для просмотра абсолютно все виды баннеров. Контекстную рекламу на поисковых сайтах блокировать невозможно.
Для размещения рекламы используют многопользовательские онлайновые ролевые игры, являющиеся одним из самых перспективных направлений развития Internet. Все крупнейшие российские Internet-компании, включая Яндекс, Рамблер и Mail начали продвигать свои собственные ролевые игры
2.Приёмы создания сайта. Язык разметки гипертекста. Вставка таблиц и списков.
Списки
В идеале, вопросы оформления списков мы должны были рассматривать в разд. "Оформление текста" ранее в этой главе, так как списки тоже состоят из текстовых строк и абзацев. Но тема списков достаточно велика, поэтому ей и был выделен отдельный раздел.
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать. Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ul> и его закрывающим близнецом </ul>. Отдельные элементы списка объявляются при помощи обозначающего тега <li>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.
Примечание
Использовать необязательные закрывающие теги в HTML-документах имеет смысл, если в последующем мы собираемся отображать их при помощи XML-браузеров. О новом стандарте XML, который со временем должен будет сменить HTML. Обязательным условием корректного распознавания документов в ХМL является обязательное присутствие всех закрывающих тегов. Приведем простейший пример использования нумерованного списка
Листинг 1.13
<html> <head>
<title>Mapкированный список</title>
</head>
<body>
<р>Это обычный текст. </р>
<ul>
<li>
Первый пункт списка
<li> Второй пункт списка
</ul>
</body>
</html>
Тег <li> обладает некоторым набором параметров, часть из которых имеет смысл применять в случае использования нумерованных списков, а часть предназначена для маркированных списков. Раз уж мы начали свое рассмотрение с маркированных списков, то и параметры рассмотрим именно те, которые применяются для элементов подобных списков. При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов.
Значение disc указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга.
Значение circleзадает маркер в виде окружности.
Значение squareустанавливает маркер в виде маленького прямоугольника.
Все эти значения необходимо указывать с сохранением регистра так, как они написаны здесь, потому что HTML-анализаторы чувствительны к регистру. Вообще, желательно все предустановленные ключевые слова, используемые в качестве значений каких-либо параметров, писать с сохранением регистра. А сами наименования параметров и теги нечувствительны к регистру символов. Теперь, после этого отступления, узнаем, как именно выглядят эти маркеры.
<html>
<head>
<title>Mapкированный список</title> <body>
<ul>
<li type="circle">Первый пункт списка
<li type="disc">Bторой пункт списка
<li type="square">Tpeтий пункт списка
</ul>
</body>
</html>
Также в теге <li> может использоваться параметр compact, применяемый без каких-либо значений. Если его ввести в состав искомого тега, то браузер должен будет отобразить содержимое элемента списка более компактно. Однако параметр является директивным, и отработка его лежит только на совести производителей того или иного браузера. Мне не удалось заметить каких-либо ощутимых изменений во внешнем виде элементов списка при использовании данного параметра. Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <ol> и </ol>. А элементы списка объявляются при помощи все того же тега <li>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер.
</title>Нумерованный cписок</title>
<body>
<ol>
<li>Первый пункт списка
<li>Bторой пункт списка
<li>Tpeтий пункт списка
</ol>
</body>
</html>
Опять-таки, при использовании стандартных "умолчальных" значений нумерованный список выглядит просто и правильно, но этого может быть недостаточно. Для изменения его параметров и внешнего вида, т. е. адаптации к пользовательскому виду, у нас есть достаточно средств, т. е. параметров все того же тега<li>. Уже знакомый нам параметр type позволяет указывать, какие именно цифры могут использоваться для обозначения элементов списка. В качестве значения данного параметра используется одно из предустановленных ключевых слов, которые мы сейчас все и рассмотрим.
Значение1 применяется для нумерации обычными арабскими цифрами.
Значение азадает обозначения в виде символов латинского алфавита нижнего регистра. Нумерация идет по алфавитному порядку, начиная от а и до z. Впрочем, при дальнейшем продолжении списка, обозначения тоже будут продолжены.
Значение А также как и предыдущее задает обозначение элементов списка при помощи символов латинского алфавита, но при этом будут уже использоваться символы верхнего регистра.
Значениеi создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра.
Значение lустанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра.
Теперь, когда мы теоретически знаем, какие бывают варианты нумерации, и как их устанавливать, пришло время увидеть их использование на примере.
<html>
<head>
<title>Hyмepoванный cписок</title>
<body>
<li type="1">Первый пункт списка
<li type="a">Bторой пункт списка
<li type="A">Tpeтий пункт списка
<li type="i">Четвертый пункт списка
<li type="I">Пятый пункт списка
</body>
</html>
HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег <ol> вставляется параметр start. Значением того параметра является натуральное число, которое и будет номером первого элемента списка. Но внутри списка мы можем произвольно пенять порядковые номера элементов при помощи параметра value, применяемого в составе тега <li>. Для того, чтобы увидеть механизм применения этих параметров, рассмотрим еще один пример
<html>
<head>
<title>Вложенные списки</title>
<body>
<ol start=5>
<1i>Пятый пункт списка
<1i>Шестой пункт списка
<1i vа1uе=10> Десятый пункт списка
<1i>Одиннадцатый пункт списка
<ol>
</body>
</html>
Мы можем также создавать многоуровневые вложенные списки, совмещая при маркированные и нумерованные элементы.
<bead>
<title> Вложенные списки</title>
<body>
<li>Первый пункт списка
<ol>
<li>Первый вложенный пункт
<li>Второй вложенный пункт
</ol>
<li>Второй пункт списка
<ul>
<li>Вложенный маркированный элемент
<li>Вложенный маркированный элемент
<ul>
</ol>
</body>
<html>
Итак, мы рассмотрели основные варианты использования стандартных нумеро/и маркированных списков. Но в HTML предусмотрены еще несколько специализированных списков, которые тоже необходимо рассмотреть. д тем как перейти к непосредственному рассмотрению этих дополнительных типов списков, следует сделать маленький экскурс в историю создания HTML. Дело в том, что изначально он был создан в лаборатории PH Тимом Бернерсом-Ли для публикации связанных научных отчетов и документов, и как следствие, изначально в него были вставлены средства тестового оформления, присущего техническим и научным документам. B их числе и списки определений и терминов.
Сам список определений создается при помощи тега <dl> с его закрывающим близнецом </dд>. В качестве элементов используются термины, обозначаемые тегами <dt>, и определения, создаваемые при помощи тегов <dd>. Техническое отличие этих двух элементов списка состоит в том, что термины являются inline-элементами, т. е. обязаны занимать не более одной строки, а определения — flow-элементами, т. е. не ограничены пределами одной строки. Рассмотрим пример применения подобного списка определений.
<html>
<head>
<title>Cписок определений</head>
<body>
<dl>
<dt>Это термин
<dd>A это определение
</dl>
<p>A это обычный текст</р>
</body>
</html>
Таблицы
Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам. Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселей, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселей, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселей. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселей, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность. Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.
Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <table> и его закрывающим близнецом </table>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <col> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов. Сам тег <table> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.
Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселей, или воспользоваться процентным соотношением. Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселях. Если мы установим нулевое значение этого параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы. Параметр cellspacing позволяет устанавливать размер в пикселях между отдельными ячейками страницы. А похожий параметр cellpadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a cellpadding — внутри ячейки.
А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно. В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <table>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах".
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=5 cellpadding=7 cellspacing=10 a,lign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 аlign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>Длинная ячейка</td><td>l0</td>
</tr>
</table>
</body>
</html>
Но это был самый простой способ создания таблиц, когда в ее состав входят только основные строки. На самом деле возникает гораздо больше возможностей, если мы используем различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый при помощи тега <caption>. Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Значение top заставляет браузер отображать заголовок таблицы над ней самой. Значение bottom перемещает заголовок под таблицу. Значения left и right устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается сверху таблицы. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тега.
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 align=left>
<caption align=right> 3аголовок таблицы</сарtion>
<tr>
<td> 1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>
В данном случае мы использовали значение right два параметра align. Таким образом, заголовок отображается сверху таблицы, занимает по горизонтали пространство не больше, чем сама таблица, и текст прижат к правой границе этого пространства. Все это показано на рис.
В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Но ведь обычно таблицы содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot> соответственно. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbody>. Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками. Посмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и при отображении ее в браузере, с использованием этих структурных элементов
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный тёкст</р>
<table border=2 align=left>
<caption> 3аголовок таблицы</сарtion>
<thead>
<tr>
<td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</tbody>
<tfoot>
<tr>
<td>5</td> <td>7</td> <td>9</td>
</tfoot>
</table>
</body>
</html>
Несмотря на кардинально изменившуюся структуру таблицы в коде HTML-документа, при отображении ничего принципиально нового не появилось. И это правильно, так как HTML старается передавать конкретные аспекты отображения на более низкий, более детальный уровень иерархии объектов, т. е. если мы хотим, чтобы ячейки подвала, заголовка и тела таблицы отличались друг от друга по оформлению, мы должны либо самостоятельно установить эти правила отображения для каждой ячейки, либо воспользоваться стилевым оформлением. Тем не менее, одно средство оформления все-таки встроено в эти теги. При помощи параметров align и valign мы можем устанавливать выравнивание содержимого ячеек. Параметр alignзадает выравнивание содержимого ячеек данного раздела таблицы по горизонтали. В качестве значения данного параметра применяется одно из предустановленных ключевых слов. Рассмотрим их.
Значениеleft прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.
Значение rightвыравнивает любое содержимое ячеек по правому краю.
Значение center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр. Используется по умолчанию для заголовков таблицы.
Значение justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки.
Значениеcharприменяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате, и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и десятичной частей всех чисел находились на одном и том же уровне.
О последнем случае вообще стоит поговорить особо. Мы сказали, что выравниваться будут не столько сами числа, сколько их десятичные разделители. А какие символы будут считаться десятичными разделителями? Если для всего документа явно установлен язык текстового содержимого, то браузер сам поймет, какой символ считается десятичным разделителем. Но нет никакой гарантии, что мы для этих целей будем использовать именно тот символ, который распознается браузером. Поэтому у нас есть возможность самостоятельно явно указать, какой символ мы применяем для разделения целой и дробной частей чисел. Для этих целей используется параметр char, значением которого и является данный символ. К сожалению, данную возможность стандарта HTML поддерживают далеко не все браузеры.
Теперь перейдем к параметру, позволяющему явно устанавливать вертикальное выравнивание содержимого ячеек, входящих в состав какого-либо блока таблицы. Он носит наименованиеvalign. Как и параметр горизонтального выравнивания, он в качестве значения может использовать только одно ключевое слово из заранее предопределенного набора.
Значениеtopприжимает содержимое ячеек к их верхним границам.
Значение middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию.
Значение bottomприжимает содержимое ячеек к их нижним граням.
Значение baselineимеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы, выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке.
Напомню, что базовой линией текста называется невидимая линия, на которой и располагаются основания большинства символов применяемого алфавита. Но у некоторых символов, таких как "g" в латинском алфавите, или "р" — в русском, существуют так называемые "хвостики", которые уходят вниз за базовую линию.
При помощи рассмотренных нами блоков таблицы, мы можем структурировать ее содержимое и немного управлять отображением содержимого ячеек, входящих в эти блоки. Но что делать, если нам необходимо установить единые правила оформления для одного или нескольких столбцов таблицы? Как мы знаем, нам нет нужды объявлять их специально, так как столбцы монтируются из ячеек, входящих в строки. Но, тем не менее, в стандарте HTML 4.1 существуют теги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца используется тег <col>, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тег <colgroup>.
Следует осознавать, что если мы используем эти теги объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе, т. е. нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление на предмет нахождения тегов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тегов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках. При помощи тега <colgroup>мы объявляем группу столбцов. Каждый столбец этой группы мы можем дополнительно явно объявить при помощи тега <col>, но это не обязательно делать, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается при помощи параметров тега <colgroup>. К этому тегу применимы параметры alignи valign, которые мы рассматривали чуть ранее, с теми же возможными значениями. Помимо этого чаще всего применяется еще два параметра.
Параметр spanпоказывает, какое количество столбцов будет находиться в данной группе. Значением данного параметра является положительное целое число. По умолчанию используется единичное значение, т. е. в группу по умолчанию входит всего один столбец.
Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем устанавливать точное абсолютное значение в пикселях, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую, чтобы вместить содержимое ячеек, следует использовать конструкцию width="0*".
Так, если мы хотим указать, что в таблице будет сорок столбцов, каждый шириной в двадцать пикселей, следует использовать следующий фрагмент кода:
<colgroup span="40" width=*H20"> </colgroup>
Только никогда не следует забывать о том, что нам никогда заранее неизвестно, какое разрешение экрана будет у пользователя, загружающего нашу Web-страницу.
Отдельный столбец, входящий в группу, объявляется при помощи тега <col>. Этот тег обладает тем же набором параметров, что и рассмотренный нами только что тег <colgroup>. Вот только параметр span здесь имеет несколько иное значение. Как мы знаем, некоторые ячейки, могут объединять сразу несколько ячеек из соседних столбцов. А теги <col> могут создавать столбцы, которые на самом деле будут состоять из нескольких столбцов, т. е. одна ячейка такого столбца может состоять из нескольких тегов <td>. Значение параметра span как раз и указывает, сколько именно столбцов будут объединяться в одном. Приведем пример использования данного параметра. Если нам необходимо создать таблицу с тремя столбцами, стоит в код HTML-документа вставить следующую конструкцию:
<table>
<colgroup> <col>
<col span="2"> </colgroup>
<tr>
<td> .. . ...Определение строк...
</table>
В данном фрагменте мы создали таблицу с тремя столбцами. Первый столбец объявлен при помощи первого тега <col>, а вторые два столбца объединены в единую группу при помощи второго тега <col> с параметром span, значение которого установлено в "два".
Помимо всеобщих параметров идентификации, есть и параметры, регулирующие отображение информации, находящейся в ячейках, входящих в данную строку. Перечислим их.
Параметр alignпозволяет регулировать горизонтальное выравнивание содержимого ячеек строки.
Параметр valign задает вертикальное выравнивание для содержимого ячеек строки.
Параметрbgcolorпозволяет задавать цвет фона для ячеек, входящих в строку.
Сами ячейки мы можем создавать не только при помощи тега <td>, но и при помощи тега <th>. Тег <th> предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов. В следующем листинге показан пример их использования
<html>
<head>
</head>
<body>
<р>Это обычный текст</р> <table border=2 align=left> <caption >3аголовок <thead> <tr>
<th> Столбец1</th><th>Cтoл6eц 2</th><th>CToл6eц 3</th> </tr> </thead> <tbody>
<tr>
<td>l</td> <td>2</td> <td>3</td> </tr> <tr>
<td>4</td> <d>5</td> <td>6</td> </tr>
</tbody>
</table>
</body>
</html>
Из листинга видно, что в так называемой "шапке" таблицы, мы объявили ячейки при помощи тегов <th>. На иллюстрации текстовое содержимое этих ячеек выделено полужирным шрифтом. Впрочем, ячейки обладают, пожалуй, самым обширным набором параметров из всех табличных объектов, которые позволяют нам настраивать внешний вид для каждой ячейки по отдельности.
Параметрrowspan указывает, на сколько строк по вертикали растянута искомая ячейка. При помощи этого параметра мы можем объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для данного параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная от текущей до самой нижней ячейки.
Параметр colspan подобен только что рассмотренному параметру rowspan, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значением по умолчанию является единица, а нулевое значение объединяет ячейки, начиная от текущей и до конца строки таблицы.
Параметрnowrapприменяется без каких-либо значений. Его присутствие в теге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо отображать в одной строке, не разбивая на несколько, если длины ячейки для этого недостаточно. В подобных случаях, если единственная строка текстового содержимого по ширине больше, чем сама ячейка, ширина ячейки будет увеличена, чтобы содержимое было отображено полностью.
Параметр width предназначен для указания рекомендованной ширины ячейки. Значением Данного параметра является число, обозначающее ширину в пикселях, процентное или кратное соотношение. В том случае, однако, если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, та будет принудительно растянута до необходимого размера.
Параметр height предназначен для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром width.
Параметрalign задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы.
Параметрvalign предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе.
Параметр dir позволяет задавать направление отображения текста. Так как некоторые языки предполагают написание слов не слева направо, как привыкли мы, а справа налево, то необходимо иметь возможность явно указывать, куда направлен порядок чтения. Если отображаемый текст должен читаться слева направо, следует использовать значение LTR, установленное по умолчанию. Если текст доложен читаться справа налево, то используется значение RTL.
После ознакомления с этим списком, хотелось бы увидеть, как действуют эти параметры. Приведем пример, в котором это будет достаточно хорошо видно.
<html> <head> </head>
<body>
<table border=2 width="100%"> <caption >3аголовок таблицы</сарtion> <thead>
<th bgcolor=”Xime” rowspan=”2”> </th><"th> Столбец /th><th> . . . </th><th> . . . </th>
</tr>
<tr>
<th соlspаn=”2”>Объединенная ячейка </th>
</thead> <tbody>
V<tr>.
<td width=100> </td><td>1/td><td>2</td><td>3</td> </tr>
<tr>
<td> </tdxtd>4</td><td>5</td><td>6</td> </tr>
</tbody>
</table>
</body>
</html>
Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентном соотношении, поэтому все столбцы были растянуты равномерно. Все, за исключением первого, так как для первой ячейки в третьей строке мы жестко задали ширину в сто пикселей. Поэтому весь столбец у нас отображался с такой шириной. А во второй строке таблицы мы создали ячейку, объединяющую сразу две соседние ячейки в текущей строке. Также на иллюстрации видно, что блок ячеек, созданных при помощи тега <th> немного отделен по вертикали от основного блока таблицы, созданного при помощи ячеек, объявленных тегом <td>. Также мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела. Сделано это не случайно. Дело в том, что браузер Netscape Navigator ранних версий неадекватно отображает столбцы таблиц, в которых нет содержимого. Поэтому следует взять за правило вставлять неразрывные пробелы в пустые ячейки таблиц. Вообще, прием установки процентного соотношения ширины таблицы и жесткого задания ширины первого столбца широко применяется в Web-дизайне. Обычно меню навигации по сайту размещается в левой части экрана. Поэтому Web-дизайнер обычно заключает все содержимое страницы в одну большую таблицу с двумя ячейками. Ширина левой ячейки задается жестко в пикселях, а все остальное пространство окна просмотра отдается под отображение основного содержимого страницы. При этом, если это содержимое тоже имеет жесткую структуру, то его тоже можно поместить в таблицу, которая вся будет размещаться в одной ячейке первичной таблицы. Следует лишь аккуратно относиться к созданию вложенных таблиц, так как ранние версии браузера Netscape Navigator при обилии таблиц, вложенных друг в друга, могут просто зависать.
Билет №19