Создание школьного сайта

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

Создание школьного сайта на основе HTML и JavaScript

Выполнил:

Кузин Алексей, ученик 9 кл.   

МБОУ «СОШ № 61» г. Пензы  

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

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

МБОУ «СОШ № 61» г.Пензы

Моисеева М.А. 

Пенза 2012г.

Оглавление.

Введение.        3

Глава I.        Разработка информационного WEB-сайта.

1 Описания языка HTML для создания сайта.        5

1.2.Структура HTML.        7

Глава II.        Язык сценариев JavaScript.

2.1.        Введение в JavaScript.        12

2.2 Технология  AJAX        16

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

Заключение.        23

Список использованной литературы.        24

Введение.

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

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

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

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

Цель даной работы создание WEB-сайта на основе рассмотрения языка HTML и JavaScript.

Задачи работы:

• Рассмотреть этапы разработки WEB-сайта.
• Описать язык HTML и JavaScript для создания сайта.
• Изучить структуру HTML.

Работа состоит из введения, двух глав, практической части, заключения и списка литературы. В первой главе рассматривается принципы разработки информационного WEB-сайта. Вторая глава рассказывает об основных областей использования языка JavaScript при создании HTML-страниц.

Глава I.        Разработка информационного WEB-сайта.

1.2        Описания языка HTML для создания сайта.

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

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

Вопросами стандартизации языка HTML занимается организация World Wide Web Consortium (W3C). Несмотря на необходимость обеспечить полную программную и аппаратную независимость Web-страниц, в полной мере реализовать эти принципы довольно сложно. Одна из проблем состоит в том, что работа над языком продолжается. Появляются новые версии HTML, предоставляющие дополнительные возможности для разработчиков Web-страниц.

Существует множество специализированных HTML-редакторов, которые можно условно разделить на два типа:

• Визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold и др.). При работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа. Кстати, существуют конверторы текстовых документов, подготовленных в Word и Word Perfect, в формат HTML-файлов;
• Редакторы собственно HTML-текстов, позволяющие автоматизировать набор и редактирование кода (например, HomeSite, HotDog, Ken Nesbitt Web Editor и многие другие). Эти программы дают возможность пользователю быстро и легко вставлять в документы элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.

Кроме перечисленных двух категории, существуют программы, объединяющие в себе черты текстовых и визуальных HTML-редакторов к таким программам относится HotMetal разработки компании SoftQuad Sofware.

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

1.2.        Структура HTML.

Символы заключенные в угловые скобки являются HTML командами, по которым «браузер» распознает, как следует преобразовать части текста, заключенные между этими командами.

Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой и заканчиваться командой.

Документ состоит из 2 частей:

• Заголовка (Head).
• Собственно документа (Body).

Общая схема документа в формате HTML выглядит следующим образом:

При написании команд HTML не имеет значение, какими буквами – строчными или прописными Вы пишете команды.

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

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

Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег  будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

Моя первая Web-страница

Результат: Моя первая Web-страница.

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

Приступая к рассмотрению структуры HTML-документа прежде всего надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега . Для него требуется закрывающий тег , обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как . Для него требуется закрывающий тег . Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: ....

Запишем пример простейшего документа:

<ТIТLЕ>Пример HTML-страницы

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.

Тег

Ричард Бах

Единственная

Мы прошли долгий путь, правда?

Впервые мы встретились двадцать пять лет тому назад. Тогда я был летчиком, очарованным полетом, и пытался найти смысл жизни в показаниях приборов. Двадцать лет назад нше путешесвие привело нас в новый необычный мир, распахнутый для нас крыльями Чайки.

Глава II.        Язык сценариев JavaScript.

2.1.        Введение в JavaScript.

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.

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

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

Основные области использования языка JavaScript при создании интерактивных HTML-страниц:

• Динамическое создание документа с помощью сценария
• Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер
• Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.
• Взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном в HTML-страницу

Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространенными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.

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

