Құжат тақырыбы және денесі.

Интернет  сөзі  Бүкіләлемдік  компьтерлік  желі  дегенді  білдіреді.   Қазіргі  уақытта  Интернет  бірнеше  қызметтерді  атқарады:  электрондық  пошта,  WWW (бүкіләлемдік  өрмек),    IRC ( Internet  Relay  Chat – нақты  уақыт  режимінде  бірнеше  адамдардың  тікелей  бір – бірімен  араласуы),   IRG  (берілген  моментте  Интернетке қосылған  адамның  желідегі   IR  адресін  іздеуге  арналған  қызмет), файлдарлы  тасымалдау  қызметі  (FTP),  телеконференция  қызметі  (USENT).

Интернетке  жұмыс  жасау  үшін  мыналар  қажет:

©      Бүкіләлемдік  желі  түйіндерінің  біреуіне  компьютерді  қосу;

©      IP адресті   алу;

©      Интернет   қызметінің   қолдануға  болатын  программа – клиент  қызметінің  программалық  қамтамасыздандыруын  құру  және  қайтадан  күйге  келтіру.

Өз  түйіндеріне  қосуға  мүмкіндік  беретін  және   IP – адресін   белгілейтін     мекемелер  Интернет  қызметін  тасымалдаушылар (сервис - провайдер)   деп  аталады.  Интернетке  қосылу белгіленген  немесе  коммутативті  болуы мүмкін.  Белгіленген  қосылу  жаңа  немесе  дайын  физикалық  сызықтарының   (кабельдік,  радиоканал,  спутниктік  канал)   орнын   анықтайды.  Оны  көп  көлемді  берілгендерді  тасымалдауды қажет  ететін   мекемелер  және  кәсіпорындар   қолданады.  Коммутативті   біріктіру уақытша  болады,  арнайы  байланыс  сызығын  қажет  етпейді  және  телефон  желісі   арқылы жүргізілуі  мүмкін.  Коммутацияны   телефон  номерін  теру  кезіндегі  сигнал  бойынша  АТС  орындайды.  Интернетке  телефон  желісі  арқылы   қосылу  үшін   ақпараттарды   цифрлық  түрге   алмастыру  үшін   қолданылатын   арнайы  құрылғы - модем  керек.

Модемдер  сыртқы  және  ішкі  болып  екіге  болінеді.   Бүгінде  Интернет білім  алудың  әртүрлі  салаларында  әржақты  ақпараттардың  түпнұсқасы  ретінде  қолданылады. Құжаттарды  беруді  басқаратын  Интернет   қызметін  World  Wide   Web  деп  атайды.   WWW   құжаттары  Интернетке    тұрақты  түрде  қосылатын  компьютерлерде -   Web - серверлерде  сақталады.  Web – серверлерде  бөлек  құжат  емес,   өзара  байланысқан  құжаттардың  тобы  орналасады.  Мұндай топ   Web – түйінді  (Web- сайт)  береді.  Дайын  материалдардың   Web- сайтта  орналасуы  Web – басылым  немесе  Web – публикация   деп  атайды.  WWW – дағы  жеке  құжат  Web – парақ  деп  аталады.  Бұл  текстен,  графикалық   иллюстрациялардан  мультимедиялық  обьектілерден    тұратын   құжаттардың   жиынтығы.   Web – парақты құру  үшін  HTML  ( Hypertext   Markup language – гипертексті  бөлу  тілі)    тілі  қолданылады,   яғни  құжатқа қойылатын  тегтердің   көмегімен  құжаттың  логикалық   құрылысын   сипаттайды,   құжатты  форматтауды   және  обьектілерді   қоюды  басқарады. WWW  айырмашылығынан   ерекшеліктері   тақырыбы   бойынша   байланысты,  адресі  анық  түрде  көрсетілмеген   бір  құжаттан   басқа   құжатқа   ауысу  жабдығының бар  болуы  болып    табылады .   Құжаттар  арасындағы  байланыс  гипертекстік  сілтеменің  көмегімен   жүргізіледі.   Гиперсілтеме – бұл  басқа да  Web – құжаттың  адресін ассосациялайтын  құжаттың  белгіленген  фрагменті  (текст  немесе  иллюстрация).

Гиперсілтемені   қолдану  WWW   боынша  нақты  бір  беттердің  адресін  қолданбай  тақырыбы  бойынша  табуды  ұйымдастырады.   Интернеттегі  құжаттар  электрондық  формада  бейнелеуге  арналған.  Нақты  компьтерде құжатты  форматтау  және   бейнелеу  броузер  деп   аталатын   арнайы  программаның   көмегімен   жүргізіледі.  Интернет  жағынан   WWW  қызметінің    жұмысын   серверлік   программалық    жабдық – Web – серверлер   қамтамасыз  етеді.     Клиент  жағынан   жұмыс  клиент  программалары    Web – броузерлермен   қамтамасыз   етіледі.   Ең  көп  қолданылатын   броузерлер  - Internet  Explorer,  Netscape   Navigator  және  Opera. Броузерлердің қасиеттері программадан   Сервис-Настройка   командасымен  және  Басқару   панелі  арқылы  орындалады.

Интернеттің  үш  функциясы  бар:    коммуникациялық,  ақпараттық  және  басқаратын WWW -  ақпараттыққа   жатады. Іздеу жүйесі арнайы Web  түйіндерден  тұрады .   Қолданушы  іздеу жүйесіне іздеуге қажетті Web-парақ туралы берілгендерді  хабарлайды,  ал іздеу  жүйесі сәйкес сұраныс бойынша бетке гиперсілтемелердің тізімін шығарады. Іздеу жүйесінің негізінде жұмыс жасайтын бірнеше модельдер  бар,  бірақ та іздеу көрсеткіштері мен іздеу каталогтарының орны ерекше зор .Іздеу каталогтары кітапханадағы  тақырыптың  каталогтар принципі тәрізді құрылған. Каталогқа назар аудара  отырып, біз оның негізгі бетінде  қысқартылған  ең ірі  тақырыптың,  категориялардың  тізімін көреміз. Бұл категория  тізіміндегі әрбір жазба –бұл гиперсілтеме. Оған басу берілген тақырып бойынша  толықтай іздеу  каталогының ақпарат беретін келесі бетін ашады. Тақырыпқа басуды жалғастыра отырып  нақты Web парақ тізіміне жетуге дейін болады. Іздеу көрсеткішінің іздеу каталогынан  айырмашылығы Web түйіндерді  кең көлемде қамтиды және кілттік сөз бойынша іздейді.

Интернетке өз материалдарыңызды орнату екі кезеңнен тұрады: материалдарды дайындау және оның Интернеттен жарық көруі. Материалдарды дайындау дегеніміз Интернетте қабылданған форматы бар құжаттарды, яғни HTML тілінде жазылған Web-беттерді құру. Материалдардың жарық көруі, яғни оған енуге рұқсат жасау оларды орнату үшін –серверден дискілік кеңістік алумен байланысты сұрақтарды шешкеннен кейін орындалады.

Жеке Web-құжаттар HTML тілін пайдаланады. HyperTextMarkupLanguage-гипермәтінді белгілеу тілі. Гипермәтін, яғни кеңейтілген мәтін қосымша элементтерге: сурет, сілтеме, ендірілген объектілерге ие. Белгілеу дегеніміз құжаттың мағыналық мазмұнынан оңай ажыратылатын және гипермәтінді жасау үшін қолданылатын арнайы кодтарды пайдалану. Бұл кодтарды пайдалану HTML тілінің ерекшелігімен анықталатын қатаң ережелерге бағынады.

Құжатты HTML тілінің құралдарымен сипаттау ерекшелігі бастапқы құжатты көрсетудің абсолют дәлдігін алудың мүмкін еместігімен байланысты. Құжат Интернетте кеңінен қолданылады деп есептеледі және сондықтан оны көрсету қалай ұйымдастырылатыны белгісіз: құжат  графикалық экранда көрсетілуі мүмкін, таза мәтін түрінде шығуы мүмкін немесе дыбысты синтездеу программаларымен “оқытылуы” мүмкін. HTML белгілеуі бұл жағдайлардың бәрінде көңілге алынуы керек. Сондықтан HTML тілі құжатты форматтау үшін емес, оның функционалды белгіленуі үшін арналған. Мысалы, құжаттар негізінен тақырыбымен басталады. Құжаттың  “тақырыбы болу” бөлігінің қасиеті – бұл форматтау ерекшелігі емес, оның мазмұнының сипаттамасы. Құжатты бейнелеу құралы (браузер) тақырып ретінде сипатталған құжат бөлігін көрсетудің өз әдісін таңдайды.

