Техминимум: как сейчас принято

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

<Р>Текст абзаца вместо корректного

<Р>Текст абзаца</Р>,

Поскольку браузеры автоматически «закрывают» (на уровне механизма интерпретации разметки, не исправляя код) подобные тэги (<LI>, <TD>, <DD> и другие). Пропускаются даже достаточно важные закрывающие тэги (например, </FORM>), но браузеры и на это смотрят сквозь пальцы. Значения параметров должны быть заключены в кавычки, но это тоже не всегда соблюдается. В самом деле, зачем делать лишнюю работу, если она будет сделана за тебя?

А теперь зайдем в мастерскую и посмотрим на работающие механизмы.

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

Техминимум: как сейчас принято

3.1

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

Во-вторых, во много раз снижается возможность работать с документом как с представителем объектной модели. Для статичных сайтов, созданных без лишних сложностей, это ничего не значит, но для сайтов, построение страниц которых является динамическим (и основано, например, на работе активных сценариев), это критично: правильной работы с кодом не получится.

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

В-четвертых, браузеры на мобильных устройствах воспринимают только правильный код.

Наконец, в-пятых, действует субъективный фактор. Намного приятнее работать с аккуратным кодом, чем с безобразным — даже самому, не говоря о тех, кто будет впоследствии вынужден работать с вашим кодом (а это случается сплошь и рядом при редизайне и стихийном исправлении кода).

Сейчас (примерно с начала первого десятилетия третьего тысячелетия нашей эры) сложилась такая ситуация, которая напоминает ситуацию с русском языком конца XVIII — начала XIX столетий. Более или менее мирно сосуществуют стандартизированный «литературный» язык XHTML, правила которого разработаны и получили широкую огласку совсем недавно, и «разговорный» HTML с массой говоров и диалектов. В «разговорном» языке допускаются многочисленные отклонения от правил и годами наработанные приемы воссоздания тех эффектов, которые в язык не закладывались. В связи с этим произведения (сайты), созданные на «литературном» языке, в силу его новизны и жесткости правил выглядят достаточно шаблонно, как произведения раннего классицизма, тогда как «народный» язык производит такие шедевры, которые «литературному» и не снились. Однако и среди носителей «литературного» языка встречаются мастера (условно назовем их веб-мастерами), которые и в жестких рамках XHTML ухитряются создать нечто необычное.

Нужно указать на пару особенностей данной ситуации. Во-первых, расширение файла не зависит от того, на каком языке пишется разметка: будь это HTML или XHTML, имена файлов могут заканчиваться на. htm, .html, .php, .asp, .phtml, .pl, .jsp, .xml, .xhtml, .bml, .wml, .wbp и другие расширения в зависимости от используемых технологий и настроек сервера. Не секрет, что при определенной конфигурации

Верстка

XHTML

Сервера файлы с расширением. jpg могут работать как PHP-сценарии и наоборот. Во-вторых, если не указывать DTD (document type definition, описание типа документа) в начале файлов с помощью тэга <! DOCTYPE>, то часто с трудом можно догадаться, XHTML это или HTML. Дело в том, что код на языке XHTML не противоречит правилам языка HTML. Только мелкие особенности (например, невозможность параметра без значения и отсутствие незакрытых тэгов) говорят, что перед нами код на языке XHTML.

Рассмотрим основные особенности современной, модной, валидной, чистой верстки на языке XHTML.

Все теги и параметры должны быть набраны в нижнем регистре (строчными символами) — кроме тэга <!DOCTYPE>.

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

Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тэг. Проблема с тэгами, не требующими пары, решается так: в конце одиночных тэгов ставится пробел и косая черта. То есть <br> превращается в <br />. Старые браузеры расценивают косую черту как новый, неизвестный параметр, и игнорируют ее, а браузеры, ориентирующиеся на корректный код, понимают, что тэг завершен. Такое правило применимо для тэгов <br />, <hr />, <img />, <input />, <link />, <meta />. (Возможен также вариант с полным закрытием, например, <hr></hr>, но первый способ более экономен и удобен) Тэги же, для которых ранее возможен был пропуск закрывающего компонента, в XHTML должны обязательно закрываться: <р>текст абзаца</р>, <ор^оп>элемент выпадающего списка</ор^оп> и так далее.

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

Нельзя использовать сокращенные атрибуты тегов. Если раньше можно было написать <hr noshade>, то теперь у параметра обязательно должно быть значение: <hr noshade="1"> или <hr noshade="noshade"> — то есть значение параметра должно равняться единице или по написанию совпадать с именем параметра (еще пример: <input type="checkbox" checked="checked"> вместо <input type="checkbox" checked>).

