Теориядан ысаша малматтар

Зертханалы жмыс

Таырыбы:Web осымшаларды жобалау. Деректерді серверге жіберу. Web осымшаларды графикалы интерфейсін тадау. Стиль ру.

Жмысты масаты: HTML тэгтерін олданып арапайым Web-паратар растыру

HTML жаты негізгі мтіннен жне белгілеу тегтерінен трады. HTML жаты – ол кеейтілу аты .htm болатын деттегі мтіндік файл. Оны ру шін кез келген мтіндік редакторды олдануа болады. Ал рылан Web – параты нтижесін кру шін Microsoft Internet Explorer браузері олданылады.

HTML файлыны анытамасы.Кез келген HTML-жатында орналасатын е бірінші тэг – бл <HTML>... </HTML>. Бл тэг арылы біз жатта HTML- мтіні бар екендігін білеміз. Барлы жазылып отыран жаттаы мліметтер осы тэгтарды ішінде орналасуы ажет.

< HTML >

...

жат мтіні

...

</HTML >

Сізді жатта шынымен HTML-командалары бар екендігін білдірдііз. жат негізі екі бліктен: "таырыбынан" жне "жат денесінен" трады.

Таырып анытамасы.Таырып анытамасы <HEAD> … </HEAD> тэгтарыны ішінде орналасады.

< HTML >

<HEAD>

…

Таырып анытамасы

...

</HEAD>

жат мтіні

</ HTML >

Таырып анытамасы блігінде жатты “атын” крсетіп кетуге болады. Ол шін <TITLE> … </TITLE> тэгтарын олданамыз. Браузер бл тэгпен кездесу барысында ол оны ішіндегі барлы апаратты “атауы” ретінде бейнелейді. Бл тэгты олдану мысалы:

< HTML >

<HEAD>

<TITLE> жатты атауы </TITLE>

</HEAD>

жат мтіні

</ HTML >

жат денесіні анытамасы

алан HTML-жат, яни алан барлы мтін <BODY>…</BODY> тэгіні ішінде орналасады. Сонда бізді жат жалпы аланда мына трде болады:

< HTML >

<HEAD>

<TITLE> жатты атауы </TITLE>

</HEAD>

<BODY>

жат мтіні

</BODY>

</ HTML >

Бл 3 тэг стандарт бойынша атысты арастырыланымен, кейбір браузерлер жатты оларды кмегінсіз-а бейнелей алады. Біра бл тэгтарды сілтеп кету керек, себебі келешекте тэгтар ажет болан жадайда жатты редакциялау ажет болады.

1-жаттыу.арапайым HTML файлдарын растыру.

1. растырылан Web-параты сатау шін KURS-бумасын ашыыз.

2. Блокнот (Notepad) стандарт программасын жктеіз.

3. арапайым HTML-файлыны мтінін редактор терезесінде терііз.

<HTML >

<HEAD>

<TITLE> HTMLоу файлы </TITLE>

</HEAD>

<BODY>

Сейсенбіге арналан саба кестесі

</BODY>

</HTML >

4. RASP.HTM атымен файлды сатаыз.

5. растырылан Web-параты кру шін Microsoft Internet Explorer браузерін жктеіз.

6. Файл (File), Открыть (Open), Просмотр (Обзор, Browse) командаларын орындап KURS бумасыны ішінен RASP.HTM файлын тауып, оны жктеіз. Web-параты (“HTML оу файлы”) атауы браузерді жоары статусы жолында бейнеленгенін кріп тексерііз.

HTML-жатын бейнелеген кезде браузерлер автоматты трде мтінді экранда орналастырады. Ол файлда кездесетін символдар мен бос жол адымдарына мн бермейді.

Жолды тасымалдауын орындайтын жне жаа абзацты басталуын беретін арнайы командалар бар. Одан алса браузер программасына форматтауды тыйым салатын жне экрана длме-дл мтін файлыны зіндісін бейнелейтін командалар бар.

- жолды тасымалдаушы тэг жолды келесі мтіннен немесе графикадан бліп трады.  тэгі де жолды бледі, сонымен атар абзацты айындап тратын бос жол алдырады. Бл 2 тэг бірэлементті болып табылады.

2-жаттыу. Жол-тасымалдау мен абзац тэгтарын олдану.

1. HTML файлыны мтініне згеріс егізііз.

<HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY>

Сейсенбіге арналан 

саба 

кестесі

</BODY>

</HTML >

2. згертілетін мтінді RASP.HTM файлында сатаыз.

3. Шыан Web-параты Microsoft Internet Explorer браузері кмегімен арап шыыыз. Экрандаы мтін крінісі алай згерді?

Мтін зінділерін ерекшелеу.Мтін зінділерін ерекшелеу тэгтері жеке символдар мен сздерді бейнелеуін басаруа ммкіндік береді. Осы масатта ш трлі тэгтар олданылады:

… - жартылай алы арамен ерекшелеу (полужирный)

… - курсивпен ерекшелеу

…-астын сызу арылы ерекшелеу

рама ерекшелеу олданылуы ммкін. Мысалы, Сейсенбіге арналан саба кестесі деп згерту енгізііз.

Біра бл жадайда рама тэгтарды жазылу ережесін есте сатау керек.

<1-тэг> <2-тэг>...</ 2-тэг> </ 1-тэг> - дрыс жазу

<1-тэг> <2-тэг>...</1-тэг> </2-тэг> - ате жазу.

Символ лшемдеріні берілуі.Браузер арылы бейнеленген мтінді басаруды 2 тсілі бар.

- Таырып стилін олдану;

- Негізгі жат шрифтіні лшемін беру немесе аымдаы шрифтіні лшемін беру;

Таырып стилін олдану.Мнда6-таырып тэгі олданылады (<H1>-ден <H6>-а дейінгі). рбір тэгке браузер параметрлеріні берілген наты стильі сйкес келеді.

3-жаттыу.Таырып стилін олдану.

1. RASP.HTM файлына згеріс егізііз.

< HTML >

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY>

<H1> сейсенбіге арналан </H1> саба кестесі

</BODY>

</ HTML>

2. Шыан Web-параты арап шыыыз.

Аымдаы шрифтіні лшемін беру. шрифтік тэгі 1-ден 7-ге дейінгі диапазонда мтінні кез келген жерінде аымдаы шрифтіні лшемін беруге ммкіндік береді.

4-жаттыу. Аымдаы шрифтіні лшемін беру.

1. RASP.HTM файлына келесі згерістер енгізііз.

< HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY>

 сейсенбіге арналан 

саба кестесі

</BODY>

</HTML>

2. з бетіізбен “сейсенбіге арналан саба кестесі” мтініні шрифт лшемін тэгі арылы згертііз.

3. HTML-жатыны хаттамасын фрагментті ерекшелеу жне жолды тасымалдау мен абзац тэгтары арылы згертііз.

Гарнитура мен шрифт тсі. тэгі гарнитура пішіні мен мтін тсін згерту ммкіндіктерін береді. Шрифт гарнитурасын згерту арапайым тэгіне FACE атрибутын осу арылы жзеге асады. Мысалы, мтінді Arial шрифтімен жазу шін деп жазу керек.

Шрифт тсін згерту шін тэгінде COLOR = “X” атрибутын олдануа болады. Х-ті орнына тсті атын (тырнашада) оямыз немесе 16-лы мндегі сандар жиынтыын жазамыз. Тсті 16-лы сандармен беру шін, бл тсті райсысы О-дан -а дейінгі мнге ие болатын, жіктелген ш рама бліп крстеуге болады: ызыл (R-Red), жасыл (G-Green), кк (B-Blue). Бл жадайда біз RGB деп аталатын форматпен жмыс істейтін боламыз.

5-жаттыу.Шрифтіні тсі мен гарнитурасын беру.

1. RASP.HTM-жатына келесі згерістер енгізііз.

< HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY>

Сейсенбіге арналан саба кестесі 

</BODY>

</ HTML>

2. з бетіізбен жат мтініні лшемін, тсін, гарнитурасын, стилін згертііз.

Мтінді туралау. HTML-тэгтарыны кмегімен мтіннін туралауды басаруа болады. Егер туралау тсілі рсетілмесе, жаттаы барлы элементтер сол шеттен тураланып, о жаы ретсіз орналасады.

азіргі браузерлер ALIGN = : мтінді туралау атрибутын олданады.

ALIGN = CENTER – центрі бойынша туралау

ALIGN = RIGHT- о шеті бойынша туралау

ALIGN = LEFT – сол шеті бойынша туралау.

6-жаттыу. Мтінді туралау.

1. RASP.HTM файлына келесі згерістер енгізііз.

< HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY>

 

Сейсенбіге арналан 

 саба кестесі 

</BODY>

</ HTML>

Мтін мен фон тсін беру.Фон мен мтін тсін бейнелегенде браузерлер нсіз келісім бойынша алыптасан тстерді пайдаланады. Олар браузер кйіні параметрлерімен беріледі. Егер сіз баса тс бергііз келсе, онда оны HTML-файлыны басында <BODY> тэгінде беріп кету керек.

BGCOLOR атрибуты= пара фоныны тсін анытайды, TEXT= барлы паратаы мтін тсін береді, LINK = жне VLINK = сйкесінше арастырылан жне арастырылмаан сілтемелерді тсін анытайды (соы 2 параметр кейін арастырылады).

7-жаттыу. Мтін фоныны тсін беру.

RASP.HTM-файлына келесі згерістер енгізііз.

< HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY BGCOLOR = “#FFFFCC” TEXT =“#330066”>

Сейсенбiге арналган 

 саба кестесі 

</BODY>

</HTML>

Web-парата графиканы орналастыру.<IMG> тэгі жата бейне енгізуге ммкіндік береді. Бл бейне жатты тэг орналасан жерінде пайда болады. Берілген тэг бір элементті.

Web-те графика ереже бойынша 3 форматта тарайды: GIF, JPG, PNG. Келесі жаттыуды орындаанда WAGON. GIF графикалы файлы KURS жмыс каталогында саталып орналассын.

8-жаттыу. Web-парата графиканы орналастыру.

RASP.HTM файлына келесі згерістер енгізііз.

< HTML>

<HEAD>

<TITLE> HTML оу файлы </TITLE>

</HEAD>

<BODY BGCOLOR = “#FFFFFF” TEXT = “#330066”>

Сейсенбіге арналан 

 саба кестесі 

<IMG SRC =“ WAGON.gif”>

</BODY>

</HTML>

<IMG> тэгінде кптеген атрибуттар бар, олара тменде крсетілгендей осымша жмыстар жктеуге болады. Олар IMG кодынан кейін тэгті кез-келген жерінде орын алады.

SRC – е міндетті параметр. Суреті бар файлды мекен-жайын (URL) крсетеді.

HEIDHTжне WIDHT – сйкесінше суретті биіктігі мен зындыын анытайды. Егер берілген лшемдер наты лшемнен згеше болса, онда сурет масштабталады (кейде крнекті сапасын жоалтады).

HSPACE жне VSPACE – блар суретті жат объектілерінен клдене жне тігінен анша шегіністе орналасанын анытайды.

ALIGN – міндетті параметр. жаттаы суретті туралануын береді. Келесідегідей мндерге ие болады:

left – суретті жатты сол шетінен туралайды. Оан атысты мтін о жаынан крінеді.

right – суреттегі жатты о шетінен туралайды. Оан атысы мтін сол жаынан крінеді.

top жне textop – суретті жоары жиегіндегі мтін жолыны аымдаы жоары сызыын туралайды.

middle – азіргі аымдаы мтін жолыны базалы сызыы сурет центрмен тураланады.

аbsmiddle–аымдаы мтін жолыны центрін сурет центрмен туралайды.

botton жне baseline –аымдаы мтін жолыны базалы сызыы мен суретті тменгі жиегін туралайды.

absbottom – суретті тменгі жиегін аымдаы мтін жолыны тменгі жиегімен туралайды.

NAME – Осы жата арналан суретті атын анытайды. Сіз кез келген атты бос жол алдырмай латын символдары мен цифрлары арылы бере аласыз. Егер сіз суретке кіру жолын, мысалы, Iava-Script-сценарийлері жолдарынан жзеге асырсаыз атау керек болады.

ALT– егер браузер керекті суреті бар файлды таба алмаса немесе мтіндік ережеге осылмаса, суретті сол жерде браузер бейнеленген мтінді анытайды.

BORDER – суретті айналасындаы рамканы зындыын пикселдерде анытайды. Егер сурет гипермнді сілтеу болса ана рамка шыа келеді. Бндай жадайда BORDER мні нольге те.

LOW SCR – бл SRC параметріндегі берілген суреттен сапасы да, клемі де тмен суреті бар файлды мекен-жайын (URL) береді. Бл параметрді олдаушы браузерлер бірінші LOW SRC-ден сурет жктейді, сосын оны SRC-тегі суретпен алмастырады.

USEMAP – МАР элементімен берілген навигацилы картаны (image map) суретке олданады. Маына ретінде картаны алдында торшасы бар атымен беріледі. Мысалы, карта аты – “map1” болса, онда оан атысты ссылка мынадай болады: “#map1”. Бл жерде назар аударатын нрсе жазу жне басылым ріптері бл параметрде браузерлер арылы р трлі деп беріледі.

ISMAP– Сервер дейтін навигациялы карта (image map) ретінде суретті анытайды. Сурет гиперссылка болан кезде олданылады. Тышанымен шаыру кезінде серверге басылан x, y – координаталары жіберіледі. Алынан координаталара байланысты сервер (егер сйкес программалы амтамасыз етілсе) сізге кез келген жатты крсете алады. Бл параметр маынаа ие болмай-а жалау ретінде болады.

Мысал1.

Бл мтін суретті о жаынан крінеді жне суреттен 10 пиксель ашытыта орналасады.

Мысал2. Суретті гиперссылка трінде олдану.

Досьені арап шыу шін о жа батырмасын басыыз.

Мысал3. ISMAP-ты олдану.

Мысал4 .USEMAP-ты олдану.

9-жаттыу. Бейне атрибуттарын орналастыру.

RASP.HTM файлына згеріс егізііз: ALT, BORDER, HEIGHT, WIDTH графикалы атрибуттарын олданып крііздер.

Ескерту. рашан графикалы файлды пішініне (клемі байтпен) назар аударыыз, себебі ол Web-параты жктелу уаытына сер етеді.

Фонды графика.Фонды бейне – бл кішкене тікбрышты плашкасы бар графикалы файл. Браузермен арау барысында бл плашка бірнеше рет айталанып, терезені толтырады жне ол терезені пішініне туелсіз.

Фонды графика <BODY> тэгінде беріледі.

10-жаттыу. Web-параа фонды бейне беру.

RASP.HTM файлына згерістер енгізііз:

<HTML>

<HEAD>

<TITLE>HTML оу файлы</TITLE>

</HEAD>

<BODY BACKGROUND=”WAGON.GIF” TEXT=”#330066”>

 Сейсенбіге арналан 

саба кестесі 

</BODY>

</HTML>

WAGON.GIF файлы фонды бейнені ояды.

Кестелер дайындау.Кестелер HTML жатыны маызды блігі болып табылады. Ол тік баандар мен клдене жолдардан тратын тікбрышты торлар. Жолдар мен баандарды иылысуы яшы деп аталады. яшыта мтін, графика немесе баса кесте орналасуы ммкін.

Кесте негізгі ш бліктен трады: кесте атауынан, баандар таырыбынан, яшытардан.

Кесте жолдар бойынша толтырылады (солдан оа жол бойынша жне келесі жола кшу). рбір яшы толтырылуы тиіс.

6.1- кесте – Кесте безендіру тэгтері

Тэг	Форматы	Сипаттамасы
TABLE	<TABLE> мтін </TABLE>	Кестені жариялау
TR	<TR> мтін </TR>	Жолды крстетін тэг
TD	<TD> мтін </TD>	Баанды крстетін тэг

6.2-кесте - <TABLE> тэгіні атрибуттары

Атрибут	Форматы	Сипаттамасы
BORDER	<TABLE BORDER =1>	Кесте айналасына оршау орнатады
WIDHT	<TABLE WIDHT=60%>	Кесте енін пара еніне байланысты процентпен немесе пикселмен береді
BGCOLOR	<TABLE BGCOLOR =”#RRGGBB”>	Кесте фоныны тсін береді

6.3-кесте - <TD> жне <TR> тэгтарыны атрибуттары

Атрибут	Форматы	Сипаттамасы
ALIGN	<TR ALIGN=RIGHT>	Клденеінен туралауды таайындайды (RIGHT, LEFT, CENTER)
VALIGN	<TR VALIGN=TOP>	Тігінен туралауды таайындайды (TOP, MIDDLE, BOTTOM, BASELINE)
BGCOLOR	<TR BGCOLOR =”#CCCCFF”>	Фон тсін береді

11-жаттыу.Кесте ру.

1. Блокнот бадарламасын ашыыз.

2. Редактор терезесінде мына мтінді терііз:

<HEAD>

<TITLE>5-сынып сабак кестесi</TITLE>

</HEAD>

<BODY COLOR=”FFFFFF”>

5 КЛАСС 

 Дуйсенбi 

<TABLE BORDER="I" WIDTH=100% BGCOLOR="99CCCC">

<TR BGCOLOR="CCCCFF" ALIGN=CENTER>

<TD>Сабак</TD><TD>5 A</TD><TD>5 B</TD><TD>5 B</TD>

</TR>

<TR> <TD>1</TD>

<TD>Орыс тiлi</TD><TD>Адебиет</TD><TD>Тарих</TD>

</TR>

<TR>

<TD>2</TD><TD>Алгебра</TD><TD>Акпараттану</TD><TD> Агылшын тiлi</TD>

</TR>

<TR>

<TD>3</TD><TD>Тарих</TD><TD>Акпараттану</TD><TD>Алгебра </TD> </TR> </TABLE>

</BODY>

</HTML>

3. жатты 5.HTM атымен сатаыз.

12-жаттыу.Кесте ру.

Шыан Web-параты келесі кндердегі саба кестесімен толытырыыз.

Бір жат аймаындаы сілтеме.Бл сілтемелер шін 2 блікті бар болуы шарт: таба жне сілтемені зі. Сілтеме таба атын олданады. Сілтемелер ерекше тспен немесе астын сызу арылы ерекшеленеді. Бл браузерді орналасуына байланысты болады. Сілтеме тсін згерту шін <BODY> тэгіні LINK жне VLINK атрибуттары олданылады.

Сілтеме сипаттамасы.

<A HREF = “#DC”> Дйсенбі </A>

Таба (DC) алдына айда кшуін баыттайтын # символы ойылады. “>” жне “<” символдары арасында мтін жазылады. Бл мтінде сілтеме бойынша кшу жзеге асады.

Табаны анытайы.

<A NAME = “DC”> Дйсенбі </A>

13-жаттыу. Бір жат аумаында сілтеме ру.

1. 5.HTM файлын Wеb-параты басына апта кндеріні аттарын жазып толытырыдар:

<HTML>

<TABLE WIDTH=100%>

<TR> <TD>Дуйсенбi</TD>

<TD>Сейсенбi</TD>

<TD>Сарсенбi</TD>

<TD>Бейсенбi</TD>

<TD>Жума</TD>

<TD>Сенбi</TD>

<BODY BGCOLOR="FFFFFF">

