Ирина Эланс

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

Технологии разработки web приложений

Министерство образования Московской области

Государственное образовательное учреждение профессионального образования

Московский государственный областной гуманитарный институт

Факультет информатики

Кафедра информатики

Технологии разработки web приложений

Курсовая работа

студента 4 курса

факультета информатики

очной формы обучения

Болухта А. А.

Научный руководитель:

Ст. преподаватель Щербак В. Н.

2011

Орехово-Зуево

Оглавление

Введение 3

История развития html 4

Описание html. Примеры. 8

Теги 8

Структура HTML страниц 9

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

История развития java script. 12

Практическая часть 15

Создание сайта на простом html. 15

Описываем каскадные таблицы стилей (CSS) 18

Добавление javascript 20

Заключение 23

Приложение 24

Приложение 1. 24

Приложение 2. 25

Список литературы 27

Введение

Ни кому не секрет, что интернет стал для нас второй реальностью, в которой мы проводим большее количество своего свободного времени. Каждый делает это по-разному, кто-то зависает в социальных сетях (Facebook, ВКонтакте, Одноклассники), кто-то заядлый блоггер и постоянно пишет целые статьи или же просто описывает события, которые с ним произошли в таких блогах как Live Journal, Twitter и другие. В интернете хватает сайтов на самые разные тематики, и предлагают человеку широкий круг возможностей от простого чтения сайтов до заработка денег, не выходя из комнаты своей квартиры. Как же создаются такие сайты? Как организовать площадку для столь большого количества людей? Какие технологии нужно знать, что бы разработать web приложение? Переворачиваем страницу и узнаем ответы на эти и много других вопросов.

История развития html

HTML (Hyper Text Markup Language – язык гипертекстовой разметки) в классическом виде был создан в начале 1990 годов отцом всемирной паутины, работником CERN (European Organization for Nuclear Research) Тимом Бернерсом-Ли. По своей сути HTML не был чем-то революционным. Язык был основан на SGML(Standard Generalized Markup Language – стандартный обобщенный язык разметки).

Основной идей SGML было создать язык для разметки документов который не был бы привязан к определенной апаратнно-программной платформе. И можно было б обеспечить максимальную переносимость с одной платформы на другую с учетом появления новых платформ без изменения структуры и отображения. Данную идею реализовала команда из компании IBM под руководством Чарльза Гольдфарба. Создатели решили отделить структуру документа от его оформления.

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

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

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

Язык, соответствующий всем вышеозначенным концепциям и получивший название GML(Generalized Markup Language), был создан в 1969 г. В 1986г. ISO приняла язык в качестве международного стандарта и к названию добавилась буква «S».

Сам по себе язык SGML был мало востребован, пока сообществу ученых по всему миру не понадобился инструмент способный быстро и легко передавать информацию. В 1991была разработана система Gopher. Но она не поддерживала графику и гипертекстовые ссылки. Именно тогда на арену вышел Европейский институт физики элементарных частиц (CERN) в лице Тима Бернерса-Ли с проектом «Всемирная паутина».

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

В сентябре 1993 года возглавляемая Марком Андрисеном группа программистов Национального центра суперкомпьютерных приложений выпустила первый графический браузер Mosaic. Программа начала распространятся со скоростью вируса. За первый год было установлено около двух миллионов копий программа. Программа поддерживала мышиный интерфейс и отображение картинок. Все это распространялось абсолютно бесплатно и помещалось на одну дискету.

Тем временем Тим Бернерс-Ли не почивал на лаврах, а продолжал развитие сети. В1994 была создана организация, которая была призвана стандартизировать гипертекстовую разметку. Организация была названа World Wide Web Consortium (w3c.org) и началась работа над создание спецификации для HTML 2.0. Начиная с версии 3.0 была реализована поддержка СSS которая была создана для разделения элементов отвечающих за отображение и структуру документа.

В начале 1994 года группа разработчиков браузера Mosaic покинула NCSA и совместно с Джеймсом Кларком из Silicon Graphics основала корпорацию Netscape Communications. Через полгода состоялся дебют – вышла первая версия коммерческого браузера Netscape для трех основных платформ. Менеджеры компании прекрасно понимали, что горизонты совсем недолго останутся такими безоблачными, и постарались подстелить соломки, где только можно. Чтобы отхватить как можно больший кусок потенциальной аудитории, привлечь максимальное количество новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, поддерживавшиеся, естественно, только одноименным браузером. Практически все новые теги были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования.

