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

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

Тақырыбы: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>

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

сабақ кестесі

</BODY>

</HTML>

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

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

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

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

< HTML>

<HEAD>

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

</HEAD>

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

сабақ кестесі

</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>

</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>

5 КЛАСС

Дуйсенбi

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

</TR>

<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>

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

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

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

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

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

</TR> </TABLE>

...

</HTML>

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

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

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

...

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

...

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

...

<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>

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

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

<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.	Қазақ эстрадасының жұлдыздары