Мировые информационные ресурсы Информационные технологии в маркетинге и коммерческой рекламе для с

Работа добавлена на сайт samzan.net:

Министерство образования и науки Российской Федерации

Федеральное агентство по образованию

Саратовский государственный технический университет

О.А. Торопова, И.Ф. Сытник, В.В. Кузнецов

СОЗДАНИЕ И ОФОРМЛЕНИЕ WEB – СТРАНИЦ

С ПОМОЩЬЮ НТМL(XHTML) И CSS

Учебное пособие

по курсам «Мировые информационные ресурсы», «Информационные технологии в маркетинге и коммерческой рекламе»»

для студентов специальности 351700

Саратов 2009

УДК 681.3.06

ББК 32.973.26

Т 61

Рецензенты:

Кафедра математической экономики Саратовского государственного университета им. Н.Г. Чернышевского

Доктор физико-математических наук, профессор Саратовского государственного социально-экономического университета

В.Н. Гусятников

Одобрено

редакционно-издательским советом

Саратовского государственного технического университета

Торопова О.А.

Т 61 Создание и оформление WEB-страниц с помощью HTML(XHTML) и CSS: учеб. пособие / О.А. Торопова, И.Ф. Сытник, В.В. Кузнецов. Саратов: Сарат. гос. техн. ун-т, 2009, 106 с.

ISBN 987-5-7433-2084-4

Содержит теоретический материал по основам web-дизайна. Дается характеристика современного состояния данной предметной области. Изложены основные теоретические разделы по технологиям НТМL (XHTML) и каскадным таблицам стилей, особенности их использования при создании сайтов. Приводятся многочисленные примеры и практические задания.

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

УДК 681.3.06

ББК 32.973.26

©Саратовский государственный технический университет, 2009

ISBN 987-5-7433-2084-4

ВВЕДЕНИЕ

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

Под дизайном сайта обычно понимают его внешний вид, а также интерфейс как средство доступа к функциональным возможностям сайта. При создании сайта важно помнить, что он создается для пользователей, а поэтому он должен быть содержательным, удобным и, может быть, красивым. Но главное – чтобы информация в нем была бы представлена в понятном и удобном для использования виде. От дизайнера требуются умение и талант сочетать внешний вид своего творения с его функциональностью и окружающей средой.

Жизненный цикл сайта состоит из следующих основных этапов :

Проектирование структура сайта.
Разработка структуры и содержания страниц.
Публикация на Web-сервере.
Сопровождение (обеспечение работоспособности, возможно, дополнения и изменения содержания.

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

ГЛАВА 1. ОСНОВЫ

1.1. Браузеры

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

Microsoft Internet Explorer 7 (и более старые версии)
Mozilla/Firefox 3 (и более старые версии)
Safari 3 (и более старые версии)
Opera 10 (и более старые версии)
Opera Mini
Chrome
Netscape 9 (и более старые версии)
Konqueror 3 (и более старые версии)

К сожалению, на практике даже браузеры, поддерживающие современные стандарты, имеют свои собственные нестандартные реализации и ошибки, которые заставляют разработчиков хорошенько поломать голову, особенно в том, что касается CSS, JavaScript и DOM.

В настоящий момент подавляющее большинство Web-трафика (67%, данные в различных источниках могут отличаться) проходит через Windows-машины, на которых работает Internet Explorer 7(6). Это означает, что, хотя популярность этого браузера и упала в последние годы (83% в 2005 году), нельзя позволить себе игнорировать его особенности и требования. Например, посетители не смогут увеличивать текст, если его размер указан в пикселях, и это обстоятельство должно повлиять на то, как вы будете масштабировать текст, используя таблицы стилей.

Что касается старых версий браузеров, то приведенная на многих сайтах статистика показывает, что такие браузеры, как Netscape 4, появившийся в 1997 году, все еще применяются. И их наличие игнорировать также нельзя, разработанный вами сайт должен гарантировать работоспособность для самых старых браузеров.

Преодоление различий браузеров

Как же профессиональным Web-дизайнерам учесть многочисленные браузеры и их разнообразные возможности?

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

Web-стандарты и, что более важно, их поддержка, которую начали наконец осуществлять производители основных браузеров, упростили для дизайнеров работу с многочисленными браузерами. Ушли в прошлое дни, когда нужно было выбирать что-то одно или создавать несколько разных версий сайта. Сегодня стало возможным создавать сайты, доступные для 100% браузеров и прекрасно выглядящие в подавляющем большинстве их. Вся хитрость в том, чтобы самому следовать стандартам при написании материалов, создании стилей и программировании. Соблюдение стандартов – это главное средство, обеспечивающее доступность вашего сайта для всех пользователей и всех браузеров.

Это непросто, так как Web-среда хотя и двигается в сторону соответствия стандартам, но еще не достигла его. Еще существуют несоответствия даже в самых современных версиях браузеров, и для получения межбраузерной совместимости еще требуется нестандартное программирование. Хотя мы находимся сейчас на переходном этапе, еще используются старые методы, которые являются обычной практикой или даже являются необходимыми, несмотря на то что это идет вразрез с рекомендациями W3C.

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

Если HTML-документ написан в логичном порядке и разметка его элементов осмысленна, он будет доступен даже для самых старых версий браузеров.

Язык HTML должен нести на себе функцию формирования структуры документа, каскадные таблицы стилей – обеспечивать формирование правильной раскладки страницы и форматирования. Подавляющее большинство браузеров поддерживает CSS Level 1, так что вы можете осуществлять элементарное форматирование текста, зная, что подавляющее большинство посетителей увидят его так, как вы и предполагаете.

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

Общая стратегия использования каскадных таблиц стилей для работы со специальными требованиями браузеров была создана специалистом по Web-стандартам Джеффри Зельдманом (Jeffrey Zeldman). В своей книге Designing with Web Standards (New Riders) он описал метод, основная мысль которого (помимо правильного использования XHTML и CSS) – это разработка под ваш любимый полнофункциональный, поддерживающий стандарты Web-браузер. Затем вы тестируете страницу, убеждаясь в том, что она одинаково выглядит и работает в похожих и поддерживающих стандарты браузерах. Если внешний вид отличается, вам, возможно, потребуются нестандартные CSS-решения, чтобы избавиться от неполадок.

Как только дизайн стал приемлемо функционировать в современных браузерах (которые используют подавляющее большинство пользователей), рассмотрите нестандартный браузер, например Netscape 4. Если сайт выглядит приемлемо, значит, все в порядке. Если нет, то решением будет разделение таблицы стилей на две отдельные таблицы: одна – для элементарных CSS-возможностей, а другая – с современными правилами для тех браузеров, которые эти правила поддерживают. Установите связь с современной таблицей стилей при помощи элемента @import, который скроет ее от тех браузеров, которые не знают, что это такое. Методом проб и ошибок вы должны разработать сайт, который будет выглядеть так, как вы хотите, в самых современных браузерах, но и будет приемлемо выглядеть в старых версиях.

1.2. Программирование

Стандарты, управляющие интерактивностью в Web, – это язык скриптов ECMAScript (который так близок к JavaScript 1.5, что его обычно называют, используя не столь технически звучащее название JavaScript) и модель Document Object Model (DOM), определяющая компоненты Web-страницы, над которыми можно осуществлять манипуляции.

Те же «хорошо и плохо», которые были обозначены для таблиц стилей, относятся и к JavaScript и DOM. Хотя 99% браузеров декларируют поддержку этих стандартов, в них много ошибок и несоответствий. Некоторые браузеры не поддерживают некоторые функции JavaScript. Microsoft добавила в DOM свои собственные расширения, которые работают только в Internet Explorer и т.д.

Что касается оставшихся 1% браузеров, которые вообще не поддерживают DOM (а именно браузеры версии 4), то здесь нет простых обходных путей. Обычно необходимо предоставлять альтернативную версию страницы, в которой используются функции скриптов, которые эти браузеры поддерживают, или создать страницу с объяснениями вообще без скриптов, работающую в любом браузере.

Всегда тестируйте сайт на как можно большем числе браузеров, версий браузеров и конфигураций платформ.

1.3. Дизайн при неизвестном разрешении монитора

Размер окна браузера можно свободно изменять, и ограничением будет лишь размер монитора. Дизайн при неизвестных параметрах браузера – это проблема, уникальная для области Web-дизайна.

Многие Web-дизайнеры хотели бы знать, под какое разрешение монитора им нужно создавать дизайн. Как и в случае со многими другими вопросами Web-дизайна, здесь нет какого-то одного «правильного» решения, и ваше решение всегда должно определяться знанием конкретной аудитории и назначением сайта.

Однако более существенным параметром является разрешение монитора: общее число пикселей, имеющихся на экране. В зависимости от видеокарты один и тот же монитор может работать со множеством разных разрешений. Например, 17" монитор может отображать 800 х 600 пикселей, 1024 х 768 пикселей или даже больше. Ниже приводится список стандартных разрешений мониторов, поддерживаемых платформами Windows и Macintosh. Это не полный список, а просто наиболее часто встречающиеся конфигурации.

640 х 480

800x600

1024 х 768

1152x870

1280x1024

1600x1200

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

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

Гибкая раскладка

Web-страницы являются гибкими по умолчанию. Нормальное поведение Web-документа – это заполнение всего доступного места в области канвы. При изменении размеров окна браузера элементы заново заполняют окно, адаптируясь к новым размерам. Многие дизайнеры сознательно принимают решение строить дизайн так, чтобы он адаптировался к растяжению и сужению окон браузеров. Данный подход имеет и преимущества, и недостатки.

К преимуществам гибкого дизайна относятся следующие:

Безразлично разрешение монитора.

Заполняется все окно, без пустых мест, которые часто оставляет дизайн с фиксированной шириной.

Разработка гибких страниц соответствует духу и природе среды.

Однако могут возникнуть следующие проблемы:

• На больших мониторах длина строки может выйти из-под контроля, когда текст заполнит всю ширину окна браузера. Длинные строки особенно неудобно читать с экрана. (Обратите внимание, что длину строки при гибком дизайне можно контролировать с помощью CSS-свойства mах-width, но это свойство не поддерживается Internet Explorer 6 и ниже. Когда-нибудь появится инструмент для преодоления проблем, связанных с длиной строки).

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

Результаты гибкого дизайна непредсказуемы, и пользователи получают разное впечатление от вашей страницы.

Дизайн с фиксированной шириной

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

Преимущества дизайна с фиксированной шириной:

Базовая раскладка страницы остается неизменной, таким образом сайт будет представлен пользователю в том виде, как его задумал дизайнер.

При фиксированной ширине страниц и столбцов обеспечивается лучший контроль над длиной строк. Они не станут слишком длинными при просмотре страницы на большом мониторе.

Недостатки:

Если доступное окно браузера меньше размеров сетки страницы, часть страницы не будет видна и для просмотра может потребоваться горизонтальная прокрутка. Горизонтальная прокрутка снижает удобство использования, поэтому этого следует избегать.

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

Попытка получить полный контроль над отображением Web-страницы не соответствует духу среды.

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

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

Первая появляющаяся на экране часть страницы является лицом всего сайта, независимо от того, является она гибкой или фиксированной. Именно здесь пользователь принимает решение о том, продолжать ли изучать сайт или нажать кнопку «Назад» и покинуть его. Web-дизайнеры позаимствовали термин «верхняя половина полосы», применяя его к материалам, которые находятся в этом важном первом окне. Как уже говорилось в данной главе, «заполнение экрана» может сильно зависеть от разрешения монитора. Для полной безопасности считайте доступным пространством пространство монитора 800х600, т. е., приблизительно 780х400 пикселей.

Вот элементы, которые обычно размещают в верхней части страницы:

Название сайта.

Главное маркетинговое обращение.

Указание на то, чему посвящен данный сайт.

Средства навигации по сайту. Если навигационная система сразу не видна, скорее всего, на нее не обратят внимания.

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

Рекламные баннеры.

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

1.4. Знакомство с серверами

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

Web-серверы отвечают на запросы от браузеров (клиентских программ), извлекают указанный файл (или запускают скрипт) и возвращают документ или результат работы скрипта. Web-браузеры и серверы взаимодействуют по протоколу Hypertext Transfer Protocol (HTTP).

Любой компьютер может быть сервером, если на нем установлено серверное программное обеспечение. В настоящее время существует много пакетов серверного программного обеспечения, но основными лидерами являются Apache и Microsoft Internet Information Server (IIS).

На большинстве современных серверов (около 70%) работает программное обеспечение Apache. Данный сервер является мощным и полнофункциональным, и он всегда был бесплатным. Работает он главным образом на платформе Unix, но также доступны версии и для других платформ, включая Windows NT/2000 и Mac OS X.

Базовая установка Apache имеет ограниченные возможности, но их легко можно расширять и настраивать путем добавления модулей. Apache вызывает модули для выполнения конкретных задач, таких как аутентификация пользователей или запросы к базам данных. Вы можете получить копию сервера Apache и документацию к нему с домашней страницы Apache – www.apache.org.

Internet Information Server (IIS) - это серверный пакет от Microsoft, который также доступен на бесплатной основе. IIS работает на платформе Windows NT. Данный сервер развился в мощную и стабильную платформу, которую в некоторых аспектах проще устанавливать и обслуживать, чем ее Unix-конкурента. IIS включает множество современных серверных возможностей, включая использование ASP (Active Server Pages) для написания скриптов на стороне сервера. За дополнительной информацией обращайтесь к страницам Windows Server System по адресу www.microsoft.com/windowsserversystem/.

Тип сервера не влияет на большинство задач, выполняемых дизайнером, например на создание графики и разработку элементарных HTML-файлов. Но он влияет на более сложные технологии создания Web-сайтов, такие как Server Side Includes, добавление типов MIME (о которых мы поговорим позже в этой главе) и создание Web-страниц, использующих базы данных. Обязательно координируйте работу с администратором сервера, если ваше использование сервера выходит за рамки простого хранения HTML и графических файлов.

Корневая директория для Web

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

Слеш (/) в конце URL обозначает, что URL указывает на директорию, а не на файл. Если конкретный документ не указан, большинство серверов отображает содержимое файла по умолчанию (или файла индекса). Как правило, файл индекса называется index.html, но на некоторых серверах он может называться welcome.html или default.html Часто существует иерархия имен индексных файлов, и браузер использует тот, которому присвоен наивысший приоритет. Например, если в директории содержатся файлы index.html и index.php, то можно настроить сервер на автоматическое отображение файла index.php.

Как только сервер обнаружит файл, он отправляет содержимое этого файла обратно браузеру, предваряя его несколькими заголовками HTTP-ответа. В этих заголовках содержится информация о поступающем файле, включая тип данных (который также называется типом содержимого (content type) или MIME-типом).

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

Современные Web-сайты служат порталами для двустороннего доступа к информации, электронной коммерции, поисковых систем и динамической генерации материалов. Такие функции основываются на программах и скриптах, которые обрабатывается на сервере. Для программирования на стороне сервера есть несколько технологий, наиболее распространенными из которых являются CGI, ASP, PHP и Java-сервлеты.

CGI (Common Gateway Interface)

Вместо указания HTML-файла через URL можно запросить запуск CGI-программы. CGI – это сокращение от Common Gateway Interface (Общий шлюзовой интерфейс), и именно этот интерфейс позволяет Web-серверу взаимодействовать с другими программами (CGI-скриптами), запущенными на сервере. Скрипты CGI обычно пишутся на языках Perl, С или C++.

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

Большинство администраторов серверов следуют соглашению, согласно которому CGI-скрипты хранятся в специальной директории cgi-bin (сокращение от cgi-binaries – двоичные файлы CGI). Хранение их в одной директории упрощает управление сервером и обеспечение безопасности. Если браузер подает запрос на выполнение CGI-скрипта, сервер запускает скрипт и возвращает динамически генерируемую информацию браузеру.

ASP (Active Server Pages)

ASP (Active Server Pages) – это среда программирования для Microsoft Internet Information Server (IIS). Она в основном используется для работы с данными на сервере и создания динамически генерируемых Web-страниц. Также ее можно настроить для обработки информации в формах.

Если Web-документ оканчивается суффиксом .asp (а не .html), это указывает на то, что это – текстовый файл, содержащий HTML и скрипты (обычно написанные на VBScript), которые сконфигурированы для работы с ASP на сервере.

PHP

PHP – это еще один язык скриптов, позволяющий создавать динамически генерируемые Web-страницы (сходные с ASP). PHP – это проект Apache Software Foundation, так что это бесплатное программное обеспечение с открытым исходным кодом. РНР работает с самыми разными Web-серверами, но наиболее часто его используют с Apache.

Код РНР, который сходен с Perl или ASP, можно встраивать в HTML-документ с помощью специальных PHP-тегов. Преимуществом скриптов, написанных на РНР, перед CGI является то, что очень просто включать прямо в Web-страницу короткие фрагменты кода РНР для обработки, например, данных формы или извлечения информации из базы данных.

За дополнительной информацией по РНР обращайтесь на сайт www.php.net- официальный сайт РНР.

Java-сервлеты и JSP

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

JavaServer Pages (JSP) – это связанная с Java технология, сходная с ASP. Код JSP встраивается прямо в Web-страницы. Эта технология предлагает разработчикам простой способ доступа к возможностям сложных сервлетов, работающих на Web-сервере.

За дополнительной информацией о Java-сервлетах и JSP обращайтесь к страницам java.sun.com/products/servlet/ и java.sun.com/products/jsp/.

Lamp

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

Linux: операционная система

Apache: программное обеспечение Web-сервера

MySQL: сервер баз данных

РНР (или Perl или Python): язык скриптов

Хотя эти программы и не разрабатывались для объединения в один пакет, они часто применяются вместе для создания динамических Web-материалов и приложений.

Абсолютная и относительная адресация

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

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

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

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

Если в настоящий момент я нахожусь в директории jen и хочу сослаться на файл art. html, то относительный путь будет pers/art.html, поскольку файл art.html находится в директории pers, находящейся в текущей директории jen.

Переход на уровень вверх, в родительскую директорию, обозначается двумя точками (..). Например, если находимся в данный момент в директории jen и хотим сослаться на директорию richard/work, то путь указывается так: ../richard/work. Две точки в начале пути обозначают переход на уровень вверх, в директорию users, а там находятся директория richard и поддиректория work.

Если находимся в директории pers и хотим сослаться на директорию work в директории richard, нужно подняться на два уровня, так что путь будет выглядеть так: ../../ richard/work .

Если вы указываете на другую Web-страницу или ресурс, расположенные на сервере, используйте, как правило, относительный URL, указывающий на новый ресурс относительно положения текущего документа.

Соглашения об именах файлов

Необходимо соблюдать следующие соглашения:

• Избегайте пробелов в именах файлов. Хотя это вполне допустимо для имен локальных файлов на машинах Windows и Macintosh, пробелы не распознаются другими системами. Типичным является использование символа подчеркивания или дефиса для визуального разделения слов в имени файла, например andre_bio.html или andre-bio.html. Дефис часто является более предпочтительным, поскольку поисковые машины так лучше индексируют отдельные слова в имени файла.

Избегайте употреблять в именах файлов специальные символы, такие, как ?,%,#, / и :. Лучше всего ограничить используемые в именах символы буквами, цифрами, символами подчеркивания (вместо пробелов), дефисами и точками.

Правильно применяйте суффиксы (расширения имени). HTML-документы должны иметь суффикс .html (большинство серверов также принимают .htm). Графические файлы формата GIF должны иметь суффикс .gif, а файлы формата JPEG – суффикс jpg или jpeg. Если ваши файлы не будет иметь правильного суффикса, сервер может послать неверный заголовок HTTP Content-Type и браузер может не распознать эти файлы как предназначенные для Web.

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

Создавайте максимально краткие имена файлов.

Выбор кодировки

W3C рекомендует использовать кодировку UTF-8 для всех (X)HTML и XML-документов, поскольку она может применяться с наибольшим количеством символов и при этом поддерживается серверами. Эта кодировка позволяет смешивать в одном документе широкий диапазон языков.

Однако не все Web-документы должны обязательно кодироваться в UTF-8. Если вы разрабатываете документ на языке, в котором используется много не ASCII-символов, вам, возможно, лучше использовать кодировку, в которой сводится к минимуму числовое представление (escaping) этих особых символов.

ГЛАВА 2. HTML и XHTML

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

Язык HTML прошел большой путь с того момента, как в 1991 году Тим Бернерс-Ли (Tim Berners-Lee) создал его в качестве простого способа передачи смысла и структуры гипертекстовых документов. За весьма короткий срок конкурирующие производители браузеров добавили новые элементы к исходному минимальному их набору, а первые Web-дизайнеры стали использовать HTML как визуальный инструмент разработки.

XHTML – это переработка HTML в соответствии с требованиями XML. Иными словами, в нем используется тот же словарь (те же элементы и атрибуты), как в HTML, но синтаксические правила взяты из XML, который является более строгим языком, чем HTML.

Видя необходимость упорядочить разработку HTML, Бернерс-Ли в 1994 году основал World Wide Web Consortium (W3C). W3C продолжает надзирать за HTML и связанными с ним Web-технологиями и выпускает обновленные и стандартизованные версии HTML в виде публикаций, которые с 1995 года называются рекомендациями (Recommendations). В настоящее время используются стандарты HTML 4.01 (1999) и XHTML 1.0 (2000).

2.1. Роль HTML

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

Базовой целью HTML как языка разметки является предоставление семантического описания (смысла) материала и формирование структуры документа. Оно не связано с представлением, т. е. с тем, как документ будет выглядеть в браузере. Представление – это функция каскадных таблиц стилей (Cascading Style Sheets, CSS).

В том, что инструкции, связанные с представлением, должны храниться отдельно от семантической и структурной разметки, нет ничего нового. Это было назначением HTML с самого его появления как приложения SGML (Standardized General Markup Language) (см. приведенную врезку). Новое же здесь то, что Web-сообщество осознало, что использование HTML только для того, для чего он был предназначен, дает вполне конкретные преимущества.

2.2. Отделение представления от структуры документа

До HTML существовал язык SGML (Standard Generalized Markup Language), который представлял собой сложный язык для описания структуры документов независимо от их внешнего вида. SGML – это обширный набор правил разработки языков разметки, таких, как HTML, но он столь всеобъемлющ, что HTML использует лишь малую часть его возможностей.

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

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

W3C интенсивно работает над очисткой стандарта HTML, чтобы этот стандарт заработал так, как это изначально планировалось.

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

HTML или XHTML-документ представляет собой документ ASCII (обычный текст) или, что более часто, Unicode (например, UTF-8), который размечается при помощи тегов, обозначающих элементы и другие необходимые объявления (например, язык разметки, на котором документ написан). Элемент представляет собой структурный компонент (например, абзац) или нужную функцию (например, перенос строки).

Элементы обозначаются в тексте путем вставки специальных заключенных в скобки HTML-тегов. Большинство элементов используют следующий синтаксис:

<имя_элемента>содержимое</имя_элемента>

Имя элемента указывается в начальном теге (который также называется открывающим тегом), а затем также в конечном (или закрывающем) теге, и в последнем случае перед ним ставится слеш (/). Конечный тег работает примерно как «отключение» элемента. Ничего из того, что заключено в скобки, в браузере или другом пользовательском агенте не отображается. Важно отметить, что элемент включает как содержимое, так и свою разметку (начальный и конечный теги). В XHTML все имена элементов и атрибутов должны быть в нижнем регистре. HTML регистр не учитывает.

Замечание. В HTML 4.01 и ниже конечный тег для некоторых элементов является необязательным, и браузер определяет окончание элемента по контексту. Такая практика наиболее распространена применительно к элементу р (абзац). Большинство браузеров автоматически завершает абзац, когда встречает новый начальный тег. В XHTML использование конечных тегов является обязательным.

Некоторые элементы не имеют содержимого, поскольку используются в качестве простой директивы. Говорят, что такие элементы пустые. Примером такого элемента является элемент-изображение (img). Он заставляет браузер включить в текущую страницу внешний графический файл. К другим пустым элементам относятся перевод строки (br), горизонтальная линейка (hr) и элементы, содержащие информацию о документе и не влияющие на отображение материалов, такие как meta и base.

В HTML 4.01 и ниже пустые элементы просто не имели закрывающего тега. В XML закрывающий тег необходим для каждого элемента. Используется соглашение, по которому слеш применяется внутри тега, обозначая его окончание, например <img/>, <br/> и <hr/>. Перечислим возможные «пустые» теги.

Для обеспечения обратной совместимости рекомендуется добавлять пробел перед слешем. Пробел является обязательным, если вы отправляете XHTML-документ, указав в заголовке Content-Type тип text/html.

2.3. Атрибуты

Атрибут уточняет или изменяет работу элемента. Атрибуты обозначаются парами из имени атрибута и значения, добавляемыми к начальному тегу элемента (конечные теги никогда не содержат атрибутов). Имена атрибутов и допустимые для них значения объявляются в DTD. Иными словами, вы не можете создавать свои собственные. Вы можете добить несколько атрибутов в один открывающий тег. Атрибуты, если они есть, указываются после имени тега и разделяются одним или несколькими пробелами. Порядок их следования значения не имеет.

Синтаксис элемента с атрибутами следующий:

<элемент атрибут=”значение”>содержание</элемент>

Ниже приводятся примеры элементов, содержащих атрибуты.

Большинство браузеров не могут обрабатывать значения атрибутов, если их длина превышает 1024 символа. В значениях может учитываться регистр, особенно если это имена файлов или URL.

В HTML 4.01 и ниже разрешается использовать некоторые значения без кавычек, например если значение представляет собой одно слово, содержащее только буквы (a-z и A-Z), цифры (0-9), тире (-), точки (.), символы подчеркивания (_) и двоеточия (:). Лучше всего заключать в кавычки все значения, независимо от рекомендаций, которым вы следуете.

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

Вложенные элементы

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

В данном примере пункты списка (li) вложены в элемент – неупорядоченный список (ul).

<ul>

<li>Пример 1 /li>

<li>Пример 2</li>

</ul>

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

Информация, которую браузеры игнорируют

Часть информации в HTML-документе, включая определенную разметку, игнорируется и оказывает очень малое или не оказывает никакого влияния на представление, когда документ отображается в браузере или в другом пользовательском агенте. Сюда относятся:

Переносы строки в HTML-документе рассматриваются как пробелы, которые, как правило, объединяются с другими пробелами (см. следующий пункт). Текст и элементы выводятся непрерывно, пока в тексте документа не встретится элемент р или br. Однако переносы строк отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre.
Табуляторы и множественные пробелы. Если пользовательский агент встречает несколько последовательно расположенных символов пробела в HTML-документе, он отображает только один. Дополнительные пробелы можно добавлять в текст, используя символьную сущность ( ). Однако несколько пробелов отображаются, если текст размечен как предварительно отформатированный (pre) или если в таблице стилей используется свойство white-space: pre. Обработка табуляторов в исходном коде документа достаточно проблематична для некоторых браузеров, и этого лучше избегать.
Пустые элементы р. Пустые элементы абзацев (<р>. . . </р> или только <р>) без содержащегося в них текста интерпретируются большинством браузеров как избыточные и отображаются как одно завершение абзаца.
Нераспознанный элемент. Браузер просто игнорирует любой элемент, который он не понимает или который был неверно указан. В зависимости от элемента и браузера это может приводить к разным результатам. Браузеры, как правило, отображают содержимое элемента и разметку как обычный текст, хотя некоторые более старые браузеры могут вообще ничего не отображать.
Текст комментариев. Браузеры не отображают текст, заключенный между специальными элементами < ! -- и --> , которые используются для обозначения комментария. Вот простой пример комментария:

<!-- Это многострочный

комментарий который

заканчивается здесь. -->

Между начальным тегом < ! -- и конечным тегом --> должен быть пробел, но в комментарий можно вставлять практически все, что угодно. Вложенные комментарии не допускаются.

2.4. Введение в XHTML

Когда была выпущена рекомендация XML, консорциум W3C получил модернизированный и ориентированный на Web-стандарт для создания языков разметки. И поэтому неудивительно, что одной из главных задач стала переработка HTML (SGML-приложения) в XML-приложение. Результатом стал XHTML. XHTML 1.0 содержит тот же список элементов и атрибутов, что и HTML 4.01. С ним по-прежнему остались связанными те же три DTD: Strict, Transitional и Frames. Разница в том, что внезапно в XHTML, как и во всех XML-приложениях, правильный синтаксис стал очень важным. Если браузеры забывают о некоторой неопределенности HTML, для XHTML-документов правильное формирование является обязательным требованием.

Три разновидности HTML 4.01 и XHTML 1.0

Хотя у W3C есть представление о том, как HTML должен работать, они также понимают, что должно пройти какое-то время, прежде чем старые браузеры выйдут из употребления и Web-авторы начнут форматировать документы должным образом. По этой причине обе рекомендации, HTML 4.01 и XHTML 1.0, включают три немного разных документа-спецификации: «Strict» (Строгий), «Transitional» (Переходный) и еще один, предназначенный только для документов с фреймами. В этих документах, которые называются определениями типа документа (Document Type Definitions, DTD) определяется каждый элемент, атрибут и сущность, а также правила их использования. DTD для XHTML написаны в соответствии с правилами и соглашениями XML (Extensible Markup Language), a DTD HTML используют синтаксис SGML. Браузер использует данные DTD для «расшифровки» разметки и проверки ее допустимости.

Из версии Strict (Строгий) исключены все устаревшие элементы и атрибуты (такие как font и align) с целью обеспечения разделения структуры документа и его представления. В идеале теги документа должны описывать только смысл и структуру документа, а все представление должно реализовываться таблицами стилей.

Transitional (Переходный) DTD включает все устаревшие элементы и атрибуты для обеспечения обратной совместимости с доставшимися в наследство возможностями многих браузеров. Устаревшие элементы считаются допустимыми, но их использование не поощряется. Данный DTD позволяет Web-авторам упростить переход от имеющихся привычек к следованию стандартам. Многие Web-авторы в настоящее время используют Transitional DTD, пока индустрия ждет, когда современные браузеры обеспечат совершенную и единую поддержку CSS, а старые браузеры сойдут со сцены.

Frameset DTD включает те же элементы, что и Transitional DTD, с добавлением элементов, предназначенных для создания Web-страниц с фреймами (frameset, frame и noframe). Frameset DTD стоит особняком, поскольку структура документа с фреймами (где элемент body заменен элементом frameset) имеет фундаментальные отличия от обычных HTML-документов. Важно указывать, какую версию вы используете при помощи объявления DOCTYPE.

Используйте стандарт XHTML 1.0 Transitional, если ваш стиль работы подразумевает использование любых устаревших элементов (таких как font) или атрибутов (таких как align) и у вас есть процедура (или инструменты) для проверки правильного формирования документа. Это наиболее популярный вариант среди профессиональных Web-дизайнеров, поскольку он является совместимым вперед, и при этом позволяет использовать некоторые старые методы управления представлением, имеющиеся в современных браузерах.

Используйте XHTML 1.0 Strict, если вы переходите к использованию таблиц стилей для всех аспектов представления и раскладки, поскольку из этой рекомендации были удалены все устаревшие теги. И конечно, документы также должны быть хорошо сформированными.

Используйте переходный, строгий или фреймовый вариант этого стандарта, если вас не заботит продолжительность жизни сайта, если вы не используете обновленные средства разработки или если вы не можете заставить себя закрывать элемент.

XHTML 1.1 можно использовать, но трудно заставить его эффективно работать, поскольку в браузерах плохо поддерживаются XML-идентификаторы, которые должны обязательно использоваться в документе XHTML 1.1. Поэтому на данный момент этот стандарт является мало распространенным.

Хорошо сформированный XHTML

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

В XML в именах элементов и атрибутов учитывается регистр, т. е. <img>, <lmg> и <IMG> при анализе оказываются разными элементами. Когда HTML был переработан в XHTML, все элементы решено было писать в нижнем регистре. Создавая XHTML-документы (и связанные с ними таблицы стилей), убедитесь, что все теги и имена атрибутов находятся в нижнем регистре. Для значений атрибутов требования к учету регистра отсутствуют.

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

В XHTML все элементы должны завершающий тег, иначе будет зарегистрирована ошибка и документ будет признан не соответствующим стандарту. Завершать необходимо и пустые элементы. Например, для переноса строки <br> в XHTML требуется завершение элемента. Достаточно просто поставить слеш перед закрывающей скобкой, обозначая конец элемента. Таким образом, в XHTML перенос строки обозначается как <br/>. Чтобы большое число браузеров могло нормально воспринимать XHTML-документ, обязательно добавляйте пробел перед закрывающим слешем (<br />). В этом случае закрывающий тег будет воспринят правильно.

XML (а следовательно, и XHTML) не поддерживает сокращенную запись атрибутов, практику, принятую в SGML, при которой некоторые атрибуты можно сокращать до одного значения. Если в HTML есть много сокращенных атрибутов, таких как checked и nowrap, в XHTML значения должны объявляться явным образом, т.е. checked="checked" и nowrap="nowrap". Перечислим атрибуты, которые являлись сокращенными в HTML, но для которых в XHTML требуются значения.

checked=«checked» disabled=«disabled» noresize=«noresize»

compact=«compact» ismap=«ismap» nowrap=«nowrap»

declare=«declare» multiple=«multiple» readonly=«readonly»

defer=«defer» noshade=«noshade» selected=«selected»

Атрибуты id и name

В HTML атрибуты name могут использоваться для элементов a, applet, form, frame, iframe, img и map. Атрибуты name и id могут использоваться в HTML для обозначения фрагментов документов.

В XML для обозначения фрагментов могут использоваться только элементы id, и на каждый элемент может приходиться только один такой элемент. В XHTML вместо элементов name при идентификации фрагментов документа в упомянутых выше элементах должны употребляться элементы id. Фактически атрибут name для таких элементов в спецификации XHTML 1.0 считается устаревшим.

Если идентификаторы фрагментов должны работать в Netscape 4, используйте и name, и id. К сожалению, это приведет к ошибкам при проверке на допустимость по XHTML 1.0 Strict или XHTML 1.1, и, следовательно, вам лучше по возможности применять для обозначения идентификаторов фрагментов только атрибут id. Единственной допустимой областью применения атрибута name остается семантика отправки форм в таких элементах управления формой, как input.

2.5. Элементарная структура документа

В данном примере показана элементарная структура XHTML-документа, как она определяется в рекомендации XHTML 1.0. Она образует необходимый контекст для будущего обсуждения глобальной структуры документа.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">

<head>

<title>Название документа</title>

</head>

<body><р>Содержание документа...</р> </body>

</html>

Данный пример начинается с объявления XML, в котором указываются версия XML и кодировка символов документа. Объявление XML рекомендуется использовать для XHTML-документов. Однако оно не обязательно, если кодировка документа – UTF-8, как показано в приведенном примере.

Объявление типа документа (DOCTYPE) говорит браузеру, какой DTD следует использовать для анализа документа. В данном примере указан DTD XHTML Strict. Если бы данный пример был HTML-документом, то можно было бы использовать только DTD для HTML.

html – это корневой элемент для всех документов HTML и XHTML.

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

Элемент body содержит все материалы документа, т. е. ту часть, которая отображается в окне браузера. Помещаемый сюда материал зависит от дизайнера.

Чтобы (Х)НТМL-документ был признан допустимым (valid), он должен начинаться с объявления типа документа, в котором указывается, какая версия – HTML или XHTML – используется в документе. Делается это при помощи объявления DOCTYPE, в котором указывается определение типа документа (document type definition, DTD). DTD представляет собой текстовый документ, в котором перечислены все элементы, атрибуты и правила использования конкретного языка разметки.

При отсутствии объявления DOCTYPE нет набора правил, по которому можно было бы проводить проверку. В годы, когда разработка HTML была быстрой и свободной, объявления DOCTYPE обычно опускались. Однако теперь, когда обеспечение соответствия стандартам стало одной из приоритетных задач в сообществе Web-разработчиков, а также поскольку существует множество вариантов DTD, авторам настоятельно рекомендуется использовать объявление DOCTYPE и проводить проверку документов на допустимость.

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

Каждый элемент head должен включать элемент title, а также может включать любой из следующих элементов в любом порядке: script, style, meta, link, object, isindex и base. Элемент head служит просто контейнером для этих элементов и не имеет своего собственного содержимого.

Рекомендуется, чтобы HTML-документы (и XHTML-документы без объявления XML) также содержали элемент meta, в котором указываются тип содержания и кодировка символов документа, хотя этот элемент и не является обязательным.

Наиболее важным (и единственным обязательным) элементом заголовка является название документа (title), который содержит описание материалов на странице.

Начиная с HTML 4.01, элемент title является обязательным, а это означает, что любой HTML-документ должен иметь осмысленное название в заголовке. Название отображается в строке заголовка браузера, вне обычного окна.

Название – это то, что отображается в списке «Избранное» или «Закладки пользователя». Поисковые системы также используют названия документов. По этой причине важно создавать продуманные и описательные названия для всех документов и избегать неопределенных названий, таких, как «Welcome» или «MyPage».

К другим полезным HTML-элементам, помещаемым в элемент head документа, относятся:

base

Этот элемент определяет базовое местоположение документа, которое служит ссылкой для всех путей и ссылок документа.

isindex

Устарел. Этот элемент когда-то использовался для добавления на страницу простой поисковой функции. Он был объявлен устаревшим в HTML 4.01 с заменой на элементы ввода для форм.

link

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

script

С помощью этого элемента в заголовок документа можно добавить код JavaScript или VBScript.

style

Еще одним методом связывания таблицы стилей с HTML-документом является встраивание его в заголовок документа при помощи элемента style.

2.6. Тело документа

Тело документа (элемент body) идет после заголовка документа. Хотя элемент body в предыдущих версиях HTML был необязательным, в XHTML он необходим. Содержимое элемента body – это то, что отображается в окне браузера (или воспроизводится речевым браузером).

Атрибуты

Базовые атрибуты: id, class, style, title

Интернационализация: lang, xmlilang, dir

Внутренние события: onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkey-down, onkeyup

Устаревшие атрибуты

alink="#rrggbb" или "имя цвета"

background="URL"

bgcolor="#rrggbb" или "имя цвета"

link="#rrggbb" или "имя цвета"

text="#rrggbb" или "имя цвета"

vlink="#rrggbb" или "имя цвета"

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

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

Конечно, в настоящее время правильным способом обработки представления являются таблицы стилей, поэтому все стилевые атрибуты элемента body официально считаются устаревшими и их использование не поощряется. Но данные атрибуты по-прежнему входят в Transitional DTD и поддерживаются всеми браузерами.

Таблица 1

Устаревшие атрибуты элемента body

Атрибут	Описание	Эквивалентный стиль CSS
text="color"	Задает цвет для всего обычного текста доку мента	body {color: color}
link="color"	Задает цвет гиперссылок	a:link {color: color}
vlink="color"	Задает цвет нажатых ссылок	a:visited {color: color}
alink="color"	Задает цвет ссылки в процессе нажатия на нее	a: active {color: color}
bgcolor="color"	Задает цвет фона для всей страницы	body {background-color: color}
background="url"	Указывается изображение, используемое в качестве фонового для страницы	image: url(filename.gif) }

2.7. Текстовые элементы

Элементы структурирования текстовых материалов делятся на две главные категории: внутристрочные и блочные.

Внутристрочные элементы встречаются в потоке текста и по умолчанию не приводят к переводу строки.

Блочные элементы по умолчанию начинаются в представлении с новой строки и состыковываются в обычном потоке документа как блоки. К блочным элементам относятся:

заголовки разных уровней
абзацы
длинные цитаты
предварительно отформатированный текст
адреса
списки и элементы списков
общий элемент div
таблицы
формы

Блочные элементы

Имеют следующие общие атрибуты:

Базовые (id, class, style, title)

Устаревшие: align, width (для pre)

<hn>...</hn> - заголовки

В (X)HTML определяются шесть уровней заголовков, от h1 до h6.

Заголовки в правильной структуре документа должны располагаться по порядку (например, h2 не должен идти перед h1).

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

<р>...</р>

Абзацы могут содержать текст и внутристрочные элементы, но они не могут содержать другие блочные элементы, в том числе другие абзацы.

Они всегда начинаются с новой строки. Текст форматируется с выравниванием по левому краю.

<blockquote>...</blockquote> - цитаты

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

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

<blockquote cite= "http://www.jenandtheneverendingstory.com"> <р>Это начало длинной цитаты (текст продолжается...) </р> <р>Цитата все длится и длится (текст продолжается...) </р> </blockquote>

Атрибут cite предназначен для указания информации об источнике, откуда взята цитата, но этот атрибут очень ограниченно поддерживается браузерами, и его нечасто используют.

В спецификации HTML рекомендуется, чтобы элементы blockquote отображались в виде текста с отступом. Не следует использовать элемент blockquote только для получения отступа.

<pre>...</pre> - предварительно отформатированный текст

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

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

<pre>

Пример предварительно

отформатированного

текста

</pre>

Результат отображения в браузере:

Изменять гарнитуру шрифта и параметры пробелов при помощи таблиц стилей не рекомендуется. Заранее отформатированный текст может включать любые внутристрочные элементы, за исключением img, object, big, small, sub, sup и font, которые все нарушили бы выравнивание столбцов моноширинных символов.

<address>...</address> - адрес

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

При участии <а href="../authors/sitnik/">Irina Sitnik</a>, <а href="http://www.sstu.com/">SGTU</a>

</address>

Внутристрочные элементы логического форматирования

В HTML 4.01 ив XHTML 1.0 и 1.1 определяется набор элементов фраз (которые также называют логическими элементами), формирующих структуру и семантику текста. Элементы фраз имеют общий синтаксис и атрибуты:

Атрибуты базовые (id, class, style, title)

em – обозначает выделенный текст. Элементы em почти всегда отображаются курсивом.

strong – обозначает сильно выделенный текст. Элементы strong почти всегда отображаются полужирным текстом.

abbr – обозначает сокращенную форму.

acronym – обозначает аббревиатуру.

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

q – обозначает краткую внутристрочную цитату.

dfn – обозначает определение или первое вхождение заключенного в тег термина. Может использоваться для привлечения внимания к появлению специальных терминов и фраз. Определения терминов часто отображаются курсивом.

code – обозначает фрагмент программного кода. По умолчанию код отображается в браузере специальным шрифтом фиксированной ширины (обычно - Courier).

kbd – является сокращением от слова «keyboard» (клавиатура) и обозначает текст, введенный пользователем. Может использоваться в технических документах. Как правило, такой текст отображается шрифтом фиксированной ширины.

samp – обозначает пример выходных данных программы, скрипта и т. п. Может использоваться в технических документах. Как правило, такой текст по умолчанию отображается шрифтом фиксированной ширины.

var – обозначает экземпляр переменной или аргумент программы. Это еще один элемент, который наиболее полезен в технической документации. Переменные обычно отображаются курсивом.

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

Перенос строки

Перенос строки можно добавить в текст при помощи элемента br. Текст, идущий после элемента br, начинается с новой строки без добавления пробела перед ним. Это один из немногих презентационных элементов, сохранившихся в DTD XHTML 1.0 Strict и XHTML 1.1

<br />

Горизонтальные линейки

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

<hr />

Атрибуты

Базовые (id, class, style, title)

Устаревшие атрибуты

align="center|left|right"

noshade="noshade"

size="number"

width="number" or "numberl"

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

Стилевые элементы

Существуют (X)HTML-элeмeнты, которые явно предназначены для уровня представления. Иногда их называют физическими стилями. Они образуют инструкции, относящиеся к размеру, толщине и стилю шрифта, используемого для отображения элемента.

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

Стилевые элементы
b	полужирный
big	текст большого размера
i	курсив
s	зачеркнутый
strike	зачеркнутый
tt	телетайп
u	подчеркнутый
font	гарнитура шрифта, цвет и размер
basefont	задает размер шрифта по умолчанию
Sub, sup	Надстрочный и подстрочный шрифт
nobr	нет переноса строки
wbr	перенос слова
hr	горизонтальная линейка

Элемент nobr (сокращение от no break – нет переноса) запрещает перевод строки. Элемент wbr (word break – перенос слова) позволяет авторам указать предпочтительное место для перевода строки. Эти элементы никогда не были внесены в рекомендации HTML, но они продолжают использоваться и поддерживаются Internet Explorer (всеми версиями) и Mozilla. Эти элементы не поддерживаются браузерами Safari и Opera.

Практика

Создать web-страницу со следующим текстом:

Как сделать хороший

HTML – документ

I. Структурировать материал

1. Разбить материал на главы, параграфы, пункты

2. Придумать заголовки частей

II. Продумать стиль оформления

1. Выбрать цвета

а. Выбрать цвет фона

b. Выбрать цвет основного текста

c. Выбрать цвета для выделения отдельных элементов документа

2. Зафиксировать способы оформления отдельных элементов

IV. Написать программу

V. Провести тестирование и отладку программы

Адресация в Интернете

Каждый компьютер, подключенный к Интернету, имеет свой уникальный IP-адрес

Общее количество различных IP-адресов составляет более 4 миллиардов:

N=232 = 2 294 967 296

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

Маршрутизатор обрабатывает полученные им IP-пакеты следующим образом.

Уменьшает значение TTL на одну секунду или больше, если пакет надолго задерживается на маршрутизаторе. Если значение TTL достигает нуля, пакет отвергается.
Пакет может быть фрагментирован, если его размер слишком велик для сети дальнейшего следования.
Если пакет фрагментирован, то IP создает для каждого нового пакета (фрагмента) отдельный заголовок, устанавливая:
- Flag (флаг), указывающий, что существуют и другие фрагменты, которые будут отправлены следом.
- Fragment ID (Идентификатор фрагмента), идентифицирующий все фрагменты, составляющий один пакет.
- Fragment Offset (Смещение фрагмента), обеспечивающее правильную сборку пакета на узле-получателе.
  1. Вычисляет новую контрольную сумму.
  2. Определяет адрес сетевого адаптера следующего маршрутизатора.
  3. Направляет пакет дальше в сеть.

Смайлики

Примеры смайликов (Вы можете их использовать при написании электронного письма)
улыбка (смех)	:)	Огорчение	:(
	:))		:( (
	:)))	Зевает	:0
поцелуй	:-*	Злость	>:-(
слезы	:`-(	Слезы радости	:`-)
маленькая девочка	8:-)	усатый	:-{)

Добавить в документ картинку

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

Для создания гипертекстовых ссылок используется тег a.

Атрибут href определяет адрес документа (или фрагмента документа) гипертекстовой ссылки.

Значение этого атрибута может быть задано в виде URL или относительной ссылки на документ.

Например: Ссылка на поисковый портал Яндекс:

<a href ="http://yandex.ru">Яндех.ru</a>

Ссылка на файл 1.htm в текущей папке:

<a href="1.htm"> Оперативная память </a>

Организация ссылок на область документа

Для того, чтобы создать ссылку на область документа, сначала создается якорь (anchor) как объект для ссылки.

В HTML якорь создается с помощью атрибута name тега a.

В качестве значения указывается идентификатор, уникальный для данного документа. Например:

<a name="part1"></a> – якорь для раздела 1.

В HTML для обозначения фрагментов документов используется как атрибут name, так и атрибут id.

В XML для обозначения фрагментов используются только элементы id. В XHTML вместо элементов name должны употребляться элементы id. Атрибут name для таких элементов в спецификации XHTML 1.0 считается устаревшим.

Некоторые старые браузеры не распознают атрибут id как идентификатор фрагмента документа. Поэтому для полной совместимости можно использовать одновременно и name, и id. Это приведет к ошибкам при проверке на допустимость по XHTML 1.0 Strict или XHTML 1.1, и, следовательно, лучше по возможности применять для обозначения идентификаторов фрагментов только атрибут id. Единственной допустимой областью применения атрибута name остается идентификация элементов управления формы.

Якорь в XHTML необходимо создавать следующим образом:

Или

Создание ссылки на фрагмент документа:

<a href="#part1">раздел 1</a> – переход на фрагмент "par1t" файла текущего документа

<a href="document.htm#part">раздел 1</a> – переход на фрагмент "part1" файла document.htm.

<a href="#top">Наверх</a> – переход в начало документа, то есть на фрагмент "top" текущего документа

Примечание.

Атрибут target элемента a- определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с параметром href и может принимать следующие значения:

_self - указывает, что определенный в параметре href документ должен отображаться в текущем окне;

_parent - указывает, что документ должен отображаться в окне-родителе текущего окна;

_top - указывает, что документ должен отображаться в окне-родителе;

_blank - указывает, что документ должен отображаться в новом окне.

Например, чтобы новый документ открывался в своем окне, элемент а записывается следующим образом:

<a href="document.htm#part" target="_blank">раздел 1</a>

Практика

Задание 1. Создайте папку, в которой будут содержаться все страницы сайта. В этой папке создайте 4 HTML-страницы с именами: 1.htm … 4.htm. В этих страницах поместите соответствующий текст:

1.htm:

Как хранится информация в оперативной памяти

Вся информация в оперативной памяти компьютера хранится в виде последовательности двоичных кодов (нулей и единиц). Для хранения нуля или единицы требуется объем памяти, равный 1 биту. 8 бит образует 1 байт памяти. 1024 байт = 1Кбайт.

2.htm:

Оперативная память

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

3.htm:

Файл

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

4.htm:

Долговременное хранение информации

Для долговременного хранения информации используются жесткий диск и внешние носители информации, например CD, DVD, Flash-диски и т.д. Внешние носители информации используют также для переноса информации с одного компьютера на другой.

Создайте файл index.htm, в котором организуйте гипертекстовый переход с первых четырех пунктов списка в файле index.htm на соответствующую страницу.

С каждой страницы должен быть возврат на главную страницу (index.htm).

Организуйте переход между страницами 1.htm, … 5.htm, используя в качестве гиперссылок ключевые слова (они в тексте выделены жирным шрифтом):

Рисунок 2.1 - Внешний вид страницы 3.htm

Задание 2. Организация ссылок на область документа.

Пункт Словарь терминов в файле index.htm должен содержать ссылку на файл glossary.htm. Это файл математических терминов.

В файле glossary.htm буквы алфавита сделайте внутритекстовыми ссылками на нужные строки документа.

В этом файле также организуйте возврат на главную страницу (index.htm).

2.9. Таблицы

Базовые элементы для создания таблицы: table, tr и td.

<table>...</table> - элемент создания таблицы

Атрибуты

Базовые (id, class, style, title)

border="число"

cellpadding="число пикселей или %"

се11sрасing="число пикселей или %"

rules="all|cols|groups|none|rows"

summary="текст"

width="число, процент"

Устаревшие атрибуты

align

bgcolor

Нестандартные атрибуты

height = “число, процент"

<tr>...</tr> - строка таблицы

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

Устаревшие атрибуты

bgcolor

<td>...</td> - ячейка таблицы

Атрибуты

Базовые (id, class, style, title)

аbbr="текст"

align="left|center|right|justify|char"

axis="текст"

char="символ"

charoff="длина"

colspan="число"

headers="ccылки на id"

rowspan="число"

scope="row|col|rowgroup|colgroup"

valign="top|middle|bottom|baseline"

Устаревшие атрибуты

bgcolor

height

nowrap

width

Описательные элементы

<th>...</th> - ячейки заголовка

Атрибуты такие же, как и у элемента td

<caption>...</caption> - заглавие

Атрибуты базовые (id, class, style, title)

Устаревшие атрибуты

align="top|bottom|left|right"

Элемент caption должен идти сразу после открывающего тега элемента table, перед всеми остальными элементами таблицы.

Группы строк

В HTML и XHTML определяются элементы для обозначения групп строк, которые позволяют разделить строки на верх таблицы (thead), низ таблицы (tfoot) и тело таблицы (tbody).

<thead>...</thead> - заголовок (верх) таблицы

<tbody>...</tbody> - тело таблицы

<tfoot>...</tfoot> - низ таблицы

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

Консорциум W3C включил элементы для группировки строк в Рекомендацию HTML 4.0, как способ создания более осмысленных маркеров и увеличения гибкости при использовании свойств таблиц стилей.

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

<tfoot>

<tr><td colspan="3">Гл. Бухгалтер </td></tr>

</tfoot>

<tbody>

<tr><td>Иванов И.И.</td> <td>10200</td> <td>10.03.2009</td> </tr> <tr>... еще ячейки данных...</tr> <tr>... еще ячейки данных...</tr>

</tbody>

</table>

Столбцы и группы столбцов

<col /> – столбец

<colgroup>...</colgroup> – группа столбцов

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

span="число"

У элемента colgroup есть также атрибут

width="пикceлы, проценты, n*"

Элемент col используется для маркировки отдельного столбца (или нескольких столбцов, при использовании атрибута span) или для применения к нему значений атрибутов без реальной группировки столбцов, структурной или логической. Пустой элемент col используется только для применения атрибутов или стилей к столбцам, к которым он относится.

Элемент colgroup формирует логическую группу столбцов. Число столбцов в группе указывается атрибутом span или общим числом элементов col в группе (и их значениями span).

Элементы colgroup и/или элементы col должны располагаться перед всеми элементами-строками или группами строк. Они помещаются либо сразу после начального тега table, либо сразу после элемента caption, если он присутствует. В данном примере к разметке предыдущего примера была добавлена информация о группах столбцов.

<table>

</colgroup> …..

Данный элемент colgroup обозначает три столбца, входящие в одну структурную группу. (В таблице может быть несколько групп столбцов, но здесь для простоты используется только одна). В элементе colgroup первый элемент col определяет два столбца (span="2"), каждый шириной 100 пикселей. Оставшийся элемент col имеет ширину 50 пикселей. Если бы все столбцы таблицы должны были иметь одинаковую ширину, то эту ширину можно было бы указать в элементе colgroup. Третий столбец обозначается атрибутом class, на который позже можно сослаться в свойстве стиля (например, background).

2.10. Фреймы

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

Элементы:

frame Определяется один фрейм

frameset Определяется структура фреймов и других наборов фреймов

noframes Данные, отображающиеся, если фреймы не поддерживаются

В Рекомендации HTML 4.01 и XHTML 1.0 входит DTD Frameset, предназначенный для документов с фреймами. Из XHTML 1.1 все фреймовые элементы были убраны.

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

Преимущества использования фреймов

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

Фреймы сводят воедино ресурсы, находящиеся на разных серверах. При помощи элемента noframes вы можете указывать альтернативный материал, если браузер не поддерживает фреймы.

Недостатки

Фреймы могут усложнить создание сайта, поскольку вам нужно создать и организовать несколько файлов для одной страницы.

Поставить закладку на документ в фрейме может быть довольно сложным делом.

Большое число фреймов на странице может существенно увеличить нагрузку на сервер.

Наличие нескольких документов на каждой Web-странице усложняет управление сайтом и его обновление.

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

Базовая структура набора фреймов

Web-страница, которая делится на фреймы, сводится воедино документом верхнего уровня – набором фреймов (frameset).

В документе «набор фреймов» вместо элемента body используется элемент frameset, в котором определяются несколько фреймов, организованных в строки и/или столбцы. Каждый фрейм в элементе frameset обозначается элементом frame . Набор фреймов содержит также обычный заголовок (элемент head).

Атрибуты

cols="список длин" (число, процент или *)

rows="список длин" (число, процент или *)

Нестандартные атрибуты

border="число" определяет толщину границы

bordercolor="#rrggbb" или "имя цвета"

frameborder="l|0"; "yes|no"

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

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

<head>

<title>Simple Framed Document</title>

</head>

<body>

<р>Ваш браузер не поддерживает фреймы.</р>

<р><а href="left.html">nepexoд к левой панели</а></р>

<р><а href="right.html">nepexoд к правой панели</а></р>

</body>

</noframes>

</html>

Файлы Ieft.html и right.html - это обычные (X)HTML.

Элемент <frame />

Атрибуты

Базовые (id, class, style, title)

frameborder="l|0" (IE3+и W3CRec); "yes |no" (NN3+) используется для включения (значение 1) или отключения (значение 0) «трехмерной» границы между фреймами. В рекомендациях W3C указывается, что атрибут frameborder следует применять отдельно к каждому элементу frame, но большинство браузеров также поддерживают использование атрибута frameborder и в элементе frameset (см. предыдущее примечание). Если применить границу к одному фрейму, граница рисуется со всех сторон этого фрейма.

longdesc="URL"

marginwidth="число" задает ширину левого и правого полей для фрейма.

marginheight="число" задает верхнее и нижнее поле для фрейма.

name="текст"

noresize="noresize" запрещает изменение размера фрейма путем простого перетаскивания границы между фреймами.

scrolling="yes|no|auto" определяет, будут ли полосы прокрутки отображаться во фрейме, независимо от его содержимого. Значением по умолчанию является auto.

src="URL" имя загружаемого во фрейм файла.

Нестандартные атрибуты

bordercolor="#rrggbb" или "имя цвета”

Элемент noframe (<noframes>...</noframes>) содержит материалы, которые будут отображаться в браузерах и устройствах, не поддерживающих фреймы. Элемент noframes должен размещаться после элемента frameset.

Создание строк и столбцов

Строки (горизонтальные фреймы) и столбцы (вертикальные фреймы) создаются, соответственно, при помощи атрибутов rows и cols элемента frameset.

Количество строк и столбцов в наборе фреймов определяется указанными значениями размера. Например, чтобы создать набор фреймов, состоящий из трех столбцов, пишется атрибут cols="25%,50%,25%" (или три других значения размера). Размер фреймов можно указывать одним из трех способов: абсолютные значения в пикселях, в процентных долях и с помощью относительных значений. Относительные значения, обозначаемые звездочкой (*), используются для того, чтобы разделить оставшееся пространство в наборе фреймов на равные части.

Например, набор фреймов <frame set cols="100, *"> создаст два столбца, где первый будет шириной 100 пикселей, а второй будет занимать оставшееся пространство окна.

Вы также можете указывать относительные значения, кратные равным долям, и объединять их со значениями, указанными другими способами. Например, набор фреймов, определяемый как <frameset cols = "25%,2*,*"> делит окно на три столбца. Первый столбец всегда занимает 25% ширины окна. Оставшиеся два столбца делят между собой остальное пространство, но в данном случае средний столбец всегда будет по ширине вдвое больше третьего.

Существует возможность вкладывать один набор фреймов в другой. Это означает, что вы можете взять одну строку и разделить ее на несколько столбцов (или наоборот, разделить столбец на несколько строк).

Например : документ

<HTML>

<HEAD>

<TITLE> Фреймы </title>

</HEAD>

Верхняя часть страницы

Левая

часть

Правая часть страницы

Нижняя часть страницы

</FRAMESET>

</FRAMESET>

</ HTML>

описывает структуру страницы, показанную на рисунке.

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

Чтобы загрузить страницу, на которую указывает ссылка, в конкретный фрейм, нужно сначала присвоить имя целевому фрейму при помощи атрибута name элемента frame: <frame src="original.html" name="main" />. Тогда можно сослаться на фрейм target:

<а href="new.html" target="main">...</a>

В данном примере документ new.html загружается во фрейм с именем «main».

Если известно, что нужно загружать все ссылки данного документа в один фрейм (например, из оглавления в основной фрейм), вы можете указать целевой фрейм один раз, используя элемент base. Если поместить элемент base в документ head, указав в нем имя целевого фрейма, то все ссылки данного документа будут загружаться в этот фрейм.

<head>

</head>

Вероятно, самый общий совет относительно фреймов – это совет не использовать их. Хотя у фреймов и были лучшие дни, их больше не применяют в профессиональном дизайне, соответствующем стандартам.

2.11. Формы

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

Формы принимают входные данные при помощи элементов управления, таких как кнопки, текстовые поля или прокручиваемые меню. Элементы управления размещаются на странице и не ведут реальной обработки данных. Обработку производят серверные приложения, взаимодействующие с формами, такие как CGI-скрипты, ASP, ASP.NET, ColdFusion, PHP или Java-сервлеты.

Элементы форм

form Создание формы

input Создание различных элементов управления

button Обычная кнопка ввода

textarea Элемент управления для ввода нескольких строк текста

select Меню с несколькими пунктами или прокручиваемый список

option Пункт в элементе управления select

optgroup Определяет группу пунктов

label Надпись. Связывает информацию с элементами управления

fieldset Группирует связанные между собой элементы управления и надписи

legend Создает заголовок для группы полей (fieldset)

Базовый элемент form используется для того, чтобы обозначить область на Web-странице, которая будет играть роль формы.

Атрибуты

Базовые (id, class, style, title), Интернационализация, события, onsubmit, onreset, onblur

accept="список типов данных"

accept-charset="список наборов символов"

action="URL" (Обязательный)

enctype="тип данных"

method="get|post"

name="текст" (В XHTML - устаревший, используйте атрибут id)

target="имя"

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

Когда пользователь заполнит форму и нажмет кнопку «Submit» (Отправить), браузер принимает эту информацию, организует ее в пары имя/значение, кодирует ее для передачи, а затем отсылает на сервер.

Атрибут action элемента form указывает URL программы, используемой для обработки формы.

В атрибуте method указывается один из двух методов отправки данных формы на сервер – get или post. Информация формы, как правило, передается в виде серии переменных и соответствующих значений, разделенных символом амперсанда (&), как показано ниже:

variablel=contentl&variable2=content2&variable3=content3

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

При использовании метода get браузер передает данные формы за один раз, в виде части URL (прикрепляя их в конец URL и отделяя от него знаком вопроса). Метод post передает введенную в форму информацию отдельно от URL, по существу, в сообщении, состоящем из двух частей. Первая часть сообщения – это просто специальный заголовок, отправляемый браузером с каждым запросом. Затем идут реальные данные формы.

Выбор используемого метода зависит от требований сервера. Как правило, если ваша форма короткая и имеет несколько полей небольшого размера, лучше использовать метод get. И наоборот, данные больших и сложных форм лучше пересылать с помощью метода post.

Каждому элементу управления формы (за исключением submit и reset) необходимо присвоить имя (используя атрибут name). Данные, введенные пользователем в элемент управления, присваиваются данной переменной.

Элемент input (<input> . . . </input>) используется для создания различных видов элементов управления вводом данных, в том числе:

полей для ввода одной строки текста;

полей для ввода паролей;

скрытых элементов управления;

флажков (checkbox);переключателей (radio button);

кнопок отправки (submit) и сброса (reset);

механизмов загрузки файлов на сервер;

пользовательских кнопок и кнопок с графикой.

Атрибут type элемента input указывает тип элемента управления.

Поле для ввода текста

Самой простой тип элемента управления в форме – это поле для ввода текста (type="text") . Это тип элемента input, принятый по умолчанию.

input type = «text»

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

maxlength="число"

name="текст" (Обязательный)

readonly="readonly"

size="число"

value="текст"

Это поле позволяет пользователю ввести одно слово или строку текста. По умолчанию браузер отображает поле шириной в 20 символов, но вы можете указать любой размер, используя атрибут size; может задать максимальное число вводимых символов при помощи атрибута maxlength.

Aтрибут value используется для указания исходного значения, т.е. текста, который появляется в этом поле при загрузке формы.

Пример.

Поле для ввода пароля

Поле пароля (type="password") работает так же, как текстовое поле, за исключением того, что символы скрываются при помощи звездочки (*) или маркера (•) (или другого символа, определяемого пользовательским агентом). Атрибуты те же, что и в текстовом поле.

Скрытое поле (type="hidden") представляет собой элемент управления, не отображаемый в браузере, но передаваемый программе обработки при отправке данных.

Атрибуты:

accesskey="символ" tabindex="число"

name="текст" (Обязательный)

value="текст" (Обязательный)

Пример.

Флажок

Флажки (type="checkbox") напоминают выключатели, которые могут включаться и выключаться пользователем. Можно устанавливать сразу несколько флажков, входящих в группу, что делает их удобными для использования в вопросах с несколькими вариантами ответов, где допустим выбор сразу нескольких вариантов. При отправке данных формы на сервер отправляются только значения установленных (включенных) флажков.

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur)

checked="checked"

disabled="disabled"

name="текст" (Обязательный)

readonly="readonly"

value="текст" (Обязательный)

По умолчанию флажок не установлен; чтобы сделать его установленным при загрузке страницы, просто добавьте атрибут checked к соответствующему элементу input. В XHTML вы должны указывать значение для каждого атрибута, так что правильный синтаксис будет checked="checked" .

Пример.

Переключатель

В отличие от флажков, включенным может быть только один переключатель (радиокнопки type="radio"), а остальные при этом отключаются. Такой вид элементов управления применяется для взаимоисключающих вариантов выбора.

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur)

checked="checked"

disabled="disabled"

name="текст" (Обязательный)

readonly="readonly"

value="текст" (Обязательный)

При отправке данных формы пересылается только значение включенного переключателя.

Пример.

<р>Какую из приведенных операционных систем вы используете?</р>

<input type="radio" name="os" value="WinXP" /> Windows XP

<input type="radio" name="os" value="Linux" /> Linux

<input type="radio" name="os" value="OSX" checked="checked" /> Macintosh OSX

<input type="radio" name="os" value="DOS" /> DOS

Кнопки

Кнопки Submit (Отправка), которые используются для отправки данных формы агенту, выполняющему обработку, добавляются при помощи элемента input типа submit. При нажатии кнопки отправки данные формы немедленно отправляются на сервер для обработки.

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur) disabled="disabled"

name="текст"

value="текст"

Кнопка Reset (Сброс) восстанавливает исходные значения для всех элементов управления формы, и ее можно разместить при помощи элемента input типа reset. Создается кнопка сброса, которая очищает содержимое элементов формы (или задает для них значения по умолчанию).

Атрибуты

Базовые (id, class, style, title), Интернационализация, События Фокус (accesskey, tabindex, onfocus, onblur) disabled="disabled"

value="текст"

Можно изменить надпись на кнопке, добавив свой собственный текст в атрибут value.

Пример.

Авторы могут создать настраиваемую кнопку для управления клиентскими скриптами (JavaScript), для чего нужно задать для элемента input тип button.

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur)

disabled="disabled"

name="текст"

value="текст"

Эта кнопка (type = "button") не имеет заранее заданной функции и является инструментом общего применения, который можно настраивать при помощи скриптов.

Пример.

Выбор файла

Элемент input типа file позволяет пользователям отправлять внешние файлы при отправке формы. Этот элемент включает текстовое поле и кнопку Browse (Обзор), которая позволяет выбирать файлы на локальном компьютере.

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

Фокус (accesskey, tabindex, onfocus, onblur)

accept="MIME-тип"

disabled="disabled"

maxlength="число"

name="текст" (Обязательный)

readonly="readonly"

size="число"

value="текст"

При использовании элемента input типа file нужно указать атрибут enctype="multipart/form-data" в элементе form.

Пример.

<p>Send this file with my form information:</p>

</form>

Многострочные текстовые поля

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

Атрибуты

Базовые (id, class, style, title), Интернационализация,

События onselect, onchange

Фокус (accesskey, tabindex, onfocus, onblur)

соls="число" (Обязательный) – ширина элемента (в символах)

disabled="disabled"

name="текст" (Обязательный)

readonly="readonly"

rows="число" (Обязательный) – количество строк текста

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

Пример.

<textarea name="dream" rows="4" cols="45">Tell us your dream in 100 words or less</textarea>

Создание меню при помощи элементов select

Элемент select создает меню, отображающееся либо как раскрывающееся меню, если размер не указан (по умолчанию) или если используется атрибут size="l", либо как прокручиваемый список вариантов, если size больше единицы. Элемент select служит контейнером для любого числа элементов option. Добавление атрибута multiple превращает меню в прокручиваемый список. Он также может содержать один или несколько элементов opt group, которые используются для создания логической группы элементов option.

Атрибуты

Базовые (id, class, style, title), Интернационализация, события, onfocus,onblur, onchange

disabled="disabled"

multiple="multiple"

name="текст" (Обязательный)

size="число" tabindex="число"

Атрибуты

Базовые (id, class, style, title), Интернационализация, События,

disabled="disabled" label="текст"

selected="selected" value="текст"

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

disabled="disabled"

1аbеl="текст" (Обязательный)

Пример.

<p>What is your favorite ice cream flavor?</p>

<option>Rocky Road</option>

<option>Mint Chocolate Chip</option>

<option>Pistachio</option>

<option>Chocolate</option>

<option value="swirl">Fudge Ripple</option>

<option label="Praline Pecan">Praline Pecan </

option>

<option>Bubblegum</option>

</select>

По умолчанию при загрузке формы отображается первый элемент option. Чтобы сделать другой элемент option элементом по умолчанию, используйте атрибут selected этого элемента.

Текст внутри каждого элемента option представляет собой значение, которое посылается на сервер. Если вы хотите посылать значение, отличное от отображаемого, укажите его в атрибуте value элемента option. В приведенном примере для шестого элемента option пользователи видят текст «Fudge Ripple», но на сервер будет посылаться значение «swirl».

Группы вариантов

Логические группы вариантов можно организовать при помощи элемента optgroup. Этот элемент браузеры могут использовать для отображения иерархических каскадных меню. Значение обязательного атрибута label отображается в качестве заголовка для последующих вариантов.

Содержимым элемента optgroup является один или несколько элементов option. Элемент optgroup не может содержать других элементов optgroup. Атрибут label указывает имя для группы вариантов.

Пример.

<p>What are your favorite ice cream flavors?</p>

<optgroup label»"traditional"> <option>Vanilla</option> <option>Chocolate</option> <option>Mint Chocolate Chip</option> <option>Pistachio</option> <option>Fudge Ripple</option> </optgroup> <optgroup label="specialty"><option>Inside-out Rocky Road</option> <option>Super-duper Praline Pecan Smashup</option> <option>Bubblegum</option> </optgroup> </select>

Когда пользователь выбирает вариант из списка (например, «Pistachio»), содержимое соответствующего элемента option передается вместе с именем переменной, указанным в элементе select: ice cream=Pistachio

Надписи

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

Базовые (id, class, style, title), Интернационализация, События, плюс onfocus, onblur

accesskey="символ"

for="текст"

Существует два способа связывания надписи с элементом управления формы. Один из них – вложение элемента управления и связанного с ним описания внутрь элемента label.

Пример.

<1аbе1>Учетная запись: <input type="text" name="login" /></label>

<1аbе1>Пароль: <input type="password" name="password" /></label>

</form>

Другой метод – это связывание элемента label со значением id поля формы. Атрибут for указывает, для какого элемента управления предназначена данная надпись. Данный метод полезен для тех полей формы, которые находятся рядом с их описаниями, например когда они охватывают несколько разных ячеек таблицы.

Пример.

<label for="log">Login account:</label>

<label for="pswd">Password:</label>

</form>

Атрибуты id и name, применяемые в элементах управления формы (таких как input, select и т. п.), имеют разные и четко отличающиеся функции. Значение атрибута name пересылается программе обработки при отправке данных формы. Атрибут id используется для того, чтобы присвоить элементу уникальный идентификатор, на который могут ссылаться правила таблиц стилей, скрипты или элемент label.

Элемент fieldset используется для создания логической группы элементов управления формы. Элемент fieldset может содержать элемент legend – описание входящих в группу полей, которое может использоваться невизуальными браузерами.

Атрибуты

Базовые {id, class, style, title), Интернационализация, События

Атрибуты

Базовые (id, class, style, title), Интернационализация, События

accesskey="символ" align="top | bottom | left | right" (Устаревший)

Пример. Следующая форма была разделена на группы при помощи элементов fieldset, к которым были добавлены элементы legend в качестве описания.

<form> <fieldset>< legend >Информация о покупателе</ legend >

<lаbеl>Полное имя <input type="text" name="name" /></label>

<lаbеl>Адрес email <input type="text" name="email" /></label>

<lаbеl>Штат <input type="text" name="state" /></label> </fieldset>

<fieldset> < legend >Подписка на список рассылки</ legend >

<lаbеl>Добавьте меня в ваш список рассылки <input type="radio" name="list" value="yes" checked="checked" /></label>

<lаbеl>Нет, спасибо <input name"list" value="no" /></label>

</fieldset> </form>

Атрибуты accesskey и tabindex

Поскольку Рекомендация HTML 4.01 является частью деятельности W3C, направленной на совершенствование доступности Web-материалов и интерактивности для пользователей, не применяющих визуальные браузеры и традиционные средства указания и выбора, в ней появились несколько атрибутов, разработанных для того, чтобы упростить выбор полей с клавиатуры. Чтобы элемент управления формы можно было использовать, он должен быть выбран и активизирован. В мире разработки такое состояние называется получением фокуса. Следующие атрибуты перемещают фокус на элемент формы без использования традиционного метода, связанного с наведением курсора мыши и щелчком. Любой пользователь может применять эти методы для перемещения по форме.

Атрибут accesskey указывает символ, который можно использовать как клавиатурный «ярлык» элемента. На практике может потребоваться ввести комбинацию клавиш, например Alt-клавиша (Windows) или Command-клавиша (Macintosh).

Атрибут accesskey можно применять с элементами управления button, input, label, legend и textarea. Когда клавиша доступа переводит фокус на элемент label, фокус передается в соответствующий элемент управления формы.

Еще один метод перемещения фокуса по полям формы – это нажатие клавиши Tab, которое переводит фокус от одного поля к другому. По умолчанию браузеры, которые поддерживают данную функциональность, будут переводить фокус в том порядке, в каком поля находятся в документе. Если вы хотите изменить порядок перевода фокуса, используйте атрибут tabindex. Этот атрибут может использоваться с элементами button, input, select и textarea. Элементы с нулевым значением tabindex получают фокус после элементов с положительными значениями. Элементы с отрицательными значениями tabindex не получают фокус при нажатии клавиши Tab. Отключенные элементы также не могут получать фокус.

Пример.

Address <input type="text" name="address" tabindex="l" />

Zip code <input type="text" name="zip" tabindex="3" />

Phone number <input type="text" name="phone" tabindex="2" />

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

Атрибуты disabled и readonly блокируют для пользователя возможность выбрать или изменить значение в поле формы. Если элемент формы отключен (disabled), его нельзя выбрать.

Атрибут readonly запрещает пользователю изменять значение в поле формы (хотя поле все же можно выбирать).

Практика

Создайте следующие формы на WEB-странице

В последней форме в полях Фамилия, Имя, Отчество должны отображаться данные по умолчанию. В каждой форме должна быть кнопка, очищающая поля формы. С помощью кнопки Submit данные должны отправляться с помощью метода GET, то есть через строку URL.

ГЛАВА 3. СТИЛИ CSS

Стиль – всё то, что определяет внешний вид Web-документа при его отображении в окне браузера.

Таблица стилей – это некоторая структура описания свойств элемента.

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

Главная идея каскадных таблиц стилей – разделить содержимое документа и его физическое представление.Таблицы стилей (так называемые Cascading Style Sheets – CSS) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры.

Каскадные таблицы стилей – это стандарт W3C для создания представления Web-документов. Представлением (presentation) называется способ отображения или воспроизведения документа для пользователя на мониторе компьютера, дисплее мобильного телефона или путем чтения вслух средством чтения с экрана.

3.1. Преимущества CSS

Больший контроль над шрифтовым оформлением и раскладкой страницы

Можно применять традиционные возможности шрифтового оформления, которые недоступны для традиционного HTML.

Меньше работы

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

Потенциальное уменьшение размера документов

Избыточные теги font и вложенные таблицы делают документы громоздкими. Удаление из документа стилевого HTML позволяет уменьшить размер файла.

Потенциальное увеличение доступности документа

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

Стилевой HTML выходит из употребления

Консорциум W3C в спецификациях HTML и XHTML объявил устаревшими все элементы и атрибуты уровня представления. Наступит день, когда их поддержка браузерами станет необязательной.

CSS хорошо поддерживается

Почти каждый современный браузер поддерживает практически все компоненты спецификации CSS 1. Большинство также поддерживает большую часть требований рекомендаций версии 2 и 2.1. Существует ряд тормозящих развитие задержек, связанных с недостаточной поддержкой CSS в браузерах, которые требуют создания обходных путей.

Задание стиля обеспечивается с помощью и тега <STYLE> и атрибута STYLE . </STYLE>

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

Теги <STYLE> и </STYLE> используются внутри тегов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE – в теге заголовка раздела (<H1>, <H2>, …, H6>), а также в теге <BODY>, в теге выделения фрагмента <DIV> и многих других.

Применение тега <STYLE>:

Тег {свойство1: значение1; свойство2: значение2; …, свойствоN: значениеN}

</STYLE>

</HEAD>

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

Как видим, задание правила состоит из 2-х частей: селектора и определения.

Селектор – имя любого тега HTML, класса, или идентификатор.

Определение – задают свойства селектора.

Внешний вид списка стиля:

Селектор {свойство: значение;

свойство: значение;}

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

селекторы типов (элементов);

контекстные селекторы (потомки, дочерние элементы и элементы-братья);

селекторы классов и селекторы идентификаторов (ID);

селекторы атрибутов;

псевдоклассы;

псевдоэлементы.

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

Cелектор типа, который ссылается на элемент по имени. В следующем примере определяются стили заголовков первого и второго уровней путем использования тега STYLE:

<STYLE>

H1 {:Color:RED}

H2 {:Color:BLUE}

</STYLE>

</HEAD>

<BODY>

<H1>Это стиль H1. Цвет – красный</H1>

<H2>Это стиль H2. Цвет – синий</H2>

<P> Это – обычный стиль по умолчанию </P>

</BODY>

</HTML>

Мы изменили стили H1 и H2, принятые по умолчанию: назначили размеры (48 и 30 точек) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тегов.

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

В CSS 2 появился универсальный селектор элементов (*), который соответствует любому элементу. Стилевое правило * {color: gray} делает все элементы документа серыми. Универсальный селектор приводит к проблемам с элементами управления форм в некоторых браузерах. Если ваша страница содержит поля ввода на форме, то безопаснее будет не использовать универсальный селектор.

3.2. Способы добавления таблиц стилей на Web-страницы

1. Встраивание стилей (внутрь тега)

2. Включение стилей (заголовочные стили).

В область заголовка добавить стиль STYLE

<head>

p{color: blue;

background-color: yellow}

</ style>

</ head >

Элемент style необходимо помещать в теги head документа. В настоящее время каскадные таблицы стилей являются единственным широко поддерживаемым языком стилей, но консорциум W3C подготовился к возможному появлению новых языков, добавив атрибут type в элемент style. Пока единственным работоспособным типом является text/ess. Атрибут type является обязательным как для HTML, так и для XHTML. Если этот атрибут опущен, некоторые браузеры могут игнорировать всю таблицу стилей.

3. Связывание. Таблицу стилей создают в виде отдельного текстового файла с расширением .css. Документ таблицы стилей – это текстовый документ, который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML.

Этот стиль можно применить к нескольким документам.

Пример. В файле C1.CSS пишем следующий текст:

p{color: green;

}

body {background-color: pink}

в документе: <head>

… </head>

Тег LINK позволяет определить, на какой внешний документ мы будем ссылаться.

REL определяет тип связи между текущей страницей и той, на которую указывает ссылка. Если REL = stylesheet – мы связываемся с таблицей стилей.

TYPE – определяет тип того документа, с которым связываемся.

HREF – позволяет задать URL-адрес таблицы стилей.

4. Импортирование позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Для этого в область заголовка добавляют следующий код:

@ import url (http://www.myserver.ru/CSS/line.CSS)

</ style>

Команды @import должны идти перед всеми остальными элементами (за исключением @charset).

Импортирование позволяет применить несколько таблиц стилей к одному документу. Если в элемент style добавляются дополнительные функции @import, то информация из файла, прочитанного последним, имеет преимущество перед предыдущими.

Директива @import может также использоваться в самой таблице стилей для ссылки на информацию во внешних CSS-файлах.

Наследование

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

Пример. <p> Белеет парус <em> одинокий </em> </p>

Автор <em> М.Ю. Лермонтов </em>

В данном примере содержимое тега <em> внутри параграфа унаследует стиль тега <p>, если для тега <em> не указан собственный стиль.

Стили, применяемые к конкретным элементам, подменяют собой свойства, заданные выше в иерархии.

3.3. Конфликтующие правила стилей: каскад

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

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

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

Связанные (при помощи элемента link) внешние таблицы стилей

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

<head>

</head>

Если стилевое правило, указанное в файле style2.css, конфликтует со стилевым правилом, указанным в файле stylel.css, то правило из style2.css будет иметь более высокий приоритет, поскольку данная таблица стилей находится ниже в исходном документе.

Импортированные внешние таблицы стилей (с помощью @import)

Импортированная информация о стилях подменяет связанные элементом link стили. Если в документе есть несколько директив @import, то правила таблицы, расположенной ниже в документе, имеют приоритет перед правилами таблицы, расположенной выше.

Встроенные таблицы стилей (при помощи элемента style)

Стили, применяемые в конкретном документе, подменяют те, которые берутся извне.

Внутристрочные стили (использующие атрибут style в теге элемента)

Внутристрочные стили подменяют собой все прочие объявления стилей, относящиеся к данному элементу, за одним исключением.

Объявления стилей, помеченные индикатором ! important

Любой стиль, помеченный индикатором !important, подменяет собой все прочие конфликтующие с ним правила стилей. Например, чтобы текст абзацев всегда отображался синим цветом, используйте в таблице стилей следующее правило:

р {color: blue !important;}

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

3.4. Контекстные селекторы

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

Селекторы потомков указывают на элементы, которые содержатся внутри другого элемента. Они образуют список, разделенный символами пробела (который является комбинатором для селекторов потомков), начиная с элемента верхнего уровня. Для построения контекстного селектора необходимо перечислить элементы в том порядке, в каком они должны встретится: Например, в следующем правиле указывается, что элементы em должны быть оливкового цвета, но только в том случае, если они являются потомками пункта списка (li). Все прочие элементы em данное правило не затрагивает.

li em {color: olive;}

Селекторы потомков могут также иметь несколько уровней вложения, как показано в следующем примере, где выбирается только выделенный текст (em), находящийся внутри анкеров (а), находящихся внутри сортированных списков (ol).

ol a em {font-weight: bold;}

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

р > em {background-color: gray;}

Селектор элементов-братьев используется для ссылки на элемент, идущий сразу после другого элемента, имеющего того же родителя. Комбинатором для таких селекторов служит знак «плюс» (+). Например, если вы хотите сделать специальное оформление для первого абзаца, идущего после заголовка первого уровня, правило должно быть таким:

H1 + p {padding-left: 40px;}

Замечание: селекторы дочерних элементов и элементов-братьев не поддерживаются Netscape 4 и Internet Explorer версии 6 и ниже.

3.5. Использование классов

Все селекторы, которые мы ранее рассматривали, были привязаны к конкретным элементам. Селекторы классов и селекторы идентификаторов (ID) дают возможность указывать элементы, имя которым присвоили вы сами, независимо от элементов документа.

Имена элементам присваиваются с помощью атрибутов class и id. Эти атрибуты могут использоваться во всех XHTML-элементах, за исключением base, head, html, meta, script, style и title. Кроме того, атрибут class не может применяться в элементах base font и param. Селекторы классов и ID работают немного по-разному.

Используйте атрибут class для того, чтобы объединить несколько элементов в логическую группу. Элементы такого класса затем можно будет изменять при помощи одного стилевого правила.

Пример: каждый второй абзац (параграф) отобразить с отступом вправо: применим класс к этим абзацам.

Для создания классов используется следующая конструкция:

.имя класса {свойство: значение;}

У того элемента (тега), к которому хотим применить данный класс, добавляется атрибут: <тег class = имя класса>

Если хотим применить класс к конкретному тегу, необходимо описать его следующим образом:

тег. имя класса {...}

например, hi.special (color: red;}

p.special (color: red;}

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

.special (color: red;}

Пример:

<style>

.kl {margin – left:120px;} </style>

Затем в теле документа в нужном месте:

Атрибут id используется примерно так же, как class, но он применяется для выбора одного элемента, а не группы. Атрибут id должен однозначно указывать элемент (иными словами, два элемента не могут иметь одинаковое значение id в одном документе). Уникальность должна сохраняться только в пределах одного документа.

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

<р id="j042801">New item added today</p>

Селекторы ID в таблице стилей обозначаются символом решетки (#):

p#j061998 (color: red;} Название элемента можно опустить:

#j061998 (color: red;}

В современном Web-дизайне атрибуты id часто применяются для идентификации основных разделов страницы (обычно элементов div). Вот некоторые типичные значения id, применяемые для этой цели: content, header, sidebar, navigation и footer.

3.6. Группировка

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

H1, H2, H3 {text – align:center;

background – color:red}

чтобы отличались по размерам:

H1 {font – size: 200%}

H2 {font – size: 150%}

H3 {font – size: 230%}

3.7. Псевдоселекторы

Псевдоселекторами называются свойства, которые определяют для гиперссылок. Чтобы задать свойства гиперссылок, используется следующая конструкция:

a {text – decoration:none} отменить подчеркивание

a: link {color:red} не просмотренная гиперссылка

a: visited {color:white} просмотренная гиперссылка

a:hover {color:green} когда на нее навели указатель мыши

a:active {color:blue} активная гиперссылка (состояние в процессе нажатия на ссылку).

Замечание : В CSS 2 селекторы :active и :hover могут использоваться с элементами, отличными от ссылок, но такое применение не поддерживается в Internet Explorer (версии 6) и Netscape 4.

Love, НА!

Чтобы псевдоклассы ссылок (анкеров) функционировали правильно, они должны находиться в таблице стилей в определенном порядке. Аббревиатура LVHA (популярный способ произношения – Love, НА!) позволяет запомнить правильный порядок: : link, :visited, :hover, :active. Это относится и к порядку, и к специфичности. Если поместить :link или :visited в конец, они подменят собой состояния :hover и :active, и тогда эти стили отображаться не будут.

3.8. Другие псевдоклассы CSS 2.1

Помимо анкерных псевдоклассов, в спецификации CSS 2 вводятся дополнительные селекторы псевдоклассов. Однако нужно помнить, что они на данный момент не очень хорошо поддерживаются.

:focus

Выбираются элементы, получившие фокус, например элемент формы, который был выделен и принимает от пользователя данные. Хотя CSS 2 разрешает применять данный селектор к любому элементу, в настоящее время поддерживается его использование только с элементами формы. В Netscape 6 поддерживается использование данного селектора с элементами a, input, textarea и select.

Пример: input:focus {background-color:yellow;} ;

:first-child

Выбирается элемент, являющийся первым дочерним элементом родительского элемента. Этот селектор позволяет выбрать, например, первый абзац элемента div или первый элемент li в элементе ul.

Пример: li:first-child {font-weight: bold;}

:lang( )

Выбирается элемент, для которого был указан язык.

Пример: р:lang(de) {color: green;}

Предупреждение о поддержке браузерами: Internet Explorer для Windows версий 6 и ниже не поддерживает псевдоклассы :focus и :first-child. Браузеры Internet Explorer 5 для Macintosh, Netscape 6+ и Opera 7+ поддерживают эти псевдоклассы.

Псевдоэлементы

Селекторы псевдоэлементов работают так, как если бы они вставляли в структуру документа фиктивные элементы для применения стилей. Псевдоэлементы, по сути, являются частями существующих элементов с учетом контекста, например первая строка или первое слово. В CSS 2.1 включено четыре псевдоэлемента:

:first-line

Этот селектор применяет стилевое правило к первой строке указанного элемента. Свойства, которые можно применить к псевдоэлементу :first-line, ограничиваются следующими: font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height и text-shadow.

Следующий код добавляет дополнительный интервал между символами в первой строке текста каждого абзаца:

р:first-line {letter-spacing: 6pt;}

:first-letter

Стиль применяется к первой букве элемента. Можно использовать только свойства font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height и float. В CSS 2.1 к этому псевдоэлементу были добавлены свойства letter-spacing и word-spacing.

В следующем примере первая буква абзаца отображается крупным шрифтом и красным цветом.

p.opener:first-letter {" xml:lang="ru-RU" lang="ru-RU">:before и :after

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

Данный код вставляет кавычки большого размера до и после длинной цитаты (&8220 ; и &8221; – это символьные сущности для левой и правой фигурной кавычки):

blockquote:before {content: "“"; " xml:lang="ru-RU" lang="ru-RU">Предупреждения о браузерах: Internet Explorer версий 6 и ниже не поддерживает генерируемые данные (:before и : after). Браузеры Netscape 6+, Firefox/Mozilla и Opera 7+ поддерживают сгенерированные данные. Все современные, использующие CSS браузеры достаточно хорошо поддерживают селекторы :first-letter и :first-line

3.9. Единицы измерения, используемые в каскадных таблицах стилей

При указании длины принимайте во внимание следующее:

• Не ставьте пробел между числом и двухбуквенным сокращением.

Значения могут содержать дробную часть, например 14 . 5cm.

В некоторых свойствах, например в полях, допустимы отрицательные значения: margin: -500px. Ниже перечислены возможные единицы измерений.

in – дюйм = 2, 54 см

cm – сантиметры

mm – миллиметры

px – пиксели

pt – пункты = 1/72 дюйма ~ 0,375 мм

pc = пика = 12 pt

% – процент

еm – относительная единица измерения, которая обычно равна ширине заглавной буквы «М» в текущем шрифте. В CSS эта единица равна размеру шрифта в пунктах (т. е. ширина em в шрифте 24pt равна 24 пунктам) и используется для указания размера как по горизонтали, так и по вертикали

ex – Относительная единица измерения, равная высоте буквы «х» в нижнем регистре для текущего шрифта (приблизительно половина em)

3.10. Свойства CSS для управления цветом

Цвет можно задать:

названием; (red, blue, ...)
кодом: #RRGGBB
кодом #RGB

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

с помощью функции: rgb (R, G, B), например color:rgb (0, 255, 0);
rgb (R%; G%; B%)

color:rgb(0%; 0%; 100%)

Практика

Задание 1

Скопировать в свою область файл Исходный вариант.html
Изменить цвет шрифта, размер шрифта и цвет фона, сославшись на отдельный файл .css. (например, цвет шрифта – зеленый, размер – 30px, фон – розовый).
Используя заголовочные стили, залить фон вначале тегов параграфа текстурой bfon1.jpg (или другой), затем тега body. Сделайте вывод о том, какой стиль приоритетнее (внешний, заголовочный?)
Измените цвет шрифта только 1-го куплета на красный.
В первом куплете фон слова зеленый сделайте зеленым. (С помощью стилей).
Каждый второй куплет (параграф) сделайте с отступом от левого края на 100px.
С помощью псевдоселекторов поменяйте цвета по умолчанию у ссылки.

Задание 2

В задании 1 переделать форматирование текста с помощью внешней таблицы стилей. При форматировании используйте задание стилей для элементов логического форматирования.

Сделать несколько вариантов фонового изображения:

Одиночный по центру справа или в центре или слева;

С вертикальным повторением слева или справа, начинающийся не с самого верха;

С горизонтальным повторением;

Не прокручивающийся вместе с текстом.

Задание 3

Создайте несколько фрагментов текста и, применив к ним классы CSS, получите, например, такой результат:

3.11. Оформление таблиц с помощью CSS

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

Заголовки таблиц

Элемент caption для представления заголовков таблиц впервые появился в составе HTML 4.O. В CSS 2.1 с ним связано специальное поведение и собственное свойство для размещения заголовка выше или ниже таблицы под названием caption-side

caption-side

Значения: top \ bottom | inherit

Начальное значение: top

Применимо: К заголовкам таблиц (элементам HTML caption).

Наследуется: Да.

Связь заголовка с телом таблицы показывает рис.:

Рис 3. 1. Таблица и заголовок

Как и все блочные элементы, таблица и заголовок могут иметь свой набор свойств, например отступов, например:

table caption {font:1.5em Georgia, "Times New Roman", Times, serif;

padding:1em;}

При этом они трактуются и как потомки от table, а стало быть, наследуют и свойства самой таблицы. Поэтому если таблица была объявлена синей, то, несмотря на существование у заголовка своего блока и своих отступов, синим станет и он.

Существует неявный прямоугольник, в который заключены прямоугольники таблицы и заголовка. Именно он используется при позиционировании НТМL элемента table.

Порядок наложения элементов

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

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

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

Границы

В CSS 2.1 имеются две модели управления границами, выбор которых определяется свойством:

border-collapse

Значения: collapse | separate | inherit

Начальное значение: collapse

Модель раздельных границ (border-collapse: separate)

Граница отображается со всех четырех сторон каждой из ячеек таблицы, а с помощью border-spacing можно добавить дополнительный межъячеечный промежуток.

border-spacing

Значения: <длина1> <длина2> | inherit

<длина1> - горизонтальный промежуток между ячейками в каждой строке таблицы.

<длина2> - значение промежутка по вертикали.

Если задается только одно значение, то оно действует в обоих направлениях одновременно. Например:

table {

border-collapse:separate;

border-spacing:10px 3 px;

border:none;}

td { border: 1px solid black;}

Рис 3. 2. Таблица с промежутком между ячейками

Если значение border-spacing равно нулю, это вызывает касание смежных границ ячеек, а значит, и «удвоение» таковых во внутренней части сетки.

Модель сжимающихся границ (border-collapse: collapse)

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

table {

border-collapse: collapse;

border:none;}

td {

border: 1px solid black;}

Рис 3. 3. Таблица со сжатыми межъячеечными границами

Границы между ячейками центруются по линиям межъячеечной сетки. Поэтому если пара смежных ячеек имеет границу толщиной 8 пикселей, на область каждой ячейки придутся по четыре из них. Если граница занимает нечетное число пикселей, то выбрать, где вывести «лишний» пиксель, должен пользовательский агент. Широкие границы по внешним краям таблицы могут выходить в зону отступа.

Явно определив свойство таблицы border-collapse : collapse, удаляют все дополнительное пространство и даже небольшие зазоры между границами, которые автоматически мог вставлять браузер.

Расчет размеров таблицы (ширина, высота)

Браузер может использовать один из двух алгоритмов расчета значения ширины таблицы: с фиксированной и автоматически определяемой шириной. Конкретный способ расчета для соответствующей таблицы создатели Web-страниц могут указывать посредством выбора значения table-layout.

table-layout

Значения: auto | fixed | inherit

Начальное значение: auto

Алгоритм с фиксированной шириной

Значение table-layout: fixed говорит браузеру, что находить размеры таблицы нужно, используя «фиксированный» алгоритм вычислений. Подобный способ расчета требует от агента наименьших усилий, так как искомую ширину определяют значения свойства width таблицы, ее столбцов и ячеек.

Прежде всего агент использует ширину столбцов с конкретно заданными значениями (не auto). Затем просматривает ячейки первой строки. Ячейки с заданной шириной (не auto) определяют ширину тех столбцов, в которые они входят. Оставшимся столбцам с шириной auto назначается примерно равная ширина, достаточная, чтобы заполнить остаток места в таблице.

Итоговой шириной таблицы становится сумма ширин столбцов или значение width табличного элемента table, точнее большее из значений.

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

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

table-layout: fixed поможет уменьшить время вывода приложения. Достаточно убедиться, что задана конкретная ширина всех столбцов или ячеек первой строки таблицы.

Алгоритм с автоматически определяемой шириной

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

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

3.12. Оформление таблиц

Для управления видом таблиц никакие специальные свойства не требуются. Основные приемы оформления и форматирования типичных компонентов таблиц:

Содержимое-текст

font и любые свойства шрифтов;

все свойства, задающие формат текста;

color (для изменения цвета).

Выравнивание внутри ячеек таблицы

text-align – горизонтальное выравнивание текста в ячейке.

vertical-align – вертикальное выравнивание текста в ячейке.

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

Цвет фона и иллюстрации

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

background и другие свойства, задающие фон.

Отступы

Для указания отступа снаружи таблицы можно использовать любое соответствующее свойство (margin, padding).

К внутренним элементам: ячейкам, строкам, столбцам – понятие «отступ» неприменимо.

Заполнение и разбивка между ячейками

padding и свойства формирования заполнения в CSS можно задавать для каждой отдельной ячейки, а не всех сразу.

В HTML пространство между ячейками определяется атрибутом cellspacing. Прямого аналога ему в CSS нет. Ближайшим по назначению является свойство border-collapce:separate и указание для расширения пространства между ячейками значения border-spacing.

Размер и позиционирование таблицы

Таблица позиционируется как и любой другой блок.

width – кроме строк и групп строк;

height – кроме столбцов и групп столбцов.

Свойства столбцов

Ячейки таблиц всегда являются потомками строк, однако в CSS описывает четыре разрешенных свойства столбцов

border

background

width

visibility

Практика

Оформите 3 таблицы с помощью стилей CSS:

3.13. Блочные и внутристрочные элементы

В (X)HTML разница между блочными и внутристрочными элементами связана с правилами вложения элементов. Как правило, блочные элементы могут содержать как блочные, так и внутристрочные элементы, в то время как внутристрочные элементы могут содержать только данные или другие внутристрочные элементы. Абзацы (р), заголовки (например, h1), списки (ol, ul, dl) и элементы div являются наиболее распространенными блочными элементами. Выделенный текст (em) и анкеры (а) являются примерами распространенных внутристрочных элементов.

Блочный элемент CSS (display: block) всегда создает разрыв строки до и после себя. Он занимает всю ширину родительского элемента, в котором он содержится, будь это ширина всего документа (для элемента body) или меньшее пространство, например элемент div c заданным размером. В нормальном потоке текста документа рядом с блочным элементом разместить ничего нельзя.

Внутристрочные элементы CSS (display: inline) не создают разрывов строки. Они появляются внутри строки, и разрыв происходит, только если ширины родительского элемента не хватает, и тогда материал переносится на следующую строку.

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

Для свойства display существуют и другие значения. Наиболее распространенным и хорошо поддерживаемым является значение none, при указании которого элемент не отображается вообще и, по сути, удаляется из потока документа. К другим значениям относятся list-item (сходно со значением block, но отображается с номером или маркером), run-in (блочный элемент, например заголовок, начинает входить в следующий элемент, например абзац), а также ряд ролей отображения, связанных с таблицами.

Но изменение представления HTML-элемента средствами CSS не изменяет определения этого элемента как блочного или внутристрочного в HTML. Свойство display можно применять для явного объявления ролей отображения для отдельных элементов. Знать роль отображения элементов полезно для понимания блоковой модели CSS.

3.14. Введение в блоковую модель

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

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

Блоки элементов состоят из четырех основных компонентов. В основе блока лежит его содержание. Содержание окружает определенный интервал, после чего идет граница, окруженная полями, как показано на рисунке.

Интервалы, границы и поля не являются обязательными. Область интервала (padding) – это пространство между краем области содержания и границей (если она есть). Фоновый цвет или изображение, применяемые к элементу, доходят до этой области. Границы (borders) создаются стилевыми свойствами, которые определяют их вид (сплошной или пунктирный), толщину и цвет. Если в границе есть пустое пространство (щель), в этом пространстве отображается фон. Иными словами, фон распространяется под границей до ее наружного края.
Поля (margins) всегда прозрачны, а это значит, что сквозь них будет виден фоновый цвет или изображение родительского элемента.
Шириной элемента называется только ширина области содержания. Это означает, что если вы укажете, что элемент должен быть шириной 200 пикселей, то содержимое будет шириной 200 пикселей, а общая ширина будет складываться из ширины интервала, границы и полей, добавленных к этому значению.
Стиль для верхней, правой, нижней и левой сторон блока может задаваться независимо.

Чтобы определить границу блока, необходимо указать ее стиль: стиль границы задается свойством: border – style: значения:

none – нет границы

solid – сплошная прямая линия

double – двойная линия

groove – вдавленная линия

ridge – выпуклая трехмерная линия

inset – трехмерная ступенька вниз (текст вдавлен)

outset – содержимое приподнято над страницей

dotted – пунктирная линия

dashed – штриховая линия

Блок можно задать следующим образом:

- в области заголовка: <style>#d1_{свойства: значения; свойство: значение}</style>

- в тексте: <div_id=d1> текст </div>

Cвойства блока:

border – color: цвет – цвет границы

border – width: число – толщина границы

padding: расстояние между текстом и границей

margin: расстояние между границей и внешним элементом

Границы нумеруются top, bottom, left, right.

Пример: border: red blue green black;

или border - top - color: red; …

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

Перечислим свойства, управляющие положением элементов в CSS2.1:

float bottom overflow

clear top clip

position left visibility

bottom right z-index

3.15. Нормальный поток

В модели «нормальный поток» (normal flow) текстовые элементы страницы располагаются сверху вниз и слева направо для языков, в которых читают слева.

Входя в нормальный поток, блочные элементы располагаются друг за другом, а встроенные – заполняют доступное для них место. При изменении окна браузера блочный элемент расширяется или сужается, а содержимое элемента форматируется с учетом изменившейся ширины. В этой модели объект влияет на положение соседних, окружающих элементов.

Свободное размещение

Именно ради этой возможности и создано свойство float. В CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение. Свободное размещение – это не схема выбора положения, а уникальная функция с интересными проявлениями.

Свободное размещение полезно не только, чтобы иногда «прижимать» к краю рисунки. На деле это один из основных инструментов современного Web-дизайна, основанного на технологии CSS. Свободным размещением элементов пользуются для построения документов с несколькими колонками; панелей навигации из ненумерованных списков; выравнивания, напоминающего таблицу, но не являющуюся таковой, и т.д.

Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство float.

Значения: left right none inherit. Начальное значение: none

Применимо: Ко всем элементам.

В этом простом примере свойство float используется, чтобы прижать изображение вправо

img {float: right; margin: 20px;}

Замечание. Свойство float элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace.

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

Результат вывода вскрывает основные аспекты свободного размещения элементов:

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

При размещении текстовых элементов нужно задавать ширину (width). Без этого прямоугольник вывода содержимого может сжаться до минимально возможного.

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

Элемент свободно размещается целиком, а соседнее содержимое «обтекает» его.

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

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

img { float: left; }

p.boxed { background-color: #999; border: solid 2px #333; }

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

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

Если для размещения элементов бок о бок недостаточно места, второй из элементов отодвигается вниз, пока освободившегося пространства не хватит для его вывода без перекрытия первого.

Текст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Екст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Также свободно размещаемым элементам запрещено выходить за рамки тех элементов, которые их содержат, если они вмещаются в эти элементы по ширине.

3.16. Пропуск размещаемых элементов

Перенос в строках – неплохой способ сэкономить пространство, но иногда неуместный. Бывает, что область сбоку от свободно размещенного элемента хочется оставить незанятой, а следующий элемент начать в «нормальной» позиции. В этих случаях, чтобы помешать появлению элемента рядом со свободно размещенным объектом, используйте свойство clear со значениями left, right, both, none, inherit. Начальное значение: none. Данное свойство применимо к элементам уровня блока.

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

img {float: left; margin-right: 10рх; }

h1 {clear: left; top-margin: 2em; }

Аналогично работает и значение right, предотвращающее появление элемента рядом с размещенными справа. Значение both смещает элемент вниз, пока не будут пропущены свободно размещенные элементы справа и слева.

3.17. Позиционирование: основы

Существует четыре типа позиционирования, каждый из которых задается свойством position со значениями static, relative, absolute, fixed, inherit. Начальное значение: static

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

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

relative Относительное позиционирование перемещает прямоугольник, где содержится элемент, однако исходное пространство под него в документе сохраняется за самим элементом.

absolute Объекты с абсолютной позицией изымаются из потока содержимого документа и размещаются относительно охватывающего блока. В силу удаления из потока элемент больше не влияет на размещение окружающих элементов.

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

3.18. Охватывающий блок

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

Охватывающий блок, созданный корневым элементом (html), называют начальным. Прямоугольник такого блока полностью заполняет порт просмотра страницы. Начальный блок применяется, если другие охватывающие блоки в документе отсутствуют.
Охватывающим блоком некорневых элементов со схемой relative или static являются край содержимого ближайшего блочного элемента, ячейки таблицы или родителя встроенного блока.
При абсолютном позиционировании охватывающим элементом является ближайший элемент-предок со схемой, отличающейся от static. Другими словами, чтобы стать блоком, который охватывает потомки, элемент-предок должен позиционироваться по принципу relative, absolute или fixed.
Если элемент встроенный, блок совпадает с областью содержимого.
Если элемент-предок не существует, используется начальный охватывающий блок.

3.19. Задание положения

Как только схема позиционирования описана, по четырем значениям сдвига осуществляется реальное размещение с помощью свойств top, right, bottom, left, значениями которых могут быть <длина>, <процент>, auto или inherit. Начальное значение: auto.

Значения, заданные для каждого из свойств сдвига, определяют то расстояние, на которое элемент должен быть сдвинут от конкретного края. Положительные значения сдвигают элемент к центру охватывающего блока, а отрицательные – «толкают» его вовне.

В следующем примере при помощи процентных значений элемент размещается в левом нижнем углу охватывающего.

div {position: absolute; height: 120px; width: 300рх; border: 1px solid #000; }

img {position: absolute; top: 100%; left: 0%;}

3.20. Обработка переполнения

В тех случаях, когда размер элемента чересчур мал для того, чтобы тот мог вместить свое содержимое, возможно определить порядок действий над содержимым, которое не помещается в элемент. Для этих целей используется свойство CSS overflow со значениями : visible, hidden, scroll, auto, inherit. Начальное значение: visible.

Значение по умолчанию – разрешает выводить содержимое и вне пределов прямоугольника элемента.
Если значение overflow равно hidden, то содержимое, которое не вмещается внутрь прямоугольника элемента, отсекается и не выводится вообще.
При выборе scroll к прямоугольнику элемента добавляются полосы прокрутки даже в том случае, если содержимое элемента помещается на экране.
При значении auto прокрутка добавляется лишь при условии, что содержимое не вмещается.

Можно задать размеры и положение зоны видимости при помощи свойства clip со значениями rect(top, right, bottom, left), auto, inherit.

Для управления видимостью элемента как такового используется свойство CSS visibility со Значениями visible, hidden, collaps, inherit.

Замечание: Значение collapse рекомендуется для использования в столбцах и строках таблиц, отвечающих правилам CSS. Использование collapse с любыми прочими элементами может их скрыть, однако лучше всего этого избегать. Это значение не поддерживает Internet Explorer для Windows версии 6 и ниже.

Элементы могут перекрываться. По умолчанию наложение элементов происходит в порядке их появления в документе, при этом более «поздние» отображаются поверх тех, которые следовали до них. Можно изменить порядок наложения элементов, установив свойство z-index. Свойство z-index принимает любое целочисленное значение, как положительное, так и отрицательное. При этом чем больше значение, тем выше место данного элемента в «стеке», отрицательные значения отодвигают элемент «глубже» по оси z.

3.21. Расчет позиции элемента

Хотя задать позицию элемента, используя свойства сдвига, – дело простое, все может усложниться в том случае, если расстояния смещения перемешаны с отступами и шириной содержимого элемента и на них действуют ограничения охватывающего блока по ширине. На деле в CSS 2.1 содержится ошеломительно обстоятельный список ограничений и правил урегулирования конфликтов с несовместимыми и неуказанными значениями.

Ниже приведен общий прикладной обзор правил, которые должны помочь в большинстве случаев.

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

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

Если ширина элемента указана, она уже не меняется. Если, напротив, ширина текстового (незамещаемого) объекта равна значению auto, то зона вывода содержимого «подгоняется по размеру» так, чтобы оказаться достаточной для вывода в ширину. Значение auto замещаемых элементов, например изображений, меняется на реальные размеры объекта в пикселях.

Ширина зоны содержимого элемента меняется по размеру только в том случае, если установлена в auto, а все другие свойства при этом имеют конкретно заданные значения. Являясь единственным параметром, равным auto, ширина элемента становится последним вариантом подгонки и соответственно корректируется.

Для выполнения нужных корректировок агенты сначала ищут auto в значениях правого (для языков с письмом слева направо) отступа или сдвига. Для вертикальной подгонки меняются равные auto свойства нижнего края.

Когда значения top и left равны auto, элемент как было сказано выше помещается в «статическую» позицию, которая изменяется лишь в том случае, если все остальные параметры имеют заданные значения, a left (по горизонтали) и top (по вертикали) являются единственными параметрами со значением auto. Во всех других случаях пространство слева и сверху не корректируется.

При таком поведении и этих ограничениях простейший и наиболее предсказуемый способ произвести абсолютное позиционирование элемента – указать его ширину, а также сдвиги сверху (top) и слева (left). Тем самым отступы от объекта будут сохранены, а пространство справа и снизу может гибко меняться, чтобы соответствовать параметрам охватывающего блока.

Замечание: Приведенные правила исходят из корректности поведения согласно спецификации CSS 2.1 и излагают основы работы браузеров, соответствующих стандарту. Не забывайте, однако, что из-за трудностей в реализации модели прямоугольников в Internet Explorer для Windows (всех версий, кроме режима Standards в IE 6 и 7) используется иной метод расчета положения элементов с учетом заполнения, отступов и границ.

3.22. Фиксированное позиционирование

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

Помимо такой «устойчивости» к пролистыванию для элементов в фиксированной позиции характерно:

Описание вида{position: fixed;}.

Позиционирование относительно краев порта просмотра (краев окна браузера) при помощи одного или нескольких свойств, определяющих сдвиг (top, right, bottom, left). He заданные явным образом свойства принимают значение (по умолчанию) auto. Значения сдвига отсчитываются от внешнего края прямоугольника элемента (включая значение отступа, если таковой есть).

• Сближающее их с элементами в абсолютной позиции полное удаление из потока содержимого документа с расходованием пространства под ними для других нужд.

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

ul {position: fixed; top: 0px; left: 0; width: 100рх;

background-color: #999; margin: 0; padding: 10;}

p, hi {margin-left: 150px;}

3.23. Относительное позиционирование

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

Относительно позиционируемые элементы отличаются следующим:

Описанием вида {position: relative;}.

Позиционированием относительно своего исходного положения в нормальном потоке с учетом одного или нескольких задающих сдвиг свойств (top, right, bottom, left). He заданные явным образом свойства приобретают значение (по умолчанию) auto.

Сохранением исходного пространства в потоке содержимого документа за самим элементом.

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

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

em {position: relative; top: -30рх; right: -30рх; background: #ccc; }

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

При появлении недопустимых значений спецификация CSS 2.1 рекомендует проигнорировать свойство right (для языков, где пишут слева направо; в остальных случаях - проигнорировать left), приняв его равным значению -left. При выявлении конфликта между bottom и top значение первого игнорируется и назначается равным второму с противоположным знаком. Тем самым «излишне определенное» стилевое правило вида:

em {top: 10; bottom: 50; left: 50: right -4;} будет трактоваться, как будто было задано так:

em {top: 10: bottom: -10; left: 50; right: -50;}

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

Практика

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

3.24. CSS свойства

В настоящее время поддержка некоторых свойств (особенно относящихся к новой Рекомендации CSS 2.1) еще содержит ошибки и различается в разных браузерах.

Замечание: Для всех свойств в CSS2.1 существует ключевое слово inherit (наследовать), которое устанавливает для свойства значение, равное соответствующему значению в родительском элементе.

Визуальное пространство

свойство	значения	описание
background	[<'background-color'>\|\|<'background-image'>\|\|<'background-repeat'>\|\|<'background-attachment'>\|\|<' background-position'>\|\|inherit	Объединенное свойство для указания всех аспектов элемента, относящихся к фону.
color	<color> inherit	Описывается цвет переднего плана элемента (цвет текста для HTML-элементов).
background- color	<цвет> transparent inherit	Задает фоновый цвет Web-страницы или ее элемента Предопределенное значение transparent задает «прозрачный фон». Оно же является значением по умолчанию.
background- image	none url (<URL>) inherit	Задает фоновый рисунок Web-страницы или ее элемента Предопределенное значение none отключает фоновый рисунок, оно же является значением по умолчанию.
background- repeat	repeat repeat-x repeat-y no-repeat inherit	Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе. Repeat – (значение по умолчанию) – заставляет фоновый рисунок повторяться по горизонтали и по вертикали. no-repeat – запрещает фоновому рисунку повторяться repeat-x - заставляет фоновый рисунок повторяться только по горизонтали. repeat-y - заставляет фоновый рисунок повторяться только по вертикали.
background- attachment	scroll fixed inherit	Позволяет «зафиксировать» фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background- position	<процент> <длина> top center bottom left right inherit	Определяет позицию исходного фонового изображения на фоне данного элемента. Задает начальное положение фонового рисунка с помощью двух значений или при помощи двух ключевых слов : сначала указывается позиция по горизонтали, потом по вертикали. Значение по умолчанию –:0% 0% (то же, что для top, left)

Свойства шрифта

свойство

значения

описание

пример

font-family

<название-семейства> | <общее-семейство> ]

inherit

Это свойство задает приоритетный список названий семейств шрифтов (serif, san-serif, curalve, fantasy, monospace).

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

font-family:arial

font-family:arial, helvetica

font-style

normal

italic

oblique

inherit

Задает стиль шрифта не выбранного семейства.

normal (значение по умолчанию) – задает обычный вид шрифта

italic – задает курсивное начертание

oblique – задает наклонное начертание

font-style:normal

font-style: italic

font-style: oblique

font-variant

normal

small-caps inherit

Задает вид малых букв шрифта, используемого в элементе страницы

normal (значение по умолчанию) – задает обычный вид малых букв шрифта

small-caps – делает их такими же, как большие буквы, только меньшего размера (капитель)

font-variant: normal

font-variant: small-caps

font-weight

normal

bold

bolder

lighter

100-900

inherit

Задает «жирность» шрифта, используемого в элементе страницы

«Жирность» может быть задана тремя способами.

1. Предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно.

2. Относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя.

3. Одним из девяти значений, от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному 700.

Значение по умолчанию normal

font-weight: normal

font-weight: bold

font-weight: bolder

font-weight: lighter

font-weight: 250

font-size

normal

percentage

xx-small

x-small

small

medium

large

x- large

xx- large

smaller

larger

percentage

Задает размер шрифта, используемого в элементе страницы. Возможно задание размера шрифта:

1. Абсолютными величинами, в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя

2. Одним из девяти доступных предопределенных значений (xx-small, x-small, small, medium, large, x- large, xx- large) которые задают один из семи размеров шрифта, поддерживаемых HTML.

3. Значения smaller и larger задают размер шрифта – по отношению к шрифту родителя на размер меньше или больше соответственно. Начальное значение: medium.

" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">

" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">" xml:lang="ru-RU" lang="ru-RU">;color:#000000" xml:lang="en-US" lang="en-US">font

[[<'font-style'> || <'font-variant'> ||<'font-weight'>]? <'font-size'>

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

При использовании font как сокращенной записи нескольких свойств шрифта важен порядок указания значений свойств. Во всех приведенных ниже правилах свойство font используется правильно.

h1 {font: 1.75em sans-serif; } /* минимальный список значений для font */

h1 { font:1.75em/2 sans-serif; }

h1 {font:bold 1.75em sans-serif }

h1 {font:oblique bold small-caps 1.75em Verdana, Arial, sans-serif}

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

Свойства текста

свойство

значения

описание

пример

line-height

normal

число расстояние проценты inherit

Задает вертикальное расстояние между строками текста. Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние

line-height: normal

line-height:

letter-spacing

normal

число

inherit

Задает расстояние между символами при отображении текста

letter-spacing:0,5 cm

word-spacing

Normal

<длина>

inherit

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

word-spacing:5px;

text-decoration

none

underline

overline

line-through

blink

Задает специальное оформление текста.

none – отменяет любое специальное оформление (значение по умолчанию для большинства тегов)

underline – подчеркивает текст (значение по умолчанию для тегов <A>, <INS>, <U>)

overline – «надчеркивает» текст

line-through – зачеркивает текст (значение по умолчанию для тегов <DEL>, <S>, <STRIKE>)

blink – заставляет текст мерцать (IE не поддерживается)

text-decoration: none

text-decoration: underline

text-decoration: overline

text-decoration: line-through

text-decoration: blink

text-transform

none

capitalize

uppercase

lowercase

inherit

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

none (значение по умолчанию) – отключает любые преобразования регистра символов
capitalize – преобразует первую букву каждого слова текста в верхний регистр
uppercase – преобразует все символы текста в верхний регистр
lowercase – в нижний регистр

text-transform: none

text-transform: capitalize

text-transform: uppercase

text-transform: lowercase

text-align

left

right

center

justify

Задает горизонтальное выравнивание текста.

left – (значение по умолчанию) – выравнивает текст по левому краю
right – по правому краю
center – по центру
justify – по ширине

text-align: left

text-align: right

text-align: center

text-align: justify

text-indent

Длина

процент

Задает отступ красной строки. Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя

text-indent:20px;

text-indent:10%

vertical-align

baseline

middle

sub

super

text-top

text-bottom

top<процент> |<длина> | inherit

bottom

Задает положение элемента по вертикали относительно элемента – родителя.

baseline – выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя
middle – выравнивает центр элемента страницы по центру родителя
sub – превращает текст в нижний индекс
super – превращает текст в верхний индекс
text-top – выравнивает верх текста элемента страницы по верху текста родителя
text-bottom – выравнивает низ текста элемента страницы по низу текста родителя
top – выравнивает верх элемента страницы по самому верху родителя
bottom – выравнивает низ элемента страницы по низу родителя

vertical-align: baseline

vertical-align: middle

vertical-align: sub

white-space

normal

pre

nowrap

pre-wrap

pre-line

Задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине

normal (значение по умолчанию) – включает автоматический перенос длинных строк

pre – не поддерживается

nowrap – отключает автоматический перенос

white-space: normal

white-space: pre

Начальное значение: normal

direction

ltr

rtl

inherit

direction:rtl;

Свойства списков

свойство

значения

описание

list-style-type

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

decimal-leading-zero

lower-greek

lower-latin

upper-latin

lower-alpha

upper-alpha

none

Задает тип маркера или номера позиции списка

disc (значение по умолчанию) – отображает сплошной кружок

circle - окружность

square – сплошной квадрат

decimal – нумерует позицию арабскими цифрами

lower-roman – малыми римскими

upper-roman – большими римскими

lower-alpha – помечает позиции малыми латинскими буквами

upper-alpha – большими латинскими

none – вообще убирает маркер или нумерацию

list-style-image

none

url (<url>)

Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type

list-style-position

outside

inside

Определяет положение маркера в списке: в составе абзаца пункта списка (значение inside), или выдвинутым влево от него (значение outside)

list-style

<list-style-type> || <list-style-image> ||<list-style-position>

inherit

Объединенное свойство для указания типа, изображения и местоположения маркеров списка. К элементам со значением свойства display, равным list-item (в HTML это элементы ul, ol и li). Значения данных свойств можно указывать в произвольном порядке, при этом любые свойства можно опускать вообще. Не забывайте, что не указанные в сокращении свойства принимаются равными своим значениям по умолчанию. ul {list-style: url(skull.gif) disc outside;} ul {list-style: disc outside url(skull.gif);} ul {list-style: url(skull.gif) disc;}

counter-increment

<идентификатор> <целое_число>

None

inherit

Указывается величина инкремента (приращения) для счетчика (допускаются положительные и отрицательные значения).

counter-reset

<идентификатор> <целое_число>

None

inherit

Сброс счетчика - установка его в любое значение (положительное или отрицательное)

Границы

свойство

значения

Описание

border

[<border-style> || <border-width> || <border-

color> ] | inherit

Объединенное свойство для указания стиля рамки, толщины и цвета для каждой из сторон элемента.

border-bottom

[<border-style> || <border-width> || <border-

color> ] | inherit

Объединенное свойство для указания стиля, толщины и цвета нижнего края элемента.

border-bottom-color

<цвет> | transparent | inherit

Указывается цвет нижнего края элемента.

Начальное значение: Значение свойства color элемента.

border-bottom-style

none

dotted | dashed

solid

double

groove

ridge

inset

outset

Указывается стиль рамки для нижнего края элемента. Чтобы рамка отображалась, значение должно отличаться от nonе.

Начальное значение: none

Применимо ко всем элементам.

border-bottom-width

thin

medium

thick

<длина>

inherit

Указывается толщина рамки для нижнего края элемента.

Начальное значение: medium

border-collapse

collapse

separate

inherit

Указывается модель отображения рамки для элемента-таблицы:сжимающая или раздельная

Начальное значение: separate

Применимо к таблицам и внутристрочным табличным элементам.

border- color

<цвет>

Transparent (можно указывать от одного до четырех значений)

inherit

Объединенное свойство для указания фонового цвета для каждой стороны элемента.

border-left

<border-style> || <border-width> || <border-color> ] | inherit

Объединенное свойство для указания стиля, толщины и цвета левого края элемента.

border-left-color

<цвет

Transparent

inherit

Указывается цвет рамки для левого края элемента.

border-left-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Указывается стиль рамки для левого края элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе.

border-left-width

thin

medium

thick

<длина>

inherit

Указывается толщина рамки для левого края элемента. Начальное значение: medium

border-right

<border-style> || <border-width> || <border-color> ] | inherit

Объединенное свойство для указания стиля, толщины и цвета правого края элемента.

border-right-color

<цвет

Transparent

inherit

Указывается цвет рамки для правого края элемента.

border-right-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Указывается стиль рамки для правого края элемента. Чтобы рамка отображалась, значение должно отличаться от none.

border-right-width

thin

medium

thick

<длина>

inherit

Указывается толщина рамки для правого края элемента. Начальное значение: medium

border-spacing

<длина>

inherit

Указывается расстояние между рамками ячеек таблицы при выборе модели рамки

separate: по горизонтали и вертикали. Начальное значение: 0. Применимо к таблицам и внутристрочным табличным элементам.

border—style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Объединенное свойство для указания стиля рамки для каждой из сторон элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе.

border-top

<border-style> || <border-width> || <border-color> ] | inherit

Объединенное свойство для указания стиля, толщины и цвета верхнего края элемента.

border-top-color

<цвет

Transparent

inherit

Указывается цвет рамки для верхнего края элемента.

border-top-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Указывается стиль рамки для верхнего края элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе.

border-top-width

thin

medium

thick

<длина>

inherit

Указывается толщина рамки для верхнего края элемента.

Начальное значение medium

border-width

thin

medium

thick

<длина>

inherit

Объединенное свойство для указания толщины рамки с каждой стороны элемента.

table-layout

auto

fixed

inherit

Указывается алгоритм раскладки для ячеек таблицы, строк и столбцов

bottom

<длина>

<процент>

auto

inherit

Указывается смещение между нижним наружным краем позиционированного элемента и нижним краем содержащего его блока. Начальное значение: auto. Применимо к позиционированным элементам (со значениями позиционирования relative, absolute или fixed).

caption-side

top

bottom

inherit

Указывается, где должно находиться заглавие таблицы, над или под ней. Начальное значение: top

clear

left

right

both

none

inherit

Указывается, могут ли плавающие элементы располагаться рядом с данным элементом (точнее, указываются стороны, около которых появление плавающих элементов не допускается). Значение none означает, что плавающие элементы могут (хотя и не обязаны) располагаться с обеих сторон элемента. Начальное значение: none. Применимо: к блочным элементам.

empty-cells

show

hide

inherit

Указывается, должны ли отображаться фон и рамка пустой ячейки таблицы при выборе модели рамки separate Начальное значение: show

clip

rect (верхний, правый, нижний, левый

auto

inherit

Указывается размер отсекающего прямоугольника, через который видно содержимое абсолютно позиционированного элемента, если способ переполнения элемента установлен в hidden, scroll или auto. Значения откладываются от левого верхнего угла элемента, а не сторон, как при сдвиге.

content

normal

<url> <counter> I

attr(<identifier>)

open-quote

close-quote

no-open-quote

no-close-quote

inherit

Определяется генерируемый материал,

вставляемый до или после элемента. Начальное значение: normal

Применимо: К псевдоэлементам: before и : after

cursor

<url>

Auto

Default

Pointer

Crosshair

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

progress

inherit

Определяет форму курсора, когда указатель мыши находится над элементом.

Начальное значение: auto

display

Для элемента указывается тип блока, формируемого в ходе создания раскладки Начальное значение: inline. Применимо: ко всем элементам.

float

left

right

none

inherit

Указывается направление смещения элемента (с разрешением обтекания элемента последующими материалами. Начальное значение: none

height

<длина>

<процент>

auto

inherit

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

left

<длина>

<процент>

auto

inherit

Указывается смещение между левым наружным краем позиционированного элемента и левым краем содержащего его блока.

margin

<длина> <процент>

auto

inherit

Объединенное свойство для указания размера полей с каждой стороны элемента. Отрицательные значения допускаются. Применимо ко всем элементам, за исключением элементов со значением атрибута display, отличным от table и inline-table. Можно указывать от одного до четырех значений (через пробел)

margin-bottom

<длина> <процент>

auto

inherit

Указывается ширина нижнего поля элемента. Отрицательные значения допускаются

margin-left

<длина> <процент>

auto

inherit

Указывается ширина левого поля элемента. Отрицательные значения допускаются

margin-right

<длина> <процент>

auto

inherit

Указывается ширина правого поля элемента. Отрицательные значения допускаются

margin-top

<длина> <процент>

auto

inherit

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

max-height •

<длина> <процент>

auto

inherit

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

max-width

<длина> <процент>

auto

inherit

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

min-height

<длина> <процент>

auto

inherit

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

min-width

<длина> <процент>

auto

inherit

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

outline

[<outline-color> || <outline-style> ||

<outline-width>] | inherit

Объединенное свойство для указания контура элемента.

outline-color

<цвет>

Invert

inherit

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

outline-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

Задание стиля для всего контура элемента. Чтобы контур отображался, стиль должен отличаться от none.

outline-width

thin | medium | thick | <длина> | inherit

Задание толщины для всего контура элемента. Если outline-style = none, для толщины задается значение 0 (нуль). Начальное значение: medium

overflow

visible | hidden | scroll | auto | inherit

Указывает, что происходит, если материал не умещается в области содержимого элемента Начальное значение: visible

padding

<длина>

<процент>

inherit

Объединенное свойство для указания величины интервала с каждой из сторон элемента. Отрицательные значения не допускаются. Можно указывать от одного до четырех значений через пробел.

padding-bottom

<длина>

<процент>

inherit

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

padding-left

<длина>

<процент>

inherit

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

padding-right

<длина>

<процент>

inherit

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

padding-top

<длина>

<процент>

inherit

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

position

static

relative

absolute

fixed

inherit

Указывается метод позиционирования элемента. Начальное значение: static

right

<длина>

<процент>

auto

inherit

Указывается смещение между правым наружным краем позиционированного элемента и правым краем содержащего его блока.

top

<длина>

<процент>

auto

inherit

Указывается смещение между верхним наружным краем позиционированного элемента и верхним краем содержащего его блока. Начальное значение: auto. Применимо к позиционированным элементам (со значениями позиционирования relative, absolute или fixed).

visibility

visible

hidden

collapse

inherit

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

width

<длина>

<процент>

Auto

inherit

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

z-index

<целое_число>

auto

inherit

Уровень размещения позиционированного элемента

3.25. Методики CSS

Любую задачу в Web можно решить различными способами. Рассмотрим некоторые приемы CSS, применяемые при разработке Web-страниц.

Центрирование страницы

1 способ

#page { width:500px;

margin-left:auto;

margin-right:auto;

}

2 способ

body {text-align:center;}

body * {text-align:left}

#page { width:500px;

margin:0 auto;

}

3 способ

#page { position:absolute;

left:50%;

width:500px;

margin-left: -250px;

}

Раскладка в 2 столбца

Использование плавающих элементов

<body>

Шапка и осн Заголовок

</div>

Основная статья

</div>

ссылки

</div>

Информация о защите авторских прав

</div>

</body>

Таблица стилей

.masthead {background:#ccc;

padding:15px;

}

.main {float:left;

width:70%;

margin-right:3%;

margin-left:3%;

}

.footer {clear:left;

padding:15px;

background:#777;

}

Использование абсолютного позиционирования

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

body {margin:0; /* убираем пространство по умолчанию вокруг страницы*/

padding:0;

}

.masthead {background:#ccc;

height:70px;

}

.main { margin-right:30%;/* место для бокового столбца*/

margin-left:5%;

}

.links{ position:absolute;

top:70px;

right:0px;

width:25%;

background:#eee;}

.footer { padding:15px;

background:#777;

margin-right:30%;

margin-left:5%; }

Раскладка в 3 столбца

Три плавающих столбца

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

Структура страницы

<body>

Шапка и осн Заголовок

</div>

ссылки

</div>

Основная статья

</div>

Новости

</div>

Информация о защите авторских прав

</div>

</body>

Таблица стилей.

#masthead {background:#CCC;

padding:15px;

height:40px;

}

#links { width:15%;

float:left;

background:#EEE; }

#main { float:left;

width:70%;

}

#news { float:left;

background:#EEE; }

#footer { clear:both;

padding:15px;

background:#CCC;

height:20px; }

2 способ. Фиксированная раскладка. Аналогично предыдущему примеру, но вместо процентных значений используются значения, заданные в единицах длины.

Структура страницы

<body>

Шапка и осн Заголовок

</div>

ссылки

</div>

Основная статья

</div>

Новости

</div>

Информация о защите авторских прав

</div>

</body>

Таблица стилей

#container { width: 700px;

border: solid 1px;

margin-left:auto;

margin-right:auto }

#masthead {background:#CCC;

padding:15px;

}

#links { width:130px;

float:left;

background:#EEE; }

#main { float:left;

width:400px;

}

#news { float:left;

width: 150px;

background:#EEE; }

#footer { clear:both;

padding:15px;

background:#CCC;

height:20px; }

Раскладка в 3 столбца c абсолютным позиционированием

Позиционирование боковых столбцов

Структура страницы

#container {position: relative;

width: 700px;

border: solid 1px;

margin-left:auto;

margin-right:auto }

#masthead {height:70px;

background:#CCC; }

#main { margin: 0px 160px; }

#links { position:absolute;

top: 70px;

left: 0px;

width: 150px;

background:#EEE; }

#news {position:absolute;

top: 70px;

right: 0px;

width: 150px;

background:#EEE; }

#footer {margin: 0 160px;

padding:10px;

background:#CCC; }

Позиционирование трех столбцов

В данном примере абсолютное позиционирование применяется ко всем трем столбцам. Получающаяся раскладка отличается от предыдущего примера. Элемент footer и рамка опущены, так как все три элемента между шапкой и низом страницы позиционируются абсолютно и удаляются из потока документа. При этом элемент footer должен подняться наверх страницы и встать сразу за шапкой. Чтобы избежать использования Java-Script, элемент footer и рамка удалены в примере.

Таблица стилей

#container {position: relative;

width: 700px;

margin-left:auto;

margin-right:auto }

#masthead {height:70px;

background:#CCC; }

#main {position:absolute;

top: 70px;

left: 150px;

width: 400px; }

#links {position:absolute;

top: 70px;

left: 0px;

width: 150px;

background:#EEE; }

#news {position:absolute;

top: 70px;

right: 550px;

width: 150px;

background:#EEE; }

Центрирование с рамками и полями

Структура страницы

body { margin: 0px;

padding: 5px;

text-align:center; }

h2 { margin:5px;}

h1 {padding-left:20px;}

#container { position: relative;

width: 700px;

margin:0 auto;

text-align:left; }

#masthead {height:60px;

background:#CCC; }

#main { position:absolute;

top: 60px;

left: 150px;

width: 400px;

border-left: solid 1px black;

border-right: solid 1px black;

margin: 0 10px;

padding:0 10px;

/* обход для IE 5 */

voice-family: "\"}\"";

voice-family:inherit;

width: 358px; }

#links { position:absolute;

top: 60px;

left: 0px;

width: 140px;

background:#EEE;

padding-left:10px; }

#news { position:absolute;

top: 60px;

left: 550px;

width: 150px;

background:#EEE; }

Ложные столбцы

В предыдущих примерах цвет фона заканчивался внизу блока элемента и не распространялся на нижележащие части страницы. К сожалению, не существует способа задать для элемента высоту, равную 100% высоты самого длинного столбца, не используя обходные пути, связанные с JavaScript.

Можно применить фоновое изображение высотой 1px, представляющее собой полосы цвета, мостящие фон по вертикали. Такой метод работает только в раскладке с фиксированной шириной.

ЗАКЛЮЧЕНИЕ

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

Web-стандарты и, что более важно, их поддержка, которую начали наконец осуществлять производители основных браузеров, упростили для дизайнеров работу с многочисленными браузерами. Стало возможным создавать сайты, доступные для 100% браузеров и прекрасно выглядящие в подавляющем большинстве их. Вся хитрость в том, чтобы самому следовать стандартам при написании материалов, создании стилей и программировании. Однако для получения межбраузерной совместимости еще требуется нестандартное программирование. Хотя мы находимся сейчас на переходном этапе, еще используются старые методы, которые являются обычной практикой или даже являются необходимыми, несмотря на то, что это идет вразрез с рекомендациями W3C.

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

Чтобы понять, какие правила являются элементарными, а какие − более развитыми, нужно провести исследование, тестирование и испытание на практике. Методом проб и ошибок вы должны разработать сайт, который будет выглядеть так, как вы хотите, в самых современных браузерах, но и будет приемлемо выглядеть в старых версиях.
СПИСОК ЛИТЕРАТУРЫ

Web-дизайн: справочник: пер. с англ. / Д.Н. Роббинс. Кудиц-пресс, 2008. – 816 с.
Основы Web-дизайна. Самоучитель / В.В. Дунаев. – СПб.: БХВ-Петербург, 2007. – 512 с.
Новейшая энциклопедия Интернета / В.П. Леонтьев. – М.: ОЛМА Медиа Групп, 2008. – 748 с.

1. Особенности французской грамматики
2. практикумом 1
3. Термодинамика необратимых процессов и проблем экологии
4. Семейный очаг проводится творческий конкурс снежных скульптур и рисунков на снегу Снежная сказка
5. Проблема добра и зла в романе М Булгакова Мастер и Маргарита
6. Специфика хронотопа в рассказе Фридриха Горенштейна С кошелочкой
7. Для России нормальный годовой спермовыброс должен составлять примерно 40 тысяч тонн
8. Курсова робота З дисципліни Метеорологія та кліматологія Зміст Вступ
9. Вооруженное вторжение того или иного государства на территорию другого почти всегда аргументируется либо н
10. Статья- Брак и кошелек
11. Контрольная работа- Проектирование портфеля идентифицированных финансовых рисков предприятия
12. а укажите ваш второй emil и его тоже подпишите укажите те же самые данные то есть все честно
13. . Молекулярные механизмы мышечного сокращения и расслабления Мышечная деятельность состоит и
14. Династия Тюдоров (essay the house of Tudor).html
15. Шпаргалки по Денежно-кредитному регулированию
16. РОССИЙСКИЙ УНИВЕРСИТЕТ КООПЕРАЦИИ КАЗАНСКИЙ КООПЕРАТИВНЫЙ ИНСТИТУТ ФИЛИАЛ УТВЕРЖ.html
17. УТВЕРЖДАЮ2013г
18. Расы и народы Африки
19. і. Мета і завдання визначених галузей літературознавства.html
20. Контрольная работа- Операции с иностранной валютой в коммерческих банках

Материалы собраны группой SamZan и находятся в свободном доступе

Мировые информационные ресурсы Информационные технологии в маркетинге и коммерческой рекламе для с

ВВЕДЕНИЕ

ГЛАВА 1. ОСНОВЫ

1.1. Браузеры

1.2. Программирование

1.3. Дизайн при неизвестном разрешении монитора

1.4. Знакомство с серверами

ГЛАВА 2. HTML и XHTML

2.1. Роль HTML

2.2. Отделение представления от структуры документа

2.3. Атрибуты

2.4. Введение в XHTML

2.5. Элементарная структура документа

2.6. Тело документа

2.7. Текстовые элементы

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

2.9. Таблицы

2.10. Фреймы

2.11. Формы

ГЛАВА 3. СТИЛИ CSS

3.1. Преимущества CSS

Определение – задают свойства селектора.

3.2. Способы добавления таблиц стилей на Web-страницы

Наследование

3.3. Конфликтующие правила стилей: каскад

3.4. Контекстные селекторы

3.5. Использование классов

3.6. Группировка

3.7. Псевдоселекторы

3.8. Другие псевдоклассы CSS 2.1

3.9. Единицы измерения, используемые в каскадных таблицах стилей

3.10. Свойства CSS для управления цветом

3.11. Оформление таблиц с помощью CSS

3.12. Оформление таблиц

3.13. Блочные и внутристрочные элементы

3.14. Введение в блоковую модель

3.15. Нормальный поток

3.16. Пропуск размещаемых элементов

3.17. Позиционирование: основы

3.18. Охватывающий блок

3.19. Задание положения

3.20. Обработка переполнения

3.21. Расчет позиции элемента

3.22. Фиксированное позиционирование

3.23. Относительное позиционирование

3.24. CSS свойства

3.25. Методики CSS

ЗАКЛЮЧЕНИЕ

ОГЛАВЛЕНИЕ