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

КІРІСПЕ
1 HTML ТІЛІНІҢ НЕГІЗДЕРІ
1.1 Мәтіндермен жұмыс
1.2 Сілтемелер
1.3 Бейне суреттермен жұмыс
1.4 Тізімдер, кестелер, стильдер, түстер, фрейімдер, тегтер
1.5 НTML тілінің қосымша мүмкіндіктері

2 «HTML. ТІЛІН ОҚЫТУ» ЭЛЕКТРОНДЫҚ ҚАБЫҚШАСЫН ЖАСАУ
2.1 Delphi.да жоба құру жолдары
2.2 Объектілер инспекторы терезесі
2.3 Мәтіндермен жұмыс істеуде пайдаланылған компоненттер
2.4 Жұмыс сипаты

ҚОРЫТЫНДЫ
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР
ҚОСЫМША
КІРІСПЕ


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

Жұмыстың жаңашылдығы: Электрондық оқулықтың қазақ тіліндегі нұсқасының жасалынып шығуы.
Жұмыстың құрылымы. Жұмыс кіріспеден, екі бөлімнен, қорытындыдан, әдебиеттерден және қосымшадан тұрады.
Бірінші бөлімде HTML тілінің тэгтерінің қызметтерінің мүмкіндіктері және негізгі құрылымы жөнінде мәліметтер келтірілген.
Екінші бөлімде «HTML-тілін оқыту» электрондық оқулық жасау үшін Delphi-дің мүмкіндіктерін қолданылады.
Қорытындыда жұмыстың нәтижелері баяндалған. Қосымшада бағдарламаны өңдеу процедуралары берілген.
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР

1. Б.Бөрібаев, Б.Нақысбеков, Г.Мадиарова, “Информатика және есептеуіш негіздері” Алматы «Мектеп» 2005.
2. Вирт Н. Алгоритмы и структуры данных: Пер. с англ. — М.:
Мир, 1989. — 360 с: ил.
3. Зелковиц М., Шоу А., Гэннон Дж. Принципы разработки
программного обеспечения: Пер. с англ. — М.: Мир, 1982. —
386 с: ил.
4. Культин Н. Б. Программирование в Turbo Pascal 7.0 и Delphi /
Второе издание, переработанное и дополненное. — СПб.:
БХВ — Санкт-Петербург, 1999. — 416 с: ил.
5. Культин Н. Б. Программирование на Object Pascal в Delphi 5.
СПб.: БХВ — Санкт-Петербург, 1999. — 464 с: ил.
6. Практическое руководство по программированию: Пер. с англ.
Б. Мик, П. Хит, Н. Рашби и др.; под ред. Б. Мик, П. Хит,
Н. Рашби. — М.: Радио и связь, 1986. — 168 с: ил.
7. Фокс Дж. Программное обеспечение и его разработка: Пер.
с англ. — М.: Мир, 1985. — 368 с: ил.
8. Энциклопедический словарь юного математика. Сост. А. П. Са¬
вин. — М.: Педагогика, 1989.—352 с: ил.
9. Язык компьютера: Пер. с англ. / Под ред. и с предисл.
В. М. Курочкина. — М.: Мир, 1989. — 240 с: ил.
10. В.Гофман, А.Хомоненко «Delphi 5». Санкт-Петербург, «БХВ-Петербург» 1999г.
11. В.Гофман, А.Хомоненко «Delphi 6» Санкт-Птербург, «БХВ-Петербург» 2001г.
12. Н.Культин. «Основы программирования в Delphi 7». «БХВ-Петербург». 2003г.
13. В. Гофман, А. Хомоненко. Delphi 5. М: “Кудиц - Образ”, 2000.
14. А. Я. Архангельский. Програмирование в Delphi 6. М: “Бином”, 2002.
15. Баженова И. Ю. Delphi 7 самоучитель програмиста. Учебно – справочное пособье. М: “ Кудиц - Образ ”, 2003.
16. Н. Культин. Основы программирование в Object Pascal на Delphi 5. М: “Бином”, 1999.
17. Шумаков П. В. Delphi 3 и разработка базы данных. С – Петербург: “Номидж”, 1998.
18. Фараонов В. В. Delphi 5. Учебный курс.-М.: «Номидж», 2000.-608 с., ил
19. С.Бобровский «Delphi 7 учебный курс» СПб: Питер, 2003.
20. А. Я. Архангельский. Програмирование в Delphi 7. М: “Бином”, 2004.
        
        МАЗМҰНЫ
