Ақпараттық технологияларды қолдану арқылы Web-сайт құру және зерттеу
1 Кіріспе
2 Есептік.теориялық бөлім
2.1 Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
2.1.1
2.2 Оқыту ортасын дамыту құралдары
Web.бет дизайны
2.3 HTML негіздері
2.3.1 HTML тілінің негіздері
2.3.2 HTML тілінің негіздері
2.3.3 HTML тегтері
2.3.4 Тег атрибуттары
2.3.5 Броузерлер жұмысы
2.3.6 HTML . файлын анықтау
2.3.8 Гипермәтіндік байланыс орнату
2.3.8 Бір құжат аймағында сілтемелер жасау
2.3.9 Фреймдер. “Frameset” контейнері
2.3.1 HTML документіндегі форма
2.4 CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
2.4.1 Объектіні белгіленген орынға қою, z.index. Парақ коды сатылары
2.4.2 Кластар
2.4.3 Абсолюттік түрде орналастыру
2.4.4 Сатылай орналастыру (каскадирование)
2.5 Javascript тілі
2.5.1 Меншіктеу тәсілдері
2.5.2
Арифме¬ти¬калық және тіркестік өрнектерді шарт ретінде пайдалану
5. Тіршілік қауіпсіздігі
5.1. Өндірістік еңбекті қорғау
5.2 Еңбекті қорғаудың техникалық ережелері
5.3 ҚР Еңбек қорғау заңдары
5.4 Өрт қауіпсіздігене қойылатын талаптар
5.5 Техника қауіпсізідігі негіздері
5.6 Компьютерлік техника қауіпсіздік ережелері
6 Қорытынды
7 Пайдаланылған әдебиттер тізімі
8 ҚОСЫМША
2 Есептік.теориялық бөлім
2.1 Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
2.1.1
2.2 Оқыту ортасын дамыту құралдары
Web.бет дизайны
2.3 HTML негіздері
2.3.1 HTML тілінің негіздері
2.3.2 HTML тілінің негіздері
2.3.3 HTML тегтері
2.3.4 Тег атрибуттары
2.3.5 Броузерлер жұмысы
2.3.6 HTML . файлын анықтау
2.3.8 Гипермәтіндік байланыс орнату
2.3.8 Бір құжат аймағында сілтемелер жасау
2.3.9 Фреймдер. “Frameset” контейнері
2.3.1 HTML документіндегі форма
2.4 CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
2.4.1 Объектіні белгіленген орынға қою, z.index. Парақ коды сатылары
2.4.2 Кластар
2.4.3 Абсолюттік түрде орналастыру
2.4.4 Сатылай орналастыру (каскадирование)
2.5 Javascript тілі
2.5.1 Меншіктеу тәсілдері
2.5.2
Арифме¬ти¬калық және тіркестік өрнектерді шарт ретінде пайдалану
5. Тіршілік қауіпсіздігі
5.1. Өндірістік еңбекті қорғау
5.2 Еңбекті қорғаудың техникалық ережелері
5.3 ҚР Еңбек қорғау заңдары
5.4 Өрт қауіпсіздігене қойылатын талаптар
5.5 Техника қауіпсізідігі негіздері
5.6 Компьютерлік техника қауіпсіздік ережелері
6 Қорытынды
7 Пайдаланылған әдебиттер тізімі
8 ҚОСЫМША
1. КІРІСПЕ
Қазыргі таңдағы жаңа ақпараттық технологияның ұшқан құстай дамуына байланысы ақпарат саласында елеулі жаңалықтар болды.
Бұрыңғы ақпарат жаңалықтары тек радио,газет,журнал және ауыз екі тараған болса қазыргі заман ақпараттары тек жаңа компьютерлік желілер арқылы тарайтын болды.
Осы компьютерлік желінің пайда болуы ақпараттық технологияның дауының бір төңкерісі болды деуге болады.
желі арқылы мұхиттың арғы жағыменде байланысуға болатын болды бұның бәрі web-сайттары арқылы жүзеге асады.
web-сайт жасайтын программалар өте көп олардың ішіндегі жиі пайдаланатын программалар html,java,css,php,және басқалар .
білім саласы медицина саласы сауда саттық саласы және басқа қоғамдық қызмет көрсету салалары болсын барлығының дамуына желі көп көмектесіп отыр.
Мәселен, айтар болсақ осы интернет сайтары арқылы қашықтан оқыту технологиясы бойынша осы заманда студентерді желі арқылы оқыту технологиясы дамыды оның өзі білім саласының бір қадам ілгерлеуіне жол ашты.
Ал саудагерлердің өзі де сайт арқылы товарын сатуына оны жан-жақтылы жарнама етуде сайт арқылы товар сату өте қолайлы оның пайдалы жақтары саудагер үшін уақытын және қаржысын , еңбек күшін үнемдеуге болады және оның зиянды жағы осы интернет арқылы сапасыз заттарды жарнамалап сатуға да болады.
Бұл дипломдық жұмыста осы заман талабына сай интернет магазин қарастырылған ол html,java,css,php,sql программаларының көмегімен жасалды және осы программалар жайында мағлұматар берілді сайтан пайдалана отырып компьютер сатып алуға және сол товар жөнінде информация алуға болады .
Қазыргі таңдағы жаңа ақпараттық технологияның ұшқан құстай дамуына байланысы ақпарат саласында елеулі жаңалықтар болды.
Бұрыңғы ақпарат жаңалықтары тек радио,газет,журнал және ауыз екі тараған болса қазыргі заман ақпараттары тек жаңа компьютерлік желілер арқылы тарайтын болды.
Осы компьютерлік желінің пайда болуы ақпараттық технологияның дауының бір төңкерісі болды деуге болады.
желі арқылы мұхиттың арғы жағыменде байланысуға болатын болды бұның бәрі web-сайттары арқылы жүзеге асады.
web-сайт жасайтын программалар өте көп олардың ішіндегі жиі пайдаланатын программалар html,java,css,php,және басқалар .
білім саласы медицина саласы сауда саттық саласы және басқа қоғамдық қызмет көрсету салалары болсын барлығының дамуына желі көп көмектесіп отыр.
Мәселен, айтар болсақ осы интернет сайтары арқылы қашықтан оқыту технологиясы бойынша осы заманда студентерді желі арқылы оқыту технологиясы дамыды оның өзі білім саласының бір қадам ілгерлеуіне жол ашты.
Ал саудагерлердің өзі де сайт арқылы товарын сатуына оны жан-жақтылы жарнама етуде сайт арқылы товар сату өте қолайлы оның пайдалы жақтары саудагер үшін уақытын және қаржысын , еңбек күшін үнемдеуге болады және оның зиянды жағы осы интернет арқылы сапасыз заттарды жарнамалап сатуға да болады.
Бұл дипломдық жұмыста осы заман талабына сай интернет магазин қарастырылған ол html,java,css,php,sql программаларының көмегімен жасалды және осы программалар жайында мағлұматар берілді сайтан пайдалана отырып компьютер сатып алуға және сол товар жөнінде информация алуға болады .
Пайдаланылған әдебиеттер тізімі
1. Олифер В.Г., Олифер Н.А. Компьютерные сети. Учебник. СПб: Издательство “Питер”, 1999.
2. Петров В.Н. Информационные системы. Учебник. СПб: Издательство “Питер”, 2002.
3. Филимонов А.Ю. Протоколы Интернета. – СПб: БХВ-Петербург, 2003.
4. Найк Д. Стандарты и протоколы Интернета. Пер. с англ. – М.: 2001.
5. Ганеев Р.М. Проектирование интерактивных WEB-приложений. М.: 2001.
6. Успенский И.И. Интернет как инструмент маркетинга. – СПб: БХВ-Петербург, 2000.
7. Комер Д. Принципы функционирования Интернета. СПб: Питер, 2002.
8. Фролов А.В. Фролов Г.Б. Базы данных в Интернете: практическое руководство по созданию Web-приложений с базами данных. – М.: Издательство – торговый дом “Русская редакция”, 2000.
9. Хоумер А., Улмен К. Dynamic HTML. – СПб.: Питер, 1999.
10. Ливингстон Д., Белью К., Браун М. Perl 5. Web – профессионалам: Пер. с. англ. – К.: Издательская группа BHV, 2001.
11. Косентино К. PHP. Web – профессионалам: Пер. с. англ. – К.: Издательская группа BHV, 2001.
12. Кузнецов С.Д. PHP 4.0. Руководство пользователя. – М.: Майор, 2001.
13. Леонтьев Б. Web-дизайн: хитрости и тонкости. – М.: Позновательная книга плюс Мик, 2001.
14. Николенко Д.В. Практические занятия по JavaScript. СПб.: 2002.
15. Гультяев А.К., Машин В.А. Уроки WEB-мастера. СПб.: 2002.
16. Рик Дарнелл. JavaScript-справочник. 2001.
17. Жумагалиев Б.И. Лабораторный практикум по интернет технологиям. Учебной пособие. Алматы: АИЭиС, 2003.
18. Солоницын Ю., Холмогоров В. Интернет. Энциклопедия. 3-е издание – СПб.: Питер, 2002.
1. Олифер В.Г., Олифер Н.А. Компьютерные сети. Учебник. СПб: Издательство “Питер”, 1999.
2. Петров В.Н. Информационные системы. Учебник. СПб: Издательство “Питер”, 2002.
3. Филимонов А.Ю. Протоколы Интернета. – СПб: БХВ-Петербург, 2003.
4. Найк Д. Стандарты и протоколы Интернета. Пер. с англ. – М.: 2001.
5. Ганеев Р.М. Проектирование интерактивных WEB-приложений. М.: 2001.
6. Успенский И.И. Интернет как инструмент маркетинга. – СПб: БХВ-Петербург, 2000.
7. Комер Д. Принципы функционирования Интернета. СПб: Питер, 2002.
8. Фролов А.В. Фролов Г.Б. Базы данных в Интернете: практическое руководство по созданию Web-приложений с базами данных. – М.: Издательство – торговый дом “Русская редакция”, 2000.
9. Хоумер А., Улмен К. Dynamic HTML. – СПб.: Питер, 1999.
10. Ливингстон Д., Белью К., Браун М. Perl 5. Web – профессионалам: Пер. с. англ. – К.: Издательская группа BHV, 2001.
11. Косентино К. PHP. Web – профессионалам: Пер. с. англ. – К.: Издательская группа BHV, 2001.
12. Кузнецов С.Д. PHP 4.0. Руководство пользователя. – М.: Майор, 2001.
13. Леонтьев Б. Web-дизайн: хитрости и тонкости. – М.: Позновательная книга плюс Мик, 2001.
14. Николенко Д.В. Практические занятия по JavaScript. СПб.: 2002.
15. Гультяев А.К., Машин В.А. Уроки WEB-мастера. СПб.: 2002.
16. Рик Дарнелл. JavaScript-справочник. 2001.
17. Жумагалиев Б.И. Лабораторный практикум по интернет технологиям. Учебной пособие. Алматы: АИЭиС, 2003.
18. Солоницын Ю., Холмогоров В. Интернет. Энциклопедия. 3-е издание – СПб.: Питер, 2002.
Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 52 бет
Таңдаулыға:
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 52 бет
Таңдаулыға:
Ақпараттық технологияларды қолдану арқылы Web-сайт құру және зерттеу
МАЗМҰНЫ
1
Кіріспе
2
Есептік-теориялық бөлім
2.1
Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
2.1.1
2.2
Оқыту ортасын дамыту құралдары
Web-бет дизайны
2.3
HTML негіздері
2.3.1
HTML тілінің негіздері
2.3.2
HTML тілінің негіздері
2.3.3
HTML тегтері
2.3.4
Тег атрибуттары
2.3.5
Броузерлер жұмысы
2.3.6
HTML - файлын анықтау
2.3.8
Гипермәтіндік байланыс орнату
2.3.8
Бір құжат аймағында сілтемелер жасау
2.3.9
Фреймдер. "Frameset" контейнері
2.3.1
HTML документіндегі форма
2.4
CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
2.4.1
Объектіні белгіленген орынға қою, z-index. Парақ коды сатылары
2.4.2
Кластар
2.4.3
Абсолюттік түрде орналастыру
2.4.4
Сатылай орналастыру (каскадирование)
2.5
Javascript тілі
2.5.1
Меншіктеу тәсілдері
2.5.2
Арифме - ти - калық және тіркестік өрнектерді шарт ретінде пайдалану
5.
Тіршілік қауіпсіздігі
5.1.
Өндірістік еңбекті қорғау
5.2
Еңбекті қорғаудың техникалық ережелері
5.3
ҚР Еңбек қорғау заңдары
5.4
Өрт қауіпсіздігене қойылатын талаптар
5.5
Техника қауіпсізідігі негіздері
5.6
Компьютерлік техника қауіпсіздік ережелері
6
Қорытынды
7
Пайдаланылған әдебиттер тізімі
8
ҚОСЫМША
1. КІРІСПЕ
Қазыргі таңдағы жаңа ақпараттық технологияның ұшқан құстай дамуына байланысы ақпарат саласында елеулі жаңалықтар болды.
Бұрыңғы ақпарат жаңалықтары тек радио,газет,журнал және ауыз екі тараған болса қазыргі заман ақпараттары тек жаңа компьютерлік желілер арқылы тарайтын болды.
Осы компьютерлік желінің пайда болуы ақпараттық технологияның дауының бір төңкерісі болды деуге болады.
желі арқылы мұхиттың арғы жағыменде байланысуға болатын болды бұның бәрі web-сайттары арқылы жүзеге асады.
web-сайт жасайтын программалар өте көп олардың ішіндегі жиі пайдаланатын программалар html,java,css,php,және басқалар .
білім саласы медицина саласы сауда саттық саласы және басқа қоғамдық қызмет көрсету салалары болсын барлығының дамуына желі көп көмектесіп отыр.
Мәселен, айтар болсақ осы интернет сайтары арқылы қашықтан оқыту технологиясы бойынша осы заманда студентерді желі арқылы оқыту технологиясы дамыды оның өзі білім саласының бір қадам ілгерлеуіне жол ашты.
Ал саудагерлердің өзі де сайт арқылы товарын сатуына оны жан-жақтылы жарнама етуде сайт арқылы товар сату өте қолайлы оның пайдалы жақтары саудагер үшін уақытын және қаржысын , еңбек күшін үнемдеуге болады және оның зиянды жағы осы интернет арқылы сапасыз заттарды жарнамалап сатуға да болады.
Бұл дипломдық жұмыста осы заман талабына сай интернет магазин қарастырылған ол html,java,css,php,sql программаларының көмегімен жасалды және осы программалар жайында мағлұматар берілді сайтан пайдалана отырып компьютер сатып алуға және сол товар жөнінде информация алуға болады .
2 Есептеу-теореялық бөлім
2.1 Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
Қашықтықтан оқыту компьютерлiк техника мен телекоммуникациялық желiлердi қолдану барысында ұйымдастырылады. Телекоммуникациялық желiлер мұғалiм мен үйренушi арасында қашықтық проблемасын шешедi және жедел байланысты ұйымдастырады. Қазiргi ақпараттық технология құралдары материалдарды әр түрлi формада (графика, дыбыс, анимация, видео) пайдалануға мүмкiндiк бередi. Компьютерлiк үйрету және бақылау программалары тыңдаушыға, бiр жағынан, оқу материалын жедел меңгеруге көмектессе, ал екiншi жағынан, оқу материалдарын қандай деңгейде жедел меңгергенiн бақылауға көмектеседi.
Оқыту процесiн қашықтық режимiнде ұйымдастыру барысында барлық ақпараттық қызмет типтерi пайдаланылады:
Электрондық пошта телеконференция:
* мәлiметтердi жiберу (FTP-сервер)
* гипермәтiндiк орта (WWW-сервер)
* Интернет желiсiнiң әлемдiк ресурстары (WWW кеңiстiгi, деректер қоры, ақпараттық iздеу жүйелерi)
* видеоконференциялар
Аталған типтердiң көмегiмен тыңдаушы мен мұғалiм арасында оқыту мен дидактикалық мiндеттер шешiледi. Бұл құралдар WWW-сервер арқылы хаттар мен файлдарды жiберу мен телеконференция типi түрлi талқылауларды жүзеге асырады. Электрондық пошта көмегiмен мұғалiм мен тыңдаушы арасында оқу материалдарын жiберу мен мұғалiмге өздерiне түсiнiксiз болған материалдар бойынша сұрақтар жiберуiне мүмкiндiк алады. Бiр жағынан, ол мұғалiмнiң жұмысын жеңiлдетедi. Бұл жағдайда, мұғалiмнiң жұмысы материалдар мен тыңдаушылардың сұрақтарына жауаптарына жiберу қызметтерiн атқарумен шектеледi.
FTP-серверлерiнiң қызметi өте үлкен көлемдегi файлдарды (ақпараттарды) жiберуге мүмкiндiк бередi. Мұндай жiберулердi ұйымдастыру мен оны бақылауда FTP-серверлерiнiң қызметiн атқаратын функциялар орналасады. Ал WWW-серверi оқу материалдарын орналастыруға мүмкiндiк бередi. Бұл материалдар гипермәтiн түрiнде ұйымдастырылатын болады. Гипермәтiн материалдарды жүйелеп құруға, атап айтқанда, оқу материалдарының бөлiмдерiн гипербайланыс арқылы бiр-бiрiмен байланыстыруға, материалдарды бiр-бiрiмен толықтырып отыруға мүмкiндiк бередi.
WWW-құжаттарында тек мәтiндiк ақпаратты ғана емес, сонымен бiрге, графиктiк, дыбыстық және видеоақпараттарды да орналастыруға болады.
WWW-желiсiнiң әлемдiк ресурсында гипермәтiн түрiнде көрнекi және анықтамалық материалдар орналастырылады. Мұғалiм iздеу жүйелерiнiң көмегiмен WWW-беттерiнде Интернет ресурстары бойынша анықтамалар арқылы сiлтемелер жинағын дайындауға болады.
Педагог мамандардың үйренетiн материалдарын да осы құжатқа енгiзедi және ол жөнiнде оған хабарлама берiледi. Егер олар Интернетке шыға алатындай мүмкiндiк алса, онда ол осы берiлген материалдарды оқи алады.
2.1.1.Оқыту ортасын дамыту құралдары
Жаңа ақпараттық технология құралдары оқыту құралы қызметiн атқарады. Дәстүрлi оқу құралдарынан басқа тыңдаушыға мына типтегi материалдар ұсынылады:
* компьютерлiк үйрету бағдарламалары
* электрондық оқу құралдары
* компьютерлiк тестiлеу жүйесi мен бiлiмдi бақылау
* электрондық анықтамалар мен энциклопедиялар
* аудио және видеоматериалдар
* Интернет желiсiндегi ақпараттық материалдар
Аталған құралдар оқу материалдарын жеделдетiп меңгеруге және оқытудың сапасын арттыруға игi әсерiн тигiзедi. Қашықтықтан оқыту материалдарын жасақтаушылар осы құралдарды негiзге алуы қажет. Оқу құралдарын жасақтау ұзақ процесс. Оқу құралдарын жасақтау қашықтықтан оқыту формасының тиiмдiлiгiн арттырудың негiзгi көзi болып табылады.
2.2 Web-бет дизайны
Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы, администратор және тағы басқа мамандардың қажет екендігін түрлі жарнамалық газеттерден, бұқаралық ақпарат құралдарынан да көруге болады. Аталған мамандықтарды қалай дайындап, оларға қандай программалық құралдарды үйрету арқылы жетілдіруге болатыны әдістемелікжұмыстың өзекті мәселелерінің бірі болып отыр.
Мектеп бітірушілер компьютерлік сауатылықты меңгеріп шығады, бірақ келешекте олар программист, инженер, жүйе администраторы болуы міндетті емес дегенмен кез-келген шығармашылық мамандық сізден қазіргі заманға сәйкес компьютерлік технологияларды меңгеруге талап етеді. Шығармашылық жұмыстын қортындысы әр қашан жаңа білім, жаңа ақпарат, ал осы ақпаратты таратудың ең жеңіл әдісі Интернетте жариялау.
Интеренетте материалды жариялау тиімді болу үшін ол Web-дизайн ережелеріне сәйкес болу керек. Демек, Web-дизайн негіздерін білу кез келген мамандықта қажет болады, өткені Web-бет дизайны - бұл ақпараттық дизайн.
Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.
жұмыс екі бөлімнен тұрады, біріншісі теориялық: мәтінді форматтау, графиканы қолдану, тізім жасау, кесте құру.
Ал екіншісі болса практикалық, бұл бөлімде біз дайын бір сайт жасап шығамыз.
Web-сайт бұл дүниенін кішкентай моделі. Бұрынғы кезде Web-сайты бір адам - Web-мастер жасаған болса, қазіргі кезде Web-сайттарды бірнеше адам жасайды.
Олар Web-дизайнер, программист, бизнес-кеңесші, маркетинг бойынша басқарушы, менеджер.
не себептен мектеп курсына Интеренет технологияны оқыту керек болды? Web-мастер мамандығы қазіргі кезде өзінің кұпиялығын жоғалтып жатыр, ал сайт жасау технологиясы зертхана сыртына шығып көпшілікке белгілі болып жатыр.
Бұның негізгі белгісі Интернет-жобаларға өсіп жатқан инвестициялар,
Web-сайттардың күрделі білімдік, ғылыми, комерциялық мүмкіндіктері.
Интернет технологиялар төмендегі жолдармен дамып келе жатыр:
§ Web-технологиялар;
§ Сайт жасау экономикасы;
§ Web-дизайн және Web-программалау маркетингісі;
§ Адам ресурстары және т.б.
Web-сайт жасақтау жұмысын бірнеше кезеңден турады:
§ Жоспарлау;
§ Элементтерді жасақтау;
§ Бағдарламау;
§ Тестілеу;
§ Жариялау;
§ Жарнамалау;
§ Бақылау;
Жоспарлау кезеңінде төменгі мәселелер шешілуі керек:
1. Сайттың орны.
2. Сайттың аудиториясы кімдер.
3. Қандай ақпарат жарияланады.
4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.
Элементтерді жасақтау кезеңінде сайттың программалық өнім түрінде жүзеге асырылуы қарастырылады:
1. Навигациялық құрылымын жасау.
2. Беттің дизайнын жасау.
3. Бетті толтыру үшін мәтіндік және бейне ақпаратты әзірлеу.
Сайт жасаудың негізгі кезеңдерінің бірі тестілеу. Тестілеу кезеңде сайттың жұмыс істеу дұрыстылығы тексеріледі, оның ішінде:
1. Сілтеменің жұмысы;
2. Мәтіндегі қателер;
3. Навигацияның тиімділіғі.
4. Пошта және басқа формалардың дұрыстығы.
5. Графикалық файлдардың ашылуы.
6. Әр түрлі браузерлерде сайттық жұмысы.жариялау
Тест аяқталғандан кейін Web-сайт серверде жарияланады және қайтадан тексеріленеді. жарнамалау
Web-қоғамдастығына жаңадан жарияланған сайт тұралы белгілі болу үшін сайттың адресін және ол жердегі материал туралы аннотацияны хабарлау керек. Осы мақсатқа жету үшін келесі мүмкіндіктерді пайдалануға болады:
1. Web-cайт адресін әр түрлі баспаларға жазу керек;
2. Web-сайтты әр түрлі серверлерде тіркеу;
3. Web-cайтқа сілтемелерді басқа Web-сайттарқа кіргізу;
4. Баннерлерді жарнама ретінде қолдану.
Бақылау
Web-сайтта жариялап жарнамалаған сон оған қатысу деңгейі оның беттерінде орналастырылған ақпараттың қажеттілігімен, жаңалығымен және көкейтестілігімен анықталады. Web-сайт имиджін сақтау үшін ол жердегі ақпаратты әрдайым жаңартып туру керек.
Web-сайт беттерін ұйымдастырған кезде, төменгі схемаларды қолдануға болады.
2.3 HTML негіздері
HTML (HyperTextMarkupLanguage) - бұл құжаттарды кодтау үшін қолданылатын гипертекстік белгілеу тілі. HTML ді көбі программалау тілі деп ойласа да, бұл программалау тілі емес. HTML - мәтінді белгілеу тілі.
HTML құжаттарды көру үшін браузерларды қолданамыз. Браузер-программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator,Microsoft Internet Explorer, Opera. HTML тiлiнде колданылатын командаларды "тег" деп айтамыз. HTML тiліндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.
2.3.1 HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web - парақтарының бір ортақ қасиеті - олардың барлығы да HTML де жазылған. HTML тілінде Web парақтар жасау программалауға ұқсас болғанмен,
2.3.2.HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web - парақтарының бір ортақ қасиеті - олардың барлығы да HTML де жазылған. HTML тілінде Web - парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес. HTML - гипермәтіндік белгілеу тілі.
HTML тілі World Wide Web - пен бірге дами отырып. Web - парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырады. Ол World Wide Web жүйесінің негізі бола отырып, оның кең тарауына себепші болды. World Wide Web қазақ тіліне аударғанда кеңейтілген бүкіләлемдік өрмек болып аударылады.
Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент орналасқан мәтін. Ол мітін ішіне мәтін сурет, дыбыс енгізу, мәтінді безендіру, пішімдеу ісін орындайтын немесе осы құжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз - келесі көрсетілген құжат бөлігі қалай бейнелетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер деп аталатын арнайы көрсету программаларды қолданылады. Гипермәтін экранда бейнеленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек онда сонымен байланысты басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.
2.3.3 HTML тегтері
HTML тілінің бастапқы мәтінді белгілейтін командалары белгі немесе тег деп аталады. Тег символдар тізбегінен тұрады. барлық тег "кіші" "" символынан басталады да, "үлкен" "" символымен аяқталыд. Осындай қос символдар тізбегі бұрыштық жақшалар деп аталады. ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.
HTML тіліндегі әрбір тег бір арнаулы қызмет атқарады. олардың жазылуында әріптер регистрі ешқандай роль атқармайды, бас әріптерді де, кіші әріптерді де қатар қолдана беруге рұқсат етіледі.
HTML тілінің бір тегі әдетте белгілі бір бөлігіне, мысалы бір абзацқа ғана, әсер етеді. Осыған орай екі тег қатар қолданылады: бірі - ашылады, екіншісі - жабылады. ашатын тег белгілі бір әсер ету ісін бастайды, ал жабатын тег - сол әсерді аяқтайды. жабу тегтері қиғаш сызық сомволымен басталуы керек.
Кейбір тегтер өз жазылуы орнына қарай тек бір ғана әсерін тигізеді. мұндайда жабу тегі қажет болмай қалады да, ол жазылмайды.
2.3.4 Тег атрибуттары
Көбінесе ашылу тегтерінің тигізетін әсерлерін түрлендіретін олардың атрибуттары болады. атрибуттар немесе сипаттамаллар - тег атуынан және бір - бірінен бос орын арқылы бөлініп жазылатын қосымша түйінді сөздерден тұрады. Көбінесе атрибуттар оның мәтін жазуды талап етеді
Атрибут мәні оның түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. атрибут мәні қостырнақшаға алынып жазылуы тиіс бірақ қостырншаны жазбаса да болады. жабылу тегтрінің ешқашан атрибуттары болмайды.
Тетердің екі түрі бар:
1. Бір элементті тег, белгілі бір әрекетті орындату үшін оны қажетті орынға жазып қою керек;
2. Екі элементті (қосарланған) тег, бұл ашылу және жабылу тегтері ортасындағы мәтінге ғана әсер етеді.
2. 3.5 Броузерлер жұмысы
Графикалық, бейнелік және аудиомәліметтер жеке файлдарға жазылады да, құжат ішіндегі сілтемелерге сәйкес броузерлер оларды біртіндеп іске қоса бастайды файлдарға мәліметтерді қабалдап, броузер оларды реттеп орналастырады да, HTML командаларына қарай керекті түстер енгізіп, терезе көлемін анықтап, нәтижесін экранда көрсетеді.
HTML фйлдары - *.htm немесе *.html деген тіркемесі бар кәдімгі мәтіндік файлдар. сондықтан оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы Windows ортсында Блокнот пайдалана беруге болады, оның нәтижесін - Web - парақтарды экрада көру үшін M icrosoft Internet Explorer броузерін қолданамыз.
2.3.6 HTML - файлын анықтау
HTML құжатының кез келгені HTML тегінен басталып, соған сәйкес HTML тегінен аяқталу керек. осы екуінің ортасында құжаттың тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады.
Құжаттың тақырыптық бөлігі Headжәне Head тегтерінің ортасында тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл бөлікте Title...Title тегтерімен шектелетін құжаттың терезесінде тұратын ресми атауы орналасады. көптеген броузерлер бұл атауды терезе тақырыбында тұратын файл аты есебінде пайдаланады.
Жазылатын мәтіндермен бірге HTML құжаттың қалған негізгі бөлігі Body...Bodyтегтерінің ортасында ортасында жазылады.
2.3.7 Гипермәтіндік байланыс орнату
HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүмкіндіктерін айтуға болады.
Бір HTML файлына мынандай басқа құжаттарға:
* Алыста орналасқан ком пьютердегі HTML - файлға
* Ағымдағы HTML құжаттың ішіндегі белгілі бір орынға
* HTML - құжаты болмайтын кез келген файлға сілтемелер жасауға болады. cілтеме ретінде мәтінді немесе суреті пайдалануға болады.
2. 3.8 Бір құжат аймағында сілтемелер жасау
HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүмкіндігін айтуға болады:
Бір HTML файлынан мынандай басқа құжаттарға:
# Алыста орналасқан компьютердегі HTML файлға,
# Ағымдағы HTML - құжаттың ішіндегі белгілі бір орынға
# HTML - құжатты болмайтын кез келген файлға сілтемелер жасауға болады.
Сілтеме ретінде мәтінді немесе суретті пайдалануға болады.мұндай сілтемелер екі бөліктің болуын талап етеді, олар: белгі және сілтеме. Белгі сәлтеме бойынша ауысып баратын осы құжат ішіндегі бір нүктені анықтайды. Сілтеме белгі атын пайдаланады. Броузердің алдын ала тағайындалатын параметрлеріне сәйкес сілтемелер басқа тұспен ерекшеленіп тұрады немесе оның асты сызылады.
Сілтеме сөздің түсін өзгерту үшін body тегінің LINK=... және VLINK=... арибуттары пайдаланылады.
Сілтеме сипатталады:
A href= "ДС" ДүйсенбіA
Сілтеме арқылы ауысып баратын нүктедегі белгі (ДС) алдына # символы қойылады. Белгі атынан кейінгі "" және "" символдары арасында ауысу үшін тышқанмен шертілетін сілтеме сөз (Дүйсенбі)жазылады.
Осы Дүйсенбі гиперсілмете сөзін шерткенде баратын нүктеде төмегдегідей белгілер тұруы тиіс:
A Name="ДС"ДүйсенбіA
1. Соңғы тапсырманы ашып оның алдыңғы жағына кестенің алдына тағы бір кесте құрайық:
font color="red" size="6" face ="Arial"
B1"а" топтарының сабақ кестесіB
font
жолдарынан кейін мынандай тегтер тізбегі жазайық:
table width=100%
trtdДүйсенбіtdtdСейсенбі tdtdСәрсенбіtdtdБейсенбіt dtdЖұмаtdtrtable
2. Бұл фрагменттен кейін Дүйсенбі сөзіне сілтейтін белгі қоямыз, яғни BДүйсенбіBfont сөздерінің орнына:
... BA name="ДС"ДүйсенбіABfont.. .сөздерін жазу керек.
3. Енді кесте ішіндегі Дүйсенбі сөзіне гиперсілтеме жасаймыз, яғни
table width=100%
trtdДүйсенбіtdtdСейсенбі tdtdСәрсенбіtdtdБейсенбіt dtdЖұмаtdtrtable
сөздерінің орнына:
table width=100%
trtda href="#ДС"Дүйсенбіatd
trtda href="#СС"Сейсенбіatd
trtda href="#СР"Сәрсенбіatd... сөздерін жазамыз.
4.Файлды дискіге жазып сақтаймыз.
5.Осының нәтижесінде алынған Web - парақты қарап шығыңыздар.
6. Енді Дүйсенбі сөзін, содан соң Сейсенбі сөзін, т.с.с. күн аттарын тышқанмен тағдап шартіп көріңіздер. Гиперсілтемелердің дұрыс жұмыс істейтініне көз жеткізіңдер.
2.3.9 Фреймдер. "Frameset" контейнері
Броузердің терезесін біз бірнеше жеке кадларға немесе фреймдерге бөле аламыз, бұл кадларға немесе фреймдерге жеке - жеке HTML - документтерін оррналастыруға болады Броузер терезесіндегі алаң бірнеше тіктөртбұрыштарға бөлінеді, сол төртбұрыштарды фрейм деп атайды. Әр жеке фреймнің өзінің HTML - документі болады.
FRAMESET тегінің атрибуттары
1. COLS -- Фреймнің бағаналарының көлемін процентпен немесе пиксельмен беруі
2. ROWS Фреймнің жолдарының көлемін процентпен немесе пиксельмен беруі
3. FRAMEBORDER - фреймнің рамкасын үш өлшемді рамканы қояды
4. FRAMESPACING - фреймдердің араларын пиксельмен береді.
frame тегінің атрибуттары:
frame src="URL"
HTML документінде қоятын кадрдың адресі
frame name= "name"
Кадардың атын береді
frame margіnwіdth=#
Кадрдың оң және сол жақтағы бос жерлерінің мөлшерін анықтайды
frame margіnheіght=#
Кадрдың жоғарғы және төменгі жақтағы бос жерлерінің мөлшерін анықтайды
frame scrollіng=VALUE
Жалжымалы жолдың (Полоса прокрутка) көрсетедіегер мәні true болса, false болса көріебей тұрады
frame noresіze
Кадрдың көлемін өзгертпеуге арнлаған.
Мысалы, 2 фреймді құрайық. 1 - ші фреймде Netscape фирмасының домашняя страницасын жүктейік, ал 2 - шісіне Microsoft Internet Exlorer - ді жүктейік. фреймді құру үшін 2 тег қажет: "frameset" және "frame". екі фреймді құратын HTML - парағы келесідей болады:
frameset rows= "50%,50%"
frame src= "1страница.html"
frame src= "2страница.html"
frameset
Нәтижесінде 2 фрейм құрылады. Мұнда frameset тегінде rows деген атрибутты қолданып тұрмыз және бұл фреймдер бірінен соң бірі орналасады дегенді білдіреді. 1 - ші фреймде, яғни жоғарғы фреймде 1страница.htm html - парағы жүктеледі, ал 2 - ші төменгі фреймде 2страница.html орналасады.
Барлық жақтаулар тіктөртбұрыш түрынде болады. Rows атрибуты көлденең бағыт бойншы жақталардың санын анықтайды, cols атрибуты тік бағыт бойынша жақтаулардың санын анықтайды. Осылай жақтаулардың торы құрылады. Егер rows атрибутын қолданбасақ, онда әр жол парақтың бар ұзындығын(биіктігін) алады. Егер cols атрибутын қолданбасақ, онда әр бағана парақтың бар енін алады. Егер екі атрибутты да қолданбасақ, онда парақта тек
қана бір жақтау болады да, ол барлық парақты алып тұрады.
HTML - параңында 3 тік бағыттағы фреймді құру келесідей болады:
frameset cols= "33%,33%,33%"
frame src= "1 фрейм - столбец.htm"
frame src= "2 фрейм - столбец.htm"
frame src= "3 фрейм - столбец.htm"
frameset
Енді 5 ұяшықтан тұратын фрейм - кадр құрастырайық. Мұнда бірінші бағана 2 жолдан, ал екінші бағана 3 жолдан тұрсын.
frameset cols= "50%,50%"
frame src= "1 ячейка.htm"
frame src= "2 ячейка.htm"
frameset
frameset rows= "33%,33%,33%"
frame src= "3 ячейка.htm"
frame src= "4 ячейка.htm"
frame src= "5 ячейка.htm"
frameset
Көлемін пиксельмен және процентпен беруге болады. Процентпен бергенде экранның көлеміне байланысты. Егер екі атрибутта берілсе, онда компьютер бірінші пиксельді атрибутты қабылдап, одан кейін процентті қабылдайды. Экранның көрінуі солдан оңғы және жоғарыдан төменге бағытталған. Мысалы, экранды тең екі бөлікке бөлейік(төменгі және жоғарғы):
frameset rows= "50%,50%"
қалған бөлігі анықталады
frameset
Келесідей үш бағана жасайық: екіншісі 250 пиксель болады, үшіншісі 75%, ал біріншісі қалған кеңістіктің 25% алады:
FRAMESETcols="1*,250,3*"
FRAMESET
2.3.10 HTML документіндегі форма
HTML документіндегі форма қолданушыдан ақпарат алуға мүмкіндік береді. Форма еркін текст түрінде ақпаратты сұрауға мүмкіндік туғызады. Ал жауаптарды "иә жоқ" түрінде немесе бірнеше опциядан таңдау жасау түрінде болады.
Сіз әртүрлі мақсатпен форманы қолдана алаcыздар.қарапайым мысал ретінде, форманы қолданушылар кіретін сайтқа орналастыру, онда олар өдерінің пікірлерін жазып қоюларына болады.
Form тегі
Бұл ьегпен барлық формалар басталады. Оның екі атрибуты бар, олар:
атрибут
Мән - мағнасы
action
Формадағы мәліметтерді өңдеп, оның URL - адрестерін анықтайды.
method
Форма ақпаратты қандай түрде жіберуін көрсетеді. Егер мәні post баолса, онда URL адрестен жеке жіберіледі, ал егер мәні get болса, бірге жібереді.
HTML - де форманы құрудың 3 тегі бар, олар; textarea, select, input.
Textarea тегі
Бұл тег мәтіндік ақпаратты көпжолды қылып енгізуге арналған. Бұл тегтің атрибуттары:
атрибуттар
мән - мағнасы
name
Жолдың атын анықтайды
rows
Жолдың биіктігін анықтайды
cols
Жолдың енін анықтайды
Select тегі
Бұл тег қалқып шығушышы меню жасау немесе опциялардың тізімінің жылжымалы жолмен шығу үшін қолданылады
атрибуттар
Мәні
name
Ақпараттың атын береді
size
Таңдау опциясы үшін терезенінң көлемін анықтайды. Егер мәні 1 тең болса, онда опцияның тізімі ғана шығады№Ал егер 1 - ден үлкен болса онда жылжымалы жолмен шығады.
multiple
Бірден бірнеше опцияны тадауға мүмкіндік береді.
Опциялардың тізімі Option тегінің кмегімен SELECT атрибутының құрамына кіреді. Бұл тегтің екі атрибуты бар:
атрибут
Мәні
value
Қайтаратын өңдеу программасының мәнін көрсетеді
selected
Тыныштықта тұрған опцияны көрсетеді
Input тегі
INPUT тегі TEXTAREA және SELECT тегтерінен айырмашылығы ол бір эелементті тег. Ол әртүрлі тәсілдермен текстік алаңды, парольді енгізуге арналған алаң, ауыстырып қосқыштар, кішкене жалаулар, мәліметтерді жіберуге арналған батырмалар және форманы тазалауға арнаналған батырмаларды қоюға және ақпаратты жинауға арналған тег.
INPUT тегінің келесідей атрибуттары бар:
Атрибут
мағнасы
NAMESIZE
Енгізу алаңаның көлемін символдармен береді.
MAXLENGTH
Алаңға енетін символдардың максималды санын көрсетеді
VALUE
Текстік алаң үшін тексті анықтайды. Кішкене жалаушалар және ауыстырып қосқыштар үшін программаға оралатын мәнін анықтайды. Ал ақпараттарды жөнелтетен және форманы тазалайтын батырмалардың үстіндегі жазуды көрсетеді
CHECKED
Кішкене жалаушалар мен ауыстырып қосқыштарды оранатады
TYPE
Енгізу алаңының типін көрсетеді
TYPE атрибуты.
* TYPE атрибуты келесідей мәндерді қабылдай алады
Атрибут
мағнасы
TEXT
Тыныштықта турған мән болып табылады да, мәліметтерді енгізу үшін бір жолды енгізеді. Бұл тип үшін келесідей атрибуттар қолданылады NAME (міндетті түрде), SIZE, VALUE және MAXLENGTH
PASSWORD
Парольдің енгізу символдарын жұлдызшалармен ауыстыруға араналған. Бұл енгізу алаңы үшін келесідей атрибуттар қолданылады NAME, SIZE, MAXLENGTH және VALUE
CHECKBOX
Квадрат түрінде кішкене жалаушаны орнатуға арналған алаңды қоюға мүмкіндік береді, онда белгі " қанат белгімен " галочка түрінде болады. Келесідей атрибуттармен қолданылады NAME (міндетті түрде), VALUE және CHECKED. Кішкене жалаушалар берілген опциядан бірнеше опцияны таңдуға арналған.
Кішкене жалаушаларды қолданғанда өте мұқият болу керек.
RADIO
Берілген опциядан тек қана бір мәнді таңдауға арналған. NAME атрибутының мәндерін бірдей етіп ауыстырып қосқышты топтауғаболады. VALUE және CHECKED атрибуттары қолданылады.
RESET
Форманы тазалауға батырманы орнатуға арналған VALUE атрибуты бұл батырманың атын беру үшін арналған.
SUBMIT
Батырма құру үшін арналған. Бұл батырманы басқанда енгізілген мәліметтер өңделетін программаға жіберіледі. Мұндағы VALUE атрибуты бұл батырманың атын береді
Мысал, Келесі формада TEXT мәні шығады.
HTML
BODY
FORM
Введите номер телефона:
INPUT TYPE="TEXT" NAME="phone"
SIZE="15" MAXLENGTH="12"
FORM
BODY
HTML
2.4 CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
CSS қасиеттеріне шолу
Стильдік әр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет.
Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:
· қаріп (қаріп);
· түстер;
· мәтін;
· өрістер мен жақтаулар (поля и рамки);
· сыртқы түрлері.
Стильдерде қолданылатын өлшем бірліктері төменде көрсетілген.
Белгіленуі
Атауы
Мысалы
in
Дюйм
Р style="font-size:1in"
cm
Сантиметр
Р style="font-size: 1cm"
mm
Миллиметр
P style="font-size:1mm"
рх
Пиксел
Р style="font-size:1px"
pt
Пункт
Р style="font-size:1pt"
рс
Пики
Р style="font-size:1pc"
%
Проценты
Р style="font-size :1%"
Пункттер мен пикалар -- типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді.
Word-та, мысалы, бұл параметр 8-ден 72 пт-ке дейін. Бұл кегльдің пунктпен берілген мөлшері. 1 типографиялық пт = 172дюйм= 0,375 мм. Бұл символдың өз мөлшері емес, оның "ұпай" (очко) мөлшері, яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 қаріптің бас әрпінің көлемі 7 пункт шамасында болады.
Кітап шығаруда - мәтін көлемі 10 немесе 12 пт болады. Тақырыптар үшін үлкенірек кегль, ал сілтемелер мен ескертпелер үшін кішірек (әдетте 8 пт) мәндері қолданылады.
Пика -- үленірек өлшем бірлігі. 1 пика = 12 пт.
пайыздық өлшем (процентный отсчет) негізгі мөлшерге байланысты болады. қаріптер үшін -- ағымдағы мән негізге алынады. пайызды пайдалану ыңғайлы болып саналады. егер программалаушы браузердегі қаріп көлемін стильдерде пайызбен беріп отырса, олар пропорциональ түрде өзгереді.
font-family қаріп түрі (шрифт типі)
Бұл стильдік қасиет қаріптің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:
serif - шығыңқы қаріп (с засечками - серифный);
sans-serif - жұмыр қаріп (без засечек - рубленый);
monospace - ені бірдей қаріп (моноширинный қаріп - символдарының ендері бірдей)
Это шрифт с засечками.
Это шрифт с засечками.
Серифтік
Это рубленый шрифт.
Это рубленый шрифт.
қаріп
Жұмыр қаріп
Это моноширинный шрифт.
Это моноширинный шрифт.
Бірдей енді қаріп
Гарнитура -- бір қаріп символдарының сызылымдары жиыны (набор начертаний символов одного шривта).
Бұл - тіке және курсивтік сызылым, қарайтылуы (жирность), литер ені (қысыңқы, қалыпты, созылмалы) және кеглі әр түрлі болуы мүмкін деген сөз.
Қаріптер серифтік (шығыңқы - с засечками) и жұмыр (рубленые - без засечек) болады. Шығыңқы қаріп -- Times гарнитурасы, жұмыр қаріп -- Helvetica немесе Arial гарнитурасы.
Серифтік қаріптер жеңіл оқылады. Төменгі сериф көзге жылы көрінеді.
жұмыр қаріптер тек тақырыптар үшін қажет.
серифтік қаріп негізгі мәтін үшін, ал жұмыр -- тақырыптар немесе майда ескертпелер үшін керек.
тағы екі топ: пропорциональ және ені бірдей (моноширинные) қаріптер бар.
Бірдей енді қаріптер баспа машинкасындай етіп басады. Олар мынадай тәгтерден пайда болады: PRE, CODE, ТТ, SAMP, KBD.
кәдімгі мәтін пропорциональ қаріппен басылады. Оларда әр түрлі символдар ені әр түрлі, 1 - енсіз, ж - енді.
Пропорциональ қаріп бірдей енді қаріпке қарағанда жеңіл оқылады. пропорциональ қаріп негізгі мәтін үшін, ал бірдей енді қаріп -- программалар үшін қажет болып саналады
Times және Helvetica гарнитуралары -- пропорциональ.
Courier гарнитурасы - бірдей енді қаріп .
кез келген графикалық операциялық жүйеде үш стандартты гарнитура бар,
Windows үшін:
Times Roman -- серифтік қаріп;
Arial -- жұмыр қаріп;
Courier -- бірдей енді қаріп.
Үнсіз келісім бойынша (по умолчанию) браузер қалыпты мәтін үшін Times Roman қаріпін, ал программалар үшін - Courier қарпін (бірдей енді) пайдаланады.
Сайт үшін өз гарнитураңды көрсету қажет емес, ондай қаріп компьютерде болмаса, ол иероглифке айналып кетеді. Жергілікті (локальды) гипермәтін үшін кез келген қаріп жарайды. Ал Интернет желісі үшін тек топты ғана көрсету жеткілікті шығар немесе қаріпі қоса жіберіп, оны орнату ережесі де бірге берілуі тиіс.
font-family қасиеті үшін бір емес, бірнеше қаріп көрсеткен абзал (үтір арқылы бөліп), мысалы:
Н1,Н2,Н3,Н4,Н5,Н6
{
font-family: "Arial Cyr", Geneva, Helvetica, sans-serif;
}
Браузер алдымен Arial Cyr қаріпін іздейді, таба алмаса - Geneva, соңынан - Helvetica, ешқайсысы да болмаса, әйтеуір бір жұмыр қаріп табады (sans-serif).
Егер қаріп аты бірнеше сөзден тұрса, ол міндетті түрде қос тырнақшаға алынады.
font-size
font-size қасиеті қаріптің абсолюттік немесе салыстырмалы мөлшерін береді. Салыстырмалы түрде бергенде, пайыздық өлшем қолданылады (ағымдағы қаріп - негізгі) немесе мынадай түйінді сөздер қою керек:
larger - ірілеу - крупнее;
smaller - шағындау - мельче.
Абсолюттік мөлшерде келесі өлшем бірліктерінің бірін көрсету керек: in, cm, mm, px, pt, pc.
мынадай түйінді сөздерді де пайдалануға болады:
xx-smali
- өте майда
- сверхмелкий;
x-smail
- майдалау
- очень мелкий;
small
- майда
- мелкий;
medium
- орташа
- седний;
large
- ірі
- купный;
х-large
- ірілеу
- очень крупный;
xx-large
- өте ірі
- сверхкрупный.
көбінесе осындай салыстырмалы шамаларды берген дұрыс болып саналады.
Түстерді тағайындау
Стильдік қасиеттер түстерді тағайындаудың үш түрлі тәсілін береді:
· түйінді сөз, мысалы, white;
· он алтылық RGB-код, мысалы, #eee5d8;
· ондық RGB-код, мысалы, rgb(255,64,0);
color - элемент түсін анықтайды.
background-color - элемент шығарылатын маңайдағы фон түсін анықтайды.
мысалы, стиль үшін мынадай фрагмент енгізуге болады:
1 мысал
HTML
HEAD
!-- CSS қасиеттерін енгізу --
STYLE type="textcss"
!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
--
STYLE
TITLE 4 мысал TITLE
HEAD
BODY bgcolor=white text=black
Pтестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того,как она выйдет в свет(Лу Гринзоу "Философия программирования").
H6 style="color:red;background-color:s ilver;
letter-spacing:20px"
Тестирование - это форма приема экзамена H6
BODY
HTML
Бұл жұмыс нәтижесі 1 суретте келтірілген.
Мәтіндерді анықтау letter-spacing - әріптер арасындағы аралықты қосымша анықтау үшін керек, normal түйінді сөзін немесе нақты мән беруге болады, минус таңбалы мән де болады (символдар бірінің үстіне бірі жазылады). Пайыздық тәсіл қолданылмайды.
line-height - жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берсе де болады (14pt), жол аралығын (1.4) немесе жол биіктігінің пайызымен де (200%) көрсетіледі. Мысалы, жоларалық екі интервал:
line-height: 2 ; немесе line-height: 200%;
normal түйінді сөзімен де берсе болады.
text-align - мәтінді көлденең туралау тәсілін көрсетеді (способ горизонтального выравнивания). Оның мынадай мәндері қолданылады:
left - сол жақ шетке туралау;
right - оң жақ шетке туралау;
center - ортаға туралау;
justify - екі шетін де туралау (по ширине).
Соңғы мәнді justify қолдану қиын, өйткені ұзын сөзді тасымалдауды браузер білмейді (мысалы, орысша немесе қазақша мәтіндерді).
ӨРІСТЕР МЕН ЖАҚТАУЛАР (Поля и рамки)
border-style - элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мәндері мынадай:
none - жақтау жоқ (келісім бойынша); solid - кәдімгі тұтас жақтау;
double - қоссызық;сызығы; groove - ойыс жақтау
ridge - дөңес жақтау сызығы; inset - ойыс элемент;
outset - дөңес элемент.
border-color - жақтау сызығының түсін анықтайды. Бұл қасиет border-style берілсе ғана жұмыс істейді.
border-width - жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан бірліктерімен (пайыздық жазу жоқ) немесе келесі сөздермен беруге болады:
thin - жіңішке - тонкая; medium - орташа - средняя; thick - жуан - толстая.
margin - элементтегі блок шеттерінде бос қалатын өріс енін (ширину поля отступа) береді. Санмен, пайызбен (блок ені негізінде) немесе түйінді сөзбен - auto беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
padding - элемент пен жақтау арасындағы қашықтықты береді. Санмен немесе пайызбен (от ширины элемента) беріледі.
Сыртқы түрді анықтау
width - элементтің енін тағайындайды. Санмен, пайызбен немесе auto түйінді сөзімен беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
Допускаются числовые, процентные зна - чения и auto. Бұл қасиет div и span элементтері үшін қолданылады, олар элементтерді блокқа біріктіреді.
height - элемент биіктігін тағайындайды. Санмен немесе auto түйінді сөзімен беріледі. Бұл қасиет те div и span элементтері үшін қолданылады.
Бір программа фрагментін толық келтірейік :
2 мысал
HTML
HEAD
! -- қасиетін енгізу CSS --
STYLE type="textcss"
!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
--
STYLE
TITLE 4 мысалыTITLE
HEAD
BODY bgcolor=white text=black
P Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
H6 style="color: red; background-color: silver; letter-spacing: 20px"
Тестирование - это форма приема экзамена
H6
BODY
HTML
Бұл программа нәтижесі суретте көрсетілген
HTML
HEAD
! -- Қасиетін қосу CSS --
STYLE type="textcss"
!--
P
{ font-family: "Arial
Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;line-height:2;
background-
color:yellow;text-align: center;
}
--
STYLE
TITLEПример 4TITLE
HEAD
BODY bgcolor=white text=black
P Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
H6 style="color:red;background-color:s ilver;letter-spacing:20px"
Тестирование - это форма приема экзаменаH6
BODY
HTML
2.4 Объектіні белгіленген орынға қою, z-index. Парақ коды сатылары. Абсолюттік түрде орналастыру
2.4.1. Стильдің мұра ретінде берілуі
HTML-кодтың құрылымы сатылы түрде болады. Бар құжат body. . .body тәгтері ішінде орналасады. Ал Р абзацы ішінде B тәгімен белгіленген элементтер болуы мүмкін.
Стильдің мұра ретінде берілуі body тәгі үшін анықталған стильдің құжаттағы барлық тәгтерге әсер ететіндігін білдіреді. Сәйкесінше егер бір тәг үшін стиль құрылса, онда сол тәг ішіндегі басқа тәгтерге де осы стиль міндетті түрде беріледі.
Мысалы, Р тәгі үшін келесі стиль берілген болсын:
P
{ color: red; font-size:14pt;
font-family: Arial, sans-serif; }
Онда осы абзац ішіне орналасқан ЕМ тәгінің элементтері де экранда қызыл түспен, 14 пункт көлемде жұмыр қаріппен шығарылады.
3 Мысалы:
Р
Стильдік
анықтаулардың ЕМ мұралану ЕМ қасиеті болады.
Ал егер ЕМ тәгі үшін мәтін символдары арасын ашып жазу қажет болса, онда мұндай қасиет қосымша беріледі:
HTML
HEAD
TITLE Қосымша стильлік нұсқаулар TITLE
STYLE type="textcss"
!--
P {color:red;font-size:14pt;
font-family:Arial,sans-serif}
--
STYLE
HEAD
BODY bgcolor=white text=black
P
Стильдік анықтаулардың ЕМ style="letter-spacing: 6рt:" мұралану ЕМ
қасиеті болады.
BODY
HTML
ЕМ тәгінің ішкі мәтіні Р тәгінің мәтіндері сияқты шығады (14 пункт, қызыл түсті, жұмыр қаріп), ал style="letter-spacing: 6pt" қосымша анықтаудың әсерінен сөздегі әріптердің арасы 6 пункт болып ашылып орналасады.
Сонымен ішкі қосымша тәгте жаңа стильдік анықтаулар кіргізіп қана қоймай, оның ата тегі болып саналатын сыртқы тәгтің де қасиеттерін өзгертуге болады.
Мысалы, келесі мәтіндегі "мұралау" (наследование) сөзі көк түске боялып тұрады.
HTML
HEAD
TITLE Стильлік нұсқауларды қайта анықтау
TITLE
STYLE type="textcss"
!--
P {color: red;font-size:14pt; font-family:Arial,sans-serif}
--
STYLE
HEAD
BODY bgcolor=white text=black
P Стильдік анықтаулардың ЕМ style="letter-spacing: 6рt: color:blue "
мұралану ЕМ қасиеті болады.
BODY HTML
Контекстік селекторлар
Стильдік анықтауларды, тәгтердің кірістіріліп орналасу реттілігіне сәйкес орындалатындай етіп жазуға болады. Мысалы, EM тәгіндегі мәтін түсі ол H3 тәгінің ішінде орналасқан жағдайда ғана көк болатындай етіп орналастырайық:
HTML HEAD
TITLEКонтекстік селектор
TITLE
STYLE type="textcss"
!-- H3 EM {color: blue}
--
STYLE
HEAD
BODY bgcolor=white text=black
H3 Контекстік EMселектор EMH3
P Контекстік EMселектор EMP
BODY
HTML
Экранға селектор сөзі бірінші қатарда көк түспен (Н3 тәгінің ішінде), ал екінші қатарда қара түспен (Р тәгінің ішінде) шығады. Стильдік анықтауларда үтір қойылмағандығына назар аударыңыз. Бұл контекстік анықтаулардың белгісі. Егер Н3, ЕМ { color: blue } түрінде жазсақ, онда Н3 тәгімен қатар ЕМ тәгі де көк түске боялады, яғни үтір бірнеше тәгтер тобы үшін бірдей болатын ортақ стильді анықтайды.
2. 4.2 Кластар
Стильдік анықтауларды тәгтерді көрсетпей-ақ жазуға болады. Мұндай
жағдайда, берілген стилді нақты тәгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады:
.аты
{ сипаттама: мәні;
. . .
сипаттама: мәні;
}
Басқаша айтқанда, анықтаулар әдеттегідей жазылады, бірақ тәгтердің аттары орнына .аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, және оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тәгпен сәйкестендіру үшін class атрибуты қолданылады:
Р class=def текст P
Бұл кодтың қалай жұмыс істейтінін қарастырайық.
HTML
HEAD
TITLEКласс анықтамасыTITLE
STYLE type="textcss"
.def
{font-family:Helvetica;font-size:14 pt;
border: solid 4pt red;padding: 6pt;
margin-left:5%;margin-right:5% }
STYLE
HEAD
BODY bgcolor=white text=black
H2КластарH2
P class=def
Клacc — тегке байланыспаған стилдік анықтама.
P Анықтамада тегтің орнына клас аты жазылады.
P class=def
Клас аты алдынан нүкте қойылады.
BODY
HTML
Мысалы, def атты стильдік класс жазып шығайық:
... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
МАЗМҰНЫ
1
Кіріспе
2
Есептік-теориялық бөлім
2.1
Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
2.1.1
2.2
Оқыту ортасын дамыту құралдары
Web-бет дизайны
2.3
HTML негіздері
2.3.1
HTML тілінің негіздері
2.3.2
HTML тілінің негіздері
2.3.3
HTML тегтері
2.3.4
Тег атрибуттары
2.3.5
Броузерлер жұмысы
2.3.6
HTML - файлын анықтау
2.3.8
Гипермәтіндік байланыс орнату
2.3.8
Бір құжат аймағында сілтемелер жасау
2.3.9
Фреймдер. "Frameset" контейнері
2.3.1
HTML документіндегі форма
2.4
CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
2.4.1
Объектіні белгіленген орынға қою, z-index. Парақ коды сатылары
2.4.2
Кластар
2.4.3
Абсолюттік түрде орналастыру
2.4.4
Сатылай орналастыру (каскадирование)
2.5
Javascript тілі
2.5.1
Меншіктеу тәсілдері
2.5.2
Арифме - ти - калық және тіркестік өрнектерді шарт ретінде пайдалану
5.
Тіршілік қауіпсіздігі
5.1.
Өндірістік еңбекті қорғау
5.2
Еңбекті қорғаудың техникалық ережелері
5.3
ҚР Еңбек қорғау заңдары
5.4
Өрт қауіпсіздігене қойылатын талаптар
5.5
Техника қауіпсізідігі негіздері
5.6
Компьютерлік техника қауіпсіздік ережелері
6
Қорытынды
7
Пайдаланылған әдебиттер тізімі
8
ҚОСЫМША
1. КІРІСПЕ
Қазыргі таңдағы жаңа ақпараттық технологияның ұшқан құстай дамуына байланысы ақпарат саласында елеулі жаңалықтар болды.
Бұрыңғы ақпарат жаңалықтары тек радио,газет,журнал және ауыз екі тараған болса қазыргі заман ақпараттары тек жаңа компьютерлік желілер арқылы тарайтын болды.
Осы компьютерлік желінің пайда болуы ақпараттық технологияның дауының бір төңкерісі болды деуге болады.
желі арқылы мұхиттың арғы жағыменде байланысуға болатын болды бұның бәрі web-сайттары арқылы жүзеге асады.
web-сайт жасайтын программалар өте көп олардың ішіндегі жиі пайдаланатын программалар html,java,css,php,және басқалар .
білім саласы медицина саласы сауда саттық саласы және басқа қоғамдық қызмет көрсету салалары болсын барлығының дамуына желі көп көмектесіп отыр.
Мәселен, айтар болсақ осы интернет сайтары арқылы қашықтан оқыту технологиясы бойынша осы заманда студентерді желі арқылы оқыту технологиясы дамыды оның өзі білім саласының бір қадам ілгерлеуіне жол ашты.
Ал саудагерлердің өзі де сайт арқылы товарын сатуына оны жан-жақтылы жарнама етуде сайт арқылы товар сату өте қолайлы оның пайдалы жақтары саудагер үшін уақытын және қаржысын , еңбек күшін үнемдеуге болады және оның зиянды жағы осы интернет арқылы сапасыз заттарды жарнамалап сатуға да болады.
Бұл дипломдық жұмыста осы заман талабына сай интернет магазин қарастырылған ол html,java,css,php,sql программаларының көмегімен жасалды және осы программалар жайында мағлұматар берілді сайтан пайдалана отырып компьютер сатып алуға және сол товар жөнінде информация алуға болады .
2 Есептеу-теореялық бөлім
2.1 Жаңа ақпараттық технология пайдаланп қашықтықтан оқыту
Қашықтықтан оқыту компьютерлiк техника мен телекоммуникациялық желiлердi қолдану барысында ұйымдастырылады. Телекоммуникациялық желiлер мұғалiм мен үйренушi арасында қашықтық проблемасын шешедi және жедел байланысты ұйымдастырады. Қазiргi ақпараттық технология құралдары материалдарды әр түрлi формада (графика, дыбыс, анимация, видео) пайдалануға мүмкiндiк бередi. Компьютерлiк үйрету және бақылау программалары тыңдаушыға, бiр жағынан, оқу материалын жедел меңгеруге көмектессе, ал екiншi жағынан, оқу материалдарын қандай деңгейде жедел меңгергенiн бақылауға көмектеседi.
Оқыту процесiн қашықтық режимiнде ұйымдастыру барысында барлық ақпараттық қызмет типтерi пайдаланылады:
Электрондық пошта телеконференция:
* мәлiметтердi жiберу (FTP-сервер)
* гипермәтiндiк орта (WWW-сервер)
* Интернет желiсiнiң әлемдiк ресурстары (WWW кеңiстiгi, деректер қоры, ақпараттық iздеу жүйелерi)
* видеоконференциялар
Аталған типтердiң көмегiмен тыңдаушы мен мұғалiм арасында оқыту мен дидактикалық мiндеттер шешiледi. Бұл құралдар WWW-сервер арқылы хаттар мен файлдарды жiберу мен телеконференция типi түрлi талқылауларды жүзеге асырады. Электрондық пошта көмегiмен мұғалiм мен тыңдаушы арасында оқу материалдарын жiберу мен мұғалiмге өздерiне түсiнiксiз болған материалдар бойынша сұрақтар жiберуiне мүмкiндiк алады. Бiр жағынан, ол мұғалiмнiң жұмысын жеңiлдетедi. Бұл жағдайда, мұғалiмнiң жұмысы материалдар мен тыңдаушылардың сұрақтарына жауаптарына жiберу қызметтерiн атқарумен шектеледi.
FTP-серверлерiнiң қызметi өте үлкен көлемдегi файлдарды (ақпараттарды) жiберуге мүмкiндiк бередi. Мұндай жiберулердi ұйымдастыру мен оны бақылауда FTP-серверлерiнiң қызметiн атқаратын функциялар орналасады. Ал WWW-серверi оқу материалдарын орналастыруға мүмкiндiк бередi. Бұл материалдар гипермәтiн түрiнде ұйымдастырылатын болады. Гипермәтiн материалдарды жүйелеп құруға, атап айтқанда, оқу материалдарының бөлiмдерiн гипербайланыс арқылы бiр-бiрiмен байланыстыруға, материалдарды бiр-бiрiмен толықтырып отыруға мүмкiндiк бередi.
WWW-құжаттарында тек мәтiндiк ақпаратты ғана емес, сонымен бiрге, графиктiк, дыбыстық және видеоақпараттарды да орналастыруға болады.
WWW-желiсiнiң әлемдiк ресурсында гипермәтiн түрiнде көрнекi және анықтамалық материалдар орналастырылады. Мұғалiм iздеу жүйелерiнiң көмегiмен WWW-беттерiнде Интернет ресурстары бойынша анықтамалар арқылы сiлтемелер жинағын дайындауға болады.
Педагог мамандардың үйренетiн материалдарын да осы құжатқа енгiзедi және ол жөнiнде оған хабарлама берiледi. Егер олар Интернетке шыға алатындай мүмкiндiк алса, онда ол осы берiлген материалдарды оқи алады.
2.1.1.Оқыту ортасын дамыту құралдары
Жаңа ақпараттық технология құралдары оқыту құралы қызметiн атқарады. Дәстүрлi оқу құралдарынан басқа тыңдаушыға мына типтегi материалдар ұсынылады:
* компьютерлiк үйрету бағдарламалары
* электрондық оқу құралдары
* компьютерлiк тестiлеу жүйесi мен бiлiмдi бақылау
* электрондық анықтамалар мен энциклопедиялар
* аудио және видеоматериалдар
* Интернет желiсiндегi ақпараттық материалдар
Аталған құралдар оқу материалдарын жеделдетiп меңгеруге және оқытудың сапасын арттыруға игi әсерiн тигiзедi. Қашықтықтан оқыту материалдарын жасақтаушылар осы құралдарды негiзге алуы қажет. Оқу құралдарын жасақтау ұзақ процесс. Оқу құралдарын жасақтау қашықтықтан оқыту формасының тиiмдiлiгiн арттырудың негiзгi көзi болып табылады.
2.2 Web-бет дизайны
Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы, администратор және тағы басқа мамандардың қажет екендігін түрлі жарнамалық газеттерден, бұқаралық ақпарат құралдарынан да көруге болады. Аталған мамандықтарды қалай дайындап, оларға қандай программалық құралдарды үйрету арқылы жетілдіруге болатыны әдістемелікжұмыстың өзекті мәселелерінің бірі болып отыр.
Мектеп бітірушілер компьютерлік сауатылықты меңгеріп шығады, бірақ келешекте олар программист, инженер, жүйе администраторы болуы міндетті емес дегенмен кез-келген шығармашылық мамандық сізден қазіргі заманға сәйкес компьютерлік технологияларды меңгеруге талап етеді. Шығармашылық жұмыстын қортындысы әр қашан жаңа білім, жаңа ақпарат, ал осы ақпаратты таратудың ең жеңіл әдісі Интернетте жариялау.
Интеренетте материалды жариялау тиімді болу үшін ол Web-дизайн ережелеріне сәйкес болу керек. Демек, Web-дизайн негіздерін білу кез келген мамандықта қажет болады, өткені Web-бет дизайны - бұл ақпараттық дизайн.
Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.
жұмыс екі бөлімнен тұрады, біріншісі теориялық: мәтінді форматтау, графиканы қолдану, тізім жасау, кесте құру.
Ал екіншісі болса практикалық, бұл бөлімде біз дайын бір сайт жасап шығамыз.
Web-сайт бұл дүниенін кішкентай моделі. Бұрынғы кезде Web-сайты бір адам - Web-мастер жасаған болса, қазіргі кезде Web-сайттарды бірнеше адам жасайды.
Олар Web-дизайнер, программист, бизнес-кеңесші, маркетинг бойынша басқарушы, менеджер.
не себептен мектеп курсына Интеренет технологияны оқыту керек болды? Web-мастер мамандығы қазіргі кезде өзінің кұпиялығын жоғалтып жатыр, ал сайт жасау технологиясы зертхана сыртына шығып көпшілікке белгілі болып жатыр.
Бұның негізгі белгісі Интернет-жобаларға өсіп жатқан инвестициялар,
Web-сайттардың күрделі білімдік, ғылыми, комерциялық мүмкіндіктері.
Интернет технологиялар төмендегі жолдармен дамып келе жатыр:
§ Web-технологиялар;
§ Сайт жасау экономикасы;
§ Web-дизайн және Web-программалау маркетингісі;
§ Адам ресурстары және т.б.
Web-сайт жасақтау жұмысын бірнеше кезеңден турады:
§ Жоспарлау;
§ Элементтерді жасақтау;
§ Бағдарламау;
§ Тестілеу;
§ Жариялау;
§ Жарнамалау;
§ Бақылау;
Жоспарлау кезеңінде төменгі мәселелер шешілуі керек:
1. Сайттың орны.
2. Сайттың аудиториясы кімдер.
3. Қандай ақпарат жарияланады.
4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.
Элементтерді жасақтау кезеңінде сайттың программалық өнім түрінде жүзеге асырылуы қарастырылады:
1. Навигациялық құрылымын жасау.
2. Беттің дизайнын жасау.
3. Бетті толтыру үшін мәтіндік және бейне ақпаратты әзірлеу.
Сайт жасаудың негізгі кезеңдерінің бірі тестілеу. Тестілеу кезеңде сайттың жұмыс істеу дұрыстылығы тексеріледі, оның ішінде:
1. Сілтеменің жұмысы;
2. Мәтіндегі қателер;
3. Навигацияның тиімділіғі.
4. Пошта және басқа формалардың дұрыстығы.
5. Графикалық файлдардың ашылуы.
6. Әр түрлі браузерлерде сайттық жұмысы.жариялау
Тест аяқталғандан кейін Web-сайт серверде жарияланады және қайтадан тексеріленеді. жарнамалау
Web-қоғамдастығына жаңадан жарияланған сайт тұралы белгілі болу үшін сайттың адресін және ол жердегі материал туралы аннотацияны хабарлау керек. Осы мақсатқа жету үшін келесі мүмкіндіктерді пайдалануға болады:
1. Web-cайт адресін әр түрлі баспаларға жазу керек;
2. Web-сайтты әр түрлі серверлерде тіркеу;
3. Web-cайтқа сілтемелерді басқа Web-сайттарқа кіргізу;
4. Баннерлерді жарнама ретінде қолдану.
Бақылау
Web-сайтта жариялап жарнамалаған сон оған қатысу деңгейі оның беттерінде орналастырылған ақпараттың қажеттілігімен, жаңалығымен және көкейтестілігімен анықталады. Web-сайт имиджін сақтау үшін ол жердегі ақпаратты әрдайым жаңартып туру керек.
Web-сайт беттерін ұйымдастырған кезде, төменгі схемаларды қолдануға болады.
2.3 HTML негіздері
HTML (HyperTextMarkupLanguage) - бұл құжаттарды кодтау үшін қолданылатын гипертекстік белгілеу тілі. HTML ді көбі программалау тілі деп ойласа да, бұл программалау тілі емес. HTML - мәтінді белгілеу тілі.
HTML құжаттарды көру үшін браузерларды қолданамыз. Браузер-программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator,Microsoft Internet Explorer, Opera. HTML тiлiнде колданылатын командаларды "тег" деп айтамыз. HTML тiліндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.
2.3.1 HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web - парақтарының бір ортақ қасиеті - олардың барлығы да HTML де жазылған. HTML тілінде Web парақтар жасау программалауға ұқсас болғанмен,
2.3.2.HTML тілінің негіздері
Интернеттің бар мәліметтерінің, яғни барлық Web - парақтарының бір ортақ қасиеті - олардың барлығы да HTML де жазылған. HTML тілінде Web - парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес. HTML - гипермәтіндік белгілеу тілі.
HTML тілі World Wide Web - пен бірге дами отырып. Web - парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырады. Ол World Wide Web жүйесінің негізі бола отырып, оның кең тарауына себепші болды. World Wide Web қазақ тіліне аударғанда кеңейтілген бүкіләлемдік өрмек болып аударылады.
Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент орналасқан мәтін. Ол мітін ішіне мәтін сурет, дыбыс енгізу, мәтінді безендіру, пішімдеу ісін орындайтын немесе осы құжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз - келесі көрсетілген құжат бөлігі қалай бейнелетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер деп аталатын арнайы көрсету программаларды қолданылады. Гипермәтін экранда бейнеленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек онда сонымен байланысты басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.
2.3.3 HTML тегтері
HTML тілінің бастапқы мәтінді белгілейтін командалары белгі немесе тег деп аталады. Тег символдар тізбегінен тұрады. барлық тег "кіші" "" символынан басталады да, "үлкен" "" символымен аяқталыд. Осындай қос символдар тізбегі бұрыштық жақшалар деп аталады. ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.
HTML тіліндегі әрбір тег бір арнаулы қызмет атқарады. олардың жазылуында әріптер регистрі ешқандай роль атқармайды, бас әріптерді де, кіші әріптерді де қатар қолдана беруге рұқсат етіледі.
HTML тілінің бір тегі әдетте белгілі бір бөлігіне, мысалы бір абзацқа ғана, әсер етеді. Осыған орай екі тег қатар қолданылады: бірі - ашылады, екіншісі - жабылады. ашатын тег белгілі бір әсер ету ісін бастайды, ал жабатын тег - сол әсерді аяқтайды. жабу тегтері қиғаш сызық сомволымен басталуы керек.
Кейбір тегтер өз жазылуы орнына қарай тек бір ғана әсерін тигізеді. мұндайда жабу тегі қажет болмай қалады да, ол жазылмайды.
2.3.4 Тег атрибуттары
Көбінесе ашылу тегтерінің тигізетін әсерлерін түрлендіретін олардың атрибуттары болады. атрибуттар немесе сипаттамаллар - тег атуынан және бір - бірінен бос орын арқылы бөлініп жазылатын қосымша түйінді сөздерден тұрады. Көбінесе атрибуттар оның мәтін жазуды талап етеді
Атрибут мәні оның түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. атрибут мәні қостырнақшаға алынып жазылуы тиіс бірақ қостырншаны жазбаса да болады. жабылу тегтрінің ешқашан атрибуттары болмайды.
Тетердің екі түрі бар:
1. Бір элементті тег, белгілі бір әрекетті орындату үшін оны қажетті орынға жазып қою керек;
2. Екі элементті (қосарланған) тег, бұл ашылу және жабылу тегтері ортасындағы мәтінге ғана әсер етеді.
2. 3.5 Броузерлер жұмысы
Графикалық, бейнелік және аудиомәліметтер жеке файлдарға жазылады да, құжат ішіндегі сілтемелерге сәйкес броузерлер оларды біртіндеп іске қоса бастайды файлдарға мәліметтерді қабалдап, броузер оларды реттеп орналастырады да, HTML командаларына қарай керекті түстер енгізіп, терезе көлемін анықтап, нәтижесін экранда көрсетеді.
HTML фйлдары - *.htm немесе *.html деген тіркемесі бар кәдімгі мәтіндік файлдар. сондықтан оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы Windows ортсында Блокнот пайдалана беруге болады, оның нәтижесін - Web - парақтарды экрада көру үшін M icrosoft Internet Explorer броузерін қолданамыз.
2.3.6 HTML - файлын анықтау
HTML құжатының кез келгені HTML тегінен басталып, соған сәйкес HTML тегінен аяқталу керек. осы екуінің ортасында құжаттың тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады.
Құжаттың тақырыптық бөлігі Headжәне Head тегтерінің ортасында тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл бөлікте Title...Title тегтерімен шектелетін құжаттың терезесінде тұратын ресми атауы орналасады. көптеген броузерлер бұл атауды терезе тақырыбында тұратын файл аты есебінде пайдаланады.
Жазылатын мәтіндермен бірге HTML құжаттың қалған негізгі бөлігі Body...Bodyтегтерінің ортасында ортасында жазылады.
2.3.7 Гипермәтіндік байланыс орнату
HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүмкіндіктерін айтуға болады.
Бір HTML файлына мынандай басқа құжаттарға:
* Алыста орналасқан ком пьютердегі HTML - файлға
* Ағымдағы HTML құжаттың ішіндегі белгілі бір орынға
* HTML - құжаты болмайтын кез келген файлға сілтемелер жасауға болады. cілтеме ретінде мәтінді немесе суреті пайдалануға болады.
2. 3.8 Бір құжат аймағында сілтемелер жасау
HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүмкіндігін айтуға болады:
Бір HTML файлынан мынандай басқа құжаттарға:
# Алыста орналасқан компьютердегі HTML файлға,
# Ағымдағы HTML - құжаттың ішіндегі белгілі бір орынға
# HTML - құжатты болмайтын кез келген файлға сілтемелер жасауға болады.
Сілтеме ретінде мәтінді немесе суретті пайдалануға болады.мұндай сілтемелер екі бөліктің болуын талап етеді, олар: белгі және сілтеме. Белгі сәлтеме бойынша ауысып баратын осы құжат ішіндегі бір нүктені анықтайды. Сілтеме белгі атын пайдаланады. Броузердің алдын ала тағайындалатын параметрлеріне сәйкес сілтемелер басқа тұспен ерекшеленіп тұрады немесе оның асты сызылады.
Сілтеме сөздің түсін өзгерту үшін body тегінің LINK=... және VLINK=... арибуттары пайдаланылады.
Сілтеме сипатталады:
A href= "ДС" ДүйсенбіA
Сілтеме арқылы ауысып баратын нүктедегі белгі (ДС) алдына # символы қойылады. Белгі атынан кейінгі "" және "" символдары арасында ауысу үшін тышқанмен шертілетін сілтеме сөз (Дүйсенбі)жазылады.
Осы Дүйсенбі гиперсілмете сөзін шерткенде баратын нүктеде төмегдегідей белгілер тұруы тиіс:
A Name="ДС"ДүйсенбіA
1. Соңғы тапсырманы ашып оның алдыңғы жағына кестенің алдына тағы бір кесте құрайық:
font color="red" size="6" face ="Arial"
B1"а" топтарының сабақ кестесіB
font
жолдарынан кейін мынандай тегтер тізбегі жазайық:
table width=100%
trtdДүйсенбіtdtdСейсенбі tdtdСәрсенбіtdtdБейсенбіt dtdЖұмаtdtrtable
2. Бұл фрагменттен кейін Дүйсенбі сөзіне сілтейтін белгі қоямыз, яғни BДүйсенбіBfont сөздерінің орнына:
... BA name="ДС"ДүйсенбіABfont.. .сөздерін жазу керек.
3. Енді кесте ішіндегі Дүйсенбі сөзіне гиперсілтеме жасаймыз, яғни
table width=100%
trtdДүйсенбіtdtdСейсенбі tdtdСәрсенбіtdtdБейсенбіt dtdЖұмаtdtrtable
сөздерінің орнына:
table width=100%
trtda href="#ДС"Дүйсенбіatd
trtda href="#СС"Сейсенбіatd
trtda href="#СР"Сәрсенбіatd... сөздерін жазамыз.
4.Файлды дискіге жазып сақтаймыз.
5.Осының нәтижесінде алынған Web - парақты қарап шығыңыздар.
6. Енді Дүйсенбі сөзін, содан соң Сейсенбі сөзін, т.с.с. күн аттарын тышқанмен тағдап шартіп көріңіздер. Гиперсілтемелердің дұрыс жұмыс істейтініне көз жеткізіңдер.
2.3.9 Фреймдер. "Frameset" контейнері
Броузердің терезесін біз бірнеше жеке кадларға немесе фреймдерге бөле аламыз, бұл кадларға немесе фреймдерге жеке - жеке HTML - документтерін оррналастыруға болады Броузер терезесіндегі алаң бірнеше тіктөртбұрыштарға бөлінеді, сол төртбұрыштарды фрейм деп атайды. Әр жеке фреймнің өзінің HTML - документі болады.
FRAMESET тегінің атрибуттары
1. COLS -- Фреймнің бағаналарының көлемін процентпен немесе пиксельмен беруі
2. ROWS Фреймнің жолдарының көлемін процентпен немесе пиксельмен беруі
3. FRAMEBORDER - фреймнің рамкасын үш өлшемді рамканы қояды
4. FRAMESPACING - фреймдердің араларын пиксельмен береді.
frame тегінің атрибуттары:
frame src="URL"
HTML документінде қоятын кадрдың адресі
frame name= "name"
Кадардың атын береді
frame margіnwіdth=#
Кадрдың оң және сол жақтағы бос жерлерінің мөлшерін анықтайды
frame margіnheіght=#
Кадрдың жоғарғы және төменгі жақтағы бос жерлерінің мөлшерін анықтайды
frame scrollіng=VALUE
Жалжымалы жолдың (Полоса прокрутка) көрсетедіегер мәні true болса, false болса көріебей тұрады
frame noresіze
Кадрдың көлемін өзгертпеуге арнлаған.
Мысалы, 2 фреймді құрайық. 1 - ші фреймде Netscape фирмасының домашняя страницасын жүктейік, ал 2 - шісіне Microsoft Internet Exlorer - ді жүктейік. фреймді құру үшін 2 тег қажет: "frameset" және "frame". екі фреймді құратын HTML - парағы келесідей болады:
frameset rows= "50%,50%"
frame src= "1страница.html"
frame src= "2страница.html"
frameset
Нәтижесінде 2 фрейм құрылады. Мұнда frameset тегінде rows деген атрибутты қолданып тұрмыз және бұл фреймдер бірінен соң бірі орналасады дегенді білдіреді. 1 - ші фреймде, яғни жоғарғы фреймде 1страница.htm html - парағы жүктеледі, ал 2 - ші төменгі фреймде 2страница.html орналасады.
Барлық жақтаулар тіктөртбұрыш түрынде болады. Rows атрибуты көлденең бағыт бойншы жақталардың санын анықтайды, cols атрибуты тік бағыт бойынша жақтаулардың санын анықтайды. Осылай жақтаулардың торы құрылады. Егер rows атрибутын қолданбасақ, онда әр жол парақтың бар ұзындығын(биіктігін) алады. Егер cols атрибутын қолданбасақ, онда әр бағана парақтың бар енін алады. Егер екі атрибутты да қолданбасақ, онда парақта тек
қана бір жақтау болады да, ол барлық парақты алып тұрады.
HTML - параңында 3 тік бағыттағы фреймді құру келесідей болады:
frameset cols= "33%,33%,33%"
frame src= "1 фрейм - столбец.htm"
frame src= "2 фрейм - столбец.htm"
frame src= "3 фрейм - столбец.htm"
frameset
Енді 5 ұяшықтан тұратын фрейм - кадр құрастырайық. Мұнда бірінші бағана 2 жолдан, ал екінші бағана 3 жолдан тұрсын.
frameset cols= "50%,50%"
frame src= "1 ячейка.htm"
frame src= "2 ячейка.htm"
frameset
frameset rows= "33%,33%,33%"
frame src= "3 ячейка.htm"
frame src= "4 ячейка.htm"
frame src= "5 ячейка.htm"
frameset
Көлемін пиксельмен және процентпен беруге болады. Процентпен бергенде экранның көлеміне байланысты. Егер екі атрибутта берілсе, онда компьютер бірінші пиксельді атрибутты қабылдап, одан кейін процентті қабылдайды. Экранның көрінуі солдан оңғы және жоғарыдан төменге бағытталған. Мысалы, экранды тең екі бөлікке бөлейік(төменгі және жоғарғы):
frameset rows= "50%,50%"
қалған бөлігі анықталады
frameset
Келесідей үш бағана жасайық: екіншісі 250 пиксель болады, үшіншісі 75%, ал біріншісі қалған кеңістіктің 25% алады:
FRAMESETcols="1*,250,3*"
FRAMESET
2.3.10 HTML документіндегі форма
HTML документіндегі форма қолданушыдан ақпарат алуға мүмкіндік береді. Форма еркін текст түрінде ақпаратты сұрауға мүмкіндік туғызады. Ал жауаптарды "иә жоқ" түрінде немесе бірнеше опциядан таңдау жасау түрінде болады.
Сіз әртүрлі мақсатпен форманы қолдана алаcыздар.қарапайым мысал ретінде, форманы қолданушылар кіретін сайтқа орналастыру, онда олар өдерінің пікірлерін жазып қоюларына болады.
Form тегі
Бұл ьегпен барлық формалар басталады. Оның екі атрибуты бар, олар:
атрибут
Мән - мағнасы
action
Формадағы мәліметтерді өңдеп, оның URL - адрестерін анықтайды.
method
Форма ақпаратты қандай түрде жіберуін көрсетеді. Егер мәні post баолса, онда URL адрестен жеке жіберіледі, ал егер мәні get болса, бірге жібереді.
HTML - де форманы құрудың 3 тегі бар, олар; textarea, select, input.
Textarea тегі
Бұл тег мәтіндік ақпаратты көпжолды қылып енгізуге арналған. Бұл тегтің атрибуттары:
атрибуттар
мән - мағнасы
name
Жолдың атын анықтайды
rows
Жолдың биіктігін анықтайды
cols
Жолдың енін анықтайды
Select тегі
Бұл тег қалқып шығушышы меню жасау немесе опциялардың тізімінің жылжымалы жолмен шығу үшін қолданылады
атрибуттар
Мәні
name
Ақпараттың атын береді
size
Таңдау опциясы үшін терезенінң көлемін анықтайды. Егер мәні 1 тең болса, онда опцияның тізімі ғана шығады№Ал егер 1 - ден үлкен болса онда жылжымалы жолмен шығады.
multiple
Бірден бірнеше опцияны тадауға мүмкіндік береді.
Опциялардың тізімі Option тегінің кмегімен SELECT атрибутының құрамына кіреді. Бұл тегтің екі атрибуты бар:
атрибут
Мәні
value
Қайтаратын өңдеу программасының мәнін көрсетеді
selected
Тыныштықта тұрған опцияны көрсетеді
Input тегі
INPUT тегі TEXTAREA және SELECT тегтерінен айырмашылығы ол бір эелементті тег. Ол әртүрлі тәсілдермен текстік алаңды, парольді енгізуге арналған алаң, ауыстырып қосқыштар, кішкене жалаулар, мәліметтерді жіберуге арналған батырмалар және форманы тазалауға арнаналған батырмаларды қоюға және ақпаратты жинауға арналған тег.
INPUT тегінің келесідей атрибуттары бар:
Атрибут
мағнасы
NAMESIZE
Енгізу алаңаның көлемін символдармен береді.
MAXLENGTH
Алаңға енетін символдардың максималды санын көрсетеді
VALUE
Текстік алаң үшін тексті анықтайды. Кішкене жалаушалар және ауыстырып қосқыштар үшін программаға оралатын мәнін анықтайды. Ал ақпараттарды жөнелтетен және форманы тазалайтын батырмалардың үстіндегі жазуды көрсетеді
CHECKED
Кішкене жалаушалар мен ауыстырып қосқыштарды оранатады
TYPE
Енгізу алаңының типін көрсетеді
TYPE атрибуты.
* TYPE атрибуты келесідей мәндерді қабылдай алады
Атрибут
мағнасы
TEXT
Тыныштықта турған мән болып табылады да, мәліметтерді енгізу үшін бір жолды енгізеді. Бұл тип үшін келесідей атрибуттар қолданылады NAME (міндетті түрде), SIZE, VALUE және MAXLENGTH
PASSWORD
Парольдің енгізу символдарын жұлдызшалармен ауыстыруға араналған. Бұл енгізу алаңы үшін келесідей атрибуттар қолданылады NAME, SIZE, MAXLENGTH және VALUE
CHECKBOX
Квадрат түрінде кішкене жалаушаны орнатуға арналған алаңды қоюға мүмкіндік береді, онда белгі " қанат белгімен " галочка түрінде болады. Келесідей атрибуттармен қолданылады NAME (міндетті түрде), VALUE және CHECKED. Кішкене жалаушалар берілген опциядан бірнеше опцияны таңдуға арналған.
Кішкене жалаушаларды қолданғанда өте мұқият болу керек.
RADIO
Берілген опциядан тек қана бір мәнді таңдауға арналған. NAME атрибутының мәндерін бірдей етіп ауыстырып қосқышты топтауғаболады. VALUE және CHECKED атрибуттары қолданылады.
RESET
Форманы тазалауға батырманы орнатуға арналған VALUE атрибуты бұл батырманың атын беру үшін арналған.
SUBMIT
Батырма құру үшін арналған. Бұл батырманы басқанда енгізілген мәліметтер өңделетін программаға жіберіледі. Мұндағы VALUE атрибуты бұл батырманың атын береді
Мысал, Келесі формада TEXT мәні шығады.
HTML
BODY
FORM
Введите номер телефона:
INPUT TYPE="TEXT" NAME="phone"
SIZE="15" MAXLENGTH="12"
FORM
BODY
HTML
2.4 CSS құру негіздері,Стильдердегі мұрагерлік қасиеті
CSS қасиеттеріне шолу
Стильдік әр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет.
Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:
· қаріп (қаріп);
· түстер;
· мәтін;
· өрістер мен жақтаулар (поля и рамки);
· сыртқы түрлері.
Стильдерде қолданылатын өлшем бірліктері төменде көрсетілген.
Белгіленуі
Атауы
Мысалы
in
Дюйм
Р style="font-size:1in"
cm
Сантиметр
Р style="font-size: 1cm"
mm
Миллиметр
P style="font-size:1mm"
рх
Пиксел
Р style="font-size:1px"
pt
Пункт
Р style="font-size:1pt"
рс
Пики
Р style="font-size:1pc"
%
Проценты
Р style="font-size :1%"
Пункттер мен пикалар -- типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді.
Word-та, мысалы, бұл параметр 8-ден 72 пт-ке дейін. Бұл кегльдің пунктпен берілген мөлшері. 1 типографиялық пт = 172дюйм= 0,375 мм. Бұл символдың өз мөлшері емес, оның "ұпай" (очко) мөлшері, яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 қаріптің бас әрпінің көлемі 7 пункт шамасында болады.
Кітап шығаруда - мәтін көлемі 10 немесе 12 пт болады. Тақырыптар үшін үлкенірек кегль, ал сілтемелер мен ескертпелер үшін кішірек (әдетте 8 пт) мәндері қолданылады.
Пика -- үленірек өлшем бірлігі. 1 пика = 12 пт.
пайыздық өлшем (процентный отсчет) негізгі мөлшерге байланысты болады. қаріптер үшін -- ағымдағы мән негізге алынады. пайызды пайдалану ыңғайлы болып саналады. егер программалаушы браузердегі қаріп көлемін стильдерде пайызбен беріп отырса, олар пропорциональ түрде өзгереді.
font-family қаріп түрі (шрифт типі)
Бұл стильдік қасиет қаріптің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:
serif - шығыңқы қаріп (с засечками - серифный);
sans-serif - жұмыр қаріп (без засечек - рубленый);
monospace - ені бірдей қаріп (моноширинный қаріп - символдарының ендері бірдей)
Это шрифт с засечками.
Это шрифт с засечками.
Серифтік
Это рубленый шрифт.
Это рубленый шрифт.
қаріп
Жұмыр қаріп
Это моноширинный шрифт.
Это моноширинный шрифт.
Бірдей енді қаріп
Гарнитура -- бір қаріп символдарының сызылымдары жиыны (набор начертаний символов одного шривта).
Бұл - тіке және курсивтік сызылым, қарайтылуы (жирность), литер ені (қысыңқы, қалыпты, созылмалы) және кеглі әр түрлі болуы мүмкін деген сөз.
Қаріптер серифтік (шығыңқы - с засечками) и жұмыр (рубленые - без засечек) болады. Шығыңқы қаріп -- Times гарнитурасы, жұмыр қаріп -- Helvetica немесе Arial гарнитурасы.
Серифтік қаріптер жеңіл оқылады. Төменгі сериф көзге жылы көрінеді.
жұмыр қаріптер тек тақырыптар үшін қажет.
серифтік қаріп негізгі мәтін үшін, ал жұмыр -- тақырыптар немесе майда ескертпелер үшін керек.
тағы екі топ: пропорциональ және ені бірдей (моноширинные) қаріптер бар.
Бірдей енді қаріптер баспа машинкасындай етіп басады. Олар мынадай тәгтерден пайда болады: PRE, CODE, ТТ, SAMP, KBD.
кәдімгі мәтін пропорциональ қаріппен басылады. Оларда әр түрлі символдар ені әр түрлі, 1 - енсіз, ж - енді.
Пропорциональ қаріп бірдей енді қаріпке қарағанда жеңіл оқылады. пропорциональ қаріп негізгі мәтін үшін, ал бірдей енді қаріп -- программалар үшін қажет болып саналады
Times және Helvetica гарнитуралары -- пропорциональ.
Courier гарнитурасы - бірдей енді қаріп .
кез келген графикалық операциялық жүйеде үш стандартты гарнитура бар,
Windows үшін:
Times Roman -- серифтік қаріп;
Arial -- жұмыр қаріп;
Courier -- бірдей енді қаріп.
Үнсіз келісім бойынша (по умолчанию) браузер қалыпты мәтін үшін Times Roman қаріпін, ал программалар үшін - Courier қарпін (бірдей енді) пайдаланады.
Сайт үшін өз гарнитураңды көрсету қажет емес, ондай қаріп компьютерде болмаса, ол иероглифке айналып кетеді. Жергілікті (локальды) гипермәтін үшін кез келген қаріп жарайды. Ал Интернет желісі үшін тек топты ғана көрсету жеткілікті шығар немесе қаріпі қоса жіберіп, оны орнату ережесі де бірге берілуі тиіс.
font-family қасиеті үшін бір емес, бірнеше қаріп көрсеткен абзал (үтір арқылы бөліп), мысалы:
Н1,Н2,Н3,Н4,Н5,Н6
{
font-family: "Arial Cyr", Geneva, Helvetica, sans-serif;
}
Браузер алдымен Arial Cyr қаріпін іздейді, таба алмаса - Geneva, соңынан - Helvetica, ешқайсысы да болмаса, әйтеуір бір жұмыр қаріп табады (sans-serif).
Егер қаріп аты бірнеше сөзден тұрса, ол міндетті түрде қос тырнақшаға алынады.
font-size
font-size қасиеті қаріптің абсолюттік немесе салыстырмалы мөлшерін береді. Салыстырмалы түрде бергенде, пайыздық өлшем қолданылады (ағымдағы қаріп - негізгі) немесе мынадай түйінді сөздер қою керек:
larger - ірілеу - крупнее;
smaller - шағындау - мельче.
Абсолюттік мөлшерде келесі өлшем бірліктерінің бірін көрсету керек: in, cm, mm, px, pt, pc.
мынадай түйінді сөздерді де пайдалануға болады:
xx-smali
- өте майда
- сверхмелкий;
x-smail
- майдалау
- очень мелкий;
small
- майда
- мелкий;
medium
- орташа
- седний;
large
- ірі
- купный;
х-large
- ірілеу
- очень крупный;
xx-large
- өте ірі
- сверхкрупный.
көбінесе осындай салыстырмалы шамаларды берген дұрыс болып саналады.
Түстерді тағайындау
Стильдік қасиеттер түстерді тағайындаудың үш түрлі тәсілін береді:
· түйінді сөз, мысалы, white;
· он алтылық RGB-код, мысалы, #eee5d8;
· ондық RGB-код, мысалы, rgb(255,64,0);
color - элемент түсін анықтайды.
background-color - элемент шығарылатын маңайдағы фон түсін анықтайды.
мысалы, стиль үшін мынадай фрагмент енгізуге болады:
1 мысал
HTML
HEAD
!-- CSS қасиеттерін енгізу --
STYLE type="textcss"
!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
--
STYLE
TITLE 4 мысал TITLE
HEAD
BODY bgcolor=white text=black
Pтестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того,как она выйдет в свет(Лу Гринзоу "Философия программирования").
H6 style="color:red;background-color:s ilver;
letter-spacing:20px"
Тестирование - это форма приема экзамена H6
BODY
HTML
Бұл жұмыс нәтижесі 1 суретте келтірілген.
Мәтіндерді анықтау letter-spacing - әріптер арасындағы аралықты қосымша анықтау үшін керек, normal түйінді сөзін немесе нақты мән беруге болады, минус таңбалы мән де болады (символдар бірінің үстіне бірі жазылады). Пайыздық тәсіл қолданылмайды.
line-height - жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берсе де болады (14pt), жол аралығын (1.4) немесе жол биіктігінің пайызымен де (200%) көрсетіледі. Мысалы, жоларалық екі интервал:
line-height: 2 ; немесе line-height: 200%;
normal түйінді сөзімен де берсе болады.
text-align - мәтінді көлденең туралау тәсілін көрсетеді (способ горизонтального выравнивания). Оның мынадай мәндері қолданылады:
left - сол жақ шетке туралау;
right - оң жақ шетке туралау;
center - ортаға туралау;
justify - екі шетін де туралау (по ширине).
Соңғы мәнді justify қолдану қиын, өйткені ұзын сөзді тасымалдауды браузер білмейді (мысалы, орысша немесе қазақша мәтіндерді).
ӨРІСТЕР МЕН ЖАҚТАУЛАР (Поля и рамки)
border-style - элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мәндері мынадай:
none - жақтау жоқ (келісім бойынша); solid - кәдімгі тұтас жақтау;
double - қоссызық;сызығы; groove - ойыс жақтау
ridge - дөңес жақтау сызығы; inset - ойыс элемент;
outset - дөңес элемент.
border-color - жақтау сызығының түсін анықтайды. Бұл қасиет border-style берілсе ғана жұмыс істейді.
border-width - жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан бірліктерімен (пайыздық жазу жоқ) немесе келесі сөздермен беруге болады:
thin - жіңішке - тонкая; medium - орташа - средняя; thick - жуан - толстая.
margin - элементтегі блок шеттерінде бос қалатын өріс енін (ширину поля отступа) береді. Санмен, пайызбен (блок ені негізінде) немесе түйінді сөзбен - auto беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
padding - элемент пен жақтау арасындағы қашықтықты береді. Санмен немесе пайызбен (от ширины элемента) беріледі.
Сыртқы түрді анықтау
width - элементтің енін тағайындайды. Санмен, пайызбен немесе auto түйінді сөзімен беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
Допускаются числовые, процентные зна - чения и auto. Бұл қасиет div и span элементтері үшін қолданылады, олар элементтерді блокқа біріктіреді.
height - элемент биіктігін тағайындайды. Санмен немесе auto түйінді сөзімен беріледі. Бұл қасиет те div и span элементтері үшін қолданылады.
Бір программа фрагментін толық келтірейік :
2 мысал
HTML
HEAD
! -- қасиетін енгізу CSS --
STYLE type="textcss"
!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
--
STYLE
TITLE 4 мысалыTITLE
HEAD
BODY bgcolor=white text=black
P Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
H6 style="color: red; background-color: silver; letter-spacing: 20px"
Тестирование - это форма приема экзамена
H6
BODY
HTML
Бұл программа нәтижесі суретте көрсетілген
HTML
HEAD
! -- Қасиетін қосу CSS --
STYLE type="textcss"
!--
P
{ font-family: "Arial
Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;line-height:2;
background-
color:yellow;text-align: center;
}
--
STYLE
TITLEПример 4TITLE
HEAD
BODY bgcolor=white text=black
P Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
H6 style="color:red;background-color:s ilver;letter-spacing:20px"
Тестирование - это форма приема экзаменаH6
BODY
HTML
2.4 Объектіні белгіленген орынға қою, z-index. Парақ коды сатылары. Абсолюттік түрде орналастыру
2.4.1. Стильдің мұра ретінде берілуі
HTML-кодтың құрылымы сатылы түрде болады. Бар құжат body. . .body тәгтері ішінде орналасады. Ал Р абзацы ішінде B тәгімен белгіленген элементтер болуы мүмкін.
Стильдің мұра ретінде берілуі body тәгі үшін анықталған стильдің құжаттағы барлық тәгтерге әсер ететіндігін білдіреді. Сәйкесінше егер бір тәг үшін стиль құрылса, онда сол тәг ішіндегі басқа тәгтерге де осы стиль міндетті түрде беріледі.
Мысалы, Р тәгі үшін келесі стиль берілген болсын:
P
{ color: red; font-size:14pt;
font-family: Arial, sans-serif; }
Онда осы абзац ішіне орналасқан ЕМ тәгінің элементтері де экранда қызыл түспен, 14 пункт көлемде жұмыр қаріппен шығарылады.
3 Мысалы:
Р
Стильдік
анықтаулардың ЕМ мұралану ЕМ қасиеті болады.
Ал егер ЕМ тәгі үшін мәтін символдары арасын ашып жазу қажет болса, онда мұндай қасиет қосымша беріледі:
HTML
HEAD
TITLE Қосымша стильлік нұсқаулар TITLE
STYLE type="textcss"
!--
P {color:red;font-size:14pt;
font-family:Arial,sans-serif}
--
STYLE
HEAD
BODY bgcolor=white text=black
P
Стильдік анықтаулардың ЕМ style="letter-spacing: 6рt:" мұралану ЕМ
қасиеті болады.
BODY
HTML
ЕМ тәгінің ішкі мәтіні Р тәгінің мәтіндері сияқты шығады (14 пункт, қызыл түсті, жұмыр қаріп), ал style="letter-spacing: 6pt" қосымша анықтаудың әсерінен сөздегі әріптердің арасы 6 пункт болып ашылып орналасады.
Сонымен ішкі қосымша тәгте жаңа стильдік анықтаулар кіргізіп қана қоймай, оның ата тегі болып саналатын сыртқы тәгтің де қасиеттерін өзгертуге болады.
Мысалы, келесі мәтіндегі "мұралау" (наследование) сөзі көк түске боялып тұрады.
HTML
HEAD
TITLE Стильлік нұсқауларды қайта анықтау
TITLE
STYLE type="textcss"
!--
P {color: red;font-size:14pt; font-family:Arial,sans-serif}
--
STYLE
HEAD
BODY bgcolor=white text=black
P Стильдік анықтаулардың ЕМ style="letter-spacing: 6рt: color:blue "
мұралану ЕМ қасиеті болады.
BODY HTML
Контекстік селекторлар
Стильдік анықтауларды, тәгтердің кірістіріліп орналасу реттілігіне сәйкес орындалатындай етіп жазуға болады. Мысалы, EM тәгіндегі мәтін түсі ол H3 тәгінің ішінде орналасқан жағдайда ғана көк болатындай етіп орналастырайық:
HTML HEAD
TITLEКонтекстік селектор
TITLE
STYLE type="textcss"
!-- H3 EM {color: blue}
--
STYLE
HEAD
BODY bgcolor=white text=black
H3 Контекстік EMселектор EMH3
P Контекстік EMселектор EMP
BODY
HTML
Экранға селектор сөзі бірінші қатарда көк түспен (Н3 тәгінің ішінде), ал екінші қатарда қара түспен (Р тәгінің ішінде) шығады. Стильдік анықтауларда үтір қойылмағандығына назар аударыңыз. Бұл контекстік анықтаулардың белгісі. Егер Н3, ЕМ { color: blue } түрінде жазсақ, онда Н3 тәгімен қатар ЕМ тәгі де көк түске боялады, яғни үтір бірнеше тәгтер тобы үшін бірдей болатын ортақ стильді анықтайды.
2. 4.2 Кластар
Стильдік анықтауларды тәгтерді көрсетпей-ақ жазуға болады. Мұндай
жағдайда, берілген стилді нақты тәгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады:
.аты
{ сипаттама: мәні;
. . .
сипаттама: мәні;
}
Басқаша айтқанда, анықтаулар әдеттегідей жазылады, бірақ тәгтердің аттары орнына .аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, және оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тәгпен сәйкестендіру үшін class атрибуты қолданылады:
Р class=def текст P
Бұл кодтың қалай жұмыс істейтінін қарастырайық.
HTML
HEAD
TITLEКласс анықтамасыTITLE
STYLE type="textcss"
.def
{font-family:Helvetica;font-size:14 pt;
border: solid 4pt red;padding: 6pt;
margin-left:5%;margin-right:5% }
STYLE
HEAD
BODY bgcolor=white text=black
H2КластарH2
P class=def
Клacc — тегке байланыспаған стилдік анықтама.
P Анықтамада тегтің орнына клас аты жазылады.
P class=def
Клас аты алдынан нүкте қойылады.
BODY
HTML
Мысалы, def атты стильдік класс жазып шығайық:
... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Пәндер
- Іс жүргізу
- Автоматтандыру, Техника
- Алғашқы әскери дайындық
- Астрономия
- Ауыл шаруашылығы
- Банк ісі
- Бизнесті бағалау
- Биология
- Бухгалтерлік іс
- Валеология
- Ветеринария
- География
- Геология, Геофизика, Геодезия
- Дін
- Ет, сүт, шарап өнімдері
- Жалпы тарих
- Жер кадастрі, Жылжымайтын мүлік
- Журналистика
- Информатика
- Кеден ісі
- Маркетинг
- Математика, Геометрия
- Медицина
- Мемлекеттік басқару
- Менеджмент
- Мұнай, Газ
- Мұрағат ісі
- Мәдениеттану
- ОБЖ (Основы безопасности жизнедеятельности)
- Педагогика
- Полиграфия
- Психология
- Салық
- Саясаттану
- Сақтандыру
- Сертификаттау, стандарттау
- Социология, Демография
- Спорт
- Статистика
- Тілтану, Филология
- Тарихи тұлғалар
- Тау-кен ісі
- Транспорт
- Туризм
- Физика
- Философия
- Халықаралық қатынастар
- Химия
- Экология, Қоршаған ортаны қорғау
- Экономика
- Экономикалық география
- Электротехника
- Қазақстан тарихы
- Қаржы
- Құрылыс
- Құқық, Криминалистика
- Әдебиет
- Өнер, музыка
- Өнеркәсіп, Өндіріс
Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.
Ақпарат
Қосымша
Email: info@stud.kz