ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және...

24
Студенттерге арналған пән бағдарламасы (SYLLABUS) Нысан ПМУ ҰС Н 7.18.4/19 Казақстан Республикасы білім және ғылым министрлігі С. Торайгыров атындағы Павлодар мемлекеттік университеті Математика және информатика кафедрасы ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) WEBT 3302 Web-технологиялар Павлодар, 2014 ж.

Transcript of ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және...

Page 1: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Студенттерге арналған пәнбағдарламасы (SYLLABUS)

Нысан ПМУ ҰС Н 7.18.4/19

Казақстан Республикасы білім және ғылым министрлігі

С. Торайгыров атындағы Павлодар мемлекеттік университеті

Математика және информатика кафедрасы

ПӘН БАҒДАРЛАМАСЫ (SYLLABUS)

WEBT 3302 Web-технологиялар

Павлодар, 2014 ж.

Page 2: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Пәннің бағдарламасын бекітупарағы (Syllabus)

НысанПМУ ҰС Н 7.18.4/19

БЕКІТЕМІН ФМжАТ факультетінің деканы

______________ Н.А. Испулов

«_____»_____________2014 ж.

Құрастырушы: аға оқытушы ___________________ Б. Т. Абдрахманов

«Web-технологиялар» бойынша5B060200 «Информатика» мамандығының

СТУДЕНТТЕРІНЕ АРНАЛҒАН ПӘННІҢ БАҒДАРЛАМАСЫ (SYLLABUS)

Бағдарлама «____»________ 2014 ж. кафедраның отырысында бекітілген жұмыс

бағдарламасы негізінде әзірленген.

Кафедраның отырысында қарастырылған «____»________2014 ж. №___ хаттама

Кафедра меңгерушісі _______________ Н. Н. Оспанова «____»________2014 ж.

ФМжАТ факультетінің әдістемелік кеңесінде құпталған «___»_____2014 ж. №___хаттама

ОӘК төрайымы ____________________ А. Искакова «____»________2014 ж.

Page 3: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

1. Оқу пәннің төлқұжаты

Пәннің атауы Web -технолог ияларКредиттердің саны және оқыту мезгілдеріБарлығы – 3 кредитКурс: 3Семестр: 6

Аудиториялық сабақтарының барлығы – 45 сағат Дәрістік сабақтар - 15сағат Практикалық /семинар сабақтары – 30 сағат СӨЖ – 90 сағатСоның ішінде ОСӨЖ – 22,5 сағатБарлығы - 135 сағатБақылау формасы – емтихан.

Пререквизиттер: Информатика, жоғарғы математика, алгоритмдеу және программалау. Постреквизиттер:Ақпараттық жүйелерінің сенімділігі. Интернеттегі бағдарламалау. 1С бухгалтерияныбағдарламалау.

2. Оқытушылар туралы мәліметтер және түйіскен хабарФамилия, аты, әкесінің аты Абдрахманов Бауыржан ТендиковичҒылым дәрежесі, атақ, лауазым Жаратылыс ғылымдарының магистрі, информатика жәнеақпараттық жүйелер кафедрасының аға оқытушысы

Page 4: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Кафедра «Информатика және ақпараттық жүйелер», аудитория № 407, телефон: ___________________________, Е-mail: ____________________________.

3. Пәннің мақсаты мен міндеттеріПәннің мақсаты: WEB қосымшаларының құру технологияларынын меңгеру. Интернеттебағдарлама құру тәсілдеріне үйрену.Пәннің міндеттері: HTML, FrontPage арқылы күрделі электрондық құжаттар меноқулықтарды құрастыру. JAVASCRIPT, Perl, PHP тілдердің негіздерімен танысу.

4. Білім, іскерлік, дағды мен құзыреттілікке қойылатын талаптар:HTML, FrontPage редакторларында ON-LINE анықтама кітап құрастыру керек.

Тәжірибелік дағдыларды қалыптасыру:- HTML, FrontPage редакторларында WEB- құжат немесе WEB-оқулық құрған кезінде

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

HTML, FrontPage негізгі ұғымдарын, олардың жұмыс істеуін және сол редакторлардабағдарлама жазуын.

5. Пәннің тақырыптық жоспарыСабақтардың түрлері бойынша академиялық сагаттарды орналастыру

№п/п

Тақырыптар атауы СӨЖдәріс тәжірибе барлы

ғы СоныңішіндеОСӨЖ

Тақырып 1. WEB-технологияларды қолдану орталары

2 4 12 3

Тақырып 2. WEB қосымшаларын құру технологиялары

4 8 24 6

Тақырып 3. Стильдердің сатылы кестелері

4 8 24 6

Тақырып 4. JAVASCRIPT тілі 3 6 18 4,5Тақырып 5. WEB-қосымшалар интерфейсі

2 4 12 3

Барлығы:135 (3 кредит)

15 30 90 22,5

6. Дәрістердің тірек конспектісі Интернетте материалды жариялау тиімді болу үшін ол Web-дизайн ережелеріне

сәйкес болу керек. Демек, Web-дизайн негіздерін білу кез келген мамандықта қажетболады, өткені Web-бет дизайны – бұл ақпараттық дизайн.

Қазіргі замандағы Интернет-технологияларWeb-сайт бұл дүниенін кішкентай моделі. Бұрынғы кезде Web-сайты бір адам -

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

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

Page 5: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

§ Сайт жасау экономикасы;§ 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-сайт имиджін сақтау үшін ол жердегі ақпаратты әрдайым жаңартыптуру керек.

HTML негіздері

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

Page 6: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · 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> тегтерді қолдануға болады, олар сайтты

интернет желісінде тез табылу үшін пайдалынады. <meta name="Language" content=" kz"> - сайт тілі<meta name="Autor" content="Molutjan Arziev"> - сайт авторы<meta name="Keywords" content="информатика, школа, учитель, компьютер,

уйгур, поурочный план, математика"> - іздеу қызметіне арналған сөздер <meta name="Generator" content="блокнот"> - қай программада жасалынды

Page 7: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

<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 атрибуты пайдалынады. Мысалы:<P align=center>Менің бірінші бетім</p>«Менің бірінші бетім» сөйлемі беттің ортасына орналасады.Align дің мәні тағыда left (сол жақ), right (оң жақ) болуы мүмкін. <FONT> тегінің көмегімен біз мәтіннің шрифтің, көлемін, түсін белгілейміз. Ол

үшін атрибуттарды пайдаланамыз. Мысалы:<P align=center><font face=Arial size=5 color=blue>Менің бірінші бетім</font>Осындай жол жазғанда Web бетімізде arial шрифтімен, 5-көлемде, көк түсті

«Менің бірінші бетім» деген сөйлем шығады.

Жолды бөлү үшін <BR> тегін қолданса болады, мысалы:<P> Ана тілін – арың бұл,Ұятын боп тұр бетте<BR> </p> Қаратырылған әріптерді пайдалану үшін мәтінді <B>,</b> тегтерінің ортасына

аламыз, қиғаш әріптер үшін - <I>,</i>.

Мысалы:Көрінетін мәтінHTML де жазылуыМенің бірінші бетімМенің <b> бірінші </b> бетімМенің бірінші бетімМенің <i> бірінші </i> бетімМенің бірінші бетімМенің <u> бірінші </u> бетім

Page 8: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

<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квадрат<UL type=disc> <LIt> дөңгелек</ul><UL type=circle> <LIt> шеңбер</ul><UL type=square> <LIt> квадрат</ul>

Web беттегі графикаБұл бөлімде Web беттерге графиканы орналыстыруға тоқталамыз. Web

дизайнерлер графика мәселесіне келгенде екі топқа бөлінеді. Бірінші топ графикасызWeb сайт ол сайт емес деп ойласа, екінші топ керісінше Web сайттарға суреттің қажетіжоқ деп санайды, себебі олар кейбір модемдердің және жүйелердің күші жетпейтіндігінескеріп отыр. Дегенменде сайтқа графиканы қолдану мүмкіндік бар және соны тиімдіпайдалану керек. Ол үшін бізге <IMG> тегі src атрибутымен көмектеседі. Суретті

Page 9: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

сайтқа орналастыру үшін src атрибутына суреттің толық жолын көрсету керек, мысалы,rose.jpg суретi С дискасының My img папкасына орналасқан болса, онда төмендегі тегжазылады:

<IMG src=c:/my img/rose.jpg> width және heigth атрибуттармен суреттің көлемін өзгертуға болады, биіктігі және

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

болады.<IMG src=c:/my img/rose.jpg width=50% height=30% 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 кестесін жасау үшін төменгі тегтер жиынын қолдануға болады:<TABLE border=1> <TR> <TD> мәтін</td> <TD> мәтін</td> <TD> мәтін</td> </tr><TR> <TD> мәтін</td> <TD> мәтін</td> <TD> мәтін</td> </tr></table>

Бұл жерде border кесте сызықтарының ені. Кестенің ұяшықтарының енін пайзарқылы өзгерту үшін width атрибутн қолданса болады, мысалы:

<TABLE width=50%>

Page 10: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Программалық жабдықтау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.

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

ТегМәні

<HTML></HTML>Беттің басымен аяғы

<HEAD></HEAD>Беттің тақырыбы

<TITLE></TITLE>Беттің аты

<BODY></BODY>Беттің негізгі бөлімі

<Hі></Hі>Тақарап (і 1 ден 6 ға дейін өзгереді)

<P></P>

Page 11: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Абзац

<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”>Өтілген сілтеменің түсі

Page 12: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

<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><BODY BACKGROUND=”fon1.GIF” TEXT=”#330066”><P ALIGN=CENTER><FONT COLOR=”#008080”SIZE=”7”><B>сәрсенбі күнгі </B> </FONT> <BR><FONT SIZE=”6”> <I> сабақ кестесі </I> </FONT> </P></BODY ></ HTML >

Басқа HTML-құжатқа сурет арқылы сілтеме жасау1. ФНИ-1.HTM файлының соңғы жағына алғашқы параққа – ФНИ топтарының

сабақ кестесі (файл RASP.HTM) парағына сілтеме жасау қажет. Сілтеме ретіндетөмендегідей түрде графикалық файлды пайдаланыңыздар:

Page 13: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

… </TR> </TABLE><BR><CENTER><A HREF=”RASP.HTM”><IMG SRC=”HOME.GIF”BORDER=”0”></A><CENTER>< /BODY ></ HTML >Осының нәтижесінде алынған Webпарақтары қарап шығыңыздар.Мұнда сілтеме рөлін оң жаққа және жоғары бағытталған тілсызық түріндегі сурет

атқарады, ол HOME.GIF файлында жазылған.

Мысал . Кесте жасау1. Блокнот программасын іске қосыңыздар.2. келесі мәтін жолдарын теріңіздер.<HTML><HEAD><TITLE>Сабақ кестесі</TITLE> </HEAD><BODY BGCOLOR=”#FFFFFF”> <P ALIGN=CENTER><FONT COLOR=”RED” SIZE=”6” FACE=”KZ ARIAL”><B>Сабақ кестесі </B> </FONT></P> <BR><FONT COLOR=”BLUE” SIZE=”4” FACE=”Times New Roman”><TABLE BORDER=”1” WIDTH=100% BGCOLOR=”#99 CCCC”><TR BGCOLOR =”#CCCCFF” ALIGN=CENTER><TD>Уақыты</TD><TD>7а класс</TD><TD>7б</TD><TD>7в</TD></TR><TR><TD>8-30 – 9-50</TD><TD> Орыс тілі </TD><TD> Информатика </TD><TD> Тарих </TD></TR><TR><TD>10-00 – 11-20</TD><TD> Математика </TD><TD>Геодезия </TD><TD> Ағылшын тілі </TD><TR><TD>11-30 - 12-30 </TD><TD> Тарих </TD><TD> Сызба геометрия </TD><TD> Компьютерлік графика </TD><TR></TABLE></BODY></ HTML >

Мысал . Гипермәтіндік байланыстар орнатуБұранғы ФНИ.НТМ файлын Web – парақтың алдыңғы жағына жазылатын апта

күндерінің аттары жазылған кестелермен толықтырайық.

Page 14: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Ол үшін: <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> … сөздері орына:

<TABLE WIDTH=100%> <TR> <TD> <A HREF=”#ДС”> Дүйсенбі </A> </TD> <TR> <TD> <A HREF=”#CС”> Сейсенбі </A> </TD> <TR> <TD> <A HREF=”#CP”> Сәрсенбі </A> </TD> сөздерін жазамыз.

JAVASCRIPT тілі [1, 169-251 бет.]1. JavaScript программалау тілін Netscape пен Sun Microsystems фирмасы бірлесіп

ұсынған, ол интерактивті HTML – құжаттарды құруға арналған. JavaScript тілінқолданылатын аймақтары:- Динамикалық, яғни құжат жүктелгеннен кейн мазмұнын өзгертуге болатын

парақтарды құру;- Серверге жөнелтілгенге дейін пайдаланушының форманы дұрыс

толтырылғандығын тексеру;- Сценарийлер көмегімен «жергілікті» және басқа да мәселелерді шешу.

2. Программа әр түрлі операциялар орындата алатын қарапайым мәліметтерлитералдар деп аталады. Литералдар өзгертілмейді.

3. Айнымалылар ақпараттарды сақтау үшін қолданылады. Айнымалыларсценарийлерде идентификаторлардың көмегі арқылы көрсетіледі.

4. Өрнектер амалдар таңбаларымен біріктірілген литералдардан, айнымалыларданжәне жақшалардан тұрады.

5. HTML – құжатындағы сценарий [1, 177-179 бет.]6. Функцияларды сипаттау және пайдалану [1, 179-193 бет.]7. Циклдер мен функциялар [1, 194-202 бет.]8. JavaScript функциялары [1, 202-208 бет.]9. Объект түсінігі [1, 208-222 бет.]10. Мұралау [1, 222-227 бет.]11. Браузер объектілері мен оқиғалары [1, 227-232 бет.]12. Оқиғалар [1, 232-251 бет.]

WEB –қосымшалар интерфейсі [1, 252-314 бет.]

Page 15: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Perl – программалаушы Larry Wall құрған, көлемді мәтіндер мен файлдардыөндеуге арналған, интерпретацияланатын тіл болып табылады. Ол Practical Extractionand Report Language (мәліметтерді практикалық ашу және басылымдарды құру) дегенсөздің қысқаша жазылуы. Perl тілінің көмегімен бір немесе бірнеше файлдарды ашу,ақпараттарды өндеу, нәтижелерін жазу әрекеттерін орындауға болады. Perl енгізілгенмәліметтерді өндеу әрекетін жүзеге асыру мүмкіндігін береді. Егер пайдаланушыақпаратты Perl-дің тіркеу формасына енгізсе, оны бірнеше тәсілдермен өндеуге болады:

- Оларды мәтіндік файлға қосу,- Мәліметтер базасына енгізу,- Электрондық хатқа енгізу,- WEB – параққа қосу,- Жаңа WEB-парақ құру,- Браузер терезесінде бейнелеу.

PHP – серверде орындалатын программалау тілі. JavaScript тіліне қарағанда PHPтілі қолданушының программалық жабдықтамасынан тәуелсіз, сондықтан ол әрқашанорындалады.

Тіл синтаксисі мен грамматикасы. PHP тілі операторлары

7. Практикалық (семинарлық, лабораториялық, студиялық, индивидуальдықсабақтардың) мазмұны,және олардың көлемі.

1 жаттығу. Қарапайым WEB-беттер құру1.Блокнот редакторын ашыңыз (Пуск-Программы-стандартные-блокнот)2.Келесі құжатты енгізіңіз<HTML><HEAD><title>құжаттың тақырыбы</title></head></BODY>Құжат мазмұны</BODY></HTML>3.Құжатты First.htm деп сақтаңыз. 4. Internet Explorer (Пуск-программы-Internet Explorer ) ашыңыз.5.Файл-ашу командасын беріңіз. Обзор батырмасын басып First.htm құжатын тандаңыз.6. Қараңыз, жасалған құжат қалай ашылатынын-ол қарапайым HTML құжаты. <title>элементінің құрамы қайда көрсетіледі? </BODY> эдементінің құрамы қайдакөрсетіледі?7.Екі басқа жолдарда жазылған "Мазмұны" және "ҚҰжат" сөздері қалай көрсетіледі?Неге? Экранның енін өзгерткенде не болатыны көріңіздер.Осы жаттығуда біз қарапайым HTML құжатын жасадық. Біз HTML -да пішімдеумүмкіндіктерімен таныстық және олардың Internet Explorer браузерінде ашылғанынкөрдік.

2 жаттығу. Абзацты пішімдеу мүмкіндіктерін үйрену1.Егер осы жаттығу алдынғы құжатта (жаттығуларда) орындалмаса, онда БлокноттаFirst.htm -ді ашыңыз.2. <BODY> және </BODY> тегтерінің арасындағы барлық жазбаны өшіріп тастаңыз.Осы жаттығудың осы пунктінде теретін жазбаны <BODY> тегінен кейін орналастырукерек. Ал нақты мазмұны әр түрлі болуы мүмкін.3.Бірінші деңгей тақырыбын <H1> және <H2> тегтерінің арасына жазыңыз4.Екінші деңгей тақырыбын <H2> және <H2> тегтерінің арасына жазыңыз

Page 16: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

5. <p> тегінен бастап Жеке абзац құрыңыз. Символдар мен бос орындарды абзацтынішінде жазуға болады.6.<HR> тегін жазыңыз.7 <p> тегінен бастап Жеке абзац құрыңыз8.Осы құжатты Paragraph.htm деп сақтаңыз.9.Internet Explorer (Пуск-программы-Internet Explorer ) ашыңыз10.Файл-ашу командасын беріңіз. Обзор батырмасын басып Paragraph.htm құжатынтандаңыз.11.Қараңыз, жасалған құжат қалай ашылатынын-ол қарапайым HTML құжаты\

3 жаттығу. Гиперсілтемелерді жасау1. Егер осы жаттығу алдынғы құжатта (жаттығуларда) орындалмаса, онда БлокноттаFirst.htm -ді ашыңыз.2.<BODY> және </BODY> тегтерінің арасындағы барлық жазбаны өшіріп тастаңыз.Осы жаттығудың осы пунктінде теретін жазбаны <BODY> тегінен кейін орналастырукерек. Ал нақты мазмұны әр түрлі болуы мүмкін.3.Сілтемеге дейінгі жазбаны жазыңыз4.<A href ="First.htm "> тегін жазыңыз5. "Сілтеме" сөзін жазыңыз6. Жабатын тег </A> жазыңыз7. Жазбадан кейінгі сілтемені жазыңыз8. Құжатты Link.htm деп сақтаңыз9. бағдарламаны Internet Explorer (Пуск-программы-Internet Explorer ) ашыңыз10. Файл-ашу командасын беріңіз. Обзор батырмасын басып Link.htm құжатынтандаңыз.11. <A> және </A> арасындағы жазба сілтеме сияқты белгіленіп тұрғанына көңілбөліңіз (Түсімен және жазбаның асты сызлған болуы керек)12.Жазбаны басыңыз, басқанда сіз жазған сілтемені ашу керек.13.Алдынңы беттке қайта оралу үшін «артқа» деген стрелканы басыңыз.

4 жаттығу. Суретті жасау және оның Web– бетте қолданылуы1. Paint бағдарламасын ашып (Пуск>Программы>Стандартные>Paint).Жаңа суреттің

өлшемдерін беріңіз, мысалы 50х50 (Рисунок>Атрибуты).2. Алдыңғы бетке қызыл түсті және жасыл түсті фон етіп таңдаңыз. Суретті негізгі түспен

бояңыз.3. Бояу жаққыш құралымен жасыл түсті фонға кез- келген қызыл түсті сурет салыңыз.4. Суретті pic1.gif (GIF форматта) атымен сақтаңыз.

Кейбір Windows-тарда Paint бағдарламасы GIF суреттерін түссіз (прозрачный) фондасақуға мүмкіндік береді. Ондай жағдайда диалог терезесі Атрибуты(Рисунок>Атрибуты)

5. Егер бұл жаттығу алдыңғы жаттығудан кейін орындалмаса, first.htm документінашыңыз.

6. <BODY>және </BODY> тегтарының арасындағы мәтіннің бәрін өшіріңіз. Келесіжаттығулалрда жазылатын мәтінді <BODY> тегінен кейін жазу керек.

7. Кез-келген мәтін жазыңыз (4-5 жол) және тексттік курсорды оның басына орнатыңыз. 8. <IMG SRC = “pic1.gif” ALIGN= “BOTTOM”>тегін енгізіңіз.9. Документтіpicture.htm атымен сақтаңыз. 10. Internet Explorer бағдарламасын қосыңыз (Пуск>Программы>InternetExplorer). 11. Файл>Открыть командасын басыңыз. Обзор түймесін басып, picture.htm файлын

ашыңыз. Доментті қарап шығыңыз, айрықша көңілді суретке бөліңіз.12. Блокнот бағдарламасына оралып келесі атрибуттың мағынасын өзгертіңіз: ALIGN=

“TOP”. Файлды сол атпен сақтаңыз.

Page 17: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

13. Internet Explorer бағдарламасына оралыңыз, панель инструментовта Обновить түймесінбасыңыз. Атрибутты өзгерткенде беттің қалай өзгергенін қараңыз.

14. Блокнот бағдарламасына оралып келесі атрибутты өзгертіңіз: ALIGN =”LEFT”.Файлды сол атпен сақтаңыз.

15. Internet Explorer бағдарламасына оралыңыз, панель инструментовта Обновить түймесінбасыңыз. Атрибутты өзгерткенде беттің қалай өзгергенін қараңыз.

16. Блокнот бағдарламасына оралып, <IMG>тегіне келесі атрибуттарды қосыңызHSPACE=40 VSPACE=20. Файлды сол атпен сақтаңыз.

17. InternetExplorerбағдарламасына оралыңыз,панель инструментовта Обновить түймесінбасыңыз. Атрибутты өзгерткенде беттің қалай өзгергенін қараңыз. Бұл жаттығуда біз документке Сурет қоюды үйрендік.<IMG>тегіне суреттердіңкөрсетілуне атрибуттардың қалай әсер ететінін анықтадық.

5 жаттығу. Мәтінді форматтау әдістері1. Егер бұл жаттығу алдыңғыдан кейін орындалмаса, Блокнотбағдарламасындаfirst.htm документін ашыңыз. 2. <BODY>және </BODY>тегтарының арасындағы мәтіннің бәрін өшіріңіз. Келесіжаттығулалрда жазылатын мәтінді <BODY> тегінен кейін жазу керек, ал оның нақтымазмұны кез-келген болуы мүмкін. 3. <BASEFONT Size = “5” COLOR = ‘Brown”>тегін жазыңыз. Ол мәттіннің қоныр түстіжәне үнемі үлкейтілген шрифтпен жазылуын білдіреді. 4. Берілген шрифтпен енгізілетін кез-келген мәтін енгізіңіз. Бұл абзацты <P>тегіненбастаңыз.5. <P><FONT Size = “-2” FACE = “ARIAL” COLOR = “GREEN”>тегтерін енгізіңіз. 6. Келесі абзац мәтінді енгізіп, </FONT>тегімен аяқтаңыз. 7. Келесі абзацта өзіңіздің қалауыңыз бойынша қос тегтерді пайдалныңыз:<B>(полужирный шрифт),<I> (курсив),<U> (подчеркивание),<S>(вычеркивание),<SUB> (нижний индекс),<SUP> (верхний индекс).8. Келесі абзацта өзіңіздің қалауыңыз бойынша қос тегтерді пайдалныңыз:<EM>(выделение),<STRONG> (сильное выделение),<CODE> (текст программы),<KBD>(клавиатурный ввод), <SAMP>(пример ввода), <VAR>(компьютерная переменная).9. Документті format.htm атымен сақтаңыз. 10. Internet Explorer бағдарламасын қосыңыз (Пуск >Программы> Internet Explorer). 11. Файл>Открыть командасын басыңыз. Обзор түймесін басып,format.htmфайлынашыңыз. Доментті қарап шығыңыз, айрықша көңілді суретке бөліңіз.12. Қолданылған HTML элементтері мәтіннің көрсетілуіне әсер етімен танысу.13. Блокнот бағдарламасына оралып, форматтауға арналған документтердің бір-біренесалынғандай етіп документті өзгертіңіз. Документті сол атпен сақтыңыз. 14. Internet Explorer бағдарламасына оралыңыз, панель инструментовта Обновитьтүймесін басыңыз. Атрибутты өзгерткенде беттің қалай өзгергенін қараңыз. Біз HTML тілінің документтегі мәтінді форматтауға қолданылатын кейбірэлементтерімен таныстық. Бұл элементтердің документті көрсетуге қалай әсер ететінінжәне мұндай элементтерді бір-біріне салуға болатынын анықтадық.

6 ж аттығу. Тізімдерді құру тәсілдері1. Егер бұл жаттығу алдыңғы жаттығудан кейін орындалмаса, онда Блокнот

программасындағы first.htm құжатын ашыңыз.2. <BODY> және </BODY> тегтерінің аралығында орналасқан барлық мәтінді жойыңыз.

Бұл жаттығудың келесі пункттерінде енгізілетін мәтіндерді <BODY> тегінен кейінорналастыру қажет, ал оның нақты мазмұны әртүрлі болуы мүмкін.

3. Құжатқа реттелген (нөмірленген) тізімді бастайтын <OL TYPE=”l”> тегін енгізіңіз.

Page 18: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

4. Әрқайсысын <LI> тегімен алдын ала отырып құжатқа тізім элементтерін қойыңыз.5. Кестені </OL> тегі арқылы аяқтаңыз.6. Алынған құжатты list.htm атымен сақтаңыз.7. Internet Explorer программасын жіберіңіз (Қосу>Бағдарламалар> Internet Explorer).8. Файл>Ашу командасын беріңіз. Шолу түймесін басып, list.htm құжатын ашыңыз.9. TYPE атрибуты арқылы берілген нөмірлеу тәсіліне ерекше назар аударып, реттелген

тізім Internet Explorer бағдарламасында қалай көрінетіндігін меңгеріп алыңыз.10. Блакнот программасына оралып мәтіндік меңзерді енгізілген тізімнен кейін

орналастырыңыз.11. Құжатқа реттелмеген (маркерленген) тізімді бастайтын <UL TYPE=”SQUARE”> тегін

қойыңыз.12. Әрқайсысын <LI> тегімен алдын ала отырып құжатқа тізім элементтерін қойыңыз.13. Тізімді </UL> тегі көмегімен аяқтаңыз. Құжатты сол атымен сақтаңыз.14. Internet Explorer бағдарламасына оралыңыз және аспаптар панеліндегі Шолу түймесіне

басып, TYPE= атрибуты арқылы берілген маркерлеу тәсіліне назар аударыңыз.15. Блакнот программасына оралып мәтіндік меңзерді енгізілген тізімнен кейін

орналастырыңыз.16. Құжатқа анықтамалар тізімін бастайтын <DL> тегін қойыңыз.17. <DТ> тегімен сәйкес абзацты алдын алып, тізімге анықтама сөздерді қойыңыз.18. <DD> тегімен алдын алып, тізімге сәйкес анықтама сөздерді қойыңыз.19. Тізімді </DL> тегі көмегімен аяқтаңыз. Құжатты сол атауымен сақтаңыз.20. Internet Explorer бағдарламасына оралыңыз және аспаптар панеліндегі Жаңарту

түймесіне шертіңіз. Web-парақтың кескінінде анықтамалар тізімі қалай көрінетіндігіненазар аударыңыз.Біз HTML тіл құралдары арқылы тізім құрауды және оларды нөмірлеудің тәсілдерінүйрендік. Internet Explorer браузерінде тізімдердің қалай көрінетіндігін анықтадық.Сонымен бірге біқ анықтамалар тізімін жасауды үйрендік.

7. Жаттығу. Кесте құру1. Егер бұл жаттығу алдыңғы жаттығудан кейін орындалмаса, онда Блокнот

программасындағы first.htm құжатын ашыңыз.2. <BODY> және </BODY> тегтерінің аралығында орналасқан барлық мәтінді жойыңыз.

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

3. <TABLE BORDER=”10”WIDTH=”100%> тегін енгізіңіз.4. <CAPTION ALIGN=”TOP”> телефондар тізімі </CAPTION>жолағын енгізіңіз.5. Кестенің бірінші жолы бағандардың атауын қамту керек. Оны келесі түрде белгілеңіз:

<TR BGCOLOR=”YELLOW”ALIGN=”CENTER”><TH> тегі <TH> телефон нөмірі

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

7. Кестенің соңғы жолын келесі түрде беріңіз:Ғимараттың бірінші қабатында тегін телефон-автомат бар <TR><TDALIGN=”CENTER”COLSPAN=”2”>

8. Кестені </TABLE> тегі көмегімен аяқтаңыз.9. Құжатты table.htm атаымен сақтаңыз.10. Internet Explorer бағдарламасын жіберіңіз (Қосу>Бағдарламалар> Internet Explorer).11. Файл>Ашу командасын беріңіз. Шолу түймесін басып, table.htm құжатын ашыңыз.

8. жаттығу. Фреймдердің құрылу сипаттамасы1. Блокнот мәтіндікредакторыніске қосыңыз(Пуск-Программы-Стандартные-Блокнот).2. Келесі құжатты енгізіңіз:

Page 19: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

<HTML><HEAD><TITLE>фреймніңсипаттамасы</TITLE></HEAD><FRAMESET ROWS=”60%,*”><FRAME SRC=”table.htm”><FRAMESET COLS=”35%,65%”NORESIZE><FRAME SRC=”first.htm”><FRAME SRC=”links.htm”></FRAMESET></HTML>

3. Бұл құжатты frames.htm. атауымен сақтаныз.4. Бағдарламаны іске қосыңыз Internet Explorer (Пуск-Программы- Internet Explorer).5. Команданы алыңыз Файл-Открыть. Обзор батырмсасын басып frames.htm. құжатын

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

өзгертуге болама,қараныз.9. Фреймдердің ішіндегі сілтеменің біреуін басыныз, енді жаңа құжат қалай

бейнелейтіндігін қараңыз.10. Саймандар тақтасында Назад батырмасын басыныз,алдыңғы құжатқа оралғанда

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

көзқарасыныз бойынша фреймдердің параметірлері мен құрылымдарын өзгертініз.12. Саймандар тақтасында Обновить батырмасын басыңыз, Internet

Explorerбағдарламасына оралыңыз.Өзгерген Web-бет өз ниетіне сәкес келетінінанықтаныз.егер де ол олай болмаса.Блокнот бағдарламасына оралып,қателерді тауыпөзгертініз.

9. жаттығу. FrontPage редакторының көмегімен Web-құжатты құру.1. FrontPage бағдарламасын іске қосыңыз. (Пуск-Программы- Microsoft FrontPage).2. Мәтін құжатты автоматтық түрде жасалған Web-бетті енгізініз3. Саймандар тақтасының көмегімен Форматирование батырмасын басып, өзініздің

қалауыныз бойынша мәтінді форматтап тастаңыз.4. Кесте құру үшін саймандар тақтасында кесте құру батырмасын басыныз ол

Стандартная болімінде орналасқан.5. Суретсипатты қосу үшін саймандар тақтасында Стандартная бөлімінде Добавить

ресунок батырмасын қолданыңыз.Суретсипатты \Windows мұқабасынан алыныз.6. Файл-Сохранить командасын орындаңыз және оны wysiwyg.htm. атпен

сақтаңыз.Суреттін сақталғанын тексеріп,керек форматты таңдау.7. Бағдарламаны іске қосыңыз Internet Explorer (Пуск-Программы- Internet Explorer).8. Файл-Открыт командасын орынданыз.Обзор батырмасын басыпwysiwyg.htm. файлын

ашыңыз.9. FrontPage бағдарламасында браузерде дұрыс бейнеленген және қолда бар құжат дұрыс

жасалғанына сенімді болыныз.Жаңа құрылған құжат дұрыс көрсетілгеніне көзімізжетеді

10. Браузер терезенің енін өзгертініз және қараңыз құжат көрінісі қалай өзгеретіндігі.11. FrontPage бағдарламасына оралып HTML-код батырмасына басыныз.12. Автоматты генерацияланған HTML кодты жаттаныз, HTML тегінің көмегімен қандай

форматтау командалар орындалатынын анықтаңыз.13. Пайда болған HTML кодының сапасын бағалаңыз.

Page 20: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

10. жаттығу. HTML құжаттарында абзацтық шегініс жасауHTML тілінің абзацтық шегініске байланысты ресми құралдары жоқ. Барлық

шолушы программалар(браузерлер) мәтінді компьютер экранына шығаруға арналған.Жеке абзацтардын арасына бос жол қосып мәтінді шегініссіз(отступ) шығарады.Мұндай абзацтық шегіністерді жасау үшін арнайы әдістер қажет.

1. Мәтін редакторын (мысалы,Блокнот) іске қосып HTML құжатын құруды бастаңыз.Структуралық элементтің тегтерін енгізіп құжатқа ат қойыңыз, мысалы Абзацтықшегіністің имитациясы.

2. Эталон сияқты колданылатын шағын абзацтық мәтін енгізіңіз. Құжатты сақтаңыз. 3. Internet Explorer шолушы программасын (браузерді) іске қосып, құралған құжатты

ашыңыз. Зерттеліп жатқан абзац бірнеше жолды қамту үшін программа терезесін енібойынша ретке келтір. Ол шегінісіз көшіріліп жатқанына көз жеткізіңіз.

4. Бос орын қосу (добавление пробелов). Редакцияланып жатқан құжатқа қайтыңыз.Горизантальдық сызғышты (тег <HR>) эталондық абзацтан кейін орналастыр.Эталондық абзацты айырбас буферы арқылы көшіріп, көшірмені сызғыштын төменгіжағына орналастыр. Көшірілген абзацтын басына бірнеше бос орын қосыңыз. Құжаттысақтаңыз.

5. Internet Explorer бағдарламасына қайтып келіп жаңарту (обновить) батырмасыншертіңіз. Қосылған абзацқа қараңыз. Абзацтық шегіністі мұндай жолмен неге жасауғаболмайтынын түсіндіріңіз.

6. Тізім әдісі. Редакцияланып жатқан құжатқа қайтыңыз. Горизантальдық сызғыштысоңғы абзацтан кейін орналастыр. Эталондық абзацты айырбас буферы арқылыкөшіріп, көшірмені сызғыштын төменгі жағына орналастыр. Көшірілген абзацтынбасына <DD> тегін қосыңыз. Құжатты сақтаңыз.

7. Internet Explorer бағдарламасына қайтып келіп жаңарту (обновить) батырмасыншертіңіз. Қосылған абзацқа қараңыз. Абзацтық шегіністің пайда болғанына көзжеткізіңіз. Алынған құжатта HTML коды дұрыс қолданылған ба? Абзацтық шегіністіңмұндай әдісін ұсынуға бола ма? Неге?

8. Ажырағыссыз бос орын әдісі(метод неразрывных пробелов). Редакцияланып жатқанқұжатқа қайтыңыз. Горизантальдық сызғышты соңғы абзацтан кейін орналастыр.Эталондық абзацты айырбас буферы арқылы көшіріп, көшірмені сызғыштын төменгіжағына орналастыр. Көшірілген абзацтын басына &nbsp; символының бірнеше ретқайталанған комбинациясын қосыңыз. Құжатты сақтаңыз.

9. Internet Explorer бағдарламасына қайтып келіп жаңарту (обновить) батырмасыншертіңіз. Қосылған абзацқа қараңыз. Абзацтық шегіністің пайда болғанына көзжеткізіңіз. Абзацтық шегіністің мұндай әдісін ұсынуға бола ма? Неге?

10. Алдын ала мәтінді тазарту(отформатирование) әдісі. Редакцияланып жатқанқұжатқа қайтыңыз. Горизантальдық сызғышты соңғы абзацтан кейін орналастыр.Эталондық абзацты айырбас буферы арқылы көшіріп, көшірмені сызғыштын төменгіжағына орналастыр. Алдын ала мәтінді тазарту және бірнеше бос орын(пробел) беретін<PRE> тегін көшірілген абзацтын басына қосыңыз. Абзацтын соңына </PRE> тегінқосыңыз. Құжатты сақтаңыз.

11. Internet Explorer бағдарламасына қайтып келіп жаңарту (обновить) батырмасыншертіңіз. Қосылған абзацқа қараңыз. Абзацтық шегіністің пайда болғанына көзжеткізіңіз. Алдын ала тазарту мәтініндегі бос орынды(пробел) жөндеу әдісі менжолдын соңындағы символдарға көңіл бөліңіздер. Қолданылған қаріптін ерекшелігінеде? Қолданылып жатқан абзацтық шегіністің әдісі бойынша өз ойыңызды айтыңыз.

12. Жасырылған сурет әдісі(метод невидимого изображения). Редакцияланып жатқанқұжатқа қайтыңыз. Горизантальдық сызғышты соңғы абзацтан кейін орналастыр.Эталондық абзацты айырбас буферы арқылы көшіріп, көшірмені сызғыштын төменгі

Page 21: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

жағына орналастыр. Көшірілген абзацтын басына <IMG> тегін қосып, қолданыпжатқан файл суретти көрсет және көлденеңнен 10 пиксельдік(HSPACE=”10”) шегінісжасау. 1 пиксельден(1x1) тұратын,форматы GIF болатын,түсі ашық болатын сурет болукерек. Құжатты сақтаңыз.

13. Internet Explorer бағдарламасына қайтып келіп жаңарту (обновить) батырмасыншертіңіз. Қосылған абзацқа қараңыз. Абзацтық шегіністің пайда болғанына көзжеткізіңіз.

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

11-17 жаттығулар. JAVASCRIPTҮлгі бойынша тапсырмаларды орындау[1, 175-177 бет.][1, 193 бет.][1, 202 бет.][1, 207-208 бет.][1, 221-222 бет.][1, 227 бет.][1, 251 бет.]

8. СӨЖ –ның тапсырмаларыТақырып 1. Интернет технологиялар. Теорияны қорғау. Мысал келтіруТақырып 2. HTML тілінің негіздер. Теорияны қорғау. Мысал келтіруТақырып 3. FrontFage-дің негіздері. Теорияны қорғау. Мысал келтіру Тақырып 4. JAVASCRIPT тілі. Теорияны қорғау. Мысал келтіруТақырып 5. Perl тіліне кіріспе. Теорияны қорғау. Мысал келтіруТақырып 6. PHP тілі операторлары. Теорияны қорғау. Мысал келтіру

Пәннің күрделі сұрақтары:1. JAVASCRIPT тілі 2. Perl тіліне кіріспе 3. PHP тілі операторлары

9. ОСӨЖ консультациясының графигі (СӨЖ 25% ОСӨЖді құрайды)

№ Тапсырма түрі дүйсенбі сейсенбі сәрсенбі бейсенбі жұма сенбі

1. Дәріс сұрақтарына арналған консультация

10.2511.15

2. Семинарға және зертханалық сұрақтарына арналған консультация

10.2511.15

3. СӨЖ сурақтарына арналған консультация

11.3012.20

Page 22: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

4. Курстық жұмыс тақырыбы бойынша сурақтар

5. Тест жумыстары бойынша сұрақтар

14.4515.35

Барлық сұрақтар бойынша кеңес ОСӨЖ-дің кестесіне сай орындалады.

10. Оқушылардың білім тексерісінің кестесі.Дәріс пен практикаға қатысу (семинарлық, зертханалық, индивидуалдық,студиялық) 0-100 балмен бағаланады.

Пән бойынша тапсырмалардың орындалуы мен тапсырылуының кестесі:№ Жұмыс

түріТапсырманың тақырыбы, мақсаты мен мазмұны

Ұсынылатын әдебиет

Орындалууақыты

Бақылау түрі

Тапсыру мерзімі

1 2 3 4 5 6 71 Реферат HTML тілінің

негіздер3 апта 4-ші апта

2 Реферат FrontFage-дің негіздері

2 апта 6-ші апта

3 Межелікбақылау

Модуль 1,2 Коллоквиум 8- ші апта

4 Реферат JAVASCRIPT тілі 1 апта 10-шіапта

5 Реферат Perl тіліне кіріспе 2 апта 12-шіапта

6 Межелікбақылау

Модуль 3,4 коллоквиум 15-шіапта

11.Оқушылардың білім бағасының критерийлері

Дисциплина білімінің соңында барлық өтілген тақырыптар бойынша тест түрінде экзаментапсырылады. Емтиханға кіру рұқсатын алу үшін, берілген тапсырмалардың барлығы тақырыпбойынша орындалуы керек.Әрбір тапсырма 0- 100 балмен бағаланады.Рұқсаттама рейтингі орындалған тапсырмалардың арифметикалық ортасыншығарады(лекцияға қатысуы,үй жұмысы,СӨЖ бойынша тапсырмалар,практикағаарналған тапсырмалар және т.б.,рубеждік бақылау)Қорытында бақылауға, ереже бойынша, барлық оқу бағдарламасының талаптарын орындаған (барлық зертханалық жұмыстың тапсырылуы, СӨЖ бойынша тапсырмалар мен жұмыстың орындалуы), курс жұмысын (жоба) қорғап, тиісті бағасын алған және тиісті рейтингін жинаған (50 балдан кем болмауы керек) студенттер жіберіледі. Студенттердің оқу табысының деңгейі әр дисциплина сайын қорытынды бағамен анықталып , жиберілу рейтинги мен қорытынды емтиханның бағаларымен есептеледі

Қ = ЖР*0,6 + ҚБ*0,4

Салмақтың сыбағалары жыл сайын институттың ғылыми алқасы орнықтырады және жіберілу рейтинги 0,6 астам, ал қорытынды бақылау 0,3 астам болуы тиіс.Курс жобасы/ курс жумысы комиссия алдында қорғалады. Баға сәйкесінше, көрсетілген білімге, мұғалімнің пікірімен қойылады.

Page 23: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

Қорытынды баға дисциплина бойынша қойылады, егер студентте тиісті баға болса, рейтинг бойынша және қорытында баға бойынша. Қорытынды бақылауға себепсіз босатылу болса «қанағаттандырылмаған» деген баға қойылмауы мүмкін. Емтиханның және кезеңдік аттестацияның нәтижелері тәртіп бойынша сол күні немесе келесі күні студенттерге айтылады, егер жазбаша емтиханы екінші күні өткізілсе. Қорытынды бағаны дұрыс есептеу үшін студенттің білімі, межелі бақылауда және қорытынды емтиханда 0 ден 100 % дейін бағалайды.Межелік бақылаудың бағасы, ағымдағы бағамен және межелік бақылаудан жиналады.Оқу табыстары, яғни білім, студенттің дағдылары мен құзырлары ереже бойынша «WEB технологиялар» деген цифрлық баламасымен және әріптік жүйесімен бағаланады

Әліпби жүйеменбағалау

Үпайдың цифрлікэквиваленті

Пайыздықмазмұны

Келісім жүйе бойыншабағалау

A 4,0 95-100Өте жаксы

A- 3,67 90-94B+ 3,33 85-89

ЖаксыB 3,0 80-84B- 2,67 75-79C+ 2,33 70-74

ҚанағатC 2,0 65-69C- 1,67 60-64D+ 1,33 55-59D 1,0 50-54F 0 0-49 Қанағаттандырылмаған

12. Оқытушының талаптары, саясаты және рәсімдеріОқытушылардың барлық аудиториялық сабақтарды босатпауы талап етіледі. Сабақты босатқан жағдайда студент босатқан сабақтың орнын толтыру керек. Студенттің екі сабақтан артық босатуға құқысы жоқ. Екі реттен артық кешіккен жағдайда оқытушы студентті аудиторияға кіргізбеуге құқылы. Лекцияға бөгде адамның қатысуына қатаң тыйым салынады.

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

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

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

Студенттердің оқытушымен бірге өздік жұмысын (СӨЖМ)орындау барысында келесі төрт қағидаттарға сүйенуі шарт:Бірінші, оқу курсында оқытылған білімнің студенттің қабылдап, оны пайдаға асыруы. Екінші, студент өз еркімен оқытушының жетегінде оқу материалын талдап, қажетті әдебиеттерді қарастырып, үйге берілген тарсырманы, бақылау және курстық жұмыстарын, т.б. орындайды. Студенттерден бұл кезеңде білімнің жұмыс амалдарын игеріп, оқудағы өз қиыншылығыңды талдап, бекіту, өз-өзіңді ұстай білу, ұйымдастырушылық қабілетті қажет етеді. Үшінші, студенттерде қиын жағдай туындаса, ол сол мәселенің жауабын тауып, сол сұраққа жауап табуы керек. Төртінші, студенттер оқытушыға өзіндік мәлімдемелерімен, сұрақтарымен жақындап, кеңес алуы керек.

Page 24: ПӘН БАҒДАРЛАМАСЫ (SYLLABUS) · html-құжаттарды жасақтау және өңдеу үшін кез келген қарапайым мәтіндік редактор

13. ӘдебиетНегізгі1) Бөрібаев Б., Мадьярова Г.А. Web-технологиялар: Оқулық. – Алматы: ЖШС РПБК

«Дәуір», 2011.-360 бет.2) А.В. Могилев, Н.И. Пак, Е.К. Хеннер Информатика: Учеб. пособие для студ. пед.

вузов. — М.: Академия, 2004. — 816 с. 3) Web-технологии: учебно-методический комплекс – Алматы: Нур-принт, 2012.- 98 стр.Қосымша1) Камардинов О. Информатика. Оқу құралы. Алматы: «Қарасай» баспасы, 2008. – 360б.2) Информатика: Базовый курс / Под ред С.В. Симоновича – СПб.: Питер, 2000. – 638 с.3) Информатика: Базовый курс: Учебное пособие для втузов / Под ред С.В. Симоновича–

СПб.: Питер, 2001. – 638 с. 4) Информатика: Базовый курс: Учебное пособие для втузов / Под ред С.В. Симоновича– СПб. : Питер, 2003. – 640 с.