Вместо параметра name необходимо указывать атрибут id. В будущем авторы спецификации языка XHTML грозятся вообще вывести параметр name из употребления. Но в связи с этим ограничением возникает сразу две проблемы. Во-первых, не все браузеры умеют ссылаться с помощью якорей (domain. ru/page1.html#anchor1) на фрагмент,

124

Техминимум: как сейчас принято

3.1

Обозначенный тэгом <a> с атрибутом id: в большинстве случаев якорь предпочтительнее ставить конструкцией <a name="anchor1"></a> или — в целях полной совместимости с прошлыми и будущими версиями <a name="anchor1" id="anchor1"></a>. Во-вторых, при использовании элементов <input type="radio" />, которых всегда бывает несколько, но имя (тот самые name) у них все равно одно (потому что посылается только одно из значений) заменять name на id нельзя, потому что у нескольких однотипных элементов могут быть только разные идентификаторы id. В частности, элемент <label> ссылается только на конкретно идентифицированный (с помощью id) элемент <input />, значит, id’bi у всех <input />’ов должны быть разные; но для организации «переключателя» имя (name, а по-новому id) должно быть у всех элементов переключателя одинаковое. «Выход» — все-таки использовать атрибут name наряду с id.

Следует определять DTD (document type definition, описание типа документа) с помощью тега <!DOCTYPE>. Основными описаниями типа документа стоит считать следующие:

1. Четкое разделение формы и содержания, строгий DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "Http://www. w3.org/TR/xhtml1/DTD/xhtml1- strict. dtd">

2. Переходный тип, с возможностью использования визуальных

Тэгов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www. w3.org/TR/xhtml1/DTD/ xhtml1-transitional. dtd">

3. Версия с фреймами:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "Http://www. w3.org/TR/xhtml1/DTD/xhtml1- frameset. dtd">

4. Версия для XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "Http://www. w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

Наконец, последнее. Тэги должны использоваться максимально семантически. Так, для взаимного расположения блоков на странице используется тэг <div> с точным позиционированием, задаваемым при помощи CSS, а таблицы использовать не для верстки, а именно для табличного представления данных (например, таблицы совместимости, расписания и т. п.). Не приветствуется тэг <i>, потому что он передает только визуальное форматирование (курсивное начертание), тогда как тэг <em>, хотя и заставляет текст отображаться курсивом, но делает упор на семантику: em — сокращение от «emphasis» («акцент; выделе-

Ние»). <blockquote> следует использовать не для отступа текста слева, а именно для цитат, как это и было изначально предусмотрено.

HTML 5

В целом концепция XHTML очень логична и удобна. Возможно, это было бы действительно универсальное решение для будущего браузеров. Но после разработки версии XHTML 1.1 стандартизирующая организация прекратила работу над планировавшимся ранее проектом XHTML 2.0 и занялась работой над пятой версией языка HTML. (Для справки: варианты HTML разрабатывались длительное время, вторая версия вышла в 1995 году, третья в 1996, 4.0 — в 1997, а 4.01, распространенная ныне, — в 1999.) Вероятно, полезно будет немного заглянуть в будущее и выяснить, что появится нового в этой версии.

Вот пример корректного кода на HTML 5:

<!DOCTYPE html>

<head>

<style>

P {

Color: #00F;

}

</style>

Alert("HTML5");

</script>

</head>

<body>

<p>Paragraph<br>line2</p>

</body>

</html>

Различий с HTML 4 в этом примере совсем немного: сокращенный DTD, возможность указания кодировки напрямую через тэг <meta>, отсутствие необходимости указывать типы данных включаемых файлов и язык активных сценариев. Различия с XHTML — отсутствие необходимости закрывать все тэги подряд.

Язык, судя по всему, будет иметь XHTML-разновидность; функциональные их различия пока неясны, но есть разница в синтаксисе. Так, тэг <br/> все-таки будет закрываться, а в случае с включаемым сценарием будет фигурировать чрезвычайно удобная сокращенная за
пись: <script src="file. js"/> вместо <script src="file. js"> </script>.

На поверку различий оказывается намного больше.

В HTML 5 вводится большое количество новых элементов, например, <article> (заметка в блоге, статья в газете), <aside> (примечание сбоку страницы), <dialog> (диалог), <figure> (для объединения включаемого медиа-содержимого, например, видеоролика, с подписью), <header> и <footer> (блоки «шапки» и «подвала» страницы или иного блока), <audio> и <video> (для собственно вставки медиа-содержимого), <m> (помеченное), <time> (для обозначения времени и даты), <canvas> (для динамически генерируемых изображений — буквально «холст»), <datalist> (комбо-бокс, или выпадающее меню, совмещенное с текстовым полем для ввода, когда вместо уже заготовленных значений, оформленных в виде выпадающих меню, пользователь может ввести свое) и некоторые другие. К примеру, диалог теперь можно будет оформлять так:

^^Первый

<dd>Превед! Кагдила?

^^Второй <dd>Ничо так.

</dialog>

У некоторых уже существующих тэгов появятся новые параметры: у тэга <meta> — параметр charset (кодировка), для <input> и <textarea> — параметры autofocus (фокус — или курсор — устанавливается на элемент, отмеченный этим параметром), replace (что будет с документом, когда данные формы будут отправлены по нажатию кнопки) и required («предназначено для обязательного заполнения») и еще несколько. Например, с помощью новых параметров элементы можно соотносить не с одной, а несколькими формами. Параметры class, dir, id, lang и title могут относиться к любому элементу. Часть атрибутов сможет быть реализована с переработкой механизмов отрисовки веб-страниц браузерами. Так, вместо длинных сценариев для того, чтобы элемент можно было перемещать по веб-странице, достаточно будет присвоить элементу параметр draggable.

Наконец, поддержка некоторых элементов останется только для обратной совместимости. HTML 5 не будет включать следующие элементы: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <s>,

<strike>, <tt> и <u>. Удалены и некоторые редкие параметры тэгов.

Часть из элементов HTML 5 уже поддерживает девятая версия браузера Opera, в проекте такая поддержка и у Firefox.

HTML 4

Язык HTML 4 в полной мере поддерживают все современные бра-

Узеры, за исключением текстовых. Рассмотрим его основные правила.

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

Чтобы создать простую веб-страницу, необходимо создать пустой текстовый документ (с расширением. txt), для чего подойдет любой простой текстовый редактор типа Блокнот (в системе Windows), vim или emacs (для Linux), а также более специализированные текстовые редакторы, поддерживающие работу с несколькими текстовыми форматами. Не используйте для этого текстовые процессоры типа MS Word, AbiWord или средства OpenOffice: результат может получиться непредсказуемым. После этого расширение файла нужно исправить на. html или. htm — выбор не играет роли. В этом случае файл будет открываться браузером, по умолчанию установленным в операционной системе (для Windows — Internet Explorer, для MacOS X — Safari, для разных версий Linux и FreeBSD-основанных систем — Konqueror или Firefox, для QNX, если ее кто-то вдруг станет использовать как настольную систему, — Voyager); естественно, он будет пустым. Тот же самый файл следует параллельно открыть средствами одного из упомянутых текстовых редакторов и написать в нем следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Заголовок</title>

</head>

<body>

</body>

</html>

После чего нужно обновить страницу в браузере. На самой странице ничего не изменится, но в заголовке окна рядом с названием браузера появится слово «Заголовок». Если же в пространстве между <body> и </body> написать какой-то текст и обновить страницу в браузере, то этот текст наконец отобразится на веб-странице. Проанализируем код.

Строка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> отвечает за определение типа документа (DTD) — об этом тэге уже говорилось выше. Все остальное в документе — это разметка языка HTML (пусть и со включениями кода других языков в ряде случаев): об этом сообщает парный тэг <html>...</html>, являющийся контейнером для остального содержимого.

Содержимое этого контейнера делиться на две неравные части. Одна часть служит для сообщения браузеру и серверу, куда эти данные отправятся, множество технической информации, в том числе некоторые настройки браузера, сведения об используемых файлах и некоторые элементы навигации — эта часть заключается в парный тэг <head>...</head> — как несложно увидеть, внутри этой пары записан тэг <title>...</title>, включающий текст, который выводится на строке заголовка наверху окна браузера (в нашем случае это слово «Заголовок»). Вторая часть, заключаемая в парный тэг <body>...</body>, заключает все то, что будет выводиться в окно браузера. (Кстати заметить, что большинство тэгов — парные; в дальнейшем тип тэга будет оговариваться, только если тэг будет одиночный.)

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

Рассмотрим более сложный пример.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head><title>Создание веб-страницы</title></head> <body>

^1>Создание веб-страницы<^1>

<р>Первый этап создания веб-страниц (при наличии определенных знаний) включает разработку идеи сайта и выбор инструментария...</р>

<р>После этого начинается сам процесс: отрисовка дизайна, написание кода, разработка интерактивных страниц.</р>

</body>

</html>

Верстка

Сразу же обратим внимание, что пробелы и расположение тэгов (на одной строке или на несколько) не играют ровным счетом никакой роли. Весь код может быть записан как длинная строка, но в этом случае он будет не читаемым. Напротив, разные блоки кода можно отделять друг от друга произвольным количеством пробелов и переводов строк — они будут игнорироваться. Именно поэтому для разбиения текста на абзацы используется тэг <p>...</p> — если не использовать его, то текст, пусть и разбитый на отдельные строки, в браузере будет отображаться как сплошной абзац без отступов. Если же требуется не создавать новый абзац, а просто принудительно перенести текст на другую строку, используется одиночный тэг <br>. Разница не только в оформлении (обычно браузеры форматируют содержимое тэга <p>...</p> как блок текста с отступами сверху и снизу высотой в одну строку, а <br> без отступа), но и в использовании: абзац является логическим тэгом, и ему можно назначить стиль, а <br> не создает контейнера. Для разделения горизонтальной чертой используется тэг <hr> — лучше всего его использовать не просто так, а с параметрами. Дело в том, что во всех браузерах эта горизонтальная линия создает имитацию эффекта трехмерной тени (что чаще всего вступает в противоречие с дизайном страницы), и чтобы от нее избавиться, нужно включить параметр noshade («без тени») и толщину линии size, измеряемую в пикселях (обычно пиксели как единица измерения в HTML не указываются, в отличие от процентов). После чего тэг примет вид <hr size="1" width="50%" noshade color="black"> — правда, последний параметр, обозначающий цвет линии, не распознается браузером Opera. А из-за параметра width (ширина) горизонтальная черта сместится к центру страницы и будет занимать ровно половину ширины страницы, какого бы размера окно ни было. Параметры при необходимости используются большинством тэгов; правда, тенденция верстки последнего времени — уточнение визуального представления тэгов средствами CSS, а не параметров, поэтому в качестве параметра используется class или style, в первом случае с именем класса, а во втором — с описанием. Если раньше для форматирования подписи автора под текстом писали <p align="right"><i>MBaH Иванов</і></р> (чтобы содержимое абзаца выравнивалось от правого края и оформлялось курсивом), то теперь модно (и удобно) писать <p class = "subscr"^BaH Иванов</р>, а классу (названному тут «subscr») в таблице стилей назначить детальное описание: не только выравнивание по правому краю и курсивное начертание, но и отступы, особый рисунок шрифта и другие параметры.

Кроме абзацев, есть логические тэги, обозначающие блоки текста и отрезки текста. Блоки оформляются тэгом <div>...</div> и в браузерах форматируются как абзацы, но без отступов. Главная особенность блока — ему можно назначить любое форматирование с помощью CSS. Блоки являются так называемыми блочными элементами (то есть при

130

Техминимум: как сейчас принято

3.1

Расположении блоков на странице они создают что-то вроде абзаца, не вписываясь в другие текстовые элементы), тогда как отрезки текста (<span>...</span>) — линейными, то есть внутри абзаца или блока может быть произвольное количество отрезков текста. (Большинство элементов веб-страниц, оформляемых тэгами, являются либо блочными, либо линейными; впрочем, с помощью CSS можно легко изменить тип элемента.)

Блоки часто используются для точного позиционирования на странице. Отрезки текста нужны для визуального выделения фрагментов абзацев и блоков, например, другим цветом, особыми параметрами отступов, фонового цвета. Форматирование этих двух элементов осуществляется преимущественно средствами CSS, хотя тэг <div> и способен иметь аналогичный тэгу <p> параметр align, отвечающий за выравнивание текста в пределах блока: например, <div align="center">TeKCT в центре<^^> (что можно написать и как <center>TeKCT в центре</center>,но тэг<center> идеологически некорректен).

Тэгов, отвечающих за визуальное форматирование и не несущих почти никакой семантической нагрузки, не так много: это <Ь>полужирный текст</Ь>, <^курсивное начертание^^, <и>подчеркнутый</и> и ^>перечеркнутый<^> текст, ^ир>верхний<^ир> и ^иЬ>нижний<^иЬ> индексы, <^>моноширинный шрифт</^>. Важно соблюдать правильную вложенность тэгов: если мы начинаем с описания полужирного текста, а внутри текстового фрагмента есть и курсив, то закрывающий тэг курсива должен предшествовать закрывающему тэгу полужирного начертания. То есть правильным вариантом вложенности является <b><i> такой </i></b>,а не <b><i> такой </b></i> (хотя большинство браузеров корректно интерпретируют эту последовательность).

У некоторых из этих тэгов есть «неполные синонимы»: так, тэг <em>.</em>, хотя и отображает текст курсивом, служит для логического акцента, так же как и <strong>...</strong>, форматирующий текст как полужирный. Вместо <s>...</s> можно использовать полный синоним <strike>...</strike>.

Один тэг визуального форматирования — <pre>...</pre> — выбивается из общего ряда. Он форматирует текст на веб-странице так же, как он набран в исходном коде в текстовом редакторе. То есть внутри этого тэга переводы строк и большее, чем один, количество пробелов отобразятся именно как переводы строк и пробелы, а не как один пробел, помести мы тот же текст в тэг абзаца или блока. Тэгом <pre>...</pre> очень удобно форматировать стихи со сложным ритмом (как у Владимира Маяковского) или программный код. Внутри этого тэга допускается использование других тэгов.

Большинство других тэгов, употребляемых внутри раздела <body> ...</body>, имеет логический характер, то есть несет определенную смысловую нагрузку. Естественно, браузеры форматируют каждый из семантических тэгов определенным образом. Например, <blockquote> блок цитаты </blockquote> оформляется отступом слева, а все уровни заголовков — от <h1> первого </h1>, самого важного, который должен встречаться на странице только один раз, до <h6> шестого уровня </h6> — имеют собственные параметры отображения. Внутри <ul> маркированных </ul>и<ol> нумерованных </ol>списков <li> элементы </li> этих списков оформляются отступами и значками либо автоматически проставляемыми числами слева. <code> Программный код </code> оформляется моноширинным шрифтом.

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

Таблица состоит минимум из одного ряда, который состоит минимум из одной ячейки. Даже такая структура таблицы используется в некоторых случаях.

Нагляднее будет пояснить на чуть более сложном примере:

<td>Текст первой колонки.</td>

<td>Текст второй колонки, <Ьг>расположенной в две строки.</td>

</tr>

</table>

Тэг <table>...</table> используется для вставки самой таблицы; он сам по себе не может содержать обычный текст. Его обычные параметры — ширина границы (border, в данном случае нулевая), отступ текста от границ ячеек (cellpadding, здесь 5 пикселей) и отступ ячеек друг от друга (тут тоже нулевой). Внутри этого тэга есть тэг ряда — <tr>...</tr>. Он содержит параметр valign, отвечающий за верти-

Техминимум: как сейчас принято

3.1

Кальное выравнивание текста: в данном случае текст в обеих ячейках будет выровнен по верхнему краю, несмотря на то, что высота текста разная (в первом случае одна строка, во втором две). Если бы мы написали вместо top значение bottom, то текст располагался бы внизу ячеек, а высота ячеек равна совокупной высоте строк самой заполненной ячейки. Если бы значение было middle или параметра не было бы совсем, то текст «повис» бы вертикально по центру ячеек.

Наконец, собственно содержание должно заключаться в тэги ячеек: <td>...</td>. Эти тэги тоже могут принимать значение вертикального (valign) и горизонтального (align) выравнивания.

Таблица в два ряда, в каждом из которых находится по две ячейки, записывается в формате HTML так:

<td>TeKCT первой колонки.</td>

<td>TeKCT второй колонки, <Ьг>расположенной в две строки.</td>

</tr>

<td>Teкст первой колонки второго ряда.</td> <td>Teкст второй колонки второго ряда.</td>

</tr>

</table>

Количество ячеек в каждом ряду должно быть одинаково, так как интерпретатор языка HTML в браузере создает сетку, где по горизонтали высчитываются ряды, а по вертикали — входящие в них колонки. Но бывают случаи, когда необходимо объединить несколько соседних ячеек в одну. В этом случае применяется параметр colspan, значением которого является количество объединяемых ячеек:

<td>Teкст первой колонки.</td>

<td>Teкст второй колонки, <Ьг>расположенной в две строки.</td>

</tr>

<td colspan="2">Teкст единственной колонки второго ряда.</td>

</tr></table>

В такой таблице сверху будет две ячейки, а во втором ряду — одна, растянутая на ширину двух верхних.

Аналогичную функцию, но по вертикали, выполняет параметр

Rowspan:

<^ valign="top">

<td rowspan="2">Текст первой колонки, растянутой на высоту двух строк.</td>

<td>Текст второй колонки, <Ьг>расположенной в две строки.</td>

</tr>

<^ valign="top">

<td>Текст второй колонки второго ряда, которая будет располагаться справа, поскольку область слева занята продолжением верхней первой ячейки.</td>

</^>

<^аЬ1е>

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

В последнее время все большую популярность приобретает верстка на основе точного и относительного позиционирования блоков ^^>...<М^> вместо таблиц. Однако ее внедрение сопряжено с трудностями из-за разницы чтения кода различными браузерами. (Об особенностях такой верстки и верстки на таблицах — чуть ниже в этой главе.) Из-за таких разночтений верстка на основе таблиц остается популярной и по сей день. Следует помнить: несмотря на индифферентность HTML к пробелам, лишние пробелы по бокам тэга изображения при верстке изображений вплотную друг к другу породит нежелательные отступы.

Например, чтобы два изображения сверстать вплотную друг к другу без отступов (так поступают, разрезав исходное изображение на части, чтобы визуально оно было одним целым, но на самом деле — фрагментарным, например, в графических навигационных меню; можно было бы поставить изображения просто рядом, но в этом случае потерялась бы возможность использовать фрагменты изображений в качестве фона и некоторые другие особенности), следует написать:

</tr>

</table>

(Пример, наряду со всем остальным, прекрасно иллюстрирует неэкономность верстки на основе таблиц.)

Если оставить отступы по краям тэгов изображений или просто перенести тэги ячеек на другие строки:

<td>

</td>

</tr>

</table>

— то изображения будут отступать друг от друга на ширину стандартного пробела, что, конечно, нежелательно. Наилучший способ — писать для каждой ячейки (если используется жесткая верстка) точную ширину и высоту изображения, то есть дублировать размеры: в этом случае не будет дефектов отображения в Opera 6 и ниже и в Netscape 6 и ниже. Дело в том, что в этих устаревших браузерах паразитные пробелы появляются, даже если написать тэги ячеек вплотную к тэгам изображений. В итоге с учетом особенностей всех браузеров приведенный пример должен выглядеть так:

</tr>

</table>

Тэг изображения — <img> — одиночный. Он никогда не употребляется без параметра src, в качестве значения принимающего путь к файлу. Согласно спецификации, обязательным элементом является также параметр alt — альтернативный текст, появляющийся на странице до загрузки самого изображения, а в некоторых браузерах он также используется как всплывающая подсказка. Параметры width и height («ширина» и «высота») нужно указывать, чтобы еще до загрузки всех изображений каркас страницы сформировался правильно. Правда, в браузерах Opera и Firefox при отключенных изображениях каркас все равно нарушается, если не указать размеры также для ячеек таблицы или иных блоков, содержащих эти изображения. Желательно также указывать параметр border, и если вы не хотите, чтобы изображение, выступающее в качестве ссылки, было окаймлено синей (фиолетовой после посещения ссылки) рамкой, следует указать значение border, равное нулю. (Стилями CSS можно модифицировать вид и цвет рамки; кроме того, написав в стилевой таблице строчку IMG {border:0px;}, вы избавитесь от необходимости использования HTML-параметра border.)

Для указания путей к файлу принято несколько правил. Они в равной степени касаются и ссылок, и других указаний на пути к документам (в тэгах <link>, фреймах и т. п.). Если изображение (или иной файл) находится в той же директории, что и файл, запрашивающий это изображение, достаточно просто указать имя файла: <img src="part2.jpg">. Если файл находится на уровень глубже, то есть в директории, которая находится рядом с текущим файлом, то следует указать эту директорию (или цепочку директорий, если файл располагается глубже на несколько уровней): <img src="logotype/part2.jpg"> или <img src="logotypes/logotype1/part2.jpg">. Точка обозначает текущую директорию, поэтому самый первый пример будет равноценен следующему: <img src="./part2.jpg">. Кроме того, можно использовать две точки подряд: они обозначают родительскую директорию (она располагается на уровень выше). Например, в какой-либо директории (допустим, она называется special) располагается две директории: files и images. Текущий файл, запрашивающий изображение, располагается в директории files, а само изображение (image1.gif) — в директории images. Чтобы указать корректный путь к изображению, следует записать адрес в таком формате: <img src="../images/image1.gif">. Алгоритм загрузки изображения таков: браузер отправляет этот адрес серверу, сервер поднимается на уровень выше относительно файла — из директории files в директорию special, в последней находит директорию images, в ней файл image1.gif, который и возвращает браузеру. Однако при перемещении текущего файла или при включении серверным способом его кода в код другой страницы пути к файлам могут нарушиться. При такой вероятности лучше использовать не относительные пути к файлам (они указываются относительно текущего документа), а абсолютные (относительно корневой директории сайта). Слэш, или косая черта, используемый в начале пути, указывает на то, что адрес указан относительно корневой директории. Поэтому, если указать адрес, как в примере <img src="/images/logotypes/logo1.jpg">,то, где бы ни находился текущий файл, указание пути всегда будет верным, поскольку включаемый файл изображения располагается в директории (корневая директория caьma)/mages/logotypes/ — при любым манипуляциях с файлом адрес останется работоспособным. Наконец, можно записывать адрес файла с указанием протокола и имени домена; такой способ используется, если запрашиваемый файл находится на другом сервере или на субдомене: <img src="Http://images. server. ru/ logotypes/logo1.jpg">.

Абсолютно те же правила указания адресов страниц действуют и для ссылок.

Для вставки гиперссылки на веб-страницу применяется тэг <a>...</a>, обладающий обязательным параметром href, в качестве значения которого используется адрес страницы, на которую ссылается текущая. Таким образом, стандартная ссылка выглядит как <а href="info. html">Информация</a> или <a href="Http://www. yandex. ги">Яндекс</а>. Поскольку в адресах слэш обозначает корневую директорию, ссылку на главную страницу сайта можно ставить так: <a href="/">Ha главную страницу</а>. Чтобы страница по нажатию на ссылку открывалась в новом окне, применяется параметр target: в качестве его значения употребляется слово _blank или имя окна, в котором нужно произвести открытие (последнее полезно при использовании фреймов). Например: <a href="Http://www. yandex. ru" target=" Ь1апк">Яндекс</а>.

Для списков используется несколько тэгов: маркированные и нумерованные уже упоминались. Кроме них, существуют списки определений. Общий тэг для всего списка — <dl>...</dl> (сокращение от definition list, «список определений»), в который можно вкладывать произвольное количество пар тэгов: <dt>...</dt> для терминов и <dd>...</dd> для определений. Например, список из двух терминов с определениями записывается так:

<dl>

<dd>C0B0KynH0CTb веток, торчащих из земли.</

Dd>

^^Браузер<^^

<dd>nporpaMMa просмотра интернет-страниц.</dd>

</dl>

Браузеры обычно форматируют определения с некоторым отступом слева, тогда как термины форматируются как обычный текст. Каждый из элементов (и сам список, и термины, и определения) является блочным.

Очень важный тип элементов веб-страницы — это формы. Формы — пожалуй, единственный тип элементов, не имеющий аналогов на бумаге (если ссылки можно сравнить со сносками, отсылками к статьям, оглавлением и иными перекрестными указателями в книгах, а фреймы, допустим, с особым приемом при изготовлении полиграфии с «окошками», сквозь которые видны другие страницы, то формы можно сравнить только с почтовой отправкой, да и то отдаленно).

Форма представляет собой набор элементов для ввода пользовательских данных или выбора некоторых предоставленных вариантов для последующей их отправки и обработки на сервере. За саму обработку формы не отвечают. Их функции — предоставить поля и переключатели для пользовательских ввода и выбора, а также кнопку для отправки данных. Если на сервере отсутствует средство обработки данных (страница, написанная на языке серверных сценариев, которая способна принять и обработать данные из формы), то отправка данных из формы бессмысленна. Формы на странице также используются для обработки клиентскими сценариями, но реже: в этом случае со введенными посетителем страницы данными сценарий, например, на JavaScript, производит некоторые действия, в результате которых выдает результат в режиме реального времени. В качестве подобных примеров можно привести инструмент для подбора и совмещения цветов (Http://Wellstyled.Com/Tools/Colorscheme2/Index-En.Html) и инструмент для приведения типографики текста в надлежащий вид (Http://Www.Erlang.Com.Ru/Devanagari).

Основу формы составляет тэг <form>...</form>. В большинстве случаев у формы есть два параметра: action (в качестве значения включает адрес страницы, которая содержит серверный сценарий, принимающий данные формы; часто бывает, что одна и та же страница включает и форму, и серверный код ее обработки) и method (метод передачи данных: подробнее см. в словаре в конце книги в статье «Методы пересылки данных»). Кроме того, могут использоваться идентификаторы формы (name="" и id="") и обработчики событий. Однако такая синтаксически корректная запись:

</form>

Ничего не выведет на страницу. Основное содержимое выводится элементами формы: однострочным текстовым полем, скрытым полем, полем ввода пароля, многострочным текстовым полем, списком, переключателями, полями отметки, кнопкой отправки, кнопкой сброса и кнопкой-изображением. Чаще всего используется однострочное текстовое поле и кнопка отправки (последнюю можно и не использовать: если курсор стоит на одном из полей формы, то по нажатию клавиши Enter — или Return для MacOS — на клавиатуре данные формы отправляются, как если бы была нажата кнопка отправки в форме). Такой пример уже работоспособен (конечно, если слова «адрес страницы-обработчика» будут заменены на реальный адрес страницы-обработчика):

</form>

Текст на кнопке отправки можно произвольно менять. Поле ввода текста и кнопка будут разделены обычным пробелом: форма является блочным элементом, а элементы формы внутри нее — линейными. В данном примере при нажатии на эту кнопку произойдет отправка данных по указанному адресу, то есть загрузится страница-обработчик, в которой инициализируется переменная $dannye, значением которой будет то, что посетитель ввел в данное поле. Можно предлагать текст по умолчанию:

В этом модифицированном примере поле для ввода окажется длиннее, а кнопка отправки перенесется на следующую строку.

Вот простая форма для ввода логина и пароля — после ввода корректных данных и нажатия на кнопку «Войти» произойдет авторизация, если она создана:

Логин: <input type="text" name="login">

<Ьг>Пароль: <input type="password" name="parol"> <br><input type="submit" value="Войти">

</form>

Используются не только поля ввода строк текста и пароля, но и скрытые поля(<input type="hidden" пате="какое-то имя" value="KaKoe-To значение">). Они нужны для передачи в форму фиксированных значений, не зависящих от желания пользователя (например, нужно, чтобы при каждой передаче данных из формы сохранялось то или иное значение, и пользователь не мог его менять: скрытое поле — как раз подходящий случай).

Для передачи текстов писем и сообщений одной строки недостаточно, но HTML поддерживает и многострочные поля ввода:

Здесь вы можете ввести текст с произвольным разбиением на строки.

При нажатии Enter или Return не произойдет перехода на страницу-обработчик. Для перехода по элементам формы используйте клавишу Tab.

</textarea>

</form>

В многострочных текстовых полях параметр rows обозначает количество строк текста, которое уместится в поле без возникновения полосы прокрутки, а cols — количество «колонок» букв: если шрифт моноширинный (то есть все буквы занимают одинаковое пространство), то «колонки» будут видны, в противном случае с помощью этого параметра можно лишь приблизительно задать ширину текстового поля.

Вместо кнопки отправки той же функциональностью обладает тэг <input type="image" src="адрес изображения">: вместо стандартной кнопки, предопределенной браузером и общим интерфейсом операционной системы, можно вставить свое изображение, которое будет функционировать как кнопка отправки. Несколько противоположный смысл у тэга <input type="reset">: он стирает все, что набрано в полях ввода данной формы, и возвращает значения по умолчанию.

Кроме возможностей ввода текста и нажатия кнопок, формы предоставляют посетителю сайта возможность выбора. Одна из возможностей выбора — использование выпадающего списка:

<form method="post" action="адрес страницы - обработчика'^

<option value="2">Второе значение</ор^оп>

<option value="3">Третье значение</option> </select>

</form>

Список оформляется тэгом <select>.</select>, который имеет имя. Вообще, любое имя элемента формы, переданное на страницу-обработчик, автоматически инициализирует одноименную переменную. Так, если выпадающему списку присвоить имя (name) — например, selector1, то «принимающая сторона» — страница-обработчик — автоматически получит переменную $selector1, которой будет присвоено значение 1, 2 или 3 (в данном примере) — в зависимости от того, что выберет посетитель.

Такой же выбор можно реализовать при помощи круглых переключателей, на программистском жаргоне называемых «радиобаттона - ми» (radio button): в одной форме с одним именем можно выбрать только один «радиобаттон».

<input type="radio" name="имя" value="1"> Первое значение

<br><input type="radio" name="имя" value="2"> Второе значение

<br><input type="radio" name="имя" value="3"> Третье значение

</form>

Если нужно, чтобы изначально было выбрано какое-то значение, необходим атрибут checked:

<input type="radio" name="имя" value="1"> Первое значение

<br><input type="radio" name="имя" value="2" checked> Второе значение

<br><input type="radio" name="имя" value="3"> Третье значение

</form>

В этом случае отмечен будет второй вариант выбора. С выпадающими списками в аналогичном случае нужно использовать атрибут

Selected:

<input type="radio" пате="имя" value="1"> Первое значение

<br><input type="radio" пате="имя" value="2" selected> Второе значение

<br><input type="radio" пате="имя" value="3"> Третье значение

</form>

Наконец, можно использовать «чекбоксы» (check box), которых может быть произвольное количество и в которых можно проставлять галочки. Каждый «чекбокс» требует собственного имени, поскольку, если снабдить их все одинаковым именем, то на сервер отправится только значение последнего отмеченного «чекбокса»:

Получать новости на e-mail

<br><input type="checkbox" name="subscribe"> Подписаться на рассылки

<br><input type="checkbox" name="forum auth"> Автоматически авторизоваться в форуме

Значений, явно назначаемых с помощью параметра value, у этих полей не бывает: если поле отмечено галочкой, на сервер отправляется значение TRUE (истина), в противном случае — FALSE (ложь). Соответственно, обрабатываются только отмеченные значения. Чтобы поле изначально было помечено галочкой, используется атрибут checked:

<input type="checkbox" name="email news" checked> Получать новости на e-mail

<br><input type="checkbox" name="subscribe" checked> Подписаться на рассылки

<br><input type="checkbox" name="forum auth"> Автоматически авторизоваться в форуме

</form>

В этом примере первые два поля будут отмечены, а третье нет. Особо следует сказать о парном тэге <button>...</button>. Он не является элементом формы и не отправляет значения сам по себе. У него может не быть имени и никогда не бывает параметра value. Но все, что написано между открывающим и закрывающим тэгами, будет отображено на кнопке. На такие кнопки можно помещать изображения, таблицы и большинство других элементов веб-страниц. Нужны же такие кнопки только для того, чтобы обрабатывать событие нажатия: то есть используются они в связке с JavaScript. Например, при нажатии на следующую кнопку:

<button onClick="alert('Здравствуйте')">Нажми меня</button>

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

Фреймы, или возможность загружать в окно браузера несколько веб-страниц сразу, ныне являются устаревающей технологией, активное использование которой ассоциируется с серединой 90-х годов XX столетия. Частично это связано с ухудшением навигации (при переходах по страницам адрес в адресной строке не меняется, возникают сложности с использованием истории браузера, нет возможности дать ссылку на конкретную страницу, не указывая путь в меню), а частично — с тем, что сейчас все большее распространение получают сайты на динамической основе. Дело в том, что чаще всего фреймы использовались для того, чтобы одна страница была посвящена навигации, а другая содержимому (сейчас это гораздо легче и безопаснее организовать серверными включениями). При щелчках на ссылках на навигационном фрейме происходит переход по ссылке в содержательном фрейме. Рассмотрим пример — страницу index. html:

<html>

<head>

<title>Сайт с фреймами</^^е>

</head>

К сожалению, ваш браузер не поддерживает технологию фреймов.

<br><a href="/noframes. html">Пожалуйста, перейдите на страницу с ограниченной функциональностью</а>

</noframes>

</html>

На таких страницах отсутствует тэг <body> — он нужен уже на включаемых страницах, составляющих компоненты фреймов. После блока <head>...</head> следует сразу блок <frameset>...</frameset>, включающий, как явствует из названия, набор фреймов — пространств для размещения страниц. Обычно этот тэг имеет два параметра: rows (отвечает за количество и высоту фреймов, расположенных один под другим) и cols (то же самое, но по горизонтали). Нам необходимо разместить две страницы друг рядом с другом. Значит, нам нужен только один ряд, и в его параметре мы указываем только одно число, отвечающее за высоту единственного ряда. Напротив, в параметре cols нужно указать два значения. Мы знаем, что навигационный файл включает только логотип и колонку ссылок, значит, он должен быть узким — указываем ширину в 250 пикселей (на то, что ширина указана в пикселях, указывает отсутствие единицы измерения). Ставим запятую и пропускаем второй параметр: браузер вычислит ширину второго фрейма самостоятельно, поскольку мы не знаем, какое разрешение экрана у посетителя. Если бы мы указывали ширину в процентах, тэг можно было бы записать так:

Frameset rows="100%," cols="15%,85%">

Или так:

Внутри тэга используются одиночные тэги, отвечающие за вставку каждого из фреймов. Параметр src тэга <frame> в качестве значе-

Ния требует адрес страницы, включаемой во фрейм, а параметру name следует придумать имя, по которому к этому фрейму будут обращаться ссылки. Имена фреймов «запоминаются» браузером, поэтому адресация ссылок происходит правильно. Если ссылка внутри файла nav. html будет записана как <a href="firstpage. html">Первая страница<^>, то при щелчке на этой ссылке файл firstpage. html загрузится в тот же фрейм вместо навигационного файла. Правильным будет указание адресации ссылки внутри тэга: <a href="firstpage. html" target="stranicy">Первая страница<^>. В этом случае файл загрузится в правый фрейм, который назван «stranicy».

Фреймы получили популярность еще тогда, когда не было браузеров Firefox и Safari, а Opera умела очень мало. Существовали и другие браузеры с ограниченной функциональностью. Поэтому был создан специальный тэг <noframes>...</noframes>, который отвечал за содержимое страницы при отсутствии фреймов. Подход тут простой: браузер, не поддерживающий фреймы, просто «не понимает» тэгов фреймов и пропускает их. Соответственно, не знает он и тэга <noframes>...</noframes>, поэтому пропускает эти тэги, но выводит на экран то, что между ними. Браузеры же, которые поддерживают технологию фреймов, скрывают содержимое этого тэга, поскольку оно для них неактуально. Указывая пользователям, что их браузер не поддерживает фреймы (сейчас это только текстовые браузеры под Linux и экзотические устаревшие «модели»), будьте корректны и создайте альтернативный вариант страницы без фреймов, на которую удрученный пользователь сможет перейти в раздумьях, что же он теряет со своим старым браузером. Или не используйте фреймов вообще. Или — как вариант — используйте плавающие фреймы.

Плавающие фреймы, оформляемые тэгом <iframe>, являются блочными элементами и могут располагаться в любой части страницы (поэтому они и названы «плавающими») и быть любого размера. Они поддерживаются всеми современными браузерами (кроме текстовых), могут быть нулевой величины (это используется для динамической подгрузки информации), могут не иметь рамки и полосы прокрутки, так что часто содержимое плавающего фрейма фактически не отделено от остальной части страницы. Для записи плавающего фрейма следует указать тэг со следующими параметрами:

К сожалению, ваш браузер не поддерживает технологию плавающих фреймов.

<br><a href="/noiframes. html">Пожалуйста, перейдите на страницу с ограниченной функциональностью<^>

</iframe>

Имя, как и у фреймов, требуется для корректной загрузки файла по внешней странице (включающей плавающий фрейм) именно в этот плавающий фрейм: дело в том, что их может быть несколько. Параметр src обязателен: без его содержимого внутри плавающего фрейма будет генерироваться страница об ошибке.

Между открывающим и закрывающим тэгами можно написать уведомление для владельцев устаревших и альтернативных браузеров: оно будет показано на странице, только если браузер не в состоянии отобразить плавающий фрейм (если браузер устаревший или в его настройках запрещена загрузка содержимого плавающих фреймов).

Если нужно, чтобы у фрейма не отображались границы, используется параметр £гатеЬо^ег="0" (или £гатеЬо^ег="по"), а чтобы принудительно убрать полосы прокрутки, пишут параметр Бсго111пд="по". В этом примере содержимое плавающего фрейма похоже на часть страницы:

^^ате паше="" src="2.html" width="300" height="200" ^атеЬо^ег="0" scrolling="no"></iframe>

Наконец, в HTML есть возможность вставки комментариев. Они не выводятся в браузер, а остаются в исходном коде. Записываются HTML-комментарии так:

Обратите особое внимание на пробелы по бокам текста комментария. Из-за их отсутствия в некоторых браузерах комментарии могут быть расценены некорректно. Нужны они разработчикам, делающим для себя пометки в коде, и любителям изучать исходные коды страниц. Без сомнения, комментарии вроде

Разнообразят скучные строки тэгов, но большое их количество увеличивает объем кода.

Использование этих знаний было в принципе достаточным в середине 90-х годов, когда еще очень многие сайты были статическими, а браузеры не могли корректно работать даже с простыми CSS-указаниями. Сейчас ситуация в корне другая: HTML может служить основой логической и отчасти визуальной разметки, но для создания полноценного сайта его знания уже недостаточно.

В заключение стоит сказать еще несколько слов об идеологии HTML. Изначально он планировался и разрабатывался исключительно как логический язык. Первые версии не содержали тэгов визуаль-

Техминимум: как сейчас принято

3.1

Ного форматирования вообще, а строго структурировали документы. Однако при визуализации HTML-разметки а браузере требовалось как-то отграничить заголовок от обычного текста, выделить ссылку, цитату и пример программного кода. Разработчики браузеров пошли по наиболее логичному пути: они сделали так, чтобы разные логические элементы по-разному выглядели. Этот ход повлиял на дальнейшее развитие языка: в него стало включаться все больше тэгов визуального форматирования (полужирный и курсивный текст, параметры шрифта и т. п.). И когда появился язык CSS (точнее, его нормальная поддержка в браузерах), практика использования HTML не только для логической разметки, но и для визуального форматирования была столь велика, что <blockquote> использовали для воссоздания отступов слева, а заголовками от <h1> до <h6> пренебрегали, пытаясь украсить заголовок средствами HTML — в дело шли и <b>, и <i>, и <big>, и <font>, и другие средства. К счастью, все больше дизайнеров и кодеров понимает важность разделения логики и внешнего вида, особенно если сами оперируют информацией, хранящейся на сайте, а не делают статические страницы. Движение от HTML к XHTML призвано воссоздать первоначальное предназначение языков разметки вида HTML.

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

В любом случае, язык CSS использовать необходимо хотя бы для того, чтобы придать страницам стилистическую неповторимость: задать параметры шрифта и абзаца (начертание, кегль, насыщенность, прочие параметры стиля, межбуквенное расстояние, интерлиньяж, отступы, в том числе отступ «красной строки»), создать поля на странице без «костылей» (когда, например, отступы задаются пустыми ячейками таблицы — под «костылями» понимаются громоздкие методы решения проблем, которые решаются более изящно), уменьшить количество кода, применить один стиль отображения сразу к нескольким объектам, получить возможность динамически менять стили и их описание.

Правила языка CSS ничуть не сложнее для понимания, чем правила HTML, разве что элементов и языковых конструкций побольше.

CSS

Тем не менее, все законы CSS сводятся к правилам включения стилей в (X)HTML-разметку и к описанию тэгов, классов и идентифицированных элементов.

Включать стилевые описания можно тремя способами.

Первый способ подразумевает прямое включение стилей в тэги с помощью параметра style, например: <p style="color: red">TeKCT абзаца красного цвета</р>, <li style="font - weight:bold; со1ог:#999999">элемент списка, выделенный полужирным начертанием и серым цветом</^>, <img src="file. jpg" а^="картинка" style="border:1px solid orange" />. Можно заметить, что при описании стиля до двоеточия располагается свойство (насыщенность, цвет, граница), а после двоеточия значение этого свойства (красный, полужирная, серый, ширина в 1 пиксель, непрерывная линия, оранжевый). Несколько свойств разделяются между собой точкой с запятой. Если у свойство является объединяющим (то есть на самом объединяет в себе несколько свойств), то все значения этого свойства пишутся через пробел. Единицы измерения от чисел пробелом не отделяются. Все эти правила в силе и для других типов включения стилей. Так можно очень точно определить вид элемента на веб-странице, однако этот способ не очень удобен: во - первых, получается смесь из двух языков, что при идеологии отделения формы от содержимого не очень логично, а во-вторых, если такое же оформление подобного или другого элемента встретится еще несколько раз, логичнее не повторять их каждый раз, а вынести в отдельный участок кода. Второй и третий способы включения кода как раз освобождают от необходимости делать лишнюю работу и позволяют убивать по нескольку зайцев сразу.

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

P {

Color:green;

}

Img { border-width:2px; border-color:red; border-stylle:dashed;

}

</style>

К пробелам в CSS отношение похоже на HTML; с тем же успехом стилевое описание может выглядеть и так:

P {color:green}

Img {border:2px dashed red}

</style>

Или так:

Img {border-width:2px; border-color:red; border - style:dashed}

</style>

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

Такие «таблицы стилей» лучше всего помещать между тэгами <head> и </head>, чтобы они оказались до элементов, стили которых будут описываться. Впрочем, для частных случаев размещение тэга <style>...</style> допускается где угодно.

Ясно, что в этом случае мы определили вид всех абзацев и всех изображений. Очень удобно, но что делать, если нужно паре или тройке изображений назначить более толстую рамку, а одно изображение оставить вообще без рамки? Можно пойти по первому пути, то есть конкретным изображениям назначить стили параметром style, что отменит глобальное описание и «переназначит» стиль: <img src="23file. jpg" alt="картинка" style="border-width:4px" /> (рамка становится более толстой), <img src="1file. jpg" alt="картинка" style="border-width:0px" /> (рамка исчезает). Но можно повторяющимся элементам назначить классы; в этом случае класс можно описать в той же глобальной таблице стилей. Класс назначается так: <img src="23file. jpg" alt="картинка" class="accented" />. Классу присваивается произвольное имя; главное, чтобы оно было максимально логичным, а не отражало внешний вид элемента (акцентировать изображение можно не только толстой рамкой; при редизайне описание класса может измениться, а имя так и останется логически при - вязанным к нему). В описании стиля внутри тэга <style>...</style> перед названием класса ставится точка. Уже приводившаяся таблица стилей приобретает следующий вид:

Color:green;

}

Img { border-width:2px; border-color:red; border-stylle:dashed;

}

Img. accented { border-width:4px;

}

</style>

Можно видеть, что для описания изображений класса accented приводится только описание толщины рамки; остальные свойства наследуются из описания всех изображений (img). Если же мы решим, что класс accented будет обслуживать не только изображения, но и другие элементы, то имя элемента необязательно указывать, важно указать только класс. Однако наследования при этом не получится, и мы вынуждены будем описывать все свойства этого класса:

Color:green;

}

Img { border-width:2px; border-color:red; border-stylle:dashed;

}

.accented {

Border-width:4px;

Border-color:red;

Border-stylle:dashed;

}

</style>

Или, что короче:

P {color:green}

Img {border:2px dashed red}

.accented {border:4px dashed red}

</style>

Техминимум: как сейчас принято

3.1

Для того изображения, которое осталось без рамки, логичнее оставить прямое включение стиля либо использовать «идентификатор». Это значит, что тэг снабжается параметром id с уникальным именем в качестве значения (<img src="23file. jpg" а^="картинка" id="super" />), а стили для него в таблице описываются в таком формате:

#super {border-width:0px}

</style>

Или

</style>

Наконец, для ссылок есть еще и псевдоэлементы, пишущиеся через двоеточие после имен тэгов, классов и идентифицированных элементов. Употребление псевдоэлементов таково: a:link отвечает за обычную ссылку, a:visited за посещенную, a:active за активную, a:hover при наведении курсора на ссылку:

A:hover {color:red}

До сих пор все таинство происходило в одном файле. Но бывают ситуации, когда одни и те же стили нужно применить к десяткам и сотням файлов.

Третий способ позволяет без использования серверных технологий включать один файл в другой. Только включаемый стилевой файл должен быть определенного формата, а в каждом включающем файле должна быть инструкция, вызывающая стилевой файл. С помощью текстового редактора следует создать обычный текстовый файл с произвольным именем, только с расширением. css (а не. txt или каким-либо иным) и записать туда любые стилевые инструкции, но без тэгов <style>...</style>. Иначе говоря, простое содержание стилевого файла (к примеру, style. css) может быть таким:

* { /* Звездочка вместо элемента обозначает все элементы сразу */

Margin:0px; /* Отступы от других элементов нулевые */

Padding:0px; } /* Отступы от границы внутри элемента нулевые */

P {

Text-indent:3em; /* Красная строка: отступ

В три ширины буквы m */

Margin:0px 0px 3px 0px; /* Отступы от

Других абзацев сверху, справа, снизу, слева */

Color:black; /* Цвет текста черный */

}

Как и в любом языке, в CSS есть комментарии. Они оформляются так:

/* текст комментария */

Нужны они скорее для удобства кодера: 1 или 2 лишних килобайта мало что значат.

Далее нужно в каждый документ между тэгами <head> и </head> включить следующую строку:

Тэг <link> не парный, поэтому в конце в данном примере стоит завершающая косая черта (в HTML 4 она не является обязательной). Параметр rel определяет тип взаимосвязи со включаемым документом и говорит, что это таблица стилей. Параметр href (вместо него в Netscape 4 использовался src) сообщает адрес включаемого стилевого файла. Тип данных определяется параметром type. Стиль отображения задается параметром media: если это screen, то стили будут применены к объектам, отображаемым на экране; если print, то при распечатке на принтере; если all, то везде. Заголовок title используется скорее для удобства.

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

В заключение обзора CSS стоит коротко описать основные его элементы и значения.

Цвет текста задается элементом color, после двоеточия следуют допустимые названия цветов (yellow, black, blue, red, purple, olive, orange, white, green и другие) или их RGB-представление, предваряемое знаком #, например: #ffffff (белый), #000000 (черный), #ff0000 (красный), #00ff00 (зеленый), #0000ff (синий), #ffff00 (желтый), #00ffff (морская волна), #ff00ff (фиолетовый).

Составлять такие значения несложно. Первая пара символов после знака диеза отвечает за красное излучение, вторая за зеленое, третья — за синее. Сочетания разных пучков света с экрана дают совмещенные цвета: из красного и зеленого получается желтый, из красного и синего — фиолетовый. Значений может быть 16, от нуля до буквы F (то есть 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E и F). Нуль — отсутствие излучения данного цвета, буква F — максимальное излучение. Максимум всех трех цветов (#FFFFFF) дает белый цвет, отсутствие излучения (#000000) — черный цвет. Различное совмещение этих значений дает более 16 миллионов цветов. Экспериментируйте!

Несколько параметров шрифта сразу позволяет установить параметр font, например:

Font:200% serif; /* Текст в 2 раза крупнее стандартного, с засечками — типа Times */

Font:12pt sans-serif; /* Кегль: 12 пунктов, шрифт

Без засечек — типа Arial */

Font:italic bold 14pt monospace; /* Курсивный полужирный текст кеглем 14 пунктов, моноширинный — типа Courier */

По отдельности из параметров шрифта можно устанавливать название гарнитуры (font-family), размер шрифта (font-size), начертание (font-style — обычное, курсивное или наклонное, соответственно normal, italic или oblique), капители (font - variant — значения normal и small-caps), полужирное начертание (font-weight:bold).

Из прочих параметров текста можно устанавливать:

— межбуквенное расстояние (letter-spacing:5; возможны и отрицательные значения);

— интерлиньяж (высоту строки в пределах абзаца, или расстояние между строками, line-height);

— выключку, или выравнивание текста (text-align, значения left, center, right, justify — влево, от центра, вправо, по ширине);

— оформление текста (text-decoration, чаще всего применяется значение underline — подчеркивание, но есть еще blink, line-through, overline и none — мигание, перечеркивание, надчеркивание и отсутствие оформления);

— отступ первой строки абзаца, или «красную строку» (textindent);

— преобразование символов текста в верхний или нижний регистр

(text-transform:capitalize, lowercase, uppercase или none);

— вертикальное выравнивание в пределах блока (vertical - align);

— отображение пробелов (white-space) — как в HTML, то есть все пробелы сливаются в один (значение normal), с запретом разрыва строки (nowrap), с сохранением количества пробелов и переносов строк, то есть как с тэгом <pre> (значение pre);

— интервал между словами (word-spacing).

Фон любого блочного элемента (блочные элементы, как <p>, <div>, <table>, в отличие от линейных, не могут собираться в одну строку и образуют отдельные абзацы) и всего документа задается общим параметром background. Частные правила задаются параметрами background-attachment (прокручивание фона вместе с содержимым при background-attachment:scroll или его фиксированное положение при background-attachment:fixed), background-color (цвет фона), background-image (фоновое изображение: background-image:URL(адрес изображения)), background-position (позиционирование фона, задается выравниванием, например top right, или числовым значением, в том числе и в процентах), background-repeat (повторение фонового изображения: без повторения no-repeat, с обычным размножением по вертикали и горизонтали repeat, с повторением по горизонтали repeat-x, по вертикали — repeat-y).

Использование свойств фона породило новую возможность для веб-дизайнеров. Ранее для смены изображения при наведении на него курсора мыши нужно было использовать два изображения и сценарий на JavaScript с использованием событий onMouseOver и onMouseOut и быть уверенным, что у посетителя включена поддержка языков активных сценариев (в чем, вообще говоря, никогда нельзя быть уверенным). Теперь есть такой выход: вы готовите одно изображение, в которое включены сразу два состояния (картинка состоит из двух половинок), заключаете его в качестве фона в ссылку внутри какого-то блока и используете псевдокласс : hover для отображения состояния ссылки при наведении мыши. В нормальном состоянии отображается только половина картинки, потому что блоку нужно прописать точные размеры, соответствующие половине размеров изображения по одному из измерений, а в «наведенном» состоянии для фона пишется позиционирование со смещением. Вот как это реализовано на сайте Джеффри Зельдмана, zeldman. com:

<style>

Div#banners { margin: 0;

Padding: 13px 0 0 0;

Background: transparent url(/i04/enjoy. gif) top left no-repeat;

}

TOC o "1-5" h z div#banners h5 {

Margin: 0 0 10px 0;

Padding: 0;

}

Div#banners h5#hcban {

Margin: 10px 0 0 0;

Padding: 0;

text-indent: -9999px; width: 230px; height: 45px;

}

Div#banners h5#hcban a { display: block; margin: 3px 0 0 0; padding: 0;

Width: 100%; height: 100%;

Text-decoration: none;

Background: transparent url(/i04/hcban2.gif) top left no-repeat;

}

Div#banners h5#hcban a:hover { background: transparent url(/i04/hcban2.gif) 0 -45px no-repeat;

}

</style>

<h5 id="hcban"><a href="Http://www. happycog. com/" title="Happy Cog Studios. Web design, consulting, and publishing.">Happy Cog </a></h5>

</div>

Требуются некоторые пояснения. В блоке с идентификатором «banners» помещается несколько баннеров (изображений — ссылок на другие сайты). Структура баннера такова: заголовок пятого уровня с идентификатором (например, «hcban»), в который включается ссылка. Заголовок формируется как блок точно заданных размеров, причем для отступа текста внутри этого заголовка пишется больше отрицательное число, чтобы самого текста не было видно на странице даже в случае длинного заголовка: вместо него функцию ссылки будет выполнять... пустое место. Но это пустое место снабжено фоном.

Обратите внимание, что в стилевых описаниях используется вложенность элементов (читается с конца: запись div#banners h5#hcban a: hover следует читать как «наведенное состояние ссылки внутри заголовка пятого уровня с идентификатором „hcban“, находящегося внутри блока с идентификатором „banners“»). В этом случае гарантируется, что ссылка будет приобретать такой вид только внутри этих элементов, вложенных в такой последовательности, и ни в каких других случаях.

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

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

Preloads = new Array("menu web", "menu artf", "menu_diff", "elem_12", "frame_ruler");

For(i=0; i<preloads. length; i++)

{

Kartinko = new Image();

Kartinko. src = "/system/y/"+preloads[i]+" over.

Jpg";

}

</script>

Техминимум: как сейчас принято

В этом случае нужно точно знать, какие изображения понадобятся при «ролловерных» эффектах, потому что при динамическом формировании такого списка возникнут дополнительные сложности: фрагмент сценария на одном языке в сценарии на другом языке.

Смысл сценария таков: сначала формируется массив имен изображений (или фрагментов имен, как в данном случае), элементы которого затем с помощью цикла включаются в полные адреса загружаемых изображений. При каждом проходе цикла генерируется новый объект - изображение, который потом в качестве параметра src принимает полный адрес изображения. CSS-подход этих сложностей лишен.

Вернемся к описанию языка CSS.

Параметры границ блоков, абзацев, цитат, фрагментов текста (<span>) и прочих блочных и линейных элементов можно задавать целиком (border), только для левого или правого края (border-left или border-right), только для верхнего или нижнего края (border-top или border-bottom), по отдельности можно задавать цвет (border - color), стиль (border-style — допустимые значения: solid «сплошная линия», dotted «пунктир», dashed «штрих», double «двойная линия», groove, ridge, inset и outset для имитации разных видов объемности) и толщину линии (border-width). Легко догадаться, что значат параметры border-left-style, border-bottom-color, border-right-width и подобные. Если сторона рамки не указывается, то значений может быть несколько: они отделяются пробелом. Так, border-width:1px задаст толщину линии для всей рамки. Два значения (border-width:1px 2px) сигнализируют о том, что для верхней и нижней границы толщина будет в 1 пиксель, а для левой и правой в 2. Три значения (border-width:1px 2px 4px) зададут толщину в такой последовательности: 1 пиксель для верхней границы, по 2 пикселя для левой и правой, 4 пикселя для нижней. Четыре значения через пробел устанавливаются поочередно для верхней, правой, нижней и левой границ (по часовой стрелке, начиная сверху). Помните, что задание ширины границы блока увеличивает ширину блока на заданное количество пикселей в Opera и Firefox, а в Internet Explorer рамка будет располагаться внутри блока.

Отступы снаружи блока задаются с помощью параметра margin и его разновидностей: margin-top, margin-right, margin-bottom и margin-left. Например, расстояния между абзацами лучше всего редактировать именно с помощью этого параметра. Отступы же внутри блока (от края до содержимого, что особенно видно при наличии границ у элемента) задаются параметром padding и его разновидностями: padding-top, padding-right, padding-bottom и padding-left.

Для таблиц можно не задавать стандартные параметры cellpadding, cellspacing и border средствами HTML: теперь все можно сделать с помощью CSS. Чтобы на стыке ячеек не получа-

Верстка

Лась рамка двойной толщины, а между самими ячейками не появлялось расстояние, пишем table {border-collapse:collapse}. Чтобы не было отступов содержимого внутри ячеек, пишем td {padding: 0px}. Само собой, чтобы рамки не было вообще, пишем table, td {border:0px}.

Элементы можно точно позиционировать. Для этого нужно задать параметр position:absolute и координаты (в пикселях или процентах): left (слева) и top (сверху) чаще всего, но иногда и right (справа) и bottom (снизу). Следует помнить, что на веб-страницах отсчет координат начинается в левом верхнем углу. Кроме того, можно задать ширину (width) и высоту (height) элемента. Если при абсолютном позиционировании несколько элементов накладываются друг на друга (то есть из-за близких координат одни блоки перекрываются другими), то выше остальных оказывается тот, который описан последним в коде либо тот, у которого параметр z-index больше. Так, при коде <div style="background-color:white; position: absolute; left:10px; top:10px; z-index:100">123</div> <div style="background-color:white; position:absolute; left:10px; top:10px; z-index:50">456</div> на веб-странице отобразится число 123. Позиционировать элементы можно также относительно друг друга: position:relative.

Элемент можно скрывать, если указать visibility:hidden (и отображать по visibility:visible). Это полезно для динамического управления видимостью элементов. При скрытии элемента место под него на веб-странице остается. Параметр же display удобнее тем, что позволяет не только скрывать элемент и уничтожать пространство, отведенное под него (display:none), но и умеет отображать один и тот же элемент и как блочный (display:block), и как линейный (display:inline). Делать видимой только часть блока позволяет параметр clip:rect(Y1 X1 Y2 X2) , где Y1, X1, Y2 и X2 — числовые параметры обрезки.

Если у элемента жестко заданы высота и (или) ширина, но содержимое не умещается в эти рамки, то уместным окажется элемент overflow (переполнение). При значении visible параметры высоты и ширины игнорируются: главным оказывается размер содержимого. В случае overflow:scroll в блоке принудительно появляются полосы прокрутки. При overflow:hidden содержимое, оставшееся за пределами блока заданных размеров, просто обрезается, а при overflow:auto полосы прокрутки появляются только при необходимости — последние два режима наиболее удобны. В некоторых браузерах также действуют параметры overflow-x и overflow-y.

Для элементов можно назначить отсутствие обтекания текстом с помощью параметра clear (значение both — с обеих сторон, right или left с правой или с левой стороны соответственно и none — с обте-

158

Канием текстом) либо наличие обтекания и одновременное выравнивание с помощью параметра float (значения left, right и none).

Кроме того, средствами CSS можно менять внешний вид маркеров списка (list-style — стиль маркеров списка, совмещенный параметр; list-style-image:URL(...) задает изображение в виде маркера списка; list-style-position — размещение маркера списка относительно текста, inside или outside, то есть внутри или вне текста; list-style-type — тип маркера: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none), полос прокрутки (не во всех браузерах) и курсоры (например, cursor: pointer задаст курсор в виде «руки», как над ссылкой, а cursor:help отобразит стандартный курсор для справочных материалов).

Этих несложных правил достаточно, чтобы правильно оформлять с помощью CSS большинство веб-страниц.

В заключение можно продемонстрировать небольшой трюк: как с помощью CSS-разметки можно кардинально изменить внешний вид HTML-разметки. Допустим, у нас есть HTML-код:

<ul class="nav"><li><a href="1.html">Index</a></ li><li><a href="2.html">About</a></li><li><a href="3. html">Our Tags</a></li><li><a href="4.html">Products</ a></li><li><a href="5.html">Credits</a></li></ul>

В том виде, который предлагают браузеры для отображения подобного кода, мы увидим столбец ссылок (поскольку есть элемент <a>), оформленный как маркированный список (элемент <ul>), слева от каждого из элементов списка располагается маркер, вид которого зависит от конкретного браузера — обычно это черный кружок.

Однако чуть выше мы можем расположить несколько CSS-правил, и мы увидим, насколько изменится внешний вид приведенного фрагмента.

* {

Font-size:9pt;

Font-family:Sans-Serif;

}

Ul. nav { display:block; margin:0; padding:0;

List-style-type:none;

}

Ul. nav li {

Background-color:#FFCC9 9; display:inline; padding:0px; margin:0px;

}

Ul. nav li a:link, ul. nav li a:visited, ul. nav li a:active {

Background-color:#FFCC9 9; padding:5px 15px 1px 15px; color:navy; text-decoration:none; border-bottom:2px solid #FFCC99;

}

Ul. nav li a:hover { background-color:#FFFFCC; padding:5px 15px 1px 15px; color:#CC0000; text-decoration:none; border-bottom:2px solid #CC0000;

}

</style>

Попробуйте протестировать в браузере сначала код без CSS, а потом — добавив таблицу стилей.

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

1. Произошло полное разделение содержания (точнее, так называемой бизнес-логики) и формы (внешнего оформления). Можно добавлять и изменять сколько угодно пунктов меню, не заботясь об их внешнем оформлении. И, напротив, вид всех пунктов меню сразу можно поменять, не редактируя само меню.

2. Если отключить таблицы стилей, вид меню изменится, но его логика не пострадает: меню просто станет списком ссылок, что вполне логично. Это особенно важно для альтернативных браузеров, например, на КПК.

3. Приведенный код работает во всех современных браузерах, а в старых даже при ошибках чтения CSS меню ссылок будет доступным.

Теперь одна особенность: чтобы в Internet Explorer не возникало паразитных пробелов, ухудшающих вид меню, пришлось HTML-код

Слить в одну строку. Так он стал менее читаемым, но все равно остался понятен, потому что не загроможден тэгами форматирования.

Теперь мы готовы к тому, чтобы выяснить основные различия в «верстке на таблицах» и «блочной верстке».

По ту сторону Веб-страницы

Словарь

Ботки. Обычно расширения состоят из трех букв (exe, gif, php, mov, bmp, eps, swf, asp, m3u, avi, rtf, txt, zip, cpp), но встречаются также двухбуквенные (js, ai) и четырехбуквенные (html, …

Справочник для внутреннего использования

Навигация есть признание того, что твоя страница далека от идеала. Ибо если бы она была близка к нему, зачем бы потребовалось покидать ее? А если ее не требуется покидать, зачем …

Алфавит от Google

Есть такая тестирующаяся поисковая подсистема от Google (Http://Www.Google.Com/Webhp?Complete=1&Hl=En), в которой по введенным первым буквам предлагаются наиболее часто запрашиваемые слова. Я собрал все первые (наиболее рейтинговые) слова на каждую букву русского …

Техминимум: как сейчас принято

По ту сторону Веб-страницы

Словарь

Справочник для внутреннего использования

Алфавит от Google

Новые и рекомендуемые материалы:

Производство и продажа хонинговального инструмента

Оборудование для производства краски

Теплообменники для паровых и водяных котлов

Станок для производства ТЕРИВА TERIVA (блоки перекрытия)

Оборудование для производства пенобетона

Расфасовка угля, торфа, кормов, оборудование для упаковки-дозирования

Паровые котлы на дровах, опилках

Где работают наши линии по производству пенобетона

Где работают наши линии по производству пенопласта

Малый бизнес

Производимое оборудование

Техническая литература

Как с нами связаться:

Контакты для заказов оборудования: