«Создание сайта на тему: «Языки программирования интерактивных Html-документов»

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

Цели создания Web-сайта очень разные в каждом конкретном случае и поэтому при выборе типа сайта необходимо определиться с целью создания web-сайта, его содержание. Также при создании сайта нужно учесть оформление, от того, насколько качественно и красиво создана та или иная Web-страница, зависит во многом ее успех в сети. Когда мы открываем Web-страницу, то невольно обращаем внимание на ее дизайн. Он может быть выполнен в различных стилях: деловой, строгий, авторский, игровой и так далее.

Объектом исследования данной курсовой работы является Web-программирование.

Предмет исследования – язык программирования JavaScript как инструмент для создания интерактивных Html-документов.

Цель исследования - создание Internet-сайта на тему «Языки программирования интерактивных Html-документов».

Для достижения поставленной цели в данной работе нам необходимо решить следующие задачи:

 изучение Интернет технологий;

 планирование сайта и разработка технического задания;

 разработка сайта с использованием Интернет технологий;

 тестирование и публикация сайта.

Данная работа состоит из четырех глав:

В первой главе данной работы исследуются интернет-технологий и программы для создания web-cтраниц.

Во второй главе данной работы дается описание Языка программирования интерактивных Html-документов JavaScript.

Во третьей главе разрабатываются:

 планирование сайта;

 техническое задание, которое включает общие сведения, назначение и цели создания сайта, характеристика сайта, требования к системе и сайту;

 публикация сайта.

Рассматривается формулировка цели создания сайта, обсуждение аудитории, требование к содержимому и внешнему виду, технические требования, технологии реализации, схема и макет сайта. Разрабатывается Интернет сайт.

В четвертой главе рассматривается результаты внедрения Интернет сайта.

 аудио;

 видео;

 апплеты.

Информационно значимое содержимое wеb-страницы обычно называется «content».

Несколько wеb-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном web-сервере, образуют web-сайт.

1.2 Редакторы HTML

Реда́ктор HTML или HTML-реда́ктор - компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности.

По своей функциональности они делятся (часто весьма условно) на две категории:

 Редактор показывает только исходный код.

 Редактор показывает готовую страницу в режиме WYSIWYG (что

 видишь, то и получишь).

Многие WYSIWYG-редакторы позволяют одновременно работать и с кодом страницы.

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

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

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производсту программ для создания веб-сайтов, а также законодателем моды в этой области. Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).

Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

Графические редакторы

Создание и оптимизация графики - сложная и капризная задача. Безусловно, возможно создание web-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.

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

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

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

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

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

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

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

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

А) Редакторы растровой графики

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

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

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop.

Painter - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи.

B) Редакторы векторной графики

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику.

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

Adobe Streamline - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.

1.3 Разработка Web-страницы с помощью программ

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

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать web-страницы, которые могут быть просмотрены многими браузерами web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к web.

Структура HTML документа

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

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

Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

Информация

Здесь стартовым тегом является тег

, а завершающим -

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

A) Объявление HTML.

B) Заголовачная часть.

C) Тело документа.

A) Объявление HTML

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

…

B) Заголовочная часть.

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

C) Тело документа.

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

.

Теперь мы можем написать HTML-код нашей странички:

Здесь будут мои страницы!

Прикладная программа FrontPage 2003 – это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования web-среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на сервер в сети Интернет.

Web-страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML). Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на web-страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML.

Сайт или web-узел – это набор связанных между собой близких по смыслу web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые web - страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов.

На каждом сайте существует одна web-страница, которая называется главной или домашней. Домашняя страница – первая web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта.

Обычно сайт размещается на web-сервере – компьютере, который предоставляет доступ к web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.

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

Создание web-страниц в прикладной программе FrontPage.

Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку web-страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.

Создание web–страницы на основе шаблонов FrontPage.

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

Создание web–страницы на основе имеющихся web-страниц в ПК.

Создать web–страницу можно и на базе имеющихся, на компьютере web-страниц. Для этого необходимо в области задач выбрать команду «Из имеющейся страницы» и в появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.

9. Симкин Стив, Бартлет Нейл, Лесли Алекс. Программирование на Java. Путеводитель :Пер. с англ. – К. НИПФ «ДиаСофт Лтд», 1996. 736 с.

10. Томас А. Пауэлл. WEB-дизайн. – СпБ: «БХВ-Петербург», 2004. – 278с.

11. Уолл "Использование WWW", Москва 1997.

12. Фролов А.А., Фролов Г.А. Web-сервер своими руками. Том 29. - М.: Диалог-МИФИ, 1997. - 288 с.

13. Хейл, Бернард Ван. JDBC: Java и базы данных :Пер. с англ. М.,1999.-320с.

14. Хеслоп "HTML с самого начала", СПб:, 1995

15. Холзнер Стивен. Perl: специальный справочник :Пер. с анг. – СПб.: Питер, 2000. – 496с.: ил.

16. Эферган М. Java: справочник. – СПб.: Питер, 1998. -448с.: ил.

Электронный ресурс

17. Энциклопедия сайтостроения [Электронный ресурс]. Режим доступа : w*w. URL: h**t://site.nic.r*/content/view/46/28/

18. Интернет работа.Заработок в интернете, создание сайтов, SEO, блоггинг [Электронный ресурс]. Режим доступа : w*w. URL: h**t://blogwork.r*/chto-takoe-cms-ili-sistema-upravleniya-kontentom/

19. Энциклопедия сайтостроения [Электронный ресурс]. Режим доступа : w*w. URL: h**t://site.nic.r*/content/view/46/28/

20. Гибкая разработка ПО (Agile Development) [Электронный ресурс]. Режим доступа : w*w. URL: h**t://wiki.agiledev.r*/doku.php?id=frameworks

21. Создание сайтов [Электронный ресурс]. Режим доступа : w*w. URL : h**t://prolabs.r*/Technical/Architecture/default.aspx

22. Краснов С.Л., Суриков С.Я. «Internet технологии» h**t://w*w.intuit.r*

23. h**t://w*w.citforum.r*, свободный

24. Беляев П.Р. «Joomla!» h**t://w*w.xpoint.r*, свободный

25. Липанов К.В., Рожков С.А. «Основы web-программирования» h**t://w*w.by.iatp.org.ua, свободный

26. h**t://phpclub.unet.r*, свободный

27. Куликов К.К. «Создание web-сайтов» h**t://w*w.webmasteram.r*, свободный

28. h**t://w*w.web4pro.com.ua/design

29. h**t://w*w.profyclass.r*/analys/223.htm

30. Коровенков Юрий - h**t://w*w.seo-copywrite.r*/web1/

31. h**t://w*w.luxsite.r*/services/createsite05.htm

32. Петюшкин А. В. - h**t://w*w.i2r.r*/static/255/out_14155.shtml