3. Html-құжаттардағы web-палитралар арқылы графикамен жұмыс істеу. Web-құжаттардағы түстер және өлшем бірліктері. Графикалық бейнелер форматтары мен ерекшеліктері.
HTML-құжаттарда графиканы дұрыс қолдану үшін мыналарды есте сақтаған жөн: көптеген броузерлер тек GIF және JPEG «джей-пег» графикалық форматтарын ғана көрсете алады; <IMG> тәгі құжат ішіне графикалық суретті үлкен бір символ ретінде енгізеді. Оның жазылу синтаксисі төмендегідей:
<IMG 1-атрибут=1-мәні [ ... N-атрибут=N-мәні]>
<IMG>
тәгінің атрибуттары мен олардың мәндері
келесі кестеде көрсетілген.
HTML
тілі суретті мәтінге байланысты көтеріп
немесе түсіріп орналастыра алады, ол
ALIGN атрибуты арқылы жазылады. Оның
мәндері:
RGB-түстердің Web-палитраға кіретін негізгілерін Web-сенімді түстер деп атайды. Ағылшынша аттарымен берілетін түстердің тек 10-ы ғана Web-палитраға кіреді, олар: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white и yellow.Түстер палитрасын олардың аттары арқылы (мыс., green) немесе RGB моделі бойынша түс бояуларының араласатын мөлшерін оналтылық сан арқылы жазуға да болады. Бұл модельде түсті негізгі үш түсті бояуды - қызыл (Red), жасыл (Green) және көк (Blue) түстерді араластыру арқылы анықтайды. Әр түстің мөлшері екі таңбалық он алтылық санмен (00-ден FF-қа дейінгі) жазылады. Сонан кейін сандар біріктіріліп, алдына # таңбасы қойылған алты таңбалық сан түрінде жазылады.
Web-палитра қызыл, көк және жасыл түстердің әрқайсысының алты түрін көрсете алады, соның нәтижесінде барлық түстер варианттары 216 түрлі болады (6x6x6=216).
<B> В әріптері арасындағы мәтін қарайтылған қаріппен жазылады. </B>
<І> І әріптері арасындағы мәтін курсив, яғни қисайтылған қаріппен жазылады,</І>
<U> U әріптері арасындағы мәтін асты сызылған қаріппен жазылады. </U>
<TT>Баспа машинкесіндегідей </TT><S>Сызылған </S> <BIG> Ірі мәтін </BIG>SMALL> Майда мәтін </SMALL>Жоғарғы – x <SUP> индекс </SUP>
Төменгі -- x<SUB> индекс </SUB>
4. Стильдердің сатылы кестелерін – css-терді қолдану. Стильдердің тәгтерге, файлдарға және сайтқа толық әсер ету мүмкіндіктері. Стильдердегі динамикалық элементтер.
CSS – Cascading Style Sheets (Стильдер-дің сатылы кестелері) —гипермәтіндік мәліметтер мазмұнын олардың экрандағы бейнелену формасынан бөліп орындауға мүмкіндік беретін құрал болып табылады. Қазіргі WWW-сайттарын безендіруді стильдердің сатылы кестелерінсіз көзге елестету қиын. Стильдердің сатылы кестелері HTML тіліне қосымша мынадай мүмкіндіктер береді:
• WWW-парағын безендіруді оның
мазмұнынан бөліп тəуелсіз орындау
• Стандартты HTML тілі мүмкіндіктерін
түбегейлі түрде кеңейту
Сонымен, CSS арқылы мыналар атқарылады:
• өрістер, шегіністер, қаріп мөлшері (көлемі) жəне типі, мəтін түсі мен фоны, т.б. парақтың жекелеген элементтері (абзацтар, сөздер, əріптер) үшін беріледі.
• жүздеген файлдардан тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек бір ғана CSS файлын түзету арқылы өзгерту;
• HTML-құжаттың ішкі тəгтері санын азайтып, оның ішкі ақпараттық мазмұнын браузер экранының сыртқы түсінен бөліп жеке стильдер
түрінде жазып шығу.
CSS сценарийлермен қосыла отырып, гипермәтіндік парақтарды кәсіби программаларда жасалған мультимедиялық өнім-дерден айнымайтын динамикалық әрі интерактивті деңгейде көрсетуге мүмкіндік береді.
«Скриптер», немесе «сценарийлер» –гипер-мәтіндерді түрлендіре алатын арнайы програм-малау тілінде жазылған программалық кодтар.Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін қосымша мүмкіндіктер жиыны.
CSS арқылы HTML-тілінің экрандағы элемент-терді бейнелеудің көптеген тәсілдеріне жауапты тәгтер мен олардың атрибуттарын алып тастау жолымен файлдың жалпы көлемін кішірейте аламыз (мысалы, мынадай тәгтер: <font>, <center>, <в>, <i>, <s>, <U> т. б. ; атрибуттар: align, color, bgcolor, size, width, height, т. с. с.);
HTML тілінің тәгтері мен атрибуттарына қараған-да, CSS кестелері сайттың сыртқы түрін басқарудың жеңіл тәсілдерін береді;
бір файлдағы стиль сипаттамаларын өзгерту арқы-лы жүздеген гипермәтіндік парақтардың сыртқы түр-лерін бірден өзгерте аламыз.
Стильді бір тәгтің параметрлері ішіне жазуға болады. Ол үшін BODY ішіндегі кез келген тәгке (BODY тәгіне де) STYLE атрибуты қолданылады. Бұларды "инлайндық" стиль кестелері деп те атайды.
STYLE атрибуты арқылы мыналар атқарылады:
- Жеке тәг стилі
- Жеке HTML-файлы стилі
- Бірнеше HTML-файлдарына арналған стиль
- Аралас стильдерді пайдалану
Жеке бір тәг үшін жазылған стиль
Мысалы, <P> тәгі арқылы нақты бір абзац қалай бейнеленетінін былай көрсете аламыз:
<Р style="font-size:1.5cm;
color:green">
Бұл абзацқа стильдік анықтау тәсілі қолданы-лып отыр. Стиль style атрибутымен берілген. Мұнда браузерге абзацты көлемі 1.5 санти-метр болатын жасыл әріптермен жазуға нұс-қау берілген.
Стильді анықтау мынадай түрде жазылады:
Әрбір анықтаулар бір-бірінен «;» символы арқылы бөлініп жазылады.
Style атрибутын оның параметрлері арқылы әрбір тәгке қолдана аламыз.
Енді стильдер қолданылатын толығырақ бір мысал қарастырайық.
<HTML>
<HEAD>
<TITLE> Жеке тәг стилі </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2> Бір тәг үшін жазылған стиль </H2>
<HR>
<UL>
<LI> Бұл қарапайым мәтін.
<LI style="color:red; font-size:1cm;
font-style:italic">
Биіктігі 1 см қисайтылған қызыл әріптер.
<LI style="margin-left:2cm">
Сол жақ шеттен 2 сантиметр шегініс.
</UL>
</BODY>
</HTML>
Жеке HTML-файлына арналған стиль
Стильді тек бір тәг үшін немесе бірнеше тәгтер үшін бір жазылған анықтаулар HTML-құжатының басынан соңына дейін әсер ететіндей етуге болады.
Мысалы, барлық тәгтер атауларын тізіп, стильдік анықтауларды құжаттың тақырып бөлігіне орналастыру қажет.
Стильдік анықтаулар немесе селекторлар мынадай блок ішіне жазылады
<style>. . . </style>
және HTML-комментарий ретінде жазылады.
Стильдік анықтау форматы:
Тәг аты (немесе бірнеше тәгтер аттары үтір арқылы бөлініп жазылады)
{
сипаттама: мәні;
…
сипаттама: мәні;
}
Мысалы:
<HTML>
<HEAD>
<TITLE> Жеке файлға арналған стиль </TITLE>
<STYLE type="text/css">
<!--
H1,H2,H3,H4,H5,H6
{ text-align: right;
color:red;
font-family: "Arial Cyr",
Geneva, sans-serif; }
-->
</STYLE>
</HEAD>
<BODY bgcolor=#DFF0D5 text=black>
<H2> Жеке файл стилі </H2>
<HR>
<P> Бұл қарапайым мәтін
<H3> Бұл тақырып </H3>
<P> Бұл да қарапайым мәтін
</BODY
</HTML>
Браузер мұндағы тақырыптарды жұмыр қаріппен (рубленый шрифт) қызыл түсте оң жақ шетке туралап орналастырады. Браузердің мұндай әрекетін мынадай кодтар атқарады:
<STYLE type="text/css">
<!--
Н1,Н2,НЗ,Н4,Н5,Н6
{ text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif; }
-->
</STYLE>
Бірнеше HTML-файлдарға арналған стиль
Әдетте бірнеше файлдарға арналған стильдер басқа бір жеке файлға бөлек жазылады. Мұндай файл типі (кеңейтілуі) css болып жазылады. Мысалы, style.css файлына мынадай стильдерді жазайық:
BODY {margin-left: 40рх;}
Hl,H2,H3,H4,H5,H6
{ text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif; }
Осы стильдерді іске қосу үшін HTML-файлдың тақырып <head>...</head> бөлігіне мынадай сілтеме орналастыру керек:
<LINK rel=stylesheet type="text/css“ href=style.css>
Стильдік
нұсқауларда пайдаланылатын өлшем
бірліктері төменде келтірілген.
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue; ackground-color: yellow; }text-align
Мәтінді көлденең туралау тәсілін көрсетеді (способ горизонтального выравнивания). Мынадай мәндер қолданылады:
left – сол жақ шетке туралау; right – оң жақ шетке туралау; center ортаға туралау; justify – екі шетін де туралау (по ширине). Өрістер мен жақтаулар :border-style