. , , ,

,,,

,

" "

" "

2010

" " " ".

. " " .

i

" " " ".

. " " .


1. HTML

2. CSS

3. JavaScript

4.

5.

6.


- - , , , , , .

, , . , . , , , , .. , .

- , , .

, , . .

, , , , . , , . , .


1. HTML

HTML (Hyper Text Markup Language) . - , World Wide Web (WWW) . HTML , World Wide Web. HTML :

           ,

           ,

           Internet.

           JavaScript VBScript.

           , Flash-

HTML , ( ) . Web ( web-, , Internet Explorer, Mozilla, Netscape Opera), . HTML htm html. .

HTML SGML (Standard Generalized Markup Language), . . HTML. , , , ; . HTML : . , , , , , , . , . HTML , (). , , L , SII-, L- (). HTML SGML, : , . L- , , . L- , .

2. CSS

Web- HTML- . Web- . , , HTML-. HTML-. : , . HTML- . . HTML : . , . , . CERN NEXT WWWC HTML-. . JavaScript. HTML-. JavaScript . CSS HTML-. , , . , , . CSS . HTML-, CSS- . CSS .

3. JavaScript

, , . World Wide Web Internet, , , . , Web. Web . -, , ( <A>). -, , (, , ..). , . HTML-, . " " . Web , "-". , . 1995 Netscape , JavaScript. , JavaScript Web . , JavaScript . Liveware, JavaScript, Netscape. JavaScript . JavaScript HTML- HTML- . . , , , , . "JavaScript" Sun Microsystems. , Microsoft, JScript. JScript ( , ) JavaScript, .. JavaScript JScript. JavaScript . JavaScript Java, JavaScript; Java, JavaScript . : Java JavaScript , . Netscape ECMA (European Computer Manufacturers Association ). ECMAScript ECMA-262. ( 1997 .) JavaScript 1.1. 2008 ( 1999 ), , , , try/catch, , . .

4.

(, -) - , - . .

- - . FTP-. , . - -, - . , , , : Internet Explorer, Opera, Firefox.

5.

. - index.html (. 5.1).

. 5.1.


. , . , .

. 5.2.

(. 5.3) (. 5.4).

. 5.3.


. 5.4.

" ", , (. 5.5).

. 5.5.

" " :


:

6.

: html ( , Visual Studio) Anime.html( ). :

1) :


var news = ["!!! , , ' '"];

2) "" , html , . title , .

<div id="mi0">

<h3 onmousedown="accordeon(0)"></h3><ul id="lister0">

<li> <a href="lekcii/Lekcia1_Fin.htm" title=" 1" target="_self">1.. . </a></li>

</ul>

</div>

3) , <h3></h3>.

<h3> - ()</h3>

1) , <h4> , <p>.

<h4>:</h4>

<p> ..</p>


2) <h4>,<p>.

<h4> .</h4>

<p> </p>

<h2>. :</h2>

<p><input type="checkbox" id="choice41"/> <label for="choice41"> 1</label></p>

<p><input type="checkbox" id="choice42"/> <label for="choice42"> 2</label></p>

<p><input type="checkbox"id="choice43" /> <label for="choice43"> 3</label></p>

<p><input type="checkbox "id="choice44"/> <label for="choice44"> 4</label></p>

:

<h2>>. :</h2>

<p><input type="text" size="20" maxlength="20" id="text7" /></p>

. showResults().

:

if(document.getElementById('choice12').checked == true)

{

i++;

}


choice, , .

:

if((document.getElementById('choice41').checked == true) &&

(document.getElementById('choice42').checked == false) &&

(document.getElementById('choice43').checked == true) &&

(document.getElementById('choice44').checked == false))

{

i++;

}

choice true false, .

:

if(document.getElementById('textX').value == '')

{

i++;

}

getHelp() .


. , . .

, , .

, .


1. . , . , . . . - . - , 1999 398.

2. / .. .: , 2003. 604.

3. .. , .., . . .:,1996.392.

4 . . / . . .: , 2005. 671 .

5. .., / .. , .. . : , 2003. 176 .

6. . 2. /. . 2002, ISBN 5-86404-170-X http://compression.graphicon.ru/


// (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title></title>

<style type="text/css">

#ww {background-color:Blue!important; color: White!important; border:none!important;

font-size:larger;

font-family:Arial;}

<style type="text/css">

body { background-color:#999999;

color:#000000;

font-size:14px;

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

padding-top:0px;

margin-top:0px;}

#fhead{background-color: Blue;

margin-top:15px;

margin-left:5px;

margin-right:5px;

margin-bottom:10px;}

#fhead2{ height:60px;}

h3{color:#ffffff;

background-color:Blue;

text-align:left;

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

font-weight:200;

border:1px solid black;

cursor:pointer;

padding-left:10px;

margin-top:3px;

margin-bottom:3px;}

h4{color:#ffffff;

background-color:#000000;

font-weight:lighter;

text-align:left;

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

padding-left:30px;

border:1px solid black;}

#left{background-color:333333;

width:300px;

padding-top:0px;}

#right{background-color:#333333;

padding-top:0px;

margin-right:5px;}

tableh3{font-weight:200;

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

font-size:16px;}

td{background-color:#333333;}

ul{cursor:pointer;

list-style-type:none;

margin-left:20px;

margin-top:10px;

margin-bottom:10px;

padding-left:0px;}

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

cursor:pointer;

font-size:16px;

margin-top:0px;

margin-bottom:0px;}

#left a{text-decoration:none;

color:#FFFFFF;}

#left a:hover {color:#FFFF00;

font-weight:800;}

#right a{text-decoration:none;

color:#FFFF00;}

#right a:hover {color:#0000ff;}

p{color:#FFFFFF;

text-indent:0em;

padding-left:30px;

padding-right:10px;

padding-top:4px;

padding-bottom:4px;

text-align:justify;}

#scripture{text-align:right;

font-family:"Times New Roman", Times, serif;}

span {font-size:14px;

font-style:italic;

font-weight:bold;}

#warning{color:#FF0000;

text-decoration:underline;

font-size:20px;

text-align:center;}

#inter p{margin-left:20px;

margin-right:10px;

margin-top:10px;

margin-bottom:10px;

padding-left:10px;

padding-right:10px;

font-size:16px;

color:#FFFFFF;}

#mi0 ul, #mi1 ul, #mi2 ul, #mi3 ul {display:none;}

</style>

</head>

<body>

<div id="fhead">

<div style="height:60px;" title="Menu Variator">&nbsp;

<form name="newsform"><input type="text" maxlength="1000" size="50" name="runString" id="ww" onmouseover="stoper()" onmouseout="starter()" /></form>

<script type="text/javascript">

var news = [' '"];

var str=""

var content="";

var count = 0;

var maxSymbols =document.forms["newsform"].elements["runString"].size;

function selections(){

str = news[Math.floor(Math.random()*news.length)];

}

selections();

function runner()

{

content += str.charAt(count);

if (content.length<=maxSymbols){

document.forms["newsform"].elements["runString"].value = content;

document.forms["newsform"].elements["runString"].style.textAlign = "right";}

else{

content = content.substr(content.length-maxSymbols,content.length);

document.forms["newsform"].elements["runString"].value = content;

document.forms["newsform"].elements["runString"].style.textAlign = "right";}

if (count==str.length)

{count=0; content=""; selections();}

else

{count++;}

}

var codeTimer = setInterval("runner()", 150);

function stoper()

{

clearInterval(codeTimer);

}

function starter()

{

codeTimer = setInterval("runner()", 150)

}

</script>

</div>

</div>

<table border="0" width="100%" cellspacing="5">

<tr><td valign="top" width="200px">

<div id="left">

<div id="mi0">

<h3 onmousedown="accordeon(0)"></h3><ul id="lister0">

<li><a href="lekcii/Lekcia1_Fin.htm" title=" 1" target="_self">1.. . </a></li>

<li><a href="lekcii/Lekcia2_Fin.htm" title=" 2" target="_self">2. </a></li>

<li><a href= "lekcii/Lekcia3_Fin.htm" title=" 3" target="_self">3. . .</a></li>

<li><a href="lekcii/Lekcia4_Fin.htm" title=" 4" target="_self">4. .</a></li>

<li><a href="lekcii/Lekcia5_Fin.htm" title=" 5" target="_self">5. . . </a></li>

<li><a href="lekcii/Lekcia6_Fin.htm" title=" 6" target="_self">6. ().</a></li>

<li><a href="lekcii/Lekcia7_Fin.htm" title=" 7" target="_self">7. .</a></li>

<li><a href="lekcii/Lekcia8_Fin.htm" title=" 8" target="_self">8. .</a></li>

<li><a href="lekcii/lekcia9_fin.htm" title=" 9" target="_self">9. .</a></li>

<li><a href="lekcii/Lekcia10_fin.htm" title=" 10" target="_self">10. . .</a></li>

<li><a href="lekcii/Lekcia11_fin.htm" title=" 11" target="_self">11. .</a></li>

<li><a href="lekcii/Lekcia12_fin.htm" title=" 12" target="_self">12. .</a></li>

<li><a href="lekcii/lect13.htm" title=" 13" target="_self">13.-. . .</a></li>

<li><a href="lekcii/lect14-.htm" title=" 15" target="_self">14. -.</a></li>

<li><a href="lekcii/lect15.htm" title=" 16" target="_self">15. -.</a></li>

<li><a href="" title=" 16" target="_self">16.- . </a></li>

<li><a href="lekcii/lect17.htm" title=" 17" target="_self">17. .</a></li>

<li><a href="" title=" 18" target="_self">18. .</a></li>

</ul>

</div>

<div id="mi1">

<h3 onmousedown="accordeon(1)"> </h3><ul id="lister1">

<li><a href="lab_zadania/laba1.htm" title=" 1" target="_self">1. .</a></li>

<li><a href="lab_zadania/laba2.htm" title=" 2" target="_self">2. '.</a></li>

<li><a href="lab_zadania/laba3.htm" title=" 3" target="_self">3. '</a></li>

<li><a href="lab_zadania/laba4.htm" title=" 4" target="_self">4. . .</a></li>

<li><a href="lab_zadania/laba5.htm" title=" 5" target="_self">5. . .</a></li>

<li><a href="lab_zadania/laba6.htm" title=" 6" target="_self">6. . .</a></li>

<li><a href="lab_zadania/laba7.htm" title=" 7" target="_self">7. .</a></li>

</div>

<div id="mi5">

<h3 onmousedown="accordeon(5)"> </h3><ul id="lister5">

<li><a href=" /Lab_1.htm" title=" 1" target="_self">1. .</a></li>

<li><a href=" /Lab_2.htm" title=" 2" target="_self">2. '.</a></li>

<li><a href=" /Lab_3.htm" title=" 3" target="_self">3. '</a></li>

<li><a href=" /Lab_4.htm" title=" 4" target="_self">4. . .</a></li>

<li><a href=" /Lab_5.htm" title=" 5" target="_self">5. . .</a></li>

<li><a href=" /Lab_6.htm" title=" 6" target="_self">6. . .</a></li>

<li><a href=" /Lab_7.htm" title=" 7" target="_self">7. .</a></li>

</div>

<div id="mi2">

<h3 onmousedown="accordeon(2)">SciLab</h3><ul id="lister2">

<li><a href= "opisanie.htm"title="" target="_self"> </a></li>

<li><a href= "ssilki dlia zagruzki.htm"title="" target="_self"> </a></li>

<li><a href= "spravochnic.htm"title="" target="_self"></a></li>

</ul>

</div>

<div id="mi3">

<h3 onmousedown="accordeon(3)"></h3><ul id="lister3">

<li><a href="literarura.htm" title="" target="_self"> </a></li>

</ul>

</div>

<div id="mi4">

<h3 onmousedown="accordeon(4)"></h3><ul id="listers4">

<li><a href= "testirovanie.htm" title="" target="_self"> </a></li>

<li><a href="testirovanie2.htm" title="" target="_self"> </a></li>

</ul>

</div>

</div>

</td>

<script type="text/javascript"><!--

var ident = new Array(4);

for (var i=0; i<=4; i++)

{

ident[i] = document.getElementById("lister"+i);

}

function accordeon(el)

{

for (var i=0; i<=ident.length; i++)

{

if (i==el)

ident[i].style.display="block";

else

ident[i].style.display="none";

}

}

//--></script>

</body>

</html>

</html>

// (testirovanie.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

// (h1)

var title = '';

// (h2)

var subtitle = " ";

//

var questions=[

{

text: " ",

answers: ["",

"",

""],

correctAnswer: 0 // !

},

{

text: " :",

answers: ["",

"",

" "],

correctAnswer: 2

},

{

text: " ",

answers: [" ",

" ",

" "],

correctAnswer: 0

}

];

var yourAns = new Array;

var score = 0;

function Engine(question, answer) {yourAns[question]=answer;}

function Score(){

var answerText = ":\n";

for(var i = 0; i < yourAns.length; ++i){

var num = i+1;

answerText=answerText+"\n "+ num +"";

if(yourAns[i]!=questions[i].correctAnswer){

answerText=answerText+"\n : " +

questions[i].answers[questions[i].correctAnswer] + "\n";

}

else{

answerText=answerText+": ! \n";

++score;

}

}

answerText=answerText+"\n : "+score+"\n";

alert(answerText);

yourAns = new Array;

score = 0;

clearForm("quiz");

}

function clearForm(name) {

var f = document.forms[name];

for(var i = 0; i < f.elements.length; ++i) {

if(f.elements[i].checked)

f.elements[i].checked = false;

}

}

</script>

<style>

span.quest {font-weight: bold;}

</style>

<h1><script>document.write(title)</script></h1>

<h2><script>document.write(subtitle)</script></h2>

<FORM name="quiz">

<ol>

<script>

for(var q=0; q<questions.length; ++q) {

var question = questions[q];

var idx = 1 + q;

document.writeln('<li><span class="quest">' + question.text + '</span><br/>');

for(var i in question.answers) {

document.writeln('<input type=radio name="q' + idx + '" value="' + i +

'" onClick="Engine(' + q + ', this.value)">' + question.answers[i] + '<br/>');

}

}

</script>

</ol>

<input type=button onClick="Score()" value=" ">

</FORM>

<p><span style='font-size:12.0pt'><a href= "Anime.html"> </a></span></p>

</body>

</html>

//(literarura.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title> </title>

<style type="text/css">

h3{color:#ffffff;

background-color:Blue;

text-align:left;

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

font-weight:200;

border:1px solid black;

cursor:pointer;

padding-left:10px;

margin-top:3px;

margin-bottom:3px;

align= center}

body { background-color:#999999;

color:#000000;

font-size:14px;

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

padding-top:0px;

margin-top:0px;}

</style>

</head>

<body>

<h3 > </h3>

<p>

1.. , . , . . . - . - , 1999 398.</p>

<p>2. / .. .: , 2003. 604.</p>

<p>3. .. , .., . . .:,1996.392.

</p>

<h3> </h3>

<p>

1. / .. / , 2003.; 49 182.</p>

<p>5. . 2. /. . 2002, ISBN 5-86404-170-X http://compression.graphicon.ru/

2 . . / . . .: , 2005. 671

7. .., / .. , .. . : , 2003. 176 .

</p>

<h3> </h3>

<p>

1. .. , .. ͳ " " ( ) , 2005.</p>

<p>2. " ' " 7.080401 7.080403 /.: .. , .. . . . - : , 2003. 16 .

</p>

<a href="Anime.html" title=" "> <img alt="back" src="052.gif" style="color:#999999" /> </a>

</body>

</html>

// (Testirovanie.htm)

<?xml version="1.0" encoding="Windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

<title> HTML</title>

<style type="text/css">

<!--

html, body {

margin: 0px;

padding: 0px;

border: 0px;

}

body {

color: #000;

background: #fff;

font: 75% Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

h1 {

font-size: 200%;

color: #fff;

background: #369;

margin: 0px;

padding: 5px 20px;

}

form {

margin: 0px;

padding: 0px;

}

h2 {

font-size: 150%;

color: #369;

margin: 10px 20px 5px;

}

p {

margin: 0px 50px;

}

p.buttons {

padding: 30px 0px;

}

#questions, #results

{

display: none;

}

-->

</style>

</head>

<body onload="hideNoDHTML();">

<script type="text/javascript">

<!--

function hideNoDHTML()

{

document.getElementById('nodhtml').style.display = 'none';

showQuestions();

}

function showQuestions()

{

document.getElementById('questions').style.display = 'block';

document.getElementById('results').style.display = 'none';

}

function showResults()

{

var i = 0;

if(document.getElementById('choice13').checked == true)

{

i++;

}

if(document.getElementById('choice23').checked == true)

{

i++;

}

if(document.getElementById('choice31').checked == true)

{

i++;

}

if((document.getElementById('choice41').checked == false) &&

(document.getElementById('choice42').checked == false) &&

(document.getElementById('choice43').checked == true) &&

(document.getElementById('choice44').checked == true))

{

i++;

}

if((document.getElementById('choice51').checked == false) &&

(document.getElementById('choice52').checked == true) &&

(document.getElementById('choice53').checked == false) &&

(document.getElementById('choice54').checked == true))

{

i++;

}

if((document.getElementById('choice61').checked == true) &&

(document.getElementById('choice62').checked == false) &&

(document.getElementById('choice63').checked == true) &&

(document.getElementById('choice64').checked == false))

{

i++;

}

if(document.getElementById('text7').value == '')

{

i++;

}

if(document.getElementById('text8').value == '')

{

i++;

}

if(document.getElementById('text9').value == '')

{

i++;

}

if(document.getElementById('text10').value == '')

{

i++;

}

document.getElementById('questions').style.display = 'none';

document.getElementById('results').style.display = 'block';

document.getElementById('results').innerHTML = '<h2> </h2>\n<p> : <strong>' + i + '</strong>.</p>';

if (i == 10)

{

document.getElementById('results').innerHTML += '<p style="color: #096"> !</p>';

}

if (i <= 4)

{

document.getElementById('results').innerHTML += '<p style="color: #c00"> , .</p>';

}

document.getElelementById('results').innerHTML += '<p class="buttons"><input type="button" value=" " onclick="showQuestions();" /></p>';

}

function getHelp()

{

document.getElementById('choice13').checked = true;

document.getElementById('choice23').checked = true;

document.getElementById('choice31').checked = true;

document.getElementById('choice41').checked = false;

document.getElementById('choice42').checked = false;

document.getElementById('choice43').checked = true;

document.getElementById('choice44').checked = true;

document.getElementById('choice51').checked = false;

document.getElementById('choice52').checked = true;

document.getElementById('choice53').checked = false;

document.getElementById('choice54').checked = true;

document.getElementById('choice61').checked = true;

document.getElementById('choice62').checked = false;

document.getElementById('choice63').checked = true;

document.getElementById('choice64').checked = false;

document.getElementById('text7').value = '';

document.getElementById('text8').value = '';

document.getElementById('text9').value = '';

document.getElementById('text10').value = '';

}

//-->

</script>

<h1> </h1>

<div id="nodhtml">

<h2 style="color: #c00"></h2>

<p> HTML. , JavaScript , DOM / CSS2. &nbsp;, .</p>

</div>

<div id="questions">

<form action="">

<h2>1. ?</h2>

<p><input type="radio" name="question1" id="choice11" /> <label for="choice11"></label></p>

<p><input type="radio" name="question1" id="choice12" /> <label for="choice12"></label></p>

<p><input type="radio" name="question1" id="choice13" /> <label for="choice13"></label></p>

<p><input type="radio" name="question1" id="choice14" /> <label for="choice14"></label></p>

<h2>2. ?</h2>

<p align="center"><img src="img/1.1.png" alt="" width="209" height="152" /></p>

<p><input type="radio" name="question2" id="choice21" /> <label for="choice21"></label></p>

<p><input type="radio" name="question2" id="choice22" /> <label for="choice22"> </label></p>

<p><input type="radio" name="question2" id="choice23" /> <label for="choice23"> </label></p>

<p><input type="radio" name="question2" id="choice24" /> <label for="choice24"> </label></p>

<h2>3. ?</h2>

<p><input type="radio" name="question3" id="choice31" /> <label for="choice31"> </label></p>

<p><input type="radio" name="question3" id="choice32" /> <label for="choice32"> </label></p>

<p><input type="radio" name="question3" id="choice33" /> <label for="choice33"> </label></p>

<p><input type="radio" name="question3" id="choice34" /> <label for="choice34"> </label></p>

<h2>4. ?</h2>

<p align="center"><img src="img/1.2.png" alt="" width="133" height="49" /></p>

<p align="center"><img src="img/1.3.png" alt="" width="67" height="28" /></p>

<p><input type="checkbox" id="choice41" /> <label for="choice41"> </label></p>

<p><input type="checkbox" id="choice42" /> <label for="choice42"> </label></p>

<p><input type="checkbox" id="choice43" /> <label for="choice43"> </label></p>

<p><input type="checkbox" id="choice44" /> <label for="choice44"> </label></p>

<h2>5. :</h2>

<p><input type="checkbox" id="choice51" /> <label for="choice51"> </label></p>

<p><input type="checkbox" id="choice52" /> <label for="choice52"> </label></p>

<p><input type="checkbox" id="choice53" /> <label for="choice53"></label></p>

<p><input type="checkbox" id="choice54" /> <label for="choice54"> </label></p>

<h2>6. :</h2>

<p><input type="checkbox" id="choice61" /> <label for="choice61"> </label></p>

<p><input type="checkbox" id="choice62" /> <label for="choice62"> </label></p>

<p><input type="checkbox" id="choice63" /> <label for="choice63"> </label></p>

<p><input type="checkbox" id="choice64" /> <label for="choice64"> </label></p>

<h2>7. - </h2>

<p><input type="text" size="20" maxlength="20" id="text7" /></p>

<h2>8. , , - </h2>

<p><input type="text" size="20" maxlength="20" id="text8" /></p>

<h2>9. , - </h2>

<p><input type="text" size="20" maxlength="20" id="text9" /></p>

<h2>10. MATLAB : </h2>

<p><input type="text" size="20" maxlength="20" id="text10" /></p>

<p class="buttons"><input type="button" value=" " onclick="showResults();" /> <input type="button" value=" " onclick="getHelp();" /> <input type="reset" value=" " /></p>

</form>

</div>

<div id="results"></div>

</body>

&quot; &quot; &quot; &quot; 2010

 

 

 

! , , , .
. , :