Поиск

Полнотекстовый поиск:
Где искать:
везде
только в названии
только в тексте
Выводить:
описание
слова в тексте
только заголовок

Рекомендуем ознакомиться

'Документ'
Положение о Совете директоров Открытого акционерного общества «Первоуральский новотрубный завод» (далее по тексту – Общество) разработано в соответств...полностью>>
'Документ'
Сегодня мы будем говорить о том что, Иисус - это ответ сегодня для всех нас. Мы иногда забываем об этом, а такая забывчивость может приводить к депре...полностью>>
'Анализ'
К такому выводу пришли аналитики исследовательского холдинга "Ромир", подсчитав, что 35 процентов участников исследования на вопрос о том, ч...полностью>>
'Документ'
Но ведь недостаточно перечислить эти прекрасные качества. Гораздо труднее ответить на вопросы: как такие качества воспитать в детях? Как в наше, чере...полностью>>

Главная > Документ

Сохрани ссылку в одной из сетей:

- Грамотное и качественное выполнение всех видов научных работ. Скидки, оригинальность, контроль плагиата, прямое общение с автором.

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

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

Учебно-технический цент «Омега-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

<H2><H2> 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

ВВЕДЕНИЕ 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

<H2><H2> 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 9

Версии HTML 9

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

<!-- Комментарий --!> 15

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

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

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

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

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

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

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

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

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

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

Формат GIF 35

Формат JPG 35

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уровни CSS 46

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

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

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

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

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

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

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

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

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

JavaScript в действии 54

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

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

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

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

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

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

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

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

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

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

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

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

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

Microsoft Internet Explorer 69

Netscape Communicator 71

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

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

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

Введение

Термин 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 вашего партнера настроены по-разному.

После того, как по телефону (или электронной почте) редакторы будут настроены одинаково, текст все равно может выглядеть по-разному уже по причинам, известным только фирме Microsoft.

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

HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.

Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы. Правда, и здесь не все гладко. Разные браузеры могут работать немного по-разному.

HTML-документ -- это гипертекст.

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

Первый этюд к гипертексту

Некоторое нарушение линейности обычной книги вносят сноски, ссылки на другие страницы и ссылки на другую литературу.

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

Второй этюд к гипертексту

Из массы линейной текстовой продукции выделяются словари, справочники, энциклопедии. Физически текст устроен линейно: за страницей 10 обязательно следует страница 11, а за сотой -- сто первая. Однако, предполагается, что читатель обращается к книге для справки, а не читает ее всю подряд от корки до корки.

Для упрощения навигации пользователя в таких книгах предусматриваются подробные оглавления, алфавитные и тематические указатели. Разделы словаря или справочника имеют систему развитых перекрестных ссылок. (Помните как у Лема:СЕПУЛЬКА - предмет для сепулькации, см. сепулькация.СЕПУЛЬКАЦИЯ -- действие, выполняемое при помощи СЕПУЛЬКИ, см. сепулька.)

Третий этюд к гипертексту

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

Последний этюд к гипертексту

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

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

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

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

Синтаксис HTML.



Скачать документ

Похожие документы:

  1. В. М. Антонов інтелектуальна власність І комп'ютерне авторське право

    Документ
    Розглядаються питання та проблеми стосовно фундаментальних понять інтелектуальної власності та комп'ютерного авторського пра­ва в Україні: основні поняття; нормативно-правова база; організації, що захищають авторські і суміжні права;
  2. Тема: Програмування. Основні етапи розробки прикладних програм

    Документ
    Під програмуванням розуміють представлення в деякій символічній формі певного алгоритму. В якості символічної форми може використовуватися будь-яка мова спілкування, спеціально створена штучна мова, набір графічних знаків.
  3. Й суд миколаївської області управління юстиції в миколаївській області визначальні тенденції генезису державності І права збірник наукових праць миколаїв 2007

    Документ
    У збірнику наукових праць репрезентуються матеріали доповідей, які були представлені під час проведення пленарних і секційних засідань міжнародної науково-практичної конференції „Треті Прибузькі юридичні читання”, що відбувалася 23-24
  4. Програми для загальноосвітніх навчальних закладів Навчальні програми для профільного навчання (1)

    Документ
    У збірнику вміщено програми з інформатики для загальноосвітніх навчальних закладів різного профілю, для спеціалізованих шкіл, гімназій, ліцеїв з поглибленим вивченням інформатики, програми факультативів, спецкурсів, пропедевтичних курсів та гуртків.
  5. Програми для загальноосвітніх навчальних закладів Навчальні програми для профільного навчання (2)

    Документ
    головний спеціаліст Головного управління змісту освіти Міністерства освіти і науки України Н. Прокопенко, завідувачка сектору Науково-методичного центру середньої освіти Міністерства освіти і науки України О.

Другие похожие документы..