JavaScript поддерживает четыре простых типа данных:

• Целый
• Вещественный
• Строковый
• Булевый, или логический

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

Целые литералы являются последовательностью цифр и представляют обычные целые числа со знаком или без знака:

 123 // целое положительное число

-123 // целое отрицательное число

+123 // целое положительное число

Для задания вещественных литералов используется синтаксис чисел с десятичной точкой, отделяющей дробную часть числа от целой, или запись вещественных чисел в научной нотации с указанием после символа “e” или “E” порядка числа. Пример правильных вещественных чисел:

1.25        0.125e01        12.5E-1        0.0125E+2

Строковый литерал – последовательность алфавитно-цифровых символов, заключенная в одинарные (‘) или двойные кавычки (“), например: “Ира”, ‘ИРА’. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде “Ира’. Двойные кавычки – это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида:

“It’s a string” // Значение строки равно It’s a string

Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения.

Каждая переменная на JavaScript имеет имя, которое должно начинаться с буквы латинского алфавита, либо символа подчеркивания “_”, за которым следует любая комбинация алфавитно-цифровых символов или символов подчеркивания. Следующие имена являются допустимыми именами переменных

Temp1

MyFunction

_my_Method

Язык JavaScript чувствителен к регистру. Это означает, что строчные и прописные буквы алфавита считаются разными символами.

Определить переменную можно двумя способами:

• Оператором var
• Оператором присваивания (=)

Оператор var используется как для задания, так и для инициализации переменной и имеет синтаксис:

var имя_переменной [= начальное_значение];

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

var weekDay = “Пятница”;

задает переменную weekDay, присваивает ей строковое значение “Пятница”, и тем самым определяет ее тип как строковый.

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

2.2Технология  AJAX

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

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

Пожалуй, любой разработчик мечтает о том, чтобы превратить обычную, неновую web-страничку во что-то более захватывающее. Сейчас можно попробовать вдохнуть немного жизни в web-технологии десятилетней давности. Если у вас появилась необходимость освежить, обогатить и сделать более интерактивными свои творения, познакомьтесь с AJAX.

При использовании Google или web-клиента Gmail вам уже приходилось сталкиваться с решением, основанном на AJAX. Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями.

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

Самым примечательным из этих новых приложений является Google Maps. Пользуясь им, можно находить определенную местность на карте планеты, затем переходить к более мелким объектам, прокручивать перетягивать карту без необходимости обновления страницы.

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

Структура сайта:

HTML-код сайта:

 

$CONTENT$

 

 

 

$SMENU_1$

 

 

 

 

 

Здравствуйте, $USERNAME$

Вы здесь: $USER_REG_DAYS$-й день

 

Добавить фотографии в альбом

Фотоальбом

 

Добро пожаловать на сайт Нашей школы! Войдите под своим логином или зарегистрируйтесь!

$LOGIN_FORM$

 

 

 

 

onmouseover="this.src='http://school61penza.3dn.ru/vverh.png'"

 onmouseout="this.src='http://school61penza.3dn.ru/vverh1.png'" border=0 />

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

При этом мною были решены следующие задачи:

• рассмотрение языка HTML и JavaScript для разработки WEB-сайта;
• ознакомление с основными правилами и рекомендациями по разработке и созданию WEB-сайтов;
• определение структуры WEB-страниц;

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

Список использованной литературы.

1. А.Ю. Гаевский, В.А. Романовский 100% самоучитель. Создание WEB-страниц и WEB-сайтов – издательство Триумф, 2008. [8-22с.]
2. С.В. Симонович Информатика – Питер, 2001. [530-532c.]
3. Э. Шафран СозданиеWEB-страниц – Питер, 1999.
4. Р. Вагнер, А. Вайк JavaScript. Энциклопедия пользователя – Москва, 2001
5. С. Кох Введение в JavaScript для Мага – С-П., 1996. [20с.]
6. http://webzona.org/article/a-3.html
7. http://www.frolov-lib.ru