Мазмұны
Кiрiспе………………………………………………………………………….
1 HTML – интернетте программалаудың негiзгi құралы…………………...
1.1 Интернетте программалау………………………………………………...
1.2 НTML құжаттармен жұмыс істеу негіздері……………………………...
1.3 WEB - беттер құру технологиясы………………………………....…......
2 Графикалық web-дизайн................................................................................
2.1 HTML құжатта графикалық кескіндермен жұмыс………………………
2.2 Web бетте анимацияны қолдану технологиясы………………………….
3 Орта мектепте күнделікті білім алатын процесін автоматтандыру…………..
4 Бизнес-жоспар………………………………………………………………..
4.1 Аннотация………………………………………………………………….
4.2 Түйін………………………………………………………………………….
4.3 Кәсіпорын сипаттамасы……………………………………………………
4.4 Өнімнің сипаттамасы………………………………………………………
4.5 Маркетинг жоспары……………………………………………………….
4.6 Өндірістік жоспар………………………………………………………….
4.7 Ұйымдастырушылық жоспар
4.8 Қаржылық жоспар
4.9 Жұмыстардың орындалу тізбесі
Қорытынды
Әдебиеттер тізімі………………………………………………………………
Кiрiспе
Қазiргi кезде информациялық қоғамда адамзаттың байланыс құралының өзгеше
Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар болсақ, Интернет
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
Web бет дегенiмiз не?
Web бет World Wide Web, яғни “дүниежүзiлiк өрмек”
Web бет ашу үшiн Интернетте программалай бiлу керек.
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
Бүгiнде жоғары және үздiксiз бiлiмге деген сұраныстың артуына
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнде программалу негiздерiн
1 HTML – интернетте программалаудың негiзгi құралы
1.1 Интернетте программалау
Ең алдымен Web бет құрудың ең ыңғайлы құралын
HTML тiлiнiң синтаксисi мен құрылымы. Әрбiр тiлдiң өзiндiк
HTML дескрипторлары дербес ережелерге бағынумен қатар, жалпы ережелерге
Келесi ереже дескрипторды ашу және жабу компоненттерiн қолдануға
Бұл ашылған дескрипторды белгiлi-бiр жерде жабу керектiгiн бiлдiредi.
Жалпы ережеге дескрипторларды төменгi не жоғарғы регистрде жазу
Дескрипторларды жазудағы тағы бiр маңызды мәселе бос орындар
Жоғарыда ескертiп кеткенiмiздей атрибуттар дескрипторлардың әрекетiн анықтайды. Көп
мұндағы bgcolor – фон түсi, text – мәтiн
HTML-де дескрипторға атрибуттар тiркелiп, атрибуттарға мәндер меншiктелiп жазылған
Атрибуттарға мiндеттi түрде мәндер меншiктелуi тиiс. Бұлай болмаған
DIV мiндеттi түрде жабылуы тиiс дескриптор болғандықтан оны
Сол сияқты (шрифт) дескрипторының size (өлшем атрибуты
Бұл кезде броузердегi мәтiннiң шрифт өлшемi дескрипторы
Сандық мәндердiң келесi бiр типi оналытылық код түрiнде
HTML-де сiлтеме дескрипторы - арқылы Web-адрестi шығаруға
Осы сияқты каталогты және кескiн файлдары дескрипторын қолдануға
Өздерiңiз байқағандай барлық аттрибуттардың мәндерiнiң алдына = (теңдiк
Арнайы символдардың көмегiмен HTML бетке HTML кодын шығаруға
< IMG src= “aspan.gif” >
Арнайы символдар мен дескриптордың қолданылу айырмашылығы 1 және
1 сурет - “Кiшi” және “үлкен” символдары арқылы
2 сурет - Арнайы символдар көмегiмен HTML кодты
1.2 НTML құжаттармен жұмыс істеу негіздері
1.HTML қабықшасы. HTML қабықша – беттiң тақырыбы (HEAD)
xc
мұндағы, жолы құжат тақырыбын бередi. Құжат
Беттiң аталуы. және дескриторлары беттiң аталуын
Стиль. HTML құжатты басқарудың элементтерi мен стилдерiн тақырыпқа
Метаинформация. МЕТА дескрипторы құжат авторы, кiлттiк сөздер, арнайы
Кез келген құжатты құрғанда оның басқару элементтерi мен
2.Құжат денесiнiң құрылымы. HTML құжаттың денесi орналасатын негiзгi
Мәтiн. Құжат құрамында кездесетiн мәтiндер. Олар оқылуы жеңiл
Графикалық кескiн. Құжатта жылжуға немесе информацияны көрнекi түрде
Сiлтеме. Web түйiннiң iшiнде оңай жылжуға және желiнiң
Мультимедиа және арнайы программалар. Видеороликтер, Java аплеттерiмен, Flash,
3.Түсiнiктемелер. Құжатта қолданылып жатқан дескрипторлар мен әрекеттерге берiлетiн
4. Форматтау элементтерi. Мәтiндi форматтау – HTML тiлiнiң
..-... Дескрипторлар диапазоны тақырыптар мен тақырып мазмұнына қолданылады;
. Каретканы қайтару дескрипторы;
... Абзацты ашу/жабу дескрипторлары;
... Мәтiндi жартылай қалың ету;
... Мәтiндi көлбеу ету;
... Мәтiн астын сызу.
Осы аталған дескрипторларды пайдаланып алғашқы HTML құжатты жазайық.[10].
1-мысал.
Блокнот қосымшасын iске қосыңыз;
Құжат мәтiнiн енгiзiңiз:
Негiзгi HTML-бет
Мәтiндi форматтау
World Wide Web жүйесiнiң негiзгi
Құжатты жұмыс үстелiне “Негiзгi HTML-бет.html” атауымен сақтаңыз. Мұндағы
Файлды сақтап болған соң, жұмыс үстелiндегi “Негiзгi HTML-бет”
3 сурет - Негiзгi HTML-бет
Е с к е р т у. 3-суреттегi
5. Абзацтармен жұмыс. Абзац мәтiнiнiң бетте орналасуы дескрипторлардың
World Wide Web жүйесiнiң
4 сурет - Бет ортасына орналасқан мәтiн
Абзацтармен жұмыс iстеудiң тағы бiр ерекшелiгi мәтiн жолдарының
World Wide Web
Мәтiн фонының түсi де style атрибуты арқылы берiледi.
World Wide Web жүйесiнiң негiзгi қызметi
электрондық құжаттар
5 сурет - Жасыл фонда шығарылған мәтiн
6. Шрифттермен жұмыс. Web-беттiң дизайн тиiмдiлiгi оның қаншалықты
Қазiргi кезде шрифттер өте көп болғандықтан оларды, белгiлi
Категория – шрифттердiң негiзгi класы. Оны шрифттiң “ұлты”
Гарнитура – белгiлi бiр қасиеттерiне байланысты топтастырылған шрифттер
Кескiн – әрбiр шрифттiң қайталанбайтын өзiндiк ерекшелiгi. [9].
1 кесте - Негiзгi шрифт категориялары, гарнитуралары
Категориялар Гарнитуралар
Serif
Sans-Serif
Monospaced
Script
Decorative Times, Century Schoolbook, Garamond
Hevletica, Arial, Verdana
Courier, Courier New
Nuptical Script, Boulevard, Signature
Whimsy, Arriba!, Bergel
2 кесте - Гарнитуралар және кескiндер
Гарнитура Кескiн
Times
Arial
Courier
Whimsy Roman (тiк), Italic (көлбеу)
Regular (кәдiмгi), Bold Italic (жартылай қалың көлбеу)
Regular, Oblique (қиғаш)
Regular, Bold (жартылай қалың)
HTML-да шрифттермен жұмыс iстеу элементiмен жұмыс iстеуге
size (кегль) – мәтiн таңбаларының биiктiгi;
color (түс) – шрифт түсi. Шрифт түсi көп
face (гарнитура) – қажеттi шрифт атауын таңдауға мүмкiндiк
1-мысалдағы мәтiнге дескрипторын пайдалану:
Мәтiндi форматтау
World Wide Web
жүйесiнiң негiзгi қызметi қажеттi информацияны iздеу, жинау,
Ескерту. Times Kaz шрифтi арқылы терiлген мәтiннiң қазақша
6 сурет - Шрифтi, өлшемi, түсi берiлген HTML
7. Кестелермен жұмыс. Кестелердiң HTML құжаттарға енгiзiлуi кестелiк
.. - кестенiң басы мен аяғын бiлдiретiн негiзгi
3 кесте - дескрипторының негiзгi атрибуттары
Атрибут және оның мәнi Сипаттамасы
align=“x”
border=“x”
cellspacing=“x”
cellpadding=“x”
width= “x%” не width= “x” Ұяшық iшiндегiсiн орналастыруға
кесте қабырғаларының жуандығын анықтайды;
кестенiң көршi ұяшықтарының арасындағы ара қашықтықты анықтайды
кестенiң ұяшығының қабырғасы мен ондағы информация арасындағы ара
кесте енiнiң өлшемiн анықтайды.
.. - кесте қатарын ашатын және жабатын дескрипторлар.
.. - кестенiң жеке ұяшығын құратын дескриптор.
Дескрипторларды пайдаланып қарапайым кесте құрып көрейiк:
Блокнот қосымшасын iске қосыңыз;
HTML құжаттың кодын енгiзiңiз:
Кесте 1
Кестенiн 1-уяшыгы
Кестенiн 2-уяшыгы
Кестенiн 3-уяшыгы
Кестенiн 4-уяшыгы
Файлды “Кесте1.html” атауымен жұмыс үстелiне сақтаңыз.
Жұмыс үстелiндегi “Кесте1” файлын iске қосыңыз. 7-суреттегi HTML
7 сурет - Ұяшықтарының iшiндегi мәлiметтерi түрлiше орналасқан
Кей жағдайларда кесте ұяшықтарының параметрлерi бiр-бiрiмен сәйкес келе
4 кесте - дескрипторының негiзгi атрибуттары
Атрибут және
оның мәнi Сипаттамасы
width= “x%” не width= “x”
align=“x”
valign=“x”
colspan=”x”
rowspan=”x”
bgcolor=”x”
background=”url”
height=”x” Ұяшықтың ен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ру;
Ұяшықтың фон түсiн анықтайды;
ұяшықтың фоны ретiнде сурет алынады;
ұяшық биiктiгiн анықтайды.
Кесте ұяшығының атрибуттарын қолданып HTML құжат құрайық.
Блокнот қосымшасын iске қосыңыз;
HTML құжаттың кодын енгiзiңiз:
Кесте уяшыктарынын атрибуттарын пайдалану
Кестенiн 1-катарынын 1-уяшыгы
Кестенiн 1-катарынын 2-уяшыгы
Кестенiн 1-катарынын 2-уяшыгы
Кестенiн 2-катарынын 1-уяшыгы
Кестенiн 2-катарынын 2-уяшыгы
Файлды “Кесте2.html” атауымен жұмыс үстелiне сақтаңыз.
Жұмыс үстелiндегi “Кесте2” файлын iске қосыңыз. 8-суреттегi HTML
8 сурет - Екiншi қатарындағы 2 және 3
HTML-да енi шектелген кестелерден басқа динамикалық кестелер де
8. Тiзiмдер. Web беттегi информацияның анық және байланысты
Тiзiмдер сонымен қатар web дизайнда да көп пайдасын
HTML тiзiмдерiн құруда келесi дескрипторлар қолданылады:
..(/UL) – маркерлi тiзiм;
..(/OL) – нөмiрленген тiзiм;
- тiзiм элементiнiң дескрипторы;
.. - анықтамалар тiзiмiнiң дескрипторы;
HTML құжаттың мәтiнiн логикалық байланыста ұйымдастыру үшiн көп
Карындаш
Кiтап
Даптер
Нәтижеде броузерде төмендегi тiзiм пайда болады:
Карындаш
Кiтап
Дәптер
Нөмiрленген тiзiмдерде реттелген сандық мәндер қолданылады. Мысалы,
Пайдаланылган адебиеттер
О.Камардинов. Информатика. -Шымкент. 2000, 250 б.
Р.Кадiрбаева. MS FrontPage. -Шымкент. 2001, 84 б.
М.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с.
А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с.
Я.Нильсен. Web-дизайн. Спб. 2002, 187 с.
9 сурет - Нөмiрленген тiзiм
Кей жағдайларда күрделi тiзiмдердi қолдануға тура келедi. Күрделi
Дипломдық жұмыс мазмұны енгiзiлген күрделi тiзiм құратын HTML
Блокнот қосымшасын iске қосыңыз;
HTML құжат кодын енгiзiңiз:
МАЗМУН
МАЗМУНЫ
КIРIСПЕ
HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ
Интернетте программалау. HTML тiлiне кiрiспе
НTML кужаттармен жумыс iстеу негiздерi
ГРАФИКАЛЫК WEB-ДИЗАЙН
Web беттi тиiмдi безендiру
Web бетте анимациялык кескiндердi бейнелеу технологиясы
КОРЫТЫНДЫ
ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР
HTML құжатты “Мазмун.html” атауымен жұмыс үстелiне сақтаңыз.
“Мазмун” файлын iске қосыңыз (10-сурет).
10 сурет - Интернет оқулық мазмұны шығарылған күрделi
Маркерлi және нөмiрленген тiзiмдердiң екi атрибуты бар: type
Ше»бер-маркер
Квадрат-маркер
Тiзiмнiн оныншы элементi
Тiзiмнiн он бiрiншi элементi
т.с.с.
11 сурет – type және value атрибуттары қолданылған
9. Фреймдер. Фреймдердi қолдану web-беттер құрудағы ыңғайлы тәсiлдердiң
Фреймдердi құру үшiн келесi дескрипторлар қолданылады:
… - негiзгi атрибуттары жолдар мен бағандар санын
5 кесте - дескрипторының негiзгi атрибуттары
Атрибут және оның мәнi Сипаттамасы
cols=“x”
rows=“x”
border=“x” тiк фреймдердiң өлшемiн пиксель не пайыздық өлшем
көлденең фреймдердiң өлшемiн пиксель не пайыздық өлшем бойынша
фреймнiң қабырғасының өлшемiн анықтау;
- жеке фреймге кiрiстiрiлетiн HTML-құжаттың адресiн анықтайды.
6 кесте - дескрипторының негiзгi атрибуттары
Атрибут және оның мәнi Сипаттамасы
name=“x”
scrolling=“x”
src=“x” HTML-құжаттар арасында байланыстар орнату үшiн қолданылады;
Көлденең және тiк айналдыру белдеушелерiн iске қосады (мәндерi:
фреймге орналасатын құжаттың URL адресiн анықтайды
Ендi аталған дескрипторларды пайдаланып қарапайым фрейм құратын құжат
Негiзгi
Құжаттың орындалу нәтижесi 12-суретте келтiрiлген. Суреттен көрiп тұрғанымыздай
12 сурет - Фреймдерге бөлiнген броузер
Кей жағдайларда құжаттағы мәтiнге қатысты динамикалық фреймдер құруға
жолындағы * таңбасы фреймнiң биiктiгiнiң динамикалық екендiгiн бiлдiредi.
Жалпы фреймдер веб-беттер құруда үлкен септiгiн тигiзiп ғана
1.3 Web - беттер құру технологиясы
Интернет желiсiн пайдаланушылар арасында байланыс болмаса, онда желi
Web беттер бiр-бiрiмен байланыстырылып web-түйiндi құрайды. Web-түйiн Интернет
1. Абсолют және салыстырмалы сiлтемелер. Алғашқы кездерi гиперсiлтеме
HTML тiлiнде сiлтемелiк байланысты дескрипторы ұйымдастырады. Оны
дескрипторының ең негiзгi атрибуты href, яғни гипермәтiндiк
және дескрипторларының арасында жазылған кез келген
HTML тiлiнде дескрипторы арқылы сiлтемелiк байланысты ұйымдастырудың
Толық URL арқылы берiлетiн абсолют сiлтеме жоғарыда қарастырылды.
Салыстырмалы сiлтеме сiз өзiңiз орналасқан сервердегi адреске кiруде
Мысалы,
Дипломдык жумыс мазмуны
Егер сiз басқа каталогта орналасқан құжатқа гиперсiлтеме құрғыңыз
Мысалы,
Дипломдык жумыс мазмуны
Абсолют және салыстырмалы сiлтемелердi пайдалана отырып, дипломдық жұмыс
Блокнот қосымшасын ашыңыз;
HTML кодын терiңiз;
HTML>
Дипломдык жумыска сiлтеме
Интернет оқулық мазмунын кору ушiн шертiнiз
Құжатты “Сiлтеме.html” атауымен сақтаңыз;
Жоғарыда келтiрiлген “Мазмун.html” файлын iске қосыңыз. Мазмұн файлының
Броузер терезесiнде тышқанның оң жақ түймесiн шертiп, контекстi
Көрiнген HTML кодты төмендегiше етiп өзгертiңiз;
МАЗМУН
Керi
МАЗМУНЫ
КIРIСПЕ
HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН
НЕГIЗГI КУРАЛЫ
Интернетте программалау. HTML тiлiне кiрiспе
НTML кужаттармен жумыс iстеу негiздерi
ГРАФИКАЛЫК WEB-ДИЗАЙН
Web беттi тиiмдi безендiру
Web бетте анимациялык кескiндердi бейнелеу технологиясы
КОРЫТЫНДЫ
ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР
Өзгерiс енгiзiлген құжатты “Мазмун.html” атауымен қайта сақтаңыз;
Жұмыс үстелiндегi “Сiлтеме.html” файлын iске қосыңыз. 13-суреттегi броузер
Броузердегi сiлтемеге шертiп, құжат мазмұнын ашыңыз (14-сурет);
10. 14-суретте көрiнген броузер терезесiндегi Керi сiлтемесi мазмұнға
2. Iшкi ciлтемелер. Кейде бiр web-бетте орналасуы тиiс
13 сурет - Web-беттiң жоқтығын не ашылмайтынын хабарлау
Ендi iшкi сiлтемелердi ұйымдастыруды дипломдық жұмыстың кiрiспесiне пайдаланып
1. Блокнот қосымшасын ашыңыз;
2. Кiрiспенiң HTML кодын терiңiз;
КIРIСПЕ
КIРIСПЕ
Интернет туралы қысқаша мәлiмет
Web бет деген
HTML жайлы
Интернет туралы қысқаша мәлiмет
Информациялық қоғамда адамзаттың байланыс құралының өзгеше екенiн практика
Қазiргi кездегi Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар
Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым
Пайдаланушы Интернетте жұмыс iстей бiлумен қатар, онда өзiнiң
Беттiн басына өту
Web бет деген
Web бет World Wide Web, яғни "дүниежүзiлiк өрмек"
Web бет ашу үшiн Интернетте программалай бiлу керек.
Беттiн басына өту
HTML жайлы
HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп
Дипломдық жұмыстың мақсаты пайдаланушыға HTML тiлiнiң" негiздерiн оқыта
Беттiн басына өту
3. Құжатты жұмыс үстелiне “Кiрiспе.html” атауымен сақтаңыз;
4. “Кiрiспе” файлын iске қосыңыз. 16-суреттегi web-бет ашылады.
16 сурет - Iшкi сiлтемелерi бар web-бет
17 сурет - Iшкi сiлтеме көмегiмен ашылған құжат
2 Графикалық web-дизайн
2.1 HTML құжатта графикалық кескiндермен жұмыс
HTML-да мәтiн форматтаудан Web-дизайнға өтудiң алғашқы қадамы Web-бетке
HTML құжатқа сурет енгiзу үшiн дескрипторы қолданылады.
Cурет кiрiстiру
18 сурет - Броузердегi сурет
IMG дескрипторының атрибуттары броузердiң суреттермен жұмыс iстеуiн басқаруға
src=”x” – суреттiң түрған орны (оның абсолют не
width=”х” – броузерге сурет енiн алдын-ала тағайындауға мүмкiндiк
height=”х” – броузерге сурет биiктiгiн алдын-ала тағайындауға мүмкiндiк
border=”x” – сурет рамкасының енiн анықтайды;
align=”x” – суреттiң бетте көлденең және тiк орналасуы
alt=”x” – суреттiң орнына оның сипаттамасын шығаруға мүмкiндiк
hspace=”x” – суреттiң оң және сол жағынан бос
vspace=”x” – суреттiң жоғарғы және төменгi жағынан бос
HTML құжатта графикалық кескiндермен жұмыс iстеуде IMG дескрипторының
border атрибуты cурет шетiндегi рамканың енiн анықтайды. Егер
Суреттiң web-бетте орналасуын align атрибуты анықтайды. Бұл атрибут
19-суретте енiнiң, биiктiгiнiң және рамка енiнiң өлшемдерi берiлген,
19 сурет - өлшемдерi берiлген графикалық кескiн
IMG дескрипторының alt атрибутының көмегiмен суретке сипаттама беруге
20 сурет - Тышқан көрсеткiшi сурет үстiне орналасқан
Hspace және vspace атрибутарын пайдалану арқылы графикалық кескiннiң
Пайдаланылган эдебиеттер
Балаларды тјрбиелеу сайтына ќош келдіѕіз...!