СМЖ-нің 3 деңгейлі құжаты |
Н 10/1.140-2008 |
|
Әдістемелік нұсқау |
Баспа 2 |
|
Енгізу күні 05.05.2008 |
World wide web. Гипермәтіндік белгілеу тілінің көмегімен www беттерін жасау.
Бүгінгі таңда Интернет әртүрлі білім салалары бойынша жан-жақты жинақталған ақпарат көзі болып табылады. Интернет серверлерінен алынған құжаттар гипермәтіндік форматта дайындалған. Құжаттарды тасымалдаумен шұғылданатын Интернеттің қызмет түрін World Wide Web деп атайды. Бұл сөздің аудармасы Бүкіл дүниежүзілік өрмек дегенді білдіреді. World Wide Web - қазір Интернеттің ең көп тараған қызметі түрі болып табылады. Осы терминмен немесе WWW ортасы деп өзара гипермәтіндік байланысқа түскен Web-құжаттар жиынтығын атайды.
Интернетке тұрақты қосылып тұрған компьютерлерді Web-сервер деп атайды. WWW-дің құжаттары Web-серверлерде сақталады. WWW ортасы дегеніміз Web-серверде сақталған өзара байланысқан электрондық құжаттардан тұратын ақпараттық кеңістік. Web-кеңістікті құрайтын жеке құжаттарды Web -беттер деп атайды. Тақырып бойынша топтастырылған Web-беттер Web-тораптар (жаргондық термині Web-сайт) деп аталады.
Web-сайт ақпаратты бет түрінде сақтайды. Әрбір осындай Web-бет HTML тілінде жазылған мәтіндік файл түрінде жазылуы тиіс. Броузер осы бетпен байланысқанда файлды негізге ала отырып бет түрін жасап шығарады.
Мұндай технология Web-беттердің мазмұнын пайдаланылып отырған броузердің типіне қарамастан өзгеріссіз бейнелеуге мүмкіндік береді.
Қазіргі кезеңде Web-құжаттарды құрудың көптеген программалық өнімдері бар. Олар HTML-файлдағы жолдық мәтіндерді теру қажеттілігінен арылтады. Бірақ біздің мақсатымызда кез келген Блокнот не WordPad мәтін редакторлардың болуы жеткілікті.
Сонымен, Web- беттерді дайындаудың стандартты процедурасының маңызы мынада: HTML-файлының мәтінін қолда бар кез келген мәтін редакторында теріп алып .html кеңейтілуімен сақтаймыз. Сонан соң файлды кез–келген Интернет - броузердің көмегімен ашып алып өзіміз құрған бетті тамашалаймыз.
HTML тілінің жалпы құрылымымен танысайық. Бұл тілде жазылған кез-келген құжат беттің мәтін жолдарынан және басқару символдары – тэгтерден тұрады. HTML-дің барлық тэгтері міндетті түрде бұрыштық жақшаларға < > алынады. Ережеге сай бастапқы тэг және аяқтауыш тэгтер пайдаланылады.
Мысалы кез-келген HTML-құжаттың бастапқы, аяқтауыш тэгтері <HTML> және </HTML> жазылады. Көрініп тұрғандай, аяқтауыш тэг бастапқыдан слэштің (/) келуімен ерекшелінеді.
№1 Зертханалық жұмыс
Тақырыбы: HTML парақтың интерактивті компоненттері. Қарапайым HTML файлын құру.
Мақсаты: Қарапайым Web-беттерін дайындауды үйрету.
1. HTML-құжат –бұл аты .html қосымшасы бар қарапайым мәтіндік құжат. Мына, HTML-құжатты Блокнотта теріп шығыңыздар:
<html>
<head> Менің алғашқы парағым
<title> 1-ші мысал <\title>
<\head>
<body>
<H1> Сәлем! </H1>
Бұл HTML-құжаттың ең қарапайым мысалы.
<P> Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп типін де фон түсіне де өзгертілетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады.
<\P>
<\body>
<\html>
Енді осы терілген құжатты, мысалы, TI.html деген атпен дискіде сақтау керек. Сонда оның белгішесі өзгеріп Интернетте көруге болатын түрге айналады.
Бұл
TI.html
файлын бір мезетте Internet
Explorer-де
және Блокнотта ашып,
оларды түрлендіріп көруге болады.
Ол
үшін
файлды интернет explorer–де
ТүрНТМL
түрінде (Видв
виде
НТМL)
командаларын
орындау қажет. Сонда файлдың алғашқы
мәтіні Блокнотта ашылып, оны түрлендіріп
өзгерту мүмкіндігіне ие боламыз. Қажетті
өзгертулер енгізіп оны қайта, сақтап,
осы өзгертулердің HTML-
құжатта іске асқанын көру үшін, Internet
Explorer-де
ТүрЖаңалау
(ВидОбновить)
командасын орындау керек немесе Саймандар
тақтасындағы
батырмасын
басса болғаны.
Сонымен кез келген программа мәтінін Блокнотта тергеннен кейін, оған өз қалауыңызша ат беріп, оны *.һtml түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын тышқанмен екі шерту керек немесе Internet Explorer-де оны ашу қажет.
2. Програманы оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML – файлдардағы жолдың соңы символын және көптеген бос орындарды есепке алмайды. Сондықтан біздің мысалымыз мынадай түрде де жазылуы мүмкін:
3. Бұл мысалдағы <html> … </html> белгілерінің ортасына HTML – құжаты жазылады, яғни <html> құжаттың басын, ал </html> оның аяқталғанын көрсетеді.
<head> … </head> - бұл қос белгі құжат тақырыбының басын және соңын білдіреді. Бұл бөлімде құжат тақырыбынан басқа әртүрлі қызмет атқаратын мәліметтер (төмендегі <title> белгісін қараңыз) жазылуы мүмкін, олар жайлы біз кейінірек айтамыз.
<title>... </title>
<title> және </title> белгілерінің арасында жазылған сөздерді браузер құжаттың аты деп түсінеді де, ол терезе тақырыбында көрсетіледі. Осы құжатты принтер арқылы баспадан шығарғанда, браузер оны әр парақтың сол жақ жоғары бұрышына жазып отырады. Атаудың өте ұзын болмауы дұрыс, әдетте ол 64 символдан аспауы керек.
<body> … </body> - бұл қос белгі HTML – құжаттың негізгі мазмұндық бөлігінің басын және соңын білдіреді.
<H1> … </H1> - <H6> … </H6>
<Hi> белгісі (мұндағы і – 1 –ден 6 –ға дейінгі бүтін сан) алты түрлі сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып – ең ірісі, алтыншы сатыдағы – ең кішісі.
<P> … </P> немесе <P> бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы <P> және </P> белгілерінің арасына жазылғандардың барлығы бір абзац ретінде қабылданады.
<Hi> және <P> белгілерінің қосымша ALIGN (оқылуы “элайн”, ағылшынның “туралау” деген сөзінен) атрибуты болуы мүмкін.
Мысалы:
<H1 ALIGN=CENTER> Тақырыпты ортаға жылжыту </H1> немесе <P ALIGN=RIGHT> Абзацты оң жақ шетке жақындатып туралау түрі </P>
4. Үйренгеніміздің барлығын тиянақтап, төменгі 2-мысалды орындайық:
Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ құрастыруға мүмкіндік бар.
<html> <head> <title> 2-мысал</title> </head>
<body>
<H1 ALIGN=CENTER> сәлем! </H1>
<H2> бұл HTML-құжаттың сәл күрделірек мысалы </h2>
<P> Енді біз абзацты, тек сол жақ шетке ғана туралап жазбай,
<P ALIGN=CENTER>ортаға қарай</P>
<P ALIGN=RIGHT> немесе оң жақ шетке де туралауға болатындығын білеміз.</P>
</body>
</html>
5. Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз етеміз. Жаңа жолға көшу белгісінен бастайық.
<BR> белгі абзацты бөлмей, келесі сөзді жаңа жолға көшіру керек болғанда қолданылады. Өлең жазуға өте ыңғайлы. Өлеңнен мысал келтірейік:
<html> <head> <title> 3-мысал </title> </head>
<body>
<H1> Өлең </H2>
<H2> Абай </H2>
<P> Айттым сәлем, Қаламқас <BR>
Саған құрбан мал мен бас. <BR>
Сағынғаннан сені ойлап, <BR>
Келер көзге ыстық жас. </P>
<P> Көзімнің қарасы, <BR>
Көңілімнің санасы. <BR>
Ғашықтық жарасы </P>
</body>
<BODY>… </BODY> тэгтерініњ ортасында кµптеген атрибуттар, яѓни параметрлер болады. Олардыњ єрќайсысы ќ±жаттыњ фонын, єріптерінің т‰сін, гиперсілтемелер т‰сін, т.б. аныќтайды. Б±л тэгтіњ негізгі атрибуттары: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK жєне ALINK.
<BODY 1-параметр=мәні 2-параметр=мәні
3-параметр=мәні…>құжаттың негізгі тұлғасы… </BODY>
Параметрлер тізімін толық берудің қажеті жоқ, көбінесе олардың бірде біреуі болмауы мүмкін, мұндайда олардың алдын ала (үнсіз) келісім бойынша бекітілген
2. BGCOLOR – құжаттың жалпы мәтінінің фоны түсін анықтайды, егер ол көрсетілмесе, ақ түс қолданылады. Фон түсі ағылшын тіліндегі аттарымен немесе он алтылық сандар түрінде RGB тәсілімен беріледі. Олар жайында кейінірек айтылады.
Мысалы:
<body bgcolor=“yellow”>мұнда фон сары түсті болады.
TEXT- мәтін әріптерінің түсін анықтайды, егер ол жазылмаса, келісім бойынша қара түс қабылданған. Фон түсін өзгерткенде соған үйлесімді символдар түсі бекітіледі. Бұл да ағылшын тіліндегі аттарымен немесе он алтылық сандар түрінде rgb тәсілімен беріледі.
LINК – гипермәтіндік сілтеме ретінде қабылданған сөз тіркесінің түсін белгілейді. Егер көрсетілмесе ол көк түс болып саналады.
VLINR - пайдаланылған гипермәтіндік сілтеме түсін анықтайды. Келісім бойынша ол қызылқоңыр түс болып саналады.
ALINK-ГИПЕРМӘТІНДІК сілтемелі курсор көрсетіп тұрған кездегі оның түсін белгілейді. Бұл параметр өте сирек өзгертіледі.
BACKGROUND - мәтіннің фонында орналасатын суретті анықтайды, ол түсқағаз рөлін атқарады. Суреттік файлдың типі gif немесе jpg болуы тиіс.
Суреттің адресі көрсетілсе, ол интернет желісінен тауып алынады.
Мысалы:
<body bgcolor=lighteellow text=red ink=purpplt vlink= mfroon flink=fuschef background=“face.jpg”>
2. HTML Тілінде түрлі түстер он алтылық сандар түррінде RGB тәсілмен берілуі де (COLOR= “#COFFCO”), мүмкін, оның мүмкіндігі өте мол. Мұндағы алғашқы екі сан қызыл түс бөлігін, келесі екі сан-жасыл түс бөлігін, соңғы екі сан көк түс бөлігін анықтайды. Жоғарыдағы көптеген параметрлер түсті пайдаланады, олар ағылшын тіліндегі негізгі он алты түс атымен немесе солардың кодтарымен төмендегідей түрде беріледі.
Black=<<#000000>> қара Silve=<<#COCOCO>>күміс түсті Gray=<<#808080>> сұр White=<<#FFFFF>>ақ Maroon=<<#80000>> қызылкүрең Purple=<# 800080> күлгін Red=<#FF00FF> қызғыш
|
Green=<<#008000>> жасыл Lime=<<#OOFFOO>> лимон түсті Olive=<<#808000>> сары Yellow=<<#FFFFOO>> САРЫ Navy=<<#000080>> қаракөк Blue=<<#OOOOFF>>КӨГІЛДІР Teal=<<#008080>> шай түсті Aqua=<<#OOFFFF>> КӨК |
</html> <HR> белгісі көлденең сызық сызады. Бұл белгінің қосымша SIZE (Сызықтың пиксельмен берілген қалыңдығын анықтайды) және WIDH (экранның еніне қатысты, сызықтың пайызбен берілген ұзындығын анықтайды) атрибуттары бар. 4 - мысалда көлденең сызықтардың кішігірім жинағы берілген.
<HTML>
<HEAD>
<title>Сызықтар</title>
</HEAD>
<BODY>
<H1>Бірнеше көлденең сызықтар:</H1>
<HR COLOR=RED SIZE=16 WIDTH=100%><BR>
<HR COLOR=GREN SIZE=8 WIDTH=75%><BR>
<HR COLOR=BLUE SIZE=4 WIDTH=50%><BR>
<HR COLOR=BLACK SIZE=2 WIDTH=25%><BR>
</BODY>
</HTML>