Html тілінің негіздері

Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 70 бет
Таңдаулыға:

МАЗМҰНЫ

КІРІСПЕ 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

ҚОСЫМША 63

КІРІСПЕ

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

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

Сондықтан мен Delphi-дің мүмкіндіктерін пайдалана отырып «HTML-тілін оқыту» электронды оқулығын жасауды ойладым. Жасап шығарылған бағдарлама қолданушыға кез-келген уақытта HTML тілін толық қолдану жолдары мен бағдарламасын пайдалануға мүмкіндік береді.

Жұмыстың өзектілігі: HTML тілін Delphi программалау тілінің көмегімен қолданушыға қазақ тілінде тиімді қолдану әдістерін ашып жазып, олардың барлығын мысалдар келтіре отырып көрсету.

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

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

Жұмыстың жаңашылдығы: Электрондық оқулықтың қазақ тіліндегі нұсқасының жасалынып шығуы.

Жұмыстың құрылымы. Жұмыс кіріспеден, екі бөлімнен, қорытындыдан, әдебиеттерден және қосымшадан тұрады.

Бірінші бөлімде HTML тілінің тэгтерінің қызметтерінің мүмкіндіктері және негізгі құрылымы жөнінде мәліметтер келтірілген.

Екінші бөлімде «HTML-тілін оқыту» электрондық оқулық жасау үшін Delphi-дің мүмкіндіктерін қолданылады.

Қорытындыда жұмыстың нәтижелері баяндалған. Қосымшада бағдарламаны өңдеу процедуралары берілген.

1 HTML тілінің негіздері

Интернеттің бар мәліметтерінің, яғни барлық Web-парактарының бір ортақ қасиеті-олардың барлығы да HTML тілінде жазылған HTML тілінде Web-парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес HTML - гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.

HTML тілі World Wide Web қызмет бабымен бірге дами отырып, Web парақтарының ең жақсы деген мү мкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырылды. Ол World Wide Web жүйесінің негізі бола отырып, оның өте кең тарауына себепші болды. World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады

Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент (anchor) орналасқан мәтін. Ол мәтін ішіне сурет, дыбыс енгізу, мәтінді безендіру, пішіндеу (форматтау) ісін орындайтын немесе осы күжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз- келесі көрсетілетін кұжат бөлігі калай бейнеленетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер (browsers) деп аталатын арнайы көрсету программалары қолданылады. Гипермәтін экранда белгіленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.

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

HTML тілінін атқаратын қызметі

Web парақтары экранда ықшам түрде безендіріліп көрсетілгенмен HTML тілі мәтін ісі пішімдеп көрсететін тілге жатпайды. Өйткені әрбір тұтынушы әртүрлі компьютерлер пайдаланады. Сол себептен ғана зауыттан шыккан бір компьютердің Windows жүйесін жұмыс істей алатын броузері бар болса екінші бір тұтынушы компьютері тек MS DOC жүйесінде жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету мүмкіндіктері әртүрлі болғандыктан, бір файл екеуіне екі түрлі болып көрсетіледі. Ал, үшін компьютердегі Web-парақтарынын мәтіндері зағиптарға арналған Брайль қаріптері аркылы берілсе, оның нәтижесі тіпті басқаша болады.

Құжаттарды әрбір тұтынушының әртүрлі құрылғыларында және әртүрлі броузер программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу (форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол Интернеттегі мәтін бөліктерінің аткаратын кызметін анықтап, соларды әрбір түтынушыға бейімдеп жеткізе алатын құжат функционалды түрде белгілейтін тіл болып табылады.

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

HT ML тілінде мәтінді пішімдеу тәсілдерінің де бар екенін айтып кету керек, бірақ алғашқы тұрғыдан алғанда құжаттың мазмұны мен оны безендіріп көрсету жолдарының айырмашылығы сакталып отырады. Мысалы, тілдің соңғы HTML 4. 0 нұсқасында мәтін пішімдеу командаларын пайдалану ұсынылмаған.

E-mail бұл электрондық поштаның ағылшынша аталуы, ол-желі қызметтерінің ішіндегі электрондық мәлімет алмасудың ең негізгісі. Электрондық пошта көмегімен барлық құрылықтарда тұратын адамдар бір-біріне электрондық хаттар мен файлдар жібере алады.

Usenet жүйесінің бірнеше анықтамалары бар, олар - тармакталған дискуссия клубты телеконференция, жаңалықтар тобы. Мұның электрондық поштадан айырмашылығын мәліметті бір адамға ғана емес, бірнеше абоненттер тобына (телеконференциялар) жақтайсыз. Әр түрлі мәселелерді талқылау кезінде конференцияға қатынасушылар тең құқықты болып саналады. Әрбір телеконференция бір тақырыпқа(ғылымда өнерде, спорта, т. с. с. арналады және оның өзіндік адресі болады, мұндағы қарастырылатын мәселелер ауқымы әр түрлі бола береді - өте аукымды тақырыптан (бір сұрақтың барлық жағы) тек бір ғана сұраққа дейін (мысалы, филателия) қамтылады.

ISQ (I seek you - мен сені іздеймін) - желі тұтынушыларына накты уақыт кезеңнен (масштабында) хат-хабарлармен алмасып, бірден чат (chat- әңгіме) құрып, файл жіберуге әңгімелесуге мүмкіндік беретін қызмет түрі.

IRC (Internet Relay Chat) - нақты уақыт кезеңінде телеконференция өткізудің бір түрі тұтынушылардың бір-бірінен әңгіме-дүкен құруға болатын қызметі. IRC-сервсрлері мен IRC-клиенттері көмегімен тұтынушылар бір-бірімен «виртуальды» әңгіме өткізуді перне тақтада сөздерді теру арқылы жүргізеді.

IP-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды өте тиімді деп айтуға болмас, бұл тек TCP/IP хаттамалары негізінде электрондық мәліметті алмасудың жеке бір түрі ғана. Адамның дауысы цифрлы файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы байланысынын ұлттык операторы болып саналатын «Қазактелеком» ААҚ-ы осы байланыс түрін практикада пайдаланып жүр.

1. 1 Мәтіндермен жұмыс

Әріптер құру.

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

1-мысал. Әріпті сурет көмегімен жаса

Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері арқылы тігінен және көлденеңнен беріледі.

Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады. Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.

Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені сызу керек.

2-мысал. Мәтін түріндегі әріп .

<table align=left border=0 cellspacing=0 celpadding=0>
<tr><td><font size=7>"Д</font></td></tr>
</table>
Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─ Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.

Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды. Бұл жағдайда код HTML айқындалмайды.

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

<head>
<style type="text/css">
. letter { font-family: Arial; font-size: 24pt; color: navy }
</style>
</head>
<table align=left border=0 cellspacing=0 celpadding=0>
<tr><td><span class=letter>"Д</span></td></tr>
имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─ Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.

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

4-мысал. Өрістегі әріп.

<table width=100% border=0>
<tr>
<td valign=top>
<font size=7>В</font>
немесе
<span class=letter>В</span>
немесе
<img src=v. gif width=50 height=50> </td>
<td valign=top>

Кескіннің мәтінмен ағуы

Веб парақтар беттеулеріндегі (верстка) танымал мүмкіндіктердің бірі, браузер терезесінің шетінде кескін орналасқан, ал мәтін оның басқа жақтарында айнала орналасқан осы кескіннің мәтінмен ағуы қолданылады

Ағуды құру үшін бірнеше әдістер бар, олар НТМL тегтерімен байланысқан сияқты стильдерді қолданумен де байланысады.

Align mega IMG параметрін қолдану.

Кескінді түзету Align mega IMG параметірі мен анықталады. Бұл параметр қай терезенің жанында сурет орналасатындығын береді, және сол кезде анықтай отырып мәтінің ағу әдісін бірге қарастырады. Оң жақ шеті бойынша кескінді тузету және сол жақ бойынша ағуды беру үшін right мәнін және сәйкесінше оған қарама қарсы left мәнін орнатады. Олар ағатын мәтінен кескінге дейінгі ара қашықтықты анықтайды. Бұл атрибуттарсыз кескін мен мәтін бір - біріне тым жабысып тұратындығы 1-мысалда көрсетілген.

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

<img src=sample. gif width=50 height=50 hspace=10 vspace=10 align=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>

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

Кестелерді қолдану

Шекаралары көрінбейтін кесте - беттеудің танымал әдістерінің бірі болып табылады. Ізделінді нәтижені алу үшін кескіндегідей мәні мен қолданысы бар TABLE тегінің align қасиеттерін пайдаланамыз. Бірақ кестелерді көрсету үшін және басқару үшін параметірлер көбірек екен, бұл мәтінің ағуы бойынша кескінмен салыстырғанда артықшылық сипатында болып отыр.

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

<table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0>
<tr>
<td><img src=sample. gif width=50 height=50></td>
</tr>
</table>
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.

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 коды

Мағынасы

Мысал

HTML коды: <p>мәтін </p>

Мағынасы: Сол жақ бойынша түзетілген жаңа параграфты үнсіз келісім бойынша қосады. Параграф алдында автоматты түрде бос жорл қосылады.

Мысал: Мәтін

HTML коды: <p align=left> мәтін </p>

Мағынасы: Сол жақ бойынша түзету

Мысал: Мәтін

HTML коды: < p align=right> мәтін </p>

Мағынасы: Оң жақ бойынша түзету

Мысал: Мәтін

HTML коды: <p align=center> мәтін </p>

Мағынасы: Орталық бойынша түзету

Мысал: Мәтін

HTML коды: <p align=justify> мәтін </p>

Мағынасы: Ені бойынша түзету

Мысал: Ені бойынша мәтін

HTML коды: <nobr> мәтін </nobr>

Мағынасы: Егер мәтін браузер терезесінен үлкен болса, онда жолдардың автоматты ауысуын өшіреді.

Мысал: Мәтін

HTML коды: мәтін <wbr>

Мағынасы: Егер NOBR тег. қолданылса, браузердің белгіленген жеріне жолдарды ауыстыруға мүмкіндік береді.

Мысал: Мәтін

HTML коды: <center> мәтін </center>

Мағынасы: Орталық бойынша түзету

Мысал: Мәтін

HTML коды: <div align= center> мәтін </div>

Мағынасы: Орталық бойынша түзету

Мысал: Мәтін

HTML коды: <div align=left> мәтін </div>

Мағынасы: Сол жақ бойынша түзету

Мысал: Мәтін

HTML коды: <div align= right > мәтін </div>

Мағынасы: Оң жақ бойынша түзету

Мысал: Мәтін

HTML коды: <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 пробелін қолдану;

... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.