HTML-құжатында суреттерді бейнелеу.

Суреттік бейнелер Web-парақтарды әшекейлеп безендіру кезінде маңызды құралдар рөлін атқарады. Суреттердің өздері HTML құжаттарынан бөлек орналасқан жеке файлдарда сақталады, алайда олар браузер арқылы Web-парақтардың ішінде бейнеленеді. Суреттерді бейнелеу ережелерін былай беруге болады.

Суреттерді құжаттардың ішіне орналастыру үшін <ІMG …> жеке, яғни жабылмайтын жалқы тэг қолданылады.

Бұл тэгте міндетті түрде SRC= “…” атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL-адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <ІMG …> тэгі тұрған орыннан көрінеді.

Оның жазылу синтаксисі төмендегідей:

<ІMG 1-атрибут=1-мәні [ ... N-атрибут=N-мәні]>

<ІMG> тэгінің атрибуттары мен олардың мәндері келесі кестеде көрсетілген.

Атрибут	Атқаратын қызметі
SRC	Суреттің URL-мекен-жайын береді (оның абсолюттік немесе салыстырмалы мекен-жайы көрсетіледі; егер ол HTML-құжат тұрған бумада болса, тек файл аты ғана жазылады); бұл атрибут міндетті түрдекөрсетіледі.
BORDER	Сурет жақтау сызығының қалыңдығын пиксельмен береді.
WІDTH=n(%)	Суреттің енін пиксельмен не терезе енінің пайызымен береді.
HEІGHT=n(%)	Суреттің биіктігін пиксельмен немесе терезе биіктігінің пайызымен береді.
ALІGN="тип"	Мәтінге байланысты суреттің орналасуын көрсетеді, төмендегі сөздердің бірін мән ретінде қабылдайды: ТОР, MІDDLE, BOTTOМ, LEFT, RІGHT.
ALT = "сөз тіркесі"	Сурет көрсетілмейтін броузерде оның аты мәтін ретінде көрсетіледі.
TITLE	Кескінге ақпараттық көмек береді.

Мысал 3.

<html>

<title> Мысал 3

</title> <body bgcolor="Red"><h1><font color="green">

Медициналық қызметтердің жоғары сапасын қамтамасыз ету </h1>

<img src="C:\Documents and Settings\All Users\Документы\Мои рисунки

\Образцы рисунков\Закат.jpg" align="left" border="1" width=50% >

<b>Міндеттері

1. Денсаулық сақтауды басқарудың жаңа моделін енгізу.

2. Медициналық көмектің қолжетімділігі мен сапасын арттыру.

3. Денсаулық сақтаудың әлеуметтік мәні бар проблемаларын шешу.

4. Медициналық, фармацевтикалық білімнің және денсаулық сақтау саласындағы ғылыми зерттеулердің сапасын арттыру.

</b></br>

</BODY>

</html>

Фондық сурет ретінде графикалық файл немесе оның бір үзіндісі қызмет ете алады. Бетке фондық сурет қою үшін <BODY BACKGROUND="images.gif"> тэгін қолданамыз. BACKGROUND параметріне images.gif мәні меншіктелген, бұл графикалық файлдың кеңейтілуімен берілген аты (*.jpg, *.gif, *.png). Бұл жерде графикалық сіздің құжатыңызбен бір бумада орналасқан деп ұйғарылуда. Басқа жағдайда оның толық жолын көрсету қажет.

Кестелер

Web –құжатының негізгі бөліктерінің бірі кесте. Ол тікбұрышты бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрінде қарастырылады. Жолдар мен бағананың қиылысы ұяшық деп аталады. Бір ұяшықта мәтін, сурет немесе басқа бір шағын кесте орналаса алады. Кестелерді қолдана отырып, бірнеше бағана құруға және суреттің фон мен үйлесуін сәндірек етуіге болады т.с.с. Кесте <TABLE> ашылатын тэгімен басталып </TABLE> тэгімен аяқталады. Кестенің жолдары <TR> тэгімен басталады және (</TR> Table Row), тэгімен жабылады, ал әрбір ұяшық <TD> тэгімен басталып(</TD> Table Data) тэгімен аяқталады. <TD> тэгі кестедегі мәліметтерді көрсетуге арналған, ал ұяшықтар тақырыбын енгізу үшін <TH>…</TH> (Table Header) (кесте тақырыбы)тэгі қолданылады,бірақ бұл жағдайда мәтін қалың шрифтті ірі ұяшық ортасына жазылады.

<TABLE> тэгінде мынадай атрибуттары болуы мүкін:

Атрибут	Атқаратын қызметі
ALIGN	Кестенің құжаттағы орналасуын анықтайды. Жазылмаған жағдайда кесте документтің сол жағына жабысып тұрады. Оның мынадай атрибуттары бар: LEFT (сол жаққа), CENTER (ортаға) және RIGHT (оң жаққа).
`WIDTH`	Кестенің енін пиксельмен немесе пайызбен анықтайды. (мысалы, `WIDTH= “400”`) немесе кесте енін пайыз бойынша (мысалы, `WIDTH= “80%”` ).
`BORDER`	Кесте қабырғасының қалыңдығын пиксельмен береді (мысалы `BORDER= “4”`), жазбаған жағдайда n=0 болып, кесте қабырғалары көрінбей тұрады.
`CELLSPACING`	Ұяшықтардың ара қашықтықтарын пиксельдермен береді. (мысалы, `CELLSPACING= “2”`).
CELLPADDING	Мәтін мен кесте қабырғасының ара қашықтығын пиксельдермен береді.

Кесетде тақырып орналасуы мүмкін, ол (<CAPTION> ... </CAPTION>) тэгтерінің ортасында орналасады. Тақырыпқа ALIGN атрибутын қолдануға болады, ол кестеде орналасуын анықтайды: <CAPTION ALIGN=TOP> тақырып кестенің жоғарғы жағының ортасына жазылады. <CAPTION ALIGN=BOTTOM> тақырып кестенің төменгі жағының ортасына жазылады.Кестенің жолдары <TR> тэгімен басталады және </TR> тэгімен жабылады. Берілген тэгтің мынадай атрибуттары болуы мүмкін:

Атрибут	Атқаратын қызметі
ALIGN	Ұяшықтағы мәтінді көлденең түзету. LEFT (солға), СENTER (ортаға) және RIGHT (оңға) белгілерін пайдалануға болады.
VALIGN	Ұяшықтағы мәтінді тігінен түзету. Берілетін белгілер: `VALIGN=TOP` (жоғарғы шетпен түзету), `VALIGN=`CENTER (ортаға түзету, еш нәрсе жазбаған жағдайда қолданылады), `VALIGN=BOTTOM` (төменгі шетпен түзету).

Кестенің әрбір ұяшығы <TD> тэгімен басталып</TD> тэгімен жабылады. Берілген тэгтің мынадай атрибуттары болуы мүмкін:

Атрибут	Атқаратын қызметі
`NOWRAP`	Бұл атрибут ұяшықтағы мәтінді бір жолға сидырады.
COLSPAN	Кестені көлденең түрде созу. Мысалы, <TD COLSPAN="2"> ұяшық екі бағанаға созылатынын білдіреді.
ROWSPAN	Ұяшықты жол бойымен созу. Мысалы, <TD ROWSPAN="2"> ұяшық кесетенің екі жолына созылатынын білдіреді.
WIDTH	Ұяшықтың енін пиксельдермен береді. (мысалы, `WIDTH= “200”`).
HEIGHT	Ұяшықтың биіктігін пиксельдермен береді. (мысалы, `HEIGHT= “40”`).
BORDERCOLOR="#FFFFFF"	Қабырғаның түсін анықтайды, #FFFFFF - ақ түс.
BACKGROUND="image.gif"	Кестенің фонына сурет толтырады.

Мысалы 5.

<HTML>

<HEAD>

<TITLE>Мысалы

</TITLE>

</HEAD>

<th Colspan="2"> <i><b><h1> С.Ж. Асфендияров атындағы Қазақ Ұлттық Медицина Университеті </h1></i></b></th>

</tr><tr>

<td align="center" rowspan="5"><i><b><h1>Факультеттер </h1></i></b></td>

<td align="center">Жалпы медицина </td>

</tr><tr>

<td align="center">Қоғамдық денсаулық сақтау</td>

</tr><tr>

<td align="center"> Фармация</td>

</tr><tr>

<td align="center">Cтоматология</td>

</tr><tr>

<td align="center">Менеджмент</td>

</tr></table></ body></html>

Дата добавления: 2015-12-08; просмотров: 1866;