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 Жұмыс сипаты
ҚОРЫТЫНДЫ
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР
ҚОСЫМША
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-дің мүмкіндіктерін қолданылады.
Қорытындыда жұмыстың нәтижелері баяндалған. Қосымшада бағдарламаны өңдеу процедуралары берілген.
Бүгінгі таңда әлеуметтік-экономикалық жағдайы ақпараттық технологияны өмірдің әрбір саласында жаппай пайдаланумен сипатталады. Студенттердің танымдық іс-әрекеттері күшейіп, өзіндік жұмыстарды тез орындау мүмкіндіктері артты.
Қазіргі кезде мәліметтерді сақтау және өңдеу жұмыстарын соңғы жылдарда шыққан программалық өнімдер арқылы жылдам әрі тиімді ұйымдастыруға болады.
Сондықтан мен 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.
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.
Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 70 бет
Таңдаулыға:
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 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-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды
өте тиімді деп айтуға болмас, бұл тек TCPIP хаттамалары негізінде
электрондық мәліметті алмасудың жеке бір түрі ғана. Адамның дауысы цифрлы
файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым
мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы
байланысынын ұлттык операторы болып саналатын Қазактелеком ААҚ-ы осы
байланыс түрін практикада пайдаланып жүр.
1.1 Мәтіндермен жұмыс
Әріптер құру.
Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі,
базалық сызық одан бірнеше жол төмендеп тұрады. Әріп оқушының көңілін
мәтінге аударады. Егер бұл бетте басқа айқын белгілер болмаса. Әдетте
символдың өзінен басқа өсімдік, жануар және басқа заттар қолданылады. Бұл
әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере алады. Егер де
сайтты тура солай жасағыңыз келсе, оған бәрінен де оң жағымен түзетілген
сурет жақсы келеді.
1-мысал. Әріпті сурет көмегімен жаса
Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері
арқылы тігінен және көлденеңнен беріледі.
Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен
әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық
форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады.
Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі
әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай
ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.
Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені
сызу керек.
2-мысал. Мәтін түріндегі әріп.
table align=left border=0 cellspacing=0 celpadding=0
trtdfont size=7"Дfonttdtr
table
Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─
Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға
шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін
түсінесің.
Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor
параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы
реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды.
Бұл жағдайда код HTML айқындалмайды.
3-мысал. Стильдерді қолдану.
head
style type="textcss"
.letter { font-family: Arial; font-size: 24pt; color: navy }
style
head
table align=left border=0 cellspacing=0 celpadding=0
trtdspan class=letter"Дspantdtr
имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─
Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға
шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін
түсінесің.
Әріпті сол жағынан негізгі мәтіннен бөлуге ештеңке кедергі бола
алмайды.Осы әрекетпен қарапайым эффекті жасай аламыз. Әріпті орналастыру
үшін міндетті түрде екі ұяшықты кесте құру керек, сол жағында бірінші
символ, ал екінші жағында қалған мәтін орналасады.
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- мысал. Кескін қасиеттерін қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=leftLorem
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
tdimg src=sample.gif width=50 height=50td
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- мысал. Стильдерді қолдану
html
body
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 Lorem ipsum Lorem ipsum Lorem ipsum
dolor sit amet,dolor sit amet,dolor sit amet,dolor sit amet,
consectetuer consectetuer consectetuer consectetuer
adipiscing adipiscing adipiscing adipiscing
elit, sed diem elit, sed diem elit, sed diem elit, sed diem
nonummy nibh nonummy nibh nonummy nibh nonummy nibh
euismod euismod euismod euismod
tincidunt ut tincidunt ut tincidunt ut tincidunt ut
lacreet dolore lacreet dolore lacreet dolore lacreet dolore
magna aliguam magna aliguam magna aliguam magna aliguam
erat volutpat. erat volutpat. erat volutpat. erat volutpat.
Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін
жылжиды, ал оң жағы түзетілмейді. Оң және орталық бойынша түзету негізінен
тақырыпшаларда қолданылады. Ескертетін жағдай, мәтінді ені бойынша түзету
кезінде сөздер арасында үлкен интервалдар пайда болуы 2-кестеде
көрсетілген.
2-кесте.
HTML коды Мағынасы Мысал
pмәтін p Сол жақ бойынша Мәтін
түзетілген жаңа
параграфты үнсіз келісім
бойынша қосады. Параграф
алдында автоматты түрде
бос жорл қосылады.
p align=left мәтін pСол жақ бойынша түзету Мәтін
p align=right мәтін Оң жақ бойынша түзету Мәтін
p
p align=center мәтін Орталық бойынша түзету Мәтін
p
p align=justify мәтін Ені бойынша түзету Ені бойынша мәтін
p
nobr мәтін nobr Егер мәтін браузер Мәтін
терезесінен үлкен болса,
онда жолдардың автоматты
ауысуын өшіреді.
мәтін wbr Егер NOBR тег. Мәтін
қолданылса, браузердің
белгіленген жеріне
жолдарды ауыстыруға
мүмкіндік береді.
center мәтін center Орталық бойынша түзету Мәтін
div align= center мәтінОрталық бойынша түзету Мәтін
div
div align=left мәтін Сол жақ бойынша түзету Мәтін
div
div align= right мәтінОң жақ бойынша түзету Мәтін
div
div align=justify мәтінЕні бойынша түзету Ені бойынша мәтін
div
Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген,
сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін
енгізу керек.
(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар
мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл
тега DIV жағдайында болмайды.
Сөздер арасындағы бос орын.
HTML-дің ерекшелігі мынада, сөз арасында пробелдер саны қаншалықты
болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз арасын
алшақтату, үлкейту керек болады. Қаріптің көлемі FONT көмегімен немесе
стильдерді қолдану арқылы өзгеретіні белгілі. Кейде пробелді көбірек қою
туралы ой келеді. Ол үшін мына конструкцияны қолдану керек.
Обещаемspan style="font-size: 150%" spanобещатьspan style="font-size:
150%" spanнеspan style="font-size: 150%" spanобещать!
Бұл бірішіден айқын болып көрінеді, ал екіншіден бос орын көлемі көлденең
ғана емес, тігінен де өзгереді. Сондықтан базалық сызығы аралас болуы
мүмкін.
Мәселені бұдан жақсырақ шешу үшін келесі кеңестер ұсынылады.
Бөлінбейтін пробелін қолдану;
символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда
пробель қойылғаны үшін таңдалады. Сондықтан да бұндай пробельдің он
шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ көрсетеді
деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де көрінбейді. Ол 1-
мысалда көрсетілген.
1-мысал. символының қолданылуы
Мен сіз үшін өз жұмысымды орындамаймын!
Мысалда абзац төрт пробель арқылы қойылған: біреуі – кәдімгі және үшеуі -
символының көмегімен. Пробельдің мұндай көлемі базалық қаріп
көмегімен сәйкес келеді.
Бөлінбейтін пробелді қолдану белгіленген қолайсыз жағдайлармен қатар
жүреді. Сөздердің араларын бүкіл слайд мәтінінде өзгерту қажет деп санаңыз.
Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз
арасындағы пробелдің түрі стиль болып табылады. [1,2].
Стильдерді қолдану
Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі
қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және
басқа да бірліктермен қойыла алады.
2-мысал. word-spacing атрибутын қолдану
span style=” word-spacing: 10px”Піл + жақсы тағам = екі пілspan
Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі.
Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне
қолдануға болады. Ол 3-мысалда көрсетілген.
3-мысал. Стильдерді қолдану
html
head
style
P { word-spacing: 10px }
style
head
body
p-Булочку надо?p
p-Спасибо, не надо!p
p-Не надо?! Спасибо!p
body
html
Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына
ешқандай шегінулер қойылмайды.
Текстің астын сызуды тудыру
Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да
безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін
қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын
сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл
үшін border – bottem параметірін қолданатын жаңа стиль шығару керек.Ол
мәтіннің астынан сызық шығарады.
1- мысал. Пунктирлі сызықты жіберуді қабылдау.
html
head
style
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
style
head
body
a href=1.htmlПодчеркнутая ссылкаa
body
html
Мысалда, жіберілетін стиль құрылады, онда тышқан тетігімен басылған
тектің асты пунктирлі көк сызықты құрайды.
Контекстік селекторлар
Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег
қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана
анықтауға болады.
Қарапайым селекторларды қолдану
B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }
Контекстік селекторлар пробелмен ажыратылған жай селекторлардан
тұрады.
B I { font-family: Arial; font-weight: bold; color: navy; font-style:
italic; }
Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер
ол В тегінің ішінде болса.
2-мысал. Контекстік селекторлар
html
head
style type="textcss"
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style:
italic; }
style
head
body
bЖирный шрифтb
iКурсивный текстi
biЖирный курсивный текстib
ibКурсивный и жирный текстbi
body
html
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.
В, І, Н1, Р. Cite {color: navy;}
Мысалдағы көк түс қолданылады:
• В тегінің ішіне орналастырылған І тегінің курсивіне
• Н1 барлық тегіне
• Р тегі параграфіндегі Cite класына
1.2 Сілтемелер
Сілтемені қалай жасауға болады?
Сілтемені құру үшін браузерге, сілтеме деген не?, сілтеме жасайтын
құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет
href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL)
документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты
болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына
байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.
1-мысал. Абсолютті сілтемелерді қолдану
html
body
a href=www.yandex.ruІздейтін жүйе Яндексa
body
html
Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе
адреске қатысты құрылады.
Мұндай адрестер мысалдары;
demo
Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе
demo папкасында орналасқан index.html файлы болмаса браузер, берілген
каталогта бар файлдар мазмұнын көрсетеді.
images pic.gif
Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді.
Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта
орналасқан ..helpme.html
Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы
жоғары деңгейге өтуін білдіреді.
manual info.html
Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде
орналасқанын білдіреді.
2-мысал. Қатысты сілтемелерді қолдану.
html
body
a href=imagesxxx.jpgПосмотрите на мою фотографию!a
a href=tip.htmlКак сделать такое же фото?a
body
html
Браузер енін анықтау.
Кейбір мәселелерде браузер терезесінің оң жағы бойынша қабатты
орналастыру талап етіледі. Бірақ, қабат орны пиксельдермен берілгендіктен,
оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын
білу талап етіледі.
Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі
қадам қолданылады. Internet Explorer және Opera-да еннің мәні
document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас
анықталады, тек Width – ол Нeight – қа айналады. Қорытындысында,
JavaScript-те жазылған функциялар 1-мысалда көрсетілгендей түрге ие болады.
1- мысал. Ені мен биіктігін анықтау үшін функциялар
script language="JavaScript"
IE = (document.all);
NC = (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 = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
script
Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті
орналастырылуы бар қабат құру қажет.
2- мысал. Қабат құру
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000
cellspacing=0
tr
tdСодержаниеtd
table
div
Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне
қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс.
Егер қабатты мәтіннен төмен орналастыру керек болса –теріс мән
пайдаланылады.
Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.
3- мысал. Браузерлердің оң жақ бұрышында қабатты орналастыруды беру
span class="select"function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}
Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, жұмыс аймағының
енінен қабат енін алып тастау керек (мысалда – 100пиксель). Егер қабат
браузер терезесінің төменгі бұрышында орналасса, биіктігімен де солай
жасаймыз.
Берілген қабат көрсетілген орында қалуы үшін және өз орнын әр қашанда
өзгертпеуі үшін яғни терезе өзгергенде SetTimeout функциясы қолданылады,
ол әр 1000 миллисекундта қабат орнын қалпына келтіреді (немесе 1 секунд).
3 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға
болады, мысалы On load оқиғасын.
4 -мысал. Функцияны автоматты түрде шақыру
body onLoad="putLayer()"
...
body
Браузердің кез-келген бұрыштарында қабатты орналастырудың толық
листингін келтірейік
Жоғарғы оң жақ бұрышта
html
head script language="JavaScript"
IE = (document.all);
NC = (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 = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}
function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()',1000);
}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Оң жақ төменгі бұрышта
html
head
script language="JavaScript"
function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - 200;
if(IE) {
eval('document.all["xyz"].style.lef t = widthBrowser');
eval('document.all["xyz"].style.top = heightBrowser');}
if(NC) {
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);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Сол жақ төменгі бұрышта
html
head script language="JavaScript"
function putLayer() {
heightBrowser = getHeight() - 200;
if(IE) eval('document.all["xyz"].style.top = heightBrowser');
if(NC) eval('document.layers["xyz"].top = heightBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.top = heightBrowser');
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-
index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Веб-парақтардың оптимизациясы
Веб-парақтардың оптимизациясы дегенде, біз қолданушыға максимальды тез
болатын яғни, браузерде парақтарды жүктеуге мүмкіндік беретін әдістер мен
тәсілдерді қолдану деп түсінеміз.
Оптимизацияның басты ойы – бұл файлдар көлемін әртүрлі құралдармен
кішірейту, бірақ мұнда да белгілі бір әдістер қолданылады, олар парақта
басқа элементтер пайда болмайынша контентті жүктеуге мүмкіндік береді.
Төменде, осы мақсатқа жетудің кейбір әрекеттері сипатталған.
Маңызды ақпаратты парақ үстіне орналастырыңыз.
Веб-парақтар жоғарыдан төменге қарай жүктеледі, ал төмен орналасқанға
қарағанда парақтың жоғарғы жағындағы ақпарат ертерек пайда болады.
Сондықтан, қолданушы үшін аса маңызды материалдарды парақтың басына қарай
орналастырыңыз.
Бір кескінді көп мәрте қолданыңыз
Беттен – бетке қайталанатын графикалық элементтерді қолданыңыз яғни,
логотиптер, навигация элементтері сияқтылар. Суреттің алғашқы жүктелуінде,
кескіні бар файл браузер кэшіне орналасады және берілген суретті қайта-
қайта қолдану оның ол кездесетін басқа парақтарда пайда болуын тездетеді.
(CSS ) стильдерінің каскадты кестеларін қолданыңыз
Форматтау атрибуттары тобына бірден барлығына бір әрекетті қолдану
арқасында стильдер НТМL кодын айтарлықтай ықшамдайды. Стильдер көмегімен
мысалға , барлық тақырып жолының түрін өзгертуге болады. Бірақ үш тәсілмен
тақырып жолын форматтамаудың орнына яғни, оның өлшемі басында берілсе,
кейін қаріп берілсе және ең соңында орталық бойынша түзету болса, оны бір
уақытта анықталған тегке стильді қолдану арқылы тура соны іске асыруға
болады.[12].
Кестелер ерекшеліктерін ескеріңіз
Әдетте веб-парақтар көрінбейтін шекаралары бар кестелерді қолдану
арқылы беттеледі. Сол кестелердің ерекшелігі – егер соңғы сөз кестенің ең
төменгі жағына жүктелмесе , экранда ұяшықтардың құрамы бейнеленбейді.
Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау үшін, кесте
туралы бүкіл ақпаратты алуда қолданады. Алайда, егер кесте биіктігі бойынша
үлкен болса, біз қажетті ақпаратты тапқанымызша елеулі уақыт өтіп кетеді.
Осыны ескеру, сізге веб-парақтың құрамындағылардың шығуын тездету
мүмкіндігін береді. Жүктеуді тездетудің тағы бір әдісі – бұл кестелер
орнына қабатты қолдану.
Графиканы оптимизациялаңыз
Веб-параққа графикалық кескіндер тез жүктелуі үшін, сапаларын сақтауда
суреттер файлдарының өлшемін кішірейту керек. Графиканы оптимизациялау
үшін, файлдар форматын ескере отырып, әртүрлі параметрлермен басқаруға
мүмкіндік беретін арнаулы программалар бар. Мысалы, Adobe Image Ready,
Ulead SmartSaverPro, MacromediaFireWorks және т.с.с.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы,
парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
Салымдарды құру
Салымдар новигация элементінің бірі, сайтты қолданушы салымдарға кез
келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша,
бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт бөлімдері
арқылы өтуін тез түсіндіреді. 1-суретте салым құрудың бір нұсқасы
көрсетілген.
1-сурет. Салымдарды құрып орналастыру
Графикалық салымдарды кез келген графикалық редакторда құруға болады.
Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен
жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз, мысалы 2-
суретте көрсетілген стиль арқылы.
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
2-сурет. Стилдердің арқылы салымдарды құру
Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды
құрайды, ал шеткі екі ұяшығы сән үшін керек, олар көлденең шетке шегіну
сызығы үшін керек.
Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open
дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет.
Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы
стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы
болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right:
none параметрі қолданылады. Сондай-ақ ағымдағы салым үшін төменгі шекараны
жасырып қою керек. Оң және сол ұяшықтың стилін тура сипаттауға болады.
Бірақ сайтта салымды көп қолдану үшін бөлек класс қолданған дұрыс.
1-мысал. Кестені қолдану
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none;
text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center;
background: #CFD6D4; }
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px
black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-
bottom: solid 1px black" td
tr
table
body
html
Кестені қолданудың бірнеше ерекшелігі бар. Терезе көлемін өзгерту кезінде
кесте ені бойынша құрылады. Сондықтан салымдар әрқашан көрінеді және
міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span
немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер
терезелерінің кішірейгенін көруге болады. 2-мысалда span тегасы
қолданылады, оның көмегімен салымдар жасалынады. Әр түрлі блоктар бір
бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.[14].
2-мысал. SPAN тегін қолдану
style
.open { border: solid 1px black; border-right: none; border-bottom: solid
1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: center;
background: #CFD6D4; width: 24%; padding: 4px }
style
span style="border-bottom: solid 1px black; width:
10px" spanspan class=openЧебурашкаspanspan
class=closeКрокодил Генаspanspan class=closeШапоклякspanspan
class=closeКрыса Ларисаspanspan style="border-left: solid 1px black;
border-bottom: solid 1px black; width: 10px; padding: 4px" span
Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі салымдарды құруға
болады. 3-суретте түгенделген салымның мысалы көрсетілген, бұл жағдайда
белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
3-сурет.
3-мысалда осындай салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан
кесте қолданылады.[13].
3-мысал. Салымдарды кесте арқылы құру
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none;
font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }
.close { border: solid 1px black; border-right: none; text-align: center;
padding: 4px}
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px
black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-
bottom: solid 1px black" td
tr
tr
td bgcolor="#CFD6D4" colspan="6" height=10td
tr
table
body
html
Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр
сызықты форматтайды. Оның ені мен түсі height және bgcolor ұяшықтарының
ерекшелігімен ауысады.
Скриптер.
Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы динамикалық
басқарылуы HTML құжатымен байланысқан программа арқылы іске асады. Мұндай
программаларды скриптілер деп атайды немесе басқа әдебиеттерде
кездесетіндей – сценарийлер деп атауға болады. Скриптілер Script тегі
арқылы сипатталады, яғни оның құрамында программаға немесе анықталған
тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері
қолданылады - JavaScript және VB Script.
Скриптерді құру
Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең
тарағанының ерекшелігі – бұл Script контейнерінің ішінде программаның
орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында
программаны қамтиды.
Скрипт жазылу синтаксисы;
script language="язык программирования" type="тип MIME" src="имя файла"
Текст программы
script
Language параметрі скрипттің жазылу тіліне нұсқайды, ол JavaScript
немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына
нұсқа (версия) нөмірін қосады. Мысалы JavaScript 1.3 (1-мысал).
1-мысал. Браузер қолдайтын тілдерді анықтау
html
head
script language="VBScript" VB = True script
script language="JavaScript" JS = 1; script
script language="JavaScript1.1" JS11 = 1; script
script language="JavaScript1.2" JS12 = 1; script
script language="JavaScript1.3" JS13 = 1; script
script language="JavaScript1.4" JS14 = 1; script
script language="JavaScript1.5" JS15 = 1; script
script language="JavaScript"
document.write("bПоддерживаемые языки:b
");
if(window.JS) document.write("JavaScript
");
if(window.JS11) document.write("JavaScript 1.1
");
if(window.JS12) 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
");
script
head
body
...
body
html
орындаудың нәтижесі төменде көрсетілген
Language параметрін көрсету ұсынылады, себебі егер, браузер
программалау тілін анықтамаса, онда скрипт қабылдамайды және орындамайды
да. Сонымен қатар, HTML 4.0 нұсқасында осы параметрді қолдану аса тиімді
емес. Оның орнына type параметрін қолданған дұрыс, ал ол анықталған тіл
үшін MIME типін нұсқайды: JavaScript үшін – textjava script, ал VB
Script үшін - textvb script. Бірақ кейбір браузерлер type параметрін
түсіне алмайды, сондықтан language және type екі атрибутын бір уақытта
берген дұрыс. Егер браузер type параметрінің мәнін анықтамаса, онда
language мәні орындалмайды.
script language="JavaScript" type="textJavaScript"
JavaScript тіліндегі бағдарлама
script
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен
байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір
функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді,
яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі
шақырылуда скрипт тез шақырылады.
script language="JavaScript" type="textJavaScript"
src="main.js"script
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос
қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде
орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері
Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз көлемде
орналасады. Көп жағдайларда скриптілердің орналасуы программа жұмысына
мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте
құжат басына орналастырады. Программалық құралдар арқылы объектілерді
құруда скриптілерді құжаттың дәл өзіне орналастырып, document.write немесе
document.writeln әдісінің көмегімен нәтижесін шығарады.Ол 2-мысалда
көрсетілген.
2- мысал. Скрипт көмегімен Кесте құру
html
body
table width=400 border=1
script language="JavaScript"
for (i=1; i6; i++) {
document.writeln("tr");
for (j=1; j6; j++) document.write("td" + i + j + "td");
document.writeln("tr");}
script
table
body
html
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар кестені құрып, оны сандармен
толтырады
Скриптілерді түсінбейтін браузерлерден программа кодын жасыру үшін,
бастамас бұрын және аяқтағаннан кейін НТМL түсініктемесін қосады.
script language="JavaScript"
!--
Бағдарлама тексті
--
script
НТМL түсініктемесін жапқаннан кейін JavaScript (II) тілінің
түсініктемелері немесе VB Script (I) түсініктемелері шығуы керек.
Қазіргі таңда барлық жаңа шыққан браузерлер скриптерді түсінеді,
сондықтан түсініктемелер міндетті түрде болуы шарт емес.
Скриптерді шақыру және іске қосу
Скриптерді орындаудың негізгі әдістері функцияларды шақыру және белгілі
оқиғаға қол жеткізу арқылы іске асады. Скриптті 3-мысалда көрсетілгендей
парақты жүктеуден кейін автоматты түрде іске қосуға болады.
3-мысал. Скриптті автоматты түрде іске қосу
html
head
script language="JavaScript"
alert("Hello, world!")
script
head
bodybody
html
Тура сол программаны функция арқылы жазуға болады
4- мысал скриптердің автоматты түрде ашылуы
html
head
script language="JavaScript"
function foo() {
alert("Hello, world!")}
foo();
script
head
bodybody
html
Foo функциясы парақты жүктеуде іске қосылады себебі оның шақыруы айқын
көрсетілген.
Оқиғалар мен скриптілерді байланыстырудың екі әдісі бар. Біріншісінде
тіркелген оқиғалар қолданылады тышқан немесе пернетақта. Мысалы, тышқанның
сол жағына басқанда onclick оқиғасымен кезек жүреді
5-мысал. Тышқан оқиғасын қолдану
input type= button value= “ баспаңыз!” onclick = “alert” ( сіз
батырмаға бастыңыз мұны жасауға болмайды деп ескерткенбіз)
Белгілі оқиғаларға көңіл бөлудің басқа әдісі SCRIPT - for тегінің
параметрлерімен байланысты, яғни оқиғаларды анықтайтын скрипт event элемент
атауының берілгені үшін орындалады
script language="JavaScript" for="document" even="onLoad"
alert("Загрузка страницы завершена...")
script
Хабарламаны шақыру мысалында құжатты жүктегеннен кейін пайда болады
кейбір браузерлер for және event параметрлерін түсінбейді және сктиптті
жедел іске қосады. Бұл жағдайда оқиғаларды қолданған жөн.
1.3 Бейне суреттермен жұмыс
Веб-парағында орналастырылатын бейнені түрлі көлемді қоршауға
орналастыруға болады. Бұл үшін IMG тегасындағы border параметрі қызмет
атқарады. Егер сурет жіберілген болған жағдайда басқа, қоршау келісім болса
бейне жан-жағында көрінбейді. Бұл жағдайда қоршау түсі мәтін түсімен сәйкес
келеді, ол стиль көмегімен немесе BODY тегасындағы text параметрімен
енгізілуі 1- мысалда көрсетілген.
1- Мысал. Бейне жан-жағына қоршау құру.
html
body text=#00FF00
img src="sample.gif" width=50 height=50 border=2 қоршау зеленого цвета
толщиной 2 пиксела
body
html
Егер сурет жіберілген болса, онда қоршау автоматты түрде құрылады, оның
қалыңдығы 1 пиксел, қоршаудың түсі жіберу түсімен сәйкес келеді.
Қоршауды алыптастау үшін border=0 (2 пиксел) параметрін енгізу керек.
2- мысал. Бейне жан-жағындағы қоршауды алып тастау
a href=”sample.html”img src=” sample. gif ” width=50 height=50
border=0a
Жіберілген барлық бейнелерде қоршауды алып тастау үшін CSS қолдануға
болады. Бұл үшін none мағынасындағы border параметрін қолданылуы 3- мысалда
көрсетілген.
3 -мысал. CSS қолдану
style
A IMG { border: none }
style
AIMG { } конструкциясы стильдердің қолдану ??? анықтайды. Ол тек А
контейнерінің ішінде орналасқан IMG тегасы және жіберілген болып табылады.
Netscape 4x браузерінде көрсетілген тәсіл жұмыс істейді, өйткені ол
border:none қасиетін игермеген. Ол үшін келесі қулықты қолдануға болады.
Қоршау түрін веб-?? Бетіндегідей құруға болады. Бұл жағдайда қоршау бет
түсімен беттесіп, көрінбейді (4 мысал).
4-мысал. Стильдер көмегімен қоршау түсі
style
A IMG { border: none; border-color: #FFFFFF; }
style
Мысалда қоршау түсі – ақ.көрсетілген әдіспен кез келген түсті бейнеге
қоршау құруға болады, нәтижесінде қызық эффектілер алынады. Бірақ алдын ала
border: none алып тастау қажет.
Графикалық қаттамалар
Қаттамалар бұл таңдау нұсқаларын ұйымдастыру үшін командалар тізімі.
Қаттамаларды құруда графикалық кескіндерді қолдану сайтқа кірушілердің
назарын аударады және эстетикалық көркін күшейтеді. Төменде қаттамалар
нұсқалары көрсетілген, алдағы уақытта біз соларды қарастырамыз.
Чебурашка
Крокодил Гена
Шапокляк
Қаттаманы құру үшін бастапқыда екі сурет қажет, оларды кез-келген
графикалық редакторда әзірлеуге болады. 4-ші сурет белсенді емес тармақты
белгілеу үшін қолданылады, ал екіншісі тышқанды бетіне әкелу кезінде сол
суретті алмастырады.
4-сурет. Каттаманы құру үшін бейне
5-сурет. Бейнеге курсорды жақындатқан кездегі түрі
Мұндай әдісті айналу эффектісі немесе rollover деп атайды.
Ең бірінші қаттама үшін негіз құрамыз (1мыс.)
1-мысал. Menu қабаты үшін стиль
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;}
Height параметрі арқылы берілетін қабат биіктігі біздің суреттеріміздің
биіктігіне тең болуы керек, берілген жағдайда ол 40 пиксельді құрайды.
Арақашықтығы padding аргументімен басқарылады, ал сызық биіктігі мен түсі
төмендегідей border – bottom атрибутымен беріледі. Суреттердің биіктігі мен
ені алдын-ала берілгендіктен, мәтін өлшемі өзгермеуі тиіс, себебі ол сурет
шегінен шығып кетуі мүмкін. Қаріпті браузердің баптауы арқылы үлкейтіп не
кішірейтуге болады, оны болдырмау үшін, қаріп өлшемін абсолютті бірліктерде
қатаң беру керек. Мысалы font –size параметрі арқылы пиксельдермен
беру.
Енді қаттамалардың жеке тармақтарына өтейік. Стильді әртүрлі аттармен
жүктемеу үшін контекстті селекторларды қолданамыз. #menuDIV құрылымы - бұл
стильдің тек DIV тегі үшін жұмыс істейтіндігін анықтайды, ол menu деген
атпен қабат ішінде орналасады. Ол үшін тек сипаттама жасау қалды.
2- мысал. Жеке тармақтар үшін стиль
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
Float параметрі қабатты көлденеңінен орналастыру үшін қажет, ол болмаса
қабаттар бірінің астына бірі орналасады. Міндетті түрде сурет өлшеміне тең
қабаттың ені (width) мен биіктігін (height) беру керек. Marginright
аргументі қаттамалар арасындағы арақашықтықты басқарады, ал background
кескіні бар файлға жолдары анықтайды, ол абсолютті болуы мүмкін. Мысалы,
http:w.w.w.htmlbook.ruimagesml.jp g сияқты, сонымен қатар қатысты да бола
алады.
Сілтемелерді сипаттау ғана қалды контекстті селекторларды қолданып
#menuА элементі үшін стиль құрайық, ол menu қабатындағы (3-мысал)
сілтемелер үшін ғана жұмыс істейді. Бұл алдағы уақытта сайтта А тегін
қолдану үшін қолданылады және ол қай жерде сипатталғанына қарамастан жүзеге
асады.
3 -мысал. Сілтемелер стилін сипаттау.
#menu A {
width: 100%;
height: 100%;
padding: 12px;
}
#menu A:hover {
background: url('m2.jpg');
}
Padding параметрі қабат ішінде мәтіннің жылжуын анықтайды, яғни жазу
суреттің үстінде орналасуы үшін – биіктігі мен ені 10 пайыз болып орнатылуы
тиіс, сілтемемен тек қана мәтіндік сілтеме емес бүкіл сурет аймағы жұмыс
істеуі талап етіледі. Егер бұл параметрлерді алып тастасақ, онда айналу
эффектісі жазуға меңзерді әкелгенде ғана болады.
Бір суреттен екіншісіне ауысу A:hover псевдоклассы арқылы орындалады.
Ол сілтемеге тышқан меңзерін әкелудегі құбылысқа жауапты. Сол кезде фондық
кескіннің басқасына ауысуы background параметрі арқылы орындалады. 4
мысалда барлық стильдердің аяққы коды көрсетілген.
4 -мысал. Қаттамаларды құру үшін аяққы код.
html
head
style
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;
}
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
#menu A {
width: 100%;
height: ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
КІРІСПЕ 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-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды
өте тиімді деп айтуға болмас, бұл тек TCPIP хаттамалары негізінде
электрондық мәліметті алмасудың жеке бір түрі ғана. Адамның дауысы цифрлы
файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым
мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы
байланысынын ұлттык операторы болып саналатын Қазактелеком ААҚ-ы осы
байланыс түрін практикада пайдаланып жүр.
1.1 Мәтіндермен жұмыс
Әріптер құру.
Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі,
базалық сызық одан бірнеше жол төмендеп тұрады. Әріп оқушының көңілін
мәтінге аударады. Егер бұл бетте басқа айқын белгілер болмаса. Әдетте
символдың өзінен басқа өсімдік, жануар және басқа заттар қолданылады. Бұл
әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере алады. Егер де
сайтты тура солай жасағыңыз келсе, оған бәрінен де оң жағымен түзетілген
сурет жақсы келеді.
1-мысал. Әріпті сурет көмегімен жаса
Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері
арқылы тігінен және көлденеңнен беріледі.
Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен
әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық
форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады.
Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі
әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай
ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.
Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені
сызу керек.
2-мысал. Мәтін түріндегі әріп.
table align=left border=0 cellspacing=0 celpadding=0
trtdfont size=7"Дfonttdtr
table
Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─
Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға
шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін
түсінесің.
Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor
параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы
реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды.
Бұл жағдайда код HTML айқындалмайды.
3-мысал. Стильдерді қолдану.
head
style type="textcss"
.letter { font-family: Arial; font-size: 24pt; color: navy }
style
head
table align=left border=0 cellspacing=0 celpadding=0
trtdspan class=letter"Дspantdtr
имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─
Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға
шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін
түсінесің.
Әріпті сол жағынан негізгі мәтіннен бөлуге ештеңке кедергі бола
алмайды.Осы әрекетпен қарапайым эффекті жасай аламыз. Әріпті орналастыру
үшін міндетті түрде екі ұяшықты кесте құру керек, сол жағында бірінші
символ, ал екінші жағында қалған мәтін орналасады.
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- мысал. Кескін қасиеттерін қолдану
html
body
img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=leftLorem
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
tdimg src=sample.gif width=50 height=50td
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- мысал. Стильдерді қолдану
html
body
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 Lorem ipsum Lorem ipsum Lorem ipsum
dolor sit amet,dolor sit amet,dolor sit amet,dolor sit amet,
consectetuer consectetuer consectetuer consectetuer
adipiscing adipiscing adipiscing adipiscing
elit, sed diem elit, sed diem elit, sed diem elit, sed diem
nonummy nibh nonummy nibh nonummy nibh nonummy nibh
euismod euismod euismod euismod
tincidunt ut tincidunt ut tincidunt ut tincidunt ut
lacreet dolore lacreet dolore lacreet dolore lacreet dolore
magna aliguam magna aliguam magna aliguam magna aliguam
erat volutpat. erat volutpat. erat volutpat. erat volutpat.
Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін
жылжиды, ал оң жағы түзетілмейді. Оң және орталық бойынша түзету негізінен
тақырыпшаларда қолданылады. Ескертетін жағдай, мәтінді ені бойынша түзету
кезінде сөздер арасында үлкен интервалдар пайда болуы 2-кестеде
көрсетілген.
2-кесте.
HTML коды Мағынасы Мысал
pмәтін p Сол жақ бойынша Мәтін
түзетілген жаңа
параграфты үнсіз келісім
бойынша қосады. Параграф
алдында автоматты түрде
бос жорл қосылады.
p align=left мәтін pСол жақ бойынша түзету Мәтін
p align=right мәтін Оң жақ бойынша түзету Мәтін
p
p align=center мәтін Орталық бойынша түзету Мәтін
p
p align=justify мәтін Ені бойынша түзету Ені бойынша мәтін
p
nobr мәтін nobr Егер мәтін браузер Мәтін
терезесінен үлкен болса,
онда жолдардың автоматты
ауысуын өшіреді.
мәтін wbr Егер NOBR тег. Мәтін
қолданылса, браузердің
белгіленген жеріне
жолдарды ауыстыруға
мүмкіндік береді.
center мәтін center Орталық бойынша түзету Мәтін
div align= center мәтінОрталық бойынша түзету Мәтін
div
div align=left мәтін Сол жақ бойынша түзету Мәтін
div
div align= right мәтінОң жақ бойынша түзету Мәтін
div
div align=justify мәтінЕні бойынша түзету Ені бойынша мәтін
div
Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген,
сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін
енгізу керек.
(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар
мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл
тега DIV жағдайында болмайды.
Сөздер арасындағы бос орын.
HTML-дің ерекшелігі мынада, сөз арасында пробелдер саны қаншалықты
болса да, ол біреу болып көрсетіледі. Кейде сайт жасаушыларға сөз арасын
алшақтату, үлкейту керек болады. Қаріптің көлемі FONT көмегімен немесе
стильдерді қолдану арқылы өзгеретіні белгілі. Кейде пробелді көбірек қою
туралы ой келеді. Ол үшін мына конструкцияны қолдану керек.
Обещаемspan style="font-size: 150%" spanобещатьspan style="font-size:
150%" spanнеspan style="font-size: 150%" spanобещать!
Бұл бірішіден айқын болып көрінеді, ал екіншіден бос орын көлемі көлденең
ғана емес, тігінен де өзгереді. Сондықтан базалық сызығы аралас болуы
мүмкін.
Мәселені бұдан жақсырақ шешу үшін келесі кеңестер ұсынылады.
Бөлінбейтін пробелін қолдану;
символы көп жағдайда қолданылады. Ол тәуелсіз жағдайда әрқашанда
пробель қойылғаны үшін таңдалады. Сондықтан да бұндай пробельдің он
шақтысын қолдануға болады, браузер оның бәрін көрсетеді. Бірақ көрсетеді
деген сөз бұл жағдайда қате, өйткені пробель бәрі бір де көрінбейді. Ол 1-
мысалда көрсетілген.
1-мысал. символының қолданылуы
Мен сіз үшін өз жұмысымды орындамаймын!
Мысалда абзац төрт пробель арқылы қойылған: біреуі – кәдімгі және үшеуі -
символының көмегімен. Пробельдің мұндай көлемі базалық қаріп
көмегімен сәйкес келеді.
Бөлінбейтін пробелді қолдану белгіленген қолайсыз жағдайлармен қатар
жүреді. Сөздердің араларын бүкіл слайд мәтінінде өзгерту қажет деп санаңыз.
Бұл үшін өте көп жұмысты босқа жасайсыз, сондықтанда көп қолданылатын сөз
арасындағы пробелдің түрі стиль болып табылады. [1,2].
Стильдерді қолдану
Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі
қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және
басқа да бірліктермен қойыла алады.
2-мысал. word-spacing атрибутын қолдану
span style=” word-spacing: 10px”Піл + жақсы тағам = екі пілspan
Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі.
Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне
қолдануға болады. Ол 3-мысалда көрсетілген.
3-мысал. Стильдерді қолдану
html
head
style
P { word-spacing: 10px }
style
head
body
p-Булочку надо?p
p-Спасибо, не надо!p
p-Не надо?! Спасибо!p
body
html
Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына
ешқандай шегінулер қойылмайды.
Текстің астын сызуды тудыру
Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да
безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін
қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын
сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл
үшін border – bottem параметірін қолданатын жаңа стиль шығару керек.Ол
мәтіннің астынан сызық шығарады.
1- мысал. Пунктирлі сызықты жіберуді қабылдау.
html
head
style
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
style
head
body
a href=1.htmlПодчеркнутая ссылкаa
body
html
Мысалда, жіберілетін стиль құрылады, онда тышқан тетігімен басылған
тектің асты пунктирлі көк сызықты құрайды.
Контекстік селекторлар
Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег
қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана
анықтауға болады.
Қарапайым селекторларды қолдану
B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }
Контекстік селекторлар пробелмен ажыратылған жай селекторлардан
тұрады.
B I { font-family: Arial; font-weight: bold; color: navy; font-style:
italic; }
Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер
ол В тегінің ішінде болса.
2-мысал. Контекстік селекторлар
html
head
style type="textcss"
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style:
italic; }
style
head
body
bЖирный шрифтb
iКурсивный текстi
biЖирный курсивный текстib
ibКурсивный и жирный текстbi
body
html
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.
В, І, Н1, Р. Cite {color: navy;}
Мысалдағы көк түс қолданылады:
• В тегінің ішіне орналастырылған І тегінің курсивіне
• Н1 барлық тегіне
• Р тегі параграфіндегі Cite класына
1.2 Сілтемелер
Сілтемені қалай жасауға болады?
Сілтемені құру үшін браузерге, сілтеме деген не?, сілтеме жасайтын
құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет
href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL)
документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты
болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына
байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.
1-мысал. Абсолютті сілтемелерді қолдану
html
body
a href=www.yandex.ruІздейтін жүйе Яндексa
body
html
Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе
адреске қатысты құрылады.
Мұндай адрестер мысалдары;
demo
Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе
demo папкасында орналасқан index.html файлы болмаса браузер, берілген
каталогта бар файлдар мазмұнын көрсетеді.
images pic.gif
Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді.
Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта
орналасқан ..helpme.html
Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы
жоғары деңгейге өтуін білдіреді.
manual info.html
Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде
орналасқанын білдіреді.
2-мысал. Қатысты сілтемелерді қолдану.
html
body
a href=imagesxxx.jpgПосмотрите на мою фотографию!a
a href=tip.htmlКак сделать такое же фото?a
body
html
Браузер енін анықтау.
Кейбір мәселелерде браузер терезесінің оң жағы бойынша қабатты
орналастыру талап етіледі. Бірақ, қабат орны пиксельдермен берілгендіктен,
оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын
білу талап етіледі.
Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі
қадам қолданылады. Internet Explorer және Opera-да еннің мәні
document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас
анықталады, тек Width – ол Нeight – қа айналады. Қорытындысында,
JavaScript-те жазылған функциялар 1-мысалда көрсетілгендей түрге ие болады.
1- мысал. Ені мен биіктігін анықтау үшін функциялар
script language="JavaScript"
IE = (document.all);
NC = (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 = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
script
Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті
орналастырылуы бар қабат құру қажет.
2- мысал. Қабат құру
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000
cellspacing=0
tr
tdСодержаниеtd
table
div
Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне
қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс.
Егер қабатты мәтіннен төмен орналастыру керек болса –теріс мән
пайдаланылады.
Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.
3- мысал. Браузерлердің оң жақ бұрышында қабатты орналастыруды беру
span class="select"function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()', 1000);
}
Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, жұмыс аймағының
енінен қабат енін алып тастау керек (мысалда – 100пиксель). Егер қабат
браузер терезесінің төменгі бұрышында орналасса, биіктігімен де солай
жасаймыз.
Берілген қабат көрсетілген орында қалуы үшін және өз орнын әр қашанда
өзгертпеуі үшін яғни терезе өзгергенде SetTimeout функциясы қолданылады,
ол әр 1000 миллисекундта қабат орнын қалпына келтіреді (немесе 1 секунд).
3 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға
болады, мысалы On load оқиғасын.
4 -мысал. Функцияны автоматты түрде шақыру
body onLoad="putLayer()"
...
body
Браузердің кез-келген бұрыштарында қабатты орналастырудың толық
листингін келтірейік
Жоғарғы оң жақ бұрышта
html
head script language="JavaScript"
IE = (document.all);
NC = (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 = document.body.clientWidth;
if (NC) send = window.innerWidth;
return send;
}
function putLayer() {
widthBrowser = getWidth() - 100;
if(IE) eval('document.all["xyz"].style.lef t = widthBrowser');
if(NC) eval('document.layers["xyz"].left = widthBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.left = widthBrowser');
setTimeout('putLayer()',1000);
}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Оң жақ төменгі бұрышта
html
head
script language="JavaScript"
function putLayer() {
widthBrowser = getWidth() - 100;
heightBrowser = getHeight() - 200;
if(IE) {
eval('document.all["xyz"].style.lef t = widthBrowser');
eval('document.all["xyz"].style.top = heightBrowser');}
if(NC) {
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);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Сол жақ төменгі бұрышта
html
head script language="JavaScript"
function putLayer() {
heightBrowser = getHeight() - 200;
if(IE) eval('document.all["xyz"].style.top = heightBrowser');
if(NC) eval('document.layers["xyz"].top = heightBrowser');
if(Opera) eval('document.getElementById("xyz" ).style.top = heightBrowser');
setTimeout('putLayer()',1000);}
script
head
body onLoad="putLayer()"
div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-
index: 1"
table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black
cellspacing=0
tr
tdСодержаниеtd
table
div
body
html
Веб-парақтардың оптимизациясы
Веб-парақтардың оптимизациясы дегенде, біз қолданушыға максимальды тез
болатын яғни, браузерде парақтарды жүктеуге мүмкіндік беретін әдістер мен
тәсілдерді қолдану деп түсінеміз.
Оптимизацияның басты ойы – бұл файлдар көлемін әртүрлі құралдармен
кішірейту, бірақ мұнда да белгілі бір әдістер қолданылады, олар парақта
басқа элементтер пайда болмайынша контентті жүктеуге мүмкіндік береді.
Төменде, осы мақсатқа жетудің кейбір әрекеттері сипатталған.
Маңызды ақпаратты парақ үстіне орналастырыңыз.
Веб-парақтар жоғарыдан төменге қарай жүктеледі, ал төмен орналасқанға
қарағанда парақтың жоғарғы жағындағы ақпарат ертерек пайда болады.
Сондықтан, қолданушы үшін аса маңызды материалдарды парақтың басына қарай
орналастырыңыз.
Бір кескінді көп мәрте қолданыңыз
Беттен – бетке қайталанатын графикалық элементтерді қолданыңыз яғни,
логотиптер, навигация элементтері сияқтылар. Суреттің алғашқы жүктелуінде,
кескіні бар файл браузер кэшіне орналасады және берілген суретті қайта-
қайта қолдану оның ол кездесетін басқа парақтарда пайда болуын тездетеді.
(CSS ) стильдерінің каскадты кестеларін қолданыңыз
Форматтау атрибуттары тобына бірден барлығына бір әрекетті қолдану
арқасында стильдер НТМL кодын айтарлықтай ықшамдайды. Стильдер көмегімен
мысалға , барлық тақырып жолының түрін өзгертуге болады. Бірақ үш тәсілмен
тақырып жолын форматтамаудың орнына яғни, оның өлшемі басында берілсе,
кейін қаріп берілсе және ең соңында орталық бойынша түзету болса, оны бір
уақытта анықталған тегке стильді қолдану арқылы тура соны іске асыруға
болады.[12].
Кестелер ерекшеліктерін ескеріңіз
Әдетте веб-парақтар көрінбейтін шекаралары бар кестелерді қолдану
арқылы беттеледі. Сол кестелердің ерекшелігі – егер соңғы сөз кестенің ең
төменгі жағына жүктелмесе , экранда ұяшықтардың құрамы бейнеленбейді.
Браузерлер мұндай қадамды өзінің құрамындағыларын форматтау үшін, кесте
туралы бүкіл ақпаратты алуда қолданады. Алайда, егер кесте биіктігі бойынша
үлкен болса, біз қажетті ақпаратты тапқанымызша елеулі уақыт өтіп кетеді.
Осыны ескеру, сізге веб-парақтың құрамындағылардың шығуын тездету
мүмкіндігін береді. Жүктеуді тездетудің тағы бір әдісі – бұл кестелер
орнына қабатты қолдану.
Графиканы оптимизациялаңыз
Веб-параққа графикалық кескіндер тез жүктелуі үшін, сапаларын сақтауда
суреттер файлдарының өлшемін кішірейту керек. Графиканы оптимизациялау
үшін, файлдар форматын ескере отырып, әртүрлі параметрлермен басқаруға
мүмкіндік беретін арнаулы программалар бар. Мысалы, Adobe Image Ready,
Ulead SmartSaverPro, MacromediaFireWorks және т.с.с.
Қажет жерлерде тырнақшаларды қолданыңыз
Тегтер параметрлерінің мәнін анықтауда тырнақшалар қолданылады. Мысалы,
парақтағы фон мәтінінің және сілтемелерінің түсін өзгерту.
Салымдарды құру
Салымдар новигация элементінің бірі, сайтты қолданушы салымдарға кез
келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша,
бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт бөлімдері
арқылы өтуін тез түсіндіреді. 1-суретте салым құрудың бір нұсқасы
көрсетілген.
1-сурет. Салымдарды құрып орналастыру
Графикалық салымдарды кез келген графикалық редакторда құруға болады.
Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен
жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз, мысалы 2-
суретте көрсетілген стиль арқылы.
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
2-сурет. Стилдердің арқылы салымдарды құру
Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды
құрайды, ал шеткі екі ұяшығы сән үшін керек, олар көлденең шетке шегіну
сызығы үшін керек.
Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open
дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет.
Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы
стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы
болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right:
none параметрі қолданылады. Сондай-ақ ағымдағы салым үшін төменгі шекараны
жасырып қою керек. Оң және сол ұяшықтың стилін тура сипаттауға болады.
Бірақ сайтта салымды көп қолдану үшін бөлек класс қолданған дұрыс.
1-мысал. Кестені қолдану
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none;
text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center;
background: #CFD6D4; }
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px
black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-
bottom: solid 1px black" td
tr
table
body
html
Кестені қолданудың бірнеше ерекшелігі бар. Терезе көлемін өзгерту кезінде
кесте ені бойынша құрылады. Сондықтан салымдар әрқашан көрінеді және
міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span
немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер
терезелерінің кішірейгенін көруге болады. 2-мысалда span тегасы
қолданылады, оның көмегімен салымдар жасалынады. Әр түрлі блоктар бір
бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.[14].
2-мысал. SPAN тегін қолдану
style
.open { border: solid 1px black; border-right: none; border-bottom: solid
1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}
.close { border: solid 1px black; border-right: none; text-align: center;
background: #CFD6D4; width: 24%; padding: 4px }
style
span style="border-bottom: solid 1px black; width:
10px" spanspan class=openЧебурашкаspanspan
class=closeКрокодил Генаspanspan class=closeШапоклякspanspan
class=closeКрыса Ларисаspanspan style="border-left: solid 1px black;
border-bottom: solid 1px black; width: 10px; padding: 4px" span
Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі салымдарды құруға
болады. 3-суретте түгенделген салымның мысалы көрсетілген, бұл жағдайда
белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
3-сурет.
3-мысалда осындай салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан
кесте қолданылады.[13].
3-мысал. Салымдарды кесте арқылы құру
html
head
style
.open { border: solid 1px black; border-right: none; border-bottom: none;
font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }
.close { border: solid 1px black; border-right: none; text-align: center;
padding: 4px}
style
head
body
table width=100% border=0 cellspacing=0 cellpadding=4
tr
td width=10 align=center style="border-bottom: solid 1px
black" td
td width=25% class=openЧебурашкаtd
td width=25% class=closeКрокодил Генаtd
td width=25% class=closeШапоклякtd
td width=25% class=closeКрыса Ларисаtd
td width=10 align=center style="border-left: solid 1px black; border-
bottom: solid 1px black" td
tr
tr
td bgcolor="#CFD6D4" colspan="6" height=10td
tr
table
body
html
Кестенің түрі 1- мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр
сызықты форматтайды. Оның ені мен түсі height және bgcolor ұяшықтарының
ерекшелігімен ауысады.
Скриптер.
Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы динамикалық
басқарылуы HTML құжатымен байланысқан программа арқылы іске асады. Мұндай
программаларды скриптілер деп атайды немесе басқа әдебиеттерде
кездесетіндей – сценарийлер деп атауға болады. Скриптілер Script тегі
арқылы сипатталады, яғни оның құрамында программаға немесе анықталған
тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері
қолданылады - JavaScript және VB Script.
Скриптерді құру
Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең
тарағанының ерекшелігі – бұл Script контейнерінің ішінде программаның
орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында
программаны қамтиды.
Скрипт жазылу синтаксисы;
script language="язык программирования" type="тип MIME" src="имя файла"
Текст программы
script
Language параметрі скрипттің жазылу тіліне нұсқайды, ол JavaScript
немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына
нұсқа (версия) нөмірін қосады. Мысалы JavaScript 1.3 (1-мысал).
1-мысал. Браузер қолдайтын тілдерді анықтау
html
head
script language="VBScript" VB = True script
script language="JavaScript" JS = 1; script
script language="JavaScript1.1" JS11 = 1; script
script language="JavaScript1.2" JS12 = 1; script
script language="JavaScript1.3" JS13 = 1; script
script language="JavaScript1.4" JS14 = 1; script
script language="JavaScript1.5" JS15 = 1; script
script language="JavaScript"
document.write("bПоддерживаемые языки:b
");
if(window.JS) document.write("JavaScript
");
if(window.JS11) document.write("JavaScript 1.1
");
if(window.JS12) 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
");
script
head
body
...
body
html
орындаудың нәтижесі төменде көрсетілген
Language параметрін көрсету ұсынылады, себебі егер, браузер
программалау тілін анықтамаса, онда скрипт қабылдамайды және орындамайды
да. Сонымен қатар, HTML 4.0 нұсқасында осы параметрді қолдану аса тиімді
емес. Оның орнына type параметрін қолданған дұрыс, ал ол анықталған тіл
үшін MIME типін нұсқайды: JavaScript үшін – textjava script, ал VB
Script үшін - textvb script. Бірақ кейбір браузерлер type параметрін
түсіне алмайды, сондықтан language және type екі атрибутын бір уақытта
берген дұрыс. Егер браузер type параметрінің мәнін анықтамаса, онда
language мәні орындалмайды.
script language="JavaScript" type="textJavaScript"
JavaScript тіліндегі бағдарлама
script
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен
байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір
функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді,
яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі
шақырылуда скрипт тез шақырылады.
script language="JavaScript" type="textJavaScript"
src="main.js"script
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос
қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде
орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері
Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз көлемде
орналасады. Көп жағдайларда скриптілердің орналасуы программа жұмысына
мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте
құжат басына орналастырады. Программалық құралдар арқылы объектілерді
құруда скриптілерді құжаттың дәл өзіне орналастырып, document.write немесе
document.writeln әдісінің көмегімен нәтижесін шығарады.Ол 2-мысалда
көрсетілген.
2- мысал. Скрипт көмегімен Кесте құру
html
body
table width=400 border=1
script language="JavaScript"
for (i=1; i6; i++) {
document.writeln("tr");
for (j=1; j6; j++) document.write("td" + i + j + "td");
document.writeln("tr");}
script
table
body
html
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар кестені құрып, оны сандармен
толтырады
Скриптілерді түсінбейтін браузерлерден программа кодын жасыру үшін,
бастамас бұрын және аяқтағаннан кейін НТМL түсініктемесін қосады.
script language="JavaScript"
!--
Бағдарлама тексті
--
script
НТМL түсініктемесін жапқаннан кейін JavaScript (II) тілінің
түсініктемелері немесе VB Script (I) түсініктемелері шығуы керек.
Қазіргі таңда барлық жаңа шыққан браузерлер скриптерді түсінеді,
сондықтан түсініктемелер міндетті түрде болуы шарт емес.
Скриптерді шақыру және іске қосу
Скриптерді орындаудың негізгі әдістері функцияларды шақыру және белгілі
оқиғаға қол жеткізу арқылы іске асады. Скриптті 3-мысалда көрсетілгендей
парақты жүктеуден кейін автоматты түрде іске қосуға болады.
3-мысал. Скриптті автоматты түрде іске қосу
html
head
script language="JavaScript"
alert("Hello, world!")
script
head
bodybody
html
Тура сол программаны функция арқылы жазуға болады
4- мысал скриптердің автоматты түрде ашылуы
html
head
script language="JavaScript"
function foo() {
alert("Hello, world!")}
foo();
script
head
bodybody
html
Foo функциясы парақты жүктеуде іске қосылады себебі оның шақыруы айқын
көрсетілген.
Оқиғалар мен скриптілерді байланыстырудың екі әдісі бар. Біріншісінде
тіркелген оқиғалар қолданылады тышқан немесе пернетақта. Мысалы, тышқанның
сол жағына басқанда onclick оқиғасымен кезек жүреді
5-мысал. Тышқан оқиғасын қолдану
input type= button value= “ баспаңыз!” onclick = “alert” ( сіз
батырмаға бастыңыз мұны жасауға болмайды деп ескерткенбіз)
Белгілі оқиғаларға көңіл бөлудің басқа әдісі SCRIPT - for тегінің
параметрлерімен байланысты, яғни оқиғаларды анықтайтын скрипт event элемент
атауының берілгені үшін орындалады
script language="JavaScript" for="document" even="onLoad"
alert("Загрузка страницы завершена...")
script
Хабарламаны шақыру мысалында құжатты жүктегеннен кейін пайда болады
кейбір браузерлер for және event параметрлерін түсінбейді және сктиптті
жедел іске қосады. Бұл жағдайда оқиғаларды қолданған жөн.
1.3 Бейне суреттермен жұмыс
Веб-парағында орналастырылатын бейнені түрлі көлемді қоршауға
орналастыруға болады. Бұл үшін IMG тегасындағы border параметрі қызмет
атқарады. Егер сурет жіберілген болған жағдайда басқа, қоршау келісім болса
бейне жан-жағында көрінбейді. Бұл жағдайда қоршау түсі мәтін түсімен сәйкес
келеді, ол стиль көмегімен немесе BODY тегасындағы text параметрімен
енгізілуі 1- мысалда көрсетілген.
1- Мысал. Бейне жан-жағына қоршау құру.
html
body text=#00FF00
img src="sample.gif" width=50 height=50 border=2 қоршау зеленого цвета
толщиной 2 пиксела
body
html
Егер сурет жіберілген болса, онда қоршау автоматты түрде құрылады, оның
қалыңдығы 1 пиксел, қоршаудың түсі жіберу түсімен сәйкес келеді.
Қоршауды алыптастау үшін border=0 (2 пиксел) параметрін енгізу керек.
2- мысал. Бейне жан-жағындағы қоршауды алып тастау
a href=”sample.html”img src=” sample. gif ” width=50 height=50
border=0a
Жіберілген барлық бейнелерде қоршауды алып тастау үшін CSS қолдануға
болады. Бұл үшін none мағынасындағы border параметрін қолданылуы 3- мысалда
көрсетілген.
3 -мысал. CSS қолдану
style
A IMG { border: none }
style
AIMG { } конструкциясы стильдердің қолдану ??? анықтайды. Ол тек А
контейнерінің ішінде орналасқан IMG тегасы және жіберілген болып табылады.
Netscape 4x браузерінде көрсетілген тәсіл жұмыс істейді, өйткені ол
border:none қасиетін игермеген. Ол үшін келесі қулықты қолдануға болады.
Қоршау түрін веб-?? Бетіндегідей құруға болады. Бұл жағдайда қоршау бет
түсімен беттесіп, көрінбейді (4 мысал).
4-мысал. Стильдер көмегімен қоршау түсі
style
A IMG { border: none; border-color: #FFFFFF; }
style
Мысалда қоршау түсі – ақ.көрсетілген әдіспен кез келген түсті бейнеге
қоршау құруға болады, нәтижесінде қызық эффектілер алынады. Бірақ алдын ала
border: none алып тастау қажет.
Графикалық қаттамалар
Қаттамалар бұл таңдау нұсқаларын ұйымдастыру үшін командалар тізімі.
Қаттамаларды құруда графикалық кескіндерді қолдану сайтқа кірушілердің
назарын аударады және эстетикалық көркін күшейтеді. Төменде қаттамалар
нұсқалары көрсетілген, алдағы уақытта біз соларды қарастырамыз.
Чебурашка
Крокодил Гена
Шапокляк
Қаттаманы құру үшін бастапқыда екі сурет қажет, оларды кез-келген
графикалық редакторда әзірлеуге болады. 4-ші сурет белсенді емес тармақты
белгілеу үшін қолданылады, ал екіншісі тышқанды бетіне әкелу кезінде сол
суретті алмастырады.
4-сурет. Каттаманы құру үшін бейне
5-сурет. Бейнеге курсорды жақындатқан кездегі түрі
Мұндай әдісті айналу эффектісі немесе rollover деп атайды.
Ең бірінші қаттама үшін негіз құрамыз (1мыс.)
1-мысал. Menu қабаты үшін стиль
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;}
Height параметрі арқылы берілетін қабат биіктігі біздің суреттеріміздің
биіктігіне тең болуы керек, берілген жағдайда ол 40 пиксельді құрайды.
Арақашықтығы padding аргументімен басқарылады, ал сызық биіктігі мен түсі
төмендегідей border – bottom атрибутымен беріледі. Суреттердің биіктігі мен
ені алдын-ала берілгендіктен, мәтін өлшемі өзгермеуі тиіс, себебі ол сурет
шегінен шығып кетуі мүмкін. Қаріпті браузердің баптауы арқылы үлкейтіп не
кішірейтуге болады, оны болдырмау үшін, қаріп өлшемін абсолютті бірліктерде
қатаң беру керек. Мысалы font –size параметрі арқылы пиксельдермен
беру.
Енді қаттамалардың жеке тармақтарына өтейік. Стильді әртүрлі аттармен
жүктемеу үшін контекстті селекторларды қолданамыз. #menuDIV құрылымы - бұл
стильдің тек DIV тегі үшін жұмыс істейтіндігін анықтайды, ол menu деген
атпен қабат ішінде орналасады. Ол үшін тек сипаттама жасау қалды.
2- мысал. Жеке тармақтар үшін стиль
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
Float параметрі қабатты көлденеңінен орналастыру үшін қажет, ол болмаса
қабаттар бірінің астына бірі орналасады. Міндетті түрде сурет өлшеміне тең
қабаттың ені (width) мен биіктігін (height) беру керек. Marginright
аргументі қаттамалар арасындағы арақашықтықты басқарады, ал background
кескіні бар файлға жолдары анықтайды, ол абсолютті болуы мүмкін. Мысалы,
http:w.w.w.htmlbook.ruimagesml.jp g сияқты, сонымен қатар қатысты да бола
алады.
Сілтемелерді сипаттау ғана қалды контекстті селекторларды қолданып
#menuА элементі үшін стиль құрайық, ол menu қабатындағы (3-мысал)
сілтемелер үшін ғана жұмыс істейді. Бұл алдағы уақытта сайтта А тегін
қолдану үшін қолданылады және ол қай жерде сипатталғанына қарамастан жүзеге
асады.
3 -мысал. Сілтемелер стилін сипаттау.
#menu A {
width: 100%;
height: 100%;
padding: 12px;
}
#menu A:hover {
background: url('m2.jpg');
}
Padding параметрі қабат ішінде мәтіннің жылжуын анықтайды, яғни жазу
суреттің үстінде орналасуы үшін – биіктігі мен ені 10 пайыз болып орнатылуы
тиіс, сілтемемен тек қана мәтіндік сілтеме емес бүкіл сурет аймағы жұмыс
істеуі талап етіледі. Егер бұл параметрлерді алып тастасақ, онда айналу
эффектісі жазуға меңзерді әкелгенде ғана болады.
Бір суреттен екіншісіне ауысу A:hover псевдоклассы арқылы орындалады.
Ол сілтемеге тышқан меңзерін әкелудегі құбылысқа жауапты. Сол кезде фондық
кескіннің басқасына ауысуы background параметрі арқылы орындалады. 4
мысалда барлық стильдердің аяққы коды көрсетілген.
4 -мысал. Қаттамаларды құру үшін аяққы код.
html
head
style
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px;
}
#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url('m1.jpg');
}
#menu A {
width: 100%;
height: ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Пәндер
- Іс жүргізу
- Автоматтандыру, Техника
- Алғашқы әскери дайындық
- Астрономия
- Ауыл шаруашылығы
- Банк ісі
- Бизнесті бағалау
- Биология
- Бухгалтерлік іс
- Валеология
- Ветеринария
- География
- Геология, Геофизика, Геодезия
- Дін
- Ет, сүт, шарап өнімдері
- Жалпы тарих
- Жер кадастрі, Жылжымайтын мүлік
- Журналистика
- Информатика
- Кеден ісі
- Маркетинг
- Математика, Геометрия
- Медицина
- Мемлекеттік басқару
- Менеджмент
- Мұнай, Газ
- Мұрағат ісі
- Мәдениеттану
- ОБЖ (Основы безопасности жизнедеятельности)
- Педагогика
- Полиграфия
- Психология
- Салық
- Саясаттану
- Сақтандыру
- Сертификаттау, стандарттау
- Социология, Демография
- Спорт
- Статистика
- Тілтану, Филология
- Тарихи тұлғалар
- Тау-кен ісі
- Транспорт
- Туризм
- Физика
- Философия
- Халықаралық қатынастар
- Химия
- Экология, Қоршаған ортаны қорғау
- Экономика
- Экономикалық география
- Электротехника
- Қазақстан тарихы
- Қаржы
- Құрылыс
- Құқық, Криминалистика
- Әдебиет
- Өнер, музыка
- Өнеркәсіп, Өндіріс
Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.
Ақпарат
Қосымша
Email: info@stud.kz