HTML 4.0 жаңа версиясы қазіргі уақытта құжатты функционалды белгілеу үшін қажет барлық құралдарды қамтитын HTML тілінің “соңғы” редакциясы ретінде қарастырылады. Әшекейлеу құралдарының және интерактілікті қамтамасыз ету құралдарының жетіспеуі сыртқы (HTML –ге қарағанда) құралдармен, мысалы стилдер тізімі және динамикалық сценарий, т.б. толықтырылады. Көптеген Web- түйіндер қандай да бір мәліметтер қорының мазмұны және қолданушының сұранысы негізінде Web-беттерді автоматты түрде генерациялайды. Бұндай элементтер қазіргі Web-беттердің стандартты компоненттері болып табылады.

HTML құжатының құрылымы

           HTML құжаты сол құжаттың негізгі мәтіні мен белгілі тегтер деп табылады. Сондықтан оны құрастыру үшін жай мәтіндік  редакторды, Windows ортасындағы блокнотты пайдалана беруге болады.

1. HTML құжатының кез-келгені <html> тегінен басталып  соған сәйкес жабылу </html>  тегімен аяқталады.
2. Осы екеуінің ортасында құжаттың тақырыптың бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады. Құжатың тақырыптық бөлігі <head> типтерінің ортасында тұруы, жалпы құжат туралы мәлімет береді. Әдетте бұл бөлікті <title> тегтерімен шектелетін құжаттың ресми атауы орналасады. Бұл атау терезе тақырыбында тұратын функцияның аты.
3. Жазылатын мәтін құжат тұлғaсы деп аталатын <body> </body> тегінің ортасында жазылады. Осы айтылған 4 тег HTML құжатының кез-келгенінде болуы тиіс.

Мысалы: <html> <head> <title> құжат тақырыбы </title>

</head>

<body>

бұл мәтін экранға шығады

</body>

</html>

 HTML-құжаттарды форматтау тәсілі

1. HTML тілі құжаттардың ішкі тақырыптарының көлеміне қарай 6 түрлі деңгейін жасай алады. Олар: <h1>…</h1>     <h6>…</h6> жалғасады.

2. Жаңа жолдан басталатын абзацтарды белгілеу үшін <p> тегі қолданылады. Бір абзацты жаппай жаңа абзацты бастап кетсек , алдыңғы абзац автоматты түрде жабылады. Сондықтан <p> тегін жаппаса да болады. HTML тілінде азат жолдан басталмайды, тек абзацтар арасында бір бос жол қалдырылып кетеді. Көбінесе абзацтарды анық етіп бөліп тұру  үшін көлденең горизонталь сызық қойылады. Көлденең сызық қою <hr> тегімен орналастырылады. Оның жабу тегі болмайды.

3. Сөз арасында қойылған бірнеше бос орынның тек біреуі ғана көрініп тұрады. Сол сияқты келесі қатарға көшіретін Enter пернесі де HTML тілінде ешбір әсер етпейді.

Егер абзац жасап бос жол қалдырмай жаңа жолға көшу қажет болса, онда жалғыз қолданатын <br> тегін пайдаланамыз.

HTML 4.0 нұсқасынан бастап кез-келген құжатты әдемілеп әшекейлеу ісін сол құжаттан бөлек жасау мүмкіндігі пайда болды. Алайда бұл концепция тек байқау сипатына ие болып отыр. Және оны көптеген броузерлер арқылы жасауға болмайды. Сол себепті HTML тілінде тек ғана тегтер бар.

1.Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <font> тегін пайдаланамыз. Бұл қосарланған тег оның ашылған және жабылған тегтер арасында орналасқан барлық мәтінді түрлендіруге болады. <font> тегінде қолдануға болатын  size=…., color=…, face=…,  тәрізді, 3 атрибутының ең болмағанда біреуі тұруы тиіс: 1-ші атрибуты әріптің мөлшерін тағайындайды. Әріптің алдын-ала берілетін 7 түрлі көлемі бар. Олар :1-7 сандар. Егер сан көрсетілмесе келісім бойынша 3-ке тең деп саналады. color=   - әріптің түсін таңдау мүмкіндігін береді. face=  – қаріп (шрифт) типін береді. Осы атрибуттың мәні компьютерде орнатылған қаріп атының біріне сәйкес келуі керек.

Мысалы: <body> Алдарыңызда

<font color=”yellow” face= arial size=”4”>

төртінші  мөлшермен arial типімен аталған сары түсті әріптер.

</font></body>

2. Осы параметрдің барлығын бүкіл құжат үшін бірден беру қажет болса, онда

<base font> бір ғана тег пайдаланылады. Бұл тегте  де жоғарыда көрсетілген атрибуттарды пайдаланылады. Олар  қаріп түрін, мөлшерін, түсін анықтайды.

3. Тегтердің тағы бір арнайы тобы қаріптің сызылымын өзгерту мүмкіндігін береді.

<b> және </b>    тегтері    араларында орналасатын мәтін қарайтылған  қаріпке ауысады.

<i> және </i>   тегтері қаріптерді   курсивпен  береді.

<u> және </u> тегтері мәтіндердің астын сызады , <s> және </s> тегтері белдерінен сызылған символдарды бейнелейді.

Мысалы:

<html>

<head> 

</head>

<body>

<base font size=5  face=”Arial kz ”>

негізгі қаріп Arial kz типінде 5-ші мөлшермен жазылған.

<p><font size=-2 face=”Times New Roman Kz ” color=”green”>

</font>

<p><b> қоюлану </b>

<p><i> курсивті </i>

<p><u> астын сызу </u>

<p><s> белінен сызу </s>

</body></html>

Тізімдер (номерлеу және маркерлеу)

Тізімдердің HTML тіліне енгізілуінің басты себебі мәтіндік редактордың тізімімен жұмыс істеу мүмкіндіктерінің мол болуы әсерінен деп айтуға болады. Тізім құрғанда оның жолдарын номерлеу немесе белгілеуді біртіндеп орындау қажет етілмейді. Бұл жұмысты программа өз міндетіне алады. Егер тізім жаңа жолмен толықтырылатын немесе оның бірі қысқартылатын болса, онда номерлеу реттілігінде автоматты түрде түзетіледі. Тізім номерленбей тек белгіленетін кезде әрбір жол алдына маркерлеу таңбалары, сызықшалар, дөңгелектер, төртбұрыштар, ромбы, т.б. қойылады. Осының нәтижесінде тізім оқуға ыңғайлы сипатқа ие болады. Тізім жасау үшін қолданатын тегтерді шартты түрде 2 топқа бөледі. Оның 1-іншісі  тізімнің жалпы көрінісін  анықтап  атрибуттың  сыртқы  белгілер , ал 2-іншісі оның құрылымын  қалыптастыратын ішкі белгілер. Соңғы ішкі белгілер үшін тек бір ғана ашылу тегі қолданылады. Тізім тегінің ең қарапайым түрі номерленбеген  белгілеу тізімі <UL> …..</UL> тегінің арасында орналасқан мәтін жолдары белгіленген тізім ретінде қабылданады. Мұнда әрбір белгіленетін мәтін жолын <LI>ішкі тегімен тастап отыру керек. Сонымен номерленбейтін тізімнің жазылу үлгісі мынадай:

<UL>

<LI> Тізімнің бірінші жолы

<LI> Тізімнің екінші жолы

<LI> Тізімнің соңғы жолы

Номерленген тізімдер.

Номерленген тізімдер алдыңғы тізімдер сияқты құрылады, тек әрбір жол алдына номер қойылады, яғни номерленген тізімдер сыртқы <OL> тегі болып келеді.

Мысалы:

<OL>                             1. Алма

<LI>   Алма                   2. Бақыт

<LI> Бақыт                   3. Назым

<LI> Назым

</OL>

Номерленген тізімнің әрбір жолы реттелген тәртіп бойынша араб немесе рим сандарын немесе латын алфавитінің әріптері таңбаланады. Ол таңбаларды өзгерту туре= « » атрибутымен көрсетіледі. Атрибут көрсетілмесе номерлер реттелген араб цифрымен көрсетіледі.

туре атрибутының мүмкін мәндері.

Атрибут мәндері	Номер таңбалары
Type=” 1”

Type=” i”

Type=” I”

Type=” a”

Type=” A”

1, 2, 3, 4.

i, i i, i i i

I, II, III, IV

a, b, c, d.

A, B, C, D.

  Анықтау тізімдері: Анықтаулары бар тізімдер.

Жоғарыдағыға қарағанда өзгешелеу тәсілмен жасалады <DL>  тегі арқылы

Мұнда <LI> тегі орнына <DT> термин тегі және оған қосымша <DD> терминді түсіндіру белгісі жазылады.

Мысалы:

 

<DL>

<DT> HTML термині гипертексті белгілеу тілі, ол тілді Тим Бернер Ли жасаған.

<DT> HTML құжаты

<DD>Аттары.HTM.болатын құжат түрі

</DL>

Мұндағы <DT>   <DD> тегтері <LI> тәрізді жабылмай малқы түрде жазылады.

 

Қабаттастырылған ішкі тізімдер.

Кез-келген тізім элементі басқа бір тізімнің ішінде орналасуы мүмкін .Бірақ мұндай тізімдерде жоспарлар құру немесе кітап мазмұндарын жасау сияқты өз орындары бар.Жалпы тізімдер мен қабаттастырылған ішкі тізімдерге мынадай мысал келтірейік.

<HTML> <HEAD> <TITLE> Мысал </TITLE> </HEAD>

<BODY>

<H1> HTML тізімдерінің түрлері </H1>

<DL>

<DT> номерленген тізімдер

<DD> номерленбеген тізімдер сол жақтан арнайы символдар белгіленеді.

<H1>

<DT> Алпамыс

<LI> Ертарғын

<LI> Есет

</H1>

<DT> номерленбеген тізімдер .

<DD> номерленген тізімдер .

<OL>

<LI> Арай

<LI> Шапақ

<LI> Сәуле

</OL>

<DT> Анықталған тізімдер.

<DD> Бұл тізімдер алдыңғы екеуінен өзгеше.

<P> Тізімдердің ішкі элементі бірнеше абзацтан тұруы мүмкін.

</P>

</DL>

</BODY> </HTML>

 

 Графикалық суретпен жұмыс

<Body> тегін “таза” түрде қолданып келдік, бұл жағдайда артқы фон ақ, беттегі мәтін түсі-қара. <Body> тегіне атрибуттарды қосып артқы фон түсін, мәтін, сілтеме түстерін өзгертуге болады:

Bgcolor – құжаттың артқы фонын береді;

Text – мәтін түсі;

Link – гиперсілтеме түсі;

Vlink – қаралған гиперсмідтеменің түсі;

Alink – сілтемені тышқанмен басқан кездегі түс.

Бұл жағдайда барлық атрибуттарға мәнін берудің қажеті жоқ, кейбіреуіне берсе болады. Түс екі тәсілмен беріледі, бірінші сөзбен (16 түс беруге болады): red, pink, brown.

Black (000000)-қара                       Green - жасыл

Silver – ашық сұр                           Lime- ашық жасыл

Gray – қою сұр                               Olive- қою жасыл

Maroon - қоңыр                              Yellow - сары

Red – қызыл                                    Navy – көк

Puple- күлгін                                   Blue-көк

Fuchsia (FF00FF) -                          Teal-

Aqua-көгілдір                                 Write -ақ

 

Түс оналтылық символдардың үш жұбынан тұратын тізбекпен де берілуі мүмкін. Әрбір жұп алынатын түстің үш базалық  түспен (қызыл-R, жасыл-G, көк-B) қанығу дәрежесін білдіреді. әр жұп 00-ден FF-ке дейін өзгереді. Түстердің бұлай берілуі жүйесі RGB деп аталады. 000000-ден FFFFFF-ке дейінгі кодтардың толық жиынымен 262143 түс алуға болады. Мысалдар: bgcolor=#FFFFFF. Мұнда қызыл, жасыл, көк түстердің қанығуы бірдей-FF, яғни ақ түс береді.  text=#000000 мәтін қара түспен жазылады. link=#FF000000-гиперсілтеме түсі қызыл.

http://catless.ncl.ac.uk/php/misc/colours.php - түстердің кестесі. “show me” батырмасын басып  түстерді көруге болады.

Біртүсті фоннан басқа background=“файл аты” атрибуты арқылы фондық суреттер қоюға болады. Кез келген басқа сурет сияқты фон суреті де .gif немесе jpeg немесе .jpg форматында болуы қажет. Негізінен фондық түстер ашық және құжат мазмұнына сәйкес келеді. Фон баспадан шықпайды.

Тұтас құжат мәтінінің емес, жеке тақырыптар, жолдардың түсін өзгерту <font color=“түс”> тегі арқылы өзгертеді. <font size= “3”> -шрифт өлшемі. <base font=“4”>-шрифттің базалық өлшемі. <font size=+3>, <font size=-2> шрифттің базалық өлшемімен есептеледі.

<table bgcolor= “#F5FFFA”> - кесте фоны

<tr bgcolor=“#DF8090”> - жеке жолдар фоны

<td bgcolor=“#EC8A2E”> - жеке ұяшық фоны.

Мәтінді анимациялау элементтері

Шрифттік жазуларды анимациялау тәсілдері көп емес. Жанып-өшіп (мерцание) тұратын жазуларды орнатуға болады, ол үшін <blink> …</blink> тегін қолдану жеткілікті, алайда ол тек Netscape браузерімен ғана оқылады.

 

Суреттік бейнелер  WEB-парақтарды әшекейлеп безендіру кезінде маңызды құралдар ролін атқарады. Суреттердің өздері  құжаттан бөлек орналасқан және файлда сақталады.

Алайда олар брозер арқылы WEB-парақтардардың ішінде бейнеленеді. Суреттерді бейнелеу ережесін былай деуге болады:

1. Суреттерді құжаттың ішіне орналастыру үшін <IMG…>  , яғни жабылмайтын жалқы тегт қолданылады.
2. Бұл тегте міндетті түрде SRC=”…” атрибуты болуы керек. Оның мәні абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді.  Және ол <IMG…>  тегі тұрған орнына көрінеді.

Мысалы: <IMG SRC=fish.jpg.”> экранға fish.jpg файлдағы балық суретін шығарады.

Ескерту:  Қазіргі кездегі броузерлер тек ғана gif, jpg , png типтеріндегі суреттік

файлдарды      ғана пайдаланады.

1. Суреттер өздерінің көлемдерін сақтай отырып WEB-парағына орналасады. Егер суретті ықшамдап бейнелеу  кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін widh , height атрибуттарының көмегімен беруге болады. Осы 2 атрибуттың мәні WEB-парақтағы суреттердің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді.

Мысалы: <IMG SRC= ”fish.jpg ”> width 500 height=250> суретті 500×250 нүктелерден тұратын төртбұрышты аймаққа орналастырады. Сурет айналасындағы жақтау (border) сызығының қалыңдығын да параметр ретінде көрсетуге болады.

Border=пиксельдер саны. Жақтау мен әдемілік үшін ғана емес, суретті <A> тегінің ішінде гиперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп , оның қолданылғаны белгілі болып табылады. Егер гиперсілтеме ретінде суретті пайдалануда бір мысал келтірейік.

<HTML>

<BODY>

<A HREF=”dog.html”><IMG SRC=”dog.gif” width=87 height=100 BORDER=2> </A>

</BODY>

</HTML>

Бұл жолдар гиперсілтеме ретінде шағын ит суретін шығарады, оны шерту иттер туралы мәліметке ауысуды орындайды. Құжаттардағы суреттерді бейнелегенде, оның орындала бермейтін  бірсыпыра ерекшеліктері бар екенін айта кеткен жөн.

 

1. Шығарылатын WEB-парақ суреттері көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылы  да шығарыла береді.
2. Көбінесе қолданушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды.
3. Бұл екі жағдайда суретті көре алмағанның өзінде, суретте не бейнеленетінін білген болар еді. Бұл мақсат үшін суретті сипаттайтын қосымша мәтіндерді қолданады.
4. Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандайда болсын себептерге байланысты броузер суретті көрсете алмаса, ол суреттің орнына сипатта ретінде қосымша мәтін беріледі.

Мысалы:

<HTML>

<BODY>

<IMG SRC= “ нан.gif ” alt= “ нан суреті ”>

< /BODY >

< /HTML >

Бұл жолдар сурет шықпаған жағдайда , сол сурет орнынан тышқан курсорын алып барғанда, -нан суреті- деген сөз шығып суреттер маңына оған түсінік беретін мәтін жазылғанда, оны суретке байланысты жоғары немесе жылжытатын мүмкіндіктер және суретті беттің сол немесе оң жақ шетіне жылжыту —атрибуты арқылы беріледі. Оны туралау атрибуттары деп аталады.

Олар:   align=” bottom”- мәтін суреттердің төменгі жағында.

align=” lest”- мәтін суреттердің сол жағында.

align=” middle”- мәтін суреттердің ортасында.

align=” top”- мәтін суреттердің жоғарғы жағында.

align=” right”- мәтін суреттердің оң жағында.

 

Қызметі қолданымға кеңінен  енген  мерзім   барысында  мультимедиа да кеңінен тарай бастайды. Себебі  HTML  тілі Web парақтарында    мультимедиялық  обьектілерінің  пайда болуына бірден   үйлесіп кете алмады . Бейне және дыбыстық    файлдар  бүгінгі күнге дейін қосымша  жалғанған және   тіркелген   қосылғылар арқылы жарыққа шығарылатын «сыртқы»  обьектілер ретінде  қарастырылуда . Мультимедияның   бейне және дыбыстық  файлдары әртүрлі   форматтарды қолдана алады . Күнделікті  қолданып   жүрген форматтар , оны қайта   бейнелеу мүмкін   болғанға дейін файлдың   толық  көрініс беруін талап етеді . Бүгінгі күні ағымдық форматтар  мәліметтерді   жадыдан   шығару барысындағы нақты уақыт кезінде дыбыс пен бейне   көріністерді   жарыққа шығару   мүмкіндігін береді.

Интернеттің  ағымдық  форматтарында   радиохабарлар беріледі.   Мысалы: Ресейде осындай формат арқылы  «күміс жаңбыр»  радиостанциясы хабар таратады.

Web параққа  мультимедиялық  объектілерді енгізудің   ең қарапайым әдісі   бұл «А» гиперсілтеме тегін пайдалану. Осындай сілтемені   қалыптастыру ең жеңіл нәрсе . Бұл жағдайда мультимедиялық файл  оқырманды   HTML құжатындағы басқа мазмұндық мәліметтерден назарын аудартпайды. Кейбір   жағдайларда дыбыстық  немесе  мультимедиялық файлды тікелей   Web параққа енгізу талап етіледі. Мысалы: аталмыш файлды автоматты түрде жарыққа шығару үшін қайсыбір аталмыш операцияларды жүзеге асырады. Бүгінгі күні бұл мақсатқа жету үшін HTML стандартына қатаң түрде кірмегеніне қарамастан   «EMBED» тегін қолданған ыңғайлырақ. Бұл тегтерді кеңінен тараған екі броузерлер арқылы тану мүмкіндігін аламыз. Олар Internet Explorer , Next Cup Navigaition. Алайда мультимедиялық файлды жарыққа шығару мүмкіндігін тек қана қосалқы ретінде жалғанған тиісті қосымшалар арқылы ғана анықтайды.

«EMBED» тегі дара болып табылады. Себебі оған жабылатын  тег  талап етілмейді. Оның міндетті  SRC=  атрибуты бар. Оған қоса width , height атрибуттарын да пайдалану мүмкіндіктері бар.  Олар мультимедиялық объектіні жарыққа шығару үшін бөлінген, экрандағы тік төртбұрыш аумақтағы өлшемдердің (ені, биіктігі) мәнін анықтайды

 

Гиперсілтеме (сілтеме) жасау

Web-парақтардың басқа Web-парақтарға қатысты сілтеменің болуы World Wide  Web жүйелерінің ең тартымды ерекшеліктерінің бірі. HTML құжатында гипермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты яғни параметрі  бар ашылатын <A…> және қарапайым жазылатын </A> тегтері пайдаланылады. Жалпы сілтемелер жасаған кезде мынадай ережелерді есте сақтаған жөн.

1) Гиперсілтемелерді құрған кезде атрибуты HREF міндетті түрде қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атына немесе оның URL адресінен табылады. Сілтеме мәтін  <A>…</A> тегінің арасында орналасады . Сілтеме сөз броузерде бейнеленген кезде көбінесе оның асты сызылып, көк түспен белгіленеді. Сол сілтеме сөзінің үстіне курсорды қойып тышқанмен шерту көрсетілген файлға немесе бойындағы URL  адреске көшуге қамтамасыз етеді . Гипермәтіндік  сілтілемелер адрестің өзге кез-келген файлды немесе адреске сәйкес Web-парақты көрсетуі мүмкін.

Мысалы:

<A HREF= “ C : /Мой документы/ Жанара . HTM ”/ файл.</A> экранға көк түспен боялған файл сөзін бейнелейді. Сол сөзді тышқанмен шерту  “Менің құжаттарымның ” ішіндегі  Серік . HTM  файлына көшу әрекетін орындайды. Одан қайтіп оралу үшін браузер аспаптар панелінің кері қарай батырмасын басу керек.

Төмендегі жол <A HREF= “dog. jpg”> иттер туралы мәлімет </A> Экранға итттер туралы мәлімет деген сөз шығады . Сөзге курсорды бағыттап оны шерту бумадағы сурет салынған dog. jpg   файлына көшу ісін атайды. Егер сілтеме көрсетіп тұрған Web парақ басқа бір Web сайтқа орналасқан болса онда HREF атрибуты мәні ретінде сол құжаттың URL адресі толық пайдаланылады.  Оның ішіне хаттаманың атауының Web сайтының адресіне кіреді . Осындай сілтемелер сыртқы сілтеме деп аталады<A HREF= “http://www.microsoft.com > Microsoft </A> Экранға Microsoft сөзін шығарып оны шерту арқылы интернет желісіндегі желісіндегі Microsoft компаниясының Web-парағының алғашқы бетіне көшуді қамтамасыз етеді . Егер сілтеме сол Web-сайтының басқа парағын көрсетін болса онда құжаттың тек салыстырмалы жолын беруге болады . Мұндайда ішкі сілтеме құрылады. Ішкі сілтемелерді қолданған қолайлырақ.  Себебі Web-сайтты басқа серверге ауыстырған кезде жеке құжаттар адресіне өзгеріс енгізу талап етілмейді.

2) Гиперсілтеме ретінде сөз тіркесін ғана емес суреттерді пайдалануға болады . Суреттер мәтін сияқты сілтеме бола алады. Oл үшін <IMG…> тегі сілтемелерді анықтайтын <A> тегінің арасында орналастырылады. Осындай суретке курсорды алып барсақ, ол курсорды сілтеме мәтінге бағытталған кездегідей түрге келеді. Осы тәсіл арқылы Web- парақтарда олардың бірінің-біріне ауысуының графикалық батырмалары жасалады,

Мысалы: <A HREF= “dog.htm ”> <IMGSRC= “dog.gif”> </A> Жолында  <IMGSRC= “dog.gif” > тіркесі гиперсілтеме ретінде кішкене ит суретін береді, оны шерту арқылы иттер туралы мәлімет беретін файлына dog.htm ауыстырады.

