И лишь Хокон Виум Ли в 1994 году предложил для HTML документов использование концепции «каскадные таблицы стилей». В то далекое время браузеры имели ограничение в функционале. А в 1990 году язык HTML, который создал Тим Бернерс-Ли, полагал сделать не визуальное, а структурное отображение документов.

Один из основателей Netscape, Марк Андреесен, в 1994 году 13 октября сообщил, что доступна для тестирования от Netscape Navigator первая версия. И за три дня до проведения тестирования, норвежский программист, сейчас он является сотрудником компании Opera Software, Хокон Виум Ли публикует черновой вариант CSS. На сегодняшний день он имеет слишком мало схожего с принятыми современными стандартами, но именно тогда был заложен общий смысл.

Самым первым, кто откликнулся на такую идею, был Берт Бос. В те времена он и создал новый браузер Argo. В визуальном оформлении была возможность использовать не только язык CSS, и консорциуму WЗС предоставили около 9 стилей языков.

В ноябре 1994 года в Чикаго на Веб-конференции, как и планировалось, был предоставлен первый черновик CSS. Дебаты различного политического характера и разрешение некоторых технических вопросов продолжались в течение двух лет, но 1996 года 17 декабря W3C официально зарекомендовал CSS1.

Уровень развития первый (CSS1).

На данном этапе имеется возможность задавать гарнитуру и размер шрифта, а еще изменять его стиль: обычный, курсив или полужирный. Благодаря спецификации имеется возможность определять рамки, фоны, цвета текста и другие элементы страницы. Можно задавать расстояние между словами, межстрочные отступы и межсимвольный интервал. А также производить выравнивание текста, таблиц, изображений. Имеются свойства внутренних и внешних отступов и рамок, ширины, высоты и блоков. А также входили в данную спецификацию ограниченные средства по позиционированию различных элементов, например, clear и float.

Самый первый браузер для использования являлся Microsoft Internet Explorer 3. Вышел 1996 года в августе, он то и поддерживал новый принятый стандарт. Microsoft Internet Explorer 3 понимает отлично все свойства текста, шрифта, фона, цвета, но использование блочной модели происходило лишь частично.

Уровень развития второй(CSS2).

Рекомендация от консорциума W3C, которую приняли 1998 году 12 мая. Она основана на CSS1, а также сохранила обратную совместимость с добавлением некоторых функций, а именно:

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

2. Для разных носителей возможность устанавливать разными стилями.

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

4. Позволяет устанавливать на нечетных и четных страницах во время печати различные элементы.

5. Расширился механизм селекторов.

6. Возможность добавлять содержимое, которое не содержится в исходном документе.

На данный момент W3C не поддерживает CSS2 и настоятельно рекомендует применять CSS2.1.

Уровень второй, ревизия первая (CSS2.1).

Рекомендация принята 2011 года 7 июня. Она основывается на CSS.2. Исправлены ошибки и удалены некоторые функции.

Уровень третий (CSS3).

Очень сильно расширены функции. Введены нововведения, начиная от мелочей, заканчивая трансформацией, а также введение новых переменных. [15]

В то время как HTML используется, чтобы описать содержимое вебстраницы, именно каскадные таблицы стилей (Cascading Style Sheets, CSS) влияют на то, как выглядит контент. Говоря о веб-дизайне, способ, которым представлена страница, известен как ее представление. Это означает, что шрифтами, цветами, фоновыми изображениями, интервалами между строками, макетом страницы и прочим... управляют CSS. С помощью новейшей версии (CSS3) вы можете добавлять на страницу даже специальные эффекты и простую анимацию.

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

Таблицы стилей -- отличный инструмент, позволяющий автоматизировать процесс разработки, потому что вы можете производить изменения, относящиеся ко всем страницам сайта, редактируя один-единственный документ таблицы стилей. Они в некоторой степени поддерживаются всеми современными браузерами.[13, c. 27]

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются -- например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. Так сделано в предположении, что обрамление всех-всех вложений в тег -- менее тривиальная задача, чем задание одиночной рамки. А вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.

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

Чтобы разрешить такие конфликты, вводятся правила приоритета.

