Разработка web сайта на основе HTML с использованием JavaScript

Автор работы: Пользователь скрыл имя, 23 Апреля 2013 в 08:20, курсовая работа

Краткое описание

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

Содержание

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

Скачать полностью (446.44 Кб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

А Руденко Курсовая.docx

— 474.76 Кб (Скачать документ)

<META content="" name=Description>

<META content="" name=Keywords>

<META content=Nikolay name=Author>

 

<SCRIPT language=JavaScript1.2

src="search/search.js"></SCRIPT>

 

<SCRIPT language=JavaScript1.2

src="search/searchEngine.js"></SCRIPT>

 

<STYLE>

p,span,form,input,hr,textarea{

font-family: Tahoma, Verdana, Arial, Sans serif;

font-size: 11px;

margin: 0px;padding: 0px;

vertical-align: middle;

}

.vmarg{margin-top:4px;}

.hmarg{margin-left:5px;margin-right:5px;}

.userData {BEHAVIOR: url(newhome0.htm)}

img {margin: 0px;padding: 0px;}

.checkbox{border:none;width:17px;height: 11px;vertical-align: middle;text-align: left;margin:2px;}

 

.b{font-weight:bold;}

.select{height: 21px; vertical-align:top;border:#A2B1C9 1px solid;background-color: #FFFFFF;}

.button{height: 21px; vertical-align:top; font-family: Verdana, Arial, Sans serif; font-size:10px;}

.but{height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:10px;}

input,textarea{border:#A2B1C9 1px solid;height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:11px;}

 

.head{background-color: #084D6C;}

.height1{height: 1px;}

.headline{background: #A7C1DD; padding: 0px; margin-top:2px;margin-bottom:2px;}

.headline_m{padding: 0px; margin:0px;}

.headline1{text-align: left; color: #FFFFFF;  font-weight: bold; margin: 2px; margin-left:3px;}

.text{text-align:justify;padding: 2px; margin: 2px; color: #26486E;}

a{text-decoration:none;}

a:hover {text-decoration:none;}

 

a.nav{color:#FFFFFF;}

a.nav:hover{color:#FF0000;}

a.copyr:visited{color:#074C6B;text-decoration:none;}

a.copyr:hover{color:#074C6B;text-decoration:underline;}

a.copyr{color:#074C6B;}

 

 

.w{color:#FFFFFF;}

.r{color:#FF0000;}

 

a.podrobnee{color: #AB7A2C; padding: 10px;}

a.podrobnee:hover{ text-decoration: underline; }

.mi1{padding: 4px; background-color: #5FA4DE;}

.mi{padding: 2px; background-color: #4D81BA; border-bottom: 1px solid White;  padding-left: 4px; }

.mi2{padding: 2px; padding-left: 4px; }

.mlink{padding: 0px; background-color: #529ADA;}

 

a.al{

color:#FFFFFF;

background-image:none;

width:181px;

height:43px;

text-align:left;

font-weight:bold;

padding: 2px 5px 0px 10px;

border-bottom: 1px solid #FFFFFF;

}

a.al:hover{color:#771C00; background-image:url(but_on00.gif); height:43px; width:180px;}

 

.ramka{margin: 3px; border: 1px solid #A2B1C9; background-color: #3273bb; text-align: center;}

.copyright{margin-left: 5px; color:#FFFFFF;}

div.win{

overflow: scroll;

overflow-x: hidden;

scrollbar-face-color: #306CAD;

scrollbar-shadow-color: #A7C1DD;

scrollbar-highlight-color: #A7C1DD;

scrollbar-3dlight-color: #306CAD;

scrollbar-darkshadow-color: #306CAD;

scrollbar-track-color: #ffffff;

scrollbar-arrow-color: #ffffff;

}

 

body{

scrollbar-face-color: #306CAD;

scrollbar-shadow-color: #A7C1DD;

scrollbar-highlight-color: #A7C1DD;

scrollbar-3dlight-color: #306CAD;

scrollbar-darkshadow-color: #306CAD;

scrollbar-track-color: #ffffff;

scrollbar-arrow-color: #ffffff;

}

</STYLE>

 

</head>

<body aLink=#006699 link=#000066 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" text="black" vlink="purple"   style="skrolling:no">

<table align=center border=0 bordercolor=black      border="0" cellspacing="0" cellpadding="0">

<tr>

  <td colspan=3>

   <table  background="img\fon1.gif"  border=0 >

    <tr >

    <td><img src="img\admin.jpg">&nbsp;</td>

    <td width="100%" align=center>  <img src="img\adnin1.gif" align=center> &nbsp;</td>

    <td ><img src="img\flag1.gif" align=right>&nbsp;</td>

    </table>

  </td>

</tr>

<tr>

  <td colspan=3 height="7" ></td>

</tr>

 

<tr>

  <td colspan=3 background="img\fon4.gif" height="24">&nbsp;</td>

</tr>

<tr>

  <td colspan=3 height="7" ></td>

</tr>

<tr>

  <td background="img\fon1.gif" width="10" valign="top">

   <a href=index.htm > <img src="img\home.gif" border=0></a><br>

   <a href=01.htm ><img src="img\hystor.gif" border=0></a><br>

   <a href=02.htm ><img src="img\peopls.gif" border=0></a><br>

   <a href=03.htm ><img src="img\model.gif" border=0></a><br>

   <a href=04.htm ><img src="img\obraz.gif" border=0></a><br>

   <a href=05.htm ><img src="img\sou.gif" border=0></a><br>

   <a href=06.htm ><img src="img\kontak.gif"border=0></a><br>

  </td>

  <td  width="65%" valign="top" height="890" bgcolor="#FAF8F8">

 

   <table width="100%">

    

    <tr class="ramka">

    

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

    </tr>

    <tr>

     <td><P id=sR align=justify>&nbsp;</td>

    </tr>

   </table>                     

  </td>

  </td>

  <td  height="100%" valign="top">

   <table    class="ramka" width="182" border="0" cellspacing="0" cellpadding="2" >

    <tr height="18" align="right" >

     <td valign="middle" width="100%" background="grad.gif" height="18"><p class="headline1">Опрос</p></td>      

    </tr>

    <tr>

     <td colspan="3" bgcolor="#ffffff" height="200" >

      <div id="winnews"  style="height:350;" >&nbsp;</p></div></td>

    </tr>

 

 

 

<table    class="ramka" width="182" border="0" cellspacing="0" cellpadding="2">

<tr height="18" >

<td valign="middle" width="100%"  height="18"><p class="headline1">Найти</p></td>

<td width="18" height="1"  height="18"></td>

</tr>

<tr>

<td height="100" colspan="2" bgcolor="#ffffff" >

<table border="0" cellpadding="0" cellspacing="0">

<div align="center"><center>

  <FORM name=searchform onsubmit="find();return false;"> <TBODY>

  <tr><td nowrap><p>Поиск по сайту</p><p><input  style="width:143px"  size="11" value=""    name=searchbox maxlenght="100"></p><p align="right"><input onclick=find(); type="button"   value="Найти"></p></td></tr>

 <tr>

</td>

</tr>

</table>

   </table>

  </td>

</tr>

<tr>

  <td colspan=3 height="7" ></td>

</tr>

<tr>

  <td colspan=3 background="img\fon4.gif" height="24">&nbsp;</td>

</tr>

<tr>

  <td colspan=3 height="100"></td>

 </tr>

</table>

 

 

 

 

 

Листинг скриптов:

    1. search.js

<!--

 

function info(name,link,info) {

this.name=name;

this.link=link;

this.info=info;

}

 

var searchInfo=new Array();

searchInfo[0]=new info("Главная","index.htm","20.12 Игра Самый умный 6-7 классы  25.12 КВН  27.12 Конференция по борьбе  против зависимостей  20.01 Сбор  макулатуры (собрано 4 тонны)   11.02 Выборы президента совета  школы В дальнейшем планируется        14.02 День Святого Валентина        В программе:           - концерт           - дискотека          - работа почты влюблённых  19.02 Смотр строя и песни  22.02 Игра Рыцарский турнир 5 7 классы  26.02 День семьи   ");

searchInfo[1]=new info("история   1969 1977","01_1.htm","I этап – становления, 1969 – 1977 годы, создание единого коллектива <br>педагогов,  учащихся, родителей. Сформировались  прочные традиции в эстетическом  направлении образования, сложились  творческие коллективы:<br> хор  учащихся, ансамбль педагогов, школьный <br>театр, которые имели успех  не только в районных конкурсах,  но и  городских. Как отмечали  учителя школ  № 22, 28 , где продолжали  обучение дети, выпускники школы-  восьмилетки № 100 отличались жизнерадостностью  и взаимопониманием.");

searchInfo[2]=new info("История   1977 1997","01_2.htm","II этап – функционирования, в 1978 году школа приобрела статус  средней общеобразовательной.\ Это  привело к дальнейшему развитию  её потенциала, коллектив учителей  пополнился новыми талантливыми  педагогами, имеющими опыт работы  в средней школе.\ Контингент учащихся  определила специфическая социальная  среда.\ В основном это были  на 65% семьи рабочих второго поколения  уралмашевцев и 35% семьи ИТР  и интеллигенции. \ В тот период  большинство родителей связывали  судьбу своих детей с заводом  и стремились дать им среднее   или высшее техническое образование.\ Поэтому в школе традиционно  огромное значение придавалось  точным наукам.\В 1988 – 1989 г.г.  школа вступила в полосу кризиса,  в котором находилась вся советская  система.\ Были утрачены былые  ценностные ориентиры, которые  стали подменяться ценностями  материального обогащения любой  ценой. \ Наряду с этим, постепенно  начались процессы пробуждения  и роста общественного самосознания.\ В 90-е годы XX века изменились  целевые ориентиры нашего государства.\ Общество обращается к признанию  позиции социальных групп и  прав конкретного человека.\ Этим  обусловлен следующий этап развития  школы.\ В 1988 – 1989 г.г. школа  вступила в полосу кризиса,  в котором находилась вся советская  система.\ Были утрачены былые  ценностные ориентиры, которые  стали подменяться ценностями  материального обогащения любой  ценой.\ Наряду с этим, постепенно  начались процессы пробуждения  и роста общественного самосознания. \В 90-е годы XX века изменились  целевые ориентиры нашего государства. \Общество обращается к признанию  позиции социальных групп и  прав конкретного человека.\ Этим  обусловлен следующий этап развития  школы.\ II этап – поиска идей  обеспечения прав личности в  образовательном процессе через  дифференциацию в обучении.\ В  1992 году принята I программа развития  школы.\ Деятельность педагогического  коллектива была направлена на  обеспечение условий для становления  ученика как личности, с разным  уровнем способностей и потребностей, для реабилитации отстающих и  предоставления возможности продвинутого  обучения тем, кто способен  учиться с опережением. В период  до 1995 года была проведена жёсткая  дифференциация по уровню обученности,  созданы гомогенные классы: классы  коррекционно-развивающие, компенсирующие. Математической и гуманитарной  направленности, развивающего обучения  по системе Эльконина Д.Б. и  Давыдова В.В.\Однако впоследствии  мы отказались от ранней жёсткой  дифференциации, сохранив лишь специальные  коррекционные классы для детей  с задержкой психического развития. Так как в гомогенном классе  ограничиваются возможности развития  личности.\В 1996 году была разработана  новая концепция и программа  развития школы, где ведущей  идеей стала идея адаптивного  дифференцированного обучения. Особое  внимание в этот период педагогический  коллектив уделял конструированию  урока в зависимости от склонностей,  возможностей и способностей  детей в классах смешанного типа. Осуществлялся поиск различных форм и методов обучения для максимального развития каждого ребёнка, апробировались в начальном и среднем звене технологии развивающего обучения. Была начата работа по освоению программы углублённого изучения математики и созданию УМК для классов гуманитарной направленности на завершающей стадии основной школы.\В 1997 году поступил заказ родителей будущих десятиклассников на открытие подготовительных курсов в ВУЗ на базе школы и был заключён договор с УГТУ-УПИ. \Данный этап развития школы характеризуется бурным ростом педагогического мастерства учителей. Методическая работа способствовала становлению статуса педагога как субъекта образовательного процесса, поскольку было направленно не только на повышение теоретических знаний  и методических умений, но и на развитие самостоятельности, ответственности, рефлексивности (способности осмысливать свои действия, самопознание). ");

searchInfo[3]=new info("История   1998-2002","01_3.htm","В  1998 – 1999 г.г. школа прошла процесс  лицензирования и аттестации.\ Основные  виды услуг зафиксированы в  лицензии, и школа получила право  на образовательную деятельность  по программам углублённого изучения  математики, коррекционным образовательным  программам, наряду с общеобразовательными  программами обучения.\Учитывая  социальный заказ родителей и  учащихся, в 2000 году был заключён  договор с УГПУ на создание  подготовительных курсов для  классов гуманитарной направленности (9 – 11 кл.), в перспективе планируется  совместная работа с УрГСХА (открытие  профильных сельскохозяйственных 10 классов).\ Таким образом, в деятельности  образовательного учреждения за  эти годы произошли серьёзные  целевые, содержательные, организационно-методические  и управленческие изменения, на  анализе которых мы остановимся  ниже, и проводимые нами социологические  исследования подтверждают наше  предположение о том, что на  пути традиционного, негуманного  подхода к растущей личности  не могутнаступить качественные  изменения в системе образования,  в том числе в работе нашей  школы, благодаря которым достигался  бы главный результат – воспитание  свободной и ответственной, духовно  и нравственно развитой личности.\Решение  столь важной задачи возможно, по нашему убеждению, в учебном  заведении, переведённого из условий  стабильного функционирования в  развивающиеся, работа которого  направлена на развитие личности  ребёнка в процессе духовного  взаимодействия с постоянно совершенствующейся  личностью взрослого.");

searchInfo[4]=new info("Дополнительное образование","04.htm"," В школе действует 18 детских  объединений   по следующим  направлениям :     - спортивное    - художественно-эстетическое     - Прикладное (театр модница затейливый  крючок,       сделай  сам, юный редактор и юнный  оформитель)     - проедметные  (эколлогия урала литертура урала       занимательный французский логика  речь )    - развивающие кружки (МДО) ");

searchInfo[5]=new info("Дополнительное образование   Кружки","04_1.htm","Театр Юный  программист Танцы Хор ");

searchInfo[6]=new info("Дополнительное образование   Секции","04_2.htm","Волейбол  Баскетбол Каратэ Киокушинкай  ОФП ");

searchInfo[7]=new info("Дополнительное образование   Платные услуги","04_4.htm","Эти  занятия с удовольствием посещают  дети с 3 по 6 класс.\ На уроках  они осваивают азы компьютерной  грамотности. \Информатика помогает  им развивать внимательность  сосредоточенность, память и мышление.\ Ребята узнают , как возникают  ошибки, как их предотвращать и разыскивать.\ Но самое главное : «Информатика учит их учиться!»");

Информация о работе Разработка web сайта на основе HTML с использованием JavaScript