- •Html-құжатын құрудың базалық негізі. Html-құжаттың негізгі тәгтері
- •Теориялық мағлұмат
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Сырғымалы жолдарды және тізімдерді ұйымдастыру
- •Теориялық мағлұмат
- •Зертханалық жұмысты орындау реті
- •Html-құжаттарында кестелермен жұмыс
- •Теориялық мағлұмат
- •Html бірнеше тізім түрлерін ұйымдастыра алады Нөмірленбеген тізімдер
- •Нөмірленген тізім жолдары
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Теориялық мағлұмат
- •1 Сурет. Терезені көлденең фреймдерге бөлу
- •2 Сурет. Браузерды 3-фреймге бөлу.
- •3 Сурет. Браузерды 3-фреймге бөлу және сурет қою.
- •4 Сурет. Браузерді бірнеше фреймдерге бөлу.
- •5 Сурет. Фреймды әр-түрлі өлшеммен орналастыру.
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Html құжаттарындағы формалар
- •Теориялық мағлұмат
- •5 Кесте
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Html тіліндегі стильдердің сатылы кестелері Жұмыстың мақсаты: Html тіліндегі стильдердің сатылы кестелері пайдалану арқылы сайт құруды үйрену. Теориялық мағлұмат
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Css қасиеттеріне шолу. Түстерді тағайындау
- •Теориялық мағлұмат
- •1 Сурет. Серифтік қаріп
- •2 Сурет. Жұмыр қаріп
- •3 Сурет. Бірдей енді қаріп
- •Түстерді тағайындау. Стильдік қасиеттер түстерді тағайындаудың үш түрлі тәсілін береді:
- •Зертханалық жұмысқа берілген тапсырмалар
- •1 Кесте
- •Зертханалық жұмысты орындау реті
- •JavaScript тілі. Бірінші скриптер
- •Теориялық мағлұмат
- •Alert функциясы бойынша бірнеше тәжірибе жазамыз. Шығу тапсырмасын орындаңыз (сурет-1).
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Бақылау сұрақтары:
- •Рнр скриптерімен жұмыс Жұмыстың мақсаты: рнр тіліндегі қарапайым типтермен жұмыс істеуді үйрену. Теориялық мағлұмат
- •// Выводит: Его зовут "Бекзат", а другого "Азат".
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Php тілінде шартты операторлары мен цикл операторлары Жұмыстың мақсаты:рнр тіліндегі шартты және цикльдерді қолданып бағдарлама құруды үйрену. Теориялық мағлұмат
- •1:7 Цикл работает
- •2:2 Цикл работает
- •1:10 Цикл работает
- •2:5 Новая итерация 2:1 Цикл работает
- •3:1 Цикл работает
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Php тілінде файлдармен жұмыс
- •Теориялық мағлұмат
- •Include 'имя_файла';
- •Include ("имя_файла");
- •Include.Php файлы мәтіні:
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •Apache, php, MySql орнату және түзету
- •Теориялық мағлұмат
- •Зертханалық жұмысты орындау реті
- •Php MyAdmin-де жұмыс істеу
- •Теориялық мағлұмат Мәлімет қорын анықтау
- •Зертханалық жұмысқа берілген тапсырмалар
- •Зертханалық жұмысты орындау реті
- •DreamWeaver-мен жұмыс істеу. Қарапайым Web беттерді құру.
- •Зертханалық жұмысқа берілген тапсырмалар
- •Ашылған терезеден file/new таңдаймыз төмендегідей терезе пайда болады.
- •Зертханалық жұмысты орындау реті
- •Қолданылған Әдебиет
- •Мазмұны
5 Кесте
Атрибут |
Атқаратын қызметі |
NAMESIZE |
Енгізу өрісінің символдар санымен берілген енін көрсетеді |
MAXLENGTH |
Өріске енгізуге болатын ең үлкен символдар санын (максимальды) анықтайды |
VALUE |
Мәтіндік өріс үшін алдын ала келісім бойынша шығарылатын мәтінді анықтайды. Жалаушалар мен ажыратып-қосқыштар үшін өңдеу программасына қайтарылатын мәнді көрсетеді. Формаларды жөнелту мен тазарту батырмалары үшін батырма үстіндегі жазуды анықтайды. |
CHECKED |
Жалауша немесе ажыратып-қосқыштың, алдын ала келісім бойынша, іске қосылған жағдайын орнатады.Басқа тәг түрлерінде <INPUT> қолданылмайды. |
TYPE |
Енгізу өрісі типін (түрін) орнатады. |
Енгізу өрісі түрі, <TYPE> атрибуты. <INPUT> тәгінің <TYPE> атрибуты мәндері кестеде көрсетілген. 6 кесте
Атрибут |
Атқаратын қызметі |
1 |
2 |
TEXT |
Мәтін енгізуге арналған өріс құрылады, ол бірнеше жолдан тұруы мүмкін. Бұл өріс типі үшін NAME (міндетті түрде), SIZE, VALUE және MAXLENGTH атрибуттары қолданылады. TYPE атрибуты көрсетілмесе, осы ТЕХТ сөзі алдын ала келісім бойынша орнатылатын мән болып табылады. |
PASSWORD |
Пароль енгізілетін өріс құрылады, оған терілген таңбалар көрсетілмей, жұлдызшалармен ауыстырылып көрсетіледі. Бұл өріс типінің параметрлерін айқындау үшін SIZE, VALUE және MAXLENGTH атрибуттары қолданылады. |
CHECKBOX |
Шағын квадрат ішіне жалауша () орналастыруға арналған өрістер құрылады, ол бірнеше нұсқаны таңдауға мүмкіндік береді. Бұл өріс типі үшін NAME, VALUE және CHECKED (жалаушаның алдын ала бекітілген мәнін анықтайды) атрибуттары қолданылады. Мысалы:
|
RADIO |
Бірнеше батырмалар жасап, олардың ішінен біреуін таңдауға мүмкіндік береді. NAME, VALUE және CHECKED атрибуттары қолданылады. Мысалы, төмендегідей:
|
RESET |
Форманы тазартуға арналған батырма жасауға мүмкіндік береді. VALUE атрибуты бұл жерде осы батырмаға ат беру үшін қолданылуы мүмкін (алдын ала келісім бойынша батырмаға RESET деген ат беріледі) |
SUBMIT |
Енгізілген мәліметтерді серверге жөнелтіп, скрипт-программа арқылы оларды өндеуді жүзеге асыратын батырма жасау үшін қолданылады. VALUE атрибутында бұл батырманың аты көрсетілуі мүмкін (келісім бойынша аты – SUBMIT QUERY). |
Мысал:
Келесі формада ТYPE атрибутының TEXT мәні қолданылады.
<HTML>
<BODY>
<FORM> Телефон нөміріңізді енгізіңіз:
<INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="15" >
</FORM>
</BODY>
</HTML>
|
|
TYPE атрибутының PASSWORD мәнінің қолданылуы.
<HTML>
<BODY>
<FORM> Құпия сөз енгізіңіз:
<INPUT TYPE=”PASSWORD” NAME=”SECRET_WORD”
SIZE=”30” MAXLENGTH=”30”>
</FORM>
</BODY>
</HTML>
|
|
TYPE атрибутының CHECKBOX мәнін қарастырайық.
<HTML>
<BODY>
<FORM>
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX1”
VALUE="checkbox_value1"> Вариант
<BR>
<INPUT TYPE="checkbox" NAME="checkbox2"
VALUE="checkbox_value2" CHECKED>
Алдын ала таңдалған нұсқа
</FORM>
</BODY>
</HTML>
Келесі мысалда батырмалар жасалады, екі-екіден батырмасы бар екі форма кестенің көршілес ұяшықтарында орналасқан.
|
|
<HTML>
<BODY>
<TABLE ALIGN=CENTER BORDER CELLSPACING=10>
<TR>
<TD> 1 форма:
<FORM>
<INPUT TYPE="RADIO" NAME="CHOICE"
VALUE="CHOICE1"> yes
<INPUT TYPE="RADIO" NAME="CHOICE"
VALUE="CHOICE2"> no
</FORM>
</TD>
<TD> 2 форма:
<FORM>
<INPUT TYPE="RADIO" NAME="CHOICE"
VALUE="CHOICE1" CHECKED> yes
<INPUT TYPE="RADIO" NAME="CHOICE"
VALUE="CHOICE2"> no
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
|
Келесі формада TYPE атрибутының RESET мәні, яғни енгізілген мәліметтерді тазарту жолы қолданылған, нәтижесі 16 суретте көрсетілген.
<HTML>
<BODY>
<FORM> Аты-жөніңізді енгізіңіз:
<INPUT TYPE="text"> <BR>
Телефоныңыз: <INPUT TYPE="text"> <BR>
<INPUT TYPE="reset" VALUE="Форманы тазарту">
</FORM>
</BODY>
</HTML>
Енді TYPE атрибутының SUBMIT мәнін қолданайық
<HTML>
<BODY>
<FORM>
<TEXTAREA> Маған сен ұнайсың! </TEXTAREA> <BR>
<INPUT TYPE="submit" VALUE="мәліметтерді жөнелту!">
</FORM>
</BODY>
</HTML>
|
|
Форма элементтерін стандарттан тыс қолдану. HTML тәгтерінің көбісі қолдану кезінде өздерінің негізгі қызметтерінен басқа колледжтарда пайдаланылып жатады, мысалы, кестелер парақтарды белгілеу үшін қолданылады. Сондықтан форма элементтерін қолдану кезінде әр түрлі тәжірибе жасаудан тартынуға болмайды.
|
|
Осындай колледжтарда таңдау менюін пайдаланған ең ыңғайлы тәсіл болып табылады. Суырылып шығатын меню ақпараттық ағынға енгізілген мәтіндік алап (жол) қызметін атқара алады. Мысалы, таңдау менюін шағын әңгімелер енгізу үшін қолдануға болады (OPTION элементтеріне мәтін үзінділерін енгізу арқылы). Бұл мүмкіндіктерді қолдану оқырмандарды осы парақ мәліметтерімен екпінді түрде жұмыс жасауға шақырады. Төменде суырылып ашылатын тізімнің автор туралы шағын әңгіме орналастыру үшін қолданылғанын көрсететін HTML-құжаты келтірілген. Мысалдағы “Автобиография” батырмасын басқаннан кейін қандай болатыны бейнеленген.
|
|
Осы суретке сәйкес программа мәтіні:
<HTML> <BODY> Өзім туралы бір ауыз сөз:
<FORM>
<SELECT NAME="about">
<OPTION SELECTED VALUE="line0"> Автобиография
<OPTION VALUE="line1">-----------------------------
<OPTION VALUE="line2"> Менің атым Әйгерім.
<OPTION VALUE="line3"> Мен 1-курс студентімін.
<OPTION VALUE="line4"> Маған ұнайтындар: ән айту, сурет салу, теннис ойнау.
<OPTION VALUE="line5"> Маған мына адреске хат жолдай аласыздар:
<OPTION VALUE="line6"> aygerim@mail.kz
</SELECT>
</FORM>
</BODY>
</HTML>
Енді формалардың бірсыпыра мүмкіндіктерін қамтитын тағы бір мысал келтірейік
<html> <head> <title>Формы</title> </head>
<body>
<form action="http://www.mysite.com/cgi-bin/test.exe" method="post">
<br>Мәтін енгізілетін өріс <input type="text">
<br>Пароль енгізілетін өріс <input type="password">
<br>Тәуелсіз қосқыш <input type="checkbox" value=" checked">
<br>Радиобатырмалар:
<br>1 вариант <input type="radio" name="groupl" value="checkl">
<br>2 вариант <input type="radio" name="groupl'' value="check2 checked>
<br>3 вариант <input type="radio" name="groupl" value="check3">
<p> <input type="submit" value="Жөнелту">
</form>
</body>
</html>
