Министерство общего и профессионального образования
Свердловской области.
Учебно-технический цент «Омега-1»
Предмет: Информатика
Разработка web сайта на основе HTML с использованием JavaScript.
Исполнитель: Неуймин Николай
ученик 11 «Б» класса
Руководитель: Речкалова Н.В.
учитель ИВТ
Екатеринбург 2005.
Содержание:
Введение.. 4
История HTML.. 5
Версии HTML.. 5
Гипертекст.. 6
Структура WEB-страницы.. 8
<HTML></html>.. 8
<HEAD></head>.. 9
<TITLE></title>.. 9
<STYLE></style>.. 9
<META>.. 9
<BODY></body>.. 9
<!-- Комментарий --!>.. 10
<H1><h1>.. 10
<HR>.. 10
<A></a>.. 11
Переход внутри одного документа. 11
Переход к другому документу. 12
<BASE>.. 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 была разработана в 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-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура. Оно линейно в своей основе.
(Отступлением от этого тезиса являются ссылки. С их помощью можно организовать ветвление и процедурный вызов. Об этом будет рассказано ниже. Однако, эти средства слишком примитивны для серьезного сопоставления с аналогичными структурами языков типа Си или Паскаль.)