</TR> </TABLE>

 

...

</HTML>

3. Файлды сатаыз.

Гипермтіндік байланыстар ру.HTML-тіліні бір жаттаы сілтемелерде екінші бір жата кшіру ммкіндігі маызды асиеті болып саналады. Сілтеме ммкіндіктері:

1. HTML файлына дйсенбіге сілтейтін таба ойыыз:

...

<A NAME="ДС"> Дуйсенбi </A> 

...

3. Тадалынан табаа апта кндеріні атауына сілтеме жасаыз.

...

<TABLE WIDTH=100%>

<TR>

<TD><A HREF ="ДС">Дуйсенбi </A></TD>

<TD>Сейсенбi</TD>

<TD>Сарсенбi</TD>

...

4. Файлды сатаыз.

5. Шыан Web-параты арап шыыыз.

Баса HTML-файлына сілтеме жасау.Сілтемелер ерекшеленген сзде немесе сйлемде батырманы басу арылы баса файла туге ммкіндік береді.

Сілтемені сипаттайы:

<A HREF = “5.HTM”> 5сынып </A>

Файл атынан (5. НТМ) кейін “>” жне “<” символдары арасында мтін орналасады. Бл сзге шерткен кезде баса файла туге болады.

14-жаттыу. Баса HTML-жатына сілтеме жасау.

1. Браузер RASP.HTM файлын жктеіз.

2. Файла келесі згерістер енгізііз.

<HTML>

<HEAD>

<TITLE> HTML оку файлы </TITLE>

</HEAD>

<BODY BGCOLOR = "#FFFFFF" TEXT ="#330066">

 Сейсенбiге арналган 

 сабак кестесi 

<IMG SRC = "PH02750G.GIF">

<CENTER>

<TABLE WIDTH = 60%>

<TR> <TD> <A HREF="5.HTM"> 5сынып </A> </TD> <TD> 6сынып </TD> </TR>

<TR> <TD> 7сынып </TD> <TD> 8сынып </TD> </TR>

<TR> <TD> 9 сынып </TD> <TD> 10 сынып </TD> </TR>

<TR> <TD> 11сынып </TD> <TD> </TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML >

3. Файлды сатаыз.

4. Шыан Web-параты арап шыыыз.

Курсорды 5 сынып сілтемесіне келіп, сол сзде шертііз, сонда баса файла кшесіз.

15-жаттыу. Баса HTML-жатына графикалы трдегі cілтеме ру.

1. 5.НТМ файлына згеріс егізііз, яни ссылка 5 сынып саба кестесі деген бетті басына сілтеме жасаыз.

Сілтеме ретінде келесі графикалы файлды олданыыз.

...

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

2. Шыан Web-параты арап шыыыз. Сілтеме ретінде HOME.GIF файлындаы сурет шыып трады.

3-тапсырма:Берілген нсадаы таырып бойынша Web-параты рыыз.

6.4-кесте – Тапсырма нсалары

Нса №	Таырыбы
1.	Мені болаша мамандыым
2.	Жол озалысы ережелері
3.	Мені халымны салт-дстрі
4.	арМТУ-ды скери кафедрасы
5.	Футбол клубтары жне футболшылар
6.	Спорт трлері
7.	азіргі замандаы музыка
8.	лемні ататы боксерлары
9.	аза киносыны актерлері
10.	Бізді аланы жоары оу орындары
11.	Бізді ескі жне сйікті кинофильмдеріміз
12.	Суреттелген ліппе
13.	азахстанны курортты айматары
14.	азастандаы демалыс орындары
15.	Мені сйікті алам
16.	Автомобиль маркалары
17.	араанды аласыны КВН командалары
18.	лтты таамдар
19.	арМТУ-факультеттері
20.	аза эстрадасыны жлдыздары

Есеп беру мазмны:

1. Жмыстара ысаша сипаттама беру.

2. Жмысты орындалу ретін крсету.

3. рылан web-паратарды шыару.

4. Баылау сратарына жауап беру.