Сабақтың тақырыбы: Растрлік (bmp, jpeg,gif) векторлық (AI, cdr) форматтарды қолдану


Графикалық файлды HTML- құжаттамасымен байланыстыру



бет11/14
Дата20.10.2023
өлшемі216,97 Kb.
#119912
түріСабақ
1   ...   6   7   8   9   10   11   12   13   14
Байланысты:
Поурочный Растрлік (BMP, JPEG,GIF) векторлық (AI, CDR) форматтарды қолдану

Графикалық файлды HTML- құжаттамасымен байланыстыру
Веб – беттерде суреттермен жұмыс істеу құралдары шекті қарапайым болып келеді. бетте сурет орналасатын орында қарапайым түрде HTML-код енгізіледі, ол негізінен сол жерге қою қажет суреттің тұрған орнына сілтеме береді. Суреттегі теңестірулерді басқару және оның айналасына мәтін енгізуді басқару қажет болған жағдайда арнайы орнату құрылғысын туралауға немесе жұмысшы жағдайға келтіруге болады, ол суреттің көрініп тұрған өлшеміне өзгертулер енгізу үшін арналады. Браузердің бағдарламалық қамтамасыз етілуі қалғанының барлығын өзі орындайды., ол қалған мазмұнымен бірге веб – бетті экранға шығарады.
суретті ретке келтіру немесе қажетті жағдайға келтіру үшін құжаттамаларда бірыңғайлық тег IMG (Image) пайдаланылады, ол жалғыз ғана міндетті атрибутқа ие болып табылады SRC (SouRCe, негізгі көзі), суреті бар файл мекен жайын анықтап береді (URL). Мекен жайды абсолютті түрде, мысалы
,
Сонымен қатар және салыстырмалы түрде, мысалы

Көрсетуге болады.
Бұл веб – дизайнердің басқаға алмастыруға бергісіз ең белгілі элементтерінің бірі болып табылады. Элемент негізінен суреттерді JPEG орнатуға (соның ішінже қара аралық тармақтау арқылы) және GIF форматына (мөлдір және іс-қимылға ие мүмкіндіктерді қоса алғанда) орнатуға мүмкіндік береді. Браузерлердің соңғы версиялары сонымен қатар PNG форматын да пайдалануға мүмкіндік береді, бірақ әзірге бұл форматты пайдаланудың қажет жоқ PNG. 
Суреттер тегі IMG әлі бірқатар міндетті емес, бірақ қызықты және пайдалы атрибуттарға ие. Біз олардың кейбірлерін қарастырайық.
Атрибут ALT – суреттің орнынан браузермен бірге шығарылатын, графиканы көрсетуге немесе көтеруге қабілетсіз болып табылатын мәтінді көрсетуге мүмкіндік береді. Кейбір жағдайларда, негізінен сызықтардың жеткіліксіз өткізгіштік қабілеттерінде пайдаланушылар графиканың бейнеленуі ажыратып тастайды. Және соңында картина бетте толық мәтіннен кейін әлдеқайда кеш пайда болуы мүмкін. Картинаның орнына аталуының болуы барлық аталған шарттарда веб – беттерді қабылдауды жеңілдетеді. Егер бетте сурет бар болатын болса, онда ALT нұсқаланған жазба суреттің қасына тышқангды апарған сәтте қалқып шығатын болады. Параметрдегі мәтін alt міндетті түрде жақшаға алынған түрдле болуы қажет. Мәтінде алмастыру тетіктерін пайдалану және құру жүруі де мүмкін, олай болса көп қатарлы сілтеушілер де болады.
Заманауи талаптарға сай HTML тіліндегі атрибут ALT суреттеу тегі үшін міндетті болып табылады.
Тапсырма 2.2.6. Қалқып шығатын жазба сурети көлемінен үлкен бола алама соны тексеріңіз, егер олай болса қаншалықты шамаға? Бірнеше бос орындарды қатырынан жүктеуге болады ма: Бос орындарсыз әрбір қатар ұзындығы қандай шамада болады? Мәтін жазуларының түсін беруге болады ма? Мұнда сізді таңқалдыратын жағдайлар аз емес. Мысалы, соңғы сұрақты зерттеу кезінде толықтай көптеген жағдайларда қателік орын алуы мүмкін – мәтіннің бір бөлігі жазбада қалады, ал қалған бөлігі – негізгі мәтінге өтіп кетеді. Бұл не үшін болатынын ойлап көріңіз. Сізбе бір нұсқау: жақша ішіне жазылу қажет деген атрибутты қайта оқып шығыңыз. Пайда болған қателіктен қалай құтылу қажеттігін ойланыңыз.
АLIGN – бұл суреттің оны қоршап тұрған мәтінге қатысты орналасу жағдайын анықтап береді. Аргументтің мүмкін болатын мәндері — ["left" | "right" | "top" | "middle" | "bottom"] (сәйкесінше "сол жақта", "оң жақта", "жоғарыда", "ортасында", "төменінде").
ALIGN="left" мәтінмен басылатын суретті анрықтап береді. Сурет негізінен құжаттамының сол жақ полясынан бастап орналасады, ал мәтіннің келесі қатарлары оны оң жағынан басады. 
ALIGN="right" Мәтінмен жабылатын суретті анықтап береді. Сурет негізінен құжаттамының оң жақ полясынан бастап орналасады, ал мәтіннің келесі қатарлары оны сол жағынан басады.
Тапсырма 2.2.7. Ойланып көріңіз атрибуттың басқа мәндерінде немсе басқа жағдайларында суреттер мәтінге қатысты қалай орналасатындығын ойланып көріңіз ALIGN. Блокнотта кодты жаза отырып және браузерде нәтижесін көре отырып тексеру жүргізіңіз. Айтпақшы, алдыңғы тапсырмаға берілетін жауап бірінші бөлімде келтірілген. Атрибуттың ұзындығы 1024 символдан аса алмайды. Басқаша айтқанда сурет өлшеміне ол байланысты емес және оның өлшемінен үлкен де бола алмайды. Атрибут BORDER – суреттің айналасындағы рамканың қалыңдығы немесе жуандығын пикселде анықтап береді. Егер ол мән нольге тең болатын болса, онда рамка жоқ деген сөз.
Атрибут LOW SRC (төмен көрсету қабілетіне ие сурет) – төмен сапаға ие және түс тереңдігі жоғары емес, соның салдарынан өлшемдері кіші және тиелудің анағұрлым жоғары қабілетіне ие картинаның мекен жайын нұсқайды. Ол негізгі суретті тек соңғысын тиеген уақыт ішінде ғана орнын алмастырады.
АтрибутНSРАСЕ – бұл атрибуттың мәні пикселде суреттің оң және сол жағынджағы бос кеңістіктің өлшемін береді. Әсіресе мәтіні бар сурет ағып келіп түскен кезде ол көкейкесті болып табылады. Бұл жағдайда негізінен мәтін суретке тығыз жабысып қалмауы үшін оның айналасына бос кеңістікті орналастырған немесе сол үшін орын қалдырған жөн.
АтрибутVSPACE – Суреттің жоғарғы және төменгі жағындағы бос орынның өлшемін пикселде көрсетеді., және ол өз кезегінде беттің сыртқы көрінісін жақсартады, суртті мәтінен бөліп тұрады.

Атрибуттар WIDTH және HEIGHT – екі атрибут та пикселдерде немесе пайыздық түрде суреттің көлденең және тік бойынша өлшемін сәйкесінше береді. Бұл негізінен графикасы бар бетті тиеудің уақытын төмендетуге мүмкіндік береді. Браузер бірден сурет үшін қөажетті рамканы бөліп және бетке мәтінді орналастыруды немесе жүктеуді жалғастырады. Графика жүктеліп болғанша, пайдаланушы мәтінді оқуды бастап жіберуі мүмкін. Суреттің өлшемін анықтау қиын емес, ол үшін графикалық файлдарды көрудің қажетті бағдарламасын пайдалану жеткілікті, мысалы, ACDSee немесе графикалық редактор Adobe Photoshop.


Сурет тегасын пайдалану мысалы:



Достарыңызбен бөлісу:
1   ...   6   7   8   9   10   11   12   13   14




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет