3 Графика

3 Графика, видео жѕне дыбыс

3.1 Графикалыќ кескінді орналастыру

Енді Web беттерге графиканы орналыстыруѓа тоќталамыз. Web дизайнерлер графика мѕселесіне келгенде екі топќа бљлінеді. Бірінші топ графикасыз Web сайт ол сайт емес деп ойласа, екінші топ керісінше Web сайттарѓа суреттіњ ќажеті жоќ деп санайды, себебі олар кейбір модемдердіњ жѕне жџйелердіњ кџші жетпейтіндігін ескеріп отыр. Дегенменде сайтќа графиканы ќолдану мџмкіндік бар жѕне соны тиімді пайдалану керек. Ол џшін бізге <IMG> тэгі src атрибутымен кљмектеседі. Суретті сайтќа орналастыру џшін src атрибутына суреттіњ толыќ жолын кљрсету керек, мысалы, rose.jpg суретi С дискасыныњ My img папкасына орналасќан болса, онда тљмендегі тэг жазылады:

<IMG src=c:/my img/rose.jpg>

width жѕне heigth атрибуттармен суреттіњ кљлемін љзгертуѓа болады, биіктігі жѕне ені. Ал, alt атрибутымен суретке ќосымша мѕтін тџрде ќосымша мѕлімет шыѓаруѓа болады.

<IMG src=c:/my img/rose.jpg width=50% height=30% alt=меніњ суретім>

Web графика туралы айтќанда тљмендегі атрибуттарды ђмытпау керек: background – бђл атрибут сайтќа суретті фон ретінде орналыстырады, bgcolor – фонѓа тџс береді.

Тљменде мен HTML тілініњ 3.2 нђсќасыныњ стандартындаѓы тізімін келтірілген (9 кесте):

Кесте 9. Графикалыќ параметрлердіњ сипаттамалары

Параметр | Сипаттамасы
SRC | Графикалыќ кескіні бар URL файлыныњ адресі.
ALT | Навигатор графикалыќ кескінді кљрсетпесе немесе ондай мџмкіндік жоќ болѓан жаѓдайдаѓы графикалыќ кескініњ орнына бейнелейтін текстік ќатар.

ALIGN

Графикалыќ кескінге ќараѓандаѓы тексті туралау

LEFT сол шекара бойынша

RIGHT оњ шекара бойынша

TOP жоѓарѓы шекара бойынша

Middle кескініњ центрі бойынша

BOTTOM тљменгі шекара бойынша

TEXTTOP тексттік ќатардаѓы ењ ђзын символдарѓа ќараѓандаѓы џстінгі шекара бойынша туралау

ABSMIDDLE кескін ортасына ќараѓандаѓы текстік ќатардыњ ортасын туралау

BASE LINE тексттік ќатардыњ базалыќ сызыѓына ќараѓандаѓы тљменгі кескінніњ жаќтауын туралау

ABS BOTTOM љтпелі ќатардыњ тљменгі шекарасына ќараѓандаѓы кескінніњ тљменгі шекарасын туралау

WIDTH | Пиксельмен берілген кескін ђзындыѓы
Параметр | Сипаттамасы
BORDER | Пиксельмен берілген кескін ені
HSPACE | Пиксельмен берілген кескін айналасындаѓы жаќтаудыњ ені (Netscape N навигаторымен ќолданылады)
VSPACE | Кескінді текстен горизонталь бойынша ажырататын пиксельмен берілген бос кењістіктіњ ені
USEMAP | Кескінді текстен вертикаль бойынша ажырататын пиксельмен берілген бос кењістіктіњ ені
ISMAP | Графиканы сегменттеу џшін ќолданылатын кескін картасы бар URL файл ені. Бђл параметр берілген кескін сегметтік екенін кљрсетеді.

Тљмендегі мысалда 2 растлыќ графикалыќ кескіні кљрсетілген.

Тапсырма - 1. Растрлыќ графикалыќ кескін

HTML\1.html

<HTML>

<HEAD>

<TITLE>Графикалыќ кескінді орналасытыру</TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<H2> HTML ќђжатына графиканы орналастыру</H2>

<IMG SRC=" banner2011.jpg ">Бђл Мемлекет Тѕуелсіздігініњ 20 жылдыѓына баннер

<P>Ал мынау <IMG SRC=" disney001.gif "> су перісі </BODY>

</HTML> </BODY>

</HTML>

Тљменде <IMG> операторыныњ ALIGN параметіріне кіретін туралаудыњ типтері џшін бірнеше мысал келтірілген.

Тапсырма - 2. HTML ќђжатында графикалыќ кескінді орналастыру

HTML\2.html

<HTML>

<HEAD>

<TITLE>Графикалыќ кескінді орналастыру</TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<H2> HTML ќђжатында графикалыќ кескінді орналасытру </H2>

HTML ќђжатында графикалыќ кескіні бар мысал келтірейік.

<P><IMG SRC="IMG SRC="b5500000.png" ALIGN BOTTOM BORGER=2> Графикалыќ кескінге байланысты мѕтінді ќоюдыњ бірнеше тѕсілі бар. Оны &It;ALIGN&gt љлшемі, &It;IMG&gt операторы арќылы тањдауѓа болады;

</BODY>

</HTML>

Тапсырма - 3. Web-бетке графика орналастыру

HTML\3.html

<html>
<head>
<title>Меніњ алѓашќы ќадамым </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Сѕлеметсіздер ме, бђл меніњ алѓашќы параѓым!</H3>
<br>
<font color="#CC0000"> Ќош келдіњіздер!</font> :) </center>
<p align="justify">
<img src="image001.jpg" align="left" HSPACE=30 VSPACE=5 alt="меніњ суретім"> Бђл параќ меніњ алѓашќы ќадамым! Виртуалды ѕлеммен мен жаќында ѓана таныстым. Меніњ љз параѓымды салѓым келді, себебі меніњ достарым кљп. Олар меніњ параѓыма кіріп сурет, бейнелерді ќарай алады. Љз пікірлерін ќалдыра алады. Мџмкін кездейсоќ бір ќонаќ менімен танысќысы келіп ќалар, мџмкін менде <b> таѓы бір виртуалды дос пайда болар? :)</b>
</p>
</body>
</html>