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

Автор работы: Пользователь скрыл имя, 21 Сентября 2011 в 23:27, курсовая работа

Описание работы

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

Содержание работы

Введение 3

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

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

Теги 8

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

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

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

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

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

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

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

Заключение 23

Приложение

Файлы: 1 файл

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

— 220.39 Кб (Скачать файл)

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

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

     <meta charset=utf-8">

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

</head> 

    <body>

    <div id="lang">

    <a href="http://lege-art.ru/en/" title="English">EN</a>

    |

    <a href="http://lege-art.ru/" title="по-русски">RU</a>

    </div> 

<center>

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

<div id="logo"> 

    <EMBED SRC="lege-art_logo.swf" quality=high WIDTH=600px HEIGHT=360px TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" alt="lege-art" wmode="opaque"></EMBED> 

</div>

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

 

<div id="content"></div> 

</center> 
 

</body>

</html> 
 
 
 

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

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

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

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

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

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

    <embed> служит для вставки flash элементов.

    <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> добавить строчку:

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

Информация о работе Технологии разработки web приложений