2015-09-07
1302
Синтаксис
<frameset>
<frame>
</frameset>
Атрибуттар
bordercolor фрейм шекарасының сызық түсі.
frameborder фрейм айналасында рамканы қою.
name фреймге ерекше ат қою.
noresize фреймның өлшемін қолданушы өзгерте алуын анықтайды.
src файлға бағытталған жол.
Мысал.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег FRAME</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no" noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>
</html>
6. DTD файлын құрыңыз және құрылымын түсіндіріңіз? (4-сұрақ жауабы)
7. CSS және оның қасиеттерін құжатқа қолдану.
CSS (каскадты кестелер стилі) – құжат элементтеріне және олардың сыртқы түрін өзгерту үшін қолданылатын параметрлер жиынтығы.
|
|
|
CSS (Стильдердің сатылы кестелері) HTML тілімен қосыла отырып, гипермəтіндік парақтарды
кəсіби программаларда жасалған мультимедиялық өнімдерден айнымайтын динамикалық əрі
интерактивті деңгейде көрсетуге мүмкіндік береді.
Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін
қосымша мүмкіндіктер жиыны.
STYLE атрибуты арқылы мыналар атқарылады:
- Жеке тəг стилі
- Жеке HTML-файлы стилі
- Бірнеше HTML-файлдарына арналған стиль
- Аралас стильдерді пайдалану
7.1. Жеке бір тəг үшін жазылған стиль
Мысалы, <P> тəгі арқылы нақты бір абзац қалай бейнеленетінін былай көрсете аламыз:
<Р style="font-size:1.5cm; color:green">
Бұл абзацқа стильдік анықтау тəсілі қолданылып отыр.
Стиль style атрибутымен берілген. Мұнда браузерге абзацты көлемі 1.5 сантиметр болатын
жасыл əріптермен жазуға нұсқау берілген.
Стильді анықтау мынадай түрде жазылады:
сипаттама:мəні;
font-size:1.5cm;
color:green;
Əрбір анықтаулар бір-бірінен «;» символы арқылы бөлініп жазылады. Style атрибутын оның
параметрлері арқылы əрбір тəгке қолдана аламыз. Енді стильдер қолданылатын толығырақ бір
мысал қарастырайық.
1.1 мысал
<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>
1.2. Жеке HTML-файлына арналған стиль
Стильді тек бір тəг үшін немесе бірнеше тəгтер үшін бір рет жазылған анықтаулар HTML-
құжатының басынан соңына дейін əсер ететіндей етуге болады.
Мысалы, барлық тəгтер атауларын тізіп, стильдік анықтауларды құжаттың тақырып бөлігіне
орналастыру қажет.
Стильдік анықтаулар немесе селекторлар мынадай блок ішіне жазылады
<style>... </style>
жəне HTML-комментарий ретінде жазылады.
1.2 мысал:
<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>
Браузер мұндағы тақырыптарды жұмыр қаріппен (рубленый қаріп) қызыл түсте оң жақ
шетке туралап орналастырады. Браузердің мұндай əрекетін мынадай кодтар атқарады (1.3 мысал):
1.3 мысал
<STYLE type="text/css">
<!--
Н1,Н2,НЗ,Н4,Н5,Н6
{
text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif;
}
-->
</STYLE>
Бұл мысалда үш сипаттама былай берілген:
• text-align: right; – оң жақ шетке туралау;
• color: red; – түсі қызыл;
• font-family: "Arial Cyr", – жұмыр қаріп (қаріп).
Geneva, Helvetica, sans-serif;
Тақырыптар Arial Cyr қарпімен берілуі тиіс (егер тұтынушы компьютерінде ол бар болса).
Егер ол қаріп (қаріп) болмаса, браузер келесі көрсетілген Geneva, Helvetica қаріптерді немесе
əйтеуір бір жұмыр қаріпі («sans-serif») пайдаланады. Егер бір де бірі табылмаса, «үнсіз келісім
бойынша қаріпті» (қаріпом по умолчанию), яғни көбінесе Times New Roman қарпін қолданады.
7.3. Бірнеше 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>
Осы стильдік файлға бірнеше HTML-құжаттар сілтеме жасай алады. Осы файлға бір өзгеріс
енгізу ішкі сілтемелері бар ондаған парақтарға əсер етеді.
Мынадай стильдік анықтау
body {margin-left: 40рх;}
барлық жолдар үшін сол жақ шеттен 40 пиксель шегініс береді. Міне, HTML тіліндегідей кесте
қолданбай, өріс көрсетпей, стиль арқылы ғана осындай мүмкіндіктер жасауға болады екен.
7.4. Аралас стильдерді пайдалану
Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тəсілі бар екен:
• жеке тəг үшін анықтау;
• HTML-файлының тақырыбында анықтау;
• басқа CSS файлында стильді анықтау.
Енді осы тəсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық.
Бірнеше мысалдар келтірейік.
CSS анықтаулары жоқ құжат
Төмендегі мысалда тақырыптар қара түспен ақ фон
арқылы жазылады.
1.4 мысал
<HTML>
<HEAD> <TITLE> 1 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<HЗ> 3 тақырып </HЗ>
</BODY>
</HTML>
Жеке тəг үшін CSS анықтау
Төмендегі код алғашқы екі тақырыпты қара түспен, ал соңғысын қызыл түспен бейнелейді.
1.5 мысал
<HTML> <HEAD> <TITLE> 2 мысал </TITLE> </HEAD>
|
|
|
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
<HEAD> тəгіндегі CSS-нұсқаулар
Төменде (1.6 мысал) алғашқы екі тақырып көк, ал
соңғысы – қызыл болып шығады.
1.6 мысал
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<TITLE> 3 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып</H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
CSS-файлдағы CSS-анықтаулар
Алдын ала жазылған prim.сss файлының ішкі мəтіні:
H1, H2, H3
{
color: green;
}
Енді осы файлды пайдаланатын HTML-құжат коды мен оның бейнесін қарастырайық.
1.7 мысал
<HTML>
<HEAD>
<!-- prim.css файлын іске қосу. -->
<LINK rel=stylesheet type="text/css" href-prim.css>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<TITLE> 4 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
Енді <style> жəне <link> тəгтерін басқаша тəртіппен орналастырайық.
1.8 мысал
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<!-- prim.css файлын іске қосу -->
<LINK rel=stylesheet type="text/css" href=prim.css>
<TITLE> 5 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
Сонымен, CSS арқылы мыналар атқарылады:
· өрістер, шегіністер, қаріп мөлшері (көлемі) жəне типі, мəтін түсі мен фоны, т.б. парақтың
жекелеген элементтері (абзацтар, сөздер, əріптер) үшін беріледі.
· жүздеген файлдардан тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек
бір ғана CSS файлын түзету арқылы өзгерту;
· HTML-құжаттың ішкі тəгтері санын азайтып, оның ішкі ақпараттық мазмұнын браузер
экранының сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу
|
|
|
Негізгі қасиеттері:
Фон
background фонның стилін өзгертуге мүмкіндік береді, бір жол бойында бірнеше атрибуттарды анықтауға болады: фон түсі, фондық сурет, оның орналасуы.
Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Мысал
body {background: white url('/images/sun.gif') repeat fixed top center}
