Пример 1

Дата добавления: 2014-11-24 | Просмотров: 1880

<== предыдущая страница | Следующая страница ==>

1 баған 2 баған 3 баған
1х1 1х2 1х3
2х1 2х2 2х3

2. Кестені әспеттеу (жақтау).

<table> тегінің ішіндегі border=?атрибуты ? – бұл кестенің пиксельмен берілген ені.

 

2 ТАПСЫРМА:

Берілген кестенің жанына қалыңдығы 3 пиксель жақтау тұрғызыңыз.

 

3. Кесте заголовкасын анықтау.

Тег <CAPTION>

Мысал:

<TABLE BORDER=5>

<CAPTION>ДОМИНО</CAPTION>

 

3 ТАПСЫРМА:

1. 1-ші мысалға «Мои первые шаги в построении таблиц» заголовкасын беріңіз

2. Оны курсив, қою етіңіз.

4. Кестедегі жақтау және ұяшық түсі.

3.1. <table> тегі ішіндегі bordercolor=? атрибуты ? – бұл жақтау түсі (аты немесе коды)

3.2. Атрибут bgcolor=?, ? – кестедегі ұяшық түсі

Түсті түгел кестеге, жолға, бағанға беруге болады (бір жол шеңберінде).

Мысал:

1. <table bgcolor=#FFCC33> - түгел кестенің түсі

2. <tr bgcolor=#FFCC33> - жол ұяшықтарының түсі

3. <td bgcolor=#FFCC33> - белгілі бір ұяшық түсі

4 ТАПСЫРМА:

1. 1-ші мысал жақтауына жасыл түс беріңіз.

2. 2 және 3 жолдарға, шахмат тәсілін қолдана отырып, түс беріп, 1-ші мысал кодын аяқтаңыз.

5. Кестенің графикалық фоны.

background=”?” атрибуты кестеге(жолға, ұяшыққа) фондық сурет береді, ? – фон құжатының аты және оған жолды көрсетеді

 

 

Мысалы:

1. <table border=10 background=”Мечта.jpg”> - Кесте фонының түсі

2. <th background="white.gif">&nbsp;</th> - белгілі бір ұяшықтың түсі

5 ТАПСЫРМА:

1-ші мысалдағы кестенің бірінші жолындағы ұяшықтарға фондық сурет енгізіңіз.

6. Кесте өлшемін өзгерту.

width=?және height=?атрибуттары–кете ұяшықтарының енін және биіктігін береді (кестенің кез келген тегінде қолданылады), сұрақ белгісінің орнына, пиксельмен немесе пайызбен (кестенің жалпы еніне байланысты) ұяшықтың өлшемін енгізіңіз.

 

Атрибутты барлық кестенің, бір жолдың немесе бір ұяшықтың өлшемін беру үшін қолдануға болады.

 

Мысал:

<table width=60> - Кестедегі барлық ұяшықтардың ені енгізіледі

<td height=35 width=50 bgcolor=#FFCC33>1x1</td> - Бөлек ұяшықтың өлшемі
<tr width=30%> - жолдағы барлық ұяшықтың өлшемі

6 ТАПСЫРМА:

1. 1-ші мысалдағы кесте ұяшықтарының өлшемін(ені және биіктігі) өсіріңіз.

2. Ортаңғы бағанның өлшемін өзгертіңіз. Нәтежені браузерден сараптаңыз.

3. Кестенің бірінші жолындағы ұяшықтардың ұзындығын өзгертіңіз. Басқа жолдармен не болды?

 

7. Кесте ұяшығындағы мәліметтерді туралау.

<tr> және <td> тегтеріндегі valign= middle (top, bottom)атрибуты кестедегі мәліметті тігінен түралауды береді (ортасында, үстінде, астында).

 

align=center (right, left)атрибуты ұяшықтағы мәліметті көлденеңінен туралайды.


Мысал:

<td valign=middle> - ұяшықтағы мәтінді ортаға туралау

7 ТАПСЫРМА:

1мысалындағы кесте ұяшықтарын суреттегідей етіп орналастырыңыз:

8. Ұяшықтарды біріктіру.

colspan=?атрибуты–бір жолдағы бірнеше бағанның ұяшықтарын біріктіру

rowspan =? атрибуты– бір бағандағы бірнеше жолдың ұяшықтарын біріктіру

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


Мыссал:

<TH COLSPAN=3> - ұяшық 3 бағанды қамтитынын білдіреді.