Выпущенная летом 1996г. версия Internet Explorer 3.0, поддерживавшая практически все расширения Netscape и обладавшая симпатичным и дружественным интерфейсом, очень быстро утвердилась в качестве «второго главного браузера».

Четверные версии обоих браузеров вышли практически одновременно и не отличались друг от друга особой скоростью работы или иными параметрами. Но если Netscape нужно было покупать, то Internet Explorer начал поставляться бесплатно в операционной системе Windows и стал фактически стандартом отрасли.

История в датах:

1993, 14 марта – выпуск Mosaic первого браузера с графическим интерфейсом.

1994 – создан консорциум W3C

1994, 13 октября – Marc Andreessen анонсировал Mozilla который потом стал Netscape

1995, 22 сентября – HTML 2,0 одобренный как стандарт

1995 - Создание CSS

1995 - Появление коммерческой версии браузера Netscap

1995, август – выпуск Internet Explorer 1.0.

1995, 30 августа – создание Opera Software

1996 – W3C приняла CSS 1.0 как стандарт

1996 – Выпуск Internet Explorer 2.0

1996, 14 января – HTML 3,2 одобренный как стандарт

1997, 18 декабря – HTML 4,0 одобренный как стандарт

1998 – Выпуск Opera 3.5

1999, 24 декабря – HTML 4,01 одобренный как стандарт

1999 – Принята спецификация на CSS 2.0

2000, 26 января – XHTML 1,0 одобренный как стандарт

2003, 7 января – Публичная бета-версия Safari

2004, 9 ноября – Публичный релиз Mozilla

2007, 16 февраля – XHTML 1,1 одобренный как стандарт

Описание html. Примеры.

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

<HTML> — Сообщает браузеру, что документ создан на HTML.
<HEAD> — Отмечает вводную и заголовочную части HTML-документа.
<BODY> — Отмечает основной текст и информацию.

Команды для браузера, говорящие, как отображать текст, вставлять таблицы, изображения и другие объекты, называются тегами (от англ. tag - ярлык, признак). Сами теги (команды) не отображаются на экране.

Имя тега пишется в треугольных скобках, например, <b> - тег, говорящий браузеру записывать весь последующий текст жирным шрифтом.
Имя тега можно записывать на любом регистре (прописными или строчными буквами), то есть <b> будет воспринято браузером так же, как и <B>.

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

Теги могут иметь параметры (или атрибуты).
Например, чтобы задать цвет шрифта, используется тег font с параметром color: <font color=green>
- это открывающий тег, который командует браузеру с этого момента отображать шрифт зеленым (в данном примере) цветом до закрывающего тега </font>.

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

Если тег имеет несколько параметров, то они прописываются через пробел в любой последовательности. Например:
<font color=green size=3></font> <font size=3 color=green> </font>
- две аналогичные записи открывающего тега font с параметрами color и size.

Структура HTML страниц

Любая html-страница должна содержать следующие обязательные теги:

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

head - между открывающим и закрывающим тегами помещается важная информация, описывающая этот документ;

body - между открывающим и закрывающим тегами помещается само содержание страницы.

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

<html>

<head> Описание документа (не отображается на самой страничке)
</head>

<body>
Содержание (отображается на страничке с учетом заданной разметки)
</body>

</html>

Сам раздел head не является обязательным и служит для размещения описания документа. Если он есть, то обязательным тегом является только TITLE, содержание которого задает название документа, показываемое обычно в заголовке окна браузера.

Например, такая строчка:
<TITLE>My title.</TITLE>
задаст название документа "My title. ", которое в браузер будет отражаться в заголовке окна и на закладках (когда открыто несколько страничек):

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

Каскадные таблицы стилей (Cascading Style Sheets) — это технология управления дизайном web-страницы, которая существенно увеличивает диапазон возможностей описания внешнего вида страницы и упрощает сам процесс редактирования и форматирования ее содержимого.

Разработкой и стандартизацией CSS занимается W3C (World Wide Web Consortium) с 1996 года, когда была принята первая версия. Вторая созданна в 1998 году, на базе первой с некоторыми доработками. В настоящее время консорциумом рекомендована версия CSS 2.1.

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

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

История развития java script.

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

    Последние достижения в области поиска и разработок наиболее совершенного языка программирования привели к появлению на рынке продукта под названием Java. Это еще сравнительно “молодой”, язык программирования, но его различные модификации за короткое время приобрели определенную популярность. Представляем Вашему вниманию раздел, посвященный Java СКРИПТ технологиям.

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

