Автор работы: Пользователь скрыл имя, 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
Кестелердің құрылуы
Қатпарды қалай жасыруға және көрсетуге болады?
Қатпарлардың веб-беттерінің басқа элементтерінен негізгі айырмашылығы, қажет жағдайда скриптер арқылы оларды жасыруға және көрсетуге болатындығында. Бұл сайтта динамикалық эффектілерді қолдана отырып, мысалы, түрлі меню құруға мүмкіндік береді.
Қатпарды қалай жасырамыз?
Егер мәні берілсе, үнсіз келісім бойынша берілген элементтерді көріп отырамыз. Мысалы, BODY элементін жасыруда, құжаттағы берілгендердің барлығын жасырады. Көрініс эффектісін орнатуға болады. Қатпарды жасыру үшін, hidden параметрін орнатып, visibility құрамын өзгерту керек.
1-мысал. Қатпарды жасыру
<html>
<head>
<script language="JavaScript">
function hiddenLayer() {
NC = (document.layers);
IE = (document.all);
Opera = (document.getElementById);
if(IE) eval('document.all["layer1"].
if(NC) eval('document.layers["layer1"
if(Opera) eval('document.getElementById(
}
</script>
</head>
<body onLoad="hiddenLayer()">
<div id="layer1" style="position:relative; top:-55;
left:5; color:orange; font-size:80px; z-index:1">Содержимое
слоя</div>
</body>
</html>
Ескерту. visibility параметрінің көмегімен қатпарды жасырғанымен, қатпар құжат ішінен жойылмайды. Мұнда қатпар жасырылады, бірақ алатын орны қалады. Егер экранның бір бөлігіне қатпарларды шығару қажет болса, онда абсолютті позицинирлеуді қолдану керек.
Жасырын қатпарды қалай көрсетеміз?
Егер қатпар жасырын болса, visible мәнді visibility параметрінің көмегімен көрсетуге болады. Екінші мысалда қатпарды динамикалық көрсету немесе жасыруы көрсетілген.
2-мысал. Қатпардың көрінуін өзгерту.
<html>
<head>
<script language="JavaScript">
function init() {
IE = (document.all)
NC = (document.layers)
Opera = (document.getElementById)
}
function hiddenLayer() {
init();
if(IE) eval('document.all["descr"].
if(NC) eval('document.layers["descr"]
if(Opera) eval('document.getElementById(
}
function showLayer() {
init();
if(IE) eval('document.all["descr"].
if(NC) eval('document.layers["descr"]
if(Opera) eval('document.getElementById(
}
</script>
</head>
<body>
<table width="90%" border="1" cellspacing="0"
cellpadding="4" bordercolor="#666666" align="center">
<tr>
<td width="20%" align="center"><a href=#
onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><
<td>
<div id="descr" style="position: relative; visibility:
hidden">Данная
эксклюзия является подмножеством астрациональных
супремативных
монотенных федоний кадонарного экстрафазория.</div>
</td></tr></table>
</body>
</html>
Қатпардың көрінуінің өзгеруінің нәтижесі төменде көрсетілген. Тышқан тетігін жылжытқанда жасырын тұрған оның мағынасы шығады.
Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория. |
Кодты оптимизациялау
Негізі бойынша веб-парақтар
жәй мәтіндік құжаттар болып
табылады, ал мәтін біздің білуімізше
суреттерге қарағанда жадтан
аз орын алады. Бір символ -1байт,
ал көпкилобайтты фотосуреттер
фонында ол күлкілі көрінеді.
Бірақ, сайт – бұл көптеген
веб-парақтардың үйлесімі және
оған ондап, жүздеп не мыңдап
құжаттар енеді. Кодты
HTML кодын оптимизациялаңыз
HTML құжаттарын оптимизациялау
үшін арнайы программалар
Кез келген мәтіндік редакторды қолдануға болады яғни екі қатар арасын ашып жол жіберуді біреумен алмастыру. Мұндай процедураны жасалған алмастырулар нөлге тең болғанынша қайталау керек. Бұл қарапайым технология қалай дегенмен арнайы программаларды алмастырмайды, бірақ қажет болуы ықтимал.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы, парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
<body bgcolor="#A0BEC4" text="#000000" link="#003366" vlink="#660066">
Шын мәнінде, сөздер арасындағы жол жіберу қажет жердегі параметрлер мәнінде және скриптілерде ғана тырнақшаларды қолдануға болады. Басқа жерлере қолдану міндетті емес, сондықтан «#АОВЕС4» -ті # АОВЕС4-ке ауыстыруға болады.
<body bgcolor=#A0BEC4 text=#000000 link=#003366
vlink=#660066>
<img src=1.gif alt="А здесь кавычки нужны,
потому как пробелы стоят">
Жол жіберулер орнына табуляцияны қолданыңыз
Көптеген жол жіберулер
кодты көркейтеді, бірақ оның көлемін
де үлкейтіп жібереді. Егер шегіністерді
міндетті түрде жасау керек болса,
табуляция таңбасын қолданыңыз. Табуляция
бірнеше жол жіберулерді
Қайталанатын бірдей тегтерді алып тастаңыз
Веб-парақтарды редактрлейтін кейбір программалар тек бір параметрден қоса отырып автоматты түрде бір тегті құрамдас бөліктерге бөледі. Бұл процесті қадағалап редактрлер жағынан осындай жағдайларды жібермеген дұрыс.
Дұрыс емес:
<font size=4><font color=#003366>Дорогие друзья!</font></font>
Біршама дұрыс:
<font size=4 color=#003366>Дорогие друзья!</font>
Бұл ұсынысты ескірген деп қарастыруға болады, ол стильдердің кең таралуына байланысты. Жоғарыда көрсетілген мысал аса сәтті емес болып табылады. FONT тегін ұмытқан жөн, ал оның нәтижесін SPAN тегімен алмастырған дұрыс:
<span class=welcome>Дорогие друзья!</span>
Мұндағы welcome классының өзі стильдік кестеде сипатталуы керек.
Суреттерді мәтінмен алмастыру
Әрине бірде бір мәтін
графикалық редактормен салыстырыла
алмайды. Бірақ кейбір жағдайларда
қарапайым жәй затты жасауда
ондай мүмкіндіктер аса қажет
емес. Жай символдардың көмегімен
яғни, қос нүкте және нүкте көптеген
сайттарда кездесетіндей
1-мысал. Мәтінді қолдану
<h1>::</h1>
<h1>.::.</h1>
<h1>:·</h1>
<h1>..··::</h1>
<h1>.<sup style="font-size: 120%">.</sup>.</h1>
:: .::. :· ..··:: ... |
Стильдер және қабаттардың әрекеттесуіндегі кең мәтіннің мүмкіндіктері 2- мысалда келтірілген.
2- мысал. Стильдер мен қабаттарды қолдану
<div style="font-family: Times, serif; font-size:
200%">
T<span style="position: relative; top: 10px">E</span>X
и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span
style="position: relative; top: 10px">E</span>X</div>
TEX и LATEX |
TEX және LaTEX танымал жүйелерінің
өз көрнекі жазу түрі бар,
яғни сол арқылы өздеріне
Артық тегтерді алып тастаңыз
Тегтерді осындай көп
қылым жәй ойлап тапқан жоқ
қой. Олар бар болғансоң не үшін қажет.
Даму барысында өзара іріктеліп
мықтылары алға шықты. Кейбіреулерін
нәтижесіз де мүлдем алып тастаса, басқалары
ұқсас функциялармен
7-кесте.
Тег |
Чем лучше заменить |
<strong> |
<b> |
<em> |
<i> |
<strike> |
<s> |
<font> |
стилем |
Келесі тегтерді өшірудің
қажеті жоқ:
<meta name="ProgId"...>, <meta name="GENERATOR"...>,
<meta name="AUTHOR"...>.
Файлдардың құрылымы.
Жұмысшы жағынан сайтты шартты түрде екі деңгейге – логикалық және физикалық деп бөлуге болады. Логикалық деңгейде сайт бі-бірімен дизайн, стиль және жіберуі бойынша біріктірілген веб-парақтың жиынтығын білдіреді. Сонымен қатар, физикалық деңгейдегі сайт керісінше құрамына бағдарлама, құжаттар, бейне және т.б. кіруі мүмкін түрлі типті файлдардың жиынын құрады.
Қарапайымдылық үшін, біз ешбір веб-бағдарламалаусыз html-файлдар көмегімен жасалатын сайттармен жұмыс істейміз.
Сай түбіне бумалар мен файлдар құрмастан бұрын, қандай тарау және оның ішіндегі тарауларға бөлінетінін, олар қалай аталатынын анықтайтын сайттың құрылымын жасап алу керек. Мысал үшін графика оптимизациясына арналған сайт схемасын келтіреміз.
Әр тарау құрылатын және атын қоятын бір html-құжатын құрайды. Файл атауларын төменгі тіркеуде еш орын қалдырмай латын әріптерімен атаған жөн. Мұндай қадам оның түрлі платформаларда әмбебаптылығы мен жұмыс істейтін сайттың түзетулерін ескеру қажет. Мұнда кіреді: қандай файл бірінші жүктеледі, ерекше файлдарға рұқсат болады ма, қателерді қалай тексеріп отырады және сол сияқты сұрақтар 17- суретте көрсетілген.
|
|
17-сурет.
CSS бойынша қысқаша анықтама.
CSS1 қысқаша анықтамалығына стильдер сипаты кіреді. ІЕ- Microsoft Internet Explorer, NC-Netscape Communicator.
Берілген параметр браузердің қай версиясын қолданылатын сан 7-кестеде көрсетілген.
7-кесте.
Стилі |
ІЕ |
NC |
Сипатталуы |
Background |
4 |
- |
Стиль фонын орнату үшін
бес бөлек параметрлерді |
Background- attachment |
4 |
- |
Фондық сурет веб- парағының мазмұнымен бірге айналады ма не жоқ па анықтайды |
Background- color |
4 |
4 |
Фон элементінің түсі |
Background- image |
4 |
4 |
Элементтің сурет фонын орнатады |
Background- position |
4 |
- |
Фонн суретінің сол жақ жоғарғы позициясы |
Background- repeat |
4 |
- |
Көлденең және тік осі бойымен фондық суреттің қайталануы |
Border |
4 |
- |
Элемент айналасындағы рамканың түсін, стилін және қалыңдығын анықтайды |
Border- bottom Border- left Border- right Border- top |
4 |
- |
Барлық 4 компонент элемент шекарасының түсін, қалыңдығын және стилін анықтайды |
Border- bottom-color Border- left- color Border- right- color Border- top- color |
4 |
- |
Элементтің бір шекарасының түсін анықтайды |
Border- bottom- style Border- left- style Border- right- style Border- top- style |
4 |
- |
Элементтің бір шекарасының стилін анықтайды |
Border- bottom- width Border- left- width Border- right- width Border- top- width |
4 |
- |
Элементтің бір шекарасының қалыңдығын анықтайды |
Border- color |
4 |
4 |
Элементтің барлық шекарасының түсі |
Border- style |
4 |
4 |
Элементтің барлық шекарасының стилі |
Border- width |
4 |
4 |
Элементтің балық шекарассының қалыңдығы |
Clip |
4 |
4 |
Позициялық элементтің көрінетін облысын анықтайды |
Color |
4 |
4 |
Элементтің алдыңғы қатардағы түсін анықтайды |
Cursor |
4 |
- |
Элементтен орналасқанда тышқан курсорының өзгеруі |
Display |
4 |
4 |
Элементтің документте көрінуін не көрінбеуін анықтайтын атрибут |
Filter |
4 |
- |
Элементке қолданылатын спецеффектілер |
Float |
4 |
4 |
Элементтің қай жағында текст жазылатынын анықтайды |
Font |
4 |
- |
Шрифтің бірнеше параметрлерін орнататын қысқартылған атрибут |
Font- family |
4 |
4 |
Шрифт қасиеттерін анықтайды |
Font- style |
4 |
4 |
Элементтің курсивті, қою немесе қарапайымдығын анықтайды |
Font- variant |
4 |
- |
Капителді жазу үшін қолданылады |
Font- size |
4 |
4 |
Элемент шрифтінің өлшемін көрсетеді |
Font- width |
4 |
4 |
Шрифт қоюлығы |
Height |
4 |
4 |
Элемент биктігі |
Left |
4 |
4 |
Элементтің сол жақ шетін анықтайды |
Letter- spacing |
4 |
- |
Элемент ішіндегі әріптер арақашықтығы |
Line-height |
4 |
4 |
Интерлиньяж (жол сызықтары арасындағы қашықтық) |
List- style |
4 |
- |
Тізім түрін және оның орналасуын анықтайды |
List- style- image |
4 |
- |
Маркерлер ретінде қолданылатын суретттерге көрсетеді |
List- style position |
4 |
- |
Тізім болатын маркер тексттік блоктың ішінде не сыртында екенін көрсетеді |
List- style type |
4 |
4 |
Маркер тізімінің түрі |
Margin |
4 |
4 |
Браузер шетіненэлемент шекарасына дейінгі қадамды көрсетеді |
Margin- bottom Margin- left Margin- right Margin- top |
4 |
4 |
Браузер шетінен элемент шекарасына дейінгі қадамды анықтайды |
Visibility |
4 |
4 |
Элементтің бетте көріну не көрінбеуін анықтайды |
White-space |
- |
4 |
Мәтіндегі браузерлер бос орныды тастауы |
width |
4 |
4 |
Блок ені |
z-index |
4 |
4 |
Басқа элементтерге қарағандағы орналасу тәртібін анықтайды |
Overflow |
4 |
- |
Элемент өлшемінен асып кетпеуін бақылайды |
Padding |
4 |
4 |
Элемент мазмұнынан шекарасына дейінгі қадамды анықтайды |
Padding- bottom Padding- left Padding- right Padding- top |
4 |
4 |
Төртеуі де элемент мазмұнынан шекарасына дейінгі қадамды анықтайды |
position |
4 |
4 |
Элемент позициясының типін анықтайды |
Vertical- align |
4 |
- |
Элементті тік орналастыру |
Top |
4 |
4 |
Элементтің жоғарғы шетін көрсетеді |
Text- transform |
4 |
4 |
әріптерді жазуға айналдырады |
Text- align |
4 |
4 |
Текстті түзету |
Text- decoration |
4 |
4 |
Текстті қосымша безендіру |
Text- indent |
4 |
4 |
Тексттік блоктың бірінші жолының қадамы |