Paint графиктік редакторы

Графиктік бейнелермен жұмыс істеуге арналған қарапайым және аса кең таралған бағдарламалардың бірі Windows оерациялық жүйесінің тобына жататын американдық Microsoft фирмасының Paint графиктік редакторы. Microsoft Paint растрлі графиктің бір терезелі редакторынан тұрады, оның көмегімен қарапайым бейнелерді құруға, редактрлеуге болады және де оларды аса кең таралған BMP, JPEG, GIF форматтарында сақтауға болады. Редактордың ерекшелігі тек қана бір файлмен бір уақытта жұмыс жасау болып табылады. Құрылған суреттерді баспаға шығаруға, Windows жұмыс үстелінің фоны ретінде қолдануға болады, немесе басқа құжаттарға апарып қондаруға болады. Paint сонымен бірге бейненің өлшемін, өзгертуге, көлбеулікті, бұрылуды, созылуды және кескіндеуді орындау мүмкіндігін береді.

Paint құралдарының көмегімен растрлі үлгідегі қарапайым геометриялық фигураларды (түзу, дөңгелек, эллипс және т.б.) құруға болады, сонымен қатар Windows-тың шрифтер жиынын қолдана отырып суретке мәтін қосуға болады. Microsoft Paint бейнені «салу» процесіне және дайын фрагменттерді жинақтауға бағытталған және күрделі графиктік жұмыстарды, атоматтандырылған жобалауды, фото суреттерді редактрлеуді жүргізу үшін қолданылмайды.

Paint қосымшасының терезесі келесі бөлімдерден тұрады: құрал саймандар панелі; палитра; басты тізбелік; форматтау панелі.

Суретті қарап шығу аймағы. Барлық сурет – олар нүктелер жиыны. Егер масштаб 100% болса, онда нүктелер көрінбейді. Нүктелер масштаб 400% және одан көп болғанда көріне бастайды. Масштабты үлкейту үшін масштаб батырмасын басу керек немесе «Рисунок» тізбелігінен «Масштаб» командасына бару керек. «Сетка» режимінде суретті нүктелер арқылы түзетуге немесе қарындашпен жөндеуге болады. Суретті көлденеңінен және тігінен созуға болады, оны «Рисунок» тізбелігінде 1* дейінгі дәлдікпен бұрылу бұрышын бере отырып бұруға болады.

2. Векторлық графикті әзірлеуші Corel Draw бағдарламасы

CorelDRAW графиктік редакторы векторлық графиктермен жұмыс жасау үшін арналған және осыған ұқсас бағдарламалар арасында алдыңғы қатарға қойылады. CorelDRAW әйгілігі құрастыру құралдарының үлкен жиынтығымен, қолайлы ортасымен және алынатын бейнелердің жоғары сапалылығымен түсіндіріледі. Әсіресе CorelDRAW көптеген суреттерден, фотографиялардан және жазулардан тұратын иллюстрацияларды құру кезінде өте қолайлы. CorelDRAW көмегімен бейне компоненттерін керек орынға қою аса оңай. CorelDRAW бағдарлама пакетіне векторлы графика редакторынан басқа Corel Photo-Paint растрлік графика редакторы кіреді. Екі бағдарламаның интерфейсі өте ұқсас, ал мүмкіндігі бойынша олар бірін-бірі толықтырып отырады. Екі осы бағдарламаларды қолдана отырып, барлық күрделі графиктік жұмыстарды орындауға болады.

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

3. Растрлі графикті әзірлеуші Adobe Photoshop бағдарламасы

Adobe Photoshop қолданылу ортасы аса кең және полиграфиядан бастап интернетке дейінгілерді барлығын қамтитын растрлік графиктің барлық түрлерімен жұмыс жасау үшін құрылған. Photoshop сапасын жоғалтпай растрлік графиктің барлық әйгілі форматтарына кез келген бейнені жылдам конвертациялайды, фотографияларды сканерлеуге арналған қосымша ретінде жұмыс атқарады және сканердің барлық түрлерімен сәйкес келеді. Бұл өте қолайлы, себебі алынған бейнені басқа бағдарламаға көшірмей-ақ сіз сол мезетте жөндей аласыз. Сонымен қатар мұнда кез келген бейнелерді, мысалы ескі фотографияларды жөндей аласыз.

Растрлік бейненің негізгі элементі нүкте болып табылады. Егер бейне экрандық болса, онда бұл нүкте пиксел деп аталады. Операциялық жүйемен экранның қандай графиктік рұқсат етуі қолданылуына байланысты, экранда 640х480, 800х600, 1024х768 және одан көп пикселден тұратын бейне орналасуы мүмкін.

Бейненің өлшеміне байланысты дюймдегі (dots per inch - dpi) (1 дюйм = 25,4 мм) нүктелермен өлшенетін оның рұқсат етілуі тікелей тәуелді. Толық түсті бейнені полиграфиялық баспадан шығару 200-300 dpi –дан кем емес рұқсат етуді талап етеді.

Растрлік бейненің негізгі кемшілігі ол бөлшектерін қарап шығу үшін үлкейту мүмкіндігінің жоқтығы. Бейнені ұлғайтқанда нүктелер іріленіп, сурет бұзыла бастайды. Бұл эффект пикселизация деп аталады.

Жұмыстың мазмұны:

1-тапсырма. Paint графикалық редакторы

Paint графикалық редакторының көмегімен жеке есімхат әзірлеу.

Есімхатта: фамилиясы, есімі, әкесінің аты; мекен жайы; телефоны; оқу орнының толық аты; факультеті; туылған күні; зодиак белгісінің суреті болу керек.

Есімхатты әзірлегенде келесі растрлік графикалық қосымшаның құралдарын пайдалану керек: тік төрт бұрыш, дөңгелек; тұйықталған аймақты құю; бүріккіш (распылитель);

2-тапсырма. Corel Draw графикалық редакторы.

Кескіндердің көмегімен сурет салу. Контурдың тиімділігін пайдалану (7.1-сурет). Суретті салу үшін келесі қадамдарды орындаңыз.

Құрама кескіндерді құру керек:

1. Эллипс.

2. Бұрыштары дөңгеленген тік төртбұрыш.

3. Эллипс (шеңбер).

4. Екі бірдей шеңбер.

5. Үш нүктелі көпбұрыш (полигон).

Суретте көрсетілген кескінді (каркас) салыңыз. Орындалу реті объект номерімен сәйкес келеді:

· 1-объектіні қою қоңыр бояуға баяңыз. 2 және 3 объектілерді Weld командасымен біріктіріп, алдынғы көрініске қоямыз. Interactive Fill Tool құралының көмегімен ашық түсті қоңырдан қою түсті қоңырға ауысатын радиалды градиентпен бояймыз. Жиегін алып тастаймыз. 4- объектті қара түске боялады, жиегі алынады. 5-объект қара сұр түске боялады, жиегі алынады.

· Pick құралдың көмегімен барлық объектілерді қосып топтастырамыз (Ctrl+G). Мұртшаларды бояуға кірісеміз. Point Curve Tool 3 құралын таңдаймыз (үш нүкте бойынша қисық). Бұл құралдың атқаратын қызметі алдынғы құралдарда айтылғандай. Үш нүкте бойынша тіктөртбұрыш және үш нүкте бойынша Эллипис. Алдымен (тышқанның сол жағымен екінші нүктені ұстап тұрып) қисық нүктені белгілеңіз, сондан кейін үшінші нүктеге кішкентай имек жасаңыз.

· Мұртшаның ұшына кішкентай эллипсті орналастырып, қара түске бояу қажет. Жасалған сол мұртшаны топтастырамыз. Объектіні көшіріп, көлденеңінен қойыңыз. Оң жақ мұртшаны толығымен симметриялы болу үшін бұрыңыз.

· Барлық объектілерді тағы да топтастырамыз. Қанаттарын жасауға кірісеміз. Polyline немесе Pen көмегімен сол жақ қанатын жасаймыз. Барлық сегменттер кәдімгі түзу сызық.

Shape аспабымен қанатшаның жоғарғы жағын бөліп аламыз. Select All Nodes панельден кнопканы басамыз(барлық жүйелерді қосамыз). Осы жерден 70 дейін (Curve Smoothes) созу белгісін орнатыңыз. Қанатшаның жоғарғы бөлігі жасалып келеді.

· Осы оперцияна қанатшаның төменгі бөлігіне Curve Smoothes 80 дейін орнатыңыз. Жоғарғы жағын қызғылт сары түске боялады. Төменгі жағын ашық түске бояңыз.

· Қанатшаларды ашық түстерге бояу қажет. Ол үшін (интерактивті контур) Interactive Contour құрал көмегімен (анықтама: Интерактивті контур). Қанатшаның жоғарғы жағына бұл құралды қолданамыз. Төменгі суреттегідей панельдің параметрлерін белгілейміз.

· Оң жақ тышқанмен жоғарғы жақтағы түстер палитрасын аламыз. Аналитикалық үлгіде қанатшаның төменгі жағы алынады. Сізде мынандай сурет пайда болуы қажет.

· Екі бөлік қанатшаны топтастырып денесіне орнатамыз. Содан кейін «арқы жаққа» қоямыз.

· Pick құралымен сол жақ қанатын белгілеңіз. Scale палитраны шақырамыз (басқа тізім арқылы Arrange-Transformations-Scale немесе Alt+F9 клавишасымен). Суреттегідей көлденең параметрлер орнатамыз.

· Apply to Duplicate кнопкасын басыңыз (дубликатқа қолдану). Pick аспабымен оң қанатын денесіне жақын орналастырамыз. Көбелектің барлық денесін бірге топтастырамыз. Біздің көбелек дайын.

7.1-сурет – Тапсырма нәтижесі

3-тапсырма. Corel Draw графикалық редакторы. Нұсқа бойынша тапсырманы орындаңыз.

7.1-кесте – Тапсырма нұсқалары

Нұсқа №	Тапсырма
	Өз мамандығынның белгісін (эмблема) сал.
	ЖОО белгісін сал.
	Өз қалаңның белгісін сал.
	Авиакомпанияның логотипін салу.
	«Информатика» кафедрасының белгісін сал.
	Сауықтыру кешенінің белгісін сал.
	ЖШС «Әуежай» есімхатын (визитка) сал.
	«Информатика» пәнінің логотипін сал.
	ЖШС «Автокөлік сату» есімхатын сал.
	Құрылыс фирмасының белгісін сал.
	«СПОРТТЫҚ КЛУБ» белгісін сал.
	Фитнес клубының есімхатын сал.
	«КОМПЬЮТЕР КУРСЫ» есімхатын сал.
	«Кеңсе заттары» есімхатын сал.
	«Тұрмыстық техника дүкені» белгісін сал.
	«Қызмет көрсету» белгісін сал.
	«Туристік агенттік» белгісін сал.
	«Менің қалам» белгісін сал.
	«Оргтехника дүкені» белгісін сал.
	«Демалыс орны» белгісін сал

Бақылау сұрақтары:

1. Мәтінді қалай енгізуге және форматтауға болады?

2. Палитарға өзіңіздің түсіңізді қалай енгізуге болады?

3. Сурет фрагментін 27 % қалай өзгертуге болады?

4. Фигураны бүріккішпен (брызга), тұтас құю (заливка) тәсілімен қалай бояуға болады?

5. Бейненің фрагментін басқа құжатқа қалай апаруға болады?

6. CorelDRAW бағдарламасының ортасындағы негізгі элементтерді атап шығыңыз. Дұрыс шаршыны, тіктөртбұрышты қалай сызуға болады?

7. Объектіні қалай көшіруге, қайталауға (дублирование), клонирлеуге болады?

8. Қайталау мен клонирлеу айырмашылығы?

9. Кез келген нүкте айналасында объектіні қалай айналдыруға болады?

10. Мәтінді редактрлеудің қандай тәсілдерін білесіз?

11. Қарапйым мәтіннің фигуралық мәтіннен айырмашылығы қандай?

12. Барлық мәтіндік объектіге немесе бірнеше мәтіндік объектілерге әсер ететін өзгерістерді енгізу үшін қандай құралды қолдану керек?

13. Шрифт типін анықтайтын форматтау параметрлерін атап шығыңыз?

14. Adobe Photoshop бағдарламасының ортасындағы негізгі элементтерді атап шығыңыз.

15. Қабатқа бейненің құрылымдық элементі ретінде анықтама беріңіз.

16. Қабатты қалай құруға және жоюға, қабаттар ретін қалай өзгертуге болады?

17. Холстың (бейненің) өлшемін қандай тәсілмен өзгертуге болады?

Лабороториялық жұмыс №15. Интернет. Негізгі түсініктер (сайт, IP-адрес, порт, сокет, сервер, клиент)

Жұмыстың мақсаты: Интернетте жұмыс істеу дағдыларын үйрену, Интернеттегі адрестер және негізгі қызметтер туралы ұғымдармен танысу.

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

Интернет (internet) - бұл ТСР/ІР біріңғай хаттамалар жиынтығы байланыс үшін қолданылатын бүкіләлемдік желілердің, шлюздердің, серверлердің және клиент компьютерлерінің бірігуі.

Хаттама – бұл әртүрлі бағдарламалар арасындағы деректермен алмасуды анықтайтын келісімдер жиынтығы.

Желіге жалғанған компьютерлердің жұмыс істеу ережесін желілік хаттамалар белгілейді. Олар көп деңгейлі принцип бойынша құралады. Қазіргі уақытта желілік хаттамалар үшін OSI моделі қолданылады.

OSI моделі – бұл желі жұмысының жеті деңгейлік логикалық моделі.

Физикалық деңгейде бұл моделмен байланыс желісінің физикалық (механикалық, электрлік, оптикалық) сипаттамасы анықталады.

Каналдық деңгейде желі торабының деңгейін физикалық қолдану ережесі анықталады.

Желілік деңгей адреске және хабарламаларды жеткізуге жауап береді.

Транспорттық деңгей хабарлама компонентінің кезекпен өтуін бақылайды.

Сеанс деңгейінің қызметі - әртүрлі жұмыс станцияларында жұмыс істейтін екі қолданбалы бағдарламалардың арасындағы байланысты басқару.

Ұсыну деңгейі берілгендердікомпьютердің ішкі форматынан беру форматына тұрлендіру үшін қызмет етеді. Қолданбалы бағдарлама мен басқа деңгейлердің арасында қолданбалы деңгей шекаралық болып табылады.

Қолданбалы деңгей қолданушыныңжелілік бағдарламалармен байланысының қолайлы интерфейсін қамтамасыз етеді.

TCP/IP хаттамасы – бұл Интернетте байланыстың негізі болып табылатын төменгі деңгейдегі екі хаттама. TCP хаттамасы (Transmission Control Protocol) жіберілетін ақпаратты бөліктерге бөледі және барлық бөлікті нөмірлейді. IP (Internet Protocol) хаттамасы көмегімен барлық бөліктер алушыға беріледі. Барлық бөліктер алынғандығын TCP хаттамасы арқылы тексереді. Барлық бөлік алған соң, TCP оларды өз орындарына койып, бір тұтас етіп жинайды.

TCP/IP желісінің әрбір компьютері үш деңгейлі адреске ие:

· физикалық (MAC-адрес),

· желілік (IP-адрес)

· символдық (DNS-атауы)

Локальды МАС-адрес жүйесіне енетін компьютерлер үшін – бұл желілік адаптердің адресі немесе маршрутизатор порты, мысалы, 11-А0-17-3D-BC-01. Бұл адрестер жабдықтарды өндірушілермен бекітіледі және орталықтан басқарылатындақтан уникальды адрес болып табылады.

IP-адрес - бұл мысалы, 109.26.17.100 түріндегі тетрадамен жазылатын бірегей идентификатор. Бұл нөмір компьютерге тұрақты түрде немесе динамикалық түрде бекітілуі мүмкін, яғни қолданушы провайдермен қосылғанда, кез келген уақытта Интернетте IP-адрестері бірдей екі компьютер болмайды. Бұл адрес желілік деңгейде қолданылады.

Символдық адрес немесе DNS-атауы администратормен бекітіледі және бірнеше бөліктен тұрады, мысалы, машинаның атынан, мекеменің атынан, домен атынанSERV1.IBM.COM. Мұндай адрес қолданбалы деңгейде қолданылады. Мысалы, Тelnet немесе FTP хаттамалардында.

IР-адрес компьютерді нақты сәйкестендіреді, бірақ бұл жеткілікті емес. Электронды поштаны, файлдарды, гипермәтіндік ақпаратты т.б. беруді қамтамасыз ететін Internet – тің әрбір байланысында әртүрлі қызметтері жүктелуі мүмкін. Әр қызмет өзінің жұмысында сол немесе басқа қолданбалы деңгей хаттамасын қолданады. Файлдарды жіберу қызметін FTP - (File Transfer Protocol) хаттамасы, web-парақтарды жіберу қызметін - HTTP(HyperText Transfer Protocol) гипермәтін ақпаратын жіберу хаттамасы, электронды поштамен жұмыс жасау үшін - SMTP, POP3, IMAP және т.б. хаттамалар атқарады.

0-ден 65534-ке дейінгі сандардан тұратын әрбір қызметке жеке порт жүргізілген. Көп қолданылатын қызметтерге порттардың стандартты нөмірлері резервтелген. Сондықтан FTP үшін бұл 21, HTTP үшін 80, SMTP - 25, POP3 - 110.

Сондықтан, желіге қосқанда TCP-дағы кез келген байланыс арнасы екі мәнмен анықталады: ЭЕМ-ның IP-адресімен және порт нөмірімен. Бұл комбинация сокет деп аталады. (абоненттік нүктенің соңы).

Интернетте ақпаратқа қол жеткізу (қажет Web-парақты іздеу үшін) үшін домендік атаулар ғана емес, URL (Universal Resource Locator) ресурстардың көрсеткіштері қолданылады.

WWW (World Wide Web – бүкіләлемдік тор) – бұл HTML тілі және http хаттамасы қолданылатын, Интернеттің әртүрлі ресурстарына - құжаттарына, графикаға, аудио және видео жазбаларға рұқсат беруді жүзеге асыратын қызмет.

Іздеу жүйесі – бұл Интернет ресурстарын автоматты түрде қарайтын, олар таба алатын және олардың мазмұнын индекстейтін күшті компьютерлердің және бағдарламалардың комплексі.

Интернет желісіндегі сервер – бұл желідегі қолданушыларды қамтамасыз ететін компьютер: дисктерге, файлдарға, принтерге, электронды поштаға еркін енуді бөліседі. Негізінде сервер – аппараттық және бағдарламалық қамтамасыздандырудың жиынтығы.

Сервердің қызметіне қол жеткізе алатын кез келген компьютерді желінің клиенті немесе жұмыс парағы деп атайды.

Сайт – Интернеттегі бір-бірімен сілтемелер арқылы бйланысқан құжаттар жиынтығы.

Шлюз (gateway) - бұл компьютер немесе арнайы бағдарламалық қамтамазыздандыруларымен компьютерлер жүйесі. Ол әр түрлі хаттамалармен екі желімен байланысуға мүмкіндік береді.

Провайдер (ISP -Internet Service Provider) – бұл Интернет желісіне қосылуға мүмкіндік беретін, Интернет қызметімен қамтамсыз етуші мекеме. Провайдер жергілікті немесе ұлттық болуы мүмкін. Ол қажетті бағдарламалық қамтамасыздандырулармен қамтамасыз етеді. Электронды поштаның адресін және Интернеттің басқа мүмкіндіктеріне қол жеткізуді жүзеге асырады. Интернет қызметі ақылы болады.

Жұмыстың барысы:

1-тапсырма:

1. ЖМУ (www.zhgu.edu.kz) сайтынан сілтемелерді пайдаланып сайттың ішіндегісін қарап шығыңыз.

2. ЖМУ сайтынан өз факультетіңіздің сайтын қарап шығыңыз.

3. Шолушы бағдарламасын баптаумен танысыңыз (СЕРВИС тізбелігінен, СВОЙСТВА ОБОЗРЕВАТЕЛЯ).

4. Барлық қосымша беттерді қарап шығыңыз. Қосымша беттердегі қызмет көрсетушімен ғана өзгеретін баптауларға назар аударыңыз.

5. Web-парақтың қабылданатын көлемін кішірейтетін баптауды жүргізіңіз. Оның күйін баптаудан кейін міндетті түрде жаңарту (обновить) керек. (саймандар панелінде сәйкес батырма бар)

6. Көрсетілген сайттардан кез келген мәтінді өз дискіңізге жазыңыз.

7. Бастапқы баптауды қалпына келтіріңіз.

8. Интернеттен нұсқаға сәйкес ақпаратты іздеңіз және табылған ақпаратты өз дискіңізге сақтаңыз.

2-тапсырма: 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.

<IMG src="img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left">

Бұл мәтін суреттің оң жағынан көрінеді және суреттен 10 пиксель қашықтықта орналасады.

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

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

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

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

<IMG src="img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">

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 құжатының маңызды бөлігі болып табылады. Ол тік бағандар мен көлденең жолдардан тұратын тікбұрышты торлар. Жолдар мен бағандардың қиылысуы ұяшық деп аталады. Ұяшықта мәтін, графика немесе басқа кесте орналасуы мүмкін.

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

Кесте жолдар бойынша толтырылады (солдан оңға жол бойынша және келесі жолға көшу). Әрбір ұяшық толтырылуы тиіс.

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

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

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

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

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-парақты құрыңыз.

4-кесте – Тапсырма нұсқалары

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