Тақырып. Web –графика.

Жоспар:

1. Графикалық форматтар.

2. Текстпен жұмыс.

3. Жылжымалы жол

Кілттік сөздер: тэг, атрибут

Иллюстрациялық материал: слайд

Көптеген жағдайларда графикалық бейнелеу Wed- құжаттардың ажырамас бөлігі болып табылады. Бүгінгі күні Web-бет элементтері негізгі екі форматты қолданады-GIF және JPEC . Барлық графикалық сілтемелер компьютер экранына Web- беттердің шығуына арналған, осы форматтардың файлдарын танып , шығаруға арналған.

Бейнелеуді дайындау үшін кез-келген графикалық редакторды қолдануға болады, мысалы стандартты бейнелеу Paint , осы форматтар да файылдарды сақтаға мүмкіндік береді[18].

CIF форматтың файлдары (Graphic Interchange Format) .GIF кеңейтеді. Бұл форматта бейнелеу 256 түсті құрайды. Оралған файыл оролмаған файылдан қарағанда әлдеқайдан аз орын алад (мысалы ,BMP форматында).

CIF98a форматының ерекшелігі белгілі бір мүмкіндігі мол. GIF, файлын мүмкіндігі бар.

• Бейнеленген түстердің біреуі ашық жылтыр түсті болып шығуы мүмкін .Бұл тік үш бұрышты формалы сурет шығарып көне қоймай , оны сол қалпында көрсететін Web- беті белгілі жерлерден шығады..

• Сызық аралық бейнелеу Интернеттен қабылдаған жағдайда біртіндеп шыға бастайды , алдымен ұсқынсыз, кейін біртіндеп анық бола бастайды. Баяу келетін арналар бойынша ақпарат алғанда, Интернет қосылуына қажеттілікті уақыт бойынша ұтады.

• CIF- анимация жай ғана суретті кішкене видеоайналдырымға айналдырады. Сандартты файылда CIF үлкейтілуіімен кадрлар жинағы сонымен бірге олардың сценариялары сқталады.

Ұлғайтып қолдану мүмкіндігі үшін, CIF файлын құруға арналған Paint бағдарламасынан сапалы графикалық редактор қажет. CIF графикасын құру үшін арнайы заттар қолданылады .

JPEG форматының файлы ұлғайтып көрсетуі мүмкін JPEG немесе JPG. Формат суретті бейнелеуді сақтауға арналған 24 түсте қолданылады.

Форматты таңдауда бірінші кезекте алынған файылдың көлемі , екіншіден бейнелеу сапасы ескерілуі керек.

Суреттер Web- жүйеде бөлек файылда сақталады , бірақ Web- бет элементіне ұқсас бейнеленеді . Суретті шығару үшін тексті элемант қолданылады , тоқ тегасы <IMG> қосылады. <IMG> тегасында міндетті түрде SRC= атрибуы сақталу карек.

<IMG SRC=”picture 1.gif” >

Суреттің дыбыссыз браузер бойыкша бейнеленуінде олардың анық разерлері қолданылады. Егерде суреттің көлемді қылу керек болған жағдайда WIDTH= және HEIGHT арибуттары қолданылады , олар суреттін енімен ұзындығын көрсетеді . Егер бұл параметрлерге тапсырма берілсе сурет шыққанға дейін браузер осы суреетте бейнелеу үшін орынды анықтайды .Бұл тапсырма берген беттегі бейненін шығуын жылдамдатады , сондықтан бұл атрибутты үнемі қолдануға болады.

<IMG SRC=”hikture2.ihg=”100”HEIGHT=”40”>

Web беттегі ішкі түрі суреттің орналасуына байланысты болады . Бейне автоматты түрде көріну үшін оны бөлек абзцқа қосады. Жолға қосылған бейнені шығару үшін ALIGN= атрибутының көмегімен тақырыппен әрекет етіп режимге тапсырыс беруге болады.

<IMG SRC=”hikture3.gif= ALIGN=”BOTTOM”>

Бұл атрибутты үш жағдада қолдануға болады :

• Егер тапсырыс ALIGN=”BOTTOM” берілсе онда бейненің төменгі шегі негізгі тақырыпты жолдармен қосылады.

• Егер ALIGN=”MIDDLE” онда бейненің ортасы тақырыптарға ортаңғы жолдары мен қосылады.

• Егер ALIGN=”TOP” тапсырма берілсе онда тақырыптың жоғарғы жолағы мен бейненің жоғарғы шекарасы теңдеседі .Сондайақ ALIGN= атрибутын қолдануда мынаған қол жеткізімді.

• Егер ALIGN=”RIGHT” тапсырма берілсе онда бейне беттің сол жағында орналасады .Ал келесі тақырып (текст) оның оң жағында орналасады .

• Егер ALIGN=”RIGHT” ттапсырма берілсе онда бейне беттің оң жағына орнакласады. Ал келесі текат оның сол жағында орналасады.

Бұл жағдайда <IMG> тағасын қажетті абзацтың ең басы орналастыру керек.

Текс пен бейне шамасында бір шама ара қашықтық қалу керек . Бұл ара қашықтықтың көлемін HSPACE=(көлденеңнен ) және VSPACE= (ұзыннан) атрибутының көмегімен анықтауға болады.

Суретті бетті құрған кезде, суретті бәрі көре бермейтіндігін ескеру керек. Кейбір көруге арналған құралдары жоқ оқырмандарды суреттің мазмұны мен альтернативті мәттіннің көмегімен түсіндіруге болады. Альтернативті мәтін ALT атрибутының мәні есебінде қолданылады және суреттің орнына бейнеленеді .

Бейнеге тексті элемент сияқты тапсырма берілгендіктен , ол басқа тексті элементтің ішіне орналасуы .Мысалы гиперсілтеме сияқты (<A> -тегасы). Бұндай жағдайда бейне бейнелік сілтемеге жатады. Компьютер экранына құжат шыққан жағдайда көк түсті қоршау мен бейнеленді және көрсекіш формасы өзгереді. Web беттегі бейненің қолдануының тағы бір әдісі ,оларды фонды сурет есебінде қолдану.

Фонды суртте құралған құжатты бейнелеуде кампьютердің жұмыс терезесіне осы суйрет қоойылады, құжаттың жоғарғы сол жақ бұшынан немесе терезеден өлшей отырып құру керек.Фонды сурет BACKGROUND= <BODY> тегасында атрибуты көмегімен орындалады . Бейнелеу файылы үшін VRL абсолютті немесе қатысты адресі бұл атрибуттың мәні болып саналады.

<BODY BACKGROUND= “waves .git” TEXT=” YELLOW” >

5-дәріс

Тақырып. Тізімдермен жұмыс.

Жоспар:

1. Нөмірленген тізімдер

1. Маркерленген тізімдер

Кілттік сөздер: тэг, атрибут

Иллюстрациялық материал: слайд

HTML тілі тізімдердің бес түрін қамтиды оның ішіндегі (меню тізімі және каталог тізімі ) ескірген болып саналып қолдануға ұсынылмайды . Қалған үш типі –бұлар реттелген , өзінше , блокты элемент болып келеді.

Реттелген (нөмірленген ) және реттелмеген (маркерленген) тізімдер біріңғай хатталады. Олар реттелген тізімдер үшін <VL>көмегі арқылы жасалынады . Бұл тек <LI> жұп тегімен анықталатын тізімдер этементін ұстай алады. Жабылатын <LI> тегін орналасқан жерін қалпына келтіруі оңай болғандықтан жібере салуға болады .Ашылатын тегалар маркерлардің (реттелмеген тізімдерге ) түрін анықтайтын ,нумерацияның алмалы мен кезектілігінің (реттелігендерге ) атрибуттарын ұстай алады . Тізімдерді бірі біріне салуға рұқсатетіледі[11].

Анықтаушы тізім <DT> жұп тегімен тапсырылады. Онда екі типті элемент: анықтаушы терминдер (жұп <DT >)тега және анықтама жұп <DD> болады. Жабылатын </DT> және </DT> тегтерді түсіруге болады. Анықтамалар экранның сол жақ шетінен шегінгіреп бейнелейді. Бұл тізім мынандай түрде қалыптаса алады:

<DL>

<DT> Поршень

< DD> Біріңғай цилиндер немесе қуыс цилиндр ішіне нығыз кіретін диск

</DL>

6-дәріс