<TH ROWSPAN=2> - ұяшық екі жолды біріктірген

 

NOWRAPатрибуты ұяшықтағы мәліметтер бір жолда көрсетілу керектігін білдіреді.

Мысал:

<TH NOWRAP>

 

8 ТАПСЫРМА:

1. Бастапқы кестенің көшірмеін оның төмен жағына салыңыз.

2. 1-ші мысалдағы №1 текстені, colspan параметрін қолдана отырып, суреттегідей етіп өзгертіңіз (бұдан шыққын ұяшықты құжаттан кетіріп тастаңыз):

 
 


 

3. суретке қарай отырып №2 кестеге өзгеріс енгізіңіз. rowspan параметріне мән беріңіз.

 

 

4. 1-ші кестенің кодын төмендегідей қалыпқа енгенше қайта жазыңыз:

 

9. кестедегі ұяшықтардың шекара енін анықтау.

<table> тегіндегі cellspacing =? атрибуты, сұрақ белгісінің орнына шекара ені пиксельмен беріледі.

 

<table> тегіндегі cellpadding=? атрибуты, ұяшық жақтауы мен мәтін арасындағы қашықтықты пиксельмен көрсетеді.

 

9 ТАПСЫРМА:

1. құжаттың бірінші кестесіне cellspacing=0 мәнін беріңіз.

3. екінші кестеге cellspacing=5 мәнін беріңіз

4. нәтежені ббраузерден қараңыз.

5. 1 кестеге cellpadding=6 мәнін беріңіз.

6. Нәтежені браузерден қараңыз.

 

10. Кестені мәтінмен қоршау

<TABLE>дескрипторының ішіндегі ALIGN=left (right) атрибуты

<BR CLEAR> (left, right, all) – қоршауды сол жақтан, оң жақтан, барлық жерінен тоқтату.

 

Ескерту:

Егер кесте орта бойынша тураланса, онда мәтінмен қоршау жүзеге асырылмайды, Мысал:

<table align=center border=1>

 

10 тАПСЫРМА:

1. Құжатыңыздың соңына «Посмотрите, какие замечательные таблицы у меня получаются» мәтінін енгізіңіз

2. Ол кеі кестенің ортасында орналасатындай етіп қоршаңыз.

 

ҚОСЫМША:

Енгізілген кесте құру.

· Элемент ретінде басқа кестені құрайтын, кесте жасақтаңыз, және тиісті ұяшықтарды бос қалдырыңыз.

· Бағынышты кесте салу керек ұяшықтың мәтін аймағын шертіңіз.

· Салынған кестені, кесте құрудың жалпы ережелерін қолға ала отырып түсіндіріңіз

· HTML – код енгізерде өзінің шегеру жүйесіне сүйеніңіз.

 

Мысал:

Кесте құру жолымен коптеген қызық мысалдар жасақтауға болад:

Различные таблицы в IE

11 ТАПСЫРМА:

1. Бастапқы мысал бойынша кесте құру.

2. кестедегі крестик орнына кішкене көлемдегі сіреттер салыңыздар (сурет мәтінге сай болу керек)

3. Сурет ашылмай қалатын жағдайға арнап суретке анықтама беріңіз.

4. Кестеге заголовок беріңіз.

5. барлық құжатжа және кестенің 1-ші жолындағы ұяшықтарға арнап фон беріңіз.

6. Басқа ұяшықтардағы түсті өз қалауыңыз бойынша орнатыңыз.

7. Жұмыстың нәтежесін оқытушыға көрсетіңіз.

 

 

 

Бақылау сұрақтары:

1. Кесте құру үшін қандай тегтер қолданылады?

2. Қандай тегтер жол жасау үшін қызмет етеді?

3. Қандай атрибуттар көмегімен ұяшықтарды біріктіруге болады?


Зертханалық жұмыс №7.

Жұмыстың мақсаты:сілтемелердің навигациялық картасын құру және олармен жұмыс жасауды үйрену

 

Бұрын біз сүретпен тек қана бір құжатқа сілтеме жасай алатынбыз.

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

Ол суретті (дайын немесе қолданушы салған), әрбіреуінің өзіндік гиперсілтемесі бар бірнеше бөліктерге бөлгендей болады.

 

Навигациялық карталар <Map>тегінің көмегімен жасалады.

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

