Фрейм туралы түсінік.

Тақырып. HTML-құжаттын пішімдеу

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

Оқытудың міндеттері:

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

Йымдастыру кезеңі: -5 мин

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

Құзыреттілікті қалыптастыру саны: біліктілік, практикалық дағды.

Тақырыптың негізгі сұрақтары: -45 мин

Тақырып бойынша негізгі сұрақтар:

1. HTML –тілінде Web-парағын құру.

2. Форманың анықтамасы және атрибуттары.

3. <FORM> тэгінің атрибуттары және олардың қолданылуы.

4. ACTION, METHOD және ENCTYPE атрибуттарының қызметі.

5. <INPUT>элементінің негізгі типтері.

6. Фрейм түсінігі, оның құрылымы мен мүмкіндіктері.

7. Фрейм құру ережесі.

8. Браузер құжаттарын көлденең және тігінен орналастыру үшін фреймнің қандай атрибуттары

қолданылады?

9. Бір құжаттан екінші құжатқа өту ережелері.

10. Көлдеңен сызықтарды қоюға арналған тэг және оның атрибуттары.

11. Мәтінге және суретке қолданылатын сүзгілеулер.

Ы С Қ А Ш А Т Е О Р И Я С Ы

Формалар

Форма — HTML-құжатындағы ақпаратты Web-сервер арқылы әлемнің алдын ала белгіленген бір жеріне жіберу үшін қолданылатын құрал. Формалар арқылы сайтқа кірушілерге сұрақнама құруға, жарнама жасауға және медициналық анықтамалар құруға болады.

Форманың жұмыс істеу принципі мынадай: сайтқа кіруші форманы толтырады, толтырып болғаннан кейін белгілі бір батырманы басып, формадағы ақпарат көрсетілген жерлерге барады. Формалар <FORM> ... </FORM> тэгтер арасында орналасады. HTML-құжатының ішінде бірнеше форма болуы мүмкін, бірақ, олар бірінің ішінде бірі орналаспауы керек. <FORM> тэгінің негізгі атрибуттары:

Атрибут	Атқаратын қызметі
ACTION	Міндетті атрибут. Форма өңдеушісінің Web-сервердегі жолын көрсетуді анықтайды.
METHOD	Формадағы ақпарат өңдеушіге қалай баратынын анықтайды. Мүмкін болатын мәндері: METHOD=POST және METHOD=GET. Мұндағы РOSTатрибуты формадағы ақпарат URL-ден бөлек жіберіледі, ал GETатрибутыURL-мен бірге жіберіледі. Егер атрибут мәні жазылмаса, онда, автоматты түрде METHOD=GET мәні ұйғарылады.
ENCTYPE	Тұтынушы мәліметін браузерден Web-серверге жіберудегі кодтау түрін анықтайды.

Қолданушы формаға ақпаратты енгізу үшін <INPUT> элементін қолданады. Әрбір <INPUT> элментінде NAME=имя атрибуты бар, ол жолдың атын анықтайды (жолдың идентификаторы). Келесі кестеде <INPUT> элементінің басты типтері көрсетілген:

Атрибут	Атқаратын қызметі
TYPE=text	Мәтін енгізетін ұяшықты анықтайды. Қосымша мынадай атрибуттары бар: SIZE=сан (ұяшықтың ені символмен беріледі) және MAXLENGTH=сан (Өріске жазлатын символдардың мүмкін максималды саны): <INPUT TYPE=text SIZE=20 NAME=User VALUE="Алмас"> Ені 20 символдан аспайтын мәтін енгізуге арналған ұяшықты анықтайды. Автоматты түрде ұяшықта “Алмас” сөзі шығады, оны қолданушы өз қалауынша өзгерте алады.
TYPE=password	Пароль енгізетін ұяшықты анықтайды. Тext типіне өте ұқсас, бірақ, мәтіннің орнына жұлдызшалар (*) шығады: <INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10> Еніне 20 символ сиятындай пароль енгізу ұяшығын шығарады. Көрсетілген үлгіде парольды 10 символға дейін енгізуге болады.
TYPE=radio	Радиобатырманы экранға шығарады. CHECKED (радиобатырманың ерекшеленгенін) деген қосымша атрибуты болады. Аттары бірдей бір топ радиобатырмалардың ішінде тек біреуі ғана белгіленген радиобатырма болады: <INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Иә <INPUT TYPE=radio NAME=Question VALUE="No"> Жоқ <INPUT TYPE=radio NAME=Question VALUE="Possible"> Мүмкін Радиобатырманы ерекшелеп алған соң осы ақпарат тұтынушыға жіберіледі. Егер радиобатырманы ерекшелемесе Question айнымалысына Yes мәні беріледі: Question=Yes.
TYPE=checkbox	Белгі қоюға болатын квадрат батырмаларды анықтайды және CHECKED деген қосымша атрибуты бар. (квадратқа белгі қойып көрсетеді). Радиобатырмалардан айырмашылығы - аттары бірдей квадраттар тобында бірнеше квадраттар белгіленуі мүмкін: <INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессорлар <INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптерлар <INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканерлер <INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемдер Квадрат батырмалардың бірнешеуі белгіленгеннен соң, осы ақпарат тұтынушыға жіберіледі. Егер белгіленбесе, келесідей екі айнымалы жіберіледі: Comp=Video және Comp=Modem.
TYPE=submit	Формадағы мәліметті тұтынушыға жіберетін батырманы шығарады. Ол әрекет "Жіберу" батырмасын басқанда жүзеге асады: <INPUT TYPE=submit VALUE="Жіберу">
TYPE=reset	Формадағы жолдарды тазалайтын батырманы анықтайды. Ол әрекет батырма басу арқылы орындалады. "Тазарту"батырмасы басылған соң формадағы мәлімет өңдеушіге жіберілмейді:

Формада көлемді мәтіндер енгізуге арналған ұяшық орнатуға болады. Ол <TEXTAREA> элементі арқылы орындалады:

<TEXTAREA NAME=address ROWS=5 COLS=50> Өзіңіз туралы мәлімет енгізіңіз </TEXTAREA>

NAME атрибуты ұяшыққа енгізілген мәтінге ат меншіктейді, сол атпен ол тұтынушыға жіберіледі. ROWS атрибуты ұяшықтың биіктігін мәтін жолдарымен анықтайды. COLS атрибуты ұяшықтың енін символдармен анықтайды. <TEXTAREA>...</TEXTAREA> тэгтерінің арасындағы мәтін, қалыпты жағдайда осы ұяшықтың ішінде орналасады. Қолданушы оны өзгерте немесе мүлде өшіре алады. Бұдан басқа формада тағы таңдау менюін қолдануға болады. Ол <SELECT> ашылатын тэгімен басталып (менюға ат беретін NAME міндетті атрибуты бар, ) және </SELECT> жабылатын тэгімен аяқталады. Олардың арасында меню элементін анықтайтын <OPTION> тэгі орналасады. Егер осы элемент таңдалса, міндетті VALUE атрибуты тұтынушыға жіберілетін мәндер қояды. <OPTION> тэгінде selected атрибутын қолдануға болады, ол қалыпты жағдайда қай элемент таңдалып тұрғанын көрсетеді.

<SELECT NAME="Аты"> <OPTION VALUE="option_1" selected> 1-ші мәтін <OPTION VALUE="option_2"> 2-ші мәтін <OPTION VALUE="option_n">n-ші мәтін </SELECT>

<SELECT> тэгінде MULTIPLE атрибутын қолдануға болады, ол меню ішінен бірнеше элементті таңдап алуға болатынын көрсетеді. Көп жағдайда <SELECT MULTIPLE> элементін бүтін ұяшық ретінде шығарып көрсетеді. Ол ұяшықтың ішіне менюдің барлық элементтері сияды. Ұяшықтың жол санын анықтау үшін SIZE= “сан” атрибуты қолданылады.

<SELECT MULTIPLE SIZE= “2” NAME="Аты"> <OPTION VALUE="option_1" selected>1-ші мәтін <OPTION VALUE="option_2"> 2-ші мәтін <OPTION VALUE="option_n"> n-ші мәтін </SELECT>

Мысал 1:

<HTML>

<HEAD>

<TITLE>

ПРИМЕР

</TITLE>

</HEAD>

<Body BGCOLOR="RED" FORM METHOD="POST" ACTION="сіздің _t-mail_адресіңіз">

<H1 align="center"><I> “Жұмысқа тұру” анкетасы</I></H1>

<p>

<H2>Аты-жөні:</H2>

<INPUT TYPE="TEXT" NAME="Аты" SIZE="30">

<H2>Мекен-жайы:</H2>

<INPUT TYPE="TEXT" NAME=" Мекен-жайы" SIZE="30">

<H2>Телефоны:</H2>

<INPUT TYPE="TEXT" NAME="Телефон" SIZE="10"><BR>

<H2>Жынысы:</H2>

<INPUT TYPE="RADIO" NAME="Таңдау 1" VALUE=" Ер бала ">Ер бала<BR>

<INPUT TYPE="RADIO" NAME="Таңдау 1" VALUE=" Қыз бала ">Қыз бала

</FORM>

</HTML>

Фрейм туралы түсінік.

HTML тілі браузер программасы терезелерін бірнеше бөліке бөліп тастау мүмкіндгін береді және олардың әрқайсысында жеке құжаттар бейнеленеді. Осындай бөліктерді фрейм деп атаймыз. Фрейм (ағылшын тілінен Frame – жиек, каркас, кадр) параметрлері және өлшемдері бойынша әртүрлі болып келетін бірнеше фреймдерге бөлінген браузер терезесінің жеке жұмыс аймағы болып табылады. Мұндай терезелердің жиынтығы фреймдік құрылым деп аталады. Әрбір фрейм – бұл браузер арқылы өзіне арналған терезеде жүктелетін HTML-құжат. Осылайша, фреймдік негізде құрылған HTML-құжат – параметрлері мен қасиеттері бүкіл фреймдік құрылыммен анықталатын, өзара байланысқан электронды құжаттардың жиынтығы.

1. Фреймдер құру үшін HTML-де ерекше құжаттар пайдаланылады, оның құрылымы кәдімгі құжаттардан бөлек болады. Бұл құжаттарда мәтін немесе файл бөлігі емес, <FRAMESET> және </FRAMESET> тэгтерінің арасында орналасқан фреймдер болады. Бұл сипаттамада браузер терезесіндегі бөліктердің өлшемдері мен олардың орналасу тәртібі сипатталады, сонымен қатар аталмыш бөліктердің әрқайсысынан шақырылуы тиіс құжаттар көрсетіледі. Файл атын ол орналасқан ішкі директорияларды көрсетіп, толық беру керек.

2. <FRAMESET> тэгі терезелерді бөлу әдістерін анықтайтын, COLS= және ROWS= міндетті артибуттарына ие. COLS=атрибуттарын пайдаланған уақытта терезелер тік сызықтармен, ал ROWS=атрибуттары арқылы колденең сызықтармен бірнеше бөліктерге бөлінеді. Егер аталмыш атрибуттың екеуі де берілсе, терезеде бөлікшелерден құралатын тор пайда болады.

Осы атрибуттардың мәндері терезе бөліктерінің биіктігін (немесе енін) анықтайды. Әр бағанға (жолға) арналған параметрлер пиксель өлшем бірлігі бойынша үтірлер арқылы немесе проценттермен (“%” белгісі) беріледі. Соңғы параметр ретінде (*) жұлдызша белгісін де пайдалануға болады. Осындай фрейм үшін барлық қалған бос кеңістіктер беріледі.

3. <FRAMESET> және </FRAMESET> тэгтерінің арасында қалыптастырылған бөліктердің қажеттілігін көрсететін қосымша тэгтер орналастырылады. Осы мақсатта терезені қосымша бөлу мүмкіндігін беретін, ендірілген <FRAMESET> тэгін немесе экрандағы жеке бөліктеріне шақырылатын құжаттарды анықтайтын, жеке даралық <FRAME> тэгтерін пайдалануға болады. <FRAMESET> және </FRAMESET> тэгтерінің араларына орналастырылған элементтердің саны қалыптастырылған бөлік санына сәйкес болуы керек.

4. <FRAME> тэгінде аталмыш бөлікке шақырылатын құжаттарды анықтайтын SRC=міндетті атрибуттары болуы керек. Қосымша атрибуттар жеке фреймдер арасындағы қоршауларды және оның басқа кейбір қасиеттерін реттеу мүмкіндігін береді.

Мысалы:

<FRAME SRC= “файл аты.html”>

Мысал 2. <html> <head> <title> Мысал 2 </title> </head> <FRAMESET COLS="50%,50%"><FRAME SRC="1.html"><FRAME SRC="2.html"></FRAMESET> </html>