3) Егер файлдардың басы емес, оның мәтінінің ішіндегі басқа бір қажетті орынға көшу керек болса, онда сол орынға  <A> анкер орнатамыз. Сонда гипермәтіндік сілтемелер сол парақ ішіндегі анкері бар белгі бір орынды көрсетуі мүмкін. Анкер құруда <A> тегтері қолданылады.Бірақ мүндайда HREF=”…” атрибутына қосымша NAME=”…” атрибутын пайдалану керек. Ол тек латын әрпінің санынан тұрады. Олардың ішінде бос орын таңбасы болмауы керек. Бірақ соңғы броузерлер орыс-қазақ әріптерін ала береді.

Мысалы:

<A HREF=”2.htm # AAA” > AAA анкеріне көшу. </A>

<A NAME=”AAA” > көшу орындалады. </A>

Бұл  программа  фрагменті 2.htm файлындағы AAA сөзіне көшіреді.

Ал егер көріп отырған мәтін ішіндегі басқа бір 1.1 тіркесіне көшу үшін

<A HREF=” # 1.1”>  1.1 анкеріне көшу </A>

<A NAME=”1.1” > </A>.

Ескерту: Орнатылған анкерге сілтеме орналастыру үшін URL адресінен кейін # (диез ) таңбасымен бөлінген  анкер атауы көрсетілуі керек. 1құжат ішіндегі анкер алдына адрес жазылмайды.

Мысалы:

<H2> Тақырып <H2>

<HR> <A HREF=”# 3.1”> 3,1-ге көшу </A>

<A NAME=”3.1” > </A>

<BR> <H3> 1.1 бірінші абзац </H3>

Егер файл басы емес оның мәтінің ішіндегі басқа бір қажетті орынға көшу керек болса, онда сол  орынға алдын-ала анкер орнатамыз

<HR> <H3> 1.2  екінші абзац </H3>

Егер сілтеме сол Web парақтың  басқа парағын көрсететін болса, онда құжаттың тек салыстырмалы жол беруге болады.

<HR><H3> 3.1 Үшінші абзац </H3>

Мұндайда   HREF=”#…” атрибутына қосымша  NAME=”…” атрибутын пайдалану керек. Ол тек латын әріптерінен,  сандарынан тұрады да, олардың ішінде бос орын таңбасы болмауы керек, бірақ соңғы броузерлер орыс-қазақ әріптерін ала береді.

 

 HTML   құжатында   кестелерді  қалыптастыру.

Кесте параметрлерін   тағайындау   тегтері.

 

Кестелер html-дің беттеріне     форматтаудың  қуатты    құралы   болып  табылады.Кесте мәліметтің  үлкен  көлемін    ұсынудың ең  ыңғайлы әдістерінің бірі.HTML  тілі   кестелердің   әр алуан  қалыптастыруды  орасан зор мүмкіндіктеріне   ие болады.HTML тілінде   кестелерді  форматтаудың    құралдары  пайда болғанға  дейін ең қарапайым көп колонкалы  тексті немесе құрама   кестені  құру мүмкін емес  еді.Мұндай мүмкіндік   пайда болғаннан  кейін  web-дизайнерлер оны толық  көлемде  қолданып  күрделі  эффекті ала бастады.

1.HTML тілінде  кестелер  <TABLE> тегімен  басталады </TABLE> аяқталу  тегімен жабылады. Кесте  ішіндегі мәтін,кесте элементтерін (атауы,жолдары мен ұяшықтары)

анықтайтын арнайы тегтердің ішіне орналастырылады .

<TABLE>тегтерінің арасында кестелердің атауларын анықтайтын <CAPTION>тақырып </CAPTION>тегтері қосарланып кездесуі мүмкін.

Кестелердің атаулары тікелей кестелердің  үстінде  немесе  астында   ораласады .

2. Кестелердің жолдарын анықтайтын  <TR>және </TR>тегтері кездеседі.

Жабатын тегтерді кездестіруге болады. Себебі кестенің әр жолы сол кестенің  келесі жолының басталуымен  немесе кестенің өзімен  бірге аяқталады.

3.Кестенің әрбір жолы ұялардан тұрады.Ұяларды немесе  бағандар  мен жолдардың  атауларына ие <TH>тегімен  немесе  кәдімгі  мәліметтерге ие <TD>тегімен  белгілейді.Бұл  тегтер  сонымен қатар  қосарланып  берілуі мүмкін. Бірақ бұл жерде де жабатын тегтерді көрсетпеуге де болады.Себебі жабатын тегтерді көрсетпеу  басқа түсініктер  бермейді.

Мысал:

Таблица 1.

 

Меркурий	70 млн км
Венера	108 млн км

 

<HTML>

<HEAD>

<TITLE>Күнге жақын  планеталар </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR>

<TD>Меркурий </TD>

<TD>70 млн км</TD>

</TR>

<TR>

<TD>Венера </TD>

<TD>108 млн  км</TD>

</TR>

</TABLE>

</BODY>

</NTML>

 

Таблица  тақырыбы  таблицаның  жоғарғы  немесе  төменгі  бөлігінде  орналаса  алады.Бұл өзгерісті жасау үшін CAPTION  тегінің   ALIGN  параметірінің  мәндері LEFT,CENTER,RIGHT,BOTTOM (таблицаның  айнымалысына) өзгеріп қолдануға  болады.

 

Мысал:

<BODY>

<TABLE  BORDER>

<CAPTION  ALIGN=RIGHT  VALIGN=BOTTOM>

Күнге жақын  планеталар </CAPTION>

TABLE-тегінің  BORDER-параметірі  таблица  шекараларының  өлшемін береді.

 

Мысал:

<TABLE   BORDER=15>

TABLE тегінің  CELLSPACING  параметрі  ұяшықтардың  арасындағы  қашықтық мөлшерін  береді.Осы TABLE тегінің  WIDTH, HEIGHT  параметрі  сәйкесінше   таблицаның  биіктігі  мен  енін береді.Бұл   параметірлердің  мәні  % -к   мөлшерде   жазылады.

 

Мысал: 1.

<HTML>

<HEAD>

<TITLE> Күнге  жақын  планеталар </TITLE></HEAD>

<BODY>

<TABLE  BORDER=3  CELLPADDING=7>

<TR>

<TD>Меркурий </TD>

<TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 мле км</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Мысалы: 2.

 

<HTML>

<HEAD>

<TITLE> Күнге  жақын  планеталар </TITLE></HEAD>

<BODY>

<TABLE  BORDER= 2  WIDTH =75%  HEIGHT=100>

<TR>

<TD>Меркурий </TD>

<TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 млн км</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Таблица  ұяшықтарының  ішіндегі  мәліметтерді  тегістеу  жұмыстары- бұл  яғни, оң жаққа, солға,ортаға  <TD> тегінің ішінде  align  параметрімен  жасалады.

Мысал:<TD  align=LEFT>Меркурий

</TD>Вертикал  бойынша   таблица   ұяшықтарын  біріктіру.

Мысал:

<HTML>

<HEAD>

<TITLE>Біріктіру  мысалы </TITLE></HEAD>

<BODY>

<TABLE  BORDER>

<TR>

<TD TOWSPAN=2> Меркурий </TD>

<TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 мле км</TD>

</TR><TR>

<TD>Земля </TD>

<TD>150 млн км</TD>

</TABLE>

</BODY>

</HTML>

Меркурий	70м
	Венера	108
Жер	150

 

 Сiлтемелердiң навигациялық карталары (Image map)

 

Web-құжаттың сыртқы түріне еш әсер етпей, көбіне анықтаушы немесе шешуші рөл атқаратын арнайы қызметші элементтер метатегтер деп аталады. Олардың ұтымды қолдануында олар сіздің сайтыңыздың Желідегі танымалдығына, басқа да сайттардың ішінен тез табылу жылдамдығына әсер етеді.

