ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ФГОУ СПО ТАМБОВСКИЙ БИЗНЕС-КОЛЛЕДЖ
Курсовая работа
по учебной дисциплине: «Техническая разработка программногопродукта»
Тема: Разработка Web-сайта на основе HTML с использованием JavaScript
Дата сдачи:
Студента 3 курса 13 группы
Дата защиты:
Специальности 230105 «ПОВТ и АС
Оценка:
Козлова Алексея
Руководитель: Толмачева Т.Н.
Тамбов 2008
Содержание
Введение
2. Таблицы стилей, Уровни CSS
3. JavaScript
3.1 Использование JavaScript
3.2 Важность изучения JavaScript
3.3 Программный код Web сайта
Заключение
Список используемой литературы
Введение
Термин HTML (Hyper Text Markup Language) означает „языкмаркировки гипертекстов“. Это понятие более широкое, включает в себяИнтернет и локальные сети, редакторы, браузеры, разнообразные программныепродукты, компакт-диски, обучающие курсы, дизайн и многое другое.html — своеобразнаяпротивоположность сложным языкам программирования, известным толькоспециалистам.
HTML давно перестал быть просто языком программирования. Человек,изучавший этот язык, обретает возможность делать сложные вещи простымиспособами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекстподходит для включения элементов мультимедиа в традиционные документы. Практическиименно благодаря развитию гипертекста, большинство пользователей получиловозможность создавать собственные мультимедийные продукты и распространять ихна компакт-дисках. Такие информационные системы, выполненные в виде набораHTML-страниц, не требует разработки специальных программных средств, так каквсе необходимые инструменты для работы с данными (WEB-браузеры) стали частьюстандартного программного обеспечения большинства персональных компьютеров. Отпользователя требуется выполнить только ту работу, которая относится к тематикеразрабатываемого продукта: подготовить тексты, нарисовать рисунки, создатьHTML-страницы и продумать связь между ними.
HTML, как основа создания WEB-страниц, имеет прямоеотношение и к новому направлению изобразительного искусства — WEB-дизайн. Художникув Интернете недостаточно просто нарисовать красивые картинки, оригинальныйлоготип, создать новый фирменный стиль. Он должен еще поместить все это в Сети,продумать связь между WEB-страницами, чтобы все двигалось, откликалась надействие пользователя, поражало воображение, вызывало желание создатьчто-нибудь свое, оригинальное в этой области.
1. История 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-код.
2. Таблицы стилей, Уровни CSS
Впервые каскадные таблицы стилей CSS были реализованы вбраузере Internet Explorer 3.0. Однако в то время развитие CSS находилось взачаточном состоянии, поэтому правила составления стилевых шаблонов были весьмаразрозненными.
С момента своего возникновения структура CSS была несколькораз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые.Существуют три уровня CSS, определяемых наличием завершенной редакции структуры.Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательноутвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций,начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровеньстилевого оформления электронных документов, принятый к обсуждению 23 мая 2001года, на момент написания книги находился в стадии проработки).
В завершение разговора об уровнях CSS следует добавить, чтопереход от одного уровня к другому, в основном, сопровождался некоторымивидоизменениями в структуре и в правилах стилевого оформления, технологическимидополнениями, а также попытками систематизировать применение CSS.
Именно третий уровень (CSS 3) позиционируется разработчикамив качестве некой единой системы представления стилей в электронном документе,основанной на использовании специальных модулей.
Способы определения таблиц стилей. Как уже было сказано,любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобыправила CSS, обозначенные для конкретных элементов электронного документа,вступили в силу.
Определение таблицы стилей (стилевого шаблона) возможночетырьмя способами:
ссылка на внешний файл. Если все стилевые шаблоны дляконкретного HTML-документа разместить в одном текстовом файле (с расширениемess), то с помощью специального тега из текущего документа можносделать ссылку на внешний CSS-файл стилевых шаблонов, например:
Браузер, анализируя HTML-код, обратится по указанному путии, обнаружив указанный файл стилевого оформления, отобразит элементы страницы всоответствии с определенными правилами CSS.
Следует помнить, что конструкция указания пути к внешнемуCSS-файлу должна находиться в пределах раздела head HTML-документа;
внедрение в документ. Под внедрением в документподразумевается задание стилевой конструкции внутри самой HTML-страницы,например:
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
>
Данная конструкция также должна присутствовать в разделеhead. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишьотдельные правила стилевого оформления, описание шаблонов заключается междусимволами комментариев (при отсутствии поддержки CSS браузер пропустит содержаниестилевых шаблонов, если же поддержка есть, то браузер интерпретирует правилаCSS);
включение в теговые конструкции. Любой отдельныйHTML-элемент может быть подвергнут форматированию средствами CSS. Для этогонеобходимо задать определенное правило реализации того или иного тега, например:
Текст параграфа...
В этом случае задано отдельное правило для конкретногопараграфа. Также можно присваивать отдельному HTML-элементу определенный классстилевого шаблона:
Описание классов должно строиться следующим способом (напримере внедрения стилевого шаблона в документ):
. header { font-weight: bold; color: gray; }
. text { color: black; font-size: llpx; }
>
В данном случае текст табличной ячейки класса. header будетотображаться жирным начертанием и серым цветом, а ячейки класса. text — обычнымначертанием, черным цветом и размером шрифта 11 пикселов;
импортирование. Импортирование стилевого шаблона CSS, посути, аналогично указанию ссылки на внешний файл:
@import: url (style. ess);
>
Все четыре способа определения стилевого шаблона CSS можноиспользовать одновременно в пределах одного HTML-документа (листинг 9.1). Такаявозможность позволяет задавать основное правило CSS, к примеру, в виде внешнегофайла шаблонов, а для исключительных или редких HTML-элементов — отдельныеконструкции либо в теге , либо в кодовых конструкциях самих тегов.
Листинг. Совмещение различных способов определения стилевогошаблона CSS
Совмещение различных способов определенияCSS
P { text-align: justify; color: green; }
. title { color: blue; font-weight: bold; font-size:16px; } — >
Cnoco6biопределения шаблонов CSS
Ниже перечислены существующие способы определения стилевыхшаблонов CSS, даны характеристики каждого способа, приведены примеры ихиспользования.
Ссылка на внешний файл
Внедрение в документ
Включение в теговые конструкции
Импортирование
Также следует сказать, что использование каждого способаопределения стилевых шаблонов CSS может быть связано с некоторыми минусами.
В случае ошибки интерпретации HTML-кода браузером, плохойсвязи с сервером и пр. внешний файл CSS может не загрузиться, вследствие чегостиль для нужных элементов HTML не будет переопределен.
Если внешний файл CSS включает слишком большое количествостилевых шаблонов (что отражается на конечном размере файла), то существуетвероятность того, что браузер не сумеет полностью интерпретировать файл CSS иливообще исчерпает лимит времени по загрузке данных. В первом случае стили длячасти элементов не будут переопределены (браузер успеет «обнаружить» толькоте правила, которые размещены в верхней части CSS-файла). Во втором случае всеэлементы страницы останутся без изменения, загрузившись по умолчанию.
При использовании способа включения стиля в сам документналичие слишком большого количества шаблонов CSS заметно увеличит конечныйразмер HTML-страницы, что скажется на времени загрузки документа в браузере.
CSS и Dynamic HTML — просто и привлекательно! 187
При сочетании различных способов определения стилевыхшаблонов следует учитывать особенности браузеров. К примеру, Netscape «плохоотносится» к использованию символа нижнего подчеркивания (_) в указанииклассов для элементов HTML (. news_titie,. _about и т.д.). Также ряд браузеров(и Netscape в том числе) не подключает стилевой шаблон класса, присвоенногоячейке таблицы /: конструкция TeKCTвыведет текст по умолчанию, a TeKCTотобразит текст заданным стилем.
3. JavaScript
JavaScript — язык подготовки сценариев, позволяющий сделатьWeb-страницы более интерактивными и функциональными. После его изучения высможете заниматься разработкой Web-приложений на качественно новом уровне. Длянаписания сценариев JavaScript обязательно требуется знание языка HTML. В этойглаве вы получите первое представление о JavaScript еще до того, как начнетесоздавать свой первый сценарий.
Здесь приводится следующая информация:
Q важность изучения JavaScript; а история JavaScript;
а некоторые различия между языками подготовки сценариев иязыками программирования; а инструменты, необходимые для написания сценариевJavaScript.3.1 Использование JavaScript
Присмотритесь к сайтам, которые вы посещаете. На каждойстранице содержится текст и некоторое количество картинок. Быть может, естьчасы, показывающие время, или бегущий текст в строке состояния браузера. Возможно,на сайте имеется форма, которую нужно заполнить. Если пропустить какую-либографу анкеты, то появится сообщение об ошибке. На некоторых страницах встречаютсядвижущиеся по экрану изображения или текст, изменяющийся при щелчке мыши.
Таким образом, вы можете наблюдать JavaScript в действии, асоздать подобные эффекты может любой человек, знающий этот язык. Причем безособого труда.
Рекомендация Следует понаблюдать за тем, что создают спомощью JavaScript другие разработчики. Это отличный способ найти свежеерешение.
Прочитав эту книгу, вы не только освоите JavaScript (вместотого, чтобы просто копировать и вставлять в Web-страницу готовые сценарии), нои узнаете множество интересных идей, реализовать которые вы сможете сами — спомощью JavaScript.3.2 Важность изучения JavaScript
Полезно изучить JavaScript хотя бы из-за его широкогораспространения в сети. Огромное количество Web-страниц сделано сиспользованием сценариев (по самым разным причинам), и сайты без них кажутсяблеклыми и скучными. Каким бы интересным не было содержание сайта, некоторыепосетители сразу захотят уйти. Конечно, нет смысла оспаривать важностьтекстового содержания для любой Web-страницы, однако использование JavaScriptне только улучшит подачу материала, но и сделает вашу страницу болеезапоминающейся.
Рекомендация Запомните: единственное, что отличаетпользующиеся успехом сайты от неудачных, — их внешний вид. Чем интереснееоформлен сайт, тем он популярнее.
Предупреждение Остерегайтесь использования найденных в сетисценариев, предназначенных для копирования и вставки. Как правило, они неотличаются хорошим качеством и, что хуже всего, дублируются на тысячах сайтов. ИзучениеJavaScript избавит вас от такой практики и позволит создавать оригинальныезапоминающиеся Web-страницы.
Можно найти еще множество причин для изучения ииспользования JavaScript. Сценарий всего в несколько строк помогает посетителямсайта отыскать страницу, соответствующую их браузеру и установкам, либоавтоматически подсчитать сумму колонок в форме заказа. Подобные «мелочи»не рассчитаны на внешний эффект, но они свидетельствуют о высоком уровнепрофессионализма разработчика и знании им этики деловых отношений.
3.3 Программный код Webсайта
Хостинг. Готовые шаблоны сайтов.
a {text-decoration: none; font-size: 8pt; color:#E0FDAF; }
a: hover {text-decoration: underline; font-size:8pt; color: #E0FDAF; }
font { font-family: Arial, Tahoma,Helvetica; font-size: 8pt; color: white; }
b. yellow {color: #FAF294; }
hr {color: #D1D33B; }
hr. bw {color: black; }
font. green { font-family: Arial, Tahoma,Helvetica; font-size: 8pt; color: #B5FC39; }
font. title { font-family: Arial, Tahoma,Helvetica; font-size: 14pt; color: #ffffff; }
font. title1 { font-family: Arial, Tahoma,Helvetica; font-size: 16pt; color: black; }
font. title2 { font-family: Arial, Tahoma,Helvetica; font-size: 20pt; color: #D2A801; }
font. title3 { font-family: Arial, Tahoma,Helvetica; font-size: 14pt; color: black; }
font. title4 { font-family: Arial, Tahoma,Helvetica; font-size: 16pt; color: white; }
font. black { font-family: Arial, Tahoma,Helvetica; font-size: 8pt; color: black; }
font. blackt { font-family: Arial, Tahoma,Helvetica; font-size: 14pt; color: #ffffff; }
font. blacklm { font-family: Arial, Tahoma,Helvetica; font-size: 8pt; color: black; }
font. blacklm2 { font-family: Arial,Tahoma, Helvetica; font-size: 7pt; color: black; }
font. blacklight { font-family: Arial,Tahoma, Helvetica; font-size: 10pt; color: white; }
font. blacklight2 { font-family: Arial,Tahoma, Helvetica; font-size: 10pt; color: black; font-weight: bold }
font. tse { font-family: Arial, Tahoma,Helvetica; font-size: 8pt; color: #96B495; }
d=document; a=''; a+='; r='+escape (d. referrer)
js=10 // -->
a+='; j='+navigator. javaEnabled ()
js=11 // -->
s=screen; a+='; s='+s. width+'*'+s. height
a+='; d='+ (s. colorDepth? s. colorDepth: s.pixelDepth)
js=12 // -->
js=13 // -->
d. write ('
'? id=280923; js='+js+a+'; rand='+Math. random() +
'» height=1 width=1>')
if (js>11) d. write ('
src=«top. list.ru/counter? js=na;id=280923»
height=1 width=1 alt="">
if (js>11) d. write ('--'+'>') // -->
VB и COM Барби Игры Генератор игр Tutorials Winsock Курсовики VisualBasic Free Tutorials Игры MP3 Шаблоны Сайт Вебдизайн Delphi Скачать игру Натуризм Карты Бесплатные шаблоны Курсовики Photoshop
Списоксерверов для хостингаперсональных веб сайтов. Приведена провереннаяинформация, позволяющая сравнивать качество предоставляемогохостинга — размер выделенного дискового пространства,разрешенный объем трафика, дополнительная рекламная нагрузка, варианты длязагрузки файлов (FTP или HTTP), почтовые сервисы, готовыешаблоны сайтов и т.д.
В разделе "Готовые шаблоны сайтов" представленобзор архивов с большим выбором готовых шаблонов веб сайтов. Вобзор включены шаблоны, выполненные с использованием различных технологий и наразличные тематики. Представленные шаблоны доступны для бесплатного (какправило) скачивания, так и для получения на платной основе (за небольшую плату10$ — 30$). [Готовыесайты]
geocities. yahoo.com- весьма удобный и качественный бесплатный и платныйхостинг. Выделяемый объем — 15Мбайт. Есть доступ по FTP. Редактор — Adv Basic. Реклама — Adsquare. АдресВашего сайта — /you. Дополнительные сервисы — RealVideo, RealAudio, POPmail,GuestBook, MailForm Counter.
www.holm.ru- бесплатный и платный хостинг. Выделяемый объем — неограничен. Есть доступ по FTP. Доступны серверные логи. Доменное имятретьего уровня ваш_домен. holm.ru Реклама — банер. Дополнительные сервисы — cgiскрипты, SSI, Perl, PHP4, MySQL,
www.hostultra.com- бесплатный и платный (от 5$) хостинг. Выделяемый объем — 999 Мбайт. Есть доступ по FTP.Редактор — Adv Basic. Реклама — Banner. Адрес Вашего сайта — /~you. Дополнительныесервисы — Unlimited Bandwidth, Unlimited Webspace, Domain Hosting, PHP, FTP.
www.hut.ru- бесплатный хостинг.Выделяемый объем — не ограничен. Есть доступ по FTP. АдресВашего сайта — /state/you. Дополнительные сервисы — PHP-скрипты, cgi-скрипты, MySql, доступ к файлу. htaccess, SSI, доступ клог-файлам, форум и гостевая книга.
www.joinme.net- бесплатный хостинг.Выделяемый объем — 5 Мбайт. Есть доступ по FTP. Редактор — Adv Basic. Реклама- Banner. Адрес Вашего сайта — /you.Дополнительные сервисы — online web-page creation tools,guestbook, Bulletin Board, additional space available upon request.
www.justfree.com- бесплатный хостинг.Выделяемый объем — 40 Мбайт. Есть доступ по FTP. Без рекламы. АдресВашего сайта — /you. Дополнительные сервисы — UnlimitedBandwidth, Free Support, Free Guestbook, Free Forum, E-Z File Manager, FreeEmail.
www.megspace.com- бесплатный хостинг.Выделяемый объем — 50 Мбайт. Есть доступ по FTP. Редактор — Adv Basic. Реклама — Banner. Адрес Вашего сайта — /dir/you. Дополнительныесервисы — Free Message Boards, Free Personal Guest Book, FreeSearch Engine Submissions, Free Easy to Use Upload Manager, Free Form Mailer,Free Site Builder, Fast Servers.
narod. yandex.ru — бесплатный хостинг.Выделяемый объем — 999 Мбайт. Есть доступ по FTP. Редактор — Adv Basic. Реклама- Banner. Адрес Вашего сайта — Subdomain. Дополнительные сервисы — почтовыйящик, шаблоны сайтов, статистика посещений, гостевая книга, форум.
www.owns1.com- бесплатный хостинг.Выделяемый объем — 100 Мбайт. Загрузка файлов через FTP. Редактор — AdvBasic. Реклама — Topbanner. Адрес Вашего сайта — Subdomain. Дополнительныесервисы — Free Frontpage extensions, php, cgi, mysql, control panels.
redrival.com — бесплатный хостинг. Выделяемыйобъем — 2 Мбайт. Есть доступ по FTP. Редактор — Adv Basic. Реклама — Popup. АдресВашего сайта — /you. Дополнительные сервисы — PHP 5, SQLite Databases, SSI/XSSIScripting, Email Address, Advertising Supported.
www.sitepalace.com- бесплатный хостинг.Выделяемый объем — 10 Мбайт. Загрузка через HTTP. Редактор — Adv Basic. Реклама- Popup. Адрес Вашего сайта — /you. Дополнительные сервисы — Unlimited Transfer, Unlimited Hits, Page Counter, FREE Submissionto 300+ Search Engines.
www.spaceports.com- бесплатный хостинг.Выделяемый объем — 10 Мбайт. Есть доступ по FTP. Реклама — Banner. АдресВашего сайта — /~you. Дополнительные сервисы — CGI-BIN, MailForm, PHP scripting, MySQL database support.
www.stormloader.com- бесплатный хостинг.Выделяемый объем — 50 Мбайт. Загрузкафайлов — Browser. Реклама — Topbanner.Адрес Вашего сайта — /you. Дополнительные сервисы — Page Building Tools, Unmetered Bandwidth.
Заключение
В этом проекте был рассмотрен язык разметки гипертекстовыхдокументов HTML, его основные функции свойства и параметры. Сегодня применениеHTML практикуется во всех без исключения электронных документах, независимо оттематики, величины и коммерческой направленности Интернет проекта.
В данной работе такие технологии, как CSS JavaScript, былизатронуты лишь поверхностно дабы показать эффективность совокупностииспользования HTML с интерактивными скриптовыми технологиями. Использованиепоследних является отдельной темой, подходящей для отдельного проекта.
Список используемой литературы
1. Айзекс А. Dynamic HTMLBHV-Санкт-Петербург 1998
2. Ганчаров А. Самоучитель HTML. Питер2000
3. Дарнелл Р.html 4 Энциклопедияпользователя ДиаСофт 1999
4. Денисов Internet Explorer 5 СправочникПитер 1999
5. Хоумер А. Dynamic HTML СправочникПитер 1999
6. Петюшкин А.В., HTML. Экспресс-курс.- СПб.: БХВ — Петербург, 2003
7. Кингсли-Хью Э., JavaScript: учебныйкурс. — СПб.: Питер, 2002
8. www.robotland.ru/