КІРІСПЕ 3
1 HTML тілінің негіздері ... ... ... ... Сілтемелер 13
1.3 Бейне суреттермен жұмыс 25
1.4 Тізімдер, кестелер, стильдер, түстер, фрейімдер, тегтер ... НTML ... ... ... 34
2 «HTML- ... ... электрондық қабықшасын жасау 56
2.1 Delphi-да жоба құру ... ... ... ... ... 57
2.3 Мәтіндермен жұмыс істеуде пайдаланылған компоненттер ... ... ... 58
ҚОРЫТЫНДЫ 61
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР 62
ҚОСЫМША 63
КІРІСПЕ
Бүгінгі таңда әлеуметтік-экономикалық жағдайы ақпараттық технологияны
өмірдің ... ... ... ... сипатталады. Студенттердің
танымдық іс-әрекеттері күшейіп, ... ... тез ... ... ... ... сақтау және өңдеу жұмыстарын соңғы жылдарда
шыққан программалық өнімдер ... ... әрі ... ... ... мен Delphi-дің мүмкіндіктерін пайдалана отырып «HTML-тілін
оқыту» электронды оқулығын жасауды ойладым. Жасап шығарылған бағдарлама
қолданушыға ... ... HTML ... ... ... ... ... пайдалануға мүмкіндік береді.
Жұмыстың өзектілігі: HTML тілін Delphi ... ... ... ... ... ... ... әдістерін ашып жазып,
олардың барлығын мысалдар келтіре отырып көрсету.
Дипломдық жұмыстың мақсаты:«HTML - ... ... ... ... ... құру, қолданушыға ыңғайлы түрде өңдеу және программалауда
тиімді пайдалану ... ... Осы ... жету үшін ... ... ... Delphi программалау тілін терең оқып үйрену;
➢ Арнайы оқулықтармен танысу;
➢ Delphi ортасында ... ... ... үшін қажетті
компоненттерді, олардың қасиеттерін оқып үйрену;
➢ Delphi-де «HTML тілін оқыту» электрондық оқулық құру
Жұмыстың жаңашылдығы: Электрондық ... ... ... ... ... ... Жұмыс кіріспеден, екі бөлімнен, қорытындыдан,
әдебиеттерден және қосымшадан тұрады.
Бірінші ... HTML ... ... ... ... ... құрылымы жөнінде мәліметтер келтірілген.
Екінші бөлімде «HTML-тілін оқыту» электрондық оқулық жасау үшін Delphi-
дің мүмкіндіктерін қолданылады.
Қорытындыда жұмыстың нәтижелері ... ... ... ... ... HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web-парактарының бір ... ... да HTML ... жазылған HTML тілінде Web-парақтар
жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес
HTML - ... ... ... Ол кәдімгі мәтіндерді Web-парақтар
түрінде бейнелеуге арналған ережелер жиынын анықтайды.
HTML тілі World Wide Web ... ... ... дами ... ... ең ... деген мүмкіндіктерін жүзеге ... оны ... ... толықтырылып отырылды. Ол World Wide Web жүйесінің
негізі бола отырып, оның өте кең ... ... ... World Wide ... ... тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML
тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға ... - ... ... ... мақсатында ішіне арнаулы
код, яғни ... ... (anchor) ... ... Ол ... ... сурет,
дыбыс енгізу, мәтінді безендіру, пішіндеу (форматтау) ісін орындайтын
немесе осы күжаттың ... ... ... бар ... нүкте ретінде
қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз- келесі
көрсетілетін кұжат бөлігі калай бейнеленетінін анықтайтын айрықша кодты ... ... ... ... бейнелеу үшін броузер (browsers) деп
аталатын арнайы ... ... ... ... экранда
белгіленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп,
тышқанды шертсек (ENTER ... ... онда ... ... ... тұрған) басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі ... ... Web ... басқа тораптарда орналасып, бейнежазба,
сурет, жазылған дыбыс күйінде болуы ... ... ... ... ... белгілейтін мүмкіндікті
беретін HTML miлі. Оның дұрыс нәтиже ... ... ... өз
заңдылықтары мен ережелері бар
HTML тілінін атқаратын ... ... ... ... ... ... ... HTML
тілі мәтін ісі пішімдеп көрсететін тілге жатпайды.Өйткені ... ... ... пайдаланады. Сол себептен ғана зауыттан шыккан бір
компьютердің Windows жүйесін жұмыс істей алатын броузері бар ... ... ... ... тек MS DOC жүйесінде жұмыс істейтін ескі броузерді
пайдалануы мүмкін. Бұл екеуінің көрсету ... ... ... файл ... екі ... ... ... Ал, үшін компьютердегі Web-
парақтарынын мәтіндері зағиптарға арналған Брайль қаріптері аркылы берілсе,
оның нәтижесі тіпті басқаша болады.
Құжаттарды ... ... ... ... және ... ... ... ескерсек, HTML тілін мәтіндерді пішімдеу
(форматтау) тәсілдерін жазуға арналған тіл деп ... ... ... ... бөліктерінің аткаратын кызметін анықтап, соларды әрбір
түтынушыға ... ... ... ... ... ... ... тіл
болып табылады.
Мысалы, егер мәтін тақырыбын бейнелеу керек болса онда HTML коды ... ... ... ... ... белгілеу коды алынған соң,
оны броузер-программа өз мүмкіндіпн пайдаланып, оны үлкейтіп ірі ... ... ... ... ... ... ... қана көрсетуіне де
болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы аркылы берілетін болса,
онда такырып ... ... ... ... ... одан сон ... ... да мүмкін.
HT ML тілінде мәтінді пішімдеу тәсілдерінің де бар екенін айтып кету керек,
бірақ алғашқы тұрғыдан ... ... ... мен оны ... ... ... ... отырады. Мысалы, тілдің соңғы HTML 4.0
нұсқасында мәтін пішімдеу командаларын пайдалану ұсынылмаған.
E-mail бұл ... ... ... ... ... ішіндегі электрондық мәлімет ... ең ... ... ... барлық құрылықтарда тұратын адамдар бір-біріне
электрондық хаттар мен ... ... ... ... ... ... бар, олар - тармакталған
дискуссия клубты телеконференция, жаңалықтар тобы. Мұның ... ... ... бір ... ғана ... бірнеше абоненттер
тобына (телеконференциялар) жақтайсыз. Әр түрлі мәселелерді талқылау
кезінде конференцияға қатынасушылар тең ... ... ... Әрбір
телеконференция бір тақырыпқа(ғылымда өнерде, спорта, т.с.с. арналады және
оның өзіндік адресі ... ... ... ... ауқымы әр
түрлі бола береді - өте ... ... (бір ... ... жағы) тек
бір ғана сұраққа дейін (мысалы, филателия) қамтылады.
ISQ (I seek you - мен сені ... – желі ... ... ... ... хат-хабарлармен алмасып, бірден чат (chat- әңгіме)
құрып, файл жіберуге әңгімелесуге мүмкіндік беретін қызмет түрі.
IRC (Internet Relay Chat) - ... ... ... ... бір түрі ... бір-бірінен әңгіме-дүкен құруға болатын
қызметі. IRC-сервсрлері мен IRC-клиенттері көмегімен тұтынушылар бір-
бірімен «виртуальды» әңгіме ... ... ... ... теру ... Интернетте телефондағы дабыс арқылы мәлімет алмасуды
өте тиімді деп айтуға болмас, бұл тек TCP/IP ... ... ... ... жеке бір түрі ... ... дауысы цифрлы
файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, ... ... ... ... ... ... ... Республикасы
байланысынын ұлттык операторы болып саналатын «Қазактелеком» ... ... ... практикада пайдаланып жүр.
1.1 Мәтіндермен жұмыс
Әріптер құру.
Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі,
базалық сызық одан бірнеше жол ... ... Әріп ... ... ... Егер бұл ... басқа айқын белгілер ... ... ... ... ... ... және басқа заттар қолданылады. Бұл
әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере ... Егер ... тура ... ... ... оған ... де оң ... түзетілген
сурет жақсы келеді.
1-мысал. Әріпті сурет көмегімен жаса
Әріппен мәтін арасындағы ... vspace және hspace ... ... және ... ... ... ... лайық болуы келесідегідей: кез келген қаріп пенен
әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF ... ... ... бұл ... ... ... ... егер әріп сайтте көп қолданылса, көптеген суреттерді әр ... ... ... ... редактрлеудің мүмкіндігі қиындайды. Жай
ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.
Мәтіндегі ... әріп ... ... ... сол ... ... кестені
сызу керек.
2-мысал. Мәтін түріндегі әріп.



Димон, сенде транплюкаторға ұқсас бір нәрсе бар ... ... ... ... ...... ... өзі бар!”. Осы сөзді айтып балконға
шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол ... ... ... және ... bgcolor және ... қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы
реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль ... ... код HTML ... ... ... { ... Arial; font-size: 24pt; color: navy }




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



В
немесе
В
немесе


Кескіннің мәтінмен ағуы
Веб парақтар беттеулеріндегі (верстка) танымал мүмкіндіктердің бірі,
браузер ... ... ... ... ал ... оның ... айнала орналасқан осы кескіннің мәтінмен ағуы қолданылады
Ағуды құру үшін бірнеше әдістер бар, олар НТМL тегтерімен байланысқан
сияқты стильдерді қолданумен де ... mega IMG ... ... ... Align mega IMG ... мен ... Бұл ... терезенің жанында сурет орналасатындығын береді, және сол кезде анықтай
отырып мәтінің ағу әдісін бірге қарастырады. Оң жақ шеті ... ... және сол жақ ... ... беру үшін right мәнін және сәйкесінше
оған қарама қарсы left мәнін орнатады. Олар ағатын мәтінен кескінге ... ... ... Бұл ... ... мен ... бір – ... жабысып тұратындығы 1-мысалда көрсетілген.
1- мысал. Кескін қасиеттерін қолдану


Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy ... ... ut lacreet dolore magna aliguam erat ... Ut wisis
enim ad minim veniam, quis nostrud exerci tution ... ... nisl ut aliquip ex ea commodo ... ... ... ... қашықтық hspace параметірімен басқарылады, ол
бір уақытта кескіннен солға және оңға бос орынды ... ... ... ... осы ... ... ... мәні тұрғызылады. Осы
ерекшеліктен құтылу үшін Кестены қолдануға болады.
Кестелерді қолдану
Шекаралары көрінбейтін кесте – беттеудің танымал ... бірі ... ... ... алу үшін кескіндегідей мәні мен қолданысы бар
TABLE тегінің align қасиеттерін ... ... ... ... үшін
және басқару үшін параметірлер ... ... бұл ... ағуы ... ... артықшылық сипатында болып отыр.
2- мысал. Кестелерді қодану





Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem ... euismod ... ut lacreet dolore magna aliguam erat ... ... enim ad minim veniam, quis nostrud exerci tution ... ... nisl ut aliquip ex ea commodo consequat.
| |
| ... ipsum dolor sit amet, ... ... elit, sed diem nonummy nibh |
|euismod tincidunt ut lacreet dolore magna ... erat ... Ut wisis enim ad ... veniam, quis nostrud exerci tution ... suscipit lobortis nisl ut ... ex ea commodo consequat. |
Кесте кескінің өзінен ... ... ... ... ол ... жол ... Шегініс кестенің ені және биіктігімен анықталады.
Мысалда сурет сол жақ шеті ... ... ... бұл әдіс ... ... ... дейінгі көлденең ара қашықтық кестенің енімен
кескін ... ... тең. Ал ... ... мүлдем басқаша,
үнемдеу бойынша ұяшық құрамындағыларды ... ... ... бойынша
орындалады. Сондықтан егер, TD тегінің ... ... ... ... ... ... қарағанда екі есе аз болады.
Стильдерді қолдану
Суреттің мәтінмен ағуы үшін float параметрін қолдануға ... ... ... ... ... яғни ... терезесінің оң жақ шеті
бойынша, ол мәтінді суреттің сол жағына орналастырады. Ал left ... сол жақ шеті ... ... де ... суреттің оң жағынан қояды.
3- мысал. Стильдерді қолдану


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


Мәтінді түзету
Мәтінді ... ... және ... жақтарына байланысты сол жақ,
оң жақ, орталық, ені ... ... 1- ... ... жақ ... жақ бойынша |Орталық бойынша|Ені бойынша |
|түзету ... ... ... ... ipsum |Lorem ipsum |Lorem ipsum |Lorem ipsum ... sit amet,|dolor sit amet,|dolor sit amet,|dolor sit amet,|
|consectetuer |consectetuer |consectetuer |consectetuer ... ... ... ... ... sed diem |elit, sed diem |elit, sed diem |elit, sed diem ... nibh |nonummy nibh |nonummy nibh |nonummy nibh ... |euismod |euismod |euismod ... ut ... ut ... ut ... ut |
|lacreet dolore |lacreet dolore |lacreet dolore |lacreet dolore |
|magna aliguam |magna aliguam |magna aliguam |magna aliguam ... ... |erat ... |erat ... |erat volutpat. |
Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін
жылжиды, ал оң жағы ... Оң және ... ... ... негізінен
тақырыпшаларда қолданылады. Ескертетін жағдай, мәтінді ені бойынша түзету
кезінде сөздер арасында үлкен интервалдар пайда болуы 2-кестеде
көрсетілген.
2-кесте.
|HTML коды ... ... ... |Сол жақ ... ... |
| ... жаңа | |
| ... үнсіз келісім | |
| ... ... ... |
| ... ... ... | |
| |бос жорл ... | |
| ... |Сол жақ ... ... ... |
|< p ... мәтін |Оң жақ бойынша түзету |Мәтін |
| | | |
| ... ... ... түзету |Мәтін |
| | | |
| ... |Ені ... ... |Ені ... мәтін |
| | | |
| ... ... ... ... ... |
| ... ... болса,| |
| ... ... ... | |
| ... ... | ... ... NOBR тег. ... |
| ... браузердің | |
| ... ... | |
| ... ... | |
| ... ... | |
| ... ... бойынша түзету |Мәтін |
| ... ... ... ... |
| | | |
| ... |Сол жақ ... түзету |Мәтін |
| | | |
| ... жақ ... ... |Мәтін |
| | | |
| ... ... ... |Ені бойынша мәтін |
| | | ... сол жақ ... ... ... ... ... берілген,
сондықтан оны қайта берудің қажеті жоқ. Осыдан ... ... ... ... Р) және (тег DIV) ... ... негізгі айырмашылықтар
мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл
тега DIV жағдайында болмайды.
Сөздер арасындағы бос ... ... ... сөз ... пробелдер саны қаншалықты
болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз ... ... ... ... Қаріптің көлемі FONT көмегімен немесе
стильдерді қолдану арқылы өзгеретіні ... ... ... ... ... ой ... Ол үшін мына конструкцияны қолдану керек.
Обещаем обещать не ... ... ... болып көрінеді, ал екіншіден бос орын көлемі көлденең
ғана емес, тігінен де өзгереді. Сондықтан ... ... ... ... ... ... шешу үшін ... кеңестер ұсынылады.
Бөлінбейтін   пробелін қолдану;
  символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда
пробель ... үшін ... ... да ... ... он
шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ
деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де ... Ол ... ...   ... ...     Мен сіз үшін өз жұмысымды ... ... төрт ... ... ... біреуі – кәдімгі және үшеуі -
  символының көмегімен. Пробельдің ... ... ... ... ... ... ... қолдану белгіленген қолайсыз жағдайлармен қатар
жүреді. Сөздердің ... ... ... мәтінінде өзгерту қажет деп санаңыз.
Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз
арасындағы ... түрі ... ... ... ... ... ... арасындағы қашықтықты жасау үшін word-spacing ... Ол ... (рх), ... (рt), ... (mm) ... да ... қойыла алады.
2-мысал. word-spacing атрибутын қолдану
Піл + жақсы тағам = екі піл
Онда соңғы рет көрсетілген ... және ... ... ... бір рет ... ... сипаттауға және веб-парақтың элементтеріне
қолдануға болады. Ол 3-мысалда көрсетілген.
3-мысал. Стильдерді ... { ... 10px ... ... не ... ... ... жасау үшін text-indent параметрлері қолданылады және жолдың алдына
ешқандай шегінулер қойылмайды.
Текстің астын сызуды тудыру
Жіберудегі текстің ... сызу ... ... байланысты басқа да
безендіру ... ... ... ... ... үшін ... ... астын сызуды ешқашан қолданбау керек. Бірақ астын
сызудың әр түрін ... ... ... ... ... ... border – bottem ... қолданатын жаңа стиль шығару керек.Ол
мәтіннің астынан сызық шығарады.
1- мысал. Пунктирлі ... ... ... {color: ... {color: ... { text-decoration: none; border-bottom: 1px dashed blue; }



Подчеркнутая ссылка


Мысалда, жіберілетін стиль құрылады, онда ... ... ... асты ... көк ... ... ... - парақтар құрған кезде бір тегтен кейін қатар екінші ... тура ... ... қою ... стилін ол курсивті болғанда ғана
анықтауға болады.
Қарапайым селекторларды қолдану
B { font-family: Arial; font-weight: bold; color: navy; }
I { ... italic; ... ... ... ... жай селекторлардан
тұрады.
B I { font-family: Arial; font-weight: bold; color: navy; font-style:
italic; }
Мысалдағы курсивті қою Arial шрифті көк ... І ... ... ... ... В ... ... болса.
2-мысал. Контекстік селекторлар



B { font-weight: bold; }
I { font-style: italic; }
B I { ... Arial; ... bold; color: navy; ... ... шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст


|Жирный шрифт ... ... ... ... ... ... и ... ... ... ... топтастырылған контестік селекторларды қолдануға болады.
В, І, Н1, Р. Cite {color: ... көк түс ... В ... ішіне орналастырылған І тегінің курсивіне
• Н1 барлық тегіне
• Р тегі параграфіндегі Cite класына
1.2 Сілтемелер
Сілтемені қалай жасауға болады?
Сілтемені құру үшін ... ... ... не?, сілтеме жасайтын
құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет
href параметрі бар тега А ... ... ... орнына (URL)
документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты
болуы ... ... ... ... ... сайт атына
байланыссыз, сілтеме жазылған жерде және барлық жерде ... ... ... ... ... жүйе Яндекс


Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе
адреске қатысты құрылады.
Мұндай адрестер мысалдары;
/demo/
Бұл екі ... ... емес деп ... және ... ... ... ... орналасқан index.html файлы болмаса браузер, берілген
каталогта бар файлдар мазмұнын көрсетеді.
/ images ... ... кері ... ... ... ... білдіреді.
Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта
орналасқан ../help/me.html
Атау алдындағы екі нүкте, браузерге сайттағы каталогтар ... ... ... ... ... ... атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде
орналасқанын білдіреді.
2-мысал. Қатысты ... ... на мою ... ... ... же ... енін анықтау.
Кейбір мәселелерде браузер терезесінің оң жағы бойынша ... ... ... ... ... орны ... берілгендіктен,
оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын
білу талап етіледі.
Жұмыс аймағының ені мен ... ... үшін ... ... ... Internet Explorer және ... еннің мәні
document.body.client Width әдісі арқылы алынады. Биіктігі ... ... тек Width – ол Нeight – қа ... ... ... функциялар 1-мысалда көрсетілгендей түрге ие болады.
1- мысал. Ені мен ... ... үшін ... = ... = (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 = ... (NC) send = ... ... функцияларды қолдану үшін, бастапқыда ... бар ... құру ... ... ... құру



Содержание


Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне
қабатты орналастыру үшін, оның ... 0-ден ... оң ... ... дұрыс.
Егер қабатты мәтіннен төмен орналастыру керек болса ... ... ... оң жақ ... қою ... putlayer ... ... мысал. Браузерлердің оң жақ бұрышында қабатты орналастыруды беру
span class="select">function putLayer() {
widthBrowser = getWidth() - ... ... = ... ... = ... eval('document.getElementById("xyz").style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}
Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, ... ... ... енін алып ... ... ...... Егер қабат
браузер терезесінің төменгі бұрышында орналасса, биіктігімен де ... ... ... ... қалуы үшін және өз орнын әр қашанда
өзгертпеуі үшін яғни терезе өзгергенде ... ... ... әр 1000 ... ... ... ... келтіреді (немесе 1 секунд).
3 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға
болады, мысалы On load ... ... ... ... ... ... ... бұрыштарында қабатты орналастырудың толық
листингін келтірейік
Жоғарғы оң жақ бұрышта


IE = (document.all);
NC = ... = ... ... {
if (IE || Opera) send = ... (NC) send = ... ... ... {
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 = ... ... = ... ... = ... жақ төменгі бұрышта



function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - ... ... = ... = ... {
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);}






Содержание




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


function putLayer() {
heightBrowser = getHeight() - ... ... = ... ... = heightBrowser');
if(Opera) eval('document.getElementById("xyz").style.top = heightBrowser');
setTimeout('putLayer()',1000);}






Содержание




Веб-парақтардың оптимизациясы
Веб-парақтардың оптимизациясы дегенде, біз қолданушыға максимальды тез
болатын яғни, браузерде парақтарды жүктеуге мүмкіндік ... ... ... ... деп ... ... ойы – бұл файлдар көлемін әртүрлі құралдармен
кішірейту, бірақ мұнда да белгілі бір ... ... олар ... ... ... ... ... жүктеуге мүмкіндік береді.
Төменде, осы мақсатқа жетудің кейбір әрекеттері ... ... ... ... ... ... төменге қарай жүктеледі, ал төмен орналасқанға
қарағанда парақтың жоғарғы ... ... ... ... ... ... үшін аса ... материалдарды парақтың басына қарай
орналастырыңыз.
Бір кескінді көп мәрте қолданыңыз
Беттен – бетке қайталанатын графикалық элементтерді қолданыңыз ... ... ... ... Суреттің алғашқы жүктелуінде,
кескіні бар файл браузер кэшіне орналасады және ... ... ... қолдану оның ол кездесетін басқа парақтарда пайда болуын тездетеді.
(CSS ) стильдерінің каскадты кестеларін қолданыңыз
Форматтау атрибуттары тобына бірден барлығына бір ... ... ... НТМL ... ... ықшамдайды. Стильдер көмегімен
мысалға , барлық тақырып жолының түрін өзгертуге болады. Бірақ үш ... ... ... ... яғни, оның өлшемі басында берілсе,
кейін қаріп берілсе және ең соңында орталық бойынша ... ... оны ... ... тегке стильді қолдану арқылы тура соны іске асыруға
болады.[12].
Кестелер ерекшеліктерін ... ... ... ... бар ... қолдану
арқылы беттеледі. Сол кестелердің ерекшелігі – егер соңғы сөз ... ... ... ... , ... ... құрамы бейнеленбейді.
Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау ... ... ... ... ... қолданады. Алайда, егер кесте биіктігі бойынша
үлкен болса, біз ... ... ... елеулі уақыт өтіп кетеді.
Осыны ескеру, ... ... ... ... ... ... Жүктеуді тездетудің тағы бір ... – бұл ... ... ... ... ... ... тез жүктелуі үшін, сапаларын сақтауда
суреттер файлдарының өлшемін кішірейту керек. Графиканы оптимизациялау
үшін, ... ... ... отырып, әртүрлі параметрлермен басқаруға
мүмкіндік беретін арнаулы программалар бар. ... Adobe Image ... ... ... және т.с.с.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы,
парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
Салымдарды құру
Салымдар новигация ... ... ... ... ... кез
келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша,
бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт ... ... тез ... ... ... ... бір нұсқасы
көрсетілген.
1-сурет. Салымдарды құрып орналастыру
Графикалық салымдарды кез ... ... ... ... болады.
Сілтемелер карт-бейненің көмегімен суреттерден ... ... Біз ... ... қарапайым құралдармен жасаймыз, мысалы 2-
суретте көрсетілген стиль арқылы.
| |Чебурашка ... Гена ... ... ... ... ... ... салымдарды құру
Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды
құрайды, ал ... екі ... сән үшін ... олар ... ... ... үшін керек.
Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open
дейік, ал ... closе ... емес ... ... үшін ... атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы
стилін, оның қалыңдығын, түсін ... ... екі ... қос жақтаушы
болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін ... ... ... ... ... ... үшін төменгі шекараны
жасырып қою керек. Оң және сол ұяшықтың стилін тура ... ... ... ... көп қолдану үшін бөлек класс қолданған дұрыс.
1-мысал. ... ... { border: solid 1px black; ... none; ... none;
text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center;
background: #CFD6D4; }





 
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
 




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

.open { border: solid 1px black; ... none; ... ... white; ... center; ... bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: ... #CFD6D4; width: 24%; padding: 4px ... ... ... ... ... және түсті қолдана отырып, әр түрлі салымдарды ... ... ... ... ... көрсетілген, бұл жағдайда
белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.
| |Чебурашка ... Гена ... ... ... ... ... ... салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан
кесте қолданылады.[13].
3-мысал. Салымдарды кесте арқылы құру



.open { border: solid 1px black; ... none; ... ... bold; ... center; ... #CFD6D4; padding: 4px ... { border: solid 1px black; ... none; text-align: center;
padding: 4px}





 
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
 







Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр
сызықты форматтайды. Оның ені мен түсі height және bgcolor ... ... ... рұқсат және олардың веб-парақтағы динамикалық
басқарылуы HTML құжатымен байланысқан программа арқылы іске ... ... ... деп ... немесе басқа әдебиеттерде
кездесетіндей – ... деп ... ... ... Script ... сипатталады, яғни оның ... ... ... ... оның ... ... бар. Негізгі екі программалау тілдері
қолданылады - JavaScript және VB Script.
Скриптерді құру
Скриптілер ... ... ... ... ... ең ... ерекшелігі – бұл Script контейнерінің ішінде программаның
орналасуы. Осы тег ... ... ... ... ... өзінің ішкі құрамында
программаны қамтиды.
Скрипт жазылу синтаксисы;

Текст программы

Language параметрі ... ... ... ... ол JavaScript
немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл ... ... ... ... ... JavaScript 1.3 (1-мысал).
1-мысал. Браузер қолдайтын тілдерді анықтау


VB = True
JS = 1;
JS11 = 1;
JS12 = 1;
JS13 = 1;
JS14 = 1;
JS15 = 1; ... ... ... ... ... document.write("JavaScript 1.2
");
if(window.JS13) document.write("JavaScript 1.3
");
if(window.JS14) document.write("JavaScript 1.4
");
if(window.JS15) document.write("JavaScript 1.5
");
if(window.VB) document.write("Visual Basic
");



...


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

  JavaScript тіліндегі бағдарлама

Скриптілер сыртқы файлдарда да орналасып, ... HTML ... ... ... ... ... веб-парақтарда ортақ бір
функцияны қолдану мүмкіндігін туғызады және олардың ... ... ... файл ... ... кейін-ақ кэштеледі және келесі
шақырылуда скрипт тез ... ... ... ... ... Script ... ... Ал программасы бар файлдың өзі сайттың кез-келген жерінде
орналасады, оның шақырылуы үшін ... ... ... орналасқан жері
Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз ... Көп ... ... ... программа жұмысына
мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте
құжат басына орналастырады. ... ... ... ... ... ... дәл ... орналастырып, document.write немесе
document.writeln әдісінің көмегімен нәтижесін шығарады.Ол ... ... ... ... ... ... (i=1; ... түсініктемесін жапқаннан кейін JavaScript (II) ... ... VB Script (I) ... ... керек.
Қазіргі таңда барлық жаңа шыққан браузерлер скриптерді түсінеді,
сондықтан түсініктемелер міндетті түрде болуы шарт ... ... және іске ... ... ... ... ... шақыру және белгілі
оқиғаға қол жеткізу арқылы іске асады. Скриптті 3-мысалда көрсетілгендей
парақты ... ... ... ... іске қосуға болады.
3-мысал. Скриптті автоматты түрде іске қосу



  alert("Hello, world!")




Тура сол программаны функция арқылы жазуға болады
4- мысал скриптердің автоматты түрде ... foo() ... ... ... ... жүктеуде іске қосылады себебі оның шақыруы айқын
көрсетілген.
Оқиғалар мен скриптілерді ... екі ... бар. ... оқиғалар қолданылады тышқан немесе пернетақта. Мысалы, тышқанның
сол жағына басқанда onclick оқиғасымен кезек жүреді
5-мысал. Тышқан ... ... ... подписи


Кестенің ені сурет көлемі мен автордың қолдануымен анықталады. ... ені ... ... ... ... түрлі-түсті рамканың ені ... ... ... ... ... көмегімен қойылады. Бұл
жағдайда бәрі бір қандай қойылса да, нәтижесі бір ... ... ... параметрімен көрсетілген, сурет астындағы астына салудың және оған
қойылатын жазудың түсін анықтайды.
| |
| ... ... ... |
| ... ... нұсқалары көрсетілген, сурет жазбасымен беттің ортасына
орналасқан егер де мәтінді орналастыру біздің конструкциямызбен, ... ... ... ... / right ... ... ... кестені беттің сол жақ немесе оң жақ шетіне туралайды.Кестенің
шетінен бастап ... ... ... IMG ... ... Мәтін,
суретте шартты келіп-кетіп жүрген сияқты көрінуі өте әдемі ... ... ... оқу оңай болмайтындай дизайн принципі және ... ... ... ... ... ... Бізге кестенің айналасының шегін
алуды және бұл үшін қойылған кестелерді пайдалануға болады. Кесте құрамыз,
сол жақ немесе оң жақ ... ... сол ... ... де, ... ... ... дейінгі арақашықтықты анықтайды (2-мысал).
2-мысал. Қойылған кесте шегіністерін құру.


 
  
   
    
   
   
    Пример подрисуночной ... ... ... ... анықтау – бұл үлкен көлемді соңғы
коды және мәліметтерді ... ... ... ... ... және ... пайдаланамыз. Padding параметрі көмегімен
сурет айналасында жолдар шығады, ал margin ... ... ... ... суретті туралаумен оң жақ шетінен қасиеттер float қойылады. (3-мысал).
3-мысал. Сурет астындағы жазуды құру үшін стильді ... ... 10px; margin: 0px 10px 10px ... #e0e0e0;
border: 1px solid black;
width: 100px; float: left; font-size: 90%
}





Винни-Пух в гостях у Кролика



Мысалда ... ... ... жазу ... төменгі жағында
көрсетілген. Оң жақ шетімен төменгі шеті 10 ... margin ... ... ... стильдер, түстер, фрейімдер, тегтер.
Тізімі бар өріс.
Тізімі бар өріс иілгіштер және ыңғайлы ... ... ... ... бір немесе бірнеше мән таңдауға болады. Оның тізімнен
артықшылығы, ол небәрі бір ... ғана ... ал ... ... көру ... басу ... Бірақ бұл кемшілік болып келеді, өйткені қолданушыға ... ... ... ... Тізімі бар өрісті келесі түрде құрамыз.

Выбор 1
Выбор ... ... және option тегі ... ... тұрады.Ол төменгі 3-кестеде
көрсетілген.
3-кесте.
|Select параметрі |Анықтамасы ... ... ... ... өңдеушісі осы өрісті |
| ... ... ... ... ... Үндемеумен бір жол. ... |Бұл ... ... ... бірден таңдауға мүмкіндік |
| ... ... Control ... Shift ... арқылы |
| ... ... ... ... ... ... ... өріс ... ... ... ... ... ... өріс |
| ... анықтайды. ... бар ... по ... ... ... ... "ОС"?

Офицерский состав
Операционная система
Большой полосатый мух




Нәтижесін төмендегідей аламыз.
|Как по ... ... ... ... "ОС"? |
| ... ... ... және бағаналар ұяшығынан, суреттер мен мәтінді
құрылымнан тұрады. Алайда ... ... көру үшін ... ... ... бұлай ғана шектеліп қоймайды. Кестелер көмегімен
жолдар макетін айналдыру, бейнелер мен мәтін фрагменттерін сәйкесінше ... ... ... қосу үшін TABLE тег – контейнері қолданылады. Бұл кесте
ең болмаса бір жол немесе бағаналардан құрылуы ...... ... ... ... қосу үшін және ... қолданылады. Жолдарды бағаналарға
бөлу үшін және тегтері қолданылады (2 - ...... ... ... ... ... ... 4


Төменде кесте ұяшықтары орналасуы бойынша көрсетілген.
|Ұяшық 1 |Ұяшық 2 ... 3 ... 4 ... және ... үш ... ...... кесте, қыртыстар
көмегімен ерекшеленетін верстердің кең ... үш ... бар. ... оның тек бір ... ... қолданылатынын білдірмейді, керісінше
олардың бір-бірімен сәйкес келуі туралы сөз болып отыр.
Берілген мақалада біз ... ... ... ... бұл ... фреймдердің жетістіктері мен кемшіліктерін әр түрлі ойда түсінетін
көптеген материалдар жазылған. Қыртыстар мен ... ... ... Соңғы уақыттарда бұл таңдаулар веб-парақ пен талқылауды құруға
көп сүйенген. Негізінде мәселе ... ... ... ...... ... немесе кесте бойынша болғанында ерекшелік
жоқ. Әр қадам өз мақсаты үшін ... ... ... ... кестелер
мен қыртыстар қайда, не үшін ... ... ... ... НTML ... қосымша мүмкіндіктері.
Декоративтік жақтау.
Керекті жақтауды жасау үшін оны қажетті түрде қандайда бір ... ... салу ... ... 8 – суретте домалақ бұрыштары бар
жақтау көрсетілген. ... ... 9 ... сары ... және ... суретті 9 бөлікке бөлеміз. Мысалы, бейнені ImageReady немесе
соған ұқсас программаларда бөлуге болады.
| | ... ... ... біткен домалақ Элементтерге
бөлінген
жақтаулары бар ... ... ... аты |
| |Сол жақ ... ... |1.gif |
| |Көлденен ... |2.gif |
| |Оң жақ ... ... |3.gif |
| |Сол жақ тік ... |4.gif |
| |Оң жақ тік ... |6.gif |
| ... сол жақ ... |7.gif |
| ... ... |8.gif |
| |Оң жақ ... ... |9.gif ... ... ... құру







 
Содержимое
 







Кестеде borden,cellspacing және cellspadding параметрлері нольге тең
болуы ... ... ... ... ... тектерінің көмегімен бұрыштарын қарапайым суреттер сияқты
қоямыз, ал ... және ... ... ... мен ... ұяшықтары фонының көмегі арқылы беруге болады. Бұл
біздің жақтауымыздың көлемін үлкейтеді және ... ... ... бір – ... ... тұрып араларында бос сызық болмау
үшін міндетті ... ... мен ... өлшемдерін көрсету керек.
Ұяшықтарда горизонтальді және вертикальді сызықтар фон ... ... ... түрде орналастыру керек – бұл немесе бос
сызық, әлде өлшемі 1 де 1 ... ... файл 1 х 1 gif деп ... ... ... ... Бұл Netscape – ні ... үшін жасалады, өйткені
ол бос ұяшықтың мазмұнын көрсетпейді.
Келтірілген ... әр ... ... ... ... көмектеседі.
Стильдердің қолданылу
Стильдің көмегімен рамканы әрбір блоктік тектерге қолдануға болады,
мысалы, парагрфке (Р тек), Кесте мен ... DIV. ... ... жеңіл
және қолайлы етіп ... ... ... 6 – суретте
көрсетілгендей әр ... ... ... ... ... жасалған рамкалардың түрі.
Бірінші орналасқан екі рамка – dottet және dashed тек қана ... және Internet Explorer ... ... ... border параметрі арқылы оның түрі, қалыңдығы және түсі беріледі.
2-мысал. Стильдерді қолдану



P { border: double 4px #336699; padding: 5px}



При работе на ... ... ... ... так, ... руки ... образовывали прямой угол, глаза поставить на расстояние 30-40
см от рабочей ... ... екі ... ... ... қалыңдығы сызықтардың қалыңдығынан
және олардың арасындағы ара қашықтықтан құралады. Рамка текске тимес үшін
рамкадан radding параметірінің ... ... ... Netscape 4х ... ... арналған рамкаларды қосады
және мазмұнымен оның енін ... ішін ... ... Веб – ... бір ... ... ... аударады. Сайтты көркемдегенде жақтау өзінің әсемдігін
көрсетеді.
Кесте құру үшін бірнеше ... ... оның ... ... ... ... ... Стильдер кестелер құрылымын толықтырып және
жақтаулардың ... ... жәй ... ретінде көрсетеді. Төменде әртүрлі
сайттардың кеңінен тараған жақтауларды қабылдауы көрсетілген.
border кестесінің параметрлерін қолдану
Жақтау ... ең ... ... border ... ... және оған түс беретін bordercolor және ... ... ... ... ... ... өзінше әртүрлі браузерлерде
анықталады. (11 - сурет)
|Internet ... |Opera ... | | |
| | | ... Border ... көмегімен жақтау алу.
Жақтаудың үш өлшемділігін Netscape имитирлейді, Opera браузері оның ... ... ал Internet Explorer ... ... ...... Border ... қолданылуы.


Содержимое


Border параметірі рамканың қалыңдығын анықтайды. Bordercolor – оның түсі,
cellpadding – жақтау мен кестенің ара қашықтығын ... және bgcolor ... ... ... жақтауларды бірдей көрсетпеуі үшін, bgcolor және ... ... ... шығу тәсілін қолдануға болады. Bgcolor
параметрі арқылы барлық Кесте ... ... ... ... ... ішкі фонына түс беру керек, мысалы, ақ. ... ... ... аз, ... айырмашылықтардан көрінетін ішнара
болады. Ұяшықтардың ара қашықтығы ұяшық өлшемін кіші өлшемге ... ... ... (2 - ... – мысал. bgcolor параметірінің қолданылуы.
.





Содержимое





Cellspacing параметірінің мағынасын, ... ... ... болады. Ал шектің соңынан мазмұнға – cellpadding параметрі.
Орналастырылған кестелер
Әртүрлі браузерлерде бірдей жұмыс істейтін ... және ... құру ... 2 ... бір біріне қойылуы. Егер біз
тікбұрышты алсақ, мысалы, қызыл қағаздай және оның ... тағы бір ... ақ ... ... онда ... рамканы көреміз.Бет
қағаздың орнына TABLE ... ... ал ... ... bgcolor
параметірімен анықтаймыз (3 - мысал).
3 – ... ... ... ... | ... |13-сурет. ... ... ені мен ... ... ... ... ... рамканың түсін анықтаймыз,cellpadding – ті 0 – ... ал ... ... ... ... ... болған сайын, жақтау да соғұрлым қалың болады.
Ішкі кесте үшін арнайы түс беру ... ... ... ... Веб ... ... ... ақ түс берілген. Cellspacing немесе ... ... ... ... жоқ) ... ... мазмұнының қашықтығын анықтайды.
Ішкі кестенің ені мен ұзындығы сыртқы кестенің ені мен ұзындығына
сәйкес келуі керек.
Ескерту. ... ... ... үзік ... ... Егер ... ... ойлағаннан қалың болса, онда тектерінен және сол жолдардың
саны арасындағы артық үздік ... алып ... ... ... және Internet Explorer ... ... ... анықтау үшін түрлі қадамдар қолдануда. Netscape-дегі
frameborder ... Yes ... No ... қабылдай алады, ол тек IE-де
сандарды қолдануға болады. Фреймдер ... ... алып ... ... ... ... ... Фреймдар арасындағы жоқ жақтау




Мысалда frameborder параметрі браузер өзіне мағына таңдап алу үшін 2 ... ... бір ғана ... ... параметрімен шектеуге
болады. Netscape үшін мұндай жазу ереже бұзуға жатады, бірақ бұл ... ... Opera ... ... орай ... тек ... шығарады.
Егер қоршау ақырында керек болса, браузерде ол еш ... ... ... ... ... ... қатар FRAMESET және FRAME тегтерінде
қолданылатын bordercolor параметрінің көмегімен ... ... ... Түс өзінің атымен немесе он алтылық мағынасы бойынша көрсетіледі.
2-мысал. Жақтау ... ... ... Netscape неммесе Internet Explorer браузерлерінде түрі
бойынша ерекшеленетін көк түсті ... ... ... HTML ... ... үшін жаңа ... құруға мүмкіндік
береді. Java Script көмегімен құрылған мұндай терезелер стандартты ... және типі ... ... және ... ... ... ... модальды терезелер барлық скриптілер қызметін тоқтатады және
қолданушыдан кез ... ... ... ... терезені жабуды күтеді.
Қарапайымдары программа қосылатын ағымдағы ... ... ... ... терезелерді құрудың төрт әдісі бар, олар ... ... ... ... |Түрі ... ... ... | ... |
| ... ... ... |
| |ОК ... | |
| ... | | |
| ... | | |
| ... | | |
| ... | | |
| ... | | |
| ... | | |
| ... | | |
| |бар. | | ... |Alert-ке | |if( confirm |
| ... ... | ... ... |екі ... |бе? ... |
| |ОК және | ... |
| |Cancel | |alert |
| ... | ... |
| ... ... | |else alert ("Ал |
| ... | ... ... |
| |При ... | | |
| |на ОК | | |
| ... true| | |
| ... ал | | |
| |Cancel | | |
| ... | | |
| |false ... | | |
| ... | | ... ... ... | |n = prompt |
| ... | ... |
| | | ... |
| | | ... |
| | | |if (n) alert |
| | | ... " + n) ... ... |Бұл ... түрі ... |
| ... ... ... |
| ... |көрсететіндіктен, ол кез | |
| ... ... ... ... | |
| ... | | |
| ... | | |
| ... | | ... және confirm ... ... ... шығаруға мүмкіндік береді.
Мәтінді басқа жолға ауыстыру үшін ... ... Prompt ... ... ... аспайтын жолды береді.
Жеке диалогты терезелерді құру
ShowModalDialog әдісінің көмегімен өз қалауыңыз ... ... ... Однако, данный способ создания модальных окон поддерживается
только браузером Internet Explorer.
Мұндай терезелер келесі ерекшеліктерге ие:
· навигация ... ... ... оң жақ ... ... ... мазмұнын ерекшелеуге болмайды.
Әдісті шақыру синтаксисі келесідей.
Қайтарылар мән = showModalDialog("URL", "терезенің аты ", "параметрлері")
URL диалогтік терезеде ашылатын HTML-құжатқа апарар ... ... ... ... ... атауын білдіреді, оны жібере салуға болады.
Терезелер түрін басқару ... ... ... ... 5-кестеде
көрсетілген.
5-кесте
|Параметр |Мағынасы |Сипаттамасы ... |Thick | ... ... қалыңдығын енгізеді |
| |thin | ... |yes | no ... ... ... ... ... |
| ... 1 ||теңестіреді |
| |0 | ... %... ... ... биіктігі ... |px, %... ... ... ... сол жақ бұрыштың |
| | ... |
| | ... ... ... |px, %... ... ... сол жақ жоғарғы бұрыштың |
| | ... ... ... ... |px, %... ... ... ені ... |yes | no ... жолына "Развернуть" батырмасын қосады |
| ... 1 || |
| |0 | ... |yes | no ... жолына "Свернуть" батырмасын қосады |
| ... 1 || |
| |0 | ... ... үтір ... кез ... рет бойынша жүре береді.
Диалогтік терезенің өлшемі 100х100 ... кем ... және ... тыс жерге орналастыру мүмкін емес. Параметрдің қосылуын немесе
өшуін оларда yes ... no (1 ... 0) ... ... арқылы анықталады.
Мысалы, center=yes параметрі мағынасы center=1 параметрімен бірдей.
1-мысал. ... ... ... "", ... ... ... файлы жүктелетін 350х200 өлшемді терезе құрылады.
Қалқымалы терезелер құру
Қалқымалы ... window ... ... ... ... ... болып табылады. Сонымен қатар бұл терезе түрін
өлшемдерін енгізе отырып және ... ... ... ... ... құру үшін келесі синтаксиспен келетін open әдісі қолданылады.
window.open("URL", "терезе аты", "параметрлері")
Параметрлердің мәні ... ... ... ... showModalDialog
әдісінің параметрлерімен сәйкес келеді.
Бұл терезе түрін басқаратын параметрлердің диалогтік терезе элементтерінен
кейбір ерекшеліктері бар.Ол 6-кестеде көрсетілген.
6-кесте.
|Параметр ... ... ... | no ... 1 |Сілтемелер панелін бейнелейді ... || 0 | ... |yes | no ... 1 ... жолын бейнелейді |
| || 0 | ... |yes | no ... 1 ... ... |
| || 0 | ... | no немесе 1 |Айналдыру жолағын көрсетеді |
|s || 0 | ... |yes | no ... 1 ... ... ... ... |
| || 0 | ... |yes | no ... 1 ... ... ... |
| || 0 | ... | no немесе 1 |Терезе өлшемін өзгертуге бола ма соны |
|e || 0 ... ... ... ... ... ... сол жақ бұрыштың|
| | ... ... ... ... ... ... ... сол жақ жоғарғы бұрыштың |
| | ... ... ... ... ... ... ені ... ... ... ... ... ... жолағысыз, мәзірсіз, навигация жолдарысыз және т.б.
терезені құру мысалы көрсетілген.
2-мысал. Жаңа терезе ... "help", ... ... status=0,
menubar=0, location=0 resizable=0 directories=0 toolbar=0")

Терезе түрін басқару параметрлерін үтір арқылы кез келген ... ... ... ... ... ... ... көмегімен жасалса, оны кез келген
сәтте close әдісімен жабуға болады.
3-мысал. Терезені жабу

help = ... "help", ... ... ... ... ... directories=0 toolbar=0")

Терезені жабу
Мысалдағы help айнымалысы қайта құрылған терезеге сілтеме ... ... ... жабу ... ... ... жүреді.
Когда метод close применяется к ... ... ... выдаст
предупреждение о том, что программа пытается закрыть окно и согласны вы на
такое немесе нет. Это ... в ... ... и ... ... ... нужных окон.
Жасырын өріс.
Жасырын өріс көрсетілмейді және өзінің ... ... ... оған ... ... ... ... басып шығара алмайды. Жасырын
аймақты құру мақсаты – серверге техникалық ақпаратты ... ... ... ... ... ... ... үшін қажет.
Жасырын өрісті құру синтаксисі:

name – программаға аймақты индентификациалауға мүмкіндік беретін аймақ
аты.
value – ... ... ... ... ... жіберілетінін
анықтайды.
Мысалы. Жасырын аймақты қолдану




Сүйікті сөзіңізді жазыңыз ... ... ... ... сөз: |
| ... жасырын аймақ ешқандай көрсетілмейді, бірақ ... ... ... ... ... ... жіберіледі.
Жылжымалы фреймдер.
Internet Explorer браузерлердің үшінші және одан жоғарғы версиясы жылжымалы
фреймдерді IFRAME тегі ... ... ... ... ... қарапайым құжат ішінде болады және басқа да кез келген құжаттар
бетіне қойылады. IFRAME ... де ... ... параметрлер:
width, height, hspace, vsace, align мәні IMG тег ... ... ... жылжымалы фреймді пайдалану

IFRAME тегі контейнері болып табылады. Бұндай браузерге ... ... ... көріп отыруына болады. Ол және
тег арасында ... ... ... « Сіздің
браузеріңіз жылжымалы фреймді қолдамайды» деген мәтін көрсетеді. IE –ден
басқа Opera 6, Netscape 7 және Mozilla ... ... ... ... үшін FRAMESET тегі BODY ... ... ауыстырып, экран
бетін облыстарға бөлу үшін қолданылады. Берілген тектің ішінде FRAME
тегтері ... ... ... HTML құжатын көрсетеді (14- сурет).
|MENU |CONTENT |
. ... ... ... ... ... ... фреймдердің орналасуының коды келесідей.
1 – мысал. Екі фреймнің ... frame ... ... frame ... html ... – мысал. Екі фреймнің құрылуы

 
 

Браузер терезесі 2 колонкаға бөлінеді, сол жағы 200 тексельді алады, ал ... ... ... ... қалған кестігі. Фреймдердің ені мен
ұзындығын қатынас ... ... ... ... ... ... ... да
беруге болады.
FRAME тегінде HTML – файлының аты 3rc ... ... ... ... беріледі.
Сол жақ терезеге белгіленген menu. Htme файлы, ал ал оң жақ ... ... thtme. ... көрсетілген терезеге орналастыру үшін ... ... ... атын беру ... |
|MENU |CONTENT ... ... ... ... ... ... қиын құрылымы керек болса, мысалы, ... FRAMESET ... ... ... ... болады.
2 – мысал. Үш фреймнің құрылуы.

 
 
  
  
 

Бірінші FRAMESET тегі браузер терезесін екі ендік жолға 10 және 90
процентке бөледі. Ал ... 1 ... екі ... ... ... қалай жасыруға және көрсетуге болады?
Қатпарлардың веб-беттерінің басқа элементтерінен негізгі айырмашылығы,
қажет жағдайда скриптер ... ... ... және көрсетуге
болатындығында. Бұл сайтта динамикалық эффектілерді қолдана отырып, мысалы,
түрлі меню құруға мүмкіндік береді.
Қатпарды қалай жасырамыз?
Егер мәні ... ... ... ... берілген элементтерді көріп
отырамыз. Мысалы, BODY элементін жасыруда, құжаттағы ... ... ... ... орнатуға болады. Қатпарды жасыру
үшін, hidden параметрін орнатып, visibility құрамын өзгерту керек.
1-мысал. Қатпарды жасыру



function hiddenLayer() {
 NC = (document.layers);
 IE = ... = ... ... = ... ... = ... eval('document.getElementById("layer1").style.visibility =
"hidden"');
}



Содержимое слоя


Ескерту. visibility параметрінің көмегімен қатпарды жасырғанымен, қатпар
құжат ішінен жойылмайды. Мұнда қатпар жасырылады, ... ... орны ... ... бір ... қатпарларды шығару қажет болса, онда
абсолютті позицинирлеуді қолдану керек.
Жасырын қатпарды қалай көрсетеміз?
Егер ... ... ... visible ... ... параметрінің
көмегімен көрсетуге болады. Екінші мысалда қатпарды динамикалық көрсету
немесе жасыруы көрсетілген.
2-мысал. Қатпардың көрінуін өзгерту.



function init() {
IE = ... = ... = ... hiddenLayer() {
init();
if(IE) eval('document.all["descr"].style.visibility = "hidden"')
if(NC) eval('document.layers["descr"].visibility = "hidden"')
if(Opera) eval('document.getElementById("descr").style.visibility =
"hidden"')
}
function showLayer() {
init();
if(IE) eval('document.all["descr"].style.visibility = ... ... = ... ... ... является подмножеством астрациональных супремативных
монотенных федоний кадонарного экстрафазория.



Қатпардың көрінуінің ... ... ... ... Тышқан
тетігін жылжытқанда жасырын тұрған оның мағынасы шығады.
| ... ... ... подмножеством |
| ... ... ... ... |
| ... ... ... ... ... ... жәй ... құжаттар болып табылады, ал
мәтін біздің білуімізше ... ... ... аз орын ... Бір
символ -1байт, ал көпкилобайтты фотосуреттер фонында ол күлкілі көрінеді.
Бірақ, сайт – бұл көптеген веб-парақтардың үйлесімі және оған ... ... ... ... енеді. Кодты ықшамдаудағы ұтысты парақтар көлеміне
көбейтсек, қорытындысында жылдамдықты ұту бойынша нәтижелер көруге ... ... ... ... өзі жақсы, сондықтан олармен қарулану
керек.
HTML кодын оптимизациялаңыз
HTML құжаттарын ... үшін ... ... ... ... өлшемін кішірейтуге мүмкіндік береді. Кішірейтулер аса елеулі ... ... ... ... ... ұтуға болады. Файлдарды ықшамдау
келесі тәсілдермен жүреді: көп ... ... бір ... ... ... ... араларын ашуларды өшіру,жолдарды қайта
орналастыру т.б.
Кез келген мәтіндік редакторды қолдануға болады яғни екі ... ... жол ... ... ... ... процедураны жасалған
алмастырулар нөлге тең болғанынша қайталау керек. Бұл қарапайым технология
қалай дегенмен арнайы ... ... ... ... ... ... тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы,
парақтағы фон мәтінінің және сілтемелерінің түсін ... ... ... ... жол жіберу қажет жердегі ... және ... ғана ... ... ... ... ... міндетті емес, сондықтан «#АОВЕС4» -ті # ... ... ... ... ... қолданыңыз
Көптеген жол жіберулер кодты көркейтеді, бірақ оның көлемін де үлкейтіп
жібереді. Егер шегіністерді міндетті ... ... ... болса, табуляция
таңбасын қолданыңыз. Табуляция бірнеше жол жіберулерді ... ... ... символ ретінде сақталады. Клавиатурада Tab деп белгіленеді.
Қайталанатын бірдей тегтерді алып тастаңыз
Веб-парақтарды редактрлейтін кейбір программалар тек бір ... ... ... ... бір ... ... ... бөледі. Бұл
процесті қадағалап редактрлер жағынан осындай жағдайларды жібермеген ... ... ... дұрыс:
Дорогие друзья!
Бұл ұсынысты ескірген деп қарастыруға болады, ол ... ... ... ... көрсетілген мысал аса сәтті емес ... FONT ... ... жөн, ал оның ... SPAN ... ... друзья!
Мұндағы welcome классының өзі стильдік кестеде сипатталуы керек.
Суреттерді ... ... ... бір ... ... ... салыстырыла алмайды. Бірақ
кейбір жағдайларда қарапайым жәй затты жасауда ондай мүмкіндіктер аса қажет
емес. Жай символдардың көмегімен ... қос ... және ... ... ... ... элементтер құрастыруға болады. Біздің
қолымызда конструктор жиыны сияқты ... ... ... мүмкіндік
беретін келесі символдар бар (:) қос ... (.) ... & middot ... ... ... ... SUD және SUB тегтері, олар жоғарғы не
төменгі индекстер жасайды.
1-мысал. Мәтінді қолдану
::
.::.

..··::
...
|:: ... ... ... ... ... және қабаттардың әрекеттесуіндегі кең мәтіннің мүмкіндіктері 2-
мысалда келтірілген.
2- мысал. Стильдер мен қабаттарды қолдану

TEX и ... и LATEX ... және LaTEX ... ... өз ... жазу түрі бар, яғни сол
арқылы өздеріне жүктелген мүмкіндіктерді айқындайды. Ал бізге ... ... ... ... қабаттар мен стильдердің мүмкіндіктері
одан да жоғары, ... ... бұл ... жәй код ... ... ... алып ... осындай көп қылым жәй ойлап тапқан жоқ қой. Олар бар болғансоң
не үшін ... Даму ... ... ... ... алға шықты.
Кейбіреулерін нәтижесіз де ... алып ... ... ... ... Кестеда сол тегтер немесе үйлесімі 7- кестеде
көрсетілген.
7-кесте.
|Тег |Чем ... ... |
|| |
| | |
|| |
| ... ... ... ... қажеті жоқ:
, , .
Файлдардың құрылымы.
Жұмысшы жағынан сайтты шартты түрде екі деңгейге – логикалық және
физикалық деп ... ... ... ... сайт ... дизайн,
стиль және жіберуі бойынша біріктірілген веб-парақтың жиынтығын ... ... ... ... сайт керісінше құрамына бағдарлама,
құжаттар, ... және т.б. ... ... ... ... файлдардың жиынын
құрады.
Қарапайымдылық үшін, біз ешбір веб-бағдарламалаусыз html-файлдар көмегімен
жасалатын сайттармен ... ... ... ... мен ... ... ... қандай тарау және ... ... ... олар ... аталатынын анықтайтын сайттың
құрылымын жасап алу керек. Мысал үшін графика оптимизациясына арналған сайт
схемасын келтіреміз.
▪ Басты парақ
▪ Графикалық ... ... ... ... ... ... оптимизация
▪ GIF форматының оптимизациясы
▪ JPEG форматының оптимизациясы
▪ Антиальясинг
▪ Бейнені қию
▪ Терминдер ... ... ... және атын ... бір html-құжатын құрайды. Файл
атауларын төменгі тіркеуде еш орын қалдырмай латын әріптерімен атаған ... ... оның ... ... ... мен ... істейтін
сайттың түзетулерін ескеру ... ... ... ... файл ... ... файлдарға рұқсат болады ма, қателерді қалай тексеріп
отырады және сол сияқты сұрақтар 17- суретте ... | |
| | ... ... ... ... қысқаша анықтамалығына стильдер сипаты кіреді. ІЕ- Microsoft
Internet Explorer, NC-Netscape Communicator.
Берілген ... ... қай ... қолданылатын сан 7-кестеде
көрсетілген.
7-кесте.
|Стилі |ІЕ |NC ... ... |4 |- ... ... ... үшін бес ... |
| | | ... ... ... |
| | | ... ... ... |- |Фондық сурет веб- парағының мазмұнымен |
| | | ... ... ма не жоқ па ... ... color |4 |4 |Фон ... түсі ... image |4 |4 ... сурет фонын орнатады ... position |4 |- ... ... сол жақ ... позициясы |
|Background- repeat |4 |- ... және тік осі ... ... |
| | | ... ... ... |4 |- ... айналасындағы рамканың түсін, |
| | | ... және ... ... |
|Border- bottom |4 |- ... 4 ... ... ... |
|Border- left | | ... ... және ... ... ... right | | | ... top | | | ... ... |4 |- ... бір ... ... ... left- color | | | ... right- color | | | ... top- color | | | ... bottom- style |4 |- ... бір ... стилін |
|Border- left- style | | ... ... right- style | | | ... top- style | | | ... bottom- width |4 |- ... бір ... ... |
|Border- left- width | | |анықтайды ... right- width | | | ... top- width | | | ... color |4 |4 ... барлық шекарасының түсі |
|Border- style |4 |4 ... ... ... ... ... width |4 |4 ... ... ... қалыңдығы |
|Clip |4 |4 ... ... ... ... |
| | | ... ... |4 |4 ... ... ... ... |
| | | ... ... |4 |- ... орналасқанда тышқан курсорының |
| | | ... ... |4 |4 ... документте көрінуін не |
| | | ... ... ... ... |4 |- ... ... спецеффектілер |
|Float |4 |4 ... қай ... ... ... |
| | | ... ... |4 |- ... бірнеше параметрлерін орнататын |
| | | ... ... ... family |4 |4 ... ... ... ... style |4 |4 ... ... қою ... |
| | | ... ... ... variant |4 |- ... жазу үшін қолданылады |
|Font- size |4 |4 ... ... ... ... ... width |4 |4 ... ... ... |4 |4 ... биктігі ... |4 |4 ... сол жақ ... ... ... spacing |4 |- ... ... ... ... ... |4 |4 ... (жол ... ... |
| | | ... ... style |4 |- ... ... және оның ... анықтайды|
|List- style- image |4 |- ... ... ... ... | | ... ... style position |4 |- |Тізім болатын маркер тексттік блоктың |
| | | ... не ... ... ... ... style type |4 |4 |Маркер тізімінің түрі ... |4 |4 ... ... ... дейінгі |
| | | ... ... ... bottom |4 |4 ... шетінен элемент шекарасына дейінгі|
|Margin- left | | ... ... ... right | | | ... top | | | ... |4 |4 ... ... көріну не көрінбеуін |
| | | ... ... |- |4 ... ... бос ... ... |
|width |4 |4 ... ені ... |4 |4 ... ... ... ... |
| | | ... ... ... |4 |- ... ... асып ... бақылайды |
|Padding |4 |4 ... ... ... ... |
| | | ... анықтайды ... bottom |4 |4 ... де ... ... ... |
|Padding- left | | ... ... ... ... right | | | ... top | | | ... |4 |4 ... ... ... анықтайды |
|Vertical- align |4 |- ... тік ... ... |4 |4 ... ... шетін көрсетеді |
|Text- transform |4 |4 ... ... ... ... align |4 |4 ... ... ... ... |4 |4 ... ... ... ... indent |4 |4 ... ... ... ... ... |
2 «HTML- ... ОҚЫТУ» ЭЛЕКТРОНДЫҚ ҚАБЫҚШАСЫН ЖАСАУ
1. Delphi-да жоба құру жолдары
Жаңа бағдарламамен жұмыс ... ... ... іске ... ... File/ ... ... таңдаймыз. Жұмыс басталысымен-ақ
Delphi қолданбаның Windows – та ... ... ... ... қажетті
бағдарлама кодын құрады, яғни қарапайым жоба жасалады.  Delphi – ортасында
құрылатын бағдарлама бірнеше файлдан тұрады. Ол ... ... ... аталады. Ең қарапайым  жағдайда жоба мына ... ... ... ... бас ... ... (DPR-файл), ресурстар файлы (RES-файл),
форманы сипаттау ... ... ... ... ... ... файлы (CFG-файл) тұрады. Осы ... ... ... ... ... ... ... кез келген кезеңінде қолданбаны ... ... ... ... ... алдында жобаны сақтап қойған жөн. Кезекті
жобаны ... үшін ... ... All ... ... ... ... батырмасын басу керек. Алдымен форма модулі файлын
(Unit1.Pas), сонан соң жоба ... ... ... ... ... жеке ... ... дұрыс. Жобаны келесі сақтауларда құралдар
тақтасының сәйкес батырмасын басса болғаны.
Сонымен, қолданбаның алғашқы жобасы жасалды. ... бұл ... ... Экранда бос форма. Жаңа қолданба жасау жұмысы осы
форманы ... бір ... ... оған ... ... ... қолданба құру жобалары біріктірілген бірнеше
элементтерден ... Жоба ... ... ... ... Код ... ... сипаттамасы;
• Модулдер мен форма модулі;
• Жоба параметрі;
• Параметр ортасы;
• Ресурстар ... іске ... ... ... Project1 атты жаңа жоба
құрылады. Бұл жоба өзінің құрамында бір ғана ... Form1 ... ... атын ... ... ... қатар жұмыс ортасы
параметрін орната ... ... ... Жоба ... орталық жоба файлын құрайды. Жоба аты жоба ... ... ... және бұл ... ... ... алдында бұйрық береді.
Бастапқыда бұл Project1 аты болады. Сондай –ақ файл ресурстарымен ... ... ... Берілген файлдың аттары ауысар алдында
автоматты түрде іске ... ... ... ... ... ... ... үшін қажетті
Forms модулінің қосылу аттарын көрсетеді. Сонымен қатар uses бөлімінде
барлық форма жобаларындағы іске ... ... ... ... Form1 формасындағы Unit1 модулі.
2. Объектілер инспекторы терезесі.
Қолданбада пайдаланылатын кез-келген компонент белгілі бір параметрлер
(орнымен, өлшемімен, түсімен, оқиғалармен т.б) ... ... ... ... ... орнын, өлшемін қолданушы
форма терезесінде компонентпен әртүрлі әрекеттер жасау арқылы өзгертуіне
болады. Ал ... ... ... Объектілер инспекторы терезесі
арналған, ол терезе Объектілер тармағы ... ... ... ... ... ... инспекторы терезесі экранда болмаса  оны 
менюдың View\Object Inspector командасының  ... ... ... болады. Объектілер инспекторы терезесі кезекті компоненттің
қасиеттері мен оқиғаларын көрсететін сәйкес Properties (Қасиеттер) және
Events (Оқиғалар) ... ... ... инспекторы терезесінің
парақтары  екі бағаналы кесте. Сол жақ ... ... ... ал оң жағы ... ... мәндері немесе сәйкес оқиғаларды
өңдейтін ішкі бағдарламалардың (процедуралардың) атауларынан тұрады. ... жай ... және ... ... ... ... жеке мәндермен санмен, символдар тізбегімен, ақиқат немесе жалған
мәндерімен т.с.с беріледі.  ... Caption ... ... ... және Width қасиеттері санмен,  Enabled қасиеті True ... ... ... ... Оларды пернетақтадан енгізуге немесе ашылатын
тізімнен таңдап алуға болады. Күрделі қасиеттер ... ... ... ... ... ... сол жағында «+» белгісі
көрсетілген. Осы символға шерту таңдалған қасиет құрастырушыларының ... ... ... ... ... үш ... ... Ол қасиеттің мәнін орнату үшін қосымша диалогтық терезе
пайдаланатынын көрсетеді. Мысалы, Font ... ... ... ... ... стандартты терезесін пайдалануға болады. Объектілер ... ... ... ... ... ... тізімін
көрсететін ашылатын тізім орналасқан. ... өзі де ... ол да осы ... ... Мәтіндермен жұмыс істеуде пайдаланылған компоненттер
Delphi ортасында мәтіндермен жұмыс жасау үшін стандартты диалогтік
терезесі арналған. Бұл диалогтік ... ... Windows ... ашу, ... және ... жіберу үшін және т.б. операцияларды
орындау үшін пайдаланады. Сондықтан да ... ... деп ... ... ... визуалды емес болып табылады. Сонымен қатар Delphi
ортасында т.б. ... емес ... бар. ... 8- ... ... ... емес ... тізімі келтірілген.
8-кесте.
|Аты ... ... ... ... | ... файлды таңдау ... | ... ... сақтау ... | ... ... ... ... | |Түс ... ... | ... беру ... | ... үшін ... ... енгізу |
|ReplaceDialog | ... үшін ... ... ... ... | ... ... ... | |*.ico ... ... ... ... | ... ... арналған объекті |
|RzBalloonHints | ... меню ... ... ... ... ... ... шығару |
|LMDSysInfo | ... ... ... |
| | ... жинағы ... | ... ... ... ... |
| | ... ... іске асырады. ... | ... ... ... меню ... ... | ... ... ... жинақтау|
Бұл компоненттерді пайдалану үшін сәйкес ... ... ... және оның қасиеттеріне қажетті мәндерін орнату керек.
Сонымен қатар Delphi ортасында ... емес ... ... ... ... Олардың айырмашылығы орындау барысында
көрініп тұрады. Бұл компоненттерді де форма бетіне орналастырғаннан кейін
қасиеттеріне керекті мәндерін көрсетіп, код жолын жазу ... іске ... ... ... компонеттердің сипаттамасы төменде
келтірілген [3].
4. Жұмыс сипаты
Кез келген программаны құрмас ... оның ... ... ... Яғни ... ... бұрын буманы ашамыз.
Манипулятор тышқанның көмегімен ашамыз.
Программаны мына файылды екі рет шерту арқылы іске қосамыз.
Сол кезде заставка ... Ол 18- ... ... тетігін басу арқылы, негізгі ... ... Яғни ... ... ... негізгі беті шығады.НТМL тілі бойынша
кез-келген тақырыпшаны белгілесек, соған сәйкес дәріс алу мүмкіндігі ... 19- ... ... ... ... ... ... тышқанның көмегімен белгілеп
бассақ, төмендегі көрініс шығады. Ол 20- суретте көрсетілген.
20-сурет.
Лабораториялық жұмыстар тапсырмаларымен жоғарыда аталғандай қолданамыз.
Қолданушы тақырыптарды ... ... тест ... ... бар.
менюін шерсек болғаны. «Тестіні таңдау» тетігін шерткенде келесі
форма шығады.Ол 21- ... ... ... ... ... ... отырып тест тапсырады.Ол 22-
суретте көрсетілген.
22-сурет.
Тапсырып болғанда хабар ... «ОК» ... ... ... ... арқылы түсінбеген сөз тұралы мағлумат алуға болады. Ол 23-
суретте көрсетілген).
23-Сурет.
«Жабу» тетігін шерткеде, «Сіз шынымен жұмысты аяқтайсыз ба ?» деген
сұраққа ... ... ... ... ... ... ... келген жұмысты жазбас бұрын оның зерттейтін аймағымен танысу
керек. Сол ... ... ... ... HTML тілі бойынша деректер
жинап, аударма жұмыстарын ... ... оның ... толық
зерттедім. Онда тектермен жұмыс істеуді және ол ... ... ... Осы электронды оқулықты жасағанда оны неғұрлым
әмбебап, түсінікті, қолдануға ... етіп ... ... Сол ... ... ... олардың арасындағы байланыстар орнатылып,
ыңғайлы ... ... ... ... ... ... ... оның жалпы жұмыс істеу принципі тексерілді.
Бұл жұмыстың нәтижесінде «HTML - ... ... ... ... ... ... орындалу барысында Object Pascal ... Delphi ... ... ... ... ... Windows операциялық жүйесімен жұмыс істейтін дербес
компьютерлерде толық жұмыс ... ... HTML ... алғаш
үйренушілерге көп көмегін тигізеді және тест арқылы өзінің осы ... ... ... ... ... ... қатар Delphi
бағдарламасының мүмкіндіктерін көрсету үшін пайдалануға болады.
Жасалған ... ... ... ... ... ... ... етеді және электрондық оқулық қазақ тілінде болғанымен
ерекшеленеді. Бүгінгі таңда білім мекемелеріне тиімді құрал болып ... ... ... ... Г.Мадиарова, “Информатика және есептеуіш
негіздері” ... ... ... Вирт Н. Алгоритмы и структуры данных: Пер. с англ. — М.:
Мир, 1989. — 360 с: ... ... М., Шоу А., ... Дж. Принципы разработки
программного обеспечения: Пер. с англ. — М.: Мир, 1982. —
386 с: ... ... Н. Б. ... в Turbo Pascal 7.0 и Delphi ... ... ... и дополненное. — СПб.:
БХВ — Санкт-Петербург, 1999. — 416 с: ил.
5. Культин Н. Б. Программирование на Object Pascal в Delphi ... БХВ — ... 1999. — 464 с: ... ... ... по ... Пер. с англ.
Б. Мик, П. Хит, Н. Рашби и др.; под ред. Б. Мик, П. ... ... — М.: ... и связь, 1986. — 168 с: ил.
7. Фокс Дж. Программное обеспечение и его разработка: Пер.
с англ. — М.: Мир, 1985. — 368 с: ... ... ... ... ... Сост. А. П. Са
вин. — М.: Педагогика, 1989.—352 с: ил.
9. Язык компьютера: Пер. с ... / Под ред. и с ... М. ... — М.: Мир, 1989. — 240 с: ... ... А.Хомоненко «Delphi 5». Санкт-Петербург, «БХВ-Петербург»
1999г.
11. В.Гофман, А.Хомоненко «Delphi 6» Санкт-Птербург, «БХВ-Петербург» 2001г.
12. Н.Культин. ... ... в Delphi 7». ... В. ... А. Хомоненко. Delphi 5. М: “Кудиц - Образ”, 2000.
14. А. Я. Архангельский. Програмирование в Delphi 6. М: ... ... ... И. Ю. Delphi 7 ... ... ...... М: “ Кудиц - Образ ”, 2003.
16. Н. Культин. Основы программирование в Object Pascal на Delphi 5. ... ... ... П. В. Delphi 3 и ... базы ... С – Петербург:
“Номидж”, 1998.
18. Фараонов В. В. Delphi 5. Учебный курс.-М.: «Номидж», 2000.-608 с., ... ... «Delphi 7 ... ... СПб: ... 2003.
20. А. Я. Архангельский. Програмирование в Delphi 7. М: “Бином”, 2004.
Қосымша
a)
unit Unit1;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, ... ... ... ... SHDocVw, Menus, Buttons,
SHDocVw_TLB;
type
TForm1 = class(TForm)
TreeView1: TTreeView;
TreeView2: TTreeView;
WebBrowser1: TWebBrowser;
MainMenu1: TMainMenu;
N1: TMenuItem;
N2: TMenuItem;
N3: TMenuItem;
N4: TMenuItem;
N5: TMenuItem;
procedure TreeView1Change(Sender: TObject; Node: ... ... TObject; Node: ... ... ... N3Click(Sender: TObject);
procedure N4Click(Sender: TObject);
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
implementation
uses Unit2;
{$R ... ... TObject; Node: ... AnsiString;
begin
fileName := GetCurrentDir + '\html\' + TreeView1.Selected.Text + '.mht' ;
//ShowMessage(fileName);
WebBrowser1.Navigate(WideString(fileName));
end;
procedure TForm1.TreeView2Change(Sender: TObject; Node: ... ... := ... + '\lab\' + ... + '.mht' ... ... ... TForm1.N3Click(Sender: TObject);
begin
winExec('Тест/11.exe', SW_RESTORE);
end;
procedure TForm1.N4Click(Sender: TObject);
begin
form2.Show;
end;
end.
b)
unit Unit1;
interface
uses
Windows, Messages, SysUtils, Classes, Graphics, ... Forms, ... Buttons, ... ... ... = class(TForm)
Memo1: TMemo;
Memo2: TMemo;
Memo3: TMemo;
Memo4: TMemo;
Memo5: TMemo;
SpeedButton1: TSpeedButton;
SpeedButton2: TSpeedButton;
Label1: TLabel;
Label2: TLabel;
Label3: TLabel;
Label4: TLabel;
Timer1: TTimer;
OpenDialog1: TOpenDialog;
Label5: TLabel;
SpeedButton3: TSpeedButton;
SpeedButton4: TSpeedButton;
PopupMenu1: TPopupMenu;
N1: TMenuItem;
Image1: ... ... ... ... ... ... ... Memo4Click(Sender: TObject);
procedure Memo5Click(Sender: TObject);
procedure SpeedButton2Click(Sender: TObject);
procedure FormCreate(Sender: TObject);
procedure SpeedButton1Click(Sender: TObject);
procedure Timer1Timer(Sender: TObject);
procedure OpenTest1Click(Sender: TObject);
procedure Exit1Click(Sender: TObject);
procedure About1Click(Sender: ... ... ... TObject; var ... ... ... ... SpeedButton4Click(Sender: TObject);
procedure OpenDialog1Show(Sender: TObject);
procedure Memo1DblClick(Sender: TObject);
procedure Memo2DblClick(Sender: TObject);
procedure Memo3DblClick(Sender: TObject);
procedure Memo4DblClick(Sender: TObject);
procedure Memo5DblClick(Sender: TObject);
procedure ... ... ... TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure Memo2MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure Memo3MouseDown(Sender: TObject; Button: ... ... X, Y: ... ... TObject; Button: ... ... X, Y: ... Memo5MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
procedure N3Click(Sender: TObject);
procedure N4Click(Sender: TObject);
procedure Image1Click(Sender: ... Private ... ... DisableLogo;
{ Public declarations }
end;
var
Form1: TForm1;
spdclk1,spdclk2,spdclk3:Boolean;
TargetFile:System.Text;
InitChars:Set of Char;
fe:boolean;
useranswer:byte;
trueanswer,sum:byte;
rebuf:char; ... ... Unit2, Unit3, Unit4, ... ... ... ... i:=0 To Form1.ComponentCount-1 Do
Begin
If (Form1.Components[i] is TMemo) Then With (Components[i] as TMemo) ... ... is TLabel) Then With ... as TLabel) ... ... ... TObject);
begin
useranswer:=2;
speedbutton1.enabled:=true;
memo2.Color:=clRed;
memo3.color:=defcolor;
memo4.Color:=defcolor;
memo5.color:=defcolor;
end;
procedure TForm1.Memo3Click(Sender: TObject);
begin
speedbutton1.enabled:=true;
useranswer:=3;
memo2.Color:=defcolor;
memo3.color:=clRed;
memo4.Color:=defcolor;
memo5.color:=defcolor;
end;
procedure TForm1.Memo4Click(Sender: TObject);
begin
useranswer:=4;
speedbutton1.enabled:=true;
memo2.Color:=defcolor;
memo3.color:=defcolor;
memo4.Color:=clRed;
memo5.color:=defcolor;
end;
procedure TForm1.Memo5Click(Sender: TObject);
begin
useranswer:=5;
speedbutton1.enabled:=true;
memo2.Color:=defcolor;
memo3.color:=defcolor;
memo4.Color:=defcolor;
memo5.color:=clRED;
end;
procedure ... ... memo1 ... memo2 ... memo3 ... memo4 ... memo5 ... ';
text:='';
while (rebuf'#') do
begin
read(TargetFile,rebuf);
if rebuf='@' then
begin
closefile(targetfile);
fe:=true;
Speedbutton2.enabled:=False;
break;
messagedlg('Соңы!!!',mtError,[mbok],0);
end;
if (rebuf='#') then Break;
if rebuf='^' then qw:=qw+1;
if (rebuf in InitChars) then rebuf:=' ';
Text:=text+rebuf;
end;
memo1.lines.Add(text);
text:='';
rebuf:=' ... ... ... fe=true then ... ReBuf='%' then trueanswer:=2;
if rebuf='@' then
begin
Speedbutton2.enabled:=False;
break;
end;
if (rebuf='#') then Break;
if (rebuf in InitChars) then rebuf:=' ';
Text:=text+rebuf;
end;
memo2.lines.Add(text);
rebuf:=' ';
text:='';
while (rebuf'#') do
begin
if fe=true then ... ... then ... ... ... ... then ... (rebuf in InitChars) then rebuf:=' ';
Text:=text+rebuf;
end;
memo3.lines.Add(text);
rebuf:=' ';
text:='';
while (rebuf'#') ... fe=true then ... ... then ... rebuf='@' then
begin
Speedbutton2.enabled:=False;
break;
end;
if (rebuf='#') then Break;
if (rebuf in InitChars) then rebuf:=' ';
Text:=text+rebuf;
end;
memo4.lines.Add(text);
rebuf:=' ';
text:='';
while (rebuf'#') do
begin
if fe=true then ... ... then ... ... ... ... then Break;
if (rebuf in InitChars) then rebuf:=' ';
Text:=text+rebuf;
end;
memo5.lines.Add(text);
if fe=true then
begin
speedbutton1.enabled:=false;
memo2.enabled:=false;
memo3.enabled:=false;
memo4.enabled:=false;
memo5.enabled:=false;
messagedlg('Тест аяқталды!!!',mtinformation,[mbok],0);
Application.CreateForm(TForm2, Form2);
form2.showmodal;
form2.free;
end;
speedbutton2.enabled:=false;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
tag:=0;
defcolor:=clWIndow;
spdclk1:=false;
spdclk2:=false;
spdclk3:=false;
sum:=0;
qw:=0;
i:=216;
j:=256;
trueanswer:=0;
InitChars:=['$','#','^','%'];
fe:=false;
end;
procedure TForm1.SpeedButton1Click(Sender: ... ... ... ... ... ... ... АҒЫМДАҒЫ УАҚЫТ '+timetostr(time);
end;
procedure TForm1.OpenTest1Click(Sender: TObject);
var Ini:TIniFile;
begin
{Application.CreateForm(TForm4, Form4);
form4.showmodal;
form4.free;}
Application.CreateForm(TForm5, Form5);
Form5.ShowModal;
Form5.free;
{qw:=0;
rebuf:=' ';
text:='';
sum:=0;
per:=0;
outres:=0;
trueanswer:=0;
fe:=false;
if ... then ... ... TObject);
begin
close;
end;
procedure TForm1.About1Click(Sender: TObject);
begin
end;
procedure TForm1.SpeedButton3Click(Sender: TObject);
begin
Close;
end;
procedure TForm1.SpeedButton4Click(Sender: TObject);
var ... ... ... ... openDialog1.execute then begin
Ini:=TIniFile.Create('config.ini');
Ini.WriteString('options',ExtractFileName(OpenDialog1.FileName),OpenDialog1
.FileName);
DisableLogo;
speedbutton2.enabled:=true;
SpeedButton4.Enabled:=False;
assignfile(TargetFile,opendialog1.FileName);
reset(targetfile);
memo2.enabled:=true;
memo3.enabled:=true;
memo4.enabled:=true;
memo5.enabled:=true;
end;
end;
procedure TForm1.OpenDialog1Show(Sender: TObject);
begin
OpenDialog1.InitialDir:=ExtractFileDir(Application.ExeName);
end;
procedure TForm1.Memo1DblClick(Sender: TObject);
begin
Application.CreateForm(TForm4, ... ... ... ... ... ... ... TForm1.Memo4DblClick(Sender: TObject);
begin
Application.CreateForm(TForm4, Form4);
Form4.Memo1.Text:=Form1.Memo4.Text;
Form4.ShowModal;
Form4.Free;
end;
procedure TForm1.Memo5DblClick(Sender: TObject);
begin
Application.CreateForm(TForm4, Form4);
Form4.Memo1.Text:=Form1.Memo5.Text;
Form4.ShowModal;
Form4.Free;
end;
procedure TForm1.N1Click(Sender: TObject);
begin
Case Index OF
1:Memo1.OnDblClick(Self);
2:Memo2.OnDblClick(Self);
3:Memo3.OnDblClick(Self);
4:Memo4.OnDblClick(Self);
5:Memo5.OnDblClick(Self);
End;
end;
procedure ... TObject; Button: ... ... X, Y: ... ... Then ... ... TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
IF (Button=mbRight) Then Index:=2;
end;
procedure TForm1.Memo3MouseDown(Sender: TObject; Button: TMouseButton;
Shift: ... X, Y: ... ... Then ... ... TObject; Button: ... TShiftState; X, Y: Integer);
begin
IF (Button=mbRight) Then Index:=4;
end;
procedure TForm1.Memo5MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
IF (Button=mbRight) Then Index:=5;
end;
procedure TForm1.N3Click(Sender: TObject);
var ... ... ... ... ... ini:TIniFile;
begin
If OpenDialog1.Execute Then
begin
Ini:=TIniFile.Create('config.ini');
Ini.WriteString('options',ExtractFileName(OpenDialog1.FileName),OpenDialog1
.FileName);
Ini.Free;
End;
end;
end.
-----------------------
“Д имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы
несі?!” ─ Диманын жауабы ─ “Менде ... ... ... айтып балконға шығады және ол жерден бір
нәрсені
алады, сол сәтте ол заттың сол екенін ...

Пән: Информатика
Жұмыс түрі: Дипломдық жұмыс
Көлемі: 60 бет
Бұл жұмыстың бағасы: 900 теңге









Ұқсас жұмыстар
Тақырыб Бет саны
HTML-тілінің көмегімен Web-бетті қалыптастыру12 бет
E-leaning - де білімді бақылау жүйесін құру92 бет
HTML программасы арқылы құрылған Adobe Photoshop программасының қолдану оқулығы51 бет
HTML тілі6 бет
HTML – базалық технологиясы5 бет
PHP40 бет
PHP тілі13 бет
WEB-дизайн30 бет
Web-қосымшаларын құру технологиялары4 бет
World Wіde Web туралы ақпарат10 бет


Исходниктер
Пәндер
Көмек / Помощь
Арайлым
Біз міндетті түрде жауап береміз!
Мы обязательно ответим!
Жіберу / Отправить


Зарабатывайте вместе с нами

Рахмет!
Хабарлама жіберілді. / Сообщение отправлено.

Сіз үшін аптасына 5 күн жұмыс істейміз.
Жұмыс уақыты 09:00 - 18:00

Мы работаем для Вас 5 дней в неделю.
Время работы 09:00 - 18:00

Email: info@stud.kz

Phone: 777 614 50 20
Жабу / Закрыть

Көмек / Помощь