Карта құру үшін келесі іс-әрекетті орындаңыз:

  1. Кез келген графикалық редакторды ашыңыз (біздің жағдайда – бұл Paint).
  2. Беттің енін және биіктігін 200х200 нүкте ретінде орнатыңыз (Сурет- Атрибуттар)
  3. мысалдағыдай сурет салыңыз (жақтаусыз):

 
 


 

  1. №1-ші тікбұрышты аймақтың сол жақ – жоғары және оң жақ-төменгі координаттарын анықтаңыз.

 

 
 


 

  1. құжатты дискідегі HTML каталогына Области.bmp атымен сақтаңыз.

6. бұрын құрылған prf.html құжатының соңына, жаңа жолдың ортасына <img> тегінің көмегімен жасалған суретті шығарыңыз

 

  1. нәтежені браузерден қараңыз және оны оқытушыға көрсетіңіз.
  2. prf.html құжатының соңына браузер сілтемелер картасын анықтау үшін тегтер енгізіңіз:

 

<map>

<area><! <area> тегі картаны көрсету аймағын анықтайды >

</map>

 

  1. <area> тегінің ішіне аймақтың геометрялық бейнесін анықтау үшін мәндер енгізіңіз:

 

<area shape=?><!<shape> атрибуты аймақтың формасын анықтайды>

Сұрақ белгісінің орнына сіздің аймағыңыздың түріне тән бір мән беріңіз:
rect (тікбұрыш) , circle (дөңгелек), poly (көпбұрыш)

  1. аймақ координатын белгілеу үшін (пиксельмен, 1 нүкте=1 пиксель) <area> тегіне coords=? атрибутын қосыңыз. Сұрақ белгісінің орнына, қажетті нұсқаны таңдап, бұған дейін анықталған аймақ координатасын енгізіңіз:

Coords=x1,y1,x2,y2 –тікбұрыштың сол жақ-жоғарғы (x1,y1) және оң жақ-төменгі (x2,y2) координаттары

Coords=x0,y0,r –дөңгелектің центр (x0,y0) және радиус (r) координаттары

Coords=x1,y1,x2,y2,x3,y3,…,xN,yN –көпбұрыштың барлық бұрыштарының координаттары.

  1. картаның бірінші аймағына, <area> тегінің ішіне Href=?командасын қолдана отырып, http://iubip.ru/институт сайтына сілтеме жасаңыз
    сұрақ белгісі, шерткеннен кейін ашыла,Web – беттің (сайттың) адресімен өзгертіледі
  2. <area> тегінің бойына Alt=?атрибутын жазыңыз, ол экранға аймақтың мәтіндік анықтамасын шығаруға мүмкіндік береді.
    Сұрақ белгісінің орнына қазіргі жағдайға байланысты: «Здесь вы можете попасть на сайт института» деп жазыңыз
  3. Жалпы алғанда сізде мынадай команда болу керек:

<area shape=? coords? Href=? Alt= Здесь вы можете попасть на сайт института>,

Сұрақтың орнына – сіздің аймағыңыздың тиісті мәндері (жоғарыдан қара).

  1. сурет сілтеме болу үшін картаның атын беру керек:

<map name=”?”>
? – бұл қолданушының сілтемесер картасына берген атык, мысалы: karta_1

15. <img> тегінің ішінде usemap=”#?”атрибутының көмегемімен карта атын суретпен байланыстырыңыз
сұрақ белгісі – бұл <map>-тағы картаның аты.

  1. <body>-да негізгі, бұрын таңдалған және белсенді сілтемелердің түсін беріңіз.
  2. Енгізілген барлық өзгерісті сақтаңыз.
  3. Браузерден қарап, сілтемелердің жұмысын қараңыз.
  4. Нәтежені оқытушыға корсетіңіз.
  5. қалған екі аймақтың координатын <area> тегінің көмегімен өзіңіз енгізіңіз (тегте әр түрлі HTML-құжаттарға сілтеме жасаңыз).
  6. Результат предъявите преподавНәтежені оқытушыға көрсетіңіз.
  7. <map>-қа жаңа команда енгізіңіз:
    <area shape=circle coords=x, y, z href=prf.html alt = произвольная область>

( X, Y, Z айнымалыларының орнына шамамен суреттің ортасын білдіретін координаттарды таңдаңңыз).

Координатты таңдар кезде мынаны еске алыңызо:

Координата басы (0,0) монитордың сол жақ жоғары бұрышы; ОХ өсі бойынша шамамен 800 нүкте (пиксель); ОУ өсі бойынша шамамен 600 нүкте.

X2
X1

X
0,0

 

           
   
 
   
X2Y2
 
 

 

 


24. <area> -ның қалған тегтерін, олардың жұмысын уақытша тоқтата тұру үшін. жақшаға алыңыз.

  1. Құжатты сақтаңыз, браузер терезесіне өтіңіз және сурітіңіздің ортасын шектіп, сілтемелерді тексеріңіз(сілтемелердің қызметіне назар аударыңыз).
  2. Жаңа аймақтың координаттарын, ол суреттің оң жақ-жоғарғы бұрышын анықтайтындай етіп өздігіңізбен өзгертіңіз.

Өздігіңізбен:

Мәзір түрінде өзіңіздің Моя_Карта.html атты навигациялық картаңызды құрыңыз (суретті қара), сіздің картаңыздағы аймақтарды шерткенде, картадағы ақпаратқа тән әр түрлі беттер ашылу керек.

 

Бақылау сұрақтары:

1. Сілтеменің навыгациялық картасын қандай тегтердің көмегімен құруға болады?

2. Карта құру үшін қандай атрибуттар қолданылады?

3. <MAP> тегі нені білдіреді?

 

Зертханалық жұмыс №8.

Жұмысьың мақсаты:фреймдер жасауды үйрену

 

1. Негізгі түсініктер.

Frame-(рамка)- әрбіреуі өзіндік HTML-құжаттан тұратын, экранның тікбұрышты аймағы. Тэг, Web-беттерді терезелерге бөлу үшін арналған.

 

Фреймы келесі құжаттарды әспеттеуге өте қолайлы:

Бастама. Егер Web-бетке бастаманы тік бағана ретінде орнатсаңыз, онда қолданушылар оған кез келген уақытта жүгіне алады.

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

Формы және нәтежелер. Бір фреймде форма құрып, ал екіншісінде сұраудың нәтежесін көрсетуге.


2. Фрейм тегтері:

  1. <frameset></ frameset >- экранды бөлу үшін қолданылады (<body> тегін ауыстырады)

Атрибуты:

 

COLS Экранды тігінен бөледі. Ол пиксель, пайыз және жай ғана * мәндерді қабылдайды. * мәні бұл баған экранның қалған бөлігін толықтай алады деген сөз
ROWS Экранды көлденеңінен бөледі. Ол пиксель, пайыз және жай ғана * мәндерді қабылдайды. * мәні бұл жол экранның қалған бөлігін толықтай алады деген сөз
FRAMEBORDER Жақтаудың яғни фрейм шегін анықтайды. "yes" немесе "no" мәндерін қабылдайды
BORDER Жақтайдың енін пиксельмен анықтайды
BORDERCOLOR Жақтаудың түсін анықтайды. Үнсіз келісім бойынша (егер Windows қалыпты түстері қолданылған болса) Фреймнің шектері күңгірт түсті болады

 

Ескерту: <FRAMESET> бөлек тегінде COLS немесе ROWS атрибуттарын қолданған жөн. Бұл фреймнің құрылымы тек қана бағаннан немесе тек қана жолдан құралады дегенді білдіреді. Бағанның ішінде жол немесе жолдың ішінде баған құру үшін, сізге <FRAMESET>…</FRAMESET> контейнері қажет.

 

 


  1. <frame> – <FRAMESET>…</FRAMESET> контейнеріне орналасады, ол нақты фреймде не көрсетілу керектігін анықтайды. Жабылу тегі жоқ.

 

Атрибуты:

SRC Нақты фрейммен байланысқан URL-ды анықтайды
MARGINWIDTH Фреймдегі ақпарат пен оның шектерін оң жағы және сол жағы бойынша қашықтықты анықтайды
MARGINHEIGHT Фреймдегі ақпарат пен оның шектерін жоғарғы жағы және төменгі жағы бойынша қашықтықты анықтайды
SCROLLING Айналдыру жолағының барлығын анықтайды. Төмендегі мәндерді қабылдайды "yes", "no" және "auto"(по умолчаүнсіз келісім бойынша).
NORESIZE Фрейм шегін «қатты бекітеді» және қолданушыларға оны өзгертуге мүмкіндік бермейді. Сонымен қатар онымен шектескен барлық фреймді де бекітеді.
FRAMEBORDER, BORDER, BORDERCOLOR Бұл атрибуттар жақтаумен байланысты және <FRAMESET> тегіне ұқсайды
NAME Фреймнің атын анықтайды. Фреймдердің жүктелу процесін қадағалауға мүмкіндік береді. Егер фреймнің ерекше аты болса, онда оған басқа фреймнен жүгінуге болады. Аттар сызықтан "_" басталмауы қажет, әйтпесе ол есепке алынбайды. Себебі бұл символдан кейбір қызметтік аттар басталады.

 

3.

 

Тапсырманың қойылымы.

Жоғарғы және төменгі терезеге бөлінген бетше жасау. Жоғарғы терезеге «Священный Байкал» сөзін орнату. Төменгі терезеге мағынасы бойынша таңдап алынған кез-келген бір суретті орнату.

 
 

4. Тақырыпты құру жоспары

1. Егер сізде жоқ болса, жаңадан Baikal атты папка құрыңыз.

2. Басты құжатты құру.

Келесі кодты теріңіз:

<html>

<head><title>FRAME ROWS</title></head>

<frameset rows =20%,80%>

<frame name = frametop src = top.htm>

<frame name = framebоttom src = bоttom.htm>

</frameset>

<html>

Бұл құжатты twowin.htm деп сақтаңыз.

3. Жоғарғы терезені толтыру.

Келесі кодты теріңіз:

<html>

<head><title>Верхнее окно</title></head>

<body>

<h2>Священный Байкал </h2>

</body>

</html>

Бұл құжатты міндетті түрде баста құжатта корсеткен атпен сақтаңыз, яғни: top.htm.

Бұл құжаттың браузерден көрінуін тексеріңіз.

4. Төменгі терезені толтыру.

Келесі кодты теріңіз:

<html>

<head><title>Нижнее окно</title></head>

<body>

<img src = ………> (көпнүктенің орнына сіздің суретіңіздің атын жазыңыз)

</body>

</html>

Бұл құжатты міндетті түрде баста құжатта корсеткен атпен сақтаңыз, яғни: bottom.htm.

Бұл құжаттың браузерден көрінуін тексеріңіз.

 

4. Web-браузерге басты құжатты жүктеңіз (twowin.htm) және де Web –беттің екі беті де толтырылғанын қадағалаңыз.

 

ҚОСЫМША:

1. Жаңа Web-бетті оң және сол жақ тік терезеге бөліңіз

2. Бетті үш бөлікке бөліңіз: Жоғарғы бөлігі көлденең болсын, ал төменгі бөлігі тік екі бөлікке бөлсін (бұл кезде бөлу сызығы Т тектес боп тұрады).

Көмек. Вложенный фрейм қолданыңыз (ол қою шрифтпен белгіленген):

<Frameset rows =20%, 80%>

<Frame Name=Frame1 src=f1.htm >

<Frameset cols=40%,60%>

<Frame name=Frame2 src=f2.htm>

<Frame name=Frame3 src=f3.htm>

</Frameset>

</Frameset>

3. Қолданушылар өзгертпес үшін бөлшек сызықтарды бекітіңіз.

4. Бөлшек сызықтар көрінбейтіндей етіңіз.

5. Толтырылған терезелерді ауыстырыңыз: мәтінді суретке, суретті мәтінге.

6. Жоғарғы фреймнен айналдыру жолағын алып тастаңыз.

Бақылау сұрақтары:

1. Қандай тегтер көмегімен фреймдер құруға болады?

2. Фреймдер үшін қандай атрибуттар қолданылады?

3. <framename> тегі нені білдіреді?

Зертханалық жұмыс№9.

Жұмыстыың мақсаты:Формалар құруды үйрену

 

Форма

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

Алдымен сайттағы қарапайым форма қандай болатынын көрелік:

Начало формы

Аты-жөні.  
Жынысы ер.әйел.
Жасы 1-10 11-17 18-21 22-49 более 50

Сіздің пікіріңіз:

Конец формы

"Тазарту" батырмасы форма жолына енгізілген барлық мәліметті кетіреді. "Жіберу" батырмасы мәліметтерді сайттың авторына белгіленген түр бойынша жібереді. Форма жасаудың жалпы нұсқасы осындай.

<FORM>
Форма жолдырының тегтері
</FORM>

Сонымен, форма жолдары қандай болады және олар не үшін арналған?

Мәтіндік жол (TYPE=TEXT)

Бұл жол,қолданушы шартты ақпаратты бергенде, азғантай мөлшердегі символдар енгізуге арналған.

мыссалы:

<INPUT TYPE=TEXT NAME=Tekst SIZE=20 VALUE="Здесь текст">

Нәтеже:

Осылайша мәтіндік жол <INPUT> тегінің көмегімен TYPE=TEXT параметрін қолдана отырып жасалады. Бұл тегтің басқа параметрлері нені білдіреді?

NAME

Серверге берілетін айнымалының аты. Айнымалыға қолданушы енгізген жолдың нәтижесі беріледі. Жалпы айтқанда HTML-да форма құру серверде программалаумен тығыз байланысты. Бірақ бұл басшылықта оны әңгімелемейтін боламыз. Оның орнына, сіз осы сервердегі дайын бағдарламаны қолданып, оз қолданушыларыңыздан осы бағдарлама арқылы хат ала аласыз.

 

SIZE

Мәтіндік жолдың ені. Біздің мысалда оның мәні 20-ға тең. Бұл енгізуге арналған жолдың ені 20 симолға тең деген сөз. Қолданушы одан да көп символ енгізе алады, бірақ ол тек қана 20-сын оқиды. Пернетақтадағы бағыттауыштардың көмегімен енгізілген мәтіннің басына немесе соңына жылжуға болады.

VALUE

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

Жауаптың нұсқасы (TYPE=RADIO)

Бірнеше жауаптардың ішінен қолданушы тек қана бір жауапты таңдай алады.

Мысалы:

Пол:
<INPUT TYPE=RADIO NAME=Sex VALUE="Ер адам">Ер.
<INPUT TYPE=RADIO NAME=Sex VALUE="Әйел адам">Әйел.

Нәтеже:
Жынысы: Ер. Әйел

Көріп тұрғандай жауапатар нұсқасы TYPE=RADIO параметрін қолдана отырып <INPUT> тегінің көмегімен жасалады. NAME параметірінің мәні бірдей болу керектігіне мән беріңіз, әйтпесе бұлар өзгеше сұрақтар болады

VALUE

Бұл мән айнымалының мәні ретінде жүреді (біздің мысалда, Ер. таңдасақ, онда Sex айнымалысы 'Ер адам' – ға тең болады).

Мақұлдау (TYPE=CHECKBOX)

Кебір мәндерді немесе жауап нұсқаларын белгілеу үшін қолданылады

Мысал:

Пол:
<INPUT TYPE=CHECKBOX NAME=AddMe VALUE="Жазылу">
Иә, мен сіздің сайттан жаңалықтар алғым келеді

Мысалы:
Иә, мен сіздің сайттан жаңалықтар алғым келеді

 

Ашылмалы мәзір (SELECT)

Бір нұсқаны таңдау үшін, ашылмалы мәзір түрінде берілетін жауаптардың бірнеше нұсқасы.

Мысал:

Возраст:
<SELECT NAME=Age>
<OPTION VALUE=10>кіші 10
<OPTION VALUE=11-20>11-20
<OPTION>үлкен 21
</SELECT>

Нәтеже:
Жасы:

 

Ашылмалы мәзір <SELECT> тегінің көмегімен құрылады. Ашылмалы мәзірдің нұсқалары <OPTION> тегі арқылы жасақталады.

 

NAME

<SELECT> тегіне ат беретін айнымалы. Бұл айнымалыға таңдалған жауаптың нұсқасы таңдалады. Біздің жағдайымызда айнымалы Age деп аталады.

VALUE

Егер берілген нұсқа таңдалса, мәнді айнымалыға теңейтін <OPTION> тегінің параметрі. Егер параметр таңдалмаса (<OPTION> үшінші тегінде көрсетілгендей), онда айнымалының мәні <OPTION> тегінен кейінгі мәтінді қабылдайды. Егер біздің мысалда үшінші жауап таңдалған болса, онда Age айнымалысы '21-ден жоғары' мәніне тең болады, ал егер бірінші нұсқаны таңдасақ, онда '10'.

<OPTION> тегінен кейінгі мәтін, ашылмалы мәзірде нұсқа ретінде көрінетін болады. Айтпақшы, <OPTION> тегін жабу қажет емес.

Мәтіндік жол (TEXTAREA)

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

Мысал:

Сіздің пікіріңіз:
<TEXTAREA NAME=Comments COLS=20 ROWS=5>
пікіріңізді жазыңыз
</TEXTAREA>

Нәтеже:

Сіздің пікіріңіз:

Мәтіндік жол <TEXTAREA> тегінің көмегімен жазылады. Ашылатын және жабылатын тегтің арассында орналасқан барлық символ, мәтіндік жолға жазылады.

COLS

Символмен көрсетілген мәтіндік жолдың ені

ROWS

Жолмен көрсетілген мәтіндік солдың биіктігі

Өздігінен орындауға арналған тапсырма:

1. Келесі ашылмалы тапсырманы жасаңыз (айнымалыны Rabotaдеп атаңыз, VALUE параметрін қолданбаңыз.):

 

 

2. Нәтеже төмендегідей болатын етіп HTML кодтың бөлігін жазыңыз (айнымалыларды Pol, Rabota және Podpiskaдеп атаңыз. VALUE және SIZE параметрлерін қолданбаңыз. Жолды ауыстыру үшін <BR>тегін қолданыңыз):

Pol:Man Woman
Job:
yes, please subscribe me

 

 

Бақылау сұрақтары:

1. Қандай тегтердің көмегімен форма жасауға болады?

2. Формада қандай атрибуттар қолданылады?

3. < TEXTAREA > тегі нені білдіреді?

Зертханалық жұмыс №10.

Жұмыстың мақсаты:тазарту батырмасын құруды үйрену

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

Жіберу батырмасы (TYPE=SUBMIT)

Қолданушыға форма жолдарына енгізген мәліметтерін мақұлдап, серверге жіберуге арналған батырма.

Мысал:

<INPUT TYPE=SUBMIT VALUE="Форманы жіберу">

Нәтеже:
форманы жіберу' жазуы бар батырма

Жіберу батырмасы TYPE=SUBMIT қолдана отырып <INPUT> тегінің көмегімен жасалады. Нәтежесінде VALUE параметрінің мәні жазылған батырма пайда болады. Батырманы басқанда формадағы мәліметтер серверге жіберіледі.

 

Тазарту батырмасы (TYPE=RESET)

Формаға қолданушы енгізген барлық мәліметтерді жою үшін арналған.

Мысал:

<INPUT TYPE=RESET VALUE="Форманы тазарту">

Нәтеже:
‘Форманы тазарту' жазуы бар батырма

Тазарту батырмасы TYPE=RESET қолдана отырып <INPUT> тегінің көмегімен жасалады. Нәтежесінде VALUE параметрінің мәні жазылған батырма пайда болады. Батырманы басқанда форманың барлық жолы тазарады.

Өз бетімен орындауға арналған тапсырмалар:

Аты-жөні  
Жынысы Ер.Әйел.
Жасы 1-10 11-17 18-21 22-49 более 50

Сіздің пікіріңіз:

Бақылау сұрақтары:

 

1. Қандай тегтердің көмегімен тазарту батырмасын құруға болады?

2. Қандай атрибуттар қолданылады?

Зертханалық жұмыс №11.

1.1 FrontPage бағдарламасынын терезесі.

Microsoft FrontPage бағдарламасын жіберініз («Іске қосу», «Программалар»

«Интернет құралдары» командалары арқылы) немесе FPXPRESS.EXE

файлын табамыз. Экранда бейнеленген терезе шығады (1-сурет). Ол 4 стандарттық жолдардан тұрады - тақырып жолы, мәзір (меню) жолы, құралдар жолы, панель құралдарының үлгілері және жұмыс аймағы. Жұмыс аймағы-бұл Web-парақтары мәтіндерін кіргізетін парақ.

Тақырып жолытақырыптан және терезені реттейтін үш батырмасынан тұрады.

1.2 Web-парақтарын құру

Жылтылдаған вертикальдық сызық – мәтінді қою нүктесі – сіз терген мәтіннің

орнын белгілейді. Мәтінді теру ережесі:

1) Мәтінді теру үшін, жазу машинкасын қалай қолданасыз, компьютер пернетақтасын солай қолданасыз. Бас әріппен Shift пернесімен бір уақытта басыңыз.

2) Cөздердің арасындағы бос орын Пробел (ең ұзын перне) пернесін басу арқылы жургізіледі. Бірнеше бос орын жеткіліксіз.

3) Мәтіннің жаңа жолға өтуі мәтінді теру процесінде автоматты түрде ауысады.

4) Егер қате жіберсеңіз, онда қою нүктесін қате символдың алдына қойып, Delete пернесін басыңыз, сонда қою нүктесінің оң жағындағы символдарды жояды. Қою нүктесінің сол жағындығы символдарды Backspace (<=) жояды.

5) Жаңа абзац Enter прнесін басқанда құрылады.

6) Бос жол Enter пернесін екі рет басқанда құрылады.

7) Екі абзацты біріктіру үшін, қою нүктесін бірінші абзацтың соңына қойыңыз және Delete перенсін басыңыз.

8) Соңғы жасалған істерді болдырмау үшін, Ctrl+z пернесін басыңыз.

9) Қою нүктесін керекті жерге тышқанды басу арқылы немесе курсоурды жылжытып пернелермен – бұл бағыт белгілері салынған пернелер де орналастырыңыздар.

Мәтінді теріңіз:

«Интернет» -әлемдік компьютерлік желі. Дүниеге келуі қорғаныс ұйымының

жобасымен байланысты (1969 ж. ARPA). Интернеттің дамуының келесі этаптары фонд желінің құрылуы (NSF). Одан кейін APRANET желі, NSFNET желі (БЕКОН)-байланыс сызығы көмегімен өзара байланысқан 30 орталықтан тұратын базалық бөлігі.

Web түйіндері-гипермәтіндерге, пошталық, ftp - файлдарды сақтағыш, nttp - жаңалықтар конференциясы, провайдер компьютерінде орналасқан әріптерді сандармен алмастырады.

Парақ қасиетін белгілейміз. Әрбір парақта «Файл» менюіндағы «Парақ қасиеттері» командамен орындалатын өз жинақ параметірлері бар. Диалогтық терезеде 4 қосымшадан тұрады.

A) «Жалпы» қосымшасы:

Бума – Web – парақтарының толық url (адрес) көрсетілед. Оны өзгеріссіз қалдырамыз

Тақырыбы – ол Web жүйесін іздеу үшін қажет. Тақырып – парақ мазұмын нақты және қысқаша сипаттау керек. Мысалы, «1 зерханалық жұмысына мысалдар» еңгіземіз.

Базалық орын (толтыру міндеті емес)- абсолюттік url, яғни файлдың нақты орны.

Фондық дыбыс (толтыру міндетті емес)- қатсушылардың көңілін аулау үшін, сіздер (*.wav,*.midi) дыбыстық файлдарын қолдана аласыз. «Үздіксіз» таңдау, бұл Web-парақтары ашық кезде файл ойнап тұруын білдіреді.

«Жалпы» қосымшасында тілдік көрсету: кодировка типі-кириллица.

a) «Фон» қосымшасы парақтық қызымет фоны ретінде қолданылатын графикалық файл немесе түсті сұрауға мүмкіндік береді. «Фондық бейне»-ні (Фоновое изображение) шертіңдер (2-сурет).

Содан кейін ағымдағы бумадағы файлды таңдау үшін «Обзор»-ды шертіңіз. Сіздің парағыңыздың түс рөлін орындайтын JPG кеңейтілген файлды таңдаңыз.

б) «Өріс» жапсырмасына өрістердегі орнату, пиксель экранның жоғары және сол жақ бөлігінің бос кеңістік енін білдіреді (толтыру міндетті емес).

в) «Арнайы» жапсырмасына символдарды теруде пайдаланылған және құжаттың түрі туралы хабарлама арналған орнатылымдар. Ауыспалы қолданушылар Web-парақтарының қандай бағдарламада құрылғанын хабарлайды (толтыру міндетті емес).

Мәтінді теріп және парақ қасиеттерін орнатқаннан кейін, Primer бумасына PAGE. HTML ФАЙЛЫН сақтаймыз:

А) «Файл» менюінен «... деп сақтау» командасын ашамыз.

Ә) Ашылған терезеден «Как файл» батырмасын басамыз.

Б) «Менің құжаттарым»- дағы бумалардан ашылатын тізімнен «Жаңа бума ашу» белгісін шертемі.

Бұл буманың атын «Primer» деп енгіземіз.

В) «Файлдың аты» жолында оның аты болады (ағылшын тілінде болғаны дұрыс, мысалы PAGE). Файлдың типі HTM немесе HTML болуы керек. «Ашу» - ты шертіп сіз құжаттарыңызды сақтайсыз.

 


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

При использовании материала ссылка на сайт Конспекта.Нет обязательна! (0.049 сек.)