Гипермәтін жане 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 Мб (Скачать документ)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Кесте кескінің өзінен шығатын көрінбейтін шекараны құрады, ол мәтінге жақындауға жол бермейді. Шегініс кестенің ені және биіктігімен анықталады. Мысалда сурет сол жақ шеті бойынша түзетілген, себебі бұл әдіс кестеге орнатылған. Суреттен мәтінге дейінгі көлденең ара қашықтық кестенің енімен кескін енінің айырмашылығына тең. Ал тігінен шегініс мүлдем басқаша, үнемдеу бойынша ұяшық құрамындағыларды түзету тігінен ортасы бойынша орындалады. Сондықтан егер, TD тегінің valign=top параметрі берілсе, тігінен бойынша шегіністер көлденеңіненге қарағанда екі есе аз болады.

Стильдерді қолдану

Суреттің мәтінмен ағуы үшін float параметрін қолдануға болады. Right мәні кескінді түзетуді атқарады, яғни браузер терезесінің оң жақ шеті бойынша, ол мәтінді суреттің сол жағына орналастырады. Ал left мәні керісінше сол жақ шеті бойын түзетеді де мәтінді суреттің оң жағынан қояды.

3- мысал. Стильдерді қолдану

<img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

Мәтінді түзету

Мәтінді сыртқы көрінісіне және абзац жақтарына байланысты сол жақ, оң жақ, орталық, ені бойынша түзетеді.Ол 1- кестеде көрсетілген.

1-кесте.

Сол жақ бойынша түзету	Оң жақ бойынша түзету	Орталық бойынша түзету	Ені бойынша түзету
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

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

2-кесте.

HTML коды	Мағынасы	Мысал
<p>мәтін </p>	Сол жақ бойынша түзетілген жаңа параграфты үнсіз келісім бойынша қосады. Параграф алдында автоматты түрде бос жорл қосылады.	Мәтін
<p align=left> мәтін </p>	Сол жақ бойынша түзету	Мәтін
< p align=right> мәтін </p>	Оң жақ бойынша түзету	Мәтін
<p align=center> мәтін </p>	Орталық бойынша түзету	Мәтін
<p align=justify> мәтін </p>	Ені бойынша түзету	Ені бойынша мәтін
<nobr> мәтін </nobr>	Егер мәтін браузер терезесінен үлкен болса, онда жолдардың автоматты ауысуын өшіреді.	Мәтін
мәтін <wbr>	Егер NOBR тег. қолданылса, браузердің белгіленген жеріне жолдарды ауыстыруға мүмкіндік береді.	Мәтін
<center> мәтін </center>	Орталық бойынша түзету	Мәтін
<div align= center> мәтін </div>	Орталық бойынша түзету	Мәтін
<div align=left> мәтін </div>	Сол жақ бойынша түзету	Мәтін
<div align= right > мәтін </div>	Оң жақ бойынша түзету	Мәтін
<div align=justify> мәтін </div>	Ені бойынша түзету	Ені бойынша мәтін

Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген, сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін енгізу керек.

(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл тега DIV жағдайында болмайды.

Сөздер арасындағы бос орын.

HTML-дің ерекшелігі мынада, сөз арасында пробелдер саны қаншалықты болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз арасын алшақтату, үлкейту керек болады. Қаріптің көлемі FONT көмегімен немесе стильдерді қолдану арқылы өзгеретіні белгілі. Кейде пробелді көбірек қою туралы ой келеді. Ол үшін мына конструкцияны қолдану керек.

Обещаем<span style="font-size: 150%"> </span>обещать<span style="font-size: 150%"> </span>не<span style="font-size: 150%"> </span>обещать!

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

Мәселені бұдан жақсырақ шешу үшін келесі кеңестер ұсынылады.

Бөлінбейтін &nbsp пробелін қолдану;

&nbsp символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда пробель қойылғаны үшін таңдалады. Сондықтан да бұндай пробельдің он шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ <көрсетеді> деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де көрінбейді. Ол 1-мысалда көрсетілген.

1-мысал. &nbsp символының қолданылуы

      Мен сіз үшін өз жұмысымды орындамаймын!

Мысалда абзац төрт пробель арқылы қойылған: біреуі – кәдімгі және үшеуі -   символының көмегімен. Пробельдің мұндай көлемі базалық қаріп көмегімен сәйкес келеді.

Бөлінбейтін пробелді қолдану белгіленген қолайсыз жағдайлармен қатар жүреді. Сөздердің араларын бүкіл слайд мәтінінде өзгерту қажет деп санаңыз. Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз арасындағы пробелдің түрі стиль болып табылады. [1,2].

Стильдерді қолдану

Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және басқа да бірліктермен қойыла алады.

2-мысал. word-spacing атрибутын қолдану

<span style=” word-spacing: 10px”>Піл + жақсы тағам = екі піл</span>

Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі. Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне қолдануға болады. Ол 3-мысалда көрсетілген.

3-мысал. Стильдерді қолдану

<html>
<head>
<style>
P { word-spacing: 10px }
</style>
</head>

<body>
<p>-Булочку надо?</p>
<p>-Спасибо, не надо!</p>
<p>-Не надо?! Спасибо!</p>
</body>
</html>

Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына ешқандай шегінулер қойылмайды.

Текстің астын сызуды тудыру

Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл үшін border – bottem параметірін қолданатын жаңа стиль шығару керек.Ол мәтіннің астынан сызық шығарады.

мысал. Пунктирлі сызықты жіберуді қабылдау.

<html>
<head>
<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
</style>
</head>
<body>
<a href=1.html>Подчеркнутая ссылка</a>
</body>
</html>

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

Контекстік селекторлар

Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана анықтауға болады.

Қарапайым селекторларды қолдану

B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }

Контекстік селекторлар пробелмен ажыратылған жай селекторлардан тұрады.

B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }

Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер ол В тегінің ішінде болса.

2-мысал. Контекстік селекторлар

<html>
<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
</style>
</head>

<body>
<b>Жирный шрифт</b><br>
<i>Курсивный текст</i><br>
<b><i>Жирный курсивный текст</i></b><br>
<i><b>Курсивный и жирный текст</b></i>

</body>
</html>

Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст

Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.

В, І, Н1, Р. Cite {color: navy;}

Мысалдағы көк түс қолданылады:

В тегінің ішіне орналастырылған І тегінің курсивіне
Н1 барлық тегіне
Р тегі параграфіндегі Cite класына

1.2 Сілтемелер

Сілтемені қалай жасауға болады?

Сілтемені құру үшін браузерге, сілтеме деген не?, сілтеме жасайтын құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL) документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.

1-мысал. Абсолютті сілтемелерді қолдану

<html>
<body>
<a href=www.yandex.ru>Іздейтін жүйе Яндекс</a>
</body>
</html>

Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе адреске қатысты құрылады.

Мұндай адрестер мысалдары;

/demo/

Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе demo папкасында орналасқан index.html файлы болмаса браузер, берілген каталогта бар файлдар мазмұнын көрсетеді.

/ images /pic.gif

Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді. Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта орналасқан ../help/me.html

Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы жоғары деңгейге өтуін білдіреді.

manual /info.html

Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде орналасқанын білдіреді.

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

<html>
<body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>
</body>
</html>

Браузер енін анықтау.

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

Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі қадам қолданылады. Internet Explorer және Opera-да еннің мәні document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас анықталады, тек Width – ол Нeight – қа айналады. Қорытындысында, JavaScript-те жазылған функциялар 1-мысалда көрсетілгендей түрге ие болады.

1- мысал. Ені мен биіктігін анықтау үшін функциялар

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;
</script>

Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті орналастырылуы бар қабат құру қажет.

2- мысал. Қабат құру

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

Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс. Егер қабатты мәтіннен төмен орналастыру керек болса –теріс мән пайдаланылады.

Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.

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