Гипермәтін жане WEB-парақтар

Автор работы: Пользователь скрыл имя, 10 Мая 2013 в 11:25, дипломная работа

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

Дипломдық жұмыстың мақсаты:«HTML - тілін оқыту» электрондық оқулығын Delphi ортасында құру, қолданушыға ыңғайлы түрде өңдеу және программалауда тиімді пайдалану жолдарын көрсету. Осы мақсатқа жету үшін алдыма келесі міндеттерді қойдым:
Delphi программалау тілін терең оқып үйрену;
Арнайы оқулықтармен танысу;
Delphi ортасында электронды оқулық жасау үшін қажетті компоненттерді, олардың қасиеттерін оқып үйрену;
Delphi-де «HTML тілін оқыту» электрондық оқулық құру

Содержание

КІРІСПЕ 3

1 HTML тілінің негіздері 4
1.1 Мәтіндермен жұмыс 6
1.2 Сілтемелер 13
1.3 Бейне суреттермен жұмыс 25
1.4 Тізімдер, кестелер, стильдер, түстер, фрейімдер, тегтер 32
1.5 НTML тілінің қосымша мүмкіндіктері 34

2 «HTML- тілін оқыту» электрондық қабықшасын жасау 56
2.1 Delphi-да жоба құру жолдары 56
2.2 Объектілер инспекторы терезесі 57
2.3 Мәтіндермен жұмыс істеуде пайдаланылған компоненттер 57
2.4 Жұмыс сипаты 58

ҚОРЫТЫНДЫ 61

ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР 62

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

6Гиперматин жане WEB-парактар.docx

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

3- мысал. Браузерлердің  оң жақ бұрышында қабатты орналастыруды  беру

span class="select">function putLayer() { 
widthBrowser = getWidth() - 100; 
if(IE) eval('document.all["xyz"].style.left = widthBrowser'); 
if(NC) eval('document.layers["xyz"].left = widthBrowser'); 
if(Opera) eval('document.getElementById("xyz").style.left = widthBrowser'); 
setTimeout('putLayer()', 1000); 
}

Қабаттың орны сол жақ  жоғарғы бұрышта болғандықтан, жұмыс  аймағының енінен  қабат енін алып тастау керек (мысалда – 100пиксель). Егер қабат браузер терезесінің  төменгі бұрышында орналасса, биіктігімен  де солай жасаймыз.

Берілген қабат көрсетілген  орында қалуы үшін және өз орнын  әр қашанда өзгертпеуі үшін яғни терезе өзгергенде  SetTimeout функциясы қолданылады, ол әр 1000 миллисекундта қабат орнын  қалпына келтіреді (немесе 1 секунд).

3 мысалда көрсетілген  функцияны шақыру үшін әртүрлі  оқиға қолдануға болады, мысалы  On load оқиғасын.

4 -мысал. Функцияны автоматты  түрде шақыру

<body onLoad="putLayer()"> 
... 
</body>

Браузердің кез-келген бұрыштарында қабатты орналастырудың толық листингін  келтірейік

Жоғарғы оң жақ бұрышта

<html> 
<head> <script language="JavaScript">

IE = (document.all); 
NC = (document.layers); 
Opera = (document.getElementById);

function getHeight() { 
if (IE || Opera) send = document.body.clientHeight; 
if (NC) send = window.innerHeight; 
return send; 
}

function getWidth() { 
if (IE || Opera) send = document.body.clientWidth; 
if (NC) send = window.innerWidth; 
return send; 
}

function putLayer() { 
widthBrowser = getWidth() - 100; 
if(IE) eval('document.all["xyz"].style.left = widthBrowser'); 
if(NC) eval('document.layers["xyz"].left = widthBrowser'); 
if(Opera) eval('document.getElementById("xyz").style.left = widthBrowser'); 
setTimeout('putLayer()',1000); 
}

</script> 
</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"> 
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0> 
<tr> 
<td>Содержание</td> 
</table> 
</div> 
</body> 
</html>

Оң жақ төменгі бұрышта

<html> 
<head>

<script language="JavaScript">

function putLayer() { 
widthBrowser = getWidth() - 100; 
heightBrowser = getHeight() - 200;

if(IE) {  
eval('document.all["xyz"].style.left = widthBrowser'); 
eval('document.all["xyz"].style.top = heightBrowser');}

if(NC) { 
eval('document.layers["xyz"].left = widthBrowser'); 
eval('document.layers["xyz"].top = heightBrowser');}

if(Opera) { 
eval('document.getElementById("xyz").style.left = widthBrowser'); 
eval('document.getElementById("xyz").style.top = heightBrowser');}

setTimeout('putLayer()',1000);}

</script> 
</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"> 
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0> 
<tr> 
<td>Содержание</td> 
</table> 
</div> 
</body> 
</html>

 

Сол жақ төменгі бұрышта

<html> 
<head> <script language="JavaScript">

function putLayer() { 
heightBrowser = getHeight() - 200;

if(IE) eval('document.all["xyz"].style.top = heightBrowser'); 
if(NC) eval('document.layers["xyz"].top = heightBrowser'); 
if(Opera) eval('document.getElementById("xyz").style.top = heightBrowser');

setTimeout('putLayer()',1000);}

</script> 
</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-index: 1"> 
<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0> 
<tr> 
<td>Содержание</td> 
</table> 
</div>

</body> 
</html>

 

Веб-парақтардың  оптимизациясы

Веб-парақтардың оптимизациясы  дегенде, біз қолданушыға максимальды  тез болатын яғни, браузерде парақтарды жүктеуге мүмкіндік беретін әдістер  мен тәсілдерді қолдану деп түсінеміз.

Оптимизацияның басты  ойы – бұл файлдар көлемін  әртүрлі құралдармен кішірейту, бірақ мұнда да белгілі бір  әдістер қолданылады, олар парақта  басқа элементтер пайда болмайынша контентті жүктеуге мүмкіндік береді. Төменде, осы мақсатқа жетудің кейбір әрекеттері сипатталған.

Маңызды ақпаратты  парақ үстіне орналастырыңыз.

Веб-парақтар жоғарыдан төменге  қарай жүктеледі, ал төмен орналасқанға қарағанда парақтың жоғарғы жағындағы  ақпарат ертерек пайда болады. Сондықтан, қолданушы үшін аса маңызды  материалдарды парақтың басына қарай  орналастырыңыз.

Бір кескінді көп  мәрте қолданыңыз

Беттен – бетке қайталанатын графикалық элементтерді қолданыңыз яғни, логотиптер, навигация элементтері  сияқтылар. Суреттің алғашқы жүктелуінде, кескіні бар файл браузер кэшіне орналасады және берілген суретті қайта-қайта  қолдану оның ол кездесетін басқа  парақтарда пайда болуын тездетеді.

(CSS ) стильдерінің  каскадты кестеларін қолданыңыз 

Форматтау атрибуттары тобына бірден барлығына бір әрекетті қолдану  арқасында стильдер НТМL кодын айтарлықтай  ықшамдайды. Стильдер көмегімен мысалға , барлық тақырып жолының түрін  өзгертуге болады. Бірақ үш тәсілмен тақырып жолын форматтамаудың орнына яғни, оның өлшемі басында берілсе, кейін қаріп берілсе және ең соңында  орталық бойынша түзету болса, оны  бір уақытта анықталған тегке  стильді қолдану арқылы тура соны іске асыруға болады.[12].

Кестелер ерекшеліктерін ескеріңіз

   Әдетте веб-парақтар көрінбейтін шекаралары бар кестелерді қолдану арқылы беттеледі. Сол кестелердің ерекшелігі – егер соңғы сөз кестенің ең төменгі жағына жүктелмесе , экранда ұяшықтардың құрамы бейнеленбейді. Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау үшін, кесте туралы бүкіл ақпаратты алуда қолданады. Алайда, егер кесте биіктігі бойынша үлкен болса, біз қажетті ақпаратты тапқанымызша елеулі уақыт өтіп кетеді. Осыны ескеру, сізге веб-парақтың құрамындағылардың шығуын тездету мүмкіндігін береді. Жүктеуді тездетудің тағы бір әдісі – бұл кестелер орнына қабатты қолдану.

Графиканы оптимизациялаңыз

Веб-параққа графикалық кескіндер  тез жүктелуі үшін, сапаларын сақтауда суреттер файлдарының өлшемін кішірейту  керек. Графиканы оптимизациялау үшін, файлдар форматын ескере отырып, әртүрлі  параметрлермен басқаруға мүмкіндік  беретін арнаулы программалар бар. Мысалы, Adobe Image Ready, Ulead SmartSaverPro, MacromediaFireWorks және т.с.с.

Қажет жерлерде тырнақшаларды  қолданыңыз

Тегтер параметрлерінің  мәнін анықтауда тырнақшалар  қолданылады. Мысалы, парақтағы фон  мәтінінің және сілтемелерінің түсін  өзгерту.

   

Салымдарды құру

Салымдар новигация элементінің  бірі, сайтты қолданушы салымдарға кез келген керекті түр, функцияны  шығынсыз дизайнерін беруді ұнатады. Қосымша, бұл элемент веб-парақта жақсы  анықталады және  Салымдардың сайт бөлімдері арқылы өтуін тез түсіндіреді.  1-суретте салым құрудың бір нұсқасы көрсетілген.

1-сурет. Салымдарды құрып орналастыру

Графикалық салымдарды кез  келген графикалық редакторда құруға болады. Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз, мысалы 2-суретте көрсетілген стиль арқылы.

 

Чебурашка

Крокодил Гена

Шапокляк

Крыса Лариса

  

2-сурет. Стилдердің  арқылы  салымдарды құру

 

Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды  құрайды, ал шеткі екі ұяшығы сән  үшін керек, олар көлденең шетке шегіну сызығы үшін керек.

Екі селектр қажет: біріншісі  ағымдағы салымды өзгертеді, оны open дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет. Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right: none параметрі  қолданылады. Сондай-ақ ағымдағы салым  үшін төменгі шекараны жасырып қою  керек. Оң және сол ұяшықтың стилін тура сипаттауға болады. Бірақ сайтта салымды көп қолдану үшін бөлек  класс қолданған дұрыс.

1-мысал. Кестені қолдану

<html> 
<head> 
<style> 
.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;} 
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; } 
</style> 
</head>

<body> 
<table width=100% border=0 cellspacing=0 cellpadding=4> 
<tr> 
<td width=10 align=center style="border-bottom: solid 1px black">&nbsp;</td> 
<td width=25% class=open>Чебурашка</td> 
<td width=25% class=close>Крокодил Гена</td> 
<td width=25% class=close>Шапокляк</td> 
<td width=25% class=close>Крыса Лариса</td> 
<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black">&nbsp;</td> 
</tr> 
</table> 
</body> 
</html>

Кестені қолданудың бірнеше  ерекшелігі бар. Терезе көлемін өзгерту  кезінде кесте ені бойынша  құрылады. Сондықтан салымдар әрқашан  көрінеді және міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер терезелерінің  кішірейгенін көруге болады. 2-мысалда span тегасы қолданылады, оның көмегімен  салымдар жасалынады. Әр түрлі блоктар  бір бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.[14].

 

2-мысал. SPAN тегін қолдану

<style> 
.open { border: solid 1px black; border-right: none; border-bottom: solid 1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px} 
.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; width: 24%; padding: 4px } 
</style>

<span style="border-bottom: solid 1px black; width: 10px">&nbsp;</span><span class=open>Чебурашка</span><span class=close>Крокодил Гена</span><span class=close>Шапокляк</span><span class=close>Крыса Лариса</span><span style="border-left: solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px">&nbsp;</span>

Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі  салымдарды құруға болады. 3-суретте  түгенделген салымның мысалы көрсетілген, бұл жағдайда белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.

 

 

Чебурашка

Крокодил Гена

Шапокляк

Крыса Лариса

  
 

3-сурет.

3-мысалда осындай салымның  жасалған коды көрсетілген. Бұл  жағдайда қайтадан кесте қолданылады.[13].

3-мысал. Салымдарды кесте  арқылы құру

<html> 
<head> 
<style> 
.open { border: solid 1px black; border-right: none; border-bottom: none; font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px } 
.close { border: solid 1px black; border-right: none; text-align: center; padding: 4px} 
</style> 
</head>

<body> 
<table width=100% border=0 cellspacing=0 cellpadding=4> 
<tr>  
<td width=10 align=center style="border-bottom: solid 1px black">&nbsp;</td> 
<td width=25% class=open>Чебурашка</td> 
<td width=25% class=close>Крокодил Гена</td> 
<td width=25% class=close>Шапокляк</td> 
<td width=25% class=close>Крыса Лариса</td> 
<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black">&nbsp;</td> 
</tr> 
<tr>  
<td bgcolor="#CFD6D4" colspan="6" height=10></td> 
</tr> 
</table> 
 
</body> 
</html>

Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр  сызықты форматтайды. Оның ені мен  түсі height және bgcolor ұяшықтарының ерекшелігімен  ауысады.

Скриптер.

Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы  динамикалық басқарылуы HTML құжатымен  байланысқан программа арқылы іске асады. Мұндай программаларды скриптілер деп атайды немесе басқа әдебиеттерде кездесетіндей – сценарийлер  деп атауға болады. Скриптілер Script тегі арқылы сипатталады, яғни оның құрамында программаға немесе анықталған тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері қолданылады - JavaScript  және VB Script.

Скриптерді құру

Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең  тарағанының ерекшелігі – бұл Script контейнерінің ішінде программаның орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында  программаны қамтиды.

Скрипт жазылу синтаксисы;

<script language="язык программирования" type="тип MIME" src="имя файла"> Текст программы 
</script>

Language параметрі скрипттің  жазылу тіліне нұсқайды, ол JavaScript  немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына нұсқа  (версия) нөмірін қосады. Мысалы JavaScript 1.3 (1-мысал).

1-мысал. Браузер қолдайтын  тілдерді анықтау

<html> 
<head> 
<script language="VBScript"> VB = True </script> 
<script language="JavaScript"> JS = 1; </script> 
<script language="JavaScript1.1"> JS11 = 1; </script> 
<script language="JavaScript1.2"> JS12 = 1; </script> 
<script language="JavaScript1.3"> JS13 = 1; </script> 
<script language="JavaScript1.4"> JS14 = 1; </script> 
<script language="JavaScript1.5"> JS15 = 1; </script> 
<script language="JavaScript"> 
document.write("<b>Поддерживаемые языки:</b><br>"); 
if(window.JS) document.write("JavaScript<br>"); 
if(window.JS11) document.write("JavaScript 1.1<br>"); 
if(window.JS12) document.write("JavaScript 1.2<br>"); 
if(window.JS13) document.write("JavaScript 1.3<br>"); 
if(window.JS14) document.write("JavaScript 1.4<br>"); 
if(window.JS15) document.write("JavaScript 1.5<br>"); 
if(window.VB) document.write("Visual Basic<br>"); 
</script> 
</head> 
<body> 
... 
</body> 
</html>

орындаудың нәтижесі төменде  көрсетілген

 

Language параметрін көрсету  ұсынылады, себебі егер, браузер  программалау тілін анықтамаса, онда скрипт қабылдамайды және  орындамайды да. Сонымен қатар,  HTML 4.0 нұсқасында осы параметрді  қолдану аса тиімді емес. Оның  орнына type параметрін қолданған  дұрыс, ал ол анықталған тіл  үшін MIME типін нұсқайды: JavaScript үшін  – «text/java script», ал VB Script үшін - «text/vb script». Бірақ кейбір браузерлер type параметрін түсіне алмайды,  сондықтан language және type екі атрибутын  бір уақытта берген дұрыс. Егер  браузер type параметрінің мәнін  анықтамаса, онда language мәні орындалмайды.

Информация о работе Гипермәтін жане WEB-парақтар