1. Наиболее низким приоритетом обладает стиль браузера;

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

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

4. Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

5. Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

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

7. И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

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

Фреймворк CSS - «Bootstrap 3» - представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном» - сайты, которые одинаково хорошо выглядят на всех типах устройств, от небольших телефонов до настольных компьютеров.[16, с. 6]

Bootstrap был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

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

Табличная система Bootstrap, позволяет легко манипулировать пространством выделяемых колонок под секции, всего в одной строке может быть до 12 колонок, для разных разрешений экрана доступны для использования префиксы, которые определят для какого экрана будет назначено определенное количество столбцов (Рисунок 4).

Для разметки блоков используются разное количество колонок в одной строке, так например для того чтобы разделить страницу на две части при этом должны использоваться все ячейки, в данном случае, деление будет происходить на 8 и 4, что поделит страницу на 2 части, где первая часть будет больше второй, при этом в примере указывается размер - md ,что означает что верстка делается для среднего разрешения экрана, при этом помимо md, также существуют такие разрешения как, xs, sm, lg, что означает разрешение экрана по возрастанию.

1. xs - для телефонов.

2. sm - для планшетов.

3. md - для обычных мониторов.

4. lg - для широкоформатных мониторов.

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

Рисунок 4. Разметка сетки «Bootstrap 3»

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

