Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
Вы когда-либо задумывались над тем, что означает HTML? Это аббревиатура, означающая «Язык разметки гипертекста» (Hyper Text Markup Language). Из чего можно сделать вывод о том, что изначальным предназначением этого языка являлось придание структуры, разметки куску текста.
Сразу после создания Всемирной паутины (World Wide Web), она, прежде всего, использовалась научными учреждениями, правительствами и военными, как средство обмена простой информацией «старого» образца. Так что документы тех времен были очень простыми. В конце концов, ученым и академикам нет особого дела до привлекательности web-страниц. В начале, HTML был прост: HTML-теги использовались только для того, чтобы указать - это заголовок, а это - абзац, и так далее.
А потом на свет появилась штука, называемая «графическим браузером» (NCSA Mosaic). Люди начали включать графические элементы графику в свои страницы. И они хотели, чтобы их страницы выглядели лучше, привлекательней, симпатичней. Тогда, HTML был расширен, чтобы включить теги моделирования, такие, как bold, strong, italicisized, strikeout и superimposed.
А люди все еще не были удовлетворены: они хотели большего. И возможность добавлять больше стиля к тексту пришла в форме тега <font>, тега <bgcolor>, и так далее. Теперь люди могли создавать страницы с красочными фонами и шрифтами, почти как им хотелось.
Однако, этого не было достаточно. На сцену вышли люди, называвшие себя «дизайнерами. Так как многие из них пришли из мира бумажного дизайна, они хотели еще большего контроля над внешним видом создаваемых web-страниц.
Первоначально, таблицы HTML были предназначены для представления табличных данных, например прайс-листов, или списков названий. Но однажды какой-то web-дизайнер обнаружил, что эти таблицы можно эффективно использовать для раскладки страниц.
В 1996 году была издана очень влиятельная книга Дэвида Сигэла под названием «Creating Killer Web Sites», вскоре она стала бестселлером номер 1 на Amazon – немыслимое достижение для книги по web-дизайну. Читали ли вы эту книгу или нет (нельзя сказать точно, был ли автор книги ответственен за «изобретение» концепции раскладки страницы с помощью таблиц HTML), но в большинстве дизайнов web-страниц, которые вы видите в Сети и тех, которые вы возможно создаете сами, все еще ощутимо влияние этой книги и ее второго издания1 (на сегодняшний день (конец 2006 года), это уже не так ощутимо [Черный Кот]).
Система раскладки страниц, описываемая в этой книге, в основном базировалась на использовании таблиц HTML и однопиксельных GIF’ов. Страница раскладывалась по сетке; содержимое, будь оно текстом или графикой, помещалось в ячейки этой сетки. Чтобы предотвратить «сворачивание» пустых ячеек таблицы, использовались прозрачные GIF’ы размером 1х1 пиксель Сигэл (и не только он) пошел дальше, и предлагал использовать однопиксельные GIF’ы как средство управления разрывами между буквами в тексте, и для того, чтобы создавать отступы.
Множество сайтов и в наши дни построены на этих принципах.
С одной стороны, открытие этого метода построения web-страниц очень порадовало web-дизайнеров. Наконец-то, они могли действительно "раскладывать" страницу, а не просто сваливать все ее содержимое к левому краю или центровать! Графические дизайнеры традиционно использовали сетку для того, чтобы раскладывать страницы (на бумаге), так что использование таблиц, казалось, отличным решением.
Таблицы HTML могут помочь дизайнеру в раскладке страницы. Но от них также исходит множество проблем.
Как вы, наверное, знаете – со временем табличные раскладки становились все более и более сложными. Таблицы вкладываются в таблицы; однопиксельные GIF’ы используются везде и всюду. Типичная web-страница на основе таблиц HTML – это масса тегов <td> и <tr>, фактическое содержимое которой является лишь небольшой ее частью.
Полагаясь на таблицы и однопиксельные GIF’ы, вы теряете контроль над другими аспектами управления сайтом. Табличная раскладка может превратиться в настоящий кошмар при попытке изменить или обновить дизайн web-сайта. Вся эта мишура из дополнительных тэгов, и дополнительных GIF’ов сильно утяжеляет web-страницу. А главное, изначальная цель HTML – простое и непосредственное представление текстовой информации - была полностью утеряна.
Точно так же, когда вы используете визуальные теги, в особенности тег <font>, со структурными тегами, типа <p> для абзаца – изначальная цель создателей Всемирной паутины – информация доступная всем – подвергается серьезному риску.
Несмотря на проблемы, связанные с табличной раскладкой, web-дизайнеры все еще пользуются этим методом. Ведь как ни крути, а людям нужны web-страницы, на которые приятно смотреть. Для того, чтобы удовлетворить эту потребность, World Wide Web Consortium начал работу над абсолютно новым способом определения визуального (и не только) представления содержимого web-страниц. Таким образом, в 1996 году был спроектирован первоначальный вариант CSS.
CSS - гигантский шаг к удовлетворению потребности web-дизайнеров в контроле над внешним видом сайтов, и возвращению к изначальным функциям языка HTML; как средства простого представления содержимого. Некоторые могут даже утверждать, что это - критический шаг.
Каковы преимущества использования CSS для нас, работающих web-дизайнеров и разработчиков web-сайтов? Вот - некоторые из важнейших плюсов CSS:
Тогда идем дальше и смотрим на инструменты, которые вам могут пригодиться, а затем приступим к первому уроку!
1Достаточно интересно то, что даже в далеком 1997 году, вскоре после того, как вышло второе издание книги «Killer Web Sites», Дэвид Сигэл написал статью, где утверждал, что он помог "разрушить" Сеть. Возможно, он сгущает краски (или имеет раздутое самомнение), но над этим стоит поразмыслить. Удивительно и то, что второе издание «Killer Web Sites» все еще печатается.
