Web торабын құруды оқыту тақырыбы

Жұмыс түрі: Курстық жұмыс
Тегін: Антиплагиат
Көлемі: 30 бет
Таңдаулыға:

Мазмұны
КІРІСПЕ 4
І тарау. “Web торабын құруды оқыту тақырыбы” 5
1.1. Тақырыптың мақсаты мен міндеті 6
1.2. Тақырып мазмұны 6
1.3. Тақырып атаулары, олардың қысқыша мазмұны және тақырыпты меңгеруге
бөлінетін оқу сағаттары көлемі 6
2 тарау Web бетінің құрылымы 9
2.1. HTML тілі 9
2.2. Гипертекстік сілтемелер 14
2.3. HTML-сандарты бойынша Wеb бетін құрастыру 19
3. FrontPage 25
3.1. Web торабын құрушы редакторларға шолу 25
3.2. FrontPage 26
3.3. FrontPage-де Web-торабын құру 28
ҚОРЫТЫНДЫ 43
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР 45

КІРІСПЕ

Бүкіл дүние жүзінде көптеген видео, аудио құрал-жабдықтар, көптеген
альбомдар, CD программалар, әдебиеттер мен қамтамасыз ететін дүкендер бар.
Бұл нағыз “мультимедиа дүкендері” ақпарат қоймаларына ұқсас. Енді осы
ақпарат қоймаларын электронды түрде елестетсек World Wide Web-ті түсінеміз.
Бір сөзбен айтқанда – ол ақпараттық интернеттегі графикалық түрі.
Теледидар газет журналдарда World Wide Web-тегі адрестерін
хабарлайтынын байқаймыз. Үлкен корпорацияларда, кішкене ұжымдарда Web
беттерімен айналысудан қашқақтамайды. Осы мекемелер сияқты Web беттерінде
қолданылған мүмкіншіліктерді біз де қолдана аламыз.
Аппаратуралар мен программалық құралдардың жетілуі Web бетін кез-
келген қолданушы құрастыра алатын және қолдана алатын дәрежеге жеткізді.
Бұрын тек арнайы дайындығы бар, таңдаулы мамандар ғана Web беттерімен жұмыс
істей алса, қазір кез-келген қолданушының қолынан келеді.
Бірақ кейбір қолданушылар көп таралған әдебиеттерде қарастырылған Web
мүмкіндіктері туралы мәліметпен шектеле алмайды. Оларға Интернетте ақпарат
іздеу, е-mail де хат алмасу, Web бетіндегі файлдармен жұмыс істеу
жеткіліксіз. Олар Web беттерінің қалай өзара байланысатынын, қандай тіл
қолданатынын, бір-бірінен айырмашылықтарын да белгісі келеді. Жоғары немесе
орта арнайы техникалық білімі бар мамандар Web бетінің негізін де білгісі
келетіні таң қалатын жағдай емес.
Сондықтан, біздің университетте информатика мамандықтары студенттері
үшін Web беттерін құрудың арнайы курсын еңзігу қажеттілігі туындады.
Дипломдық жұмыста осы арнайы курстың мақсаты, міндеті, мазмұны анықталады.
Қазақ тіліндегі Web туралы әдебиеттер жоқ болғандықтан, біз осы жұмыта Web
торабы мен қызметі, түрлері туралы толық тоқталып отырмыз. Себебі, көптеген
оқытушылар лабораториялық жұмыстарда Web торабы туралы көптеген қызықты
мәселелерді оқытып-үйрете алатын болса да, теориялық материалдардың
жетіспеушілігі салдарынан лекция оқы қиындыққа соқтырады.
Міне, осы аталған себептер осы дипломдық жұмыстың мақсатын,
актуальдығын, қажеттілігін, міндетін және мазмұнын анықтйды.

І тарау. “Web торабын құруды оқыту тақырыбы”

1.1. Тақырыптың мақсаты мен міндеті

“Web торабын құруды оқыу тақырыбының” міндеті – студенттерді болашақ
профессиональды қызметі кезінде желілік компьютерлік технологияларды
пайдалана алуына дайындау.
Тақырыптың негізгі міндеттері:
• Студенттердің Интернет және WWW түсінігін меңгеруі;
• Программалық құрылым архитектурасымен танысу;
• Желі ортасында жұмыс істеуді үйрену.

1.2. Тақырып мазмұны

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

Кіріспе

Дербес компьютерде WWW-нің өзара қызмет көрсету қажеттілігі,
мәліметтерді таратудың рөлі. Мәліметтерді компьютерлер арасында тарату
кезінде шешілуі керек мәселелер. Тақырыптың мақсаты, міндеттері,
қолданылған әдебиеттер.

І тарау. Internet бүкіләлемдік компьютер желісі.

1. Іnternet-тің негізгі түсініктері.
Internet желісінің құрылуы мен мәні, жұмыс істеуі. ТСРІР протоколы,
адрестену мен маршрутталу функциялары. Internet-ке қосылу түрлері.

2 тарау. WWW-нің құрылымдық және жұмыс істеу теориясы.

2.1. Web бетінің құрылымы. HTML тілі. Web бетін HTML тілінде құрау.
2.2. Web бетін құрастырушы редакторлар. Олардың түрлері.
2.3. Лабораториялық жұмыстар.

1.1.3. Лабораториялық жұмыстар.
“Windows операциялық жүйесінің желілік мүмкіндіктері”

№ 1 лабораториялық жұмыс

Желіде жұмыс істеу:
• Internet-ке кіру командалары.
• Internet жүйесінің ресурстарын қолдану: файлдарды өңдеу, принтерімен
баспаға басу, файлдарды өз дискісіне көшіру.

№ 2 лабораториялық жұмыс

• Web бетінің құрылымымен танысу, HTML тегтері, атқаратын қызметтері,
орналасуы.
• Web бетін құрастырушы редакторлармен танысу. Олардың түрлері, атқаратын
қызметтері.

№ 3 лабораториялық жұмыс

• HTML тілінде Web бетін құрастыру жоспар үлгісі.
• Web бетін құрастырушы редактор арқылы Web бетін құрастыру.

1.1.4. Лабораториялық жұмыстар.

№ Тақырыбы Сағат саны
л п
1 Internet бүкіләлемдік компьютер желісі. 2 2
Internet желісінің құрылуы мен мәні, жұмыс
істеуі.
ТСРІР протоколы, адрестену мен маршрутталу
функциялары. Internet-ке қосылу түрлері.
2 WWW-нің құрылымдық және істеу теориясы. Web 3 4
бетінің құрылымы. HTML тілі. Web бетін HTML
тілінде құрау.
3 Web бетін құрастырушы редакторлар. Олардың 3 4
түрлері. FrontPage арқылы Web бетін құрау.
Барлығы 18

2 тарау Web бетінің құрылымы

2.1. HTML тілі

Егер біз World Wide Web – бұл Интернет десек қателескен болар едік.
WWW немесе жай ғана Web, ол ақпаратты көрсету және алу жүйесі болып
табылады. Қазіргі уақытта WWW Интернеттің негізі болып табылады. Сондықтан
HTML Интернетті құрайтын құжаттар Web беттері деп аталады да ол олардың
тақырыптың жиынтығы Web торабы деп аталады.
Егер біз Web беттерін салыстырсақ олардың ұқсастығын табамыз. Бұл
беттердің белгілі бір тәртіппен жасалатындығын көрсетеді. Біз Web бетінің
құрылымын көруіміз үшін оның тег-тарының қойылу тізімін көруіміз керек.
HTML-тілі – Интернет пен Интернеттегі ақпарат түсінігінің негізі болып
табылады, және оны білу Web бетін жасау үшін өте қажет.
HTML – белгілі – бір белгілерден құралған гипертекстік тіл бұл арнайы
бі белгілер арқылы құралған *. HTML жалғаулары файлдарында текстік ақпарат
жасап басқа файлдарға гипер сілтеме жасайды деген түсінік. Сонымен бірге
белгілер URL графикалық видео және аудио файлдарын көрсету үшін
қолданылады.
HTML-мен кодалған файлды қосқанда тегтер браузер арқылы оқылады да
арнайы текстерден және түрлі объекттерден тұратын бетті көрсетеді. Ол
браузер арқылы көрсетіледі. Браузер – гипертекстік құжаттерді көрсетеін
программа.
Тег – ол HTML тіліндегі белгілі бір командаларды орындайтын сөз.
COMMENT comment бетке анықтама.
HTML Ең сыртқы тег.
HEAD
TITLE title Беттің құрылымы title
STYLE H2 {front – family: Arbat;}
CODE {font – family: Arbat;}
head
BODY bgcolor = #FFFFFF
A name = “” a
A href = “#bottom” соңына a өту P
Өту A href = “#S001”B сілтеме 1-ге b a P
P
H2 Тақырып2 h2
H3 Тақырып3 h3
H4 Тақырып4 h4
H5 Тақырып5 h5
H6 Тақырып6 h6
HR
A name = “bottom” a P
A href = “top” a
body
html
COMMENT comment
Түсініктеме тексті. Браузер comment-тің ішіне қойылған сөзді
елемейдлі. COMMENT Web бетінің кодтарының кез-келген жеріне орналаса алады.
Comment-ті қоюдың басқа түрлері бар.
Мысалы:
!_ _ комменарий жолы _ _
!_ _ комменарий комментария емес - - қайтадан комментарий _ _ .
Мұндай комментариялар ішіне тег-тардыда орналастырса болады. Оларды броузер
елемейді.
HTML html.
Бұл тег ең сыртқы тег, себебі бүкіл Web беті осы тегтің бастапқысы
мен соңғысының аралығында жатыр. Барлық гипертексттер html тегмен
аяқталады.
HEADhead
Бұл Web бетінің бірінші бөлігі ол тақырып аймағын қамтиды. HEAD –
HTML сияқты беттің жалпы құрылысын қалыптастырады.
TITLE title Web бетінің тақырыбы орналастырылатын элемент. Бұл
тегте орналасқан тект жолы құжатке емес, браузерде орналасады. Бұдан
браузерде тақырып болып орналасуы WWW-де іздеуді ұйымдастыруда
қолданылады.
Сондықтан Web – бетін құрастырушылар TITLE ішіндегі текстік жолдар
ұзақ болмауын қадағалауы қажет және ол құжаттің не үшін керек екенін
білдіруі орынды.
STYLE style Web бетінің кейбір элементтерінің жазылу стилін
анықтайды. Жоғарыда келтірілген мысалда H2 және CODE элементтеріне шрифт
келтірілген. Негізінен әрбір элементке қолдану стилі берілген сондықтан
STYLE-ді қолдану міндетті емес.
META. Бұл элемент ақпараттық қызметші сөздерден тұрады, олар Web
бетін көргенде экранға шықпайды. Оның ішінде кәдімгі түсініктегі текст
болмайды, біту тегі жоқ. Мета екі бөліктен тұрады.
Бірінші мәліметтер типін екіншісі мазмұнын айқындайды.
Мысалдар:
қолдану мерзімі құжат үшін:
name = “Expires” content = “Data”
электрондық почта адресі:
name = “Reply-to” content = “Имя @ Адрес”
BODY body. Бұл элементке Web бетін айқындайтын гипертекст
орналастырылады. Бұл құжаттің, беттің авторының өзі құрастырған және
броузер арқылы шығатын бөлігі. Бұл элементтің соңғы тегін HTML – файлдың
соңында іздеу керек. Body-дің ішінде Web беттің дизайны үшін қолданылатын
бүкіл элементтерді орналастыруға болады. Бұл тегіз бірде-бір бет
құрылмайды.
Дизайн үшін ең пайдалы элементердің бірі реңді айқындаушы элемент.
Оның пайда болуын WWW үшін кішігірім революция ретінде қабылдауға болады,
өйткені рең айқындаушы элемент арқылы бірдей сұр түстегі Web беттері түрлі-
түсті болып құлпырды:
Background=”реңнің файлына апаратын Жол”
Реңді өңдеудің жолы оның түсін білдіру:
Bgcolor=”#RRGGBB”
Реңнің түсі екі разрядты он алтының сандарымен, қызыл, жасыл және көк
түстерін қолдану арқылы алынады.
Беттің түсі өзгеретіндіктен, текстің түсінде өзгертуге мүмкіндік болу
керек. Ол үшін келесі элемент қолданылады:
Text=”#RRGGBB”
Гиперсілтеме түсі үшін келесі элемент берілген:
link=”#RRGGBB”
Сол сияқты қолданылған гиперсілтемеге түс білдіретін мына элемент
қолданылады.
vlink=”#RRGGBB”
Body ішіндегі гипертекст еркін түрде қойынады, оның қойылу тәртібін
Web беттің қай бағытта екіндігі және құрастырушының фантазиясы біледі:
A a
HTML – құжаті өте үлкен болған жағдайда қолданушыға қалған бетіне
тез өту мүмкіндігі көрсетілуі қажет болады. Бұл үшін гиперсілтеме тетігін
қолдануға болады. Текстің керекті жерлерінде белгі қою өтілетін жерді
білдіреді:
A name=”Метка” a
Құжаттің ішінде өтілу былай:
p Переход к A href=”Метка” метке a p.
Осындай бірнеше жол жиынтығын беттің басында немесе соңында
қолдануға болады.
BASE Сілтемеларға адрес көрсететін элемент. BASE href=”http:
компьютер путь1“.

2.2. Гипертекстік сілтемелер

Сілтемесіз Web беті барса қайтпас аралға ұқсас клген адам басқа
аралдарға өте алмайды. Егер сізің планыңыз келген адамдарды робинзонға
айналдыру болмаса бірнеше басқа Web беттеріне сілтеме жасап қою керек. Web
бетіндегі гиперсілтемелер WWW-нің негізгі мүмкіншіліктерінің бірі.
Гиперсілтеме жасауға мүмкіндік беретін ең керекті элементтердің
бірі A мынандай түрлерде қолданылады:
• Текст A href=”Сілтеменің адресі” Сілтемені жіберетін текст a.
Жергілікті Web беттеріне.
• A href =”Сілтеменің адресі”
IMG scr=”Суретке сілтемені”a
Бірінші гиперсілтеме текстің ішінде қолданылған кезде. Ол
Интернетке, дискдегі файлға немесе беттегі белгіге нұсқайды. Қолданушыға А
элементінің ішіндегі сілтемені жіберетін текст көрінеді. Гиперсілтеме жасау
үшін соған басылады.
Екінші түрінде гиперсілтемені белгілі бір бөлігі сурет болған кезде
қолданылады. Егер сілтемені дискідегі суретке көрсетсе онда ол міндетті
түрде “file” сөзінен басталуы керек.
file: Duck: Файлға апаратын жол
немесе
file: Duck: Файлға апаратын жол
Гиперсілтемені электрондық адреске көрсетке кезде ол жаңа құжатқа
өтуді емес, көрсетілген адреске хат жіберуді көздейді. Мұндай сілтемені
беттің авторымен немесе Web – master-мен байланыс үшін қолданылады.
Сондықтан оны беттің соңына орналастырады. Мысалы:
A href =”mailto: Ardajan @ ramber.ru” A href =”mailto: WW
Ardajan @ mail.ru”
Сурет бойынша сілтемелерді орналастыру.
Үлкен бір суретті әрбір жеріне сілтемелерді орналастыру арқыы үлкен
графикалық меню жазауыңызға болады.
Суретке сілтеме IMG тегі арқылы келесі түрде орналастырылады.
IMG SRC=” url ” USEMAP =” url # map_name ”
USEMAP map_name арқылы сілтеме жасалынатын жерді көрсетеді.
Егер URL көретілмесе, map – name-ді іздеу ағымдағы құжатқа
жүргізіледі.
Схеманың коды былай көрсетілуі мүмкін
MAP_NAME = “map_name”
AREA [SHAPE = “shape”] COORDS=”x, y,...”
[HREF = “referece”] [NOHREF]
MAP
Келесі тегтер қолданылады:
AREA SHAPE және COORDS
SHAPE аудан формасы. Суретте ауданды былай белгілеуге болады:
• default - стандартты форма;
• reet - тікбұрышты;
• circle - домалақ
• poly - көпбұрышты

COORDS
Аудан коэффиценті пикселдермен берілген. Санақ нөлден басталады.
Домалақты 3-координата болады. Тікбұрышты – 4 ол көпбұрыштың әрбір
бұрышының координатын беру керек. Мысалы, ауданы 50-ге 50 пикселі болса,
былайша белгілейміз.
AREA COORDS =”0, 0, 54, 54” ...
HREF “url”

NOHREF]
Суреттің бұл ауданында сілтеме жоқ екенін баяндайды HREF берілмесе
жұмыс істейді.
MAP - Суретте сілтеме жасауды аяқтау.

Фреймдер

HTML-ға фреймдер технологиясы бір терезеде бірнеше гипермәтіндік
құжатты көру мүмкіндігін береді. Бір фрейм жалғыз құжатты көрсетеді.
Фрейм жасау.
Фрейм жасау Frameset тегі арқылы жасалады да бұл кезде body тегі
қолданылмайды. Frameset сол фрейм жасауды аяқтайды.

Фреймді айқындау.
Тег FRAME SRC = “Name 1” бірінші фреймді айқындайды. Оған белгілі
бір ат беріледі. Екінші фрейм FRAME SRC = “Name 2” NAME = Name” .

Фреймнің қасиеті.
Тег FRAMESET COL =”N1,N2...”. Фреймдердің қаншау екенін айқындайды және
олардың көлемін беруге болады.
Фрейм тегнің атрибуттары басқаларында өте көп. Мынандай атрибуттар :
NAME =
Фреймнің аты.
MARGIWIDTH =
Горизонталдық бос орын 1-ден 6-ға дейін фреймнен оның шекарасынан
қояды.
MARGIWIDTH
Вертикалдық бос орын 1-ден 6-ға дейін фреймнен оның шекарасынан
қояды.
SCROLLING =
Фреймді айналдыру жолағы SCROLLING = YES арқылы жүргізу белгісін
қоюға болады, SCROLLING = NO арқылы жүргізу белгісі жоқ екенін баяндалады.
SCROLLING = AUTO жүргізу белгісі керек болған жағдайда қойылады.
SRC =
Бұл фрейм үшін гипермәтіндік құжат береді.
TARGET = NAME
Фреймге NAME атында сілтеме ашу.
HTML құжатындағы формалар.
Кейбір WWW броузерлар арнайы формсалар толтырылған соң қолданушыларға
WWW серверіңізде кейбір жұмыстарды істеуіне мүмкіндік береді. Форма Wеb
броузер арқылы оқығанда арнайы экрандық элемент GUI, яғни нәтиже алаңы
checkboxes, radiobuttons сатылы меню тізбектер кнопкалар және т.б.
қолданушы форманы толтырып SUBMIT кнопкасын басқанда қолданушының еңгізген
ақпараты НТТР серверге жіберіледі.

2.3. HTML-сандарты бойынша Wеb бетін құрастыру

Тақырыптар.
Тақырып жазу үшін H1 h1 тегтері қолданылады. Тақырыпты HTML
стандарты бойынша 6 түрі болады. Бірінші дәрежедегі тақырып ең үлкені, ал
алтыншы дәрежедегі тақырып ең кішісі болады. Мысалы:
H2 ALIGN = centerleftright Тақырып тексті h2
Бұл жерде ALIGN текстін бетте алатын орнын көрсетеді.

Тексті форматтау және стилін өзгерту.
Текст – Wеb бетінің белгілі бір айқындушыны керек етпейтін жалғыз
элементі басқаша айтқанда символдар текстік қор ретінде ғана түсіндірілген.
Бірақ тексті форматтау үшін қолданылатын көптеген элементтер бар.
P p (paragraph)
Абзац элементі - ең пайдалы элементтердің бірі. Р элементі алғашқы
абзацтың соның, ал келесісінің басын білдіретіндіктен бастапқы тегті ғана
қолдануға мүмкіндік береді. Ал соңғы тегті абзацтың біткенін көрсету керек
болғанда қолдануға болады. ALIGN элементі Р-де де қолданылады.
BR
Жаңа жолдан бастауға мүмкіндік береді. Ол тек ғана бастапқы тегтен
ғана турады. Ол қойылған жерден бастап алдыңғы текст аяқталады да келесі
текст жаңа жолдан басталады.
NOBR nobr
Бұл элемент алдыңғы элементке қарама-қарсы, яғни керісінше істейді.
Оның тегтерінің арасындағы текст бір жолға ғана жазылады, сондықтан оны
көру үшін горизонталдық жол көрсеткіш қолданылады.
PRE pre
Тексттің алдын-ала форматталғанын білдіреді. Қолданушынң дайындаған
түрінде көрсетіледі. Бұл элементті форматталса мағынасы бұзылатын тексттік
құжаттарға қолданған дұрыс.
CENTER center
Элемент текстті центрлеу үшін қолданылады.
B b
Тексттің қалың түрдегі шрифтпен шығырады, өте танымал элемент.
BIG big
Үлкейтетін шрифт.
SMALL small
Кішірейтетін шрифт.
I i
Текстті курсив түрінде шығарады.
U u
Асты сызылған шрифт.
SUBsub
Төмендегі индекс жазушы.
SUPsup
Жоғарғы индекс жазушы.
Мысалы:
Кәдімгі текст
SUB элементі
SUP элементі
Кәдімгі текст
PLAINTEXT plaintext
Бұл элемент HTML элементтерін текст ретінде қолданға жазылады.
PLAINTEXT-тің ішіндегі барлық элементтер браузер арқылы жай ғана
символ ретінде оқылады. HTML жайындағы сұрақтарды талқылауға ыңғайлы
элемент.
FONT font
Шрифттің түрін, көлемін және түсін айқындайды. Мысалы, шрифттің
абсолюттік көлемі size арқылы білдіріледі.
Size = Шрифттің абсолюттік көлемі.
Шрифттің түсін білдіретін:
Color = “Түс”
Шрифттің көрінісін FACE арқылы айқындайды:
FACE = “Times New Roman”
FACE = “Arial”

Тексттің ерекшеленуі.
Текст HTML құжатында келесі түрлерімен ерекшелінеді.
cite - цитата cite
code- программалық код code
dfn- айқындалу dfn
kbd- клавиатурадан ... жалғасы

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