Язык программирования PHP (Hypertext Preprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.[17]

PHP может все. Главная область применения PHP - написание скриптов, работающих на стороне сервера; таким образом, PHP способен выполнять все то, что выполняет любая другая программа CGI, например, обрабатывать данные форм, генерировать динамические страницы или отсылать и принимать cookies. Но PHP способен выполнять намного больше.

Существуют три основных области применения PHP:

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

2. Создание скриптов для выполнения в командной строке. Вы можете создать PHP-скрипт, способный запускаться без сервера или браузера. Все, что вам потребуется - парсер PHP. Такой способ использования PHP идеально подходит для скриптов, которые должны выполняться регулярно, например, с помощью cron (на платформах *nix или Linux) или с помощью планировщика задач (Task Scheduler) на платформах Windows. Эти скрипты также могут быть использованы в задачах простой обработки текстов. За дополнительной информацией обращайтесь к главе Использование PHP в среде командной строки.

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

PHP доступен для большинства операционных систем, включая Linux, многие модификации Unix (такие как HP-UX, Solaris и OpenBSD), Microsoft Windows, Mac OS X, RISC OS, и многие другие. Также в PHP включена поддержка большинства современных веб-серверов, таких как Apache, IIS и многих других. В принципе, подойдет любой веб-сервер, способный использовать бинарный файл FastCGI PHP, например, lighttpd или nginx. PHP может работать в качестве модуля или функционировать в качестве процессора CGI.

Таким образом, выбирая PHP, вы получаете свободу выбора операционной системы и веб-сервера. Более того, у вас появляется выбор между использованием процедурного или объектно-ориентированного программирования (ООП) или же их сочетания.

PHP способен генерировать не только HTML. Доступно формирование изображений, файлов PDF и даже роликов Flash (с использованием libswf и Ming), создаваемых «на лету». PHP также способен генерировать любые текстовые данные, такие, как XHTML и другие XML-файлы. PHP может осуществлять автоматическую генерацию таких файлов и сохранять их в файловой системе вашего сервера вместо того, чтобы отдавать клиенту, организуя, таким образом, серверный кэш для вашего динамического контента.

Одним из значительных преимуществ PHP является поддержка широкого круга баз данных. Создать скрипт, использующий базы данных, - невероятно просто. Можно воспользоваться расширением, специфичным для отдельной базы данных (таким как mysql) или использовать уровень абстракции от базы данных, такой как PDO, или подсоединиться к любой базе данных, поддерживающей Открытый Стандарт Соединения Баз Данных (ODBC), с помощью одноименного расширения ODBC. Для других баз данных, таких как CouchDB, можно воспользоваться cURL или сокетами.

PHP также поддерживает «общение» с другими сервисами через такие протоколы, как LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (на платформах Windows) и многих других. Кроме того, вы получаете возможность работать с сетевыми сокетами напрямую. PHP поддерживает стандарт обмена сложными структурами данных WDDX практически между всеми языками веб-программирования. Обращая внимание на взаимодействие между различными языками, следует упомянуть о поддержке объектов Java и возможности их использования в качестве объектов PHP.

PHP имеет много возможностей по обработке текста, включая регулярные выражения Perl (PCRE) и много других расширений и инструментов для обработки и доступа к XML документам. В PHP обработка XML-документов стандартизирована и происходит на базе мощной библиотеки libxml2, расширив возможности обработки XML добавлением новых расширений SimpleXML, XMLReader и XMLWriter.

Язык программирования JavaScript - это язык программирования, позволяющий создавать скрипты, которые встраиваются в HTML-страницы и выполняются в браузере посетителя страницы.

Язык JavaScript -- это клиентский язык web-программирования, который был создан в 1995 году, разработчиком Бренданом Айком.

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

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

Интерпретатор языка JavaScript, является частью веб-браузера, когда веб браузер открывает страницу сатй, браузер создаёт объектную модель документов (DOM), интерпретатор JavaScript получает доступ к DOM и благодаря этому, вебмастера создавая различные скрипты (web-приложения) могут управлять и манипулировать объектами страницы (всеми тегами: абзацами, заголовками, таблицами, формами и т.д.).

JavaScript также как и языки HTML и CSS, принадлежит всему человечеству, им не владеет ни одна компания или персона. Однако само слово -- «JavaScript», принадлежит компании Oracle Corporation и чтобы не иметь проблем с авторскими правами, ученые разрабатывающие данный язык в научных документах называют его ECMAscript.

В 1995 году компания Netscape, дала задание программисту Брендану Айку создать язык web-программирования, который можно было бы встраивать в HTML-документ и для работы с которым не нужен был web-server.

Вместе с Бренданом Айком в проекте участвовали и другие программисты:

Марк Андерссен (создал первый в мире браузер -- Mosaic),

Билл Джой работник компании Sun (данная компания в 2010 году была куплена корпорацией Oracle).

В те далёкие времена, наиболее популярными языками программирования, были C и Java, поэтому при создании JavaScript, пытались делать так чтобы его синтаксис был на них немного похож.

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

Чтобы еще больше популяризировать язык JavaScript, его сделали открытым, общедоступным, а потом стандартизировали. Сам стандарт носит название ECMA-262, а имя языка JavaScript, в стандарте записывается как ECMAScript.

В 1996 г. компания Microsoft, на основе этого стандарта разработала свой язык сценариев и назвала его JScript.

Первые браузеры начали поддерживать JavaScript уже в 1996 году, это были: Netscape 2.0 и Internet Explorer 3.0

Характеристики JavaScript:

1. Сценарный -- при созданий программ, их ненужно компилировать (как например в языках Си, Си++, Паскаль или Бэйсик), просто создаёте скрипт-программу в текстовом редакторе, а интерпретатор JavaScript (который уже встроен в веб-браузер), потом этот скрипт обрабатывает и выполняет.

2. Клиентский -- интерпретатор скриптов находится не на web-сервере (как например у серверных языков -- PHP или Perl), а в веб-браузере, поэтому для создания и выполнения скриптов JavaScript, устанавливать веб-сервер не нужно, необходимы лишь текстовый редактор (например Блокнот или популярный нынче Sublime Text 3) и веб-браузер (например FireFox, Opera, IE или Chrome и т.д.).

3. Прототипно-ориентированный -- JavaScript поддерживает создание и наследование объектов, однако классы в нём отсутствуют.

4. Динамическая типизация -- в отличие от других языков программирования, таких как Си, Си++ или Паскаль, переменные в JavaScript во время исполнения программы, имеют возможность менять свой тип данных. Это происходит потому, что тип данных в JavaScript, присваивается не во время объявления переменной, а во время её инициализации.

5. Функции -- в языке JavaScript, функции являются объектами первого класса, это означает, что переменным вместо значения, также можно присваивать и функции.

6. Автоматическая очистка памяти -- при исполнении программ, интерпретатор JavaScript самостоятельно очищает память от неиспользуемых элементов.

2. Разработка интернет-магазина