Министерство общего и профессионального образования

Свердловской области.

Учебно-технический цент «Омега-1»

Предмет: Информатика

Разработка web сайта на основе HTML с использованием JavaScript.

Исполнитель: Неуймин Николай

ученик 11 «Б» класса

Руководитель: Речкалова Н.В.

учитель ИВТ

Екатеринбург 2005.

Содержание:

Введение 4

История HTML 5

Версии HTML 5

Гипертекст 6

Структура WEB-страницы 8

8

9

9

9

9

9

10

10

11

Переход внутри одного документа 11

Переход к другому документу 12

14

Правила синтаксиса 15

Кодирование символов 16

Использование символов 16

Управление цветом 18

Конструктор документов 20

Приложение. Структура приложения 20

Цепочка 20

Применение цепочек 21

Иерархия 22

Уложим картинку в фоновый паркет 23

Графика 27

Формат GIF 27

Формат JPG 27

Как программировать картинки 28

Картинка в тексте 28

Картинка как ссылка 29

Построение таблиц. 30

Что такое таблица 30

Как задать таблицу 30

Атрибуты команды TABLE 31

Атрибуты команды TR 31

Атрибуты команды TD (TH) 32

Многоликие таблицы 33

Страничные отступы 33

Замечание 34

Многоколонная верстка 34

Наложение картинок 34

Замечание 35

Таблицы стилей 36

Уровни CSS 36

Способы определения таблиц стилей 36

Запись шаблона CSS 38

Группировка и наследование 38

Селекторы 39

Псевдоклассы 40

Применение таблиц стилей CSS 40

CSS в форматировании текста 40

Единицы измерения в таблицах стилей 41

Структурное форматирование 42

Введение в JavaScript 44

Использование JavaScript 44

Важность изучения JavaScript 44

JavaScript в действии 44

Ввод/вывод информации с помощью JavaScript 45

Объекты, методы и свойства 45

Управление данными с помощью переменных 46

Значения в языке JavaScript 46

Переменные в языке JavaScript 48

Массивы JavaScript и Escape-последовательности 49

Как пользоваться массивами 50

Выражения, условия, операции, строки и числа 52

Что такое выражения и условия 52

Знакомство с операциями 53

Создание сценариев с помощью функций и событий 56

Описание браузеров 59

Просмотр WEB-страниц 59

Microsoft Internet Explorer 59

Netscape Communicator 61

Терминология 64

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

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

Введение

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

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

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

Цель работы: изучить языки программирования HTML и JavaScript.

Исходя и выше поставленной цели при создании данного проекта я поставил следующие задачи:

1. Изучить и проанализировать литературу по данной теме.

2. Изучить принцип работы браузеров.

3. Создать оригинальный сайт.

История HTML

Версии HTML

Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.

В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.

В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.

Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт - программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.

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

Гипертекст

Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты.

Но это просто тексты. Используя мощный текстовый процессор, такой, как Microsoft Word, сверстать объявление, письмо брошюру и небольшую книгу можно гораздо быстрее, и результат будет лучшего качества.

При этом не надо писать программы, вникать во все тонкости многочисленных тегов и их атрибутов. Работая в Worde, практически не надо думать ни о чем, кроме содержания собственного произведения. Разнообразный оформительский инструментарий имеет интуитивно-понятный интерфейс и многочисленную библиотеку шрифтов, линий, значков, рамочек, орнаментов, фигур, картиночек и других полезных "штучек", которые делают текст на экране и бумаге приятным для глаза. При условии, конечно, что вы не лишены вкуса и чувства меры.

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

Главных причин популярности HTML три. Вот они в порядке возрастания важности.

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

Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:

берется обычный текст

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

Однако, хорошие гипертекстовые документы при таком подходе получить гораздо сложнее, чем в случае когда, структура HTML-документа планируется еще до написания текстов. Ведь гипертекст устроен принципиально иначе (см. третью причину).

Переносимость.

Если, работая в Word'e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию -- начинаются проблемы.

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

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

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

Но даже, если все эти условия выполнены, все равно мало шансов на то, что ваш товарищ увидит текст неискаженным (картинки вылезают из рамок, границы страниц плывут по тексту,...). Это происходит потому, что ваш Word и Word вашего партнера настроены по-разному.