Чтобы пролить свет на эту тайну, обратимся к истории. Сам язык изобрел Brendan Eich (компания Netscape) и назвал его JavaScript. Впервые новый язык был использован в броузере Netscape Navigator 2.0. После этого он стал использоваться во всех последующих браузерах от Netscape и во всех браузерах от Microsoft, начиная с Internet Explorer 3.0. Компания Microsoft по-своему развила идею, и дала своей версии языка более короткое название: JScript.

Далее, чтобы обеспечить совместимость версий языка независимых разработчиков, Генеральной Ассамблеей ECMA был создан стандарт. Этот стандарт основан на нескольких базовых технологиях, наиболее известными из которых являются упомянутые уже JavaScript (Netscape) и JScript (Microsoft).

Развитие этого Стандарта началось в ноябре 1996. Первое издание Стандарта ECMA было принято Генеральнаой Ассамблеей ECMA в июне 1997.

Данный ECMA Стандарт был представлен международной комиссии по стандартам ISO/IEC JTC 1 для принятия, и одобрен как международный эталон ISO/IEC 16262 в апреле 1998. Генеральная Ассамблея ECMA в июне 1998 одобрила второе издание ECMA-262, с сохраниением всех требований ISO/IEC 16262.

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

Работа над языком еще не закончена. Технический комитет работает над существенными расширениями, включая механизмы для сценариев, которые будут созданы для использования в Internet, и более жесткой координацей с другими основными стандартами групп World Wide Web Консорциум и Wireless Application Protocol Форум.

Так почему-же на сайтах по JScript разная информация? Все дело в том, что сценариий, как Вы понимаете, сам по-себе не является программой (для процессора) в полном смысле слова.

Это просто набор инструкций для другой программы - хоста. MS Internet Explorer, Netscape Navigator, Windows Script Host и есть реализации таких хостов. И если у MS-IE и WSH разработчик один, то и набор поддерживаемых функциий в скриптах у них почти одинаковый. А NN соответственно имеет больше отличий в правилах использовании скриптов, так как разрабатывался другой компанией.

Кстати, следует отметить, что в IE по сравнению c NN больше соответствия рекомендациям ECMA-262, да и поддерживаемых возможностей тоже.

Практическая часть

Создание сайта на простом html.

Возьмем в пример сайт http://lege-art.ru/

В данном сайте используются html, css, javascript (jquery). Вначале опишем простой html:

<html>

<head>

<title>Lege-art — Создание сайтов</title>

</head>

<body>

</div>

<div id="works">РАБОТЫ</div>

</div>

<div id="contacts">КОНТАКТЫ</div>

</center>

</body>

</html>

Более подробно о каждом теге.

<html> , <head>, <body> - стандартные теги без которых не обходится ни один сайт.

После тега <html> идет описание сайта, список подключенных библиотек, заголовок, мета теги и непосредственно сам текст и картинки которые выводятся на экран. Все это описывается только внутри тегов <head>, <body> .

В теге <head> содержится список подключенных файлов (css, javascript и т. д.), заголовок сайта, мета теги, описывающие ключевые слова сайта.

Тег <body> содержит элементы, которые выводятся на экран.

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

<center> только выравнивает горизонтально по центру экрана.

<a> объявляет ссылку.

Получаем следующее:

Описываем каскадные таблицы стилей (CSS)

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

Довольно часто описывают такие параметры как: ширина, высота, отступы, фон и т. д. Вот возьмем пример нашего сайта:

Описываем стандартные теги:

body{

padding:10px; // Внутренний отступ равный 10 пикселям

margin:0; // Внешний отступ делаем равным 0

font-family: calibri, vedana; // назначем основной шрифт Calibri, если отсуствует то шрифт Verdana.

font-size: 14px; // размер шрифта на сайте будет 14 пикселей

opacity: 0; // тег body вместе с содержимым становится полностью прозрачным

}

a{ text-decoration: none; } // убираем стандартное подчеркивание ссылки

img{ border: none; } // убираем рамку с картинок

Далее описываем элементы которым мы присвоили ID (#) или классы(.)

Смотри приложение 1.

Атрибуты margin и padding используются для обозначения отступ вне объекта (margin) и внутри (padding).

Для установки фона объекта используется атрибут background в котором описывается цвет, указывается путь к фоновой картинке и т. д.

Элементам желательно указывать точные размеры с помощью width (ширина) и height (высота). Указываются в пикселях или процентах.

Color определяет цвет шрифта. Не путать с цветом фона.

Перед тем, как посмотреть, что у нас вышло, следует в файл index.html в теге <head> добавить строчку: