2.Понимание HTML

УЧЕБНЫЙ КУРС ПО HTML 1. ВВЕДЕНИЕ ........................................................................................................................................................................ 3 2. ПОНИМАНИЕ HTML ......................................................................................................................................................... 4 2.1 ПРЕДНАЗНАЧЕНИЕ И ЦЕЛИ СОВРЕМЕННОГО HTML ................................................................................................................................ 4 2.2 ДРЕВООБРАЗНАЯ СТРУКТУРА HTML .................................................................................................................................................... 5 2.3 ПОНЯТИЕ DTD ................................................................................................................................................................................. 11 2.4 ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА ....................................................................................................................................................... 12 2.5 СОДЕРЖАНИЕ И ОТОБРАЖЕНИЕ ......................................................................................................................................................... 14 2.6 ПРИМЕР СОВРЕМЕННОГО HTML ........................................................................................................................................................ 18 2.7 ПРИМЕР HTML СТАРОГО ТИПА .......................................................................................................................................................... 19 2.8 ВЫВОД ............................................................................................................................................................................................ 19 3. ИСПОЛЬЗУЕМЫЕ СРЕДСТВА И ПРОГРАММЫ ......................................................................................................... 21 3.1 РЕДАКТОР ДЛЯ HTML – ТЕКСТОВЫЙ РЕДАКТОР ................................................................................................................................... 21 3.2 РЕДАКТОР ДЛЯ CSS ......................................................................................................................................................................... 21 3.3 PHOTOSHOP ..................................................................................................................................................................................... 21 3.3.1 Настройка рабочего места в Photoshop ........................................................................................................ 21 3.3.2 Слои (Layers)....................................................................................................................................................... 22 3.3.3 Принятие решения: текст – картинка .......................................................................................................... 22 3.3.4 Формат изображений (GIF, JPEG, PNG) ......................................................................................................... 23 3.4 ВСПОМОГАТЕЛЬНЫЕ СРЕДСТВА.......................................................................................................................................................... 23 3.5 ПОЛЕЗНЫЕ PLUG-IN’Ы. ...................................................................................................................................................................... 24 3.5.1 Для Firefox (Mozilla)............................................................................................................................................. 24 3.5.2 Для Internet Explorer ........................................................................................................................................... 26 4. ОФОРМЛЕНИЕ ДОКУМЕНТОВ – КОРПОРАТИВНЫЙ СТИЛЬ ................................................................................. 27 4.1 ПРАВИЛА ИМЕНОВАНИЯ ПАПОК И ФАЙЛОВ ........................................................................................................................................... 27 4.2 ПРАВИЛА ДЛЯ HTML ........................................................................................................................................................................ 27 4.2.1 Отступы ............................................................................................................................................................ 27 4.2.2 Элементы и атрибуты .................................................................................................................................... 28 4.2.3 Переносы ............................................................................................................................................................ 28 4.2.4 Вставка специальных символов ...................................................................................................................... 29 4.2.5 Цвет .................................................................................................................................................................... 29 4.2.6 Комментарии ..................................................................................................................................................... 29 4.3 ПРАВИЛА ДЛЯ CSS ........................................................................................................................................................................... 30 4.4 ОСНОВНЫЕ ПРАВИЛА ДЛЯ JAVASCRIPT ............................................................................................................................................... 31 5. CASCADING STYLE SHEET ........................................................................................................................................... 33 5.1 НЕМНОГО О СТАНДАРТАХ................................................................................................................................................................... 33 5.2 СЕЛЕКТОРЫ ..................................................................................................................................................................................... 33 5.3 ПСЕВДОКЛАССЫ И ПСЕВДОЭЛЕМЕНТЫ ................................................................................................................................................ 35 5.4 ЕДИНИЦЫ ИЗМЕРЕНИЯ ...................................................................................................................................................................... 36 5.5 ОСНОВНЫЕ CSS-СВОЙСТВА ............................................................................................................................................................. 37 5.5.1 Свойства шрифта ............................................................................................................................................ 37 5.5.2 Свойства эффектов текста .......................................................................................................................... 39 5.5.3 Свойства выравнивания ................................................................................................................................... 39 5.5.4 Свойства переноса............................................................................................................................................ 39 5.5.5 Свойства фона .................................................................................................................................................. 40 5.5.6 Свойства цвета текста .................................................................................................................................. 41 5.5.7 Свойства границ элемента ............................................................................................................................. 41 5.5.8 Свойства обтекания ......................................................................................................................................... 42 5.5.9 Свойства внешнего отступа .......................................................................................................................... 42 5.5.10 Свойства внутреннего отступа .................................................................................................................. 42 5.5.11 Свойства таблицы.......................................................................................................................................... 43 5.5.12 Свойства отображения .................................................................................................................................. 44 5.5.13 Свойства размера ........................................................................................................................................... 44 5.5.14 Свойства позиции............................................................................................................................................ 44 5.5.15 Свойства переполнения ................................................................................................................................. 45 1 5.6 ПОРЯДОК ПРИМЕНЕНИЯ СТИЛЕЙ И ПРИОРИТЕТЫ ................................................................................................................................. 45 5.7 ОСНОВНЫЕ СПОСОБЫ ПЕРСОНАЛИЗАЦИИ СТИЛЕЙ ДЛЯ БРАУЗЕРОВ ....................................................................................................... 47 6. ПРАКТИЧЕСКАЯ ВЕРСТКА ........................................................................................................................................... 48 6.1 ОСНОВЫЕ ТЭГИ, ИСПОЛЬЗУЕМЫЕ ПРИ ВЕРСТКЕ HTML-ДОКУМЕНТОВ: ................................................................................................... 48 6.2 ОБЩИЕ ПРАВИЛА И РЕКОМЕНДАЦИИ ПРИ НАПИСАНИИ HTML/XHTML КОДА........................................................................................... 49 6.2.1 С чего начинается документ ........................................................................................................................... 50 6.2.2 Модели отображения блочных элементов .................................................................................................... 50 6.2.3 Заголовок документа ........................................................................................................................................ 52 6.2.4 Часто используемые элементы и атрибуты ............................................................................................... 55 6.2.5 Неиспользуемые или редко используемые элементы и атрибуты ............................................................ 57 6.2.6 Отступы ............................................................................................................................................................ 58 6.3 ПРОВЕРКА ДОКУМЕНТОВ НА СООТВЕТСТВИЕ СПЕЦИФИКАЦИЯМ ............................................................................................................. 59 6.4 ОСНОВНЫЕ ВИДЫ LAYOUT ВЕБ-СТРАНИЦ ............................................................................................................................................ 61 6.5 ОСНОВНЫЕ ЭЛЕМЕНТЫ СТРАНИЦ: ЛОГОТИП, МЕНЮ, ТАБЫ, ФОРМЫ; ПРИМЕНЕНИЕ ГОТОВЫХ JS РЕШЕНИЙ ................................................ 70 6.5.1 Логотип .............................................................................................................................................................. 70 6.5.2 Меню .................................................................................................................................................................... 72 6.5.3 Табы..................................................................................................................................................................... 76 6.5.4 Формы.................................................................................................................................................................. 79 6.6 СПОСОБЫ ИСПОЛЬЗОВАНИЯ PNG, В ТОМ ЧИСЛЕ ДЛЯ ОТОБРАЖЕНИЯ ТЕНЕЙ ......................................................................................... 83 6.7 СПОСОБЫ И ОСОБЕННОСТИ СОЗДАНИЯ СТРАНИЦ С ИЗМЕНЯЕМЫМ РАЗМЕРОМ ШРИФТА ........................................................................... 85 6.8 СОЗДАНИЕ СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ EM ДЛЯ УКАЗАНИЯ РАЗМЕРОВ ЭЛЕМЕНТОВ СТРАНИЦЫ ............................................................ 86 6.9 ОСОБЕННОСТИ ТАБЛИЧНОЙ ВЕРСТКИ ................................................................................................................................................. 86 6.10 СОЗДАНИЕ EMAIL-ШАБЛОНОВ ........................................................................................................................................................... 87 6.11 ОСОБЕННОСТИ СОЗДАНИЯ ПРИНТ-ВЕРСИИ СТРАНИЦЫ ....................................................................................................................... 87 6.12 ОСОБЕННОСТИ СОЗДАНИЯ СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ ПРАВОСТОРОННЕГО ВВОДА ТЕКСТА (АРАБСКИЙ, ИВРИТ И Т.П.) ....................... 89 7. ОПТИМИЗАЦИЯ КОДА ДЛЯ ПОИСКОВЫХ СИСТЕМ И СТАНДАРТЫ ДОСТУПНОСТИ (ИСПОЛЬЗОВАНИЕ НУЖНЫХ ТЕГОВ, НЕИСПОЛЬЗОВАНИЕ УСТАРЕВШИХ ТЕГОВ) ............................................................................... 90 8. ЗАКЛЮЧЕНИЕ ................................................................................................................................................................. 94 9. ПРИЛОЖЕНИЕ ................................................................................................................................................................ 95 9.1 ТАБЛИЦА ПОДДЕРЖКИ EMAIL-КЛИЕНТАМИ СВОЙСТВ CSS. .................................................................................................................... 95 9.2 КРАТКАЯ ТАБЛИЦА CSS- ФИЛЬТРОВ. ................................................................................................................................................. 99 2 1.ВВЕДЕНИЕ Данное учебное пособие предназначено для повышения уровня знаний читателя в области создания HTML-документов. Оно состоит, главным образом, из обзора и обобщения основных тем, касающихся веб-разработки клиентской части приложений. Это не справочник, а скорее некий путеводитель, позволяющий новичку или более опытному пользователю усвоить главные принципы разработки HTML/XHTML документов. Фактически, здесь упомянуто все, о чем должен знать каждый профессиональный HTML-верстальщик. Причиной появления данного учебного пособия является разноуровневая подготовка людей, претендующих на должность профессионального HTML-верстальщика а также отсутствие централизованно изложенных главных принципов создания веб-страниц, которые бы отвечали современным требованиям веб-разработки. Цель этой работы – минимальным и кратчайшим путем достичь уровня, необходимого для нормальной работы в качестве веб-разработчика. Работая с данным учебным пособием читателю также придется почерпнуть некоторые базовые знания HTML из других источников, например из справочника по HTML. Работа будет более эффективна, если вы уже знакомы с базовыми понятиями HTML. Касательно терминов, следует отметить, что в данной работе часто встречается слово «браузер». Здесь и далее под «браузером» следует понимать известные браузеры, а также другие клиентские программы доступа в Интернет (user agents). Под «строгим дизайном» понимается профессионально выполненный дизайн веб-страницы, реализация которого подразумевает позиционирование элементов с точностью до одного пикселя, а также четкое соответствие цветов и размера шрифтов для текста, ссылок и пр. Все, что здесь описано для HTML, в равной степени касается и XHTML. 3 2.ПОНИМАНИЕ HTML Ни для кого не секрет, что каждый человек имеет свою точку зрения на все, что его окружает. Соответственно, и HTML тоже каждый может понимать по-разному. Данная глава поможет обрести наиболее прагматичное представление о том, что же представляет собой этот язык разметки и чем он является. Впоследствии, такое видение HTML будет, безусловно, полезным не только при верстке веб-страниц, но и при программировании на JavaScript. 2.1Предназначение и цели современного HTML В условиях стремительного развития технологий, целью современного HTML, на текущий момент, являются как минимум две задачи. Во-первых – это правильное отображение веб-страницы в браузере, а во-вторых – возможность правильного ее индексирования поисковыми системами. Остановимся, и рассмотрим каждую из этих задач более подробно. Отображение веб-страницы в браузере с помощью языка разметки HTML является его основной задачей, для которой, собственно, он и был создан. Изначальной идеей также было связывание этих страниц между собой с помощью гиперссылок. Отсюда и происходит его название – HyperText Markup Language, что означает – язык разметки гипертекста. Он стал языком передачи визуальной информации – текста и изображений – по каналам связи Интернет, при помощи специального протокола передачи данных. Этот протокол имеет название HTTP и является является аббревиатурой от HyperText Transport Protocol – протокол передачи гипертекста. Таким образом, HTML стал связующим звеном между человеком, генерирующим идею – визуальную информацию, и человеком, который эту информацию получает – пользователем Интернет. С течением времени, количество пользователей Интернет увеличивалось, росло также и количество веб-сайтов. Появилась новая задача, которая требовала немедленного решения – дать возможность людям находить нужную им информацию и делать это как можно проще. Поисковые серверы взяли на себя эту ответственность и предлагали пользователям то, что они ищут доступным и простым способом – поиском по ключевому слову. Помимо такого поиска они также предлагают информацию, сгруппированную по каталогам, но, согласитесь, невозможно внести все обилие Интернет ресурсов в один даже самый что ни на есть изощренный каталог. У таких систем должен был быть способ добычи информации из сети, и этот способ был найден. По аналогии с человеком, без устали просматривающим страницу за страницей, владельцы поисковых систем придумали поисковых роботов – программы, которые проходят страницы, одну за другой, добывая информацию и собирая ее в базу данных сервера. Но робот – это не человек, он не воспринимает информацию визуально как мы – с браузера. Все, что ему доступно, это все тот же HTML-код страницы, но не интерпретированный браузером в красивую и цветную картинку, а в его чистом виде – никаких изображений – только текст, разделенный тегами*. Теперь можно догадаться, что чем более простым и понятным будет ваш HTML-код для поискового робота, тем больше у вас есть шансов попасть в нужную ячейку базы данных поискового сервера, а соответственно и в результат поиска для человека, жаждущего найти информацию, находящуюся именно на вашем сайте! Это и есть вторая задача HTML. Но это еще не все. Хорошим следствием правильно оформленного, простого и понятного HTML-кода является доступность той информации, которую он в себе несет. А в этом есть огромная необходимость в современном мире. Под доступностью (англ. accessibility) следует понимать возможность правильной передачи информации на самые различные устройства от персональных компьютеров до различных мобильных устройств, включая карманные компьютеры и мобильные телефоны. В это понятие также входит возможность просмотра страниц для людей с ограниченными способностями, например для людей с плохим зрением. В эволюции Интернет следует отметить еще один очень важный момент. По мере его развития, также развивались и компании-разработчики браузеров, т.е. программ просмотра HTML-страниц. Одни брау4 зеры приходили на смену другим, общее их количество росло, количество их различных версий также увеличивалось. И все бы ничего, но каждый браузер имеет свои характерные особенности реализации (существует такая неизбежная особенность в мире программирования). Как следствие, одни и те же HTML-документы в разных браузерах отображались по-разному. Эта разница была невелика, но она сильно мешала разработчикам. Казалось, что создать веб-страницу одинаково отображающуюся в разных браузерах было уже практически невозможно. Царил хаос, когда каждая компания-разработчик предлагала свои уникальные и характерные только для их браузера особенности, выставляя их как изюминку маркетинговой политики, пытаясь завоевать безграничный рынок Интернет. По этой и по множеству других причин, крупные компании, имеющие отношение к информационным технологиям, решили создать организацию, которая бы следила за четким соблюдением общепринятых стандартов и правил, и что самое главное, сама бы эти стандарты пропагандировала. Так был создан консорциум всемирной паутины WWW – W3 Consortium, или сокращенно W3C. Сейчас, что бы ни делалось для Интернет, должно соответствовать стандартам W3C, и это правильно. Именно эти стандарты предусматривают правила создания HTML-документов, их доступность, четкое разделение в них смысловой нагрузки от отображения, а также многое другое. W3C положил конец хаосу, и вместо разделения и разобщения пользователей и разработчиков, он стал их объединять! Как видите, двойственная задача HTML оправдывает себя, предлагая ряд преимуществ. Но это также предполагает дополнительную ответственность на веб-разработчиков, которые должны прилагать больше усилий при создании документов. Так что если кто-то считает, что HTML это пустяковое дело, то он ошибается. Создание правильных и доступных веб-документов – это целое искусство! 2.2Древообразная структура HTML Прежде чем мы начнем детально, кирпичик за кирпичиком, разбирать тонкости HTML, я позволю себе немного отклониться в сторону, и рассмотреть базовые концепции не менее известного языка разметки – XML. Причина этого проста. XML появился позже и, стало быть, он больше соответствует требованиям современного мира. Нам будет проще понять тенденцию развития HTML, который, между прочим, сейчас от XML практически неотличим. HTML даже имеет свое новое имя, чтобы подчеркнуть степень своего родства с XML – это XHTML. Основная идея, которую хотелось бы рассмотреть, это то, что XML, как и HTML – это дерево. Они имеют древообразную структуру с одним корневым элементом и множеством других, ответвляющихся от него. Точно так же как дерево имеет корень, ствол и листья – веб-документ имеет свои различные типы узлов – элементы, текстовые узлы, узлы комментариев и другие. Рассмотрим их более детально. Ниже приведен список типов узлов XML. 1. Document – Документ 2. DocumentFragment – Фрагмент Документа 3. DocumentType – Тип Документа 4. ProcessingInstruction – Исполняемая Инструкция 5. EntityReference – Ссылка на сущность 6. Element – Элемент 7. Attr – Атрибут 8. Text – Текст 9. CDATASection – Необрабатываемая Секция 5 10. Comment – Комментарий 11. Entity – Сущность 12. Notation – Нотация Всего существует 12 типов узлов. Мы не будем рассматривать их все, а ограничимся только лишь самыми значимыми из них – это Document, DocumentType, Element, Attr, Text, Comment и EntityReference. Рассмотрим примеры этих узлов. Document – это узел, который объединяет в себе все остальные узлы XML-дерева. Он является корневым узлом документа. Узел Document не может содержать внутри себя другой узел Document, и он никак не выражается символьным представлением в XML и HTML, в отличие от остальных узлов. Другими словами, не смотря на то, что этот узел вполне реален, и является основой всех остальных узлов, проявляет он себя неявно, в виде логической группы других узлов, о которых мы сейчас и поговорим. Рассмотрим пример самого простого узла типа Element. Узел типа Element <div /> div – это имя элемента. Обратите внимание, что, например, div и DIV – это разные элементы, точно также как Div, DiV и т.д. Согласно спецификации XML, имя элемента чувствительно к регистру символов. Как показано в примере, XML элемент может быть представлен в виде его имени, выделенного угловыми скобками. Косая черта перед закрывающей скобкой означает, что это одиночный элемент, который не содержит дочерние узлы. Этот же элемент может быть представлен в следующем виде: Узел типа Element <div></div> Такая запись элемента означает то же самое, что и предыдущий пример, с той лишь разницей, что здесь явно присутствует как открывающая составляющая элемента <div> так и закрывающая – </div>. Согласно спецификации XML все элементы документа должны быть закрыты, в то время как спецификация HTML (но не XHTML!) допускает существование незакрытых элементов. Открывающая и закрывающая составные части элемента называются тегами. Различают открывающий тег и закрывающий тег. Таким образом, понятие тега неразрывно связано с понятием элемента. Имена открывающего и закрывающего тегов должны точно совпадать. Приведенный ниже пример считается неправильным, потому, открывающий и закрывающий теги не совпадают. Неправильный элемент <div></DIV> Элемент может содержать внутри себя другие узлы, как например текст или другие элементы. Пример элемента, внутри которого содержится текст, приведен ниже. Узел типа Text внутри элемента div <div>Lorem ipsum</div> Здесь «Lorem ipsum*» это текст, а точнее текстовый узел, или узел типа Text. Текстовый узел в XML и HTML выражается в виде самой обычной строки текста. Рассмотрим следующий пример: Элемент и атрибут <div class=”box”>Lorem ipsum</div> В этом примере, помимо дочернего текстового узла, элемент div также имеет атрибут. class – это имя атрибута, а «box» – его значение. 6 По аналогии с именем элемента, имя атрибута также чувствительно к регистру символов. Значение атрибута всегда приводится в кавычках после знака равенства. Таковы требования XML. В HTML знаки кавычек были необязательны. Однако это правило не относится к XHTML документам, где символы кавычек обязательны, как и в XML. Напомню, что XHTML полностью подчиняется правилам XML. Следующий пример считается неправильным, потому, что в нем значение атрибута не взято в кавычки: Неправильный атрибут <div class=box>Lorem ipsum</div> Любое дерево – это иерархия узлов. В дереве одни узлы входят в состав других узлов, и так бесконечное количество раз. Иерархия узлов легко может быть представлена с помощью открывающихся и закрывающихся тегов. Рассмотрим следующий пример и постараемся понять смысл тегов в отображении иерархической структуры документа. Иерархия узлов <div class=”box”><strong>Lorem ipsum</strong></div> В этом примере четко отображена зависимость элементов между собой. Элемент div имеет атрибут class и содержит внутри себя элемент strong, который в свою очередь имеет в своем составе текстовый узел со значением «Lorem ipsum». Следующий пример не отображает строгую иерархию узлов документа, а стало быть, считается неправильным: Неправильная структура узлов <div class=”box”><strong>Lorem ipsum</div></strong> Этот код неправильный потому, что после открывающегося элемента strong следует закрывающая составляющая элемента div, а это нарушает обычный порядок их вложенности. Элементы, атрибуты и текст – самые часто встречаемые узлы в XML и XHTML документах. Теперь давайте рассмотрим вспомогательные типы узлов: DocumentType, Comment и EntityReference. Самый простой из них – это комментарий (Comment). Его предназначение очевидно. Это узел, который несет дополнительную информацию о документе и его содержимом. Пример узла комментария приведен ниже: Узел типа Comment  Узел комментария начинается с символов «». Все, что находится внутри этой комбинации символов, является значением этого узла. Узел EntityReference мы не будем рассматривать во всех его подробностях, а остановимся лишь на тех аспектах, которые непосредственно связаны с XHTML. Все такие узлы начинаются со знака «&» и заканчиваются символом «;». Примеры таких узлов приведены ниже: 7 Узлы типа EntityReference & <   ©    Для простоты такие узлы следует рассматривать исключительно с точки зрения заменяемых объектов. С их помощью, например, выводятся различные специальные символы, вроде знака авторского права «©» – © или амперсанда «&» – &. Спецификация XML определяет пять значений EntityReference – &,<, >, " и ', которые соответствуют символам «&», «<», «>», «”» и «’». В свою очередь, спецификация XHTML дополняет этот список такими значениями как   (неразрываемый символ пробела), © (знак авторского права) и множеством других. Узлы EntityReference тесно связаны с текстовыми узлами. Ниже приведен пример использования такого узла в фрагменте XHTML-кода: Фрагмент XHTML <p>© 2007 Company Name</p> В браузере подобный фрагмент будет отображен следующим образом: Пример отображения узла EntityReference с текстовым узлом © 2007 Company Name Вернемся к древообразной структуре документа. Как мы уже знаем, корневым узлом XML-дерева является Document. Согласно спецификации XML, его дочерними элементами могут быть такие узлы как DocumentType, Comment, ProcessingInstruction и Element. При этом, Element в данном случае, может быть только один, и называется он корневым элементом документа. Другими словами, может существовать только один дочерний узел типа Element у узла типа Document. Именно с корневого элемента удобнее всего рассматривать древообразную структуру документа, а не с узла Document. Рассмотрим пример простейшего XML-документа: Простейший XML-документ <root /> Здесь мы имеем один элемент root в документе, что не противоречит правилам XML. Для того чтобы было понятно, что это именно XML-документ, а не произвольный текстовый файл, в начале такого документа принято добавлять заголовок следующего вида: XML-документ с заголовком <?xml version=”1.0”?> <root /> Странная запись перед элементом root является ни чем иным как узлом типа ProcessingInstruction, который говорит о том, что мы имеем дело с XML-документом, отвечающим спецификации XML версии 1.0. Подробное рассмотрение узлов ProcessingInstruction выходит за рамки данной книги, поэтому мы не будем на этом останавливаться. Достаточно сказать, что такие узлы начинаются с комбинации символов «<?» и заканчиваются «?>». Добавим комментарий и несколько вложенных узлов к нашему документу: 8 Пример XML-документа <?xml version=”1.0”?>  <root> <first-element>Первый текстовый фрагмент</first-element> <second-element>Второй текстовый фрагмент</second-element> </root> Документ несколько преобразился. Теперь он имеет узел ProcessingInstruction, узел Comment, корневой элемент и несколько вложенных элементов и текстовых узлов. Согласно спецификации XML, количество вложенных внутри корневого элемента узлов можно увеличивать до бесконечности. А их последовательность также может быть произвольной. Но нужен ли кому-нибудь подобный беспорядок? Ведь любой документ, будь то веб-документ или любой другой документ, с которым нам обычно приходится иметь дело, всегда должен отвечать каким-то правилам. Например, после заголовка раздела книги не может идти ее аннотация, а после оглавления не может идти заключение. Сходным образом каждый веб-документ тоже подчиняется определенным правилам. Множество наборов таких правил определяет множество разных типов документов. Такой набор правил получил название DTD, что является аббревиатурой от Document Type Definition. Более подробно об этом термине мы поговорим в следующем разделе, который посвящен ознакомлению с языком описания схемы документа. Сейчас же рассмотрим следующий очень важный узел XML-дерева. Для того чтобы отличать один тип документа от другого, существует специальный узел типа DocumentType. Его запись весьма специфична. Ниже приведены допустимые конструкции таких узлов: Конструкции узлов DocumentType <!DOCTYPE имя_корневого_элемента [DTD]> <!DOCTYPE имя_корневого_элемента SYSTEM URL> <!DOCTYPE имя_корневого_элемента SYSTEM URL [DTD]> <!DOCTYPE имя_корневого_элемента PUBLIC идентификатор URL> <!DOCTYPE имя_корневого_элемента PUBLIC идентификатор URL [DTD]> Здесь URL – это путь на внешний файл DTD, а DTD – непосредственное описание правил для документа, выделенное квадратными скобками. Давайте добавим узел DocumentType в наш XML-документ: Пример XML-документа с объявлением DOCTYPE <?xml version=”1.0”?>  <!DOCTYPE root SYSTEM ”example.dtd”> <root> <first-element>Первый текстовый фрагмент</first-element> <second-element>Второй текстовый фрагмент</second-element> </root> Под такой записью следует понимать, что данный XML-документ, соответствует (или точнее должен соответствовать, но об этом позже) набору правил, описанных в некотором файле example.dtd. XHTML является подмножеством XML. XHTML – это XML документ, который соответствует некоторому набору правил описанных при помощи DTD. 9 Корневым элементом XHTML всегда является элемент с именем html, потому, что это описано в его DTD. DTD определяет структуру этого документа. Это было также сделано по причине максимальной поддержки совместимости XHTML с HTML, у которого html также является корневым элементом. Дело в том, что XHTML это на самом деле HTML перекочевавший в сторону XML. Он содержит в себе практически все, чем обладал HTML, но делает это в соответствии с более строгими правилами XML, среди которых уже рассмотренные нами обязательное заключение значений атрибутов в кавычки, чувствительность имен к регистру символов и другие. Спецификация XHTML версии 1.0 предусматривает три вида документов. Это Strict, Transitional и Frameset. Каждому из этих типов соответствует свой DTD и каждый из них имеет свои особенности и свое предназначение. Strict обычно используется для получения наиболее «прозрачной» и понятной структуры документа, не загрязняя его лишними тегами и атрибутами, относящимися к отображению. Предполагается, что все нужные для страницы правила отображения и позиционирования элементов должны быть описаны в CSS (Cascading Style Sheet – каскадная таблица стилей), в то время как в документе фигурирует только его логическая структура. Об этом мы еще будем говорить более подробно. Transitional – в настоящий момент наиболее часто встречаемый вид XHTML. Идея его создания была в сохранении многих свойств HTML, а также в поддержке старых браузеров, которые понимают не все свойства CSS. Это своего рода переходный вид старого типа HTML-документов в новый. Со временем этот вид документов наверняка будет вытеснен документами Strict, или более новыми версиями XHTML. Что касается Frameset, то из названия должно быть понятно, что этот вид XHTML предназначен для описания документов, содержащих набор фреймов – элементов frameset и frame, которые разделяют страницу на некие прямоугольные области (фреймы), внутри каждой из которых живет отдельный документ любого типа. По умолчанию, окно браузера можно считать одним фреймом, поскольку в него может быть загружен один (и только один) документ. Объявления DOCTYPE для вышеперечисленных типов XHTML-документов приведены ниже. XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Если схематически представить древообразную структуру документа, точнее его часть, например для XHTML 1.0 Strict и XHTML 1.0 Frameset, то мы получим что-то наподобие таких вот рисунков, где пунктиром обозначены необязательные элементы: 10 Как видно из схемы, XHTML документ имеет один корневой элемент – html. Далее, в зависимости от типа документа, этот элемент содержит либо элементы head и body, либо элементы head и frameset. В свою очередь, элемент head имеет обязательный элемент title и необязательные элементы meta, style, и т.д. Структура документа должна строго соответствовать его типу, объявленному при помощи DOCTYPE. Как мы уже говорили, правила определяющие структуру документа, описаны в DTD. 2.3Понятие DTD DTD (аббревиатура от Document Type Definition) – это язык описания структуры XML-документа. По своей сути этот язык предельно прост. Он описывает то, какие элементы могут входить в состав данного документа, какие из них могут иметь дочерние узлы, а какие нет, какие атрибуты может иметь тот или иной элемент и т.д. Детальное изучение DTD на данном этапе обучения не имеет смысла, достаточно будет поверхностно ознакомиться с этим языком. Рассмотрим некоторые фрагменты DTD из http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd, который является сводом правил для документов XHTML 1.0 Strict. Фрагмент DTD из xhtml1-strict.dtd <!ELEMENT html (head, body)> Этот фрагмент DTD говорит о том, что внутри элемента html должен быть один, и только один, элемент head и один элемент body, причем сначала должен идти head, а затем body. Фрагмент DTD из xhtml1-strict.dtd <!ELEMENT title (#PCDATA)> Эта запись говорит, что внутри элемента title может быть только текст, и ничего больше. Никакие другие элементы внутри него не допускаются. 11 Фрагмент DTD из xhtml1-strict.dtd <!ENTITY % heading "h1|h2|h3|h4|h5|h6"> <!ENTITY % lists "ul | ol | dl"> <!ENTITY % blocktext "pre | hr | blockquote | address"> <!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table"> <!ENTITY % misc.inline "ins | del | script"> <!ENTITY % misc "noscript | %misc.inline;"> <!ENTITY % form.content "(%block; | %misc;)*"> <!ELEMENT form %form.content;> А, например, этот фрагмент, или точнее несколько фрагментов, говорит о том, что элемент form не может иметь непосредственно дочерние элементы input, select, textarea и label*. Необязательно понимать синтаксис DTD, важно понять его смысл. Думаю нетрудно оценить его роль и важность в создании веб-документов. Наверняка сейчас у многих читателей возникает вопрос – а кто следит за соответствием того или иного документа его типу? Ответ вас не удивит – все тот же WWW-консорциум. Только он не следит, а помогает сделать документ правильным, предоставляя разработчикам средство проверки документов на соответствие их спецификации. Такое средство среди разработчиков называется «валидатором», от англ. valid, что означает «правильный», соответствующий своему типу. Наиболее известный онлайнвалидатор HTML-кода находится по адресу http://validator.w3.org По некоторым причинам, в числе которых отсутствие типизации узлов и отличный от XML синтаксис, DTD постепенно уходит в прошлое, вытесняемый новым языком описания структуры документов. Его альтернативой с более широкими возможностями является XML Schema, который появился несколько позже и который имеет в своем арсенале более мощные средства определения типа документов. Его мы рассматривать не будем. 2.4Объектная модель документа Все, что мы рассмотрели о древообразной структуре XML и HTML до настоящего момента, именуется объектной моделью документа – Document Object Model (DOM). Кроме описания логической структуры объектная модель документа также предоставляет объектноориентированный, платформенно-независимый программный интерфейс – API (Application Programming Interface), который позволяет программно управлять структурой, содержанием и отображением HTML-документов. Изначально различные браузеры имели собственную модель DOM, не совместимую с остальными. Для того чтобы обеспечить взаимную и обратную совместимость, консорциум W3C классифицировал эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в одну общую группу, под названием W3C DOM. Как вы уже наверняка заметили, каждый узел дерева имеет свой тип, имя и значение. Тип есть у всех узлов, а вот имя или значение для некоторых типов узлов не имеет смысла. Какое имя должен иметь текстовый узел? Или какое значение должно быть у элемента? Чтобы частично решить эту проблему, W3C предложили использовать предопределенные и постоянные имена для узлов типа Text, Comment, Document, DocumentFragment и CDATASection. Например, именем любого текстового узла является «#text», а любого комментария – «#comment». Что касается значений, то они для некоторых узлов остаются неопределенными, со значением null. Ниже приведена таблица всех двенадцати типов узлов, их имен и значений. 12 Таблица 1 – Типы узлов DOM, их имена и значения Тип узла Имя узла Значение узла #document null #document fragment null DocumentType Имя DOCTYPE null EntityReference Имя ссылки на сущность null Element Имя элемента null Attr Имя атрибута Значение атрибута Цель инструкции Содержимое узла #comment Текст комментария #text Содержимое узла CDATASection #cdata-section Содержимое узла Entity Имя сущности null Имя нотации null Document DocumentFragment ProcessingInstruction Comment Text Notation Программный интерфейс DOM представляет собой предопределенный набор объектов, их свойств и методов. Например, в JavaScript, объектом, который соответствует узлу типа документ, является document. Каждый объект узла имеет свойства nodeType, nodeName и nodeValue, с помощью которых можно узнать какого типа является данный узел, а также каково его имя и значение, соответственно. Манипулируя свойствами объектов-узлов можно не только определять их значения, но и изменять их. Причем каждое такое действие моментально повлияет на отображение этого объекта в браузере. Подобные манипуляции с объектной моделью документа также имеют название DHTML, сокращенно от Dynamic HTML. Подводя итог вышесказанному, можно сделать вывод, что существует документ, структура которого подобна дереву. Это дерево состоит из узлов, которые взаимосвязаны между собой иерархической структурой. Структура дерева подчиняется некоторым правилам согласно типу документа. Таково логическое представление HTML. С другой стороны об HTML мы знаем как о некотором текстовом документе, содержащем смысловое наполнение и разметку в виде тегов. Возникает вопрос, каким же образом осуществляется переход между одной моделью в другую? Ответ состоит как минимум из двух утверждений. Во-первых, для веб-разработчика обе модели должны быть единым целым. Такой переход от одного к другому должен постоянно работать в сознании человека, работающего с HTML. Необходимо понимать, что HTML в виде текста и разметки это всего лишь его представление, проявление его логической древообразной структуры в структуру текстового файла. Во-вторых, существует программный переход от текстового представления HTML в его двойник – DOM, в виде структуры объектов. Такой переход делается каждый раз браузером, когда тот пытается обработать полученный документ и отобразить его. Этот процесс преобразования называется parsing. Существует и обратный переход от древообразной логической структуры документа в его текстовый эквивалент. Такое, например, происходит каждый раз при получении свойства innerHTML у элемента, только в этом случае мы видим не весь документ, а только его часть. Аналогичный процесс происходит при попытке сохранить на диске загруженный документ браузером Internet Explorer. После того, как браузер обработал текстовый HTML-документ и построил DOM, он его отображает на экране. Однако не все узлы дерева имеют свое визуальное представление. Такие узлы как, например, Comment, не отображаются и отображаться не должны. Те же правила работают для узлов Document, DocumentType и для большинства узлов типа Attr. Что же касается Element, EntityReference и Text, то они могут отображаться в самых немыслимых формах, в зависимости от примененных к ним свойств отображения или так называемых стилей. Эти свойства отображения описываются при помощи CSS, и 13 могут фигурировать как во внешнем CSS-файле, так и внутри HTML-документа в отдельной секции стилей или в качестве значения атрибута style. Согласно спецификациям HTML 4.01 и XHTML 1.0 Transitional существуют также специальные атрибуты, отвечающие исключительно за отображение элемента и его содержимого. Сейчас мы подошли к очень серьезному вопросу – о границе разделения между содержанием HTMLдокумента и его отображением. Этот вопрос является камнем преткновения HTML-документов старого типа. Давайте рассмотрим эту тему более подробно. 2.5Содержание и отображение Для большинства людей вид документа, включая используемые в нем цвета, шрифты, отступы и пр. – является не менее значимым, чем текстовое содержание документа. Однако, как уже было сказано в самом начале этой главы, HTML должен отражать только семантическую структуру документа, и такой подход не предполагает включение в него какой бы то ни было информации об отображении. Напротив, все, что касается форматирования и отображения должно быть вынесено во вне, т.е. во внешний CSS-файл. HTML-код должен быть максимально «прозрачен» по своему содержанию, и не должен содержать элементы и атрибуты, ответственные за стиль отображения. Все это обусловлено требованиями спецификаций W3C, а также необходимостью соответствия стандартам доступности (accessibility). С точки зрения семантики, главной целью HTML является необходимость отделить одни смысловые элементы от других, например, отделить заголовок от параграфа, гиперссылку от изображения. Помимо этого теги должны описывать характер содержащейся в них информации. Они несут в себе метаданные, т.е. информацию об информации. Значение одного и того же текстового фрагмента может быть иным в зависимости от того, какими тегами этот текст выделен. Например, текст внутри тега заголовка h1 и тот же текст внутри тега p будут иметь совершенно различный смысл. В первом случае это заголовок, а во втором – текст параграфа. Используя метаданные, любой человек, знающий HTML, сможет без труда определить, где в документе заголовок, где параграф, где элемент списка, а где ссылка на другой документ. И это вне зависимости от того, на каком языке этот документ составлен! И раз уж это настолько просто и очевидно, тоже самое сможет сделать и поисковый робот, а это, как уже обсуждалось выше, одно из немаловажных свойств современного HTML-кода. Говоря об отображении, следует подчеркнуть, что практически каждый элемент имеет свой стиль отображения по умолчанию, который более-менее одинаков в различных браузерах. Например, элемент заголовка h1 обычно отображается крупным жирным шрифтом. Элемент strong – жирный шрифт нормального размера, а em – это курсив. Элемент a (гиперссылка) – как правило, это синий подчеркнутый текст. Помимо этого элементы также делятся на строчные и блочные. Они также могут характеризоваться наличием картинки фона, толщиной и цветом рамки, внутренними и внешними отступами, относительным или абсолютным позиционированием и т.д. Любые свойства отображения элементов могут быть переопределены при помощи CSS. Это может быть сделано таким образом, что одни элементы становятся похожими на другие, приобретая самые различные формы. CSS-стили применимы к любому элементу, кроме элементов, которые не отображаются. К неотображаемым элементам относятся элементы head, meta, link, script, style, и другие. Некоторые элементы, как например ul, li и table, в дополнение к общим свойствам также имеют свои специфические, характерные только для них свойства. С точки зрения CSS, каждый отображаемый элемент – это кирпичик, которому можно придать любую форму для того, чтобы он вписался в общий фасад строения документа. И это вне зависимости от того, какую смысловую нагрузку несет в себе тот или иной элемент. Визуальное пространство дизайна весьма обширно, и оно далеко не всегда созвучно строгой семантике HTML-кода внутри. Поэтому, отображение документа и его внутренняя структура – это две стороны одной медали. Вместе они составляют единое целое. Теперь, несложно догадаться, что именно к CSS прилагаются основные усилия веб-разработчика при создании веб-страниц. Именно от CSS зависит выполнение основной задачи – правильное отображе14 ние документа в различных браузерах. В процессе разработки документа CSS-код становится все более сложным, в то время как HTML-код остается предельно простым. Возвращаясь к структуре документа, не лишним будет отметить, что чем проще документ, тем проще с ним работать в дальнейшем. И напротив, если документ перегружен элементами форматирования и атрибутами стилей, то с таким документом работать гораздо тяжелее, и такой документ труднее поддается изменениям. Рассмотрим пример. Зачастую, при перечислении табличных данных следует поочередным образом подсвечивать строки для того, чтобы информация одной строки не сливалась с информацией другой строки. HTML позволяет определить цвет фона для строки таблицы при помощи атрибута bgcolor. Используя этот атрибут, получаем следующий фрагмент кода: Определение цвета фона для строк таблицы с помощью атрибута bgcolor <table> <tr bgcolor="#FFFFEE"> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr bgcolor="#FFFFEE"> <td>cell 1</td> <td>cell 2</td> </tr> . . . </table> Элемент table определяет таблицу. Элемент tr – это строка таблицы, и, соответственно, td – ячейка таблицы, в которой обычно находятся табличные данные. Наличие атрибута bgcolor в строке, означает, что вся строка будет подсвечена цветом, заданным в качестве значения этого атрибута. Если нам необходимо изменить цвет подсветки, то сделать это придется для каждой строки с атрибутом bgcolor. А если в таблице больше сотни строк? Автозамена в текстовом редакторе? А если на сайте сотня страниц с таблицами? А если этот цвет еще где-нибудь присутствует на страницах, а изменять его не нужно? Недостаток очевиден. И наконец, цвет фона строки, т.е. нечто, касающееся отображения, присутствует в HTML-коде страницы и противоречит современным требованиям документа. Для поисковых систем запись bgcolor=”#FFFFEE” не несет никакой смысловой нагрузки, для них это «мусор», информация, не имеющая никакой пользы. Для того чтобы исправить ситуацию, информацию об отображении элемента следует вынести в CSS. 15 Правильная запись для подсветки строк таблицы <table> <tr class="odd"> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr class="odd"> <td>cell 1</td> <td>cell 2</td> </tr> . . . </table> CSS с определением цвета фона для строки таблицы tr.odd { background: #FFFFEE; } Значение CSS свойства background, указанное после двоеточия – это и есть цвет подсветки. Запись tr.odd означает, что перечисленные свойства отображения будут применены ко всем элементам tr, у которых значение атрибута class равно «odd». В терминах CSS, эта запись называется селектором, а odd – классом элемента. Применение классов CSS позволит не только легко манипулировать цветом подсветки, но и добавить другие стили в случае необходимости. При использовании классов CSS, любые изменения свойств отображения подсвечиваемой строки можно сделать в считанные секунды. Например, если вдруг, нам понадобится изменить цвет текста этой строки, то это легко может быть выполнено следующим образом: CSS с определением стилей для строки таблицы tr.odd { background: #FFFFEE; color: #B60000; } Нужный цвет был добавлен при помощи свойства отображения CSS – color. Следует также подчеркнуть одну немаловажную деталь, касательно данного примера. Согласно семантике документа, элемент table должен содержать только табличные данные, и, соответственно, он не может быть использован для позиционирования элементов страницы и ее частей. Использование таблиц было весьма популярным занятием в прошлом, когда практически все страницы создавались при помощи таблиц многократной вложенности. Такой подход имел свои преимущества, поскольку позволял воплощать дизайн, одинаково отображающийся во всех, существующих на тот момент, браузерах. 16 На смену таблицам пришли новые стандарты CSS и новые методы оптимизации HTML-кода для поисковых систем. Альтернативой ячейкам таблицы, как методу позиционирования элементов, сейчас служат элементы div, или любые другие элементы, в сочетании со свойствами форматирования CSS. CSS обладает набором средств, позволяющих манипулировать позицией элемента, достаточным для того, чтобы не использовать таблицы. Как следствие, различают так называемую «табличную» верстку, т.е. верстку с применением элемента table, и «бестабличную» – то есть верстка без применения элемента table. Очевидно, что бестабличная верстка имеет ряд преимуществ по сравнению с табличной, поскольку обладает всеми качествами, присущими современным веб-документам – это простота, доступность и гибкость при редактировании. Возвращаясь к теме содержания и отображения, рассмотрим следующий пример. Допустим, у нас есть запись, которая повествует о некоей важной информации: Фрагмент отображения выделенного текста <strong>Некая важная информация</strong> Элемент strong говорит о том, что текст внутри него имеет большее значение, чем просто текст, он имеет какую-то важность на фоне всего остального содержимого страницы. Таково предназначение этого элемента. Эта запись полностью соответствует требованиям семантики. Несмотря на то, что элемент strong отображается жирным шрифтом по умолчанию, мы хотим еще как-нибудь выделить этот текст, чтобы он привлекал больше внимания. Сделать это можно, например, изменив его цвет на ярко красный. Как правило, первое, что приходит на ум новичку, знакомому с элементами HTML, это добавление тега font. Этот тег предназначен специально для того, чтобы изменять свойства шрифта. Цвет шрифта можно изменить, используя для этой цели специальный атрибут color, как это показано в следующем фрагменте кода: Фрагмент отображения текста красным цветом при помощи тега font <strong><font color=”red”>Некая важная информация</font></strong> На первый взгляд все отлично. Но по опыту предыдущего примера можно сказать, что здесь мы опять столкнулись с проблемой дальнейшего редактирования документа. И это еще не все. Подумайте, какую смысловую нагрузку несет в себе тег font, если его непосредственной задачей является изменение свойств шрифта? Правильно, с точки зрения семантики он смысла не несет, в отличие от strong. Именно поэтому тег font был запрещен консорциумом W3C в его последних спецификациях. Альтернативным решением может послужить применение атрибута style. Этот атрибут позволяет задавать свойства отображения в HTML-коде непосредственно для элемента. Фрагмент отображения текста красным цветом при помощи атрибута style <strong style=”color:red”>Некая важная информация</strong> Этот пример, подобно предыдущему, выведет на экран строку красного цвета жирным шрифтом. И может показаться, что это и есть то, чего мы добивались. Но давайте рассмотрим этот пример более детально. Свойства отображения, заданные при помощи атрибута style имеют самый высокий приоритет, по сравнению со стилями, описанными в CSS, а также атрибутами характеризующими стиль элемента, такими как, например, bgcolor. Как следствие, свойство color:red будет невозможно переопределить во внешнем CSS-файле. То есть, если мы захотим изменить цвет отображаемого текста на какойлибо другой, то это можно будет сделать только непосредственно в HTML-коде, изменив значение атрибута style. Кроме этого, такая запись не несет семантической нагрузки и относится непосредственно к отображению, а не семантике документа. В следующем примере мы попытаемся исправить ситуацию, соблюдая современные требования. 17 Фрагмент отображения текста красным цветом при помощи класса CSS <strong class=”warning”>Некая важная информация</strong> Фрагмент CSS .warning {color:#f00} Мы наконец-то вынесли все, что касается отображения в CSS, определив для этого класс warning. Да и имя класса выбрано в соответствии со смысловой нагрузкой того, к чему он относится. Он не назван «red» или «redtext», а именно «warning». Этим мы внесли дополнительный смысл в этот фрагмент HTML-кода. Теперь мы видим не просто абстрактный текст красного цвета, а именно предупреждение. И, разумеется, в дальнейшем у нас не возникнет проблем с изменениями стилей данного текста, аналогично тому, как это показано в первом примере. Все это дает нам понять, что разделение смысловой нагрузки документа от его отображения является очень важной задачей. В следующих главах мы рассмотрим более подробные примеры такого разделения и оптимизации документов для поисковых систем. Будут также рассмотрены приемы CSS, позволяющие упростить структуру HTML-кода насколько это возможно. Теперь, когда основные принципы современного веб-документа уже рассмотрены, осталось только увидеть все сказанное в действии. Для этого мы рассмотрим пример того, к чему следует стремиться и пример того, чего следует избегать. 2.6Пример современного HTML Чтобы полностью понять предоставленный здесь пример HTML-страницы, вам нужно обзавестись (если вы этого еще не сделали) несколькими версиями современных браузеров. Для этого подойдут браузеры Internet Explorer 6 и выше, последние версии браузеров Mozilla Firefox, Opera и Safari (этот браузер доступен только для Mac). Любые другие браузеры, которые поддерживают современные стандарты W3C тоже подойдут. Какое-нибудь мобильное устройство с доступом в Интернет и браузером также будет весьма полезным, например мобильный телефон или карманный компьютер. Запустите один из перечисленных браузеров и откройте ссылку, приведенную ниже. <Ссылка на пример современной HTML-страницы> Если вы все сделали правильно, то вашему взору предстала страница, которую мы попытаемся исследовать. То, что вы видите, это результат одновременной работы HTML и CSS. Откройте эту же ссылку в других браузерах, которые у вас имеются. Если пример действительно удачный, то он отображается одинаково во всех браузерах. Теперь давайте попытаемся просмотреть этот же документ без CSS и увидеть, будет ли нам понятен его смысл? Для этого лучше всего воспользоваться браузером Mozilla Firefox. Откройте ссылку в Firefox а затем выберите пункт меню «Вид» → «Стиль страницы» → «Без стилей». Если у вас мобильный телефон с браузером не поддерживающим CSS, то вы можете открыть эту ссылку в нем. Эффект будет почти тот же самый, что и в обычном браузере с выключенным CSS. Мы отключили CSS, и страница изменила свой вид. Но потерялся ли при этом ее смысл? Если сейчас вы можете отличить заголовок от параграфа, а также выделить другие смысловые элементы, то это означает, что документ составлен грамотно с точки зрения семантики. Мы потеряли дизайн и всю красоту страницы, но зато сохранился ее смысл и та информация, которую она несет. Следующим шагом давайте убедимся, соответствует ли данный документ спецификации W3C, указанной в его DOCTYPE? Для этого откройте страницу W3C валидатора, находящуюся по адресу http://validator.w3.org/ Затем введите адрес ссылки на рассматриваемый пример в поле «Address» формы «Validate by URL» и нажмите кнопку «Check». Надпись «This Page Is Valid XHTML 1.0 Strict!» на зеленом фоне означает, что этот документ действительно соответствует спецификации указанной в его DOCTYPE и не содержит ошибок. 18 Давайте посмотрим на HTML-код примера изнутри и проверим, действительно ли он настолько прост, каким должен быть? Для этого откройте окно с исходным HTML-кодом данной страницы, выбрав соответствующий пункт в меню браузера. В Internet Explorer это делается при помощи выбора меню «Вид» → «Просмотр HTML-кода», а в Firefox «Вид» → «Исходный код страницы». Внимательно просмотрите HTML-код данного примера. Достаточно ли он прост на ваш взгляд, принимая во внимание исходный дизайн страницы? Что вы можете сказать по поводу семантики? Не перегружен ли код лишними элементами и классами? Что вы можете сказать о последовательности смысловых блоков в документе? Теперь попытайтесь еще несколько раз включить и выключить CSS для того, чтобы лучше ощутить влияние CSS на HTML-документ. Откройте CSS и убедитесь, что все свойства отображения данного документа находятся в нем. Для этого введите в поле адреса браузера следующую строку: <Ссылка на пример CSS > Проверим этот CSS-файл на соответствие стандартам W3C. Для этого откройте адрес CSS валидатора: http://jigsaw.w3.org/css-validator/ Введите в поле «Address» формы «Validate by URI» ссылку на CSS или на HTML-документ и нажмите кнопку «Check». Надпись «Congratulations!» означает, что тест пройден успешно, и что указанный CSS-файл не содержит ошибок и соответствует стандартам W3C. Таковы основные операции по оценке веб-страницы. Как вы, наверное, убедились, приведенный здесь пример отлично справился со всеми тестами. 2.7Пример HTML старого типа Все познается в сравнении. Для того чтобы лучше понять, каким был HTML раньше, предлагаю вашему вниманию пример не очень замысловатой страницы, сделанной в духе старого HTML. Напомню, что кроме отставания от современных норм жизни этот HTML вполне жизнеспособен, и его структура в основном обусловлена той неразберихой, что царствовала между браузерами в прошлом. Как бы не говорили многие скептики, табличная структура документа более стабильна, чем структура без таблиц. Это позволяло иметь одинаковый визуальный результат в самых различных браузерах. И, тем не менее, такой HTML сейчас неприемлем. Практика использования таблиц характеризует эпоху прошлого, поэтому не следует брать этот пример для подражания. Если визуально здесь все хорошо (одна из задач HTML выполнена успешно), то с точки зрения семантики документ выполнен неверно. Абсолютно все его элементы заключены в таблицы многократной вложенности, а это в корне меняет их значение, и если не для человека, то для поискового робота точно. <Ссылка на пример HTML страницы старого типа> Откройте эту ссылку в браузере и проделайте операции аналогичные предыдущему примеру. Приведенный здесь документ старого типа не является худшим примером того, что можно встретить в Интернет, где в достаточном количестве можно увидеть довольно грубые нарушения правил этикета HTML. 2.8Вывод На сегодняшний день, создание HTML-документов – это большая ответственность, поскольку такие документы должны удовлетворять современным стандартам W3C. Они должны быть одновременно доступны для людей с ограниченными способностями, для поисковых роботов, для браузеров, не поддерживающих CSS, и, конечно же, они должны воплощать собой дизайн и делать это одинаково хорошо для всех современных браузеров. Структура HTML-кода должна быть максимально проста и не перегружена лишними атрибутами и тегами. Все элементы и имена классов должны быть подобраны по смыслу, чтобы как можно лучше и оптимальнее выделить семантическую логику документа. Все, что касается отображения должно быть вынесено в отдельный CSS файл, который также должен соответствовать стандартам W3C. 19 Все, что было сказано в этой главе – это краткий обзор того, что собой представляет современный HTML. Для того чтобы полностью понять его смысл и вникнуть в его особенности, вам нужно ознакомиться с последующими главами. И, несомненно, вам понадобятся практические навыки в освоении приемов, приведенных в данной книге. 20 3.ИСПОЛЬЗУЕМЫЕ СРЕДСТВА И ПРОГРАММЫ 3.1Редактор для HTML – текстовый редактор Вопреки мнению многих новичков, идеальным редактором для HTML является текстовый редактор. К сожалению, в профессиональной верстке веб-страниц ни о каких визуальных средствах разработки HTML-документов речи быть не может. Поэтому, любые визуальные редакторы можете оставить в стороне, вооружившись чем нибудь попроще. В профессиональной HTML-верстке применимы только текстовые редакторы, разумеется не лишенные таких возможностей, как подсветка кода или автозаполнение. В идеале, неплохо настроить свой редактор так, чтобы вдобавок наглядно была видна разница между пробелами и символами табуляции. Это позволит создавать и редактировать правильно форматированные документы. 3.2Редактор для CSS Для редактирования CSS, в отличие от HTML (см. 3.1), использование какого-нибудь специализированного редактора даже приветствуется. Впрочем, если вы хорошо владеете CSS, то обычный текстовый редактор тоже сгодится. Существует несколько редакторов для CSS, наиболее известный из которых – TopStyle. Каждый вебразработчик вправе сам решать какой редактор ему использовать для CSS, если это не противоречит политике компании. 3.3Photoshop Большинство готовых дизайнов, с которыми веб-разработчику приходится иметь дело, выполнены в Adobe Photoshop, и соответственно, предоставляются в его родном формате PSD. В связи с этим, мы рассмотрим несколько тем, касательно верстки HTML используя версию Photoshop CS. 3.3.1Настройка рабочего места в Photoshop Прежде чем приступить к верстке готового дизайна в Photoshop, необходимо настроить ваше рабочее место. Начать следует с удаления всех ненужных окон (табов) в панелях справа. Это делается путем перетаскивания ненужного таба за пределы окна Photoshop. Целесообразно оставить табы Info, Layers и History. Далее, выбираем опцию Move Tool в панели слева. Вверху появится бар дополнительных настроек. Необходимо поставить галочки в чекбоксах Auto Select Layer и Show Bounding Box. Затем выбираем опцию меню Edit -> Preferences -> General и постранично ставим нужные настройки. Для страницы настроек General, указываем History States равное 40, это позволит иметь больший запас для отмены действий в случае необходимости. Для группы настроек Units & Rulers необходимо поставить значение pixels для Rulers и Type. В настройках Guides, Grid & Slices в качестве цвета для Guides следует указать Light Red. Этот цвет более заметный по сравнению с цветом по умолчанию. В группе Grid поставить значение 10 для Gridline every. А также значение 10 для Subdivisions. В разделе настроек Plug-Ins & Scratch Disks необходимо указать другие диски, если таковые имеются, для хранения файла подкачки Photoshop. Это повысит стабильность работы программы. В разделе Memory & Image Cache нужно указать значение 8 для Cache Levels. Такие настройки позволят избежать многих неприятностей в дальнейшем, при работе с готовым дизайном. Настройка рабочего места закончена. Теперь нужно сохранить изменения. Для этого нужно выбрать пункт меню Window -> Workspace -> Save Workspace. Определите какое-нибудь имя для сохраненного файла, чтобы можно было его использовать в дальнейшем. 21 Одной из основных задач, стоящих перед веб-разработчиком, при работе с дизайном, является выделение нужного изображения и его сохранение в виде файла, пригодного для Интернет формата: GIF, JPEG или PNG. Существует два основных способа сделать это. Один касается работы с подготовленным плоским изображением и использованием инструмента выделения. Второй заключается в использовании инструмента вырезки или так называемых слайсов. Для того чтобы разобраться о чем идет речь, нужно рассмотреть следующие два раздела о слоях и слайсах. 3.3.2Слои (Layers) Как известно, в Photoshop предусмотрена возможность обработки многослойных растровых документов, состоящих из слоев различного типа, среди которых могут быть: фоновый (непрозрачный), любое количество рабочих (прозрачных) слоев четырех разновидностей: обычные, текстовые, заливки и коррекции. Если слой обычный или текстовый, то его основным содержимым является некоторый объект (растровый в первом случае и текстовый во втором), а если слой заливки или коррекции, то соответствующее покрытие (декоративное или корректирующее). Слои это важная деталь, которую должен понимать веб-разработчик. Открытый перед ним готовый дизайн не является плоским. Он, как правило, состоит из нескольких слоев. В профессиональном дизайне это десятки слоев, обычно сгруппированные неким образом. Управлять отображением того или иного слоя можно с помощью соответствующей опции на панели управления слоями (Layers) справа. Эта опция работает по принципу чекбокса – наличие изображения глаза говорит о том, что слой будет отображаться. После того, как веб-разработчик принял решение о том, каким образом будет происходить «порезка» готового дизайна на различные составляющие HTML документа, ему необходимо подготовить ту или иную часть дизайна для выделения нужного изображения, будь то изображение фона или обычное изображение. Используя настройку видимости слоев, он убирает с поля зрения ненужные элементы (слои), например текст и пр., затем решает каким образом ему следует выделить изображение: использовать обычное выделение или слайсы. Если речь идет о выделении нескольких граничащих между собой графических фрагментов (например графические кнопки навигации), то логичнее, и проще, использовать слайсы. Если же речь идет о выделении одного отдельного изображения, то можно воспользоваться обычным выделением. Используя обычное выделение, изображение нужно будет поместить в буфер обмена, а затем в новое окно (пункт меню File -> New или Ctrl+N) для дальнейшего его сохранения в нужном формате. Однако, следует иметь ввиду, что в обычной ситуации, в буфер обмена попадет только содержимое активного в данный момент слоя, а не то что мы видим на экране. Таким образом, логично предположить, что перед тем как копировать изображение в буфер обмена, общее изображение должно быть плоским, т.е. состоять из одного слоя. Для того чтобы объединить все слои в один, существует опция меню Layer -> Flatten Image. Она может быть использована для временного объединения слоев при выделении нужного изображения. Вернуть исходную разбивку по слоям можно с помощью опции History в закладке History справа. Есть более быстрое решение этой проблемы – комбинация горячих клавиш Ctrl+Shift+C, которая позволяет скопировать в буфер обмена содержимое всех слоев одновременно для выделенного фрагмента. После того, как выделенное изображение помещено из буфера обмена в новое окно, достаточно выбрать пункт меню File -> Save For Web и выбрать формат (см. 3.3.4) для сохраняемого изображения. 3.3.3Принятие решения: текст – картинка Очень часто у новичков возникает вопрос – делать ли очередную надпись в виде текста или в виде графического изображения? Если текст выполнен с использованием стандартного шрифта и без хитрых эффектов вроде теней и пр., то предпочтение следует отдавать тексту. В противном случае – это изображение. 22 Иногда к проекту идут специальные требования в отношении того, где должен быть текст, а где графика. Это особенно касается HTML-верстки для систем динамического наполнения контента (CMS). Если вы не уверены в этом вопросе, или сомневаетесь относительно конкретной ситуации, обратитесь к своему менеджеру проекта. Список стандартных шрифтов в разделе 5.5.1 3.3.4Формат изображений (GIF, JPEG, PNG) Существует три самых популярных формата для изображений в Интернет – это GIF, JPEG и PNG. Для того, чтобы делать правильный выбор при сохранении графического изображения, вкратце рассмотрим их принципиальные отличия. Формат GIF хорош для небольших изображений с ограниченным количеством цветов. Большие фотографические текстуры и визуалы не стоит сохранять в этом формате, потому, что при этом сильно пострадает их качество, а размер файла будет неприемлем. Формат GIF обладает уникальной возможностью (поддерживаемой практически всеми браузерами) – он может обладать прозрачностью. Такой формат идеально подходит для изображений икон и других элементов декорации. Формат JPEG как правило, применяется в основном для фотографических текстур. Он не обладает прозрачностью, но зато хорошо подходит для отображения градиентов и прочих сложных декораций. Что касается, формата PNG, то он похож на JPEG, с тем отличием, что обеспечивает сохранение изображения без потери его качества. Многие фотографические текстуры и градиенты разумнее сохранять в формате PNG, а не JPEG. Все зависит от объема результирующего файла и требуемого качества изображения. Еще одним преимуществом PNG является наличие альфа-каналов, при помощи которых делаются очень многие эффекты, например полупрозрачные тени объектов. Способы использованиея PNG в разделе 6.6 3.4Вспомогательные средства. Здесь следует упомянуть такие утилиты как: CV_Ruler, DotColor, PNGOUT и EmailEncoder. Каждая из них окажет вам неоценимую помощь в создании веб-страниц. CV_Ruler представляет собой линейку (программную, разумеется), с помощью которой можно измерять горизонтальные и вертикальные размеры любых объектов, отображаемых на экране. Эта программа очень проста в обращении, и не требует специальной установки. DotColor – это утилита, позволяющая извлечь цвет любого объекта, отображаемого на экране. Она также способна поместить полученный цвет в буфер обмена в нужном формате. Ее использование позволяет сократить время редактирования документа при манипуляциях с цветом. К тому же, эта программа может оказаться полезной для просмотра деталей получившейся веб-страницы с помощью окна увеличения, особенно если речь идет о расхождении с дизайном в один или несколько пикселей. Разобраться в дополнительных опциях этой программы не составит особого труда, поэтому оставляем детали ее настройки вниманию читателя. Скачать ее можно здесь: http://inetis.com Помимо CV_Ruler и DotColor существует масса подобных и не менее полезных утилит. Любой вебразработчик вправе самостоятельно решать какой из этих программ ему пользоваться удобнее. Для защиты клиентских сайтов от спама используется кодировщик email-адресов http://internetplanners.com/email_encoder.html Его целесообразно использовать для всех email-адресов, встречаемых на странице. PNGOUT.EXE очищает PNG-файты от информации о цветокоррекции, которая мешает правильному выводу изображений в IE и Safari http://advsys.net/ken/utils.htm 23 3.5Полезные plug-in’ы. 3.5.1Для Firefox (Mozilla) 3.5.1.1Web Developer Toolbar (https://addons.mozilla.org/firefox/60/) Линейка с разнообразными инструментами для разработчика. Позволяет: разрешать/запрещать поддержку cookies и JavaScript, смотреть и редактировать CSS, просматривать и менять скрытые элементы форм, проверять сайт на соответствие стандартам, тестировать на различных размерах окна браузера, проверять результирующие свойства блоков. 3.5.1.2Firebug (https://addons.mozilla.org/firefox/1843/) Позволяет контролировать и редактировать Javascript, CSS и HTML (в том числе и динамически сгенерированный), смотреть превью значений в CSS, мониторить сетевую активность и порядок загрузки страницы с отслеживанием задержек, облегчает отладку JavaScript, имеется DOM-инспектор и др. 24 3.5.1.3SplitBrowser (https://addons.mozilla.org/firefox/4287/) Плагин позволяет разделить область содержимого браузера. Поможет, например, для сравнения ряда страниц. 3.5.1.4IE View (https://addons.mozilla.org/ru/firefox/addon/1429) и Opera View (https://addons.mozilla.org/ru/firefox/addon/1190). Открывают активную страницу в соответствующем браузере. 3.5.1.5Chickenfoot (http://groups.csail.mit.edu/uid/chickenfoot/) Это расширение, которое встраивает минисреду программирования на боковой панели, так что вы сможете писать простенькие скрипты чтобы управлять страницами и автоматизировать процесс веббраузинга. Скрипты в Chickenfoot это обычные JavaScript с рядом дополнительных функций, заточенных под веб-задачи (открыть урл, ввести строку в input, кликнуть по кнопке и много других). При нажатии F8 на боковой панели появляется редактор, позволяющий писать простенькие сценарии, как, например, скрипт автоматического заполнения форм, end-to-end тестирование поведения сайта, 25 изменения исходного кода страницы, перехода по ссылкам, все это может быть запрограммировано (можно составить из истории ваших действий). 3.5.2Для Internet Explorer 3.5.2.1Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e2d5e1db91038&displaylang=en#Overview) IE-аналог Web Developer Toolbar для FireFox. 3.5.2.2Instant Source Instant Source – это плагин для Internet Explorer, который позволяет увидеть реальную структуру документа, загруженного в браузер, или конкретного элемента под курсором мыши (в зависимости от настроек). Недостатком данной программы является то, что он отображает не исходный HTML код, а код сгенерированный браузером. Поэтому о форматировании тут речи быть не может, однако можно оценить структуру документа, что само по себе очень полезно во многих случаях, особенно когда документ генерируется динамически. Скачать модуль можно отсюда: http://www.blazingtools.com 26 4.ОФОРМЛЕНИЕ ДОКУМЕНТОВ – КОРПОРАТИВНЫЙ СТИЛЬ 4.1Правила именования папок и файлов Внутри каждой корпорации существуют некоторые правила оформления и ведения документов а также именования папок. Здесь мы рассмотрим некоторые правила, которые следует соблюдать по умолчанию во избежание беспорядка. Расширение HTML- или XHTML-файлов должно быть .html. Имена CSS-файлов должно соответствовать media-области их применения: all.css, screen.css, print.css и т.п. Список возможных media представлен в 6.2.3 Файлы содержащие команды SSI (см http://ru.wikipedia.org/wiki/SSI_(программирование)) должны иметь расширение .shtml, вне зависимости от того вставляются ли сами эти файлы командой #include или нет, в противном случае SSI-команды, в зависимости от настройки сервера, могут быть сервером обработаны неправильно. Расширения файлов внедряемых командой #include находящиеся в папке inc могут иметь расширения .inc, .tpl или другие в зависимости от их назначения (с учетом предыдущего абзаца). Имя корневой папки должно соответствовать имени проекта. Например: MyProject. Изображения хранятся в папке images. CSS – в css. JavaScript – в js. Flash элементы – в swf. Имя корневой папки c SSI-версией должно соответствовать имени проекта с добавлением ssi. Например: MyProject-ssi. Пример структуры папок: 4.2Правила для HTML Эта глава описывает основные правила оформления HTML-документов. Как результат правильного форматирования, мы получаем доступный для понимания и легкий для редактирования HTML-код. От того, насколько правильно оформлен документ, также зависит скорость поиска и устранения ошибок. Поэтому убедительная просьба всем читающим – внимательно отнеситесь к данной главе. 4.2.1Отступы В HTML-документе отступы, играют немаловажную роль. В соответствии с иерархической структурой документов, отступы показывают уровень вложенности элементов, а это, в свою очередь, дает дополнительную информацию тому, кто редактирует документ. Никогда не стоит пренебрегать корректировкой отступов даже в случае незначительных изменений в документе. На вопрос «Чем лучше делать отступы, пробелами или табуляцией?», существует вполне однозначный ответ – табуляцией. Во-первых, потому, что в случае пробела вам придется использовать как минимум два символа пробела и соответственно два байта (в общем случае) на один «символ» отступа, вместо одного байта для табуляции. Пробельные символы отступа у вас будут занимать в несколько раз больше памяти, чем те же отступы с табуляцией, а для веб-документов, как известно, размер имеет критическое значение. Во27 вторых, у разных людей есть разные привычки относительно того, сколько пробелов они ставят для отступа: два, три и т.д. Поэтому, правило номер один для отступов – используйте табуляцию вместо пробелов. Идея отображения иерархической вложенности элементов также должны быть понятна. Например, если тело документа (элемент body) содержит элемент div внутри себя, а тот, в свою очередь, содержит изображение (элемент img), то это отображается так, как показано в примере: Отображение иерархической вложенности <body> <div> <img src=”mypic.jpg” /> </div> </body> 4.2.2Элементы и атрибуты При создании любого HTML-документа, хорошим тоном следует считать написание тегов элементов в нижнем регистре. Это позволит вам, во-первых, выработать правильную привычку и избежать недоразумений при редактировании чужих (предположительно правильно оформленных) документов. Более того, таково требование XHTML, поскольку этот стандарт подразумевает написание элементов именно в нижнем регистре. Избегайте ненужных пробелов внутри тегов, особенно в случае отсутствия атрибутов. Все значения атрибутов необходимо брать в двойные кавычки, причины для этого те же самые: правильная привычка и соответствие стандартам. Будьте внимательны, и не забывайте разделять пары атрибут-значение символом пробела; и в то же время избегайте лишних пробелов между атрибутами, а также в их значениях. 4.2.3Переносы Здесь мы рассмотрим целесообразность использования переносов строк в HTML-документе, включая два общих случая: перенос элемента и перенос внутри элемента. 4.2.3.1Перенос элемента Перенос элемента в согласовании с отступом (см. 4.2.1) помогает правильно отобразить иерархическую структуру в HTML. Для простоты чтения и понимания кода не рекомендуется ставить более двух элементов в одной строке. Рассмотрим пример: Три элемента в одной строке <table> <tr><td><a href=”#”>link</a></td></tr> </table> Таких конструкций следует избегать, а вместо них использовать следующую: 28 Правильное использование переносов <table> <tr> <td><a href=”#”>link</a></td> </tr> </table> То же самое касается элементов, не вложенных друг в друга. Обратите внимание, что мы оставили два элемента td и a в одной строке и не стали их разбивать. Дело в том, что чрезмерное увлечение переносами элементов не добавит ясности в код, а скорее затруднит чтение. Все хорошо в меру. 4.2.3.2Перенос внутри элемента Перенос внутри элемента делается в двух случаях: когда достигнут предел количества символов допустимых в одной строке, либо когда перенос строки между элементами воспринимается браузером как дополнительный текстовый узел и доставляет неприятности при отображении. В таком случае перенос следует делать следующим образом: Перенос внутри элемента <div class=”navigation”><a href=”#”>Home</a><a href=”#”>About Us</a></div> 4.2.4Вставка специальных символов Любые специальные символы такие, как «©», «&» и др. следует представлять в виде определенных стандартом ссылок на сущность (EntityReference), например: «©». Список сущностей, регламентированных стандартами HTML 4.01 и XHTML 1.0, можно посмотреть по следующей ссылке: http://www.w3.org/TR/REC-html40/sgml/entities.html 4.2.5Цвет Определение цвета в CSS и HTML-атрибутах необходимо задавать в виде шестизначной последовательности шестнадцатиричных цифр, начинающейся со знака «#». Например «#fefefe». Здесь первая пара цифр означает количество красного цвета, вторая – зеленого, и третья – синего. Например, последовательность «#00ff00» означает чистый зеленый цвет, потому, что количество красного и синего равно нулю, а зеленый задан по максимуму, т.е. «ff». Вместо текстовых эквивалентов цветов, предпочтительнее использовать вышеупомянутый формат, т.е. «#ffffff» вместо «white» и т.д. Существует также сокращенная форма записи цветов, когда каждая составляющая цвета представлена комбинацией одинаковых шестнадцатиричных цифр. Например белый цвет может быть представлен как «#fff», а зеленый «#0f0». Предпочтение всегда нужно отдавать сокращенной форме записи. Для упрощения работы с цветом при составлении и редактировании документов, рекомендуется использовать утилиту DotColor, описанную в разделе 3.4. 4.2.6Комментарии Для упрощения работы стороннего лица с HTML-документом иногда возникает необходимость разделения его смысловых блоков используя узлы комментариев. При помощи комментариев имеет смысл разделять такие блоки, как например заголовок, навигация, нижний колонтитул и пр. Как правило, эти 29 фрагменты кода отмечают парой комментариев – начало блока и конец. Весьма разумным является отметка при помощи комментариев повторяющихся фрагментов кода, которые, возможно, в будущем будут генерироваться автоматически. Однако, не стоит злоупотреблять использованием комментариев, так как это приведет к усложнению читаемости кода и его редактирования. Рассмотрим пример использования узла комментария для разделения смысловых блоков документа: Образец комментированного блока  <ul id=”navigation”> … </ul>  Как видно из примера, комментарии должны содержать информацию о том, что это за блок (navigation), где он начинается (start) и где заканчивается (end). При работе с иностранными клиентами, комментарии ни в коем случае не должны содержать русскоязычные названия и аббревиатуры, желательно вообще избегать русскоязычных комментариев. Текст комментариев должен быть только на английском языке! 4.3Правила для CSS Правила для оформления CSS-кода предельно просты и не отличаются особой изысканностью. Вот пример типичного фрагмента CSS: Образец записи CSS #navigation a:hover { border-top: 1px solid #fff; background: #f60 url(bg-arrow.gif); } Запись селектора следует начинать с новой строки, завершать ее открывающей фигурной скобкой. Каждое CSS свойство должно начинаться с новой строки с отступом и обязательно заканчиваться точкой с запятой, даже если это свойство последнее в блоке. В качестве отступа следует использовать символ табуляции. Блок обязательно завершается закрывающей фигурной скобкой с новой строки. Между CSS блоками желательно делать отступ в одну строку, но не более. Там где это необходимо, можно добавлять комментарии для выделения отдельных смысловых фрагментов CSS кода. Блок комментариев в CSS начинается с символов «/*» и заканчивается «*/». Комментарии в CSS /* navigation styles */ #navigation a:hover { border-top: 1px solid #fff; /* top border definition */ background: #f60 url(bg-arrow.gif); /* background styles */ } Помимо этих простых правил существуют еще несколько рекомендаций относительно того, как следует называть классы, идентификаторы и файлы изображений фона. Согласно стандарту, имена классов и идентификаторов чувствительны к регистру, соответственно такие классы как MyClass и myclass являются двумя разными классами. Тем не менее, различные браузеры подобные различия могут понимают по-своему, поэтому, во избежание путаницы, имена классов и идентификаторов следует писать в нижнем регистре, а их составные части разделять знаком минус «-». Например: 30 Не рекомендуется: #NavigationBar{…} .NavigationList{…} Рекомендуется: #navigation-bar{…} .navigation-list{…} Что касается имен файлов для изображений, и любых других файлов, то их следует называть в нижнем регистре. Это связано с тем, что большинство хостинг провайдеров предоставляют серверы на основе Unix/Linux-системы, которые чувствительны к регистру имени файла. Если, например, вы назовете имя файла «MyPicture.jpg», а в CSS сошлетесь на него в нижнем регистре: Комментарии в CSS /* navigation styles */ #navigation a:hover { border-top: 1px solid #fff; /* top border definition */ background: #f60 url(bg-arrow.gif); /* background styles */ } На Windows-платформе вы не ощутите разницы, все будет прекрасно работать, картинка будет отображаться. Но когда вы поместите ваш код на сервер, то наиболее вероятно то, что система просто не найдет нужный файл, а именно «mypicture.jpg». Все названия имен файлов и классов CSS должны быть смысловыми и тщательно подобраны таким образом, чтобы они отражали суть данного объекта. При работе с иностранными клиентами, комментарии, идентификаторы, имена классов и файлов ни в коем случае не должны содержать русскоязычные названия и аббревиатуры! 4.4Основные правила для JavaScript В данной главе мы не будем подробно рассматривать все правила форматирования для JavaScript, а ограничимся только лишь основными общими правилами, которые, впрочем, присущи любому языку программирования. Рассмотрим пример: 31 Пример кода JavaScript function initPage() { var nav = document.getElementById("navigation-top"); if (nav) { var nodes = nav.getElementsByTagName("li"); for (var i = 0; i < nodes.length; i++) { nodes[i].onmouseover = function () { this.className += " hover"; } nodes[i].onmouseout = function () { this.className = this.className.replace(" hover", ""); } } } } if (window.attachEvent && !window.opera) window.attachEvent("onload", initPage); Определение функции начинается с новой строки. В качестве отступов используются табуляции. Открывающая и закрывающая фигурные скобки расположены на одном уровне, чтобы четко видеть начало и конец блока. Параметры функции разделены запятой и символом пробела. Оператор присваивания «=» и операторы арифметических операций выделены пробелами. Все имена функций и переменных начинаются с маленькой буквы и имеют смысловые названия. Локальные переменные описаны с помощью оператора «var». Общий смысл форматирования JavaScript кода заключается в том, чтобы сделать этот код как можно более понятным и доступным для редактирования. 32 5.CASCADING STYLE SHEET Данная глава описывает основные темы Cascading Style Sheet (CSS), на которые следует обратить внимание, и о которых должен знать каждый профессиональный HTML-разработчик. Описанные здесь сведения о CSS не предендуют на полноту изложения всех его возможностей и перечня всех существующих свойств. Напротив, здесь изложены обобщенные сведения, логически сгруппированные. 5.1Немного о стандартах На текущий момент существуют следующие спецификации: CSS 1 и CSS 2 (точнее CSS 2.1). Новая спецификация CSS 3 находится на стадии разработки. CSS 1 вышла 17 декабря 1996 года с последующей ревизией 11 января 1999 года. Она содержит основные свойства CSS, известные с тех времен, такие как свойства шрифта, отступов, цвета и т.д. Спецификация CSS 2 начала свое существование с 1998 года. Помимо свойств CSS 1, она содержит свойства абсолютного позиционирования элементов, автоматической нумерации элементов списка, разрыва страниц, направления текста справа налево и другие. Не рекомендуется использовать CSS-свойства, являющиеся специфическими для конкретного браузера и не входящие в число допустимых стандартом CSS 1 или CSS 2. Далеко не все браузеры имеют полную реализацию стандартов W3C. Более того, одни и те же свойства могут иметь существенные различия их реализации в разных браузерах. Приоритеты обработки CSS инструкций, точнее некоторые ее особенности, также могут отличаться. Вывод прост – необходимо придерживаться использования стандартных CSS-свойств, реализация которых одинакова в разных браузерах. Специфические и нестандартные CSS-свойства необходимо использовать только в крайних случаях. Не забывайте также о правильном форматировании CSS, описаном в разделе 4.3. Более полную информацию о стандартах CSS можно найти по адресу http://www.w3.org/Style/CSS/ . 5.2Селекторы Селектор (англ. selector) – это та часть записи в CSS, которая отвечает за селекцию узлов HTMLдокумента, к которым будет применен указанный стиль. Например: Селектор CSS и указание стиля ul.navigation a {text-decoration: none;} В примере, селектором является строка «ul.navigation a», который говорит о том, что стиль (в данном случае «text-decoration: none;»), будет применяться ко всем элементам a, которые находятся внутри элемента ul с классом «navigation», например для всех ссылок следующей структуры: Фрагмент HTML к которому будет применен CSS <ul class=”navigation”> <li><a href=”#”>Home</a></li> <li><a href=”#”>Catalog</a></li> <li><a href=”#”>About Us</a></li> </ul> Селекторы бывают разных видов. Давайте их рассмотрим. Начнем с самого простого, а именно с селектора элемента. 33 Селектор элемента div {font-size: 12px;} Название любого HTML-элемента может являться селектором. В примере выше, это «div», который означает, что стиль «font-size: 12px» будет применен ко всем элементам div документа. Селекторы класса предназначены для определения стиля для элементов с предопределенным классом, т.е. значением атрибута «class»: Селекторы класса table.details {table-layout: fixed;} .heading {color: #0f0;} Как видно из примера, имя класса следует после точки, при этом имя элемента может быть не указано, что в свою очередь означает, что стиль будет применен к любым элементам с заданным классом. Напомню, что в соответствии со стандартом W3C, имя класса чувствительно к регистру. В любом случае, при написании имени класса, рекомендуется придерживаться правил, описанных в 4.3. Еще одно замечание касается того, что в качестве значения атрибута class допускается перечисление нескольких классов, разделенных пробелом (см. также 6.2.4.4). Например: Указание нескольких классов для элемента <strong class=”temperature critical”>359</strong> В данном случае к элементу strong будут применены значения стилей обоих классов: «temperature» и «critical». Селектор по идентификатору, т.е. по значению атрибута id, выглядит схожим образом, что и селектор класса, за исключением символа разделителя. В этом случае это – «#». Селекторы по идентификатору можно использовать с тем же успехом, что и селекторы класса, однако следует помнить, что значение id должно быть уникальным в пределах одного HTML-документа. В документе не должно встречаться более одного элемента с одинаковым идентификатором. В отличие от класса, нельзя также указывать несколько идентификаторов для элемента через пробел. Селектор по идентификатору ul#navigation {background: #f0f0f0;} #footer {border: 1px solid #f00;} По аналогии с классом, имя элемента в селекторе указывать не обязательно. Контекстный селектор синтаксически представляет собой несколько простых селекторов, разделенных символом пробела. Контекстный селектор div.content-area p ul {list-style: none;} Такая запись отменяет стиль отображения элементов списка по умолчанию для всех ненумерованных списков, которые находятся внутри параграфов, которые, в свою очередь находятся внутри элементов div с классом «content-area». Контекстные селекторы используются для получения более компактного HTML-кода, для избежания указания одинаковых классов для элементов с неким общим родительским элементом. Например, код приведенный ниже: 34 HTML-фрагмент с повторяющимися классами <ul id=”navigation”> <li><a class=”nav-link” href=”#”>Home</a></li> <li><a class=”nav-link” href=”#”>Catalog</a></li> <li><a class=”nav-link” href=”#”>About Us</a></li> </ul> Может быть преобразован в код вида: Оптимизированный HTML-фрагмент <ul id=”navigation”> <li><a href=”#”>Home</a></li> <li><a href=”#”>Catalog</a></li> <li><a href=”#”>About Us</a></li> </ul> Используя при этом контекстный селектор следующего вида: Контекстный селектор #navigation a { /* styles go here */ } В случае, когда нескольким селекторам должен соответствовать один и тот же стиль, можно воспользоваться группировкой селекторов, разделяя их запятой. Группировка селекторов ul.navigation a, a.cross-link { /* styles go here */ } Также необходимо иметь ввиду, что в CSS имеет место наследование, когда свойства, определенные для родительского элемента влияют на свойства элементов ему принадлежащих. Например, если мы определим цвет текста для элемента body, то такой же цвет текста будут иметь все элементы p в него входящие, до тех пор, пока эти свойства не будут переопределены другими селекторами. W3C также предусматривает другие виды селекторов для CSS, помимо перечисленных, однако ввиду того, что на данный момент они поддерживаются не всеми браузерами, мы их рассматривать не будем. Иногда возникает необходимость определить различные стили для разных типов браузеров. В связи с этим существует несколько решений, которые помогают сделать это без применения JavaScript. Эти решения рассмотрены в разделе 5.7. 5.3Псевдоклассы и псевдоэлементы Псевдокласс (англ. pseudo-class) – класс, который существует не зависимо от того, объявлен атрибут class для элемента или нет. Такие классы существуют всегда и предусмотрены для некоторых элементов и их состояний. Самые часто используемые псевдоклассы это псевдоклассы элемента a. Для него существует четыре псевдокласса, в соответствии с состоянием этого элемента на текущий момент времени: hover, link, visited и active. 35 Псевдокласс hover позволяет определить стиль для гиперссылок, находящихся под курсором мыши в текущий момент времени; link – это еще не посещенные гиперссылки, visited – уже посещенные гиперссылки; active – активные или открываемые в данный момент ссылки. Чаще всех используется псевдокласс hover. Синтаксически, псевдокласс указывается в селекторе после знака двоеточия. Псевдокласс a:hover {text-decoration: underline;} Такая запись добавит эффект подчеркивания ссылки при наведении на нее мышкой. Разумеется это имеет смысл только когда эффект подчеркивания для ссылок отменен по умолчанию. Псевдокласс может быть использован в комбинации с обычным классом. При этом порядок записи названий классов особой роли не играет, но принято псевдоклассы писать в самом конце простого селектора. Комбинация класса и псевдокласса a.nav-link:hover {color: #000;} Многие современные браузеры имеют псевдокласс hover, предопределенный для всех HTMLэлементов, в то время как, например браузер Internet Explorer 6.0 понимает псевдокласс hover только для элементов a. Использование псевдокласса hover позволяет делать некоторые интересные эффекты, вроде многоуровневого меню на основе CSS без использования JavaScript. Кроме упомянутых здесь псевдоклассов, существуют также и другие, но поскольку они поддерживаются не всеми браузерами, на данном этапе мы их рассматривать не будем. Псевдоэлемент (англ. pseudo-element) – это элемент или мнимый элемент, характеризующийся определенным критерием, и к которому могут быть отдельно применены CSS-свойства. Псевдоэлементы редко используются по причине плохой их поддержки различными браузерами, поэтому на данном этапе рассматриваться не будут. 5.4Единицы измерения Рассмотрим, какие бывают единицы измерения для указания размера объектов HTML-документа. Формат представления размера предполагает необязательное использование знака числа. Если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой. И затем, опять без разрыва, двухбуквенная аббревиатура единицы измерения. Указание аббревиатуры необязательно, если значение размера равно нулю. Существует два типа представления длины: относительное и абсолютное. Относительное представление задает длину относительно другого свойства длины. Существуют следующие относительные размеры длины:  em – высота шрифта  ex – высота символа X  px – пиксели (относится к разрешению устройства вывода) Единицы длины em и ex относятся к характеристикам шрифта самого элемента, за исключением свойства font-size, для которого за основу берутся характеристики шрифта родительского элемента. Единицы измерения px (пиксели) относятся к разрешению устройства вывода, т.е. обычно к дисплею компьютера. Если плотность пикселей устройства вывода очень сильно отличается от плотности пикселей компьютерного дисплея, браузер вынужден масштабировать значения пикселей. Это происходит, например, при выводе веб-страницы на принтер. 36 Относительный размер может быть также задан в виде процентного соотношения, обычно по сравнению с величиной родительского элемента. В этом случае, после значения указывается знак «%». Абсолютные значения применимы в том случае, когда заранее известны параметры устройства вывода. Поддерживаются следующие абсолютные единицы измерения:  in – дюймы  cm – сантиметры  mm – миллиметры  pt – пункты (1/72 дюйма)  pc – пика (12 пунктов) Абсолютные значения используются очень редко в профессиональном веб-дизайне. 5.5Основные CSS-свойства Данный раздел описывает основные CSS-свойства, применяемые в современном веб-дизайне. Все они сгруппированы для простоты их освоения. Ссылку на полный список CSS свойств, а также информацию о существующих стандартах CSS вы можете найти в разделе 5.1. 5.5.1Свойства шрифта В этой главе мы рассмотрим CSS-свойства, определяющие стиль текста: font, font-family, font-size, font-weight, font-style, line-height. Начнем с определения font-family. С помощью этого свойства можно задать шрифт, который будет использоваться для текста внутри объекта, для которого это свойство задано. Ввиду того, что на компьютере пользователя нужного шрифта может не оказаться (не установлен), font-family обычно содержит несколько альтернативных названий шрифтов, заканчивая этот список общим названием семейства шрифтов. Cвойства font-family font-family: “Lucida Sans”, Verdana, sans-serif; В данном примере указан предпочтительный шрифт – «Lucida Sans». Так как название этого шрифта состоит их двух слов, оно взято в кавычки. Это правило применимо ко всем названиям шрифтов, состоящим более чем из одного слова. В случае, если шрифт «Lucida Sans» не установлен, браузер попытается использовать следующий в списке шрифт, а именно «Verdana». Если же и его на компьютере не окажется, то браузер будет использовать один из доступных шрифтов семейства «sans-serif», т.е. «без засечек». Перечислим названия существующих семейств шрифтов: serif, sans-serif, monospace, script (или cursive), fantasy. Ниже приведены несколько шрифтов семейства serif:  Garamond  Georgia  New York  Times  Times New Roman К шрифтам семейства sans-serif относятся: 37  Arial  Geneva  Helvetica  Lucida Sans  Trebuchet  Verdana  Tahoma Семейство monospace включает в себя:  Courier  Courier New  Lucida Console  Monaco К семейству script относятся:  Comic Sans MS  Lucida Handwriting  Zapf Chancery И на последок несколько примеров шрифтов из семейства fantasy:  Copperplate  Desdemona  Impact  Kino Как правило, в профессиональном веб-дизайне используется не более 3 – 4 шрифтов одновременно. Причем, разумеется это должны быть общедоступные и популярные шрифты. Для обычного текста используются как правило шрифты семейства sans-serif, такие как Arial, Tahoma, Verdana и пр. Для страниц предназначенных для печати, чаще всего используются шрифты serif. Monospace-шрифты, как правило, используются для отображения фрагментов кода. Шрифты семейства script и fantasy используются очень редко. Указание только одного шрифта в качестве значения для font-family рассматривается CSSвалидатором W3C как некое нарушение правил, поэтому всегда следует указывать несколько альтернативных шрифтов, заканчивая список названием предпочтительного семейства шрифтов. Ввиду наследования многих CSS-свойств дочерними объектами, в случае, когда на странице используется только одна разновидность шрифта, как правило, достаточно указать значение font-family один раз для элемента body. Элементы td, а также элементы формы не наследуют свойства шрифта, поэтому их нужно определять отдельно. Не нужно указывать font-family для каждого элемента, содержащего текст, это непрактично и неоптимально. Размер шрифта указывается с помощью свойства font-size. В качестве значения, допустимы любые величины в любых единицах измерения (см. 5.4), плюс некие предопределенные значения например xx-small, x-small, small, medium, large, x-large и xx-large. Свойство font-weight задает вес шрифта. Это свойство имеет несколько допустимых значений, однако на практике используются только два из них: normal и bold. 38 Стиль шрифта задается с помощью свойства font-style, которое имеет три допустимых значения: normal, italic и oblique. Значение oblique практически не используется по причине того, что поддерживается не всеми браузерами, да и необходимость использования oblique в веб-дизайне возникает крайне редко. Одной из характеристик шрифта является межстрочный интервал или точнее высота строки. Свойство, отвечающее за этот параметр называется line-height. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается. Значение normal заставляет браузер вычислять расстояние между строк автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы измерения (см. 5.4). Разрешается использовать процентную запись, в этом случае за 100 процентов берется высота шрифта. Все вышеперечисленные свойства шрифта могут быть указаны с помощью сокращенной (shorthand) записи CSS свойства font. При этом значения свойств шрифта должны быть перечислены через пробел в следующем порядке: значение font-style, значение font-weight, значение fontsize, значение font-family. Высота строки line-height может быть указана после величины размера шрифта, используя знак «/» в качестве разделителя. Рассмотрим несколько примеров: Сокращенная (shorthand) запись свойств текста font: 11px Arial, Verdana, sans-serif; font: bold 12px/14px Tahoma, Arial, Verdana, sans-serif; font: italic normal 10px Helvetica, Verdana, sans-serif; Предпочтение следует отдавать сокращенной записи свойств текста там где это возможно для получения более компактного и удобно читаемого CSS. Помимо вышеперечисленных свойств, существуют также такие свойства, как font-variant, text-decoration (см. 5.5.2) и text-transform. 5.5.2Свойства эффектов текста Свойство text-decoration отвечает за эффекты текста. Оно часто используется для выключения или включения подчеркивания текста гиперссылок. Поэтому наиболее часто используемые для него значения это none и underline, соответственно. Свойство text-decoration может принимать и другие значения, с которыми читатель может ознакомиться в любом справочнике по CSS. 5.5.3Свойства выравнивания К свойствам выравнивания относятся: text-align и vertical-align. Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента. Оно может принимать одно их четырех значений: left, right, center и justify. Последнее выравнивает текст одновременно по левому и правому краю. Свойство vertical-align, как и следует из названия, отвечает за вертикальное выравнивание элемента или текста. Из всего множества допустимых значений практичных только три: top, middle и bottom. Обратите внимание, что значение, означающее выравнивание посередине называется middle, а не center. 39 5.5.4Свойства переноса Свойство white-space со значением nowrap запрещает перенос строк внутри текста, заключенного внутрь элемента. Помимо значения nowrap, стандарт CSS 2.1 предусматривает также normal, pre, pre-wrap и pre-line. В настоящий момент, на практике используются только два значения: normal и nowrap. 5.5.5Свойства фона В этом разделе будут рассмотрены CSS-свойства фона элемента, а именно background, background-color, background-image, background-repeat, background-position, background-attachment. Цвет фона устанавливается с помощью background-color. В качестве значения свойство принимает код цвета или значение «transparent», что означает «прозрачный». Правила указания цвета рассмотрены в разделе 4.2.5. В случае, когда в качестве фона необходимо использовать изображение, применяется свойство background-image. Пример его использования показан в примере ниже. Использование background-image background-image: url(../images/mypic.jpg); Путь к файлу изображения указывается в скобках параметра url. Путь указывается относительно расположения CSS файла, а не HTML документа. По умолчанию, изображение фона будет повторяться по горизонтали и вертикали, пока не заполнит собой весь элемент, к которому применили данное свойство. В случае, когда необходимо ограничить повторение изображения по горизонтали или по вертикали или предотвратить его повторение, используется CSS-свойство background-repeat. Оно принимает одно из следующих значений: repeat (значение по умолчанию), repeat-x, repeat-y, no-repeat. Смысл этих значений понятен по их названиям. Еще одно немаловажное свойство, которое помогает при манипуляциях изображением фона, называется background-position. Оно предназначено для установки позиции изображения фона внутри элемента. В качестве значения, это свойство принимает один или комбинацию двух параметров. Это может быть пара числовых значений, разделенных пробелом и выраженных в каких- либо единицах измерения (см. 5.4) или процентах (со знаком «%») смещения относительно верхнего левого угла. Еще это может быть одно или комбинация двух значений, разделенных пробелом, из следующих допустимых: top, bottom, center, left, right. Немного поэкспериментировав на практике, можно легко понять, что означает каждое из этих значений. Ввиду хорошей поддержки этого свойства современными браузерами, оно является весьма полезным во многих случаях. Рассмотрим несколько примеров: Примеры использования background-position background-position: 20px 70px; background-position: 50% 100%; background-position: bottom right; background-position: top center; background-position: left; Cвойство background-attachment определяет, будет ли изображение фона фиксироваться относительно окна просмотра (значение fixed) или будет перемещаться вместе с документом (значение scroll) в процессе его прокрутки. Рассмотрим сокращенный (shorthand) способ записи вышеупомянутых свойств фона. Это делается при помощи CSS-свойства background. Рассмотрим несколько примеров: 40 Сокращенная запись свойств фона background: #c8eeff url(../images/bg-body.png) repeat-x scroll top; Из примера видно, что значения свойств фона идут в следующем порядке: background-color, background-image, background-repeat, background-attachment и backgroundposition. В случае, когда необходимо задать одновременно несколько свойств фона в пределах одного селектора, предпочтение следует отдавать сокращенной записи. Если изображение фона выступает в качестве текстуры элемента, а не визуала, то помимо изображения желательно также указывать цвет фона. Это сделает загрузку документа более привлекательной, а также придаст стиль документу даже в случае отключенной опции загрузки изображений. Никогда не следует применять прием использования однопиксельного цветного изображения в качестве картинки фона, по причине того, что такой цвет браузер не в состоянии отобразить при помощи background-color. Такой подход может оказаться неожиданным для другого разработчика, что наверняка приведет к дополнительным затратам времени при модификации документа. Это предостережение касается новичков, потому, что, к сожалению, многие учебные пособия по HTML изобилуют подобными «полезными советами». 5.5.6Свойства цвета текста При помощи CSS-свойства color задается цвет текста. При этом желательно соблюдать правила изложенные в 4.2.5. 5.5.7Свойства границ элемента В этом разделе мы рассмотрим свойства отображения границ элемента: border, border-color, border-style, border-width, border-top, border-bottom, border-left, border-right. Цвет границы элемента задается при помощи свойства border-color (см. 4.2.5). Можно также использовать значение transparent, однако оно не поддерживается некоторыми браузерами. Свойство border-style задает стиль отображения границы. Его допустимые значения показаны на рисунке 5-1. Рисунок 5-1. Допустимые значения для border-style. Толщина границы определяется свойством border-width (см. также 5.4). О том, как влияет ширина границы на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2. Сокращенная запись свойств границы задается при помощи CSS-свойства border: Сокращенная запись свойств границы элемента border: 1px solid #f00; В примере определена сплошная граница элемента толщиной в один пиксель, красного цвета. Порядок указания свойств сокращенной записи может быть произвольным. Замечание: в IE6 при стилях границы dotted и dashed ширины границы в 1px не существует, браузер самостоятельно ставит ширину в 2px. Существует возможность определения границы элемента по частям – слева, справа, вверху и внизу. Для этого существуют соответствующие CSS-свойства: border-top-color, border-top-style, border-top-width, border-left-color, border-left-style, border-left-width и т.д. 41 Существуют также соответствующие свойства для сокращенной записи: border-top, borderbottom, border-left и border-right. Чтобы избавиться от отображения границы элемента, используйте свойство border-width с нулевым значением, например: Отмена отображения границы элемента input {border: none;} 5.5.8Свойства обтекания К свойствам обтекания относятся float и clear. Эти свойства широко используются в современных HTML-документах, оптимизированных для поисковых систем (см. раздел 7). Они отвечают за обтекание блоков текста и элементов. Свойство float может иметь одно из следующих значений: left, right или none (значение по умолчанию). Это свойство устанавливает правило обтекания – справа от объекта (значение left) или слева от объекта (значение right). Свойство clear отменяет обтекание для текущего элемента, при этом может принимать одно из следующих значений: left, right, both и none (значение по умолчанию). Соответственно, значение left отменяет обтекание справа, а значение right – обтекание слева, значение both отменяет обтекание с обеих сторон. 5.5.9Свойства внешнего отступа Свойство margin определяет внешний отступ для элемента по четырем сторонам: вверху, внизу, слева и справа. При этом он может быть задан по частям, используя свойства margin-top, marginbottom, margin-left и margin-right. Существует также сокращенная запись внешних отступов по сторонам. Рассмотрим несколько примеров: Внешний отступ margin: 10px; margin-top: 10px; margin: 10px 20px 30px 40px; margin: 10px 20px 30px; margin: 10px 20px; Первая запись в примере определяет внешний отступ, равный 10 пикселям по всем четырем сторонам элемента. Вторая запись определяет внешний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу и слева. В случае, когда отступ задан не для всех сторон, например как в четвертой и пятой записи, недостающие величины будут равны соответствующим величинам симметричных сторон. Так, в соответствии с четвертой записью, будет установлен внешний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись предполагает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей. 5.5.10Свойства внутреннего отступа Свойство padding определяет отступ внутри элемента по четырем сторонам: вверху, внизу, слева и справа. Аналогично свойству margin (см. 5.5.9), CSS-свойство padding может быть задано по частям, используя padding-top, padding-bottom, padding-left и padding-right. Сокращенная запись внутренних отступов по сторонам также похожа на аналогичную для свойства margin. 42 Внутренний отступ padding: 10px; padding-top: 10px; padding: 10px 20px 30px 40px; padding: 10px 20px 30px; padding: 10px 20px; Первая запись в примере определяет отступ внутри элемента, равный 10 пикселям по всем четырем сторонам. Вторая запись определяет внутренний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу, а затем слева. Четвертая запись определяет внутренний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись задает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей. О том, как влияет величина внутреннего отступа на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2. 5.5.11Свойства таблицы В данном разделе мы перечислим некоторые свойства таблицы, а именно table-layout и bordercollapse. Свойство table-layout определяет каким образом браузер должен вычислять размер ячеек таблицы. Оно принимает одно из двух допустимых значений: auto (значение по умолчанию) и fixed. Режим auto работает по умолчанию. Если свойство table-layout таблицы имеет значение fixed, то ширина колонок в этом случае определяется либо с помощью элемента col (крайне редкий вариант), либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы, по каким-либо причинам, получить невозможно, в этом случае, таблица делится на колонки равной ширины. Причем размер ячеек такой таблицы никогда не будет превышать установленные размеры, в отличие от таблицы со значением auto, когда в ячейку помещен какой либо элемент превышающий установленный размер ячейки, например большое изображение или длинный неразрывный текст. Другим преимуществом таблицы со значением fixed является более быстрая скорость отображения таблицы, так как в этом случае браузеру нет нобходимости ждать догрузки других элементов документа, входящих в таблицу, для определения ее размеров. Тем не менее, не стоит злоупотреблять использованием значения fixed для table-layout. Его нужно применять только в случаях необходимости. Свойство border-collapse может принимать одно из следующих значений: separate (значение по умолчанию) и collapse. Это свойство определяет, как браузер должен отображать границы вокруг ячеек таблицы. Значение separate говорит о том, что вокруг каждой ячейки отображается своя собственная рамка, соответственно в местах соприкосновения ячеек показываются сразу две линии. Значение collapse объединяет границы между ячейками в одну, что позволяет отобразить равномерную сетку для таблицы. Пример, приведенный ниже, показывает, как может быть получена такая сетка для всех таблиц документа. 43 Отображение сетки для таблицы table { border-collapse: collapse; } td { border: 1px solid #000; } 5.5.12Свойства отображения Свойства display и visibility являются свойствами отображения. Свойство display весьма универсально, оно определяет, должен ли элемент быть показан в документе, и если да, то каким образом. Он отличается от visibility тем, что при заданном значении none не резервирует пустое пространство под элементом, а временно удаляет его из документа. Свойство visibility, в свою очередь определяет лишь то, будет элемент показан или нет. При этом, даже если элемент не отображается (указано значение hidden), для него все равно будет зарезервировано пустое место. Свойство visibility имеет три допустимых значения: inherit (значение по умолчанию), visible и hidden. Свойство display имеет гораздо больше допустимых значений. Стандарт CSS 2.1 просто изобилует этими значениями, однако чаще всего используются следующие: none, inline, block, table, table-row, table-cell. Первое значение делает элемент неотображаемым, второе – элемент отображается как строчный (или инлайновый), третье – элемент отображается как блочный. Четвертое – элемент отображается, как таблица, пятый – строка таблицы, шестой – ячейка таблицы. Варианты 4-6 не поддерживаются в Internet Explorer 6.0. Очень важно понимать разницу между блочным, инлайновым и табличным элементом. 5.5.13Свойства размера CSS-свойства width и height говорят сами за себя – они определяют размер элемента, т.е его ширину и высоту. Значения для этих свойств задаются в любых единиицых измерения длины или в процентах (см. 5.4). При этом необходимо помнить об особенностях модели отображения блочных элементов. Эта тема обсуждается в разделе 6.2.2. 5.5.14Свойства позиции В этом разделе мы рассмотрим свойства, касающиеся позиционирования элементов, которые были определены в стандарте CSS 2, это position, left, right, top, bottom и z-index. Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов документа. На практике часто используются два его значения: relative и absolute. В случае relative, заданного в качестве значение, положение элемента устанавливается относительно родителя. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемых значений этих свойств (в том числе и отрицательных). Значение absolute указывает, что элемент позиционирован абсолютно. В этом случае его размер не учитывается в прорисовке документа, т.е. он не существует в обычном потоке прорисовки документа. 44 Положение элемента задается свойствами left, top, right и bottom относительно документа или ближайшего предка с позицией relative или absolute. Абсолютно позиционированные элементы могут накладываться друг на друга в документе, имитируя тем самым третье измерение, перпендикулярное экрану, или так называемую ось Z. Для решения конфликта взаимного расположения абсолютно позиционированных элементов и их наложения друг на друга, существует CSS-свойство z-index. Оно принимает любое целочисленное значение, положительное или отрицательное. Большее значение означает отображение элемента поверх всех остальных, т.е. выше по оси Z, меньшее – ниже. Абсолютное позиционирование элементов следует применять только в случаях крайней необходимости и не следуем им злоупотреблять. 5.5.15Свойства переполнения Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Допустимые значения: auto, hidden, scroll и visible (значение по умолчанию). Значение visible означает, что содержимое элемента будет отображаться даже за пределами установленной ширины и высоты. В случае hidden содержимое, которое не помещается в установленные размеры элемента, отображаться не будет. Значение auto говорит о том, что в случае, когда содержимое элемента выходит за его пределы, все что не попадает в указанный размер отображаться не будет, однако есть возможность их просмотра при помощи полос прокрутки, которые появятся там, где это необходимо. В случае scroll, полосы прокрутки будут всегда отображаться, вне зависимости от того, выходит ли содержимое за пределы установленного размера элемента. 5.6Порядок применения стилей и приоритеты Приоритеты CSS-инструкций определяются по нескольким критериям. Этими критериями являются последовательность подключения CSS-файла в HTML-документе, последовательность определения стилей внутри CSS, критерий веса селектора, наличие инструкции !important и другие. Подробно алгоритм вычисления приоритетов описан в спецификации W3C: http://www.w3.org/TR/CSS21/cascade.html. На практике все эти сложности знать ни к чему, достаточно понимать основополагающие идеи установки приоритетов для CSS-стилей. HTML-атрибуты, отвечающие за стиль отображения, например align, valign, bgcolor и пр., имеют самый низкий приоритет. Самый высокий приоритет имеют инлайновые записи стиля внутри атрибута style. Между ними – стили CSS, встроенные в документ с помощью элемента style и внешних CSSфайлов. В соответствии с правилами оформления HTML-документов (см. 6.2) крайние случаи приоритетов встречаются редко, соответственно, основное поле действия веб-разработчика – CSS файлы, или точнее, в общем случае один CSS-файл. Касательно приоритетов в пределах одного CSS-файла нужно знать следующее: 1. Существует наследование и переопределение свойств. 2. Имеет значение вес селектора. 3. В случае равновесных селекторов побеждает то определение стиля, которое записано последним. 4. Инструкция !important делает свойство высокоприоритетным. Наследование и переопределение свойств несложно понять, рассмотрев следующий пример: 45 Наследование и переопределение свойств div { color: #000; background: #0f0; } div.particular { color: #fff; } В примере, первое определение стиля для всех элементов div, говорит о том, что все они имеют черный цвет текста и зеленый цвет фона. Следующая запись определяет стиль для элементов div с классом «particular», к которым также применяется и первая запись. В данном случае, элементы div с классом «particular» будут иметь зеленый цвет фона, так как свойство background будет унаследовано от определения стиля для всех div элементов, а свойство color, т.е. цвет текста, будет переопределено на белый. Если эти два определения стиля поменять местами, т.е. сперва записать определение для элемента div с классом «particular», а затем общее определение для div, то общий результат не изменится потому, что в силу вступает вес селектора – «div.particular» более специализированный, чем просто «div», поэтому имеет больший вес. Последующее определение стиля равновесных селекторов имеет больший приоритет. Следующий пример продемонстрирует приоритетность последней записи стиля. Последняя запись приоритетнее предыдущей div { color: #000; } div { color: #fff; } В данном случае цвет текста div элементов документа будет белый, а не черный, потому, что определение белого цвета стоит ниже, чем определение черного. Что касается инструкции !important, то ее наличие делает CSS-свойство высокоприоритетным, независимо от позиции и веса селектора. Использование инструкции !important div { color: #000 !important; } div { color: #fff; } В этом случае цвет текста для элементов div будет черным. Инструкция !important записывается через пробел, после значения CSS-свойства. Инструкцию !important следует использовать в случаях особой необходимости, при решении конфликтов приоритета CSS-свойств. 46 5.7Основные способы персонализации стилей для браузеров Запись фильтра: <css filter> tag{…} Например: * html div{…} IE 6 и ниже * html или *html Только IE 7 *:first-child+html или *+html IE 7 и все современные браузеры html>body {} Все современные браузеры, кроме IE 7 html>/**/body {} Opera 9 и выше *:first-child+html или html:first-child Safari и FireFox (CSS3) body:last-child {} Замечание: под современными браузерами понимаются Firefox 2.0 и выше, Opera 9.0 и выше, Safari 2.0.2 и выше. IE 6 к их числу не относится. Также существует постоянно обновляемая таблица CSS-фильтров: http://thomas.tanreisoftware.com/css_filters/huzzah.html 47 6.ПРАКТИЧЕСКАЯ ВЕРСТКА 6.1Основые тэги, используемые при верстке HTML-документов: Основые тэги, используемые при верстке HTML-документов <!DOCTYPE html PUBLIC "..."> <html> <head> <title></title> <meta content=""/> <style type="text/css"></style> <link type="text/css" href="#"/> <script type=""></script> </head> <body> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <pre></pre> <p> <a></a> <strong></strong> <em></em> <big></big> <small></small> <sub></sub> <sup></sup> <cite></cite> <span></span> <br/> </p> <div> <object> <embed></embed> </object> 48 <img alt="" src="#"/> </div> <ul> <li></li> </ul> <ol> <li></li> </ol> <dl> <dt></dt> <dd></dd> </dl> <table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table> <form action=""> <div> <fieldset> <legend></legend> <label></label> <input/> <textarea></textarea> <select> <option></option> </select> </fieldset> </div> </form> </body> </html> 6.2Общие правила и рекомендации при написании HTML/XHTML кода 49 6.2.1С чего начинается документ Итак, с чего же начинается HTML-документ? Конечно же с описания его типа при помощи DOCTYPE! (см. 2). В первую очередь вы должны полностью осознавать какой именно тип документа вы собрались воплотить в жизнь. Впрочем, независимо от того, какой это будет документ, произвольный HTML или XHTML 1.0 Strict, вам в любом случае необходимо придерживаться общих правил форматирования (см. 4) и советам, изложенным здесь и в последующих разделах. При помощи конструкции DOCTYPE браузер определяет с каким типом документа он имеет дело. Ниже приведены конструкции DOCTYPE для основных видов документов. HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Следует отметить, что в Интернет встречается много документов с неполной записью DOCTYPE – когда не указан URL на DTD, либо не указан вовсе. В случае отсутствия DOCTYPE в документе, браузер настраивается на тип документа по умолчанию, который, как вы сами понимаете, может отличаться от ожидаемого. Подобные неточности являются причиной многих ошибок и трудностей при работе с такими документами. Самая известная особенность связанная с указанием типа документа – это модель отображения блочных элементов, характерная для браузеров Internet Explorer (см 6.2.2). Во избежание возможных ошибок и неприятностей всегда указывайте полную запись DOCTYPE. 6.2.2Модели отображения блочных элементов Учитывая популярность браузера Internet Explorer 6.0, можно по праву сказать, что существует две модели отображения блочных элементов, или так называемых боксовых моделей (box model):  Модель Internet Explorer (IE)  Стандартная модель W3C Модель IE говорит о том, что, если вы определяете ширину (width) блочного элемента (например элемента DIV), то величина отступа (padding) и ширина границы (border-width) входят в состав этой величины. Стандартная модель W3C утверждает обратное: величина отступа и ширина границы должны дополнять ширину элемента. В итоге имеем два абсолютно разных значений реальной (отображаемой) ширины объекта при одних и тех же значениях width, padding и border-width. Рассмотрим пример с ши50 риной объекта равную 200 пикселей, внутренним отступом в 20 пикселей и шириной границы, чтоже равной 20 пикселям. Получаем следующую запись в CSS: CSS фрагмент для объекта width: 200px; padding: 20px; border-width: 20px; Реальная (отображаемая) ширина объекта для модели Internet Explorer равна 200 пикселей, для модели W3C: 200 + 2*20 + 2*20 = 280 пикселей. Рисунок, приведенный ниже, наглядно демонстрирует эти различия. Рисунок 6-2. Модели отображения блочных элементов. Использование модели W3C обязывает делать дополнительные вычисления при работе с CSS. К тому же модель Internet Explorer кажется более логичной с точки зрения взаимного расположения и взаимодействия объектов. Тем не менее, стандарт есть стандарт, модель Internet Explorer следует считать устаревшей, а ориентироваться нужно на модель W3C. Браузер Internet Explorer 6.0 поддерживает обе модели, в зависимости от того, какой тип документа указан в начале документа. Имеет значение также и то, приведена полная его запись или укороченная, без URL на DTD. Таблица, приведенная ниже, описывает поведение Internet Explorer 6.0 в зависимости от записи DOCTYPE. 51 Таблица 6-2 – Конструкция DOCTYPE и модель отображения блочных элементов Internet Explorer 6.0 Конструкция DOCTYPE Режим Internet Explorer 6.0 DOCTYPE не указан Модель IE HTML 4.01 – не указан URL в DOCTYPE Модель IE HTML 4.01 – полная запись Модель W3C XHTML 1.0 – не указан URL в DOCTYPE Модель W3C XHTML 1.0 – полная запись Модель W3C Следует отметить, что есть еще одно принципиальное отличие между двумя моделями в Internet Explorer 6.0. Оно состоит в том, что стандартная модель рассматривает элемент html как отображаемый, который является контейнером для элемента body. Пример, приведенный ниже, поможет понять эту разницу. Пример отображения свойств элемента HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="background:red"> <head> <title>Style For HTML Element Sample</title> </head> <body style="background:blue; width:200px; height:150px"> <div style="background:yellow;">Content goes here ...</div> </body> </html> Если убрать описание DOCTYPE, Internet Explorer 6.0 покажет совершенно иную картину. 6.2.3Заголовок документа После описания типа документа, идут элементы: html, head и body (или frameset). В случае XHTML, элемент html должен содержать объявление пространства имен, используемое по умолчанию для всех входящих в него элементов. Это обусловлено тем, что XHTML это разновидность XML, а по правилам XML мы просто обязаны это сделать. Впрочем, не исключено, что если вы этого не сделаете, то никто (ни браузер, ни W3C-валидатор, ни тот, кто будет в дальнейшем работать с вашим документом) этого и не заметит. Мы не будем рассматривать все особенности спецификации XML, к тому же, я уверен, что пытливый читатель может самостоятельно в этом разобраться. Достаточно будет сказать, что описание пространства имен делается при помощи атрибута xmlns. 52 Описание пространства имен в XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> … </head> <body> … </body> </html> Следующее, что нужно сделать, это указать в какой кодировке создается ваш документ. Это делается при помощи тега meta в заголовке документа, внутри элемента head. Описание кодировки документа <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Кодировка задается непосредственно как значение параметра charset в HTTP заголовке contenttype. Разумеется, что указанная кодировка должна соответствовать физически той кодировке, в которой создан данный документ. Нет никакого смысла указывать, например, кодировку ISO-8859-1 в то время, когда документ у вас создан в кодировке UTF-16. Используемая кодировка зависит от того, для чего и для кого создается документ, какие языки в нем используются. Если у вас нет специальных требований, или вы не уверены, какую кодировку нужно использовать, используйте UTF-8. Кодировка UTF-8 весьма удобна из-за своей совместимости с набором символов Latin-1. Если не считать текстового наполнения, такой документ может быть легко отредактирован в любом редакторе, не поддерживающем юникод, и, в частности, кодировку UTF-8. К тому же, вы не будете испытывать неудобств если внезапно окажется, что в вашем документе должна присутствовать пара строк на японском языке, а вы никак не могли этого предусмотреть заранее. Документы XHTML в дополнение ко всему, могут содержать XML-заголовок с указанием кодировки. Этот заголовок должен идти в самой первой строке документа, что соответствует спецификации XML. 53 XML заголовок в XHTML документе <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> … </head> <body> … </body> </html> Такой заголовок нужен программам, работающим с XML. Его необязательно указывать во всех XHTMLдокументах, но в некоторых случаях это необходимо. Разумеется, что кодировка, указанная в XMLзаголовке и в теге meta должна совпадать. С технической точки зрения перечисленных пунктов вполне достаточно, чтобы документ правильно воспринимался браузером. Далее в заголовке документа следует перечень ключевых слов и краткое описание, характеризующее эту страницу или сайт в целом, директивы для поисковых роботов и пр. Их нужно указывать, если на то есть специальные требования. Более подробно об оптимизации страницы для поисковых систем написано в разделе 7. Следом за перечнем тегов meta идет немаловажный элемент title. Затем подключение внешнего CSS-файла при помощи элемента style или элемента link. Возможно 3 варианта подключения CSS: Все стили описываюся в HTML: <style type="text/css" media="all"> div {…} </style> Cтили загружаются из внешнего файла <link href="all.css" rel="stylesheet" type="text/css" /> или <style media="all" type="text/css">@import "all.css";</style> Параметр media указывает какому типу устройств соответствует данный блок стилей. Cписок распознаваемых дескрипторов устройств: screen - предназначен для дисплеев без постраничной разбивки. tty - предназначен для устройств, использующих набор символов фиксированной ширины, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями вывода информации. tv - предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране). projection - предназначен для проекторов. 54 handheld - предназначен для портативных устройств (небольшие монохромные экраны с ограниченной полосой частот, растровая графика). print - предназначен для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. braille - предназначен для устройств чтения азбуки брайля. aural - предназначен для речевых синтезаторов. all - предназначен для всех устройств. Далее следует подключение, при надобности, JavaScript. Скрипт находится в HTML: <script language="JavaScript"><!-function(){ … } //--></script> Скрипт загружается из внешнего файла <script src="script.js" type="text/javascript"></script> Теперь переходим к рассмотрению разделов, касающихся тела документа. 6.2.4Часто используемые элементы и атрибуты В данной главе мы рассмотрим особенности написания некоторых элементов, ставшими de facto при составлении HTML/XHTML документов. 6.2.4.1Таблица: cellpadding, cellspacing, border, width Типичное, и, на мой взгляд, правильное описание таблицы в HTML документе строгого дизайна выглядит следующим образом: Таблица <table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”> Указывать ширину, разумеется, необязательно, все зависит от обстоятельств. Что касается других атрибутов, то многие могут поспорить и сказать, что существуют их аналоги в CSS и, логичнее было бы один раз указать их в CSS для всех таблиц. Давайте их рассмотрим. Аналогом для cellspacing является утвержденное стандартом CSS свойство border-spacing. Однако, проблема в том, что это свойство не понимается, наиболее популярным в настоящий момент, браузером Internet Explorer 6.0. Поэтому, можно сказать, что это свойство совершенно бесполезно, по крайней мере до выхода новой версии Internet Explorer, где эта проблема наверняка будет решена. Впрочем, существует альтернатива определения этого свойства таблицы с CSS. Свойство border-collapse со значением «collapse» решает эту проблему (см. также 5.5.11). Использование border-collapse как альтернативы для cellspacing table { border-collapse: collapse; } Аналогом для cellpadding является CSS свойство padding, элемента TD. Здесь придраться не к чему, кроме того момента, что cellpadding, описанный для конкретной таблицы, повлияет только на текущую таблицу. В свою очередь padding описанный для всех элементов TD будет иметь влияние на все таблицы, что не всегда приемлемо, особенно в случаях использования нескольких CSS файлов в одном документе, когда приоритеты некоторых описанных вами CSS стилей могут быть восприняты браузером неоднозначно. Что касается border, то он также может быть опущен, поскольку по умолчанию 55 браузер не рисует рамку таблицы. Однако его присутствие может упростить отладку документа – для того чтобы увидеть структуру таблицы, достаточно изменить ноль на единицу: border=”1”. 6.2.4.2Изображение: width, height, alt, border Типичная запись для изображения выглядит следующим образом: Изображение <img src="mypic.jpg" width="100" height="70" border="0" alt="" /> Элемент IMG как правило должен содержать помимо обязательного атрибута SRC, атрибут ALT, регламентированный стандартом HTML 4 как обязательный. Атрибуты WIDTH и HEIGHT должны быть указаны для того, чтобы облегчить работу браузеру по построению отображаемой страницы. Дело в том, что если атрибуты WIDTH и HEIGHT не указаны, браузер не знает какого размера изображение до того момента пока оно не загружено. К тому же, наличие этих атрибутов сохранит правильное отображение документа даже в том случае, если загрузка изображений выключена пользователем. Не следует забывать и про атрибут BORDER, который как правило имеет значение 0 в документах строгого дизайна. Типичная проблема заключается в том, что когда тег IMG заключается в гиперссылку (элемент A), то на странице появляется нежелательный эффект – появляется рамка изображения. Для предотвращения этой проблемы, независимо от того, находится изображение внутри гиперссылки или нет, следует всегда применять атрибут BORDER со значением 0. Этот атрибут также может быть успешно замещен стилем, заданным в CSS (см. также 5.5.7): Определение border для изображений в CSS img { border-width: 0px; } Такой записи будет достаточно, чтобы не использовать атрибут BORDER для каждого элемента IMG. 6.2.4.3Элемент DIV Элемент DIV представляет собой блочный (по умолчанию) элемент, который используется чтобы отделить один фрагмент кода от другого. Он широко используется в документах, оптимизированных для поисковых систем, когда использование таблиц запрещено. С его помощью позиционируют различные элементы страницы. Кроме разделения кода, никакого смысла этот элемент не несет. Его значение определяют стили CSS. Таким образом, этот элемент чаще всего выступает в роли контейнера для других элементов HTML, с помощью которого веб-разработчик определяет их вид и позицию при отображении. 6.2.4.4Атрибуты class и id Атрибут CLASS определенно являются самым часто используемым атрибутом в HTML документе. Однако не стоит этим злоупотреблять. Наличие атрибута в каждом, или почти каждом, элементе документа говорит о плохом стиле. CSS должен быть грамотно составлен с тем, чтобы атрибутов CLASS в документе было как можно меньше. Например, если ячейки таблицы документа должны обладать некими одинаковыми свойствами, то эти свойства логичнее будет задать с помощью контекстного селектора (см. 5.2), а не прописывая атрибут CLASS для каждой ячейки таблицы, и уж тем более не определяя эти свойства для всех ячеек всех таблиц. 56 HTML код <table class=”special-table” border=”0” cellpadding=”0” cellspacing=”0”> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </table> CSS для ячеек таблицы table.special-table td { border: 1px solid #000000; } Существует возможность перечисления нескольких классов в качестве значения для атрибута CLASS. Все они будут применятся одновременно, по правилам приоритетов для селекторов, описанных в разделе 5.6. Названия классов должны быть разделены пробелом, как это показано в следующем примере: Указание нескольких классов для одного элемента <div class=”custom bordered”>…</div> То же самое касается атрибута ID, с той лишь разницей, что ID не может повторяться в документе несколько раз. Соответственно, атрибут ID идентифицирует некий уникальный блок или элемент документа, например верхнюю навигацию, нижний колонтитул, блок копирайтов и пр. Не следует использовать атрибуты ID если предполагается усиленное использование JavaScript на странице – это создаст дополнительные сложности для программистов JavaScript. 6.2.5Неиспользуемые или редко используемые элементы и атрибуты В данном разделе описаны те элементы и атрибуты, использование которых следует свести к минимуму или не использовать их вовсе. 6.2.5.1Элемент FONT С некоторых пор, элемент FONT считается неприемлемым для использования, что подтверждает консорциум W3C. Дело в том, что элемент FONT не является элементом определяющим структуру документа, но отвечает только за стиль отображения. Так как все стили должны быть вынесены в CSS для того, чтобы HTML документ в большей степени отражал структуру документа и в меньшей степени его стиль, то использование элемента FONT создает дополнительные трудности при редактировании документов и их преобразовании к другим спецификациям. Поэтому никогда не используйте элемент FONT. 6.2.5.2Элемент HR Элемент HR (horizontal rule) предназначен для отображения горизонтального разделителя в виде линии. В документах строгого дизайна элемент HR практически не используется по причине его специфического отображения различными браузерами. Старайтесь не использовать этот элемент без особой необходимости. 6.2.5.3Элемент MAP Элемент MAP создан для нанесения координатной сетки на изображение, выделяя таким образом, области картины, являющиеся гиперссылками. 57 Использование элемента MAP вносит излишнюю путаницу в структуру документа, делая его менее понятным для поисковых роботов, да и людей тоже. Следует избегать использования этого элемента без особой на то необходимости. 6.2.5.4Элемент FRAME Использование элемента FRAME подразумевает использование фреймовой структуры документа, для чего должно быть соответствующее требование со стороны заказчика. Использование фреймовой структуры документа имеет ряд недостатков, в числе которых труднодоступность содержания некоторых документов поисковым роботом, невозможность адресации конкретной страницы фрейма и пр. Не используйте фреймы, если для это не указано в требованиях. 6.2.5.5Атрибут NOWRAP Атрибут NOWRAP предназначен для указания того, что текст внутри элемента не должен разбиваться на несколько строк. С некоторых пор, атрибут NOWRAP весьма непопулярен, на смену ему пришло CSS свойство whitespace со значением nowrap. Используйте атрибут NOWRAP для браузеров, которые не поддерживают CSS свойство white-space. Как правило, это уже устаревшие браузеры вроде Internet Explorer 5.0 или Netscape 4. В случае XHTML, атрибут NOWRAP, как и любой другой атрибут, по правилам XML обязательно должен иметь значение. Атрибут NOWRAP в XHTML <td nowrap=”nowrap”>…</td> 6.2.5.6Атрибут ROWSPAN Атрибут ROWSPAN элемента TD указывает, сколько строк таблицы должны быть объединены в одну. Из-за неоднозначного понимания браузерами, этот атрибут делает себя крайне непопулярным. Старайтесь избегать использования этого атрибута в своих документах. Следуя этому правилу вы будете более уверены в том, что ваш документ будет правильно отображаться в различных браузерах. 6.2.5.7Атрибут STYLE Атрибут STYLE задает CSS стиль для элемента в HTML документе. Как это уже обсуждалось выше для элемента FONT, применять атрибут STYLE нужно в случаях крайней необходимости или в целях отладки. Преимущество этого атрибута заключается в том, что CSS стили, описанные внутри него имеют наивысший приоритет по сравнению с HTML атрибутами отвечающими за стиль и любыми другими стилями для этого элемента, описанные в CSS. 6.2.5.8Атрибуты HSPACE и VSPACE Атрибуты HSPACE и VSPACE задают горизонтальный и вертикальный отступ соответственно, для изображений, описанных в документе с помощью элемента IMG. В этих атрибутах нет ничего плохого, за исключением того, что как правило они оказываются бесполезными в документах строгого дизайна. К тому же, они отвечают за стиль отображения а не за структуру документа. Вместо них разумнее использовать CSS свойство margin. 6.2.6Отступы При составлении HTML/XHTML документа очень часто возникает необходимость добавления отступа как для текста, так и для других элементов документа. Существует несколько вариантов сделать отступ. В этом разделе мы рассмотрим как следует делать отступы и как этого делать не следует. 6.2.6.1Правило для   Неразрывный пробел или   (сокр. от non-breaking space) предназначен для связывания нескольких слов текста пробелом, запрещающим перевод строки. Например, если вы хотите, чтобы название 58 фирмы состоящее из нескольких слов, например Coca Cola, не было разбито на строки, используется следующая запись: Coca Cola. Как следствие,   может быть использован для вставки одного пробела или нескольких пробелов в любой части документа. Использование нескольких   в качестве отступа это, обычно, первая мысль, которая приходит в голову новичку (конечно, если он знает что такое  ). Однако, следует иметь в виду, что этот способ является неправильным. Наличие в документе двух и более   подряд свидетельствует о непрофессионализме автора документа. Простое правило для   заключается в том, что если вам одного неразрывного пробела для отступа недостаточно, то для этой цели следует использовать другой способ. Существует также замечание относительно использования   в качестве наполнителя пустых ячеек таблицы и других блочных элементов, таких как DIV. В документах строгого дизайна такой подход зачастую неприемлем по причине того, что в текущем контексте элемента сущность   имеет высоту равную высоте текстовой строки в данном контексте. Поэтому в таких случаях, вместо   лучше использовать однопиксельный прозрачный GIF с указаными шириной и высотой в один пиксель. 6.2.6.2 Использование однопиксельного прозрачного GIFа Использование однопиксельного прозрачного изображения в формате GIF является одним из самых древних и популярных решений проблемы отступа в HTML. Идея данного метода заключается в том, что нужная высота или ширина (или и то и другое) выставляются в атрибутах WIDTH и HEIGHT элемента IMG, который представляет собой однопиксельный прозрачный GIF. Растягиваясь, это изображение визуально никак не изменяется, т.е. остается прозрачным. Безусловным преимуществом этого подхода является то, что с его помощью можно задавать как горизонтальные так и вертикальные отступы. Пример использования однопиксельного прозрачного GIFа <img src="images/spacer.gif" width="10" height="25" border="0" alt="" /> Популярность этого метода объясняется тем, что такое решение понимают практически все браузеры одинаково. Несмотря на то, что с появлением современных браузеров и хорошей поддержкой CSS, использование такого решения становится более редким, но все еще приемлемым. Разумеется, такой подход не добавляет ясности в структуру HTML кода, но скорее является вынужденной мерой при составлении особенно тех документов, которые должны поддерживать максимальное количество доступных в Интернет браузеров. 6.2.6.3Использование CSS свойств Не стоит увлекаться использованием однопиксельного прозрачного изображения, если вам не нужна совместимость документа со старыми браузерами. Вместо этого используйте CSS атрибуты, такие как margin (см. 5.5.9), padding (см. 5.5.10) и text-indent. 6.3Проверка документов на соответствие спецификациям Для того чтобы убедиться, что ваш документ соответствует заданной (и описанной в DOCTYPE) спецификации, существует специальный сервис, или так называемый валидатор, предоставленный консорциумом W3C и доступный по адресу: http://validator.w3.org/ W3C валидатор является весьма удобным средством для проверки валидности документов и выявления ошибок. Он четко покажет в какой строке ошибка и на что следует обратить внимание для документов данного типа. Помимо проверки HTML и XHTML это средство также пригодно для оценки документов, имеющих родство с XHTML, таких, как, например XHTML+MathML, XHTML+MathML+SVG, а также SVG. Проверка CSS файла также возможна, используя соответствующий W3C сервис, доступный по адресу: http://jigsaw.w3.org/css-validator/ 59 Я думаю нет нужды говорить, что следование общепринятым стандартам написания веб-документов вносит вполне очевидную упорядоченность в многоликом изобилии Интернета. Это, несомненно, является хорошим тоном любого веб-разработчика, от индивидуальной личности до крупной компании. 60 6.4Основные виды layout веб-страниц Все примеры ориентированы на реализацию при <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1. Фиксированный (fixed) - имеет фиксированную ширину контента. HTML: <div id="main"> <div id="header"> header </div> <div id="leftcolumn"> left column </div> <div id="content"> content </div> <div id="rightcolumn"> right column </div> <div id="footer"> footer </div> </div> 61 CSS: #main { } #leftcolumn { margin: 0 auto; width: 100px; width: 710px; float: left; } } #header { #content { width: 710px; width: 500px; height: 50px; float: left; } } #footer { #rightcolumn { width: 710px; width: 110px; height: 50px; float: left; clear: both; } 62 1.1. Может содержать резиновые шапку (header) и/или подвал (footer). HTML: <div id="header"> header </div> <div id="main"> <div id="leftcolumn"> left column </div> <div id="content"> content </div> <div id="rightcolumn"> right column </div> </div> <div id="footer"> footer </div> 63 CSS: #main { } #leftcolumn { margin: 0 auto; width: 100px; width: 710px; float: left; } } #header { #content { width: 100%; width: 500px; height: 50px; float: left; } } #footer { #rightcolumn { width: 100%; width: 110px; height: 50px; float: left; clear: both; } 64 2. Резиновый (flexible) - имеет динамически меняющуюся ширину контента, зависящую от размера окна браузера. HTML: <div id="main"> CSS: #main { <div idclass="header"> header </div> width: 100%; } #header { <div id="content"> width: 100%; content height: 50px; </div> } <div id="footer"> #footer { footer width: 100%; </div> height: 50px; </div> clear: both; } #content { width: 100%; float: left; } 65 2.1. Может содержать одну или более колонок фиксированной ширины. HTML: <div id="main"> <div id="header"> отступ для rightcolumn. CSS: * html #content { margin-left: 5px; header </div> } <div class="content-holder"> *+html #content { margin-left: 5px; <div id="leftcolumn"> left column </div> <div id="rightcolumn"> } Замечание: Сокращать до * html .content,*+html .content нельзя. right column </div> <div id="content"> content </div> </div> <div id="footer"> footer </div> </div> Замечание: Если ширина правой колонки меньше чем отведенное для нее в contentHolder'е место и если между rightcolumn и content должен быть отступ (допустим в 5px), то для IE (как 6-й так и 7-й версий) надо указать левый 66 CSS: #main { width: 100%; } #header { width: 100%; height: 50px; } #footer { width: 100%; height: 50px; clear: both; } .content-holder { padding: 0 110px 0 100px; } #leftcolumn { width: 100px; float: left; display: inline; /* решение проблемы в IE 1*/ position: relative; margin-left: -100px; } #rightcolumn { width: 110px; float: right; display: inline; /* решение проблемы в IE */ position: relative; margin-right: -110px; } #content { width: 100%; float: left; } В IE6 есть проблема: при указании свойства float в состояние left либо right соответствующий margin (marginleft либо margin-right соответственно) удваивается. 1 67 2.2 Может содержать одну или более колонок относительной ширины. HTML: <div id="main"> <div id="header"> header </div> <div class="content-holder"> <div id="leftcolumn"> left column </div> <div id="rightcolumn"> right column </div> <div id="content"> content </div> </div> <div id="footer"> footer </div> </div> 68 CSS: #main { width: 100%; float: left; display: inline; /* решение проблемы в IE */ position: relative; } margin-left: 20%; #header { width: 100%; height: 50px; } #rightcolumn { width: 22%; } float: right; #footer { width: 100%; display: inline; /* решение проблемы в IE */ height: 50px; position: relative; clear: both; margin-right: 22%; } } .content-holder { #content { padding: 0 22% 0 20%; width: 100%; } float: left; #leftcolumn { } width: 20%; 6.5Основные элементы страниц: логотип, меню, табы, формы; применение готовых JS решений 6.5.1Логотип При оформлении графического логотипа, слогана и т.п. используется подмена текста изображением: HTML: <strong class="logo"> CSS: .logo { Logo Name display: block; </strong> width: 100px; height: 100px; background: url(logo.gif); text-indent: -3000px; overflow: hidden; } Если логотип – PNG- изображение (работа с PNG подробнее рассмотрена в «Способы использования PNG для отображения теней») и в то же время ссылка, то надо для IE6 применить хитрость: 69 HTML: <a href=”#” class="logo"> CSS: a.logo { Logo Name display: block; </a> width: 100px; height: 100px; background: url(logo.png); text-indent: -3000px; overflow: hidden; } * html a.logo{ backgound-position: -100% -100%; background-repeat: none; filter: progid:dximagetransform.microsoft. alphaimageloader(src='images/logo.png', sizingmethod='crop'); } Таким образом, в местах прозрачности курсор не будет «проваливаться» и переставать видеть ссылку. Это полезно, если логотип выглядит, как текст. 70 6.5.2Меню Меню оформляется с использованием ul/li: HTML: <ul> <li> <a href=”#”>List1</a> </li> <li> <a href=”#”>List2</a> </li> <li> <a href=”#”>List3</a> </li> </ul> Подобным образом оформляются и вложенные меню: 71 <a href="#">List2.2</a> HTML: <ul> </li> <li><a href="#">List1</a> <li> <ul> <a href="#">List2.3</a> <li> </li> <a href="#">List1.1</a> </ul> </li> </li> <li> <li><a href="#">List3</a> <a href="#">List1.2</a> <ul> </li> <li> <li> <a href="#">List3.1</a> <a href="#">List1.3</a> </li> </li> <li> </ul> <a href="#">List3.2</a> </li> </li> <li><a href="#">List2</a> <li> <ul> <a href="#">List3.3</a> <li> </li> <a href="#">List2.1</a> </li> <li> </ul> </li> </ul> Для реализации выпадающего меню добавляем id для корневого ul, это нужно для IE. Для остальных браузеров хватит CSS: 72 </li> HTML: <ul id="nav"> </ul> <li><a href="#">List1</a> <ul> <li><a href="#">List1.1</a></li> CSS: #nav li { <li><a href="#">List1.2</a></li> border: 1px solid #000; width:150px; <li><a href="#">List1.3</a></li> background:#fff; </ul> list-style:none; </li> } <li><a href="#">List2</a> #nav li.hover, <ul> <li><a href="#">List2.1</a></li> <li><a href="#">List2.2</a></li> <li><a href="#">List2.3</a></li> </ul> </li> #nav li:hover { position: relative; } #nav li.hover ul, #nav li:hover ul { display: block; } #nav ul { <li><a href="#">List3</a> display: none; <ul> position: absolute; <li><a href="#">List3.1</a></li> left: 50%; <li><a href="#">List3.2</a></li> top: 50%; /* left и top смещение относительно родительского элемента */ <li><a href="#">List3.3</a></li> } </ul> 73 JS: initNav = function() { var lis = document.getElementById("main-navigation").getElementsByTagName("li"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover = function() { this.className += " hover"; } lis[i].onmouseout = function() { this.className = this.className.replace(" hover", ""); } } } if (document.all && !window.opera && (typeof document.body.style.maxHeight == 'undefined')) attachEvent("onload", initNav); 74 6.5.3Табы HTML: <div class="tabset"> CSS: .tabset {float:left;} <a href="#tab1" class="tab active">Tab1</a> a.tab { border: 1px solid #000; <a href="#tab2" class="tab">Tab2</a> float: left; margin: 0 0 -1px; <a href="#tab3" class="tab">Tab3</a> </div> <div class="tab" id="tab1">Tab1 text</div> <div class="tab" id="tab2">Tab2 text</div> position: relative; } a.active{border-bottom-color: #fff;} div.tab { border:1px solid #000; <div class="tab" id="tab3">Tab3 text</div> clear: both; } 75 JS: function initTabs() { var sets = document.getElementsByTagName("div"); for (var i = 0; i < sets.length; i++) { if (sets[i].className.indexOf("tabset") != -1) { var tabs = []; var links = sets[i].getElementsByTagName("a"); for (var j = 0; j < links.length; j++) { if (links[j].className.indexOf("tab") != -1) { tabs.push(links[j]); links[j].tabs = tabs; var c = docu.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1)); if (c) if (links[j].className.indexOf("active") != c.style.display = "block"; else c.style.display = "none"; links[j].onclick = function () { var c = docu.getElementById(this.href.substr(this.href.indexOf("#") + 1)); if (c) { //reset all tabs for (var i = 0; i < this.tabs.length; { document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = e"; this.tabs[i].className = .tabs[i].className.replace("active", ""); } this.className += " active"; 76 c.style.display = "block"; return false; } } } } } } } if (window.addEventListener) window.addEventListener("load", initTabs, false); else if (window.attachEvent) window.attachEvent("onload", initTabs); 77 6.5.4Формы Основняые тэги, используемые при верстке форм указаны в 6.1 При оформлении форм необходимо учитывать, что при прикручивании к движку на сервере тэг form может быть удален из тела документа (в ASP.NET тэг form должен быть один на весь документ). Т.е. делаем так: HTML: <form action="#"> <div class="form"> ... </div> </form> И теперь все оформление привязываем к div.form. Привыкнув так оформлять формы, мы убиваем двух зайцев: избавляемся от возможных проблем с клиентским ASP и пишем валидный код под XHTML 1.0 Strict, где элементы форм относительно тэга <form> должны быть завернуты в блочный элемент. При оформлении форм необходимо использовать определение полей label с привязкой к соответствующему полю ввода: HTML: <label for="first-name">First Name</label> <input type="text" id="firstName"/> <label for="country">Country</label> <select id="country"> <option>Afghanistan</option> <option>Albania</option> ... </select> Важно! Важно! Для обеспечения правильного отображения информации при отключенном CSS (а это одно из требований accessibility) необходимо располагать тэг label непосредственно перед соответствующим ему элементом формы. Параметр name в элементах формы вводить не надо, это сделают программисты в соответствии со своими потребностями. 78 При идущих подряд полях ввода с одним описанием привязку делаем на первое поле: HTML: <label for="date">Date</label> <select id="date"> <option>Year</option> <option>1972</option> <option>1973</option> ... </select> <select> <option>Month</option> <option>1</option> <option>2</option> ... </select> <select> <option>Month</option> <option>January</option> <option>February</option> ... </select> Поле ввода типа textarea должно содержать параметры col и row: HTML: <textarea cols="20" rows="5"></textarea> Замечание в принципе col и row можно оставить пустым, но хорошим тоном считается оформить textarea так, что бы и без CSS вид был приличный. При визуальном оформлении элементов форм можно пользоваться как чистым CSS, так и внешними скриптами, берущими на себя эту задачу (частично, как будет видно далее). При оформлении средствами CSS надо учитывать, что:  в IE у select нельзя штатными средствами поменять оформление border’а;  в Safari padding в полях ввода воспринимается как отступ внутри указанной ширины (подобное поведение для padding наблюдается в IE при DOCTYPE HTML 4.01 Transitional);  центровка текста в полях типа text производится манипуляциями с верхним и нижним padding (FF и Opera) и line-height (IE) методом подбора значений (как правило, если получившееся значение height поставить в line-height, то в IE все становится на свои места);  для IE7 надо персонально указывать высоту поля select. 79 Рассмотрим NiceForms (http://www.badboy.ro/articles/2007-01-30/niceforms/) на данный момент версии 1.0 Стандартный вид (в IE) Вид с включенным NiceForms (в IE) Скрипт занимается подстановкой изображений (края, уголки, чекбоксы, флаги и т.п.) к уже оформленным через CSS элементам форм. Область действия определяется назначением класса niceform на тэг form, т.е. при порезке под ASP определить, какие блоки оформлять, а какие нет – нельзя: оформлены будут или все формы, или ни одна (хотя, конечно, можно отредактировать родной JS и поменять критерии поиска блока, в котором скрипт будет работать). Имена изображений можно менять в «родном» JS. Ограничения для всех подобных решений – невозможно сделать оформление для полей типа text, textarea, button, file в Safari. Есть способ оформить поле ввода типа file, но сделать его одинаково корректно работающим во всех браузерах невозможно, поэтому он рассматриваться не будет, и лучше этого не делать вообще. 80 6.6Способы использования PNG, в том числе для отображения теней При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр: CSS: div{ background:url(image.png); } * html div{ background:none; filter:progid:dximagetransform.microsoft.alphaimageloader(src='image.png', sizingmethod='crop'); } Важно! Параметр src указывается относительно страницы, а не CSS, т.е. если css-файл лежит в папке CSS, a image.png в IMAGES, то код будет выглядеть так: CSS: div{ background:url(../images/image.png); } * html div{ background:none; filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/image.png', sizingmethod='crop'); } В то же время, если поместить в контейнер, например, ссылку, то в IE ссылка не будет рабочей, т.к. фильтр перекроет собой ссылку. У этой проблемы есть два варианта решения: либо вырезаем в PNG на месте ссылки дыру и тогда фильтр пропустит фокус на ссылку, либо назначаем ссылке свойство position:relative и ссылка, образно выражаясь, поднимется выше фильтра и станет активна. Второй вариант, как правило, наиболее приемлем им и будем пользоваться. При использовании PNG в качестве тянущегося фона (тени): 81 в строке filter:progid… необходимо указывать параметр sizingmethod='scale', в этом случае изображение будет растянуто по размеру всего блока. И снова все дочерние блоки окажутся перекрыты фильтром и ссылки не будут активными. Указываем первому дочернему блоку position:relative и проблема решается. HTML: <div class="shadow"> CSS: .shadow{ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis risus. Nam et <a href="#">ipsum ut justo</a> condimentum… </p> width:410px; background:url(shadow.png) repeat-y; padding:5px 0 100px; <p>Nullam sit amet libero. Pellentesque… </p> </div> margin:0 auto; } * html .shadow{ background:none; filter:progid:dximagetransform.microsoft.alp haimageloader(src='shadow.png', sizingmethod='scale'); } .shadow p{ position:relative; margin:0 20px 16px; font:11px/16px solid tahoma,sansserif; } Следующий момент надо запомнить, как догму и при использовании фильтра в IE всегда учитывать: так как фильтр в IE не является полноправным заменителем свойства background, то и ни один из параметров этого свойства на него не распространяется: -repeat – номинально заменяется методом sizingmethod, но: при значении scale изображение растягивается, а не повторяется, при значении crop изображение обрезается, по размеру блока; -position – не работает совсем, невозможно позиционировать изображение относительно блока; -color – тоже никак не реализуется средствами непосредственно фильтра. Но если вместо background:none указать background:red, то под изображением затеплится красный фон. Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. 3.4) 82 6.7Способы и особенности создания страниц с изменяемым размером шрифта В IE, при изменении состояния пункта меню «Вид → Размер шрифта» или вращении колеса мыши с зажатым Ctrl, наблюдается изменение размера текста. Под изменяемым размером шрифта понимается указание относительного значения в параметре fontsize. Относительными единицами измерения являются % и em. При этом, по сути, 1em = 100%. При принятии решения каких именно единицах измерения делать верстку надо учитывать, что при указании в em разница между размерами при разных состояниях пункта меню будет больше, чем при использовании %. По-умолчанию в IE font-size имеет значение middle, что соответствует 16px. Расчет производится относительно унаследованного значения: HTML: <p><a href=”#”>Link</a></p> CSS: html{ `font-size:100.01%; /* см. ниже */ } body{ Важно! Значение 100,01% у html указывается для решения проблемы неверного вычисления размера шрифта в Opera. font-size:middle; } p{ font-size:70%; /* 11px */ } p a{ font-size:100%; } В данном случае размер шрифта у тэга <a> будет примерно равен 11px (на самом деле 11,24px, такое значение необходимо для Opera, в ней не корректно организовано вычисление дробных величин). Порядок работы может быть разный:    можно сначала рассчитать соответствие % или em к px, используя как базовый 16px и использовать полученные значения при дальнейшей верстке; можно сначала сделать верстку с использованием px, а потом пройтись по всему CSS и заменить все значения font-size с px на % или em; можно использовать и такой вариант: CSS: html{ font-size:100.01% } body{ font-size:64%; } Важно! Во всех руководствах указывается значение 62.5% для body, но опытным путем выявлено, что вернее ставить 83 именно 64% (большое спасибо Opera). Следует помнить, что при использовании относительных величин свойство line-height вычисляется от величины font-size этого же блока, если не было унаследовано от родительского блока. Т.е. при font:10px/1.2em или font:10px/120% line-height будет равняться 12px. Важно! Теперь 10% = 1px или 1em = 10px. Далее можно указывать размеры шрифтов, вычисляя делением указанных в дизайне на 10. Также теперь можно использовать em (но только em) для указания линейных размеров блоков, при изменении размера шрифта размер сайта будет меняться. (см. 6.8) 6.8Создание страниц с использованием em для указания размеров элементов страницы Как привести размер базового шрифта к удобному размеру описано в 6.7. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные. 6.9Особенности табличной верстки При табличной верстке надо обнулить padding и margin, как у самой таблицы так и у вложенных td. Также надо избавиться от граничных отступов: border-collapse:collapse. HTML: <table class=”table”> CSS: table.table{ <tr> padding:0; <td>Cell1</td> margin:0; <td>Cell1</td> border-collapse:collapse; </tr> </table> } table.table td{ padding:0; margin:0; } Таким образом, мы избавляемся от записи параметров тэга <table>. Следует избегать использования rowspan: в некоторых браузерах rowspan не всегда корректно обрабатывается. Элементам tr и td не следует присваисать свойства position:absolute и float, так как это может привести к совершенно разным результатам в разных браузерах (рекомендуется с этим поэкспериментировать, чтобы иметь представление о предмете). Так же надо учитывать, что на блоки имеющие свойства display:table, display:table-row, display:table-cell накладываются те же ограничения. 6.10Создание email-шаблонов При создании email-шаблонов, как правило, используется табличная верстка. Все email-кленты поддерживают <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.02 Final//EN”> на который и следует ориентироваться. В большинстве случаев, нельзя использовать некоторые свойства CSS: background-image, кроме как на body; float; position и много еще чего, полная таблица поддержки email-клиентами свойств CSS в 9.1. 84 6.11Особенности создания принт-версии страницы При создании принт-версии надо учитывать, что px на экране и px на принтере – это далеко не одно и то же. Принтер работает с таки понятием, как dpi (dots per inch) – количество точек на дюйм. Т.е., если, допустим, изображение шириной 700×700px на экране занимает половину окна браузера, то это еще не значит, что и на листе формата А4 оно будет занимать пол-листа. Также надо учитывать, что при выводе на принтер каждый браузер ставит свои поля печати и вообще имеет собственное представление об области печати и разрешающей способности принтера. Таким образом, надо иметь ввиду, что сделать абсолютно одинаковую для всех браузеров принт-версию невозможно. Исходя из всего вышесказанного, писать принт-версию «вслепую» нельзя: каждый шаг перепроверяем под всеми браузерами. Есть два основных метода создания принт-версий: 1. модификация all.css; 2. с нуля. В первом случае мы используем уже готовые стили, описанные в all.css (см. 4.1). В print.css выносятся только те фрагменты, которые надо изменить: контейнерам, которые надо удалить присваивается свойство display:none;, переназначаются размеры блоков и иллюстраций и т.д. Во втором пишем отдельно screen.css и print.css (см. 4.1). В этом случае принт-версия не зависит от стилей экранной версии. При верстке принт-версии рекомендуется при обозначении горизонтальных параметров пользоваться относительными единицами измерения, т.е. %. Например: HTML: <div id="main"> <div id="header">header </div> <div id="leftcolumn">left column</div> <div id="content">content</div> <div id="footer">footer </div> </div> 85 screen.css: #main { margin: 0 auto; width: 710px; } print.css: #main {width: 100%;} #header { } width: 100%; #header { height: 50px; width: 710px; height: 50px; } #footer { } width: 100&; #footer { width: 710px; height: 50px; height: 50px; clear: both; clear: both; } #leftcolumn { } width: 20%; #leftcolumn { float: left; width: 100px; float: left; } #content { } width: 80%; #content { float: left; width: 610px; float: left; } Не забывайте постоянно контролировать результаты внесенных изменений. Свойство page-break- before в состоянии always устанавливает разрыв страницы перед блоком, т.е. указав это свойство тэгам <h1>-<h6> можно начинать соответствующий раздел с новой страницы. Свойство page-break-inside в состоянии avoid запрещает разрыв страницы внутри блока, т.е. указав это свойство тэгу <p> можно переносить на следующую страницу полный абзац. Свойства orphans и widows указывают, сколько строк можно оставить внизу и верху страницы соответственно. По-умолчанию у обоих свойств указано значение 2. Не рекомендуется ставить разрывы страниц слишком часто, т.к. это может привести к бесполезному перерасходу бумаги. Подроблее о свойствах, предназначенных для принт-версий на http://www.w3.org/TR/CSS21/page.html 6.12Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.п.) При верстке страниц с правосторонним вводом надо всегда учитывать, что при указании direction:rtl; внутренние левый и правый паддинги меняются местами. Реализация (2 способа): 1. Установить в CSS на body свойство direction:rtl, учесть при этом, что левый и правый паддинги у объектов поменяются местами, т.е. 86 CSS1: body{…} div{padding:0 10px 0 15px;} CSS2: body{ … direction:rtl; } div{padding:0 15px 0 10px;} 2. Ставть direction:rtl; конкретно на каждый текстовый блок, но если у блока есть правый и/или левый паддинги учесть, что они (паддинги) меняются местами CSS1: div{padding:0 10px 0 15px;} CSS2: div{ direction:rtl; padding:0 15px 0 10px; } 87 7.ОПТИМИЗАЦИЯ КОДА ДЛЯ ПОИСКОВЫХ СИСТЕМ И СТАНДАРТЫ ДОСТУПНОСТИ (ИСПОЛЬЗОВАНИЕ НУЖНЫХ ТЕГОВ, НЕИСПОЛЬЗОВАНИЕ УСТАРЕВШИХ ТЕГОВ) Одним из важных критериев создания HTML/XHTML документов является их пригодность для индексирования поисковыми системами. В данной главе мы рассмотрим основные принципы создания вебдокументов, оптимизированных для поисковых машин. Такая оптимизация известна как SEO, от сокращения Search Engine Optimization. Создание HTML/XHTML документов, оптимизированных для поисковых машин, предполагает особый подход написания кода. Ранее мы уже упоминали о том, что при создании документов следует разделять содержание и отображение, сохраняя HTML код максимально простым и прозрачным, а все что касается отображения, включать в CSS. Здесь же мы акцентируем внимание на принципах ранее не рассмотренных. Давайте рассмотрим, каким же образом происходит индексирование документов. Сперва, поисковая система получает URL документа, либо напрямую, при его регистрации, либо с другого документа, в котором есть ссылка на текущий. Далее, поисковая система посылает поискового робота (он же bot, он же spider), выяснить, что собой представляет данный ресурс и какого рода информацию он содержит. Робот начинает чтение всего документа, включая теги, текст и ссылки на другие страницы, а также некоторые элементы заголовка документа, включая теги META и TITLE. Впрочем, все эти детали могут отличаться, в зависимости от поисковой системы. Далее, робот сохраняет полученную информацию в базе данных поискового сервера для ее дальнейшей обработки. Затем, робот следует по ссылкам, встретившимся в документе, выполняя аналогичную работу и для текущего документа. Как правило, такой робот не наделен искусственным интеллектом и работает по предопределенному алгоритму, что существенно ограницивает поле его деятельности. А именно, без его внимания остаются куски JavaScript кода, ссылки в формах документа и пр. Другими словами, робот не в состоянии выявить ссылки внутри кода скрипта, также не может он заполнить поля формы и отправить ее, чтобы перейти на следующую страницу. Например, если первой страницей сайта является страница логина, поисковый сервер не в состоянии проиндексировать такой сайт по причине того, что роботу недоступны страницы, следующие после логина. Если вам когда-либо приходилось видеть браузер Lynx в действии, то это наилучшая аналогия того, что видит поисковый робот – текст и простые ссылки. Никакой графики, никаких скриптов и CSS стилей. Если ваш HTML документ состоит преимущественно из графики – поисковый робот не увидит ничего! То же самое касается сайтов, полностью реализованных на Flash. После того, как информация из страницы попала в базу данных поискового сервера, запускается механизм ее обработки, или, другими словами, индексирования. Как правило, это некий алгоритм, специфичный для конкретного поискового сервера. В соответствии с этим алгоритмом, осуществляется выбор наиболее важных ключевых слов и фраз, основываясь на том, как часто эти слова и фразы встречаются в документе. Их важность также определяют элементы, внутри которых они содержатся. Например, фраза внутри тега H1, будет рассматриваться как более значимая, чем фраза внутри H2 и т.д. Помимо результатов обработки содержимого документа, поисковый сервер смотрит еще и на то, как часто встречаются ссылки на текущий документ из других документов того же сайта или вовсе из других сайтов. Чем больше таких ссылок, тем большая значимость присуждается текущему документу, и, соответственно, его ключевым фразам. Впрочем, эта тема оптимизации не касается создания HTML и, следовательно, дальше рассматриваться не будет. Подводя итог вышесказанному, можно выделить несколько правил оптимизации HTML кода. Для оптимизации в рамках SEO (search engines optimization) следует использовать семантическое разбиение контента, т.е. по смыслу. 88 Также следует учитывать, что в первую очередь робот должен увидеть смысловое наполнение страницы, а не оформительскую или навигационную составляющие, т.е. часто имеет смысл поставить контент как можно ближе к началу файла, а шапку перенести в конец. Для этого можно воспользоваться абсолютным позиционированием блоков: HTML: <div id="main"> <div id="content"> content </div> <div id="navigation"> left column </div> <div id="header"> header </div> <div id="footer"> footer </div> </div> 89 CSS: #main { } #footer { margin: 0 auto; width: 710px; width: 710px; height: 50px; padding-top:50px; /* оставляем место для шапки*/ position:relative; } clear: both; } #leftcolumn { width: 100px; #header { width: 710px; height: 50px; position:absolute; /* позиционируем шапку на место */ float: left; } #content { width: 610px; float: right; left:0; top:0; } Заголовки оформляются как h1, h2, h3… Абзацы – p. Цитаты – cite. И т.п. Блоки элементов форм – fieldset. Списки – ul/li, ol/li, dl/dt/dd. Использовать table только для представления табличных данных. Следует избегать использования устаревших тэгов, таких как: b, i, q, s, nobr, font и т.п. (список основных тэгов представлен в главе 6.1) Страница не должна состоять целиком из изображений. Наиболее важные ее части должны быть в текстовом виде, даже в том случае, если в дизайне это – графика. Рассмотрим пример: в дизайне нарисован логотип с названием компании «CoolSlicers», в самом начале страницы. Разумеется, речь не идет о замене графического логотипа на обычный текст. Прием состоит в том, что в HTML документе мы должны таки написать этот текст логотипа, а именно «CoolSlicers», и поместить его внутрь соответствующего элемента, подчеркнув, таким образом, его значимость, например в H1. Но так как в действительности этот текст отображаться не должен, а вместо него должно быть изображение с графическим логотипом, то мы используем решение, описанное в 6.5.1 При оптимизации HTML кода для поисковых систем, может оказаться полезным симулятор поискового робота, доступный по адресу http://www.webconfs.com/search-engine-spider-simulator.php. Он покажет вам, что можно извлечь из вашего документа, а именно, какой текст и какие ссылки. Возвращаясь к структуре документа, следует помнить, что поисковые роботы читают содержимое схожим образом, что и люди, т.е. сверху вниз, слева направо (если не считать некоторые культуры, где принято читать справа налево). Они также предполагают, что наиболее значимая информация находится в начале страницы, а не в ее конце. Наиболее значимым элементом HTML документа с точки зрения SEO считается TITLE. Поэтому, информация, находящаяся внутри этого тега должна отражать главную мысль содержимого конкретной страницы. Многие разработчики вставляют туда просто название компании, причем это повторяется для всех страниц сайта. Это неправильно. Если важно, чтобы название компании фигурировало в TITLE, его можно поместить в конце, после соответствующего заголовка конкретной страницы. Следовательно, очередным правилом SEO является правильно сформированный TITLE документа. Следующими элементами, которые стоит рассмотреть в рамках SEO это теги META, расположенные в заголовке документа. Элемент <meta name="keywords">, в котором испокон веков перечисляли ключевые слова и фразы веб-страницы, постепенно утрачивает свою значимость. Создатели некоторых по90 исковых систем настаивают на том, что они вовсе не читают его содержимое. Тем не менее, не стоит им пренебрегать. Более важным является <meta name="description">, который читается всеми современнными поисковыми системами. Как и TITLE, этот элемент должен содержать основную мысль текущего документа в кратком виде. Содержание этого элемента также не должно повторяться от страницы к странице. Оно должно быть уникальным. Это и есть следующее правило SEO. Как мы уже говорили ранее, фрагменты JavaScript являются чем то непонятным для поискового робота. Многие поисковые системы имеют ограничение по максимально допустимой длине «бесполезного» кода. Иными словами, наличие большого фрагмента JavaScript кода в заголовке может быть причиной того, что оставшаяся часть документа не будет обработана. То же самое касается и CSS. Отсюда можно сделать вывод, что следует избегать наличия скриптов и CSS фрагментов внутри HTML документа. Таким образом, формируем следующее правило SEO: скрипты и CSS стили должны быть во внешних файлах, а не внутри документа. Мы уже говорили о том, что все значимые фразы страницы должны быть в виде текста, даже в том случае, если в дизайне они представлены графически. Тем не менее, существует средство, позволяющее кое-как компенсировать этот недостаток. Это атрибут ALT элемента IMG. Внутри этого атрибута можно поместить текст, который бы выражал смысл информации, предоставленной графически. Однако, современные поисковые машины невысоко оценивают текст, содержащийся в атрибутах ALT. Этот подход, в принципе, может быть использован, например в таких частях дизайна, как навигация, но это далеко не наилучший вариант. В связи с этим, рассмотрим вариант идеальной навигации для поисковых машин. Вот он: SEO: навигация <ul> <li><a href=”page1.html”>Link 1</a></li> <li><a href=”page2.html”>Link 2</a></li> <li><a href=”page3.html”>Link 3</a></li> </ul> Как видно из примера, оптимизированная для поисковых машин навигация представляет собой список ссылок на другие документы в буквальном смысле этого слова. Причем такой вид она должны иметь всегда, независимо от дизайна! То, как эта навигация будет отображаться, должно быть указано во внешнем CSS файле. В случае чисто графической навигации, допускается поместить текст ссылок в элемент SPAN, с последующим указанием стиля «display: none». Следующим правилом SEO является интенсивное использование тегов заголовков: H1, H2, H3 и т.д. Применять их нужно, разумеется по назначению, помещая внутри первостепенные, второстепенные и т.д. текстовые заголовки. Как правило, хорошо оптимизированный документ содержит только один элемент H1. Что касается элементов H2, H3 и пр., то их может быть сколько угодно, но, опять таки, в пределах разумного. Классический подход создания HTML документов подразумевает широкое использование таблиц неограниченной вложенности для позиционирования элементов дизайна. Этот метод в SEO неприменим по нескольким причинам. Во-первых, из-за вложенности. Обычно получается так, что информационное наполнение страницы находится внутри ячеек таблиц большой вложенности, что само по себе понижает их значимость с точки зрения поисковой системы, даже в случае, если оно будет обработано. Вовторых, в смысловом плане таблица являет собой некий список данных, а не средство разделения документа на его части вроде заголовка, навигации или нижнего колонтитула. Поис система не имеет ни малейшего представления о том, почему веб-разработчик разбил содержимое страницы при помощи таблиц именно таким образом, а не иначе. Отсюда вытекает следующее правило: использование таблиц необходимо свести к минимуму (максимум три уровня вложенности), а лучше не использовать их вовсе. 91 Чтобы подчеркнуть значимость отдельных слов и фраз внутри текста, имеет смысл их заключить внутрь элемента STRONG или B. В то время, как наиболее популярным является элемент B, консорциум W3C рекомендует использовать именно STRONG. Это является последним правилом оптимизации HTML документов для поисковых машин, которое мы рассмотрим. В заключение, хочу напомнить, что хорошо оптимизированный документ, в добавок, должен полностью соответствовать своей спецификации, причем, лучше, чтобы это был XHTML. 92 8.ЗАКЛЮЧЕНИЕ Если вы внимательно ознакомились с данной работой, то наверняка уже обладаете многими качествами HTML-верстальщика. Все остальные свойства приходят с опытом. Поэтому последним советом будет взять готовый дизайн и попытаться сделать из него HTML или XHTML документ с учетом полученных знаний. Попытайтесь сделать один и тот же дизайн в соответствии с несколькими спецификациями. Не забудьте проверить правильность полученных документов и CSS. Попробуйте свои силы в составлении веб-документов оптимизированных для поисковых систем. Не жалейте времени, чтобы разобраться в непонятных для вас вопросах. Надеюсь, эта работа оказалась полезной для вас. Все замечания, предложения и поправки просьба высылать по адресу: andrey@advanware.com. Желаю удачи! 93 9.ПРИЛОЖЕНИЕ 9.1Таблица поддержки email-клиентами свойств CSS. http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html Support for the <style> element Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e Eudora Th un der bir d <style> element in the <head> + + + - + - - + + + + + - + <style> element in the <body> + + + - + - + - + + + + - + Eudora Th un der bir d Support for the <link> element Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e <link> element in the <head> + + + + + - - - - + + + - + <link> element in the <body> + + + + + - - - - + + + - + Eudora Th un der bir d Support for CSS Selectors Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e * + - + - + - + + + + + + - + e + + + - + - + + + + + + - + e>f - - - - + - - - + + + + - + e:link + + + - + - + + + + + + - + e:active, e:hover + - + - + - + + + + + + - + e:focus - - - - + - - - + + + + - + e+f - + - - + - + - + - + - - + e[foo] - - - - + - + - + + + - - + e.className + + + - + - + - + + + + - + e#id + + + - + - + - + + + + - + 94 Support for CSS Selectors Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e Eudora Th un der bir d e:first-line + - + - + - + - + + + + - + e:first-letter + - + - + - + - + + + + - + Eudora Th un der bir d Support for CSS Properties Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e background-color + + + - + + + + + + + + - + background-image + - + - + - + - + + + + - + background-position + - + - + - - - - + + + - + background-repeat + - + - + - + - + + + + - + border + + + - + + + + + + + + - + border-collapse + + + - + + + + + + + - - + border-spacing - - - - + + - - + + + - - + bottom + - + - + - + - + - + + - + caption-side - - - - + + - + + - - - - + clear + - + - + + + + + + + + - + clip + - + - + - + - + - + + - + color + + + + + + + + + + + + - + cursor + - + - + - + + + + + - - + direction + - + + + + + + + + + - - + display + - + + + + + + + + + + - + empty-cells - - - - + + - + + + + - - + float + - + - + - + + + + + + - + font-family + + + + + - + + + + + + - + font-size + + + + + + + + + + + + - + font-style + + + + + + + + + + + + - + font-variant + + + - + + + + + + + + - + 95 Support for CSS Properties Outlook OutAO 2003 look L9 /Exp 2007 ress Lotus Not es Thu nde rbir d Gm ail Old Hot Live Yamail Mail hoo ! Ne w Yahoo ! EnMac touMail rag e Eudora Th un der bir d font-weight + + + + + + + + + + + + - + height + - + - + - + + + + + + - + left + - + - + - + - + - + + - + letter-spacing + + + - + + + + + + + + - + line-height + + + - + + + + + + + + - + list-style-image + - + - + - + - + + + + - + list-style-position + - + - + + - + - + + + - + list-style-type + - + + + + - - + + + + - + margin + + + - + + - - + + + + - + opacity - - - - + - - - + - + - - + overflow + - + - + + + + + + + - - + padding + + + - + + + + + + + + - + position + - + - + - - - - - + + - + right + - + - + - + - + - + + - + table-layout + + + - + + + + + + + + - + text-align + + + + + + + + + + + + - + text-decoration + + + + + + + + + + + + - + text-indent + + + - + + + + + + + + - + text-transform + + + - + + + + + + + + - + top + - + - + - + - + - + + - + vertical-align + - + - + + + + + + + + - + visibility + - + - + - + + + + + + - + white-space - + - - + + + + + + + + - + width + - + - + + + + + + + + - + word-spacing + - + - + + + + + + + + - + z-index + + + - + - + - + - + + - + 96 9.2Краткая таблица CSS- фильтров. Filter en tir e st yl e sh ee ts 1.8+ Internet Explorer for Opera Safari Windows 9.0- Web 2.027 6 5.5 9.21 Kit 2.04 N N N Y Y Y N N N Y Y Y Y Y N Y Y Y N Y N N N N @import url(/**/"style.css"); Y Y Y Y stylesheet 1 Y N N N Y Y Y .fake.classname selector 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 1 2 2 2 1 1 1 1 1 1 1 1 2 1 1 1 N Y Y Y Y Y Y Y Y Y Y N Y Y N N Y N Y Y Y Y Y N Y Y Y Y Y Y N Y Y Y N Y Y Y Y Y Y N Y N Y Y Y N Y Y N Y N Y N N N Y Y Y Y N N N N N N N Y Y N Y N N N N N N N N N N N N N N N N Y N Y N N N N N N N N N N Y N N N N N N N N N N N N N N N N N Y N Y Y Y Y N Y Y Y Y Y N Y Y N N Y Y Y Y Y Y N Y N N N Y Y Y N Y Y Y Y Y Y Y Y Y Y N Y Y N N Y N Y Y Y Y N Y N N N Y Y Y N Y Y Y N Y Y Y Y Y Y N Y Y N N Y Y Y Y Y N N Y N N N Y Y Y Y Y Y N Y Y Y Y Y Y N Y Y Y  N Y Y Y N N N <style … >stylesheet</style> Y Y Y N N N N N N N N N N N N N N N N N Y Y Y Y Y Y Y Y Y N Y N N Y N @import url(styles.css) All; @import "style.css"/**/; selector[attribute =value] selector[attribute$="ending"] selector:lang(languageCode) [attribute|="hyphenated-value"] selector, [dummy] selector, [dummy="dummy"] s\65 lector se\lector *>div selector * html selector html>body selector html>/**/body selector *+html selector *:first-child+html selector selector:/* */first-child html:first-child selector head:first-child+body selector head+body selector head + /* */ body selector head ~ body selector html:not(:only-child) selector html[lang*=""] selector html:not([lang*=""]) selector html/* */:not([lang*=""]) selector html:/* */not([lang*=""]) selector html[xmlns] selector voice-family: "\"}\"";voice-family: inherit;property: value; si ng le de cl ar ati on s X H T M L ba Mozilla 1 1 1 1 @import url(styles.css) all; selector[attribute] si ng le rul es CSS Level property /**/:value; property: /**/value; p\roperty:value; <link media="screen and all" … /> <style media="screen and all" … /> <link type="text/nonsense" … /> <style type="text/nonsense" … > 97 se d <link type="text/css; charset=charset" … /> <link rel="extra-keyword stylesheet" … /> <link title="should load" … /><link title="shouldn't load" … /> <link/style title="should load" … ><style title="probably shouldn't load" … /> Y Y N N N N Y Y N N Y Y N N Y Y Y Y N Y Y Y N N Y Y N N 98

2.Понимание HTML

Related documents

Products

Support

2.Понимание HTML

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib