Автор работы: Пользователь скрыл имя, 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
<script language="JavaScript" type="text/JavaScript">
JavaScript тіліндегі бағдарлама
</script>
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді, яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі шақырылуда скрипт тез шақырылады.
<script language="JavaScript" type="text/JavaScript" src="main.js"></script>
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері
Скрипттер HTML құжатының денесінде
немесе бас жағында шектеусіз
көлемде орналасады. Көп жағдайларда
скриптілердің орналасуы
2- мысал. Скрипт көмегімен Кесте құру
<html>
<body>
<table width=400 border=1>
<script language="JavaScript">
for (i=1; i<6; i++) {
document.writeln("<tr>");
for (j=1; j<6; j++) document.write("<td>" + i + j
+ "</td>");
document.writeln("</tr>");}
</script>
</table>
</body>
</html>
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар кестені құрып, оны сандармен толтырады
Скриптілерді түсінбейтін браузерлерден программа кодын жасыру үшін, бастамас бұрын және аяқтағаннан кейін НТМL түсініктемесін қосады.
<script language="JavaScript">
<!--
Бағдарлама тексті
//-->
</script>
НТМL түсініктемесін жапқаннан кейін JavaScript (II) тілінің түсініктемелері немесе VB Script (I) түсініктемелері шығуы керек.
Қазіргі таңда барлық жаңа шыққан браузерлер скриптерді түсінеді, сондықтан түсініктемелер міндетті түрде болуы шарт емес.
Скриптерді шақыру және іске қосу
Скриптерді орындаудың негізгі
әдістері функцияларды шақыру және белгілі
оқиғаға қол жеткізу арқылы іске
асады. Скриптті 3-мысалда көрсетілгендей
парақты жүктеуден кейін
3-мысал. Скриптті автоматты түрде іске қосу
<html>
<head>
<script language="JavaScript">
alert("Hello, world!")
</script>
</head>
<body></body>
</html>
Тура сол программаны функция арқылы жазуға болады
4- мысал скриптердің автоматты түрде ашылуы
<html>
<head>
<script language="JavaScript">
function foo() {
alert("Hello, world!")}
foo();
</script>
</head>
<body></body>
</html>
Foo функциясы парақты жүктеуде іске қосылады себебі оның шақыруы айқын көрсетілген.
Оқиғалар мен скриптілерді
байланыстырудың екі әдісі бар.
5-мысал. Тышқан оқиғасын қолдану
<input type= button value= “ баспаңыз!”
onclick = “alert” ( сіз батырмаға
бастыңыз мұны жасауға
Белгілі оқиғаларға көңіл бөлудің басқа әдісі SCRIPT - for тегінің параметрлерімен байланысты, яғни оқиғаларды анықтайтын скрипт event элемент атауының берілгені үшін орындалады
<script language="JavaScript" for="document"
even="onLoad">
alert("Загрузка страницы завершена...")
</script>
Хабарламаны шақыру мысалында
құжатты жүктегеннен кейін
1.3 Бейне суреттермен жұмыс
Веб-парағында
орналастырылатын бейнені түрлі көлемді
қоршауға орналастыруға болады. Бұл үшін
IMG тегасындағы border параметрі қызмет атқарады.
Егер сурет жіберілген болған жағдайда
басқа, қоршау келісім болса бейне жан-жағында
көрінбейді. Бұл жағдайда қоршау түсі
мәтін түсімен сәйкес келеді, ол стиль
көмегімен немесе BODY тегасындағы text параметрімен
енгізілуі 1- мысалда көрсетілген.
1- Мысал. Бейне жан-жағына қоршау құру.
<html>
<body text=#00FF00>
<img src="sample.gif" width=50 height=50 border=2> қоршау зеленого цвета толщиной
2 пиксела
</body>
</html>
Егер сурет жіберілген болса, онда қоршау автоматты түрде құрылады, оның қалыңдығы 1 пиксел, қоршаудың түсі жіберу түсімен сәйкес келеді.
Қоршауды алыптастау үшін border=0 (2 пиксел) параметрін енгізу керек.
2- мысал. Бейне жан-жағындағы қоршауды алып тастау
<a href=”sample.html”><img src=” sample. gif ” width=50 height=50 border=0></a>
Жіберілген барлық бейнелерде қоршауды алып тастау үшін CSS қолдануға болады. Бұл үшін none мағынасындағы border параметрін қолданылуы 3- мысалда көрсетілген.
3 -мысал. CSS қолдану
<style>
A IMG { border: none }
</style>
AIMG { } конструкциясы стильдердің қолдану ??? анықтайды. Ол тек А контейнерінің ішінде орналасқан IMG тегасы және жіберілген болып табылады.
Netscape 4x браузерінде көрсетілген тәсіл жұмыс істейді, өйткені ол border:none қасиетін игермеген. Ол үшін келесі қулықты қолдануға болады. Қоршау түрін веб-?? Бетіндегідей құруға болады. Бұл жағдайда қоршау бет түсімен беттесіп, көрінбейді (4 мысал).
4-мысал. Стильдер көмегімен қоршау түсі
<style>
A IMG { border: none; border-color: #FFFFFF; }
</style>
Мысалда қоршау түсі – ақ.көрсетілген әдіспен кез келген түсті бейнеге қоршау құруға болады, нәтижесінде қызық эффектілер алынады. Бірақ алдын ала border: none алып тастау қажет.
Графикалық қаттамалар
Қаттамалар бұл таңдау нұсқаларын ұйымдастыру үшін командалар тізімі. Қаттамаларды құруда графикалық кескіндерді қолдану сайтқа кірушілердің назарын аударады және эстетикалық көркін күшейтеді. Төменде қаттамалар нұсқалары көрсетілген, алдағы уақытта біз соларды қарастырамыз.
Чебурашка
Крокодил Гена
Шапокляк
Қаттаманы құру үшін бастапқыда екі сурет қажет, оларды кез-келген графикалық редакторда әзірлеуге болады. 4-ші сурет белсенді емес тармақты белгілеу үшін қолданылады, ал екіншісі тышқанды бетіне әкелу кезінде сол суретті алмастырады.
4-сурет. Каттаманы құру үшін бейне
5-сурет. Бейнеге курсорды жақындатқан кездегі түрі
Мұндай әдісті «айналу эффектісі» немесе rollover деп атайды.
Ең бірінші қаттама үшін негіз құрамыз (1мыс.)
1-мысал. Menu қабаты үшін стиль
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;}
Height параметрі арқылы
берілетін қабат биіктігі
Енді қаттамалардың жеке тармақтарына өтейік. Стильді әртүрлі аттармен жүктемеу үшін контекстті селекторларды қолданамыз. #menuDIV құрылымы - бұл стильдің тек DIV тегі үшін жұмыс істейтіндігін анықтайды, ол menu деген атпен қабат ішінде орналасады. Ол үшін тек сипаттама жасау қалды.
2- мысал. Жеке тармақтар үшін стиль
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
Float параметрі қабатты
көлденеңінен орналастыру үшін
қажет, ол болмаса қабаттар
бірінің астына бірі
Сілтемелерді сипаттау ғана қалды контекстті селекторларды қолданып #menuА элементі үшін стиль құрайық, ол menu қабатындағы (3-мысал) сілтемелер үшін ғана жұмыс істейді. Бұл алдағы уақытта сайтта А тегін қолдану үшін қолданылады және ол қай жерде сипатталғанына қарамастан жүзеге асады.
3 -мысал. Сілтемелер стилін сипаттау.
#menu A {
width: 100%;
height: 100%;
padding: 12px;
}
#menu A:hover {
background: url('m2.jpg');
}
Padding параметрі қабат ішінде
мәтіннің жылжуын анықтайды,
Бір суреттен екіншісіне ауысу A:hover псевдоклассы арқылы орындалады. Ол сілтемеге тышқан меңзерін әкелудегі құбылысқа жауапты. Сол кезде фондық кескіннің басқасына ауысуы background параметрі арқылы орындалады. 4 мысалда барлық стильдердің аяққы коды көрсетілген.
4 -мысал. Қаттамаларды құру үшін аяққы код.
<html>
<head>
<style>
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;
}
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
#menu A {
width: 100%;
height: 100%;
padding: 12px;
}
#menu A:hover {
background: url('m2.jpg');
}
</style>
</head>
<body>
<div id=menu>
<div><a href=#>Чебурашка</a></div>
<div><a href=#>Крокодил Гена</a></div>
<div><a href=#>Шапокляк</a></div>
</div>
</body>
</html>
Қаттамаларды құрудағы келтірілген тәсілдердің артықшылықтары да кемшіліктері де бар. Артықшылығына қаттамаларды құрудың қарапайымдылығы мен тездігі жатса, кемшілігіне меню opera 6 браузерінде жұмыс істемейді, сонымен қатар, жұмыс істеуі баяу. Бұл екінші суретті жадқа жүктеу алдын-ала емес, оған қатынасқан кезде ғана болғандықтан. Сәйкесінше бір суретті екіншісімен ауыстыру баяу жүреді. Бұдан құтылу үшін кескіндер файлдарының көлемін азайтып не JavaScript көмегімен жадқа кескіндерді тыңғылықты жүктеу керек. Меню жұмысын жеделдетудің тағы бір тәсілі – бұл суреттерді бір суретке біріктіру және фондық суретті жылжыту.
Сурет астындағы жазба.
Сурет астындағы жазбалар
– мәтін, суретке түсініктеме
және оны сипаттайды. Мұндай жазба
маңызды, қаншалықты
Қолтаңба сурет астында деп аталуымен де, сурет жанына орналастыруда, егер ол дизайнның көмегімен қойылса, Web-беттерінде орналастыру суреті, қолтаңбаны (жазбаны) кестемен оңай қолдануға болады. Бұл жағдайда сурет шеттерінің түсін, оның түстерін, енін және мәтін орнын беруге болады.
|
| ||||
6-сурет. Сурет астындағы жазбаны орналастыру нұсқалары. | |||||
1-мысал. Кесте көмегімен
4" bgcolor="#CC9900">
<tr>
<td><img src="images/figure.jpg" width="100"
height="111"></td>
</tr>
<tr>
<td>Пример подрисуночной подписи</td>
</tr>
</table>
Кестенің ені сурет көлемі мен автордың қолдануымен анықталады. 1-мысалда кесте ені сурет енімен сәйкес келеді, түрлі-түсті рамканың ені сурет бойымен cellpadding немесе cellspacing параметрлер көмегімен қойылады. Бұл жағдайда бәрі бір қандай қойылса да, нәтижесі бір болады. Кестенің түсі bgcolor параметрімен көрсетілген, сурет астындағы астына салудың және оған қойылатын жазудың түсін анықтайды.
|
Жоғарыда қарапайым нұсқалары көрсетілген, сурет жазбасымен беттің ортасына орналасқан егер де мәтінді орналастыру біздің конструкциямызбен, бұл жағдайда кестемен қасиеттері align=left / right пайдалануға болады. Бұл қасиет кестені беттің сол жақ немесе оң жақ шетіне туралайды.Кестенің шетінен бастап мәтінге дейінгі шегінісі IMG тегте көрсетілген. Мәтін, суретте шартты келіп-кетіп жүрген сияқты көрінуі өте әдемі болып шығады. Бұндай мәтінді оқу оңай болмайтындай дизайн принципі және қарапайым дұрыс мағына екенін білдіртпей айтып тұрғандай. Бізге кестенің айналасының шегін алуды және бұл үшін қойылған кестелерді пайдалануға болады. Кесте құрамыз, сол жақ немесе оң жақ шетімен туралау, сол енімен, суретті де, cellpadding параметрімен мәтіннен кестеге дейінгі арақашықтықты анықтайды (2-мысал).