Алдымен метатегтерді құрудың және мәнінің жалпы идеологиясын сипаттайық. Интернетте тек 10  немесе 100 мыңдаған құжат болғанда жеке құжаттарды іздеу қиындық тудырған жоқ. Кәдімгі кітапханаларда баспаханалық құралдардың осындай саны кездеседі. Оларда ақпаратты іздеу техникасы тым күрделі жүйе болып табылмайды. Алайда интернеттегі құжаттардың жалпы саны 10 немесе 100 миллион бірліктен асқанда ақпаратты іздеу техникасы айтарлықтай өзгерді. Іздеу кезінде екі түрлі қателіктің тууының ықтималдығы пайда болды. Іздеуге “жеңіл” шарттар қойғанда іздеу жүйесі беретін ақпарат саны 100 мың адрестер мен Web-құжаттар аттарын құрайды. Іздеуге “қатал” критерий қойған кезде “нөлдік” нәтиже алу ықтималдығы туады.

Метатегтердің бастапқы мақсаты іздеу серверлерінің жұмысын жеңілдету үшін құжат туралы ақпаратты іріктеп алу болатын. Бұл жағдайда іздеу роботы құжатты тұтас қарамайды, оған негізгі метатегтерді ғана талдау жеткілікті құжат туралы барлық ақпарат оған белгілі. Басқаша айтқанда Web-құжатты құрушы іздеу сервері жұмысының бір бөлігін өзі орындайды, яғни құжаттың аннотациясын құрып іздеу серверінің жұмысын жеңілдетеді.

Егер интернетте тек ғылыми немесе оқу сипатындағы құжаттар ғана болса, бәрі солай болар еді. Теңіз түбінің фаунасы туралы зерттеуге арналған немесе жасару рецептлерін табу немесе инвестицияларды салу тәсілдері туралы құжаттарда “аннотация” көрсету ешкімнің ойына келе қоймас. Соңғы жылдары интернет барған сайын коммерциялана түсуде, ал коммерция әлемінде товарлар қозғалысы үшін рұқсат етілген де күмәнді де жолдары қолданылады, бұл Web-құжаттарда бейнеленбеуі мүмкін емес.

Метатегтер қалай енгізіледі? Алгебрадағы сияқты біз айнымалыларды енгізіп және оларға белгілі бір мәндерді меншіктей аламыз. Метатег аты Name, ал оның мәні Content арқылы беріледі. Бұл жерде метатег атын анық түрде көрсетеміз. Ал оның мәнін беруде математикадағыдай тек сандармен ғана шектелмейміз, кез-келген сөздік конструкцияны да беруге болады. Жалғыз ерекшелігі – екеуі де тырнақшаға алынады. Бұл барлық конструкция meta тегінің ішіне жазылады. Мысалы description стандартты метатегін (біздің Web-құжатымыздың мазмұны) және құжаттың не туралы екенін түсіндіреміз. Онда былай жазамыз:

<Meta Name= “description”  Content= “описание наиболее ненавязчивых методов анимации текста, способы выбора стильного фона и шрифтов, нестандартное встраивание графики”>

Басқа мысал: Keywords стандартты метатегін қолдану (іздеу серверлері көмегімен Желіде біздің құжатымызды іздеу үшін кілттік сөздер)

<Meta Name=“Keywords”  Content= “анимация, шрифты, встраивание графики, задание стилей, нестандартные приемы графических решений, выбор фона”>

Метатегтер тобына “Meta” белгілеуі жоқ стандартты  <Title> … </Title> және <… Alt=“…”> тегтері де жатады. Alt метатегі графикалық суреттерге комментарий: мазмұны, көлемі үшін енгізіледі.

Көрсетілген метатегтердің ішінде көрінетіні – арасына құжат аты орналасатын <Title> … </Title> метатегтері жатады.

<Title> метатегтерінің арасына жазылған мәтіндерді іздеу серверлері бірінші болып талдайды.

 

 Фреймдар

 

Арнайы тегтер көмегімен экранды көлденеңінен де, тігінен де бірнеше бөліктерге бөлуге болады. Бұндай бөліктер фреймдер деп аталады. әрбір фреймге басқа фреймдерден тәуелсіз жеке (бөлек) URL-адрестер жазып, жеке айналдыру сызықтарын алуға болады. Фреймдерді құрудың екі тәсілі бар- олардың екеуі де <frameset>…</frameset> тегтерін қолданады, бірақ оларды не <body> тегінің орнына, не <body> тегі бар кезінде  <head>  тегтерінің арасына орнату керек.

<frameset> тегінің негізгі атрибуттары: rows=  және cols= . олар жеке фреймдегі көлденең қатар (rows) мен тік бағандардың (cols) өлшемдерін білдіреді. Пикселмен немесе процентпен өлшенеді. Мысалы 40% / 60% пропорциямен екі фреймге тігінен бөлу былай жүргізіледі: <frameset cols= “40%, 60%”>

Үш фреймге бөлу: <frameset cols= “26%,34%,*”> мұндағы *-үшінші тік фреймнің экранның қалған бөлігін алатынын, яғни 40% білдіреді.

Экранды бөлу пропорциясын көрсеткеннен кейін, әрбір фреймге жүктелетін құжаттардың URL –адресін беру қажет. Мысалы,

<frameset cols= “40%, 60%”>

<frame src= “Dame.jpg”>

<frame src= “http://duesseldorf.ru”>

</frameset>

Бұл жағдайда сол жақтағы фреймге компьютердегі Dame.jpg файлы, ал оң жақтағы фреймге интернеттегі сайт жүктеледі. Фреймнің ішіне фреймді, яғни экранды бір уақытта көлденеңінен де, тігінен де бөлуге болады. Мысалы:

<frameset cols= “60%, 40%”>

<frameset rows= “35%, 25%, *”>

<frame src= “http://www.azon.ru/context/detail/id/1454360/”>

<frame src= “http://www.zevel.ru/”>

<frame src= “http://dvor.de”>

</frameset>

<frameset rows= “35%, 65%”>

<frame src= “http://www.litera.usluga.info/public.php”>

<frame src= “http://www.suche.ru/ru/catalog/31/60/index.php”>

</frameset>

</frameset>

<frameset border= “”> атрибуты көмегімен фреймдерді бөліп тұратын жолақтың енін өзгертуге болады және <frameset bordercolor= “#”> атрибуты арқылы оның түсін береді.

Ені 20 пиксел болатын жасыл түсті жолақты құру мысалы:

<frameset border= “20” bordercolor= “#00FF00”>

Сонымен бірге әрбір фреймге ат беруге болады:

<frame src= “index.htm” name= “main”>

<frame src= “http://www.osan-koeln.net” name= “slave”>

Фреймдерге ат қою бір фреймдегі құжатты екіншісіне жүктеуге, фреймдер арасында ақпарат алмасуға мүмкіндік береді. Бұл былай жазылады:

<a href= “http://www.kolesnik.ru/2005/blog/” target= “slave”>  what is it “blog”?  </a> түріндегі жазуды main аты бар бірінші фреймге жүктелетін index.htm құжатына жазайық. target= “slave” нұсқауы гиперсілтеме бойынша тышқанмен түрткенде оның екінші фреймге жүктелуін қамтамасыз етеді. Фреймдерді құру кезінде басқа да атрибуттарды пайдалануға болады. Сол және оң бағандардың шамаларын реттеу <frame marginwidth= “ ”> , жоғарғы және төменгі қатарлардың шамаларын реттеу <frame marginheight= “ ”>  атрибуттары арқылы жүргізіледі.

<frameset cols= “40%,*”>

<frame src= “porzellan.jpg”><frame marginwidth= “150” marginheight= “300” src=“http://newskijprospekt.de” name= “prauij”></frameset>

 

Сайтқа кірушілерден ақпарат алу: Форма құру, <form> тегінің атрибуттары. Форманың input, select, textarea элементтері

Айталық, сіз сайт немесе Web-бет құрдыңыз дейік. Енді өзіңіздің бетіңізге бірнеше адамдарды шақыру үшін олардың бет жөніндегі ойларын білгіңіз келеді немесе егер бет коммерциялық мақсатта құрылған болса, онда сіздің өнімдеріңіз бен қызметіңізге тапсырыстар қабылдағыңыз келеді. Мұндай қосымша ақпараттар сіз үшін өте маңызды.

Яғни әңгіме сайтты құрушы мен қолданушылардың арасындағы кері байланыс жөнінде болып отыр. Әрине, мұндай байланыс сайтқа сіздің электрондық почтаңыздың адресін орнату арқылы мүмкін болады. Қолданушы электрондық почтаны қолданған кезде автоматты түрде өзінің электрондық адресін де жібереді. Көптеген адамдарға бұл ұнамайды: жарнамалық хабарламалар ағынынан қорқады. Сондықтан форма деп аталатын арнайы құралды пайдаланған өте тиімді. HTML тілі жөнінде осыған дейін айтылғандар Web-құжаттардың сыртқы бейнелену тәсілдеріне-шрифттердің өлшемі мен түрі, артқы фон түсі, суреттерді орнату және т.с.с. арналған және бұл жерде ішкі немесе сыртқы гиперсілтемелерді есепке алмағанда қолданушының сервермен өзара байланысы белсенді емес. Гиперсілтемелерді қолданғанда клиенттің сервермен белсенді әрекеті жүреді – қолданушы – клиент өз қажеті бойынша гиперсілтемені құрады және Интернеттен қажет құжатты жүктейді, бір құжаттан келесісіне ауысады. Бірақ қолданушы мен сервер арасындағы интерактивті диалогтық  режимді ұйымдастыру тек формалар көмегімен ғана мүмкін болады.

Сыртқы формалар қарапайым стандартты элементтер жиынынан – батырмалар, әртүрлі түрдегі терезелер, ашылатын меню, т.б. тұрады. Мысалы 1-суретте батырмалар жиынынан тұратын форма көрсетілген.

 

 

 

 

 

 

 

 

1-cурет

1-сурет мысалынан көретініміздей, қолданушы өз жасына сай дөңгелекті белгілеп,      сосын ОК батырмасы арқылы дауыс береді. Немесе төменге ашылатын меню           арқылы да қолданушы өз нұсқасын таңдайды. Мұндай бірінші топтағы формаларды қолданудың мақсаты қолданушыға алдын-ала берілген нұсқалардан таңдау мүмкіндігін беру. Қолданушы нүктелерді, белгішелерді қою арқылы немесе төменге ашылатын менюден қажет пунктті таңдау арқылы өз нұсқасын таңдағаннан кейін форма бұл ақпаратты серверге жібереді. Серверде клиент жіберген ақпарат  [айнымалы аты]=[айнымалы мәні] жұбы түрінде өңдеу программаларына беріледі. Айнымалы аты латын әріптерімен беріледі. Форма неден тұрады? Web-құжатта форма <FORM> тегімен ашылып, </FORM> тегімен жабылады. Құжатта бір уақытта бірнеше формалар құруға болады, бірақ олар бірінің ішінде бірі орналаспауы қажет. Форма ішінде HTML –мәтінді, белгілерді, тіпті кестені шексіз орнатуға болады. <FORM> тегі үш атрибутты қамтиды: ACTION, METHOD, ENCTYPE. ACTION атрибуты міндетті болып табылады. Ол форманы өңдейтін программа орналасқан сервердің адресін анықтайды. METHOD атрибуты формадағы берілгендер өңдеуші программаға қай әдіспен (гипермәтінді тасымалдау хаттамасы) жіберілетінін анықтайды. Мүмкін мәндері METHOD=POST-серверде құрылған мәліметтер қорына өзгерістер енгізеді. METHOD=GET – сервердегі мәліметтер қорын өзгертпейді. Егер бұл атрибуттың мәні қойылмаса, үнсіз келісім бойынша METHOD=GET қабылданады. ENCTYPE атрибуты формадағы берілгендердің өңдеуші-программаға берілуі үшін қалай кодталатынын білдіреді. Егер оның мәні қойылмаса, үнсіз келісім бойынша ENCTYPE=APPLICATION/X-WWW-FORMURLENCODED мәні таңдалынады.

Қарапайым форма мысалысервердегі өңдеуші-программаға формадан берілгендерді тасымалдау үрдісін орындату (жүргізу) үшін қолданушы қандай да бір әрекетті орындау қажет. Web-құжатта оны келесі оператордың көмегімен құрады:

<INPUT TYPE=Submit>

Web-құжаттың ішінде мұндай жолды кездестіргенде браузер экранда сәйкес жазуы бар батырма құрады. Бұл батырманы басқанда формадағы барлық берілгендер өңдеуші-программаға жөнелтіледі. Батырмадағы жазу VALUE=“жазу” атрибуты арқылы беріледі. Мысалы: <INPUT TYPE=Submit  VALUE= “Алға”>

HTML-құжатта бұл бөлік былай жазылады.

<FORM>

<INPUT TYPE=Submit  VALUE= “Алға”>

</FORM>

“Алға” батырмасын басқан кезде батырмадағы жазуды сервердегі өңдеуші-программаға жіберу үшін батырма анықтамасында қосымша NAME=[аты] атрибутын енгізу қажет. Мысалы: <INPUT TYPE=Submit  NAME=button VALUE= “Алға”>

Бұндай батырмаға басқан кезде өңдеуші программа мәні “Алға” болатын button айнымалысын алады.

Формада әртүрлі аттары және/немесе мәндері бар Submit типті бірнеше батырма болуы мүмкін. Бұл жағдайда өңдеуші программа қолданушы қандай Submit батырмасын басқанына сәйкес әрекет жасауы қажет.

Бұл үшін әрбір батырмаға өзіндік айнымалы аты сәйкестендірілуі қажет:  button1, button2, button3.

<FORM>

<INPUT TYPE=Submit  NAME=button1 VALUE= “Алға қарай”>

<INPUT TYPE=Submit  NAME=button2 VALUE= “Кейінге қарай”>

<INPUT TYPE=Submit  NAME=button3 VALUE= “Тоқта”>

</FORM>

Форма берілгендерді қалай жинайды? Басқа типті <INPUT> элементтері де бар. Әрбір <INPUT> элементі NAME=[аты]  атрибутын қамту қамтуы қажет. Ол элемент атын анықтайды және өңдеуші программаға берілетін сәйкес айнымалы аты болуы керек. Аты тек латын әріптерімен берілуі қажет және үнсіз келісім бойынша 20 символдан аспауы қажет. Көптеген <INPUT> элементтері VALUE= “Мәні” атрибутын қамтиды. Бұл атрибут өңдеуші программаға берілетін осы аттың мәнін анықтайды.

<INPUT TYPE=Text> және <INPUT TYPE=Password> элементтері үшін бұл атрибут міндетті емес, себебі сәйкес айнымалы мәнін қолданушы пернетақтадан енгізе алады.

Элементтердің негізгі типтері

<INPUT>: TYPE=Text

Бұл элемент  мәтін жолдарын енгізетін терезені анықтайды және мынадай қосымша атрибуттарға ие бола алады:

Size=[сан] – енгізу терезесінің ұзындығы, символмен;

Maxlength=[сан] – енгізілетін жолдың максималды мүмкін ұзындығы, символмен.

Мысалы <INPUT TYPE= Text  Size=20 NAME=User VALUE= “Олег”>

Бұл жазу мәтінді енгізу үшін ұзындығы 20 символ болатын терезені анықтайды. Үнсіз келісім бойынша терезеде “Олег” мәтіні тұрады, қолданушы мәтінді өзгерте алады.

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

TYPE=Password парольді енгізу терезесін анықтайды. Бұл Text типті элементке өте ұқсас, бірақ енгізілген символдардың орнына экранда жұлдызша (*) немесе қара дөңгелекше (    )

көрсетіледі.

Мысал: <FORM>

<INPUT TYPE= Password  NAME=pass Size=20 Maxlength=10>

</FORM>

парольді енгізу үшін ұзындығы 20 символдық терезені анықтайды. Парольдің максималды мүмкін ұзындығы 10 символ. Енгізілген пароль өңдеуші программаға pass айнымалысы арқылы жіберіледі.

“Радиобатырма” элементі Type=radio.

Бұл элемент радиобатырма деп аталатын батырманы анықтайды. Батырманың бұрын белгіленгенін  көрсететін checked қосымша атрибутын қамтуы мүмкін. Бірдей атқа ие радиобатырмалар тобында тек бір ғана радиобатырма белгілене алады.

Мысал. Қолданушы сыйымдылығы 4,7 немесе 9,6 ГБайт DVD  дискіні таңдайды:

<FORM>

<INPUT TYPE= Radio NAME=DVD  Value= “4,7 ГБайт” checked> 4,7 ГБайт  <br>

<INPUT TYPE= Radio NAME=DVD  Value= “9,6 ГБайт”> 9,6 ГБайт

</FORM>

Мұндай құрылым 4,7 және 9,6 ГБайт деп жазылған екі радиобатырмалар тобын анықтайды.Бастапқыда бірінші батырма белгіленген. Егер қолданушы басқа батырманы белгілемесе, онда үнсіз келісім бойынша өңдеуші программаға 4,7 Гбайт мәні бар DVD айнымалысы беріледі. Егер қолданушы басқа батырманы белгілесе, онда өңдеуші программаға мәні 9,6 Гбайт болатын DVD айнымалысы жіберіледі.

 

DVD-рекордер

 

USB-стик

 

DSL-модем

 

Сыртқы флоппи-диск енгізгіш

 

Checkbox элементі

Type=checkbox  ішіне белгі салуға болатын квадратты анықтайды. Квадраттың белгіленгендігін білдіретін checked атрибуты болады. Радиобатырмадан айырмашылығы аттары бірдей квадраттар тобында бір уақытта бірнеше квадраттарды белгілеуге болады.

<FORM>

<INPUT TYPE= Checkbox  NAME=comp  Value= “DVD”> DVD-рекордер  <br>

<INPUT TYPE= Checkbox  NAME=comp  Value= “USB” checked > USB-стик  <br>

<INPUT TYPE= Checkbox  NAME=comp  Value= “DSL”> DSL-модем  <br>

<INPUT TYPE= Checkbox  NAME=comp  Value= “Floppy” checked> Сыртқы флоппи-диск енгізгіш

</FORM>

Бұл құжат 4 квадраттан тұратын топты анықтайды. Бастапқыда екінші және төртінші квадраттар белгіленген. Егер қолданушы өзгертпесе, өңдеуші программаға comp=USB және comp=Floppy айнымалылары жіберіледі.

 

Тазалау батырмасын құру

 

Type=reset элементін басқан кезде форманы бастапқы жағдайына әкелетін батырманы құрады. Бұл батырманы қолданғанда берілгендер өңдеуші программаға жіберілмейтіндіктен name атрибутын қоспаса да болады. Мысал:

<Input Type=reset Value=“Очистить поля формы”>

“Очистить поля формы” батырмасын басқанда форма бастапқы қалпына келтіріледі. <Input> элементтеріне қоса, форма <Select> менюін қамти алады. N n элементтен тұратын <Select>  менюі мынадай түрде болады:

<Select Name= “аты”>

<Option Value= “мән1”> [мәтін1] </Option>

<Option Value= “мән2”> [мәтін2] </Option>

- / -

<Option Value= “мәнN”> [мәтінN] </Option>

</Select>

Қала атын таңдау мысалы:

<Form>

<Select Name= “gorod”>

<Option Value= “Almaty”> Алматы </Option>

<Option Value= “Astana”> Астана </Option>

<Option Value= “Karaganda”> Караганда </Option>

</Select>  </Form>

Көріп отырғандай, меню <Select>  тегінен басталып, </Select> тегімен жабылады. <Select>  тегінде менюді басқаратын айнымалылардың атын анықтайтын Name атрибуты міндетті. Жоғарыдағы мысалда бұл gorod айнымалысы.

<Select> тегінде менюден бірнеше элементті таңдау мүмкіндігін беретін Multiple атрибуты да болуы мүмкін. Көптеген браузерлер <Select Multiple> менюін меню элементтері көрсетілген терезе түрінде береді. Бұл кезде терезе биіктігін Size=[сан] атрибутымен беруге болады.

<Option> белгісі меню элементтерін анықтайды. Value міндетті атрибуты менюдің таңдалған элементіне сәйкес өңдеуші программаға жіберілетін мәнді анықтайды. <Option> белгісі берілген элементтің үнсіз келісім бойынша белгіленгендігін көрсететін checked атрибутын да қамти алады. Форманың тағы бір элементі <Textarea>. Бұл элемент қалай пайдаланылады? Мысал қарастырайық:

<Textarea Name= “Address”  Rows= “5” Cols= “50”> внесите свой адрес … </Textarea>. Бұл мысалда мәтін енгізілетін аймақ төртбұрышпен қоршалады. Барлық атрибуттары міндетті болып саналады. Name атрибуты терезе мазмұны осы атпен өңдеуші программаға жіберілетін атты анықтайды. Rows атрибуты терезенің жолдардан тұратын биіктігін анықтайды (мысалда 5). Cols атрибуты терезе енін символмен береді. <Textarea> және </Textarea> тегтерінің арасына орналасқан мәтін үнсіз келісім бойынша терезе мазмұны болады. Қолданушы оны өзгерте немесе өшіре алады.

<Textarea> терезесіндегі орыс әріптері өңдеуші программаға жіберілгенде сәйкес символдық объектілерге ауысуы мүмкін екенін білу қажет.

Егер сіздің қолыңызда сервер болса, онда сіз формадан берілгендерді жинай аласыз, ал егер сізде тек электрондық почта адресі ғана болса, онда оны берілгендерді жинақтау үшін пайдалануға болады ма? Әрине болады.

Көрсетейік. Бұл программа бастапқы берілгендерді келесі формадан алады:

<HTML> <HEAD> <TITLE> Мысал </TITLE> </HEAD>

<BODY> <H1> Күрделі форма </H1>

<FORM ACTION= “MAILTO: [email protected]”  METHOD=POST>

<H2> Қысқаша резюме </H2>

<P> Аты: <INPUT TYPE=TEXT SIZE=40 NAME=ati> <BR>

Фамилия: <INPUT TYPE=TEXT SIZE=40 NAME=familia> <BR>

Жынысы: <INPUT TYPE=RADIO NAME=jinisi  VALUE=“male”  checked> ер

<INPUT TYPE=RADIO NAME=jinisi  VALUE=“female”> әйел <BR>

Жасы: <INPUT TYPE=TEXT SIZE=5 NAME=jasi> жыл <BR>

<INPUT TYPE=SUBMIT VALUE= “ӨҢДЕУШІ ПРОГРАММАНЫ ҚОСУ”>

<INPUT TYPE=RESET VALUE= “ТАЗАРТУ”>  </P>

</FORM> </BODY> </HTML>

Форманы толтырыңыз, батырмаға басыңыз және қандай нәтиже беретінін қараңыз.

<FORM ACTION= “MAILTO: [email protected]”  ENCTYPE=TEXT/PLAIN>

Біз кодтау алгоритмін Text/Plain – ға өзгерткенімізге көңіл аударыңыз, яғни берілгендер “таза мәтін”  күйінде жөнелтілетіндей кодтауды өшіріп тастадық. Айталық, қолданушы атын Асан, фамилиясын Қамбаров және жасын 18 деп толтырды дейік. Сұрақ: егер қолданушы “Өңдеуші программаны қосу” батырмасына басқанда не болады? Жауап: электрондық почтаның [email protected] адресіне келесі мазмұндағы хабарлама автоматты түрде жіберіледі:

ati= Асан

familia= Қамбаров

jinisi= malejasi=18.

 

 

Ұқсас тақырыптар:

• HTML тіліне түсінік
• HTML-ге кіріспе. Web-дизайнның негізгі ұғымдары
• Веб технология құру. Web-сайт құруда бағдарламалау тілдерін пайдалану.
• Инф. «FrontPage және HTML тілі мүмкіндіктерін тиімді пайдалану әдістері» (арн.курс).
• Visual Basic бағдарламалау тілінде тест құру бағдарламасы
• И-10.Horizontal Scroll Bar, Vertical Scroll Bar, Shape базалық элементтері.
• 10-сынып. Visual Basic программалау тілі бойынша практикалық жұмыстар (ЭО).
• Мектеп сайтының құрылымы
• VB. Басқару элементтері.
• Қарапайым және фигуралық мәтін