Название  ВУЗа 
 
 
 
 
 
 
 
 
 
 
 
 

КУРСОВАЯ  РАБОТА 

Web–технологии, языки и средства создания Web–приложений. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Выполнил: студент гр. ФИО

Проверил: Должность ФИО 
 
 
 
 
 
 
 
 

Новосибирск, 2010 г. 
 
 

Оглавление

       Введение 4

       Глава 1. WEB – ТЕХНОЛОГИИ СТАНДАРТА W3C 7

       1.1 Основные Web–технологии 7

       1.2 HTML и XHTML 8

       1.3 Dynamic HTML 13

       1.3.1 Каскадные таблицы стилей 13

       1.3.2 JavaScript 15

       1.3.3 Объектная модель документа 16

       1.4 Средства разработки HTML страниц 19

       2 WEB–ТЕХНОЛОГИИ СТОРОННИХ ОРГАНИЗАЦИЙ 22

       2.1 Язык PHP 22

       2.2 Средства разработки PHP скриптов 24

       2.3 CGI 25

       2.4 Ajax 26

       2.5 ASP и ASP.NET 27

       2.6 Adobe Flash 28

       2.7 Microsoft Silverlight 29

       ЗАКЛЮЧЕНИЕ 30

       СпиСОК ЛИТЕРАТУРЫ 31 
 
 
 

Введение

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

       В 1989 году родилась идея Всемирной паутины. Она была разработана  британским учёным Тимом Бернерсом–Ли, впоследствии он же разработал протокол передачи HTTP, HTML – язык разметки, идентификаторы формата URI. Всемирная паутина заняла лидирующее место в интернете к 1995 г. Создается Консорциум всемирной паутины (W3C). Всемирная паутина коренным образом изменила Интернет и сделала его таким, каким мы видим его сейчас. С развитием самой сети развивались и сервисы доступные в интернет.

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

     электронная почта (E–mail), позволяет обмениваться электронными сообщениями;

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

     сервис FTP — предназначен для хранения и передачи файлов;

     сервис Telnet, позволяет управлять удаленным компьютером, используя терминальный доступ;

     World Wide Web (или WWW, или W3) — система на основе гипертекста, позволяющая структурировать информацию и обеспечить ее доступность человеку, данную область мы и рассмотрим в курсовой работе.

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

     сервис IRC, позволяет людям обмениваться текстовыми сообщениями в реальном времени;

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

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

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

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

Глава 1. WEB – ТЕХНОЛОГИИ СТАНДАРТА W3C

1.   Основные Web–технологии

       Всемирную паутину или Web образует огромное количество Web–серверов сети Интернет, расположенных в любой точке мира. Web – сервер это программа, запускаемая на компьютере подключённом к сети и использующей протокол передачи данных HTTP. Принцип работы Web –сервера следующий он получает по сети HTTP–запрос на некоторый файл, это может быть как текст, так и мультимедиа, ищет запращиваемый файл в локальном хранилище и отправляет его тому, кто сделал запрос. Также  Web–серверы способны динамически формировать запрашиваемую информацию в ответ на HTTP–запрос, в этом случае на сервере выполняется запрос, который и формирует запрощенные данные. Для обращения к страницам в сети Интернет используются имена, называемые идентификаторами ресурсов URL. Для отображения пользователю информации, полученной от Web–сервера, на клиентском компьютере применяется программа — Web–браузер, которая умеет посылать, обрабатывать HTTP запросы и отображать полученную информацию. Основная функция Web –браузера отображение информации, представленной в виде гипертекста. Под гипертекстом мы будет понимать набор текстов, имеющих оформление и описание структуры перехода междуэлементами этого набора.

       Можно сказать, что Web строиться на трех базовых технологиях: HTTP, HTML и URL. Для получения информации нам нужен ее адрес URL, зная адрес, мы сможем получить информацию, используя протокол HTTP. И отобразить полученную информацию нам поможет браузер, используя при этом правила разметки текста HTML.

       Описанные выше технологии являются стандартами, созданными W3C, также к ее стандартам относятся CSS, DOM, XHTML. Совокупность этих стандартов и будет рассмотрена в первой главе данной курсовой работы.   
 
 
 
 
 
 
 
 
 

2. HTML и XHTML

       HyperText Markup Language (HTML) — это язык разметки документов во Всемирной паутине, принятый за стандартный. Большая доля всех Web–страниц в интернете создана при помощи языка HTML (или XHTML), поэтому мы рассмотрим его подробно.

       Язык HTML позволяет форматировать текст и другие элемента Web –страницы:

       Цвет, жирность, стиль, название шрифта для текста.

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

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

       Формы для введения данных, как правило, данные из форм обрабатываются с помощью скриптов на языках программирования, оирентированных на Web, например PHP.

       Отображение мультимедийных файлов, их может отображать сам браузер — изображения, аудиофайлы, или внешние приложения, взаимодействующие с браузером, например Flash–ролики, Java–апплеты.

       HTML – язык разметки документов основанный на тэгах. Документ на языке HTML представляет собой набор элементов, при этом начало и конец каждого элемента обозначается служебными символами — тегами. Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Завершающий тег выглядит также, как начальный, и отличается от него прямым слэшем перед текстом внутри угловых скобок.  

       <HTML> </HTML>

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

       <HTML>

       <HEAD>

       <TITLE>

        Заголовок страницы

       </TITLE>

       </HEAD>

       </HTML> 

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

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

       <a href="http://www.yandex.ru">Пример элемента с атрибутом href.</a> 
 

       Теги  можно разделить на следующие  группы: 

Гиперссылки 

       <A HREF="filename" target="_self">текст ссылки</A> 

       filename — имя файла (может быть и локальным) или адрес страницы в Internet, на который нужно совершить переход.

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

       target — задает окно или фрейм, в котором будет открыт документ, при переходе по ссылке. Он может принимать значения:

       _top — документ откроется в текущем окне

       _blank — документ откроется в новом окне

       _self — документ откроется в текущем фрейме

       _parent — документ откроется в родительском фрейме

       По  умолчанию принимает значение _self.

Текстовые ссылки

       <H1> </H1>, <H2>  </H2>, … ,<H6>  </H6> — заголовки 1– 6 уровней. Применяются для выделения частей выводимого текста (заголовок 1 – будет выведен очень большим, 6 – будет размером сопоставимым с обычным текстом).

       <P> — обозначает начало нового абзаца. Закрывающий тег </P>, не является необязательным.

       <BR> — переход на новую строку. Закрывающий тег </br>, отсутсвует.

       <HR> — горизонтальная линия

       <BLOCKQUOTE>  </BLOCKQUOTE> — цитата. Выделение заданного текста как цитаты.

       <PRE> </PRE> — режим предпросмотра. При этом текст заключается в рамку и выводиться не форматированным (то есть все теги, кроме </PRE>, игнорируются, но при этом переводы строки ставятся там, где они присутсвуют в исходном документе).

       <DIV>  </DIV> — блок текста (как правило, применяется для использования каскадных стилей CSS)

       <SPAN>  </SPAN> — строка (как правило, применяется для использования каскадных стилей CSS)

       Теги  форматирования текста

       <EM> </EM> — выделение символа, на который падает ударение (обычно отображается курсивом)

       <STRONG> </STRONG> — выделение символа, на который падает усиленное ударение (обычно отображается жирным текстом)

       <I>  </I> — выделение текста курсивом

       <B>  </B> — выделение текста жирным шрифтом

       <U>  </U> — подчёркивание текста

       <S>  </S> — зачёркивание текста.

       <STRIKE>  </STRIKE> — то же самое, что <S> … </S>

       <BIG>  </BIG> — увеличение шрифта

       <SMALL>  </SMALL> — уменьшение шрифта

       <BLINK>  </BLINK> — мигающий текст.

       <MARQUEE>  </MARQUEE> — сдвигающийся по экрану текст.

       <SUB>   </SUB> — вывод текста под строкой. Например, H<SUB>2</SUB>O отобразиться в виде текста H2O.

       <SUP>  </SUP> — вывод текста над строкой. Например, E=mc<SUP>2</SUP> отобразиться в виде текста E=mc2.

       <FONT атрибуты>  </FONT> — задание атрибутов у используемого шрифта. Атрибуты могут быть следующими:

       COLOR=color — указание цвета. Цвет может быть указан шестнадцатеричным числом в формате #rrggbb (первые 2 шестнадцатеричные цифры указывают интесивность красного, следующие 2 — зелёного, последние 2 — синего) или названием самого цвета.

       FACE=указываем имя шрифта

       SIZE=позволяет именить размер шрифта. Размеры могут быть от 1 до 7, по умолчанию размер 3.

       SIZE=+размер или SIZE=–размер — размер больше или меньше стандартного. Например, SIZE=+2 указывает размер на 2 больше стандарта, то есть размер 5.

       Списки

       Данная  конструкция

       <UL>

          <LI> первый элемент списка </LI>

          <LI> второй элемент  списка </LI>

          <LI> третий элемент  списка </LI>

        </UL> 

       создаёт список вида: 

• первый  элемент
• второй элемент
• третий элемент

Также стоит отметить, что тегов есть параметры, позволяющие менять вид списка. 
 

       Объекты

       EMBED — вставка объектов различных типов

       APPLET — вставка Java–апплетов

       SCRIPT — вставка различных скриптов, например JavaScript 

       Изображения

       IMG – тег для вставки изображения. Это не закрывающийся тег.

       SRC – имя локального файла или путь к нему в виде URL

       ALT – текст картинки (отобразится, в виде текста, если не удалось отобразить картинку)

       TITLE – подсказка (показывается при попадании курсора в область картинки)

       WIDTH, HEIGHT – размеры изображения (выводимое изображение будет масштабировано до указанных размеров)

       ALIGN – обтекание текста  

       Таблицы

       TABLE — тег создание таблицы. Тег имеет следующие параметры:

       BORDER — задает толщину границ у таблицы

       CELLSPACING — задает расстояние от ячейки до ячейки

       CAPTION — задает заголовок таблицы (необязательный тег)

       TR — добавление строки в таблицы

       TH — задает заголовок столбца (необязательный тег)

       TD — добавление ячейки таблицы

       WIDTH, HEIGHT – размеры таблицы  

       Формы

       Формы ввода данных могут быть самымы разнообразными. Поэтому рассмотрим только основные теги:

       FORM — тег для создания формы

       INPUT — добавление элемента ввода

       TEXTAREA — добавление текстового поля

       SELECT — добавление списка (как правило, это выпадающее меню)

       OPTION — пункт списка  

       Символы

       Некоторые символы не могут быть выведены напрямую. Для их вывода требуется использовать их определения, например, символ апмерсанд & в коде HTML будет иметь вид &amp, символ меньше < будет иметь вид &lt, символ больше > будет &gt. Это органиченение введено, так как эти символы уже используются в языке HTML как служебные.

       Любая HTML–страница должна иметь обозначение начала и конца документа обрамленные тегами <html> и </html> соответственно. Внутри них должны находиться теги заголовка <head> и </head>, и теги, обозначающие тело документа <body> и </body>. А внутри них могут быть произвольные комбинации из групп тегов опписанных ранее.

       Также рассмотрим Extensible Hypertext Markup Language(XHTML) это расширяемый язык разметки гипертекста. Стоит отметить, что язык XHTML это ни описание самого языка, а список отличий XHTML от HTML. Рассмотрим основные отличия HTML и XHTML. В XHTML все используемые теги должны иметь закрывающий тег. Теги, не имеющие закрывающего тега  должны оканчиваться символом / . Например тег <br>, должен иметь закрывающий его тег <br />. В XHTML допусткается писать теги и их аттрибуты только строчными буквами. В XHTML очень строгая проверка синтаксиса не допускается использовать < и &, даже в URL, вместо них должны быть &lt и &amp. Браузеры, обнаружив ошибку синтаксиса в XHTML, должны преркратить его обработку и вывести ошибку на экран. В стандарте HTML браузер должен попытаться отобразить запрашиваемый документ. Стоит отметить, что XHTML расширяемый язык – засчет указания типа документа и возможности использовать свои теги.

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

3. Dynamic HTML

     Dynamic HTML или DHTML — так принято называть связку языка HTML, каскадных таблиц стилей, скриптового языка и объектной модели документов. Скриптовым языком может выступать JavaScript или VisualBasic, но именно первый язык получил большую популярность и сегодня используется повсеместно. При помощи DHTML можно создавать интерактивные Web страницы, он позволяет легко и гибко обрабатывать данные запроса и формировать динамический ответ. DHTML может быть использован для реализации интерфейса Drag’n’Drop. На его основе создаются игры и другие интерактивные сервисы. Стоит отметить, что для реализации принципов DHTML достаточно лишь браузера, который будет обрабатывать содержимое страницы. То есть, нет необходимости, например, в обращениях к базе данных.

1. Каскадные таблицы стилей

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

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

     Описание  стиля на CSS при открытии страницы может быть взято из разных мест: оно может быть встроенным стилем — это блоки CSS внутри страницы на языке HTML. 

     <style type="text/css">

         body {

             color: green;

         }

      </style> 

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

     <link rel="stylesheet" type="text/css" href="style.css" /> 
 

Это может  быть Inline–стиль, при этом в HTML документе информация о стиле элемента указывается как атрибут style. 

<p style="font–size: 21px; color: green;">Выводимый текст</p> 

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

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

     селектор, селектор {

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

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

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

     } 

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