ВВЕДЕНИЕ

История развития Веб  Технология WWW первоначально разрабатывалась для обеспечения удобного обмена информацией между учеными различных стран.  Используя специальную программу (в настоящее время называемую обозревателем), ученые на одном конце света могли получить доступ к информации, подготовленной учеными, находящимися в другом полушарии. К тому же, они могли обмениваться замечаниями и корректировать документы, этот сервис мы сейчас знаем как "электронную почту".  Это новое средство общения и сотрудничества было очень привлекательно, и, поэтому, вскоре превратилось в общедоступный ресурс, став наиболее популярной возможностью сети Интернет.  Следующим шагом в развитии Веб стала возможность использования различной графической информации.  Однако, технология лежащая в основе нового способа распространения информации, все еще оставалась очень неудобной для использования. К тому же программы-обозреватели работали только в среде UNIX, операционной системе, которая была очень популярна в университетах и исследовательских институтах, но редко использовалась в домашних условиях или в офисах.  В течение нескольких лет эта технология постепенно совершенствовалась, превратилась в дружественную для пользователей и стала доступная в операционных системах Windows и Macintosh.  Новая технология была полностью поддержана пользователями офисных и домашних компьютеров. Программы-обозреватели приобрели удобный, интуитивно понятный графический интерфейс, управляемый мышью, делая излишними длинные и неудобные команды, которые использовались ранее.  После того, как Веб стал общедоступной технологией, количество пользователей Интернет во всем мире резко возросло, что, в свою очередь, породило спрос на новые ресурсы, и, вскоре, видео, аудио и анимация стали самыми популярными ресурсами, среди любителей Веб-серфинга.  Как работает Веб  Одна из основных особенностей Веб - это графический интерфейс со ссылками. При использовании обозревателя, пользователю Интернет не нужно знать, как подключиться к компьютеру на другом конце света, как перейти в нужную директорию или как загрузить и просмотреть нужный документ. Вся эта информация встроена в Веб-страничку, которую Вы посещаете.  Ключ к Веб - это язык HTML, то есть язык гипертекстовой разметки документов. HTML - это по сути набор команд, называемых тегами, которые встраиваются в любой текстовый документ, и затем интерпретируются программой-обозревателем.  Вот как обычно происходит подключение к Веб:  В Вашей программе-обозревателе Вы даете команду подключиться к определенному Веб-сайту, чтобы просмотреть нужную Вам страничку. Ваша программа-обозреватель подключается к сайту (который фактически является компьютером, подключенным к Интернет и содержащим набор Веб-документов) и запрашивает соответствующий документ. Этот документ через Интернет пересылается с помощью модема на Ваш компьютер. Далее Ваша программа-обозреватель отображает эту страничку на Вашем мониторе.  Полученный документ по существу представляет собой самый обычный текстовый файл (в кодировке ascii). Он содержит текст, отображаемый программой-обозревателем, HTML-команды, указывающие как отображать этот файл, а также информацию о том, какие графические файлы нужно загрузить и как их отобразить на экране.  Кроме того Веб-документы содержат гиперссылки.  Гиперссылка содержит информацию о выполнении определенных действий для работы с Веб. Эта информация обрабатывается программой-обозревателем при активизации гиперссылки. Например, гиперссылка может содержать команды, указывающие обозревателю как найти и загрузить Веб-документ или как перейти на другой сайт.  Часть текста, содержащая гиперссылку, обычно выделяется различными способами, по умолчанию гиперссылка выделяется цветом и подчеркивается.  Гиперссылка также может быть "встроена" в графику или иконку. Когда Вы подводите указатель мыши к гиперссылке - независимо от того, является ли она частью текста или же графики - форма указателя меняется (вместо обычной стрелки Вы увидите указатель в виде руки).  Для активизации гиперссылки Вам достаточно просто щелкнуть по ней мышью. После этого программа-обозреватель начнет выполнять соответствующие команды.  Такой интерфейс позволяет любому человеку, незнакомому с компьютерам, легко подключиться к Интернет. 

1. Общая часть

1. HTML

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

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

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTMLобычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

•       левой угловой скобки <;

•       необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;

•       имени тэга, например, html;

•       необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

•       правой угловой скобки >.

Таким образом, открывающий тэг <html>, стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг</html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг <div align="center">, означающий разделение документа на части, содержит, кроме имени div, атрибут align со значением "center", означающий выравнивание по центру.

В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name="Раздел 1".

Язык HTML не различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.

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

В таких случаях два тэга и часть документа, заключенная между ними, образует блок, называемый элементом HTML. Некоторые тэги, например <hr>, являются одиночными, и для них закрывающий тэг не применяется. Такие тэги сами по себе являются элементами HTML.

Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тэг. Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например,"center":align="center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.

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

<html>

<head>

…

</head>

<body>

…

</body>

</html>

Структура HTML-документа содержит следующие обязательные элементы:

• тэги <html> и </html>, которые отмечают начало и конец документа;

•       заголовок, ограниченный тэгами <head> и </head>;

•       тело, ограниченное тэгами <body>...</body>.

В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов <title>...</title> определяется название документа, которое должно описывать егосодержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.

Кроме элемента <title>...</title>, заголовок может содержать элементы <meta>...</meta>. Открывающий тэг <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

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

Структура фреймовых HTML документов существенно отличается от привычных нам документов, рассмотренных в предыдущих главах. В фреймовых документах структурный элемент <BODY>...</BODY> заменяется набором фреймов, определяемым в контейнере <FRAMESET>...</FRAMESET>, и контейнером <NOFRAMES>...</NOFRAMES>, определяющим альтернативное содержимое документа для пользователей броузеров не поддерживающих фреймы.

Таким образом фреймовый HTML-документ имеет следующую структуру:

Структура фреймового HTML документа

<HTML>

<HEAD> ЗАГОЛОВОК ДОКУМЕНТА </HEAD>

<FRAMESET> НАБОР ФРЕЙМОВ </FRAMESET>

<NOFRAMES> АЛЬТЕРНАТИВНОЕ СОДЕРЖАНИЕ </NOFRAMES>

</HTML>

Как это ни странно, но начнем с конца (чтоб потом не отвлекаться на мелочи) и рассмотрим контейнер <NOFRAMES>...</NOFRAMES>. Данный контейнер содержит альтернативное содержимое документа отображаемое в окне броузеров не поддерживающих технологию фреймов. Использование данного тега было актуально несколько лет назад, когда фреймы поддерживались только последними версиями MSIE & Navigator, но из вежливости к возможным пользователям продолжайте использовать альтернативный раздел.

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

Теперь рассмотрим контейнер <FRAMESET>...</FRAMESET> который определяет фреймовую структуру документа и содержит элементы фреймы, задаваемые тегом <FRAME>. Тег <FRAMESET>...</FRAMESET> имеет следующие атрибуты:

ROWS - описание строк фреймовой структуры (проценты высоты окна броузера, пропорции, высота в пикселах);

COLS - описание столбцов фреймовой структуры (проценты ширины окна броузера, пропорции, ширина в пикселах);

FRAMEBORDER - описывает сетку фреймовой структуры (по умолчанию значение YES- трехмерная сетка, NO-без сетки);

BORDER - ширина сетки фреймовой структуры (по умолчанию значение 5);

BORDERCOLOR - цвет сетки фреймовой структуры;

Формы на WEB -страницах используются для организации обмена данными между пользователем броузера и Web-сервером. Данные, введенные пользователем в формах ввода, передаются при помощи специальных методов технологии клиент/сервер, в CGI сценарий обработки данных Web-сервера 

Для размещения форм в HTML применяется контейнерный тег <FORM>...</FORM>, заключающий в себе составные элементы формы: текстовые поля, списки, поля ввода данных, флажки, переключатели и кнопки. Тег <FORM> имеет следующие атрибуты:

NAME - имя формы;

METHOD - метод отправки данных на сервер. GET - передача данных посредством переменных окружения сервера, POST - передача данных в стандартном потоке ввода/вывода сервера;

ACTION - URL получателя данных. В качестве получателя данных может выступать CGI сценарий обработки данных или ссылка на адрес электронной почты - mailto:e-mail;

TARGET - окно назначение для отображения результатов обработки данных на Web-сервере (по умолчанию текущее окно);

Раньше в HTML имелась только одна возможность добавлять мультимедийную информацию на web-страницы - элемент IMG. Он позволял добавлять только изображения, а остальные форматы были закрыты для web. Тогда разработчики браузеров стали добавлять поддержку новых элементов. Так появились теги <embed> от фирмы Netscape и <applet> от фирмы Sun.

2. PHP

PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools — «Инструменты для создания персональных веб-страниц»; произносится пи-эйч-пи) — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

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

В области программирования для сети Интернет, PHP — один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET) благодаря своей простоте, скорости выполнения, богатой функциональности, кроссплатформенности и распространению исходных кодов на основе лицензии PHP.

Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств для разработки веб-приложений^[8]. Основные из них:

• автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

• взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM,Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO);

• автоматизированная отправка HTTP-заголовков;

• работа с HTTP-авторизацией;

• работа с cookies и сессиями;

• работа с локальными и удалёнными файлами, сокетами;

• обработка файлов, загружаемых на сервер;

• работа с XForms.

В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу корпорации TIOBE, базирующемся на данных поисковых систем, в июне 2013 года PHP находился на 5 месте среди языков программирования.^[6] К крупнейшим сайтам, использующим PHP, относятся Facebook, Wikipedia и др.