ћазмұны

ћазмұны.. 1

≥р≥спе. 2

1. Қаз≥рг≥ замандағы »нтернет-технологи¤лар. 3

2. HTML нег≥здер≥ 7

2.1. Құжаттың структурасы.. 7

2.2. ћәт≥нд≥ форматтау тегтер≥ 8

2.3. “≥з≥м. 10

2.4. Web беттег≥ графика. 11

2.5. —≥лтеме. 12

2.6. HTML-де кесте жасау. 12

3. ѕрограммалық жабдықтау. 14

4. Қосымша. 15

4.1. 10-11 сынып оқушыларына информатика пән≥нен кәс≥би б≥л≥м беруд≥ң авторлық бағдарламасы.. 15

4.2. ∆ие қолданылатын тег және атрибуттер т≥з≥м≥ 21

4.3. Ћаборатори¤лық жұмыс. —урет атрибуттарын тағайындау. 22

4.4. Ћаборатори¤лық жұмыс. есте жасау. 23

4.5. Ћаборатори¤лық жұмыс. √ипермәт≥нд≥кбайланыстар орнату. 24

≥р≥спе

Қазақстан –еспубликасының б≥л≥м беру жүйес≥н ақпараттандыру ел≥м≥зд≥ң даму стратеги¤сының нег≥зг≥ бағыттарының б≥р≥, себеб≥ ’’≤ ғасыр Ц б≥л≥м беру жүйес≥н ақпараттандыру ғасыры.

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

Ѕүг≥нг≥ таңда компьютерл≥к дизайн, Web-дизайн, жүйел≥к программалушы, администратор және тағы басқа мамандардың қажет екенд≥г≥н түрл≥ жарнамалық газеттерден, бұқаралық ақпарат құралдарынан да көруге болады. јталған мамандықтарды қалай дайындап, оларға қандай программалық құралдарды үйрету арқылы жет≥лд≥руге болатыны әд≥стемел≥к жұмыстың өзект≥ мәселелер≥н≥ң б≥р≥ болып отыр.

ћектеп б≥т≥руш≥лер компьютерл≥к сауатылықты меңгер≥п шығады, б≥рақ келешекте олар программист, инженер, жүйе администраторы болуы м≥ндетт≥ емес. ƒегенмен кез-келген шығармашылық мамандық с≥зден қаз≥рг≥ заманға сәйкес компьютерл≥к технологи¤ларды меңгеруге талап етед≥. Ўығармашылық жұмыстын қортындысы әр қашан жаңа б≥л≥м, жаңа ақпарат, ал осы ақпаратты таратудың ең жең≥л әд≥с≥ Ц »нтернетте жари¤лау.

»нтеренетте материалды жари¤лау ти≥мд≥ болу үш≥н ол Web-дизайн ережелер≥не сәйкес болу керек. ƒемек, Web-дизайн нег≥здер≥н б≥лу кез келген мамандықта қажет болады, өткен≥ Web-бет дизайны Ц бұл ақпараттық дизайн.

Ѕұл жұмыс өз≥н≥ң сайтын дайындауды үйренем деуш≥лерге арналған.

∆ұмыс ек≥ бөл≥мнен тұрады, б≥р≥нш≥с≥ теори¤лық: мәт≥нд≥ форматтау, графиканы қолдану, т≥з≥м жасау, кесте құру. јл ек≥нш≥с≥ болса практикалық, бұл бөл≥мде б≥з дайын б≥р сайт жасап шығамыз.

Қаз≥рг≥ замандағы »нтернет-технологи¤лар

Web-сайт бұл дүниен≥н к≥шкетай модел≥. Ѕұрынғы кезде Web-сайты б≥р адам - Web-мастер жасаған болса, қаз≥рг≥ кезде Web-сайттарды б≥рнеше адам жасайды. ќлар Web-дизайнер, программист, бизнес-кеңесш≥, маркетинг бойынша басқарушы, менеджер.

†Ќе себептен мектеп курсына »нтеренет технологи¤ны оқыту керек болды? Web-мастер мамандығы қаз≥рг≥ кезде өз≥н≥ң кұпи¤лығын жоғалтып жатыр, ал сайт жасау технологи¤сы зертхана сыртына шығып көпш≥л≥кке белг≥л≥ болып жатыр.

Ѕұның нег≥зг≥ белг≥с≥ »нтернет-жобаларға өс≥п жатқан инвестици¤лар,† Web-сайттардың күрдел≥ б≥л≥мд≥к, ғылыми, комерци¤лық мүмк≥нд≥ктер≥. »нтернет технологи¤лар төмендег≥ жолдармен дамып келе жатыр:

І Web-технологи¤лар;

І —айт жасау экономикасы;

І Web-дизайн және Web-программалау маркетинг≥с≥;

І јдам ресурстары және т.б.

Web-сайт жасақтау жұмысын б≥рнеше кезеңден турады:

І ∆оспарлау;

І Ёлементтерд≥ жасақтау;

І Ѕағдарламау;

І “ест≥леу;

І ∆ари¤лау;

І ∆арнамалау;

І Ѕақылау;

∆оспарлау кезең≥нде төменг≥ мәселелер шеш≥лу≥ керек:

1. —айттың орны.

2. —айттың аудитори¤сы к≥мдер.

3. Қандай ақпарат жари¤ланады.

4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.

Ёлементтерд≥ жасақтау кезең≥нде сайттың программалық өн≥м түр≥нде жүзеге асырылуы қарастырылады:

1. Ќавигаци¤лық құрылымын жасау.

2. Ѕетт≥ң дизайнын жасау.

3. Ѕетт≥ толтыру үш≥н мәт≥нд≥к және бейне ақпаратты әз≥рлеу.

Ѕағдарламау

Ѕұл кезеңд≥ң мән≥ сайтты форматтауда.

“ест≥леу

—айт жасаудың нег≥зг≥ кезеңдер≥н≥ң б≥р≥ тест≥леу. “ест≥леу кезеңде сайттың жұмыс ≥стеу дұрыстылығы тексер≥лед≥, оның ≥ш≥нде:

1. —≥лтемен≥ң жұмысы;

2. ћәт≥ндег≥ қателер;

3. Ќавигаци¤ның ти≥мд≥л≥ғ≥.

4. ѕошта және басқа формалардың дұрыстығы.

5. √рафикалық файлдардың ашылуы.

6. Әр түрл≥ браузерлерде сайттық жұмысы.

∆ари¤лау

“ест а¤қталғандан кей≥н Web-сайт серверде жари¤ланады және қайтадан тексер≥ленед≥.

∆арнамалау

Web-қоғамдастығына жаңадан жари¤ланған сайт тұралы белг≥л≥ болу үш≥н сайттың адрес≥н және ол жердег≥ материал туралы аннотаци¤ны хабарлау керек. ќсы мақсатқа жету үш≥н келес≥ мүмк≥нд≥ктерд≥ пайдалануға болады:

1. Web-cайт адрес≥н әр түрл≥ баспаларға жазу керек;

2. Web-сайтты әр түрл≥ серверлерде т≥ркеу;

3. Web-cайтқа с≥лтемелерд≥ басқа Web-сайттарқа к≥рг≥зу;

4. Ѕаннерлерд≥ жарнама рет≥нде қолдану.

Ѕақылау

Web-сайтта жари¤лап жарнамалаған сон оған қатысу деңгей≥ оның беттер≥нде орналастырылған ақпараттың қажетт≥л≥г≥мен, жаңалығымен және көкейтест≥л≥г≥мен анықталады.† Web-сайт имидж≥н сақтау үш≥н ол жердег≥ ақпаратты әрдайым жаңартып туру керек.

Web-сайт беттер≥н ұйымдастырған кезде, төменг≥ схемаларды қолдануға болады.

†

HTML нег≥здер≥

HTML (HyperTextMarkupLanguage) Ц бұл құжаттарды кодтау үш≥н қолданылатын гипертекст≥к белг≥леу т≥л≥. HTML д≥ көб≥ программалау т≥л≥ деп ойласа да, бұл программалау т≥л≥ емес. HTML Ц мәт≥нд≥ белг≥леу т≥л≥.

HTML құжаттарды көру үш≥н браузерларды қолданамыз. Ѕраузер-программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator, Microsoft Internet Explorer, Opera.

HTML тiлiнде колданылатын командаларды УтегФ деп айтамыз.† HTML тiл≥ндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.

∆ұпты тегтер дегенiмiз, бiр тег ашылса, келесi тег оны жабады. ћысалы,

<html> тегтiң жұмысын ашады да келесi </html> тегi оны жабады. <title> ашылуы, </title> жабылуы.

∆ұпсыз тегтер дегенiмiз, тег ашылады да қолданыла бередi. ћысалы, †<IMG> т.с.с.

өрсет≥лген мысалдарды компьютерде көрү үш≥н мәт≥нд≥ Ѕлокнот программасына тер≥п, оны htm түр≥нде сақтаңыз. ‘айлды браузерде ашыңыз. †

Құжаттың структурасы

HTML құжаттың нег≥зг≥ структурасы төмендег≥дей:

<HTML>

†††††††† <HEAD>

†††††††††††††††††† <TITLE>

†††††††††††††††††† Е

†††††††††††††††††† </title>

†††††††† </head>

<BODY>

</body>

</html>

HTML-тег атрибуттар т≥з≥м≥нен тұрады. “ег текст≥ үшбұрышты жақша ≥ш≥нде жазылады. ћысалы:

<FONT face=аrial>ћен≥ң б≥р≥нш≥ бет≥м</font> - бұл жерде <FONT> - тег, face Ц атрибут, arial Ц атрибуттың мән≥.

ез келген HTML құжат <HTML> тег≥мен басталып, </html> тег≥мен а¤қталу керек. Ѕұл тегтер браузерға HTML құжатын көрсетед≥. Құжат болса қарапайым†† ASCII кодындағы мәт≥нд≥к файл. <HTML>, </html> тегтер болмаса браузер программалары құжатты танымай қалуы мүмк≥н.

<HTML>, </html> тегтер≥н≥ң ортасына құжат денес≥ келед≥. Құжат ек≥ бөл≥мнен тұрады: тақырып бөл≥м≥ <HEAD> тег≥мен басталынатын және <BODY> тег≥мен басталынатын нег≥зг≥ бөл≥мнен.

“ақырып бөл≥м≥ м≥ндетт≥ емес, б≥рақ ол жерде браузерге қажетт≥ көп ақпарат болуы мүмк≥н.

<TITLE>, </title> тегтер≥н≥ң арасында құжаттың аты жазылады, сол сөз терезен≥ң тақырып жолына шығады.

ћысалы:

<TITLE>ћо¤ перва¤ страница</title>†††

<HEAD> бөл≥м≥не тағы <META> тегтерд≥ қолдануға болады, олар сайтты интернет жел≥с≥нде тез табылу үш≥н пайдалынады.

<BODY> тег≥мен Web-бетт≥ң нег≥зг≥ бөл≥м≥ басталады. Ѕұл бөл≥мге мәт≥н, графика, кесте, аудио және видео ақпараттар енг≥з≥лед≥.

ћәт≥нд≥ форматтау тегтер≥†

Құжатта тақырыптар <Hi>, </hi> тегтер≥мен жасалынады, бұл жерде ≥=1 болғанда ең үлкен тақырып жазылады, ≥=6 болғанда Ц ең к≥ш≥.

ћысалы,

өр≥нет≥н мәт≥н	HTML де жазылуы
«аголовок1	<H1> «аголовок1 </H1>
«аголовок2	<H2> «аголовок2 </H2>
«аголовок3	<H3> «аголовок3 </H3>
«аголовок4	<H4> «аголовок4 </H4>
«аголовок5	<H5> «аголовок5 </H5>
«аголовок6	<H6> «аголовок6 </H6>

јбзац енг≥зу үш≥н <P>, </p> тегтер≥н қолданады, мәт≥нн≥ң сол жақ, ортада, оң жақта орнату үш≥н align атрибуты пайдалынады.

ћысалы:

Ђћен≥ң б≥р≥нш≥ бет≥мї сөйлем≥ бетт≥ң ортасына орналасады.

Align д≥ң мән≥ тағыда left (сол жақ), right (оң жақ) болуы мүмк≥н.

<FONT> тег≥н≥ң көмег≥мен б≥з мәт≥нн≥ң шрифт≥ң, көлем≥н, түс≥н †белг≥лейм≥з. ќл үш≥н атрибуттарды пайдаланамыз. ћысалы:

ќсындай жол жазғанда Web бет≥м≥зде arial шрифт≥мен, 5-көлемде, көк түст≥ Ђћен≥ң б≥р≥нш≥ бет≥мї деген сөйлем шығады.

∆олды бөлү үш≥н <BR> тег≥н қолданса болады, мысалы:

<P> † јна т≥л≥н Ц арың бұл,

Ұ¤тын боп тұр бетте<BR>

†††††††† </p>

Қаратырылған әр≥птерд≥ пайдалану үш≥н мәт≥нд≥ <B>,</b> тегтер≥н≥ң ортасына аламыз, қиғаш әр≥птер үш≥н - <I>,</i>.

ћысалы:

өр≥нет≥н мәт≥н	HTML де жазылуы
ћен≥ң б≥р≥нш≥ бет≥м	ћен≥ң <b> б≥р≥нш≥ </b> бет≥м
ћен≥ң б≥р≥нш≥ бет≥м	ћен≥ң <i> б≥р≥нш≥ </i> бет≥м
ћен≥ң б≥р≥нш≥ бет≥м	ћен≥ң <u> б≥р≥нш≥ </u> бет≥м

<PRE>, </pre> тегтер≥ мәт≥н редакторда қандай жазылған болса, сол бойынша браузерге шығарады, мысалы:

<PRE>

јна т≥л≥н Ц арың бұл,

Ұ¤тын боп тұр бетте.

Өзге т≥лд≥ң бәр≥н б≥л,

Өз т≥л≥ңд≥ құрметте

</pre>

“≥з≥м

Ќөм≥рленген т≥з≥мд≥ ұйымдастыру үш≥н <OL> және <l1> тегтер≥ қолданылады.

<OL> Қолданылған әдебиеттер т≥з≥м≥

†††††††† <LI> ѕолонска¤ ≈.ѕ. —амоучитель HTML

†††††††† <LI> ћержевич ¬. —оздание Web страниц </li>

</ol>

≈гер т≥з≥м номер≥н керект≥ б≥р номермен бастау керек болса онда start атрибутын пайдалынамыз, мысалы:

<OL start=5> Қолданылған әдебиеттер т≥з≥м≥

†††††††† <LI> ѕолонска¤ ≈.ѕ. —амоучитель HTML

†††††††† <LI> ћержевич ¬. —оздание Web страниц </li>

</ol>

“≥з≥мд≥ң түр≥н өзгерту үш≥н type атрибуты көмектесед≥, мысалы номерлерд≥ латын цифрларымен жазу үш≥н төменд≥г≥дей жазамыз

†

<OL type=I> Қолданылған әдебиеттер т≥з≥м≥

†††††††† <LI> ѕолонска¤ ≈.ѕ. —амоучитель HTML

†††††††† <LI> ћержевич ¬. —оздание Web страниц </li>

</ol>

ћаркерл≥к т≥з≥мд≥ жазғанда <UL> тег≥н пайдаланады, маркерд≥ң түр≥н өзгерту үш≥н type атрибутын. ќный мән≥ кестеде көрсет≥лген

disc	дөңгелек
circle	шеңбер
square	квадрат

†††††††† <LIt> дөңгелек

</ul>

†††††††† <LIt> шеңбер

</ul>

†††††††† <LIt> квадрат

</ul>

Web беттег≥ графика

Ѕұл бөл≥мде Web беттерге графиканы орналыстыруға тоқталамыз. Web дизайнерлер графика мәселес≥не келгенде ек≥ топқа бөл≥нед≥. Ѕ≥р≥нш≥ топ графикасыз Web сайт ол сайт емес деп ойласа, ек≥нш≥ топ кер≥с≥нше Web сайттарға суретт≥ң қажет≥ жоқ деп санайды, себеб≥ олар кейб≥р модемдерд≥ң және жүйелерд≥ң күш≥ жетпейт≥нд≥г≥н ескер≥п отыр. ƒегенменде сайтқа графиканы қолдану мүмк≥нд≥к бар және соны ти≥мд≥ пайдалану керек. ќл үш≥н б≥зге <IMG> тег≥† src атрибутымен көмектесед≥. —уретт≥ сайтқа орналастыру үш≥н src атрибутына суретт≥ң толық жолын көрсету керек, мысалы, rose.jpg суретi — дискасының My img †папкасына орналасқан болса, онда төмендег≥ тег жазылады:

width және heigth† атрибуттармен суретт≥ң көлем≥н өзгертуға болады, би≥кт≥г≥ және ен≥.

alt атрибутымен суретке қосымша мәт≥н түрде қосымша мәл≥мет шығаруға болады.

Web графика туралы айтқанда төмендег≥ атрибуттарды ұмытпау керек: background Ц бұл атрибут сайтқа суретт≥ фон рет≥нде орналыстырады, bgcolor Ц фонға түс беред≥.

—≥лтеме

HTML д≥ң нег≥зг≥ қасиет≥ рет≥нде оның басқа құжаттарға с≥лтемеу жасау м≥мк≥нд≥г≥ айтуға болады. HTML құжатынан алысқа орналасқан компьютерге, құжаттың ≥ш≥ндег≥ белг≥л≥ б≥р орынға, HTML құжатына, басқа б≥р сайтқа с≥лтеме орнатуға болады. —≥лтемен≥ ұйымдастыру үш≥н <A href> тег≥ қолданылады.

ћысалы,

<A href=penjim.narod.ru>ѕенжим сайтына с≥лтеме</a>

Ѕұл мысалда б≥з www.penjim.narod.ru сайтына сылтеме жасадық.

—≥лтеме мәт≥н түрде және сурет (кнопка) түрде болуы мүмк≥н. —урет түрде орнату үш≥н <A> </a> тегтер≥н≥ң ортасына суретт≥ <IMG> тег≥мен орнату керек.

HTML-де кесте жасау

Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. ќл тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады.† ∆ол мен бағанның қиылысы ұ¤шық деп аталады. Ѕiр ұ¤шықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады.† есте келесi бөлiктерден тұрады:

Х†† кесте тақырыбы;

Х†† бағаналар тақырыптары;

Х†† ұ¤шықтар.

† есте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұ¤шыққа мәлiметтер енгiзiледi.† Ѕо¤ ұ¤шық жасау үшiн бос орын таңбалары енгiзiлуi тиiс.

Қарапайын 2*3 кестес≥н жасау үш≥н төменг≥ тегтер жиынын қолдануға болады:

†††††††† <TR>

†††††††††††††††††† <TD> мәт≥н</td>

†††††††† </tr>

<TR>

†††††††††††††††††† <TD> мәт≥н</td>

†††††††† </tr>

</table>

Ѕұл жерде border †кесте сызықтарының ен≥.

естен≥ң ұ¤шықтарының ен≥н пайз арқылы өзгерту үш≥н width атрибутн қолданса болады, мысалы:

ѕрограммалық жабдықтау

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

ѕрактикады әдетте Web-сайт жасау HTML редакторларды пайдаланады. ќларды ек≥ топқа бөлед≥.† †

Ѕ≥р≥нш≥ үлкен топтың Web-сайт жасау† программалары† HTML-т≥л≥н≥ң нег≥з≥нде жұмыс ≥стейд≥. ќсындай программалар орта және үлкен сайттарды да¤рлау уақытын қысқартады және да¤рлау кезең≥н≥ң ти≥мд≥л≥г≥н көтеред≥. јрнайы HTML-редакторлерд≥ң жұмысты жең≥лд≥лет≥н және тездетет≥н қосымша мүмк≥нд≥ктер≥ көп. Ѕұл топқа төменг≥ программалар к≥ред≥:

HTML генератор 1.3 ;

Magic HTML Studio 2.0;

Macromedia Dreamweaver;

≈к≥нш≥ үлкен топқа WYSIWYG (ағылшын т≥л≥нен Уwhat you see is what you getФ - не көрсең соны аласың) редакторлер≥ к≥ред≥. Ѕұл программаларды тағыда визуалды редакторлар деп айтады.

ќсындай программалар графикалық интерфеске ие. Ѕұл прораммалардың бастапқы махсаты дизайнерд≥ HTML †тегтер≥нен босату болған. әз≥рге замандағы визуалд≥ HTML-редакторлар дизайнерд≥ көптеген әрекеттерде басатады. ќсындай артықшылықтарына қарамастан кемш≥л≥г≥ бар Ц олар таза HTML кодын жасамайды, оған артық және Ђфирменныйї тегтерд≥ қосады. өр≥п отырсыздар, †WYSIWYG редакторларды қолданы HTML тегтер≥н қолмен жазуды құтқармайды, демек, Web-сайттарын жасау үш≥н HTML т≥л≥н≥ң кем дегенде нег≥з≥н б≥лу керек. †

WYSIWYG программаларыдың т≥з≥м≥:

Microsoft Front Page.

Қосымша

10-11 сынып оқушыларына информатика пән≥нен кәс≥би б≥л≥м беруд≥ң авторлық бағдарламасы

Ђ»нтернет-технологи¤сы. WEB-дизайн нег≥здер≥ї

»нформатика кабинет≥ кеңес≥нде қаралды

†Ђ___ї ________ 2005 жыл

ќрындаған:

ћатематика және информатика† мұғал≥м≥ јрзиев ћ. ћ.

“үс≥н≥к хат

Ѕұл бағдарлама Ђ»нтернет технологи¤сы WEB-дизайн нег≥з≥ї тақырыбында 10-11 сынып оқушыларына кәс≥би б≥л≥м беруге нег≥зделген.

Ѕағдарлама жалпы информатика және осы пәнмен байланысты орта б≥л≥м берудег≥ басқа пәндерд≥ң де элементтер≥нен құрылған. Ѕағдарлама (ек≥ жылдық оқу жүйес≥нде) 136 сағатқа топталған.

Ѕағдарламаны құру кез≥нде ЂҚазақстан –еспубликасы Ѕ≥л≥м беру стандартыї және информатика пән≥ бойынша† нұсқау оқулықтары† басшылыққа алынған.

ќқушыларға алғашқы кәс≥би б≥л≥м беруд≥ көздеген бұл бағдарлама төмендег≥дей құрылымнан тұрады:

Ј »нформатика пән≥нен жалпы мазмұнды б≥л≥м беру.

Ј Microsoft Windows бағдарламасымен жұмыс жүрг≥зуде нег≥зг≥ әд≥с- тәс≥лдерд≥ меңгеру.

Ј ЂMicrosoft Officeї пакет≥мен жұмыс ≥стеуд≥ меңгеру.

Ѕағдарламаның мақсаты: ќқушыларға дүниежүз≥л≥к ақпараттану әлем≥ туралы тұтастай түс≥н≥к беру және ақпарат алу жүйес≥н өз≥нд≥к ақпараттар жасау қаб≥леттер≥н ұштау.

Ѕағдарламаның нег≥зг≥ м≥ндет≥:†

Ј »нформатика пән≥н жүйелеп оқыту әд≥стер≥н қарастыру.

Ј ќқушылардың ақпарат алу, өңдеу жаңа ақпараттар жасау және сақтау туралы б≥р≥зд≥ жүйел≥ танымын қалыптастыру.

Ј »нтернетт≥ң бай мәл≥меттер≥н қолдану кез≥ндег≥ нақты тәс≥лдерд≥ көрсету.

Ј ∆алпы орта б≥л≥м беру жүйес≥ндег≥ басқа пәндермен логикалық тығыз байланыс орнату.

Ѕүг≥нг≥ заман талабында ақпараттар жүйес≥мен жұмыс ≥стеу өз алдына жеке б≥р кәс≥п рет≥нде талап ет≥л≥п отыр. Ђ»нтернет технологи¤сы. Web-дизайн нег≥з≥ї бағдарламасының құрылымы жалпы информатика элементтер≥нен, Web-дизайн элементтер≥нен және электрондық оқулық нег≥з≥нен тұрады.

Ѕұл бағдарламамен танысу кез≥нде оқушылар жаңа кәс≥пт≥к бағдармен, нақты айтқанда, оптикалық диск, сканерлер, модем, ЂЅлокнотї мәт≥нд≥к редакторы, HTML, FrontPage құжаттарымен және Photoshop, Paint, Macromedia Flash си¤қты графикалық редакторларымен жұмыс ≥стеуд≥ меңгеред≥.

Ѕолашақ мамандардың кәс≥би б≥л≥м алуының әр басқышында дүниежүз≥л≥к ақпараттану жүйес≥нде мақсатты жұмыс жүрг≥зу≥ үш≥н осы бағдарламаны құру қажетт≥л≥г≥ туып отыр.

Ѕұл бағдарламаны оқыту барысында мультимеди¤лық технологи¤ элементтер≥н қолдану көздел≥п отыр.

Ѕағдарламаның б≥р бөл≥г≥ теори¤лық б≥л≥м беруге нег≥зделген »нтернет мәл≥меттер≥н қолдану сабақтары online кестес≥не сәйкес жүрг≥з≥лу≥ ти≥с.

»нтернетке† қосылу† сақталмаған жағдайда online кестес≥н≥ң алдын-ала дайындаған ақпараттық мәл≥меттер≥н қолдануға болады.

ќқушылардың жаңа материалды меңгеру дағдыларын бақылау ауызша немесе жазбаша сұрау және өзд≥к практикалық тапсырмалар нег≥з≥нде алынуы ти≥с.

Өт≥лген тақырыптар бойынша оқушылардың б≥л≥м мен б≥л≥к дағдыларын жазбаша бақылау алу әд≥с≥мен тексеруге болады.

Ѕұл бағдарламаны толық оқып, меңгерген оқушылар »нтернетке қосылу жүйес≥н толық б≥лу≥ және өздер≥ сабақта жоспарлап құрған WEB-саитты қолданулары ти≥с.

Ќақты б≥л≥м алу және алған б≥л≥мдер≥н практикада қолдану барысында оқушылардың назары еңбек қау≥пс≥зд≥г≥не, техника қау≥пс≥зд≥г≥не аударылуы ти≥с және жеке бас гигиенасына көң≥л бөлген≥ шарт.

Ѕағдарламаның мазмұны.

10-сынып.† јптасына 2 сағат жалпы 68 сағат.

є	ћазмұны	—ағат саны
1	≥р≥спе. »нформатика кабинет≥нде† техника қау≥пс≥зд≥г≥н† сақтау ережес≥	1
2	урсқа к≥р≥спе. »нтернет.WWW WEB-саит. WEB беттер≥.»нтернет жүйес≥не алғашқы танымдық са¤хат	4
3	Microsoft Internet Explorer† жүйес≥н≥ң браузерлер≥мен жұмыс жүрг≥зу нег≥з≥. Ѕраузермен нақты жұмыс түрлер≥. –еттег≥ш. “аңдау, Ѕ≥рнеше тереземен жұмыс ≥стеу.† јқпарат сақтау және түрленд≥ру	4
4	»нтернеттен ақпарат ≥здеу. ≤здеу сервер≥ деген≥м≥з не? Қаз≥рг≥ уақытта ең нег≥зг≥ роль атқаратын ≥здеу серверлер≥н≥ң ерекшел≥ктер≥ (яндекс, Rambler. Coogle. Yahoo. ирилл және ћефодид≥ң мегаэнцыклопеди¤сы) ∆ай және күрдел≥ тапсырыс құру. “апсырыс түрлер≥: Қазақстан тарихы, музыка “.Ѕ.	4
5	Ёлектронды байланыс және байланыс бағдарламаларымен жұмыс ≥стеу. Ёлектронды байланыс бөл≥м≥ қалай жұмыс ≥стейд≥? Ѕайланыс мекен-жайын тег≥н алу. ’аттар мәт≥н≥н алу, түзу және салу. ’ат мәт≥н≥н түзуде жақсы жазу ережес≥. Outlook Express бағдарламасы. ∆ұмыс терезес≥. Ќег≥зг≥ бер≥лет≥н нышандар. Ёлектронды байланыстың вирусымен күресу жолдары. ћекен-жайлық к≥тапша. Қара т≥з≥м. “оптар құру. Ёлектронды қол қою. Ѕайланыс сервис≥н† жөндеу. өркемсуретт≥ хаттар түзу тәс≥л≥. ’аттарға файл нег≥здеу. »нтернетте қолданылатын әдебиеттер.†	4
6	»нтернетке қосылу. ѕ аппараттық бөл≥м≥н≥ң талаптары, »нтернетке қосылу тәрт≥б≥. јқпараттың алыну жылдамдығын және көлем≥н анықтау б≥рл≥г≥. јқпарат алудың және ж≥беруд≥ң техникалық м≥нездемес≥. јқпаратты қолданушының алу жылдамдығы.	2
7	WEB-беттер≥н≥ң дизаины және сайт түрлер≥ WEB-дизаинның технологи¤лық ерекшел≥ктер≥. √рафикалық сызбалар »нтернетт≥ң кәс≥пт≥к бағдары. WEB-дизайнерд≥ң кәс≥б≥. »нтернет Ц нарықтың жаңа жүйес≥.	2
8	HTML к≥р≥спе. ћен≥ң алғашқы бет≥м. —айттың бұрыштамасы. Құрылымы. “егтер. Ѕелг≥лер.	6
9	ћәт≥нд≥ реттеу. ћәт≥нмен жұмыс. Ѕұрыштамалар. ћәт≥нн≥ң түс≥. ћәт≥нн≥ң көлем≥. ћәт≥нн≥ң шрифт≥ (P, H, FONT, B, I, ALIGN, COLOR, SIZE, BGCOLOR)	6
10	—ызбалар. —ызбалар сызу. —ызбалар толтыру. —ызбаларды реттеу. (TABLE, TD, TR)	6
11	Ќысандар қою. —уреттер қою. јнимаци¤ қою. (IMG, SRC, ALT)	6
12	√ипермәт≥н. √ипермәт≥н туралы түс≥н≥к. √иперж≥беру. (A, HREF)	6
13	∆азу-графика .»нтернеттег≥ графикалық файлдарға арналған қағаздар .WEB-ке файл сақтау.
14	‘реймдер . ѕ≥ш≥нмен жұмыс ≥стеу түрлер≥.
15	HTML мен жұмыс ≥стеу қорытындысы.

Ѕағдарламаның мазмұны.

11-сынып.† јптасына 2 сағат жалпы 68 сағат.

є	ћазмұны	—ағат саны
1	≥р≥спе.»нформатика кабинет≥нде техника қау≥пс≥зд≥г≥н сақтау ережес≥.	1
2	Adobe Photoshop† графикалық редакторы. »нтерфейспен танысу. Қатпарлармен† жұмыс ≥стеу. ћәт≥нмен жұмыс. ‘ильтрлермен жұмыс.	16
3†††††	јнимаци¤. Gif† анимаци¤сын† құру.	10
4	Flash-анимаци¤. јнимаци¤ заңдылықтары. Macromedia† flash† редакторының интерфейс≥. —урет салу құралдары.† Ѕелг≥лер,† қатпарлар.† ћәт≥нмен жұмыс.†† јнимаци¤† құру.† ∆арнамалық† банерлер құру.†	10
5	Front Page.† »нтерфейспен танысу.† Wed-ж≥б≥н құру .†† Құжаттарды† редакци¤лау†† және† құру. √ипер салу. √рафиканың† қолданылуы.† —ызбалар.† ‘айлды† серверге† ж≥беру.	12
6	HTML құжаттарын серверге орналастыру. ћекен-жай† т≥ркеу. —айттың кел≥с≥мдер≥ мен ережелер≥. Ѕеттерд≥ тест≥леу әд≥с≥. WEB-сайтты ≥здеу† машиналарына† т≥ркеу . Ѕаннерл≥к†† алмасу,†† жарнама,†† салу	6
7	ѕерсоналды WEB-сайт† құру†† WEB-сайттың† құрылымын† жасау және Front –age† редакторларын† қолдану жүйес≥н† құру WEB-сайтты† интернетке †орналастыру. Ѕақылау жұмысы.†††	13

††††††††††††††††††††††††††††††††††††††††††††††

ѕрактикалық жұмыс т≥з≥м≥.

є 1. »нтернетке са¤хат.

є 2. »нтернеттен ақпарат ≥здеу.

є 3. Ёлектронды байланыс бөл≥м≥мен жұмыс.

є 4. Қарапайым Web-беттер≥н құру.

є 5. WEB-беттер≥нде мәт≥н өңдеу.

є 6. WEB-беттер≥нде кестелер орналастыру.

є 7. √иперс≥лтемелер құру.

є 8. —ызбалар құру және өңдеу.

є 9. ‘рейм† қолдану арқылы† WEB беттер≥н құру.

є 10. Ѕер≥лген тақырыпқа WEB беттер≥н құру.

є 11. Adobe Photoshop† құралдар т≥з≥м≥н оқып үйрену.

є 12. Қатпарлар палитр≥.

є 13. ћәт≥нд≥ к≥рг≥зу† және редакци¤лау.††††††††††††††††††††††††††††††††††††† †††††††††††††††

є 14. Adobe† Phtoshop-та† бер≥лген тақырып† бойынша коллаж құру.

є 15. Қарапайым анимаци¤лық бейнелер құру.

є 16. Macromedia† flash†† суреттер құралын үйрену.

є 17. Ѕелг≥лер жасау† және редакци¤лау.

є 18. өптүрл≥ бейнелермен жұмыс.

є 19. ћәт≥нмен жұмыс.

є 21. јнимаци¤ құру.

є 22. WEB-ж≥б≥н жобалау және құру.

є 23. естелерд≥ң қолданылуы.

є 24. “аблицалар құру және өңдеу.

є 25. ћультимеди¤ нысанын қою.

є 26. Ѕер≥лген тақырып бойынша бақылау† WEB-сайтын құру.

Ќег≥зг≥ б≥л≥м мен дағды көлем≥

ќқушылар б≥лу≥ ти≥с:

ƒ жұмыс жүрг≥зу кез≥ндег≥ басты ережелер мен техника қау≥пс≥зд≥к ережелер≥.

»нтернет жүйес≥н≥ң нег≥зг≥ заңдылықтары.

»нтернет жүйес≥н≥ң†† мәл≥меттер≥ мен компьютерл≥к жұмыс түрлер≥.

јқпаратты алу† жылдамдығының† өлшем б≥рл≥г≥.

јқпарат алу және ауысу хаттамасының түрлер≥.

FTP-хаттамасы, FTP-бағдарының түрлер≥ және HTTP-ден нег≥зг≥ айырмашылықтары.

»нтернетте мекен-жай орналастыру заңдылығы.

Ѕраузер түрлер≥† және құрылымы.

»нтернетке†††† қосылу жүйес≥н≥ң тәс≥лдер≥.

»нтернет торабындағы дүниежүз≥л≥к және орыс т≥лд≥ мәл≥меттер көлем≥.

Ќег≥зг≥ ≥здеу машиналары және оның түрлер≥.

√рафикалық ақпараттармен жұмыс ≥стеуд≥ң нег≥з≥.

WEB-беттер≥ сайтын құру үш≥н керект≥ құралдар жиынтығы.

HTML т≥л≥н қолданудың нег≥зг≥ ерекш≥л≥ктер≥.

WEB-редакторымен жұмыс ≥стеу жүйес≥.

WEB беттер≥н≥ң типт≥к құрылы мен сайтты жобалау тәрт≥б≥.

WEB дизаинның нег≥зг≥ заңдылықтары.

»нтернетте жари¤лау үш≥н өз сайтты дайындау кезеңдер≥?

ќқушылар† қолдана б≥лу≥ ти≥с:

»нтернетке жел≥с≥не қосылу.

Ѕраузер, электронды байланыс.

»нтернет сайтын† қадағалау кез≥нде орыс т≥л≥н≥ң қар≥п≥н кодтау.

Ёлектронды байланысты қолдану; хаттар мәт≥н≥н құру және салу, хабарлама алу, ұсынылған сервист≥ қолдана б≥лу мүмк≥нд≥г≥н реттеу.

—айт бет≥н≥ң электронды мекен-жайын құру,† қаралған беттер бойынша алға және соңына қарай ауысу кезең≥н ≥ске асыру.

“аңдау және “арих жинақ папкаларын қолдану.

Ѕеттерд≥ толық немесе үз≥нд≥лер бойынша сақтау.

∆үйел≥ кесте бойынша жұмыс ≥стеу.

≤здеу машиналарын қолдана б≥лу.

FTP арқылы файл ≥здеуд≥ жүзеге асыру, жалпы FTP Цд≥ қолдану.

≤здеу машинасына нақты тапсырыс беру және керект≥ сайтты реттеу.

Ћогикалық операторларды қолдану арқылы бер≥лген тақырыпқа сәйкес ақпарат әз≥рлеу.

WEBүш≥н графикалық кеск≥ндерд≥ құру және жүзеге асыру.

ћәт≥н және графикалық кеск≥ндерд≥ сканерден шығару.

»нтернеттен ақпарат ≥здеу тәс≥л≥н меңгеру және керект≥ форматта сақтауды б≥лу.

—айтқа керект≥ мәт≥н және қолданбалы материалды дайындау.

Ѕеттер толтыру үш≥н WEBредакторының құралдарын қолдану : беттер≥н жасау, гиперсалуды құру, мәт≥н теру, таблицалар қолдану.

Ѕетт≥ң белг≥ленген тәрт≥б≥н жүзеге асыру.

∆еке сайт әз≥рлеу және »нтернетке жари¤лау.

‘рейд≥к технологи¤ түрлер≥н қолдану.

“олық WEB Цсаит құру.††††††††††††††††††††††††††††††††

∆ие қолданылатын тег және атрибуттер т≥з≥м≥

“ег	ћән≥
<HTML></HTML>	Ѕетт≥ң басымен а¤ғы
<HEAD></HEAD>	Ѕетт≥ң тақырыбы
<TITLE></TITLE>	Ѕетт≥ң аты
<BODY></BODY>	Ѕетт≥ң нег≥зг≥ бөл≥м≥
<H≥></H≥>	“ақарап (≥ 1 ден 6 ға дей≥н өзгеред≥)
<P></P>	јбзац
<P ALIGN=ФleftФ></P>	јбзаты тең≥ст≥ру
<BR>	∆олды ауыстыру
<HR>	√аризонтал түз сызық
<B></B>	∆уан әр≥птер
<I></I>	Қийғаш әр≥птер
<SUB></SUB>	∆оғарғы индекс
<SUP></SUP>	“өменг≥ индекс
<FONT SIZE=?></FONT>	Ўрифт көлем≥
<FONT COLOR=123456></FONT>	Ўрифт түс≥
<FONT FACE=*></FONT>	Ўрифт гарнитурасы
<IMG SRC=ФURLФ>	—урет орналыстыру
<IMG SRC=ФURLФ ALT=Ф*Ф>	—уретке коментрари¤ беру
<BODY BACKGROUND=ФURLФ>	—уретт≥ фон рет≥нде орналыстыру
<BODY BGCOLOR=Ф#SSSSSSФ>	‘он түс≥
<BODY TEXT=Ф#SSSSSSФ>	ћәт≥н түс≥
<BODY LINK=Ф#SSSSSSФ>	—≥лтеме түс≥
<BODY VLINK=Ф#SSSSSSФ>	Өт≥лген с≥лтемен≥ң түс≥
<A HREF=ФURLФ>TEKCT</A>	Ѕасқа бетке с≥лтеме
<A HREF=Ф#*Ф>TEKCT</A>	ќсы беттег≥ мәт≥нге с≥лтеме
<UL><LI></UL>	ћарк≥рленен т≥з≥м
<UL TYPE=ФdiskФ>	ћаркер түр≥
<OL><LI></OL>	Ќомерленген т≥з≥м
<OL TYPE=ФAФ>	Ќомер түр≥
<OL START=?>	“≥з≥мд≥ң б≥р≥нш≥ нөм≥р≥
<DL>	јнықтамалар т≥з≥м≥

Ћаборатори¤лық жұмыс. —урет атрибуттарын тағайындау

ALT, BORDER, HEIGHT, WIDTH† атрибуттарын пайдалана отырып, өз қалауларыңызша RASP.HTM файлына б≥рсыпыра өзгер≥стер енг≥з≥ң≥здер.

≈скерту: —уретт≥к файлдың көлем≥н≥ң (байтпен бер≥лген) өзгеру≥не назар аударып отырыңыздар, өйткен≥ ол Web-құжаттың »нтеренеттен компьютерге жүктелу≥не қатты әсер етед≥.

Web-парақтарға фондық суреттер салу

‘ондық сурет Ц шағын төртбұрышқа орналасқан сурет≥ бар графикалық файл. Ѕроузерге фон рет≥нде тағайындалғанда, сурет көбей≥п терезе аумағын толық алып тұрады.

‘он рет≥нде пайдаланылатын сурет <BODY> тег≥нде көрсет≥лед≥.

RASP.HTM файлына төмендег≥дей өзгер≥стер енг≥з≥ң≥здер:

<HTML>

<HEAD> <H2 ALIGN=ФCENTERФ>ћен≥ң алғашқы парағым† </H2>

<TITLE> јлғашқы HTML файлы </TITLE> </HEAD>

<B>сәрсенб≥ күнг≥ </B> </FONT> <BR>

<FONT SIZE=Ф6Ф> <I> сабақ кестес≥ </I> </FONT> </P>

</BODY >

</ HTML >

Ѕасқа HTML-құжатқа сурет арқылы с≥лтеме жасау

1. ‘Ќ»-1.HTM файлының соңғы жағына алғашқы параққа Ц ‘Ќ» топтарының сабақ кестес≥ (файл RASP.HTM) парағына с≥лтеме жасау қажет. —≥лтеме рет≥нде төмендег≥дей түрде графикалық файлды пайдаланыңыздар:

Е </TR>

†</TABLE><BR>

< /BODY >

</ HTML >

ќсының нәтижес≥нде алынған Webпарақтары қарап шығыңыздар.

ћұнда с≥лтеме† рөл≥н оң жаққа және жоғары бағытталған т≥лсызық түр≥ндег≥ сурет атқарады, ол HOME.GIF файлында жазылған.

Ћаборатори¤лық жұмыс. есте жасау

1. Ѕлокнот программасын ≥ске қосыңыздар.

2. келес≥ мәт≥н жолдарын тер≥ң≥здер.

<HTML>

<HEAD>

<TITLE>—абақ кестес≥</TITLE> </HEAD>

<B>—абақ кестес≥ </B> </FONT></P> <BR>

<TD>”ақыты</TD>

<TD>7а класс</TD>

</TR>

<TR>

<TD> »нформатика </TD>

</TR>

<TR>

<TD> ћатематика </TD>

<TD>√еодези¤ </TD>

<TD> јғылшын т≥л≥ </TD>

<TR>

<TD> —ызба геометри¤ </TD>

<TD> омпьютерл≥к графика </TD><TR>

</TABLE>

</BODY>

</ HTML >

Ћаборатори¤лық жұмыс. √ипермәт≥нд≥к байланыстар орнату

Ѕұранғы ‘Ќ».Ќ“ћ файлын Web Ц парақтың алдыңғы жағына жазылатын апта күндер≥н≥ң аттары жазылған кестелермен толықтырайық.

ќл үш≥н:

†††††††† <FONT COLOR=ФRED SIZEФ =Ф6Ф FACE=ФKZ ARIALФФ>

†††††††† <B> ‘Ќ» †- 1 топтарының† сабақ кестес≥† </B>

†††††††† <FONT> </P> <BR> жолдарынан кей≥н мынадай тәгтер т≥збег≥н жазайық:

†††††††† <TABLE WIDTH=100%>

<TR>

<TD> ƒүйсенб≥ †</TD>

<TD> —ейсенб≥ </TD> †

<TD> —әрсенб≥ </TD> †

<TD>Ѕейсенб≥ </TD> †

<TD> ∆ұма </TD> †

<TD> —енб≥ </TD> †

</TR></TABLE>

<BR>

Ѕұл фрагменттен кей≥н (RASP.HTM файлында) ƒүйсенб≥ ††сөз≥не с≥лтейм≥н белг≥ қо¤мыз, ¤ғни <B> ƒүйсенб≥ ††</B> </FONT> сөздер≥ орнына:

Е <B> <A NAME=Фƒ—Ф> ƒүйсенб≥ †</A> </B> </FONT > Е сөздер≥н жазу керек.

≈нд≥ кесте ≥ш≥ндег≥† ƒүйсенб≥ ††сөз≥не гиперс≥лтеме жасаймыз, ¤ғни <TABLE WIDTH=100%> <TR> <TD> ƒүйсенб≥ ††</TD> †<TD> —ейсенб≥ </TD> †<TD> —әрсенб≥ </TD> †<TD> Е сөздер≥ орына:

<TR> <TD> <A HREF=Ф#ƒ—Ф> ƒүйсенб≥ †</A> </TD>

<TR> <TD> <A HREF=Ф#C—Ф> †—ейсенб≥ †</A> </TD>

<TR> <TD> <A HREF=Ф#CPФ> †—әрсенб≥ </A> </TD> сөздер≥н жазамыз.