1. Обзор инструментов разработки
1.1. HTML
Язык HTML был разработан британским учёным Тимом Бернерсом‑Ли приблизительно в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML (Standard Generalized Markup Language – стандартный обобщённый язык разметки) путём определения небольшого набора структурных и семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении [1].
Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение «html» или «htm»), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые браузерами или интернет-обозревателями, обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Firefox, Opera и Safari.
Язык HTML позволяет размечать текст. В том числе возможно:
сделать текст жирным, курсивным или подчёркнутым;
вставить специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т. п.);
поменять гарнитуру, кегль, начертание, цвет шрифта;
выровнять текст по центру, левому/правому краю, по ширине;
оформить текст как гиперссылку на другую страницу или файл;
нарисовать таблицу.
Позже, когда появилась необходимость интерактивности веб-страниц, в HTML появились следующие возможности:
Использование форм для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl).
Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы MIDI и др.), так и внешними приложениями, «встраиваевыми» в окно браузера (Flash-анимация, Java-апплеты и прочее) [2].
HTML – это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками – тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br />). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
<strong> Текст между двумя тегами – открывающим и закрывающим. </strong>
<a href="http://www.example.com"> Здесь элемент содержит атрибут href. </a>
А вот пример пустого элемента: <br>
1.2. CSS
CSS (Cascading Style Sheets – каскадные таблицы стилей) – одна из широкого спектра технологий, одобренных консорциумом W3C (World Wide Web Consortium - Консо́рциум Всеми́рной паути́ны) и получивших общее название «стандарты Web». В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS [3].
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.
CSS при отображении страницы может быть взята из различных источников:
Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
внешних таблиц стилей, то есть отдельного css‑файла, на который делается ссылка в документе;
встроенных стилей – блоков CSS внутри самого HTML-документа;
Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.
Пользовательские стили: локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
Стиль браузера: стандартный стиль, используемый браузером по умолчанию для представления элементов.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества CSS вёрстки:
Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кэшируется.
Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при скроллинге страницы.
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS но всё ещё содержит значительное количество ошибок. Для проверки поддержки браузером различных частей стандарта CSS был разработан тест «Acid». Его вторая версия называется «Acid2» [4].