Блиц-тест. 46. <FORM> тәгінің METHOD атрибутының атқаратын қызметі қандай?

46. <FORM> тәгінің METHOD атрибутының атқаратын қызметі қандай?

A) Форманы өңдейтін программаға қалайша ақпарат жөнелтілетінін көрсетеді

B) Форма мәліметтерін қабылдап алып, оны өңдейтін URL анықтайды

C) Бірнеше жолдан тұрған мәтіндік ақпарат енгізуге мүмкіндік береді

D) Ақпарат атын анықтайды

E) Таңдай операциялары үшін терезе биіктігін анықтайды

 

47. HTML формаларын құрудағы <TEXTAREA> тәгінің атқаратын қызметі қандай?

A) Кез келген тұтынушы бірнеше жолдан тұратын мәтіндік ақпарат енгізе алатын өрісті анықтайды

B) Форма мәліметтерін қабылдап алып, оны өңдейтін URL-ды анықтайды.

C) Мәлімет енгізудің кейбір өзге түрлерін: бір жол мәтін енгізу, жалаушаларды көтеріп қою және мәліметтерді жөнелту сияқты әрекеттерді орындауды қамтамасыз етеді

D) Тұтынушыға жылжымалы жолағы бар терезедегі немесе суырылып шығатын меню ішіндегі бір жолды таңдау мүмкіндігін береді

E) Кез келген тұтынушы бірнеше жалаушадан тұратын форма жасағанда, соның алғашқысын таңдау мүмкіндігін береді

 

48. HTML формаларын құрудағы <FORM>тәгінің ACTION атрибутының атқаратын қызметі қандай?

A) Форма мәліметтерін қабылдап алып, оны өңдейтін URL-ды анықтайды. Егер бұл атрибут анықталмаса, онда мәліметтер форма орналасқан web-парақ адресіне жіберіледі

B) Мәлімет енгізудің кейбір өзге түрлерін: бір жол мәтін енгізу, жалаушалар қою және мәліметтерді жөнелту сияқты әрекеттерді орындауды қамтамасыз етеді

C) Кез келген тұтынушы бірнеше жолдан тұратын мәтіндік ақпарат енгізе алатын өрісті анықтайды

D) Тұтынушыға жылжымалы жолағы бар терезедегі немесе суырылып шығатын меню ішіндегі бір жолды таңдау мүмкіндігін береді

E) Кез келген тұтынушы бірнеше жалаушадан тұратын форма жасап, соның бірін таңдау мүмкіндігін береді

 

49.HTML формаларын құрудағы <INPUT>тәгінің атқаратын қызметі қандай?

A) Мәлімет енгізудің кейбір түрлерін: бір жол мәтін енгізу, жалаушалар қою (check boxes), ажыратып қосқышты таңдау және мәліметтер жөнелту сияқты әрекеттерді орындауды қамтамасыз етеді

B) Форма мәліметтерін қабылдап алып, оны өңдейтін URL-ды анықтайды. Егер бұл атрибут анықталмаса, онда мәліметтер форма орналасқан web-парақ адресіне жіберіледі

C) Кез келген тұтынушы бірнеше жолдан тұратын мәтіндік ақпарат енгізе алатын өрісті анықтайды

D) Тұтынушыға жылжымалы жолағы бар терезедегі немесе суырылып шығатын меню ішіндегі бір жолды таңдау мүмкіндігін береді

E) Кез келген тұтынушы бірнеше жалаушадан тұратын форма жасағанда, соның алғашқысына мәлімет енгізу мүмкіндігін береді

 

Әдебиеттер:

1. Б. Бөрібаев., Г.А.Мадьярова. Web технологиялар. Оқулық.Алматы,2011

2. Дузбаева Р.М. Основы создания HTML-документов. Уч. пособ. для студентов. –Алматы, КБТУ 2003. –82 с.

3. Нидерст Дж. Web-мастеринг для профессионалов. –СПб.:Питер, 2001. –576

4. Информатика и образование,№8, 2000. Е. В. Давыдова

5. Симонович С., Евсеев Г., Алексеев А. Специальная информатика: Уч. пособ. -М.: АСТ-

ПРЕСС: Инфорком-Пресс, 1998.-480с.

6. А. Гончаров. HTML в примерах. – СПб: "Питер", 1997.

7. Лэмонт Вуд. Web-графика. Справочник. – СПб: "Питер", 1998.

8. С. Бейн, Д. Грей. Как сделать красиво в Интернете. Перевод с англ. – СПб: "Символ- Плюс", 1998.

Зертханалық жұмыс № 8

 

Тақырыбы:HTML-де CSS-ті қолдану технологиялар. CSS стилінің каскадты кестелері. Тұрғызылған стильдік безендірулер, style атрибуты. Стильдердің сатылы кестелері Жеке бір тэг үшін жазылған стиль

Мақсаты:HTML тілінде CSS-ті қолдану технологияларын білу.

Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.

Жұмыстың орындалу реті:

1. Теориялық материалды игеру.

2. Жұмыстың орындалуы.

3. Бақылау сұрақтары.

Зертханалық жұмыстың орындалуына есеп беру формасы:

1. Зертханалық жұмыс номері

2. тапсырма

3. Бағдарлама мәтіні.

4. Тестілеу нәтижесі.

5. Бақылау сұрақтарына жауап беру.

Әдістемелік нұсқау

CSS – Cascading Style Sheets (Стильдердің сатылы кестелері) —гипермәтіндік

мәліметтер мазмұнын олардың экрандағы бейнелену формасынан бөліп орындауға мүмкіндік беретін құрал болып табылады.

Қазіргі WWW-сайттарын безендіруді стильдердің сатылы кестелерінсіз көзге елестету қиын. Стильдердің сатылы кестелері мынадай мүмкіндіктер береді:

• WWW-парағын безендіруді оның мазмұнынан бөліп тәуелсіз орындау;

• Стандартты HTML тілі мүмкіндіктерін түбегейлі түрде кеңейту;

CSS технологиясы, мысалы, объектілерді абсолюттік орналастыру ісін орындай алады, яғни объектілерді экранға нақты координаталар арқылы қажетті орынға шығаруға болады. Мұндағы объектілік модельдің координатасын программада өзгерту экрандағы сол элементтің орнын ауыстыра алады. Олардың ара қашықтықтарын өзімізге ыңғайлы болып табылатын өлшемдердің бірі - мм, см немесе дюйм, пункт арқылы беруге де болады. CSS сценарийлермен қосыла отырып, гипермәтіндік парақтарды кәсіби программаларда жасалған мультимедиялық өнімдерден айнымайтын динамикалық әрі интерактивті деңгейде көрсетуге мүмкіндік береді. «Скриптер» немесе «сценарийлер» – гипер-мәтіндерді түрлендіре алатын арнайы программалау тілінде жазылған программалық кодтар. JavaScript – кодтарын HTML- мәтіндеріне енгізе отырып, құжаттарды түрлендіре алатын, көпшілікке арналған тіл. Сценарийлер енгізілген 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 сантиметр болатын жасыл әріптермен жазуға нұсқау берілген.

Стильді анықтау мынадай түрде жазылады:

сипаттамасы: шамасы; font-size:1.5cm; color:green;

Әрбір анықтаулар бір-бірінен «;» символы арқылы бөлініп жазылады.

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>

1-сурет. Жеке тәг стилі

Құжаттың сыртқы түрінің параметрлерін оның құрлымын аңықтайтын дескриптор (тегтер мен атрибуттар) массивінен бөліп алу ойы каскадты кестелер стилі (Cascading Style Sheets, CSS) деп аталатын технологиясында іске асырылады. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылыды. Бұл жағдайда код HTML айқындалмайды.

Мысалы, егер барлық 1-ші деңгейдегі тақырыптар үшін Arial кәріпін 48 pt қызыл түсті аңықтау керек болса, онда оған сәйкес ережені былай жазуға болады:

h1 {font-family: Arial; font-size: 48pt; color: red}

HTML-құжатқа кестелер стилін кірістіру

HTML-құжатқа каскадты кестелер стилін қолдану үшін онымен байланыстыру немесе оған кірістіру керек. Оны төрт тәсілмен жасауға болады:

1. HTML-құжатқа тура орналастыру — кестелер стилінің ережелері <head> контейнеріне орналастырылған <style> контейнерлік тегке алынады. Мысалы:

<style> hi {color: blue; font-size: 24pt}

b {font-style: italic)

</style>;

2. Элементке кірістіру фигуралық жақшасыз жол түріндегі стиль параметрлердің жиыны style тегінің атрибутының мәніретіндеқай элементке қолданылады сол элементке меншіктеледі.

Мысалы:

<h1 style="color:blue; font-size:24pt">;

3. Импорт —кестелер стилін сыртқы файлдан мына команда арқылы кірістіру

@import: url (кестелер стилі файлының URL-адресі).

Кестелер стилінің файлы сss. кеңейтілуі бар мәтіндік файл болып табылады. @import операторы басқа кестелер стилінің ережелерінің алдында <style> контейнерінде немесе CSS- файлында қолданылады.

Мысалы:

<style>;

@import: url(http://www.myserver.ru/xyz/mystyle.css)

</style>;

4. Кестелер стилімен файлда байланысы - <head> контейнерінде орналасқан <link> тегі арқылы кестелер стилінің файлына сілтемені қолдану:

<link rel=stylesheet type=text/css href=" кестелер стилі файлының URL-адресі ">;

Мысал: <link rel=stylesheet type=text/css href= "http://www.myserver.ru/xyz/mystyle.css">;

Кестелер стилінің жазуында браузер терезесінде көрінбейтін және құжаттың элементтерін форматтауға әсер етпейтін түсініктерді қою үшін /*... */ түсініктеме операторын қолдануға болады — /* және */ символдар арасында орналасқанның барлығы түсініктеме болып саналады.

Мысалы: <style>;

/* 1-ші деңгейдегі тақырып үшін кестелер стилі және қарайтылған кәріппен белгілеу

*/

hi {color: blue; font-size: 24pt}

b {font-style: bold}

</style>;

Ескі браузерлер CSS пен <style> тегін қолдамауы мүмкін. Кестелер стилін мәтін түрінде көрсетпеу үшін <style> тегінің ішіндегісін түсініктеме тегінің ішіне алады <!--… -- >.

Мысалы:

<style><!- -

/* 1-ші деңгейдегі тақырып */

hi {color: blue; font-size: 24pt}

/* Қарайтылған кәріппен белгілеу */

b {font-style: italic} -->;

</style> <style> тегінде келесі атрибуттары бар:

· type - каскадты кестелер стилі үшін әрқашанда text/css мәні болады;

· media - шығару құрылғының типін аңықтайды. Әдеттегідей, браузерлер келесі мәндерді қолданады: screen (экран), print (баспа) және all (барлығы).

1- МЫСАЛ:

<html> <head> <title>мысал CSS </title>

</head> <style>

.blue {color:blue; font-style:italic}

#boldunderline {text-decoration:underline; font-weight:bold}

</s ty le><body>

<p class="blue">саламатсыз ба, бұл менін web бетім. </p>

<p class="blue" id="boldunderline">Ол әлі жүктеліп жатыр... </p>

<p id="boldunderline">... Сәлден соң ашылады</p>

</body>

</html>

Абсолютті өлшем бірліктері келесі түрде болады:

in - дюйм (1 дюйм = 2,54 см),

cm - сантиметр,

mm - миллиметр;

pt - пункт (1 пункт = 1/72 дюйма);

pc - пика (1 пик = 12 пункт = 1/6 дюйм).

Padding параметрі көмегімен сурет айналасында жолдар шығады, ал margin атрибутымен мәтін құрылады. Сол жағы суретті туралаумен оң жақ шетінен қасиеттер float қойылады. (2- мысал).

2-мысал. Сурет астындағы жазуды құру үшін стильді пайдалану

<html>

<head>

<style type="text/css">

#sign {

padding: 10px; margin: 0px 10px 10px 0px;

background: #e0e0e0;

border: 1px solid black;

width: 100px; float: left; font-size: 90%

}

</style></head>

<body>

<div id=sign>

<img src=figure.jpg width=100 height=111><br>

Винни-Пух в гостях у Кролика

</div>

</body>

</html>

Мысалда көрсетілген сурет астындағы жазу суреттің төменгі жағында көрсетілген. Оң жақ шетімен төменгі шеті 10 пиксельмен, margin параметрімен қойылған. Жақтау border параметрі арқылы оның түрі, қалыңдығы және түсі беріледі.

3-мысал. Стильдерді қолдану

<html> <head>

<style type="text/css">

P { border: double 4px #336699; padding: 5px}

</style> </head> <body>

<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора.

</p> </body> </html>