Создание сайта-визитки кафедры Телематика

Размещено на http://www.allbest.ru/

Министерство образования и науки Кыргызской Республики

Кыргызский Государственный Технический Университет им. И. Раззакова

Кыргызско-Германский Технический Факультет

Кафедра Телематика

Курсовой проект по дисциплине

Интернет-программирование

Создание сайта-визитки кафедры Телематика

Сдала: студентка гр. Тг-1-08

Жайнакова Алтынай

Приняла:

Султангазиева Р.Т.

Бишкек 2012



Введение

1. HTML, DHTML

2. Листинг сайта-визитки кафедры Телематика

3. Каскадная таблица стилей СSS

4. Листинг СSS

5. Язык сценариев JavaScript

Заключение



Введение

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

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

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

Как следует из названия, программы на клиентских языках обрабатываются на стороне пользователя, как правило их выполняет браузер. Это и создает главную проблему клиентских языков -- результат выполнения программы (скрипта) зависит от браузера пользователя. То есть если пользователь запретил выполнять клиентские программы, то они исполняться не будут, как бы ни желал этого программист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выполняться по-разному. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагрузку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы. Самыми распространенными клиентскими языками программирования являются:

· JavaScript

· VBScript

· ActionScript

На серверном языке, когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, Perl, SSI, XML, DHTML, XHTML.

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

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

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



1. HTML, DHTML

HTML - язык гипертекстовой разметки. Развитие html началось в 1989 году, когда выпускник Оксфордского университета Тим Бернерс-Ли выдвинул предложение о создании Системы гиппертекстовых документов. В 1993 году появилась первая версия языка. Сегодняшним стандартом является HTML 4.0.1.

В 1994 году html был разбит на уровни. Было выделено 4 уровня.

o Уровень 0: включает в себя заголовки, ссылки, списки.

o Уровень 1: добавляются рисунки и элементы выделения текста.

o Уровень 2: добавляются формы, позволяющие пользователю вводить информацию.

o Уровень 3: добавляются таблицы.

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

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

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

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).

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

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

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.

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

2. Листинг сайта-визитки кафедры Телематика

<html>

<head><!-- заголовок-->

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><!--с помощью этого тега МЕТА браузер понимает кодировку документа-->

<title>Кафедра Телематика</title><!--название документа-->

<meta name="keywords" content="кафедра,телематика"><!--задает ключевые слова, которые будут выхватывать поисковые машины -->

<link href="css/style.css" rel="stylesheet" type="text/css"><!--устанавливает связи с другими элементами-->

</head>

<body><!--тело документа-->

<table width="750" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<!-- таблица-->

<tr><!--начало строки-->

<td height="1" valign="top"><div style="position:absolute; top:43px; margin-left:1px; width:300px"><!--начало столбца-->

<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td class="c_name">Кафедра&nbsp<strong>Телематика</strong><!--начало столбца--></td><!--конец столбца-->

</tr><!--конец строки-->

</table><!--конец таблицы-->

</div>

<div style="position:absolute; top:25px; margin-left:590px; width:160px">

<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td class="search"><strong>ПОИСК</strong><!--начало столбца--></td><!--конец столбца-->

<td>&nbsp;</td><!--неразрывный пробел-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td width="130"><input name="textfield" type="text" class="login-form" value=""></td>

<td><a href=""><!--поле поисковика-->

<input name="image" type="image" src="images/btn-ok.gif" alt="Go" width="20" height="20" border="0"><!--кнопка ок-->

</a></td>

</tr><!--конец строки-->

</table><!--конец таблицы-->

</div>

<img src="images/iages.jpeg" width="200" height="150"><img src="images/defaut.jpeg" width="200" height="150">

<img src="images/default.jpeg" width="200" height="150"><img src="images/imges.jpeg" width="200" height="150"></td><!--вставка картинок баннера-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="100%"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td width="187" height="100%"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td class="s-menu-head">Сведения<!--начало столбца--></</td><!--конец столбца-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td><img src="images/spacer.gif" width="187" height="2"></td>

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="100%"><table width="100%" height="100%" cellpadding="0" cellspacing="0" style="border:solid;border-width:1px; color:#CCCCCC"><!--начало таблицы-->

<tr><!--начало строки-->

<td height="1"><img src="images/spacer.gif" width="1" height="5"></td>

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Кадровый состав кафедры</a></td><!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Учебный план</a></td><!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Рабочие программы</a></td><!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Лаборатории кафедры</a></td><!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Международные партнеры</a></td><!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Выпускники</a></td>
<!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1" class="sub"><a href="ссылки.htm" class="sub_lnk">Достижения</a></td>
<!--ссылка-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td>&nbsp;</td><!--неразрывный пробел-->

</tr><!--конец строки-->

</table></td></tr><!--конец таблицы-->

<tr><!--начало строки-->

<td><img src="images/spacer.gif" width="187" height="2"></td>

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

<td width="1"><img src="images/spacer.gif" width="8" height="8"></td>

<td valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td height="1"><table width="100%" border="0" cellspacing="0" cellpadding="0"><!--начало столбца-->

<tr><!--начало строки-->

<td class="menu"><a href="ссылки.htm" class="menu_lnk">Главная</a></td><!--ссылка-->

<td width="1"><img src="images/menu-sep.gif" width="1" height="30"></td>

<td class="menu"><a href="ссылки.htm" class="menu_lnk">О нас</a></td><!--ссылка-->

<td width="1"><img src="images/menu-sep.gif" width="1" height="30"></td>

<td class="menu"><a href="ссылки.htm" class="menu_lnk">Учебный план</a></td><!--ссылка-->

<td width="1"><img src="images/menu-sep.gif" width="1" height="30"></td>

<td class="menu"><a href="ссылки.htm" class="menu_lnk">Фотографии</a></td><!--ссылка-->

<td width="1"><img src="images/menu-sep.gif" width="1" height="30"></td>

<td class="menu"><a href="ссылки.htm" class="menu_lnk">Контакты</a></td><!--ссылка-->

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="100%" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><!--начало таблицы-->

<tr><!--начало строки-->

<td height="100%" class="body_txt"><h1>История кафедры</h1><!--начало столбца-->

<p>Кафедра создана 1 сентября 2011 года.</p><!--текст имеет абзацные отступы-->

<p>Приказ Ученого Совета КГТУ им. И.Раззакова.</p>
<!--текст имеет абзацные отступы-->

<p>&nbsp;</p></td>

<td height="100%"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><!--начало столбца-->

<tr><!--начало строки-->

<td height="3"><img src="images/spacer.gif" width="1" height="2">
<!--начало столбца--></td><!--конец столбца-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="100%" bgcolor="#D4D4D4"></td><!--цвет фона-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td height="1"><img src="images/spacer.gif" width="1" height="2"></td>

</tr><!--начало строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#3c6499"><!--цвет фона-->

<tr><!--начало строки-->

<td class="bottom-menu"><a href="ссылки.htm">Главная</a> | <a href="ссылки.htm">О нас</a> | <a href="ссылки.htm">Учебный план</a> | <a href="ссылки.htm">Фотографии</a>
| <a href="ссылки.htm">Контакты</a></td><!--ссылки-->

</tr><!--конец строки-->

</table></td><!--конец таблицы-->

</tr><!--конец строки-->

<tr><!--начало строки-->

<td class="bottom_addr">&copy; 2012 Кыргызско-Германский Технический Факультет, Кафедра Телематика</td>

</tr><!--конец строки-->

</table><!--конец таблицы-->

</body>

</html>

6. Каскадная таблица стилей СSS

CSS - это язык стилей, определяющий отображение HTML-документов. CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бульшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

В чём разница между CSS и HTML?HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

Давным-давно, когда Tim Berners Lee изобрёл World Wide Web, язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

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

Появление CSS стало революцией в мире web-дизайна.

Конкретные преимущества CSS:

· управление отображением множества документов с помощью одной таблицы стилей;

· более точный контроль над внешним видом страниц;

· различные представления для разных носителей информации (экран, печать, и т. д.);

· сложная и проработанная техника дизайна.

4. Листинг СSS

body {

margin:0;

padding:0;

background:#ffffff;

}

p,td { font-family:Tahoma, Arial;

font-size:12px;

margin-top: 0px;

}

a{

color: #05306A;

text-decoration: underline;

}

a:hover{

color: #3C6499;

text-decoration: underline;

}

a.hidden {

text-decoration: none;

color: #000000;

cursor:default;

}

form {

margin:0;

padding:0;

}

ul {

margin-left:20px;

margin-top:0px;

padding:1px;

list-style-type: square;

line-height: 16px;

}

h1 {

font-size: 14px;

font-weight: bold;

color: #000000;

margin: 0px;

padding-bottom: 5px;

text-transform: uppercase;

font-family: Arial, Helvetica, sans-serif;

}

.bgy {

background-repeat: repeat-y;

}

.bottom_addr {

font-size: 10px;

color: #000000;

padding-top: 10px;

padding-bottom: 12px;

text-align: center;

}

.bottom_addr_lnk {

text-decoration: none;

}

.bottom_addr_lnk:hover {

text-decoration: underline;

}

.bgx {

background-repeat: repeat-x;

}

.norepeat {

background-repeat: no-repeat;

}

.c_name {

font-size: 18px;

font-weight: normal;

text-transform: uppercase;

color:blue;

background-repeat: repeat;

font-family: Arial, Helvetica, sans-serif;

}

.bottom-menu {

color: #FFFFFF;

text-align: center;

padding-top: 4px;

padding-bottom: 4px;

border: 1px solid #d4d4d4;

font-size: 11px;

}

.bottom-menu a {

color: #FFFFFF;

text-decoration: none;

}

.bottom-menu a:hover {

color: #A6C0D9;

text-decoration: underline;

}

.s-menu-head {

background-image: url(../images/s-menu-header.gif);

background-repeat: repeat-x;

text-transform: uppercase;

color: #FFFFFF;

border: 1px solid #4771aa;

font-weight: bold;

text-align: left;

padding-top: 7px;

padding-bottom: 6px;

padding-left: 20px;

font-size: 11px;

}

.menu {

color: #345786;

background-image: url(../images/menu-bg.gif);

background-repeat: repeat-x;

font-weight: bold;

white-space: nowrap;

font-family: Tahoma, Arial;

text-align: center;

font-size: 11px;

}

.menu_lnk{

text-decoration: none;

color: #345786;

}

.menu_lnk:hover {

color: #577AAA;

text-decoration: none;

}

.sub {

color: #000000;

text-transform: none;

vertical-align: top;

padding-right: 5px;

background-image: url(../images/s-menu-bg.gif);

background-repeat: no-repeat;

text-align: left;

padding-left: 34px;

padding-top: 2px;

padding-bottom: 4px;

font-size: 11px;

}

.search {

vertical-align: bottom;

color: blue;

font-size: 11px;

}

.sub_lnk{

color: #000000;

text-decoration: none;

}

.sub_lnk:hover {

color: #3A6296;

text-decoration: none;

}

.body_txt {

color: #000000;

text-align: justify;

padding: 10px;

vertical-align: top;

font-family: Tahoma, Arial;

}

.login-form {

height: 20px;

width: 123px;

font-size: 11px;

padding-top: 3px;

padding-left: 1px;

border: 1px solid #d4d4d4;

}



5. Язык сценариев Java Script

Язык программирования JavaScript разработан фирмой Netscape в сотрудничестве с Sun Microsystems и предназначен для создания интерактивных HTML-документов. Основные области использования JavaScript таковы:

* создание динамических страниц, т. е. страниц, содержимое которых может меняться после загрузки документа;

* проверка правильности заполнения пользователем форм до пересылки их на сервер;

* решение "локальных" задач с помощью сценариев и некоторые другие сферы.

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

Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web ( Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко.

Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScript можно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использование JavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.

Прежде всего, необходимо узнать, как добавить сценарий JavaScript на страницу HTML. Это можно сделать одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script.

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



Заключение

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

Размещено на Allbest.ru