Интернет технологиялар

Читайте также:

пәні бойынша зертханалық жұмыстар

«5В070200-Автоматтандыру және басқару», «5В070300-Ақпараттық жүйе», «5В070400-Есептеу техникасы және бағдарламамен қамтамасыз ету» мамандықтарының

2-ші, 3-ші және 4 курс студенттеріне арналған

Дайындаған: магистр оқытушы Аманов А.Н.,

магистр оқытушы Жантаев А.А.

ТҮРКІСТАН 2015

Зертханалық жұмыс Қазақстан республикасы Білім және Ғылым министрлігі 23.12.2005ж. №779 бұйрығымен бекітілген Мемлекеттік жалпыға міндетті білім стандарты, мамандықтың типтік оқу жоспары және осы пәннің университет ОӘК бекітілген оқу бағдарамасы негізінде дайындалған.

Кіріспе

Аталмыш зертханалық жұмыстар жинағы студенттердің Internet құрылымы, Internet-тің желілі протоколдары, программалау мен адрестеу принциптері, Internet- қолданбаларды әзірлеудің құралдарын меңгеруіне және де қазақ тілінде жазылға басылымдарға деген сұраныстарға байланысты туындап отыр.

Web технологияларын меңгеру бүкіләлемдік желіні қолдана отырып корпоративті құрылым әзірлейтін, динамикалық сайттар мен Web –порттарды әзірлейтін және оларды бағдарламалық қамтамасыз ететін Web – программистер мен дизайнерлерді дайындау барысында басты рөл ойнайды.

Сол себептен нұсқаудың негізгі мақсаты – интернет программалаудың технологияларын, ұйымдастыру және қызмет ету принциптерін меңгеру, интернет ортасындағы қосымшаларды жобалау әдістерін үйрету болып табылады.

Әдістемелік нұсқау «5В070200–Автоматтандыру және басқару», «5В070300-Ақпараттық жүйе», «5В070400-Есептеу техникасы және бағдарламамен қамтамасыз ету» мамандықтарының студенттеріне арналған.

Бұл әдістемелік нұсқауды орындау барысында студенттер Web - технологияда қолданатын ұйымдастыру принциптерін, қызмет ету мен ақпаратты өндеу технологияларын, Қазіргі интернет технологиялары негізінде программалық қосымшаларды құру негіздерін, Web - технологиясының қазіргі перспективалары мен дамуы беталыстары туралы мол мағлұмат алады.

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

Тақырыбы: HTML тілінің негіздері. HTML –құжатының құрылымы. Параграфтар, жолдар,

тақырыптар, тақырыпшалар, HTML – құжатындағы фрагменттер.

Сабақтың мақсаты: HTML- тілінің көмегімен қарапайым WEB- парақтар жасап үйрену.

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

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

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

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

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

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

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

2. тапсырма

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

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

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

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

HTML форматында текст элементін қоюдың жалпы схемасы келесі түрде жазылуы

мүмкін:

<"элемент аты" "атрибуттар тізімі"> элемент мазмұны </"элемент аты">.

Элемент мазмұнының алдындағы конструкция элемент басының тегі деп аталады, ал элемент мазмұнынан кейін орналасқан конструкция элемент соңының тегі деп аталады.

HTMLқұжатының құрылысы бірінің ішіне бірі салынған контейнерлерді қолдануға мүмкіндік береді. Шынында да, құжаттың өзі – бұл "HTML" атымен аталатын бір үлкен контейнер:

<HTML> Құжат мазмұны </HTML>

HTML элементінің өзі немесе гипертексттік құжат құжаттың басынан (HEAD) және денесінен (BODY) тұрады:

<HTML> <HEAD>

Тақырып мазмұны

</HEAD> <BODY>

Құжат денесінің мазмұны

</BODY> </HTML>

WWW-да әрбір құжаттың өз аты бар, оны басында көрсетеді. Оны интерфейс-

программасының бірінші жолында көруге болады. HTML бетінің аты <TITLE> тегінің көмегімен басына қосылады.

HTML құжатын жазуды бастай отырып, оның сондай түрде болатынын теңестіреміз. Мұндай теңестіру құжаттың ең басына <!DOCTYPE HTML PUBLIC ``-//W3C//DTD HTML

3.2//EN''> тегін қою жолымен жүргізіледі. DOCTYPE тегі SGML тілінің тегі болып табылады және құжат HTML 3.2 спецификасына сәйкес сипатталатын болатынын хабарлайды.

Барлық программалау тілдеріндегідей HTMLтілінде де тексттің белгілі-бір бөліктеріне түсініктеме беретін әдісі бар. Түсініктемелер <! - - және - - > тізбектерінің арасына жазылады.

Жұмыстың орындалу тәртібі

1. HTML - құжат-бұл аты.htm қосымшасы бар, қарапайым мәтіндік құжат.Мына,HTML-құжатты Блокнотта теріп шығыңыздар:

<html>

<head> Менің алғашқы парағым

<title>

1-ші мысал

</title>

</head>

<body>

<HI>

Сәлем!

</HI> Бұл HTLM- құжаттың ең қарапайым мысалы.

<P> Мәтіндік алты түрлі көлеммен көрсетіле алады. Олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады.

</P> </body> </html>

Енді осы терілген құжатты, мысалы, Tl.html деген атпен дискіде сақтау керек. Сонда оның белгішесі өзгеріп Интернетте көруге болатын түрге айналады.

Бұл Tl.htm файлын бір мезетте Internet Explorer -де және Блокнотта ашып, оларды түрлендіріп көруге болады. Ол үшін файлды Internet Explorer -де ашқаннан соң, Түр-HTML түрінде (вид-в виде НТМL) командаларын орындау қажет.Сонда файлдың алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз.Қажетті өзгертулер енгізіп оны қайта сақтап, осы өзгертулердің HTML-құжатта іске асқанын көру үшін, Internet Explorer-де Түр-Жаңалау (Вид-Обновить) командасын орындау керек немесе Саймандар тақтасында осы командаға сәйкес батырманы басса болғаны.

Сонымен кез келген программа мәтінін Блокнотта тергеннен кейін, оған өз қалауыңызша ат беріп, оны *.htm түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын тышқанмен екі шерту керек немесе Internet Explorer-де ашу қажет.

2. Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML- файлдардағы жолдың соңғы символын және көптеген бос орындарды есепке алмайды. Сондықтан біздің мысалымыз мынадай түрде де жазылуы мүмкін:

3. Бұл мысалдағы <html>…</html> белгілерінің ортасына HTML-құжаты жазылады, яғни

<html> құжатының басын, ал </html> оның аяқталғанын көрсетеді.

<head>…</head>- бұл қос белгі құжат тақырыбының басын және соңын білдіреді. Бұл бөлімде құжат тақырыбынан басқа әртүрлі қызмет атқаратын мәліметтер (төмендегі <title> белгісін қараңыз) жазылуы мүмкін, олар жайлы біз кейінірек айтамыз.

<title>…</title>

<title> және </title> белгілерінің арасында жазылған сөздерді браузер құжаттың аты деп

түсінеді, ол терезе тақырыбында көрсетіледі.Осы құжатты принтер арқылы баспадан шығарғанда, браузер оны әр парақтың сол жақ жоғары бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс, әдетте ол 64 символдан аспауы керек.

<body>…</body>

Бұл қос белгі HTML-құжаттың негізгі мазмұндық белгінің басын және соңын білдіреді.

<H1>…</H1>-<H6>…</H6>

<H1> белгісі (мұндағы і-1-ден 6-ға дейінгі бүтін сан) алты түрлі сатыдағы символдар

мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып ең ірісі, алтыншы сатыдағы ең кішісі.

<P>…</P> немесе <P>

Бұндай қос белгі абзацты сипаттайды.Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы <P> және </P> белгілерінің арасында жазылғандардың барлығы бір абзац ретінде қабылданады.

<Hi> және <P> белгілерінің қосымша ALIGN (оқылуы «элайн»,ағылшынның «туралау» деген сөзінен) атрибуты болуы мүмкін.Мысалы:

<HI ALING=CENTER> тақырыпты ортаға жылжыту </HI> немесе <PALIGN=RIGHT>

абзацты оң жақ шетке жақындатып туралау түрі </P>

4.Үйренгеніміздің барлығын тиянақтап, төмендегі 2-мысалды орындайық:

Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ құрастыруға мүмкіндік бар.

<html><head><title> 2-мысал </title></head>

<body>

<H1 ALIGN=CENTER>Сәлем! </H1>

<H2> Бұл HTML-құжатының сәл күрделірек мысалы </H2>

<P> Енді біз абзацты,тек сол жақ шетке ғана туралап жазбай,

<P ALIGN=CENTER> ортаға қарай </P><P ALIGN=RIGHT>

Немесе оң жақ шетке де туралауға болатындығын білеміз.</P>

</body>

</html>

5.Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз етеміз. Жаңа жолға көшу белгісінен бастайық.

<html><head><title> 1-мысал </title></head>

<body><H1> Сәлем! </H1>

<P> Бұл HTML-құжаттың ең қарапайым мысалы. </P>

<P> Бұл *.htm-файлды Notepad және Internet Explorer-де ашуға болады.Өзгертулер енгізілгеннен кейін Блокнотта АТЫ.HTM деген форматта сақтаңыз.Енді өзгертулердің HTML-құжатқа енгенін көру үшін, файлды жауып, АТЫ.HTM құжатын шақырыңыз.

</body></html>

<BR> белгі абзацты бөлмей, келесі сөзді жаңа жолға көшіру керек болған жағдайда қолданылады. Өлең жазуға өте ыңғалы. Өлеңнен мысал келтірейік:

<html><head><title> 3-мысал </title></head>

<body>

<H1>Өлең</H1>

<H2>Абай</H2>

<P> Айттым сәлем, Қаламқас <BR> Саған құрбан мал мен бас. <BR> Сағынғаннан сені ойлап, <BR> Келер көзге ыстық жас. </P>

<P> Көзімнің қарасы,<BR> Көңілімнің санасы. <BR> Бітпейді іштегі, <BR> Ғашықтық жарасы </P>

</body>

</html> <HR> белгісі көлденең сызық сызады.Бұл белгінің қосымша SIZE (сызықтың пиксельмен берілген қалыңдығын анықтайды) және WIDTH (экранның еніне қатысты, сызықтың пайызбен берілген ұзындығын анықтайды) атрибуттары бар. 4-мысалда көлденең сызықтардың кішігірім жинағы берілген.

<html><head><title> 4-мысал </title></head>

<body>

<H1>Көлденең сызықтар жинағы </H1>

</body>

</html>

6.Енді түрлі түсті мәтін жазып үйренейік. Ол үшін басқа түске боялатын мәтін үзіндісін

<font color=”red”>…</font> белгілерінің арасына жазу керек.

<html><head><title>3-мысал </title></head>

<body>

<P>Айттым сәлем, Қаламқас, <BR>

Саған құрбан мал мен бас. <BR> Сағынғаннан сені ойлап, <BR> Келер көзге ыстық жас. <BR> Көзімнің қарасы, <BR> Көңлімнің санасы. <BR> Бітпейтін іштегі, <BR> Ғашықтық жарасы. </font>

</body></html>

HTML базалық тегтерінің тізімі


Бастапқы	Соңғы	Суреттеу
<HTML>	</HTML>	HTML-құжатты белгілеу
<HEAD>	</HEAD>	Құжаттың тақырыптық бөлімі
<TITLE>	</TITLE>	Құжат тақырыбы
<BODY>	</BODY>	Құжат денесі
<H1>	</H1>	Бірінші азат жол деңгейінің тақарыбы
<H2>	</H2>	Екінші азат жол деңгейінің тақарыбы
<H3>	</H3>	Үшінші азат жол деңгейінің тақарыбы
<H4>	</H4>	Төртінші азат жол деңгейінің тақарыбы
<H5>	</H5>	Бесінші азат жол деңгейінің тақарыбы
<H6>	</H6>	Алтыншы азат жол деңгейінің тақарыбы
<P>	</P>	Азат жол
<PRE>	</PRE>	Форматталған мәтін
<BR>		Қайта-қайта азат жол аудармасы
<BLOCKQUOTE>	</BLOCKQUOTE>	Цитата

Барлық суреттелген тегтер – мұның бәрі, HTML –мен жұмыс жасау үшін қажет. Мына берілген тегтердің көмегімен жай HTML – құжатын құруға болады. Бірақ, келесі бөлімдер сіздерге HTML – дің басқа да жақсы мүмкіндіктерін және құжаттың түр- келбетін жақсартуға немесе суреттеуге көмектеседі.

Тапсырмалар

Жоғарыда айтылғандарды пайдаланып:

1. Педогогикалық кеңесті кезекті мәжіліс болатындығы жайлы хабарлама жазыңыз. Сол құжаттың нәтижесін Internet Explorer-де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

2. Группадагы студенттердин тізімін жазыңыз.Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз.Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

3. Наурыз мерекесіне байланысты, Қазақстан халқына құттықтау жазыңыз.Нәтижесін экранға шығарып,өз қалауыңызша өзгерістер енгізіп,қайталап сақтаңыз. Өзгерістеріңіздің HTML- құжатқа енгендігін тексеріңіз.

4. Жаңа жыл мерекесіне байланысты Физика математика факультетінде студенттік кеш болатынын хабарлап, Internet Explorer – де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз.

5. Текст үзінділерін курсив, қалың, асты сызылған және абзац тегаларын пайдаланып құжат құрыңыз.

6. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

7. Жуық арада болатын мерекеге байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.

Бақылау сұрақтары:

1. HTML құжатының құрылымы қандай?

2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.

3. HTML құжаты ішінде түсініктеме беру үшін не істеу керек?

4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?

5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле алады?

6. Өлең жолдарын жазу кезінде қандай тәг жиі қолданылады?

7. HTML тіліндегі азат жол ерекшеліктері неде? Жаңа азат жол ашу (жабу) үшін қолданылатын тәгті жазып көрсетіңіз.

8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.

9. Қаріптер параметрлерін өзгерту атрибуттары қандай?

10. <BODY>тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.

11. Мәтін түсін, фон түсін қалай беруге болады?

12. <FONT> тәгінің SIZE атрибутының мәндері қалай жазылады?

13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?

Блиц-тест

1.Берілгендермен алмасу үшін екі компьютерді қарапайым байланыстыру:

A) Тік байланыс

B) жай байланыс

C) Екілік байланыс

D) қарапайым байланыс

Е) локальді байланыс деп аталады.

2.Ресурстар қандай типті болады:

A) электрондық, программалық, техникалық

B) аппараттық, программалық, ақпараттық

C) электрондық, программалық, ақпараттық

D) ақпараттық, электрондық, техникалық

E) жүйелік, ақпараттық, техникалық

3.Аппараттурамен қатар, компьютерлік желілердегі программалар бойынша қажет сәйкестікті қамтамасыз ету үшін:

A) программалар

B) протоколдар

C) порттар

D) шлюздер

Е) брандмауэрлер деп аталатын арнайы стандарттар әрекет етеді.

4.<TITLE> тегі не үшін қолданылады:

A) Беттің атын беру үшін

B) Беттің тақырыбын белгілеу үшін

C) Мәтіндегі цитатаны белгілеу үшін

D) Беттегі тексттің астын сызу үшін

E) Кесте тақырыбын белгілеу үшін

5.<BR> тегі:

A) Тексттегі жолды көшіру үшін

B) Беттің соңын білдіру үшін

C) Алдыңғы тег әрекетінің соңын білдіру үшін

D) Текстті бетте қарайтылған шрифтпен белгілеу үшін

E) Текстті бетте курсивпен белгілеу үшін қолданылады

6.Құжат фрагменттерін белгілеу үшін және оның экранда бейнелеуін басқаруға арналған HTML тілінің арнайы элементтері, яғни компоненттері:

А. тәгтер

Б. блоктар

В. тізімдер

Г. сілтемелер

Д. кестелер

7.Мына тұжырымдардың қайсысы дұрс:

А. Тәгтер жазу кезінде бас әріп пен кіші әріп бірдей болып саналады

Б. HTML тілінің барлық тәгтері &quot&gt&quot символынан басталады

В. Блокнот арқылы гипермәтіндік құжатты жасауға болмайды

Г. HTML құжатына коментарийлер енгізуге болмайды

Д. HTML мәтіндік элементтері ішіне <,&gt, “, @ символдары жазылады

8.HTML элементтері мынадай екі топқа бөлінеді: А. Блоктық және мәтіндік

Б. Мәтіндік және сандық

В. Символдық және цифрлық

Г. Жай және күрделі

Д. Қарапайым және құрамалы

9.<BODY> тәгінің мәтін түсін анықтайтын атрибуты:

А. TEXT

Б. BGCOLOR

В. COLOR

Г. LINK

Д. VLINK

Әдебиеттер

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

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

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

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

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

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

Тақырыбы: Қаріп стильдері. Логикалық стильдер. Мәтінмен жұмыс жасауға арналған

тэгтер. <FONT> тэгiн пайдалану.

Мақсаты: HTML тілінің негіздері оқып үйрену

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

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

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

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

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

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

2. тапсырма

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

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

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

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

Стильдерінің қысқа тізімі.

HTML сіздердің құжаттарыңызда мәтіндік хабар бөлісіне арналған әріптердің әртүрлі стильдерді қолдануға рұқсат етеді. Көпшіліккесүйеніштабатынброузерлерстильдерініңқысқатізімі:

· bold (жуан)

· italic (жантайған)

· mono spaced (type writer – бекітілген әріптердің қолдануымен)

Сіздер стильдердің әртүрлі түрлерін коса алаcыздар, мысалы жуан және жантайған.

Стиль	Элемент немесе тег	Нәтиже
Bold	<B>Бұл мәтін жуан</B>	Бұл мәтін жуан
Italic	<I>Бұл мәтін жантайған</I>	Бұл мәтін жантайған
Mono spaced	<TT>Бұл мәтін непроп. әріппен </TT>	Бұл мәтін непроп. әріппен

Стильдердің қиыстыруы сіздерге бірнеше элемент бір жолға әртүрлі стильдер көрсетуге рұқсат етеді, мысалы:

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

Қосымша стильдер:

· big (үлкен)

· small (кішкентай)

· sub (төменгі индекс)

· sup (жоғарғы индекс)


Стиль	Элемент немесе тег	Нәтиже
Big	Бұл мәтін<BIG>үлкен</BIG>	Бұл текст үлкен
Small	Бұл мәтін<SMALL>кішкентай</SMALL>	Бұл текст кішкентай
Sub	Бұл мәтін<SUB>төменгі индекс</SUB>	Бұл текст төменгі индекс
Sup	Бұл мәтін<SUP>жоғарғы индекс</SUP>	Бұл мәтін жоғарғы индекс

Әріп мөлшері < FONT SIZE >

Сіздер тега көмегімен әріп мөлшерін өзгерте алаcыздар:

< FONT SIZE =+|- n >

Әріп мөлшері 1 ден 7-ге шейін бола алады. Сіздер әріп мөлшерін цифрмен немесе салыстырмалы негіздік мағынасын (жалпы -3) дұрыс немесе бұрыс жаққа түзу көрсете алаcыздар.

< BASEFONT SIZE=n >

Мысалы:

< p > және

изменение

әріп түсі< FONT SIZE >

Сіздертегкөмегіжанындаәріптүсінөзгертеалаcыздар:

< FONT COLOR="#xxxxxx >

Түс – әрбір мөлшерлілік нұсқауы оналтылық түс компоненттері арқылы RGB- форматта көрсетіледі (Red - Green - Blue). Мысалы,, ақ түс - " 000000 "белгіленеді, қара - " FFFFFF ", көк - 0000FF және т.б.

Қызыл</FONT>

Жасыл</FONT>

Көк</FONT>

ҚызылЖасылКөк

Текстпен жұмыс <FONT> тегiн пайдалану.

тегі	атрибут	Анықтамасы
<FONT>	SIZE COLOR FACE	Шрифтпен жұмыс жасау Шрифттн өлшемін өзгерту Шрифтің түсінөзгерту Шрифтің түрінөзгерту

Мысал-1:

<html><head><title> Текстпен жұмыс жасау үлгісі: < Font> тегін

пайдалану.</title></head><body>

<h1 align=center>Текстпен жұмыс жасау үлгісі:<br><FONT&</h1>

size =+1>Л</font><font size=1>I</font>

<font size=3>Ш</font><font size=+1>P</font><font size=+2>И</font ><font

Size=+2>Ф</font><font size=+1>T</font><font size=3>I</font>

<font size=5 copor=red>ТҮРЛІ</font>

<font size=5 color=green>ТҮСТІ</font>

<font size=5 color=blue>ШРИФТ</font>

<font size=3>--&1t;FONT COLOR…></font></p>

<font size=5 face=”Arial Cyr”>ШРИФТТІҢ</font>

<font size=5 face=”Times New Roman”>ӘРТҮРЛІ</font>

<font size=5 face=”Courier New Cyr”>ЖАЗЫЛУЫ</font>

<font size=3>©сабақ 3</font></p>

</body>

</html>

Мысал-2:

Жартылай қалың, курсив шрифті, жартылай қалың курсив, асты сызылған, «үстісызылған», _{төменгі} және ^жоғары

<html>

<head> индекстер

<title> Текстпен жұмыс жасау үлгісі: шрифттің өзгеруі.</title>

</head>

<body>

<h1 align=center>Текстпен жұмыс жасау үлгісі:<br>шрифттің өзгеруі.

</h1>

<hr size=4><b>Жартылай қалың</b>,<i>курсив</i>шрифті,

<b><i>жартылай алың курсив<b><i>, <br>

<u>асты сызылған</u>,<s>үсті сызылған</s><sub>төменгі </sub> және

<sup>жоғарғы</sup>индекстер

</font></p>

<hr size=2>

<p align =center>

<font size=3>&copy сабақ 4</font><p/>

</body>

</html>

Тапсырмалар

1 тапсырма. Тақырып стильдерін қолдану.

Тақырыптарды жазудың алты түрлі тәгтері бар (<H1>ден <H6>-ға дейін).Әрбір тәг броузер параметрлеріне сәйкес мәтінге белгілі бір нақты стиль бере алады.

1. RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:

<HTML>

<HEAD><H2> менің алғашқы парағым </H2>

<TITLE>алғашқы HTML файлы</TITLE>

</HEAD>

<BODY><P><H1>сәрсенбі күнгі</H1></P>

<H3><I>сабақ</I><U>кестесі</U></H3>

</BODY>

</HTML>

2.Өзгертілген Web- құжатты экраннан көріп шығарыңыз.

2тапсырма. Қолданып отырған қаріптің көлемін өзгерту.

<FONT> тәгі ағымды мәтін ішіндегі кейбір жолдарда қолданылып отырған қаріптің

көлемін 1-ден 7-ге дейін мөлшерде өзгерту мүмкіндігін береді.

1. RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:

<HTML>

<HEAD><H2> менің алғашқы парғым </H2>

<TITLE>Алғашқы HTML файлы</TITLE>

</HEAD>

<BODY>

<FONT SIZE=”7”> сәрсенбі күнгі </FONT><BR> сабақ кестесі

</BODY>

</HTML>

2.Осы <FONT>тәгін пайдаланып, «сабақ кестесі» сөздерінің мөлшерін өз қалауларыңыз ша

өзгертіп көріп шығыңыздар.

3. Мәтін бөліктерін жоғарыда айтылған ерекшелеу түрлерін және көшу,жаңа абзац ашу

тәгтерін пайдалана отырып бірнеше тәсілмен безендіріңіздер.

3тапсырма.<FONT> тәгі мәтін бөліктерінің көлемін,типін және түсін өзгертуге мүмкіндік

береді. Қаріп типін өзгерту <FONT> тәгіне FASE атрибутын қосу арқылы

орындалады.Мысалы: мәтін бөлігін KZ Arial қаріппен жазу үшін: <FONT FASE=”KZ

ARIAL”> тәгін қолдану қажет.

Қаріп түсін беру үшін <FONT> тәгінің COLOR=”X” атрибутын жазу керек.Мұндағы X

орнына ағылшын тіліндегі түс атын немесе оның он алтылық жүйедегі сандық мәнін жазса

болады.Он алтылық санды қолданғанда,түс құрамындағы қызыл (R-Red), жасыл (G-Green),

көк (B-Blue) бояулардың араласу мөлшерін 00 мен FF сандары аралығындағы мәндермен

көрсету керек.Осы тәсілді бояу түсін көрсетудің RGB форматы деп атайды.

1.RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:

<HTML>

<HEAD><H2>менің алғашқы </H2>

<TITLE>алғашқы HTML файлы</TITLE>

</HEAD>

<BODY>

<U><I><B><FONT COLOR=”#FF0000” FASE=”ARIAL” SIZE=”7”

Сәрсенбі күнгі </FONT></B></I></U><BR>

<FONT COLOR=”GREEN” FASE=”ARIAL” SIZE=”4”> сабақ кестесі

</BODY>

</HTML>

Тапсырма

1. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазып, құжаттың

нәтижесін Іnternet Explorer-де көргеннен кейін:

а) тақырып және бөлім аттарын ортаға жылжытып қойыңыз;

ә) бірінші азат жолтың түсін – қызыл, екінші азат жолты – көк, ал үшінші азат жолтый – жасыл етіп, мәтін фонын сары түске өзгертіңіздер;

б) әр азат жолтан кейін көлденең сызықтар сызып, олардың түстерін және ендері мен қалыңдықтарын қалауларыңызша алыңыздар.

2. Тексті Font тег әртүрлі форматтау жүргізіңіз.

3. Алдында сақталған файлдарды Font тег арқылы жазу қажет.

Бақылау сұрақтары:

1. Мәтінмен жұмыс жасау тэгтері

2. Мәтінді форматтау

3. < FONT > тэгін пайдалану

4. Мәтін түсін, фон түсін қалай беруге болады?

5. <FONT> тәгінің SIZE атрибутының мәндері қалай жазылады?

Блиц-тест

1.<B> тегі:

a) Текстті бетте қарайтылған шрифтпен белгілеу үшін

b) Тексттегі жолды көшіру үшін

c) Беттің соңын белгілеу үшін

d) Алдыңғы тег әрекетінің соңын білдіру үшін

e) Текстті бетте курсивпен белгілеу үшін қолданылады

2.<CITE> тегі не үшін қолданылады:

a) Тексттегі цитатаны белгілеу үшін b) Басқа сайтқа сілтемені беру үшін c) Бетке графиканы қою үшін

d) Текстті бетте қарайтылған шрифтпен белгілеу үшін

e) Текстті бетте курсивпен белгілеу үшін

3.<PRE> тегі қандай мақсатта қолданылады:

a) Текстті бекітілген форматпен шығару үшін

b) Беттің басын белгілеу үшін

c) Ағымдағы тегке түсініктеме беру үшін

d) Тегке көсекшіні шығару үшін

e) Беттегі текстті белгілеу үшін

4.<A> тегі:

A) Басқа құжатқа немесе ресурсқа сілтеме қою үшін

B) Бет адресін белгілеу үшін

C) Беттегі текстті туралау үшін

D) Тегке көмекшіні шығару үшін

E) Бетті бейнелеу масштабын беру үшін қолданылады

Әдебиеттер

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

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

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

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

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

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

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

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

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

Тақырыбы:

3.1 Қарапайым кестелер. Кесте атрибуттар. Кесте сызу үлгілері. Күрделі кестелер.

3.2 Тізімдер. Тізім түрлері. Тізімдермен жұмыс жасау

Мақсаты: Кестелермен жұмыс жасау тэгтерін білу, HTML-құжатында формаларды қолдана білу гиперсілтемелерді үйрену

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

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

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

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

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

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

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

2. тапсырма

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

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

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

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

1. Кесте ұяшықтардың құрамы.

Кесте ұяшықтары құрамында тізім HTML-де кестелер жолдар мен бағандар ретінде

құрастырылады: азат жол, және график элементтері сияқты HTML элементтері болуы мүмкін.

Кестенің негізгі тегтері <TABLE>...</TABLE>

Негізгі тегтер екі тегтің ішінде орналасуы керек. Сонда кестенің барлық элементтері үндемеумен кесте жиектеулер және бөлгіштері болмайды. Жиектеу BORDER атрибутымен қосылады

Кесте жолы: <TR>...</TR>

Кесте жолының кездесетін жұп тэгтердің санымен анықталады мәртебелері <<TR>...</TR>. Кестеде жолдардың визуалды орналасуын сипаттайтын ALIGN және VALIGN атрибуттары болуы мүмкін.

Кесте ұяшығы: <TD>...</TD>

Бағана нөмірімен тиісті нөмірленген болғанда, кесте ұяшығы кестенің стандартты ұяшығын қоршайды. Кесте жолының ішінен ғана қоршалуы мүмкін. Егер жол болмаса, бір немесе бірнеше ұйымдары үшін бағаналарды броузер бос күйінде көрсетеді. Орналастыру тап осылардың ұйымда үндемеумен атрибуттарымен анықталады ALIGN=left и VALIGN=middle. тап осы кезде орналасқандар түзелуі мүмкін дәл осылай және деңгейде ұйым суреттеулері.

Кестенің барлық кесте тақырыбы ұяшықтарының ендері болады. Осы ұяшықта BOLD

и ALIGN=center мәтіні болады.

Тэгпен осы кесте аты бейнелеп түсіндіреді (<CAPTION>) ішінде тиісті қатысу <TABLE>...</TABLE>, бірақ суреттеу сырттан қандай болмасын жолдар немесе ұяшықта жазылып тұруы керек. Үндемеумен <CAPTION> атрибуты ALIGN=top болады, бірақ ALIGN=bottom орналасуы мүмкін. Қол қоюды анықтайды, үстіңгі жағынан немесе төмен жағынан кестелер қойылған болса. Қол қою кесте ені рамкаларында әрқашан ортаға дәл келтірілген.

Кестенің негізгі атрибуттары

BORDER

Бұл атрибут TABLE тегінде қолданылады,егер бұл атрибут қатысса, кесте шекарасы

суреттелінеді барлық ұяшықтардың артынан және кестеге арналған бағытпен. сандық мағынаны қабылдай алады, шекараның еңі бойынша, мысалы BORDER=3.

ALIGN

Егер тэгтердің ішінде ALIGN атрибуты қатысса <CAPTION> және </CAPTION>, онда ол кестеге арналған қол қою жайын анықтайды (үстіңгі жағынан немесе төмен жағынан). үндемеуімен ALIGN=top.

Егер ішінде атрибуты кездессе <TR>, <TH> немесе <TD>, ол ұяшықты көлденесінен қарастырады. Left мағыналары қабылдай алады (сол жағында), right (оң жағында) немесе center (орталықпен).

VALIGN

Тэгтер ішінде осы атрибут кездеседі. Ол ұяшықтарда тік орналастыруын анықтайды. Top мағыналары қабылдай алады (үстінде), bottom (төменде), middle (ортамен) және baseline (барлық жол ұйымдары үстіне қысылған).

NOWRAP

Осы атрибутта айтылған, осы ұяшықтар кисынды соғыла алмайды бірнеше жолдың және бір жолдың тиісті көз алдына келген болса.

COLSPAN

Көрсетеді, ұяшықтардың қандай саны көрсетілгеннің ұяшыққа арналған көлденнен біріккен болады. Үндемеу бойынша -1.

ROWSPAN

Көрсетеді, ұяшықтардың қандай саны көрсетілген ұяшыққа арналған тігінен біріккен болады. Үндемеу бойынша -1.

COLSPEC

Осы параметр бағаналардың бекітілген енін сұрау қоюға рұқсат етеді немесе

символдарда, немесе пайыздарда, мысалы COLSPEC="20%". Элемент <TABLE> атрибуттар бола алады:

· bgcolor

Мынау атрибут ұяшықтарға бедерсіз бір түсті түсті сұрау қояды, bgcolor өзіне

меншікті атрибутымен немесе background ие болмайды

< TABLE bgcolor = түс >

· background

Мынау атрибутты ұяшықтарға бедерсіз бір түсті сурет сұрау қояды, bgcolor өзіне меншікті атрибутымен bgcolor немесе background ие болмайды.

· bordercolor

Мынау атрибут рамка түсін сұрау қояды, border атрибутымен тек қана қолданылады. <TABLЕ border= сан bordercolor= түс >

· bordercolorlight

Мынау атрибут рамка түсін сұрау қояды, border атрибутымен тек қана қолданылады. <TABLE border= саны bordercolorlight= түс >

· bordercolordark

Мынау атрибут рамка түсін сұрау қояды, border атрибутымен тек қана қолданылады. <TABLE border= саны bordercolordark= түс >

· align

Мынау атрибут бетте кесте көлденен тегістеу тәртібін сұрау қояды, ол left

мағыналары, center және right қабылдай алады. <TABLE align=тәсіл>

· width

Мынау атрибут пиксель кестесінің еніне сұрау қояды немесе барлық терезенің

пайыздарына. <TABLE width=сан немесе %>

· border

Мынау пиксельде кестенің сыртқы жиектеулерінің атрибутарының енің сұрайды.

< TABLE border = сан >

· cellspacing

Мынау атрибут пиксельдің ішкі жиектеу енін сұрайды.<TABLE сellspacing=сан >

· сellpadding

Мынау атрибут кесте жиектеуімен бос жерге сұрау қояды. аралық ұсталушымен

ұяшықа және пиксельдерге.

<TABLE сellpadding = сан > қояды

· summary

Мынау міндеттісіз атрибут үшін - браузерлерге. кесте қысқаша суреттеуін сұрау < TABLE summary = суреттеу >

· rules

Мынау атрибут жолдардың арасына сызықтар сұрау үшін.< TABLE rules = all >

· none- Сызық жоқ,үндемеу мағынасында қолданылады.

· groups

Сызық бағаналармен топтардың арасында қолданылады.

THEAD, TFOOT және TBODY немесебағаналарды топтарымен COLGROUP және COL.

· Rows -Тек қана сызықтар суреттеледі аралық жолдармен.

· Cols- Тек қана сызықтар суреттеледі аралық бағаналармен.

· All- Сызықтар жолдар арасында суреттеледі және бағаналармен.

· Frame- Мынау атрибут көрсетеді, кадр қандай жақтары, кесте қоршаған, көрінетін болады.

< TABLE frame = void >мүмкінмағынаның:

· Void -Жақтарды жоқ. Мынау мағына үндемеумен қолданылады.

· Above- Үстінгі жағы.

· Below- Астынғы жағы.

· Hsides- Тек қана үстінгі және астынғы жағы.

· Vsides- Тек қана сол жақ пен оң жақ.

· Lhs- Тек қана сол жақ.

· Rhs- Тек қана оң жақ.

· Box- Бүкіл төрт жағыда.

· Border- Бүкіл төрт жағыда.

· Id- Бұл атрибут ссылкаға ат береді.

<TABLE id=аты> Элемент <COL>

Элемент <COL> кесте бағаналарының тапсырма мақсатымен қолданылады, атрибуттары

бола алады:

· Width- Бұл атрибут колонкаға ұяшықтың ұзындығын береді.

· Bgcolor- Бұл атрибут ұяшыққа фонның түсін береді. <СOL bgcolor=түс>

· Align- Ұяшық ішінде Бұл атрибут ұсталушы көлденен тегістеу тәртібін сұрау қояды, ол left мағыналары, center және right. қабылдай алады.

<СOL align=тәсіл>

· Valign- Мынау ұяшық ішінде атрибут ұсталушы тік тегістеу тәртібін сұрау қояды, ол мағыналар қабылдай алады: middle - ортаға және top - үстінде. <СOL valign=мағына>

· Id- Мынау атрибут сілтемеге арналған атыны сұрау қояды. <COL id=аты>

Элемент<COLGROUP> Элемент <COLGROUP> кесте бағаналарының топтарының тапсырма мақсаты мен қолданылады, атрибуттар бола алады:

· Bgcolor- Мынау атрибут ұяшықтардың фон түсін сұрау үшін.

<COLGROUP bgcolor=түс>

· Align- Мынау ұяшық ішінде атрибут ұсталушы көлденендік тегістеу тәртібін сұрау үшін, ол left мағыналары, center және right. қабылдай алады.

· Valign- Мынау ұяшық ішінде атрибут ұсталушы тік тегістеу тәртібін сұрау үшін, ол мағыналар қабылдай алады: middle - ортаға және top - үстінде.

· span – бұл атрибут топтағы бағандар санын береді.<COLGROUP span= сан >

· width -Бұл атрибут бағандағы ұяшықтарға енін береді.<COLGROUP width= сан >

· id -Бұл атрибут сілтемеге атын береді. <COLGROUP id= аты >

<THEAD> элементі

<THEAD> элементі жоғарыдағы «бас бөлікке» логикалық топқа жол қою үшін қолданылады. <THEAD> <TR><TD>...<TD>... </THEAD>

· bgcolor -Бұл атрибут ұяшыққа түс береді. <THEADbgcolor= түс >

· align

Бұл атрибут ұяшық ішіндегіні горизонталдық режимде түзетеді. left, center және right мәнін қояды. <THEADalign= тәсіл >

· valign -Бұл атрибут ұяшық ішіндегіні вертикалдық режимде түзетеді. middle – ортада және top - жоғарыда. <THEADvalign= мән >

· id -Бұл атрибут сілтемеге атын қояды.<THEAD id= аты >

<TBODY> элементі

<TBODY> элементі «денеге» логикалық топқа жол қою үшін қолданылады.

· bgcolor -Бұл атрибут ұяшыққа түс береді. <TBODY bgcolor= түс >

· align -Бұл атрибут ұяшық ішіндегіні горизонталдық режимде түзетеді. left, center және right мәнін қояды. <TBODY align= тәсіл >

· valign -Бұл атрибут ұяшық ішіндегіні вертикалдық режимде түзетеді. middle – ортада және top - жоғарыда. <TBODY valign= мән >

· id -Бұл атрибут сілтемеге атын қояды. <TBODYid= аты >

<TFOOT> элементі

<TFOOT> элементі төмендегі «бас бөлікке» логикалық топқа жол қою үшін қолданылады. <TFOOT> <TR><TD>...<TD>... </THEAD>

· bgcolor -Бұл атрибут ұяшыққа түс береді. <TFOOT bgcolor= түс >

· align -Бұл атрибут ұяшық ішіндегіні горизонталдық режимде түзетеді. left, center және right мәнін қояды. <TFOOT align= тәсіл >

· valign -Бұл атрибут ұяшық ішіндегіні вертикалдық режимде түзетеді. middle – ортада және top - жоғарыда. <TFOOT valign= мән >

· id -Бұл атрибут сілтемеге атын қояды. <TFOOTid= аты >

Жолдың басы:<TR> элементі

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

· Bgcolor -Бұл атрибут ұяшыққа түс береді. <TR bgcolor= түс >

· Align -Бұл атрибут ұяшық ішіндегіні горизонталдық режимде түзетеді. left, center және right мәнін қояды. <TR align= тәсіл >

· Valign -Бұл атрибут ұяшық ішіндегіні вертикалдық режимде түзетеді. middle –

ортада және top - жоғарыда. <TR valign= тәсіл >

· Id -Бұл атрибут сілтемеге атын қояды. <TR id= аты >

Кестенің тақырыбы:<CAPTION> ЭЛЕМЕНТІ

<CAPTION> элементі кесте рамкасының сыртындағы тақырыпқа сұрау қояды, top және bottom, left және right, сонымен қатар id – сілтемеге қойылатын аты align атрибутын қолдана алады. <CAPTION> текст </CAPTION>

Тақырып ұяшықтары <TH> элементі

<TH> элементі id атрибутын сүйейтін тақырып ұяшықтарын сұра қояды.

<TH атрибуты> тақырып тексті

<TD> ұяшығындағы деректер

<TD> элементі ұяшықтағы деректерді анықтайды

· Bgcolor -Бұл атрибут ұяшыққа түс береді. <TD bgcolor= түс >

· Width -Бұл атрибут ұяшыққа пиксельде және % енін береді.<TD width= сан немесе % >

· Height -Бұл атрибут ұяшыққа пиксельде ұзындығын береді.<TD height= мән >

· Rowspan -Бұл атрибут бағандар мен біріккен ұяшықтарды бірүлкен өлшемді ұяшық береді. Сонымен қатар көрші ұяшықтар өшірілмейді, көрші ұяшықтар оның орнын ие болғанша жасырылады. <TD rowspan= жолдар саны >

· Colspan -Бұл атрибут жолдармен біріккен ұяшықтарды бір үлкен өлшемді ұяшық береді. Сонымен қатар көрші ұяшықтар өшірілмейді, көрші ұяшықтар оның орнын ие болғанша жасырылады. <TD colspan= бағандар саны >

· Align -Бұл атрибут ұяшық ішіндегіні горизонталдық режимде түзетеді. left, center және right мәнін қояды. <TD align= тәсіл >

· Valign -Бұл атрибут ұяшық ішіндегіні вертикалдық режимде түзетеді. middle – ортада жәнеtop - жоғарыда. <TD valign= тәсіл >

· Nowrap -Бұл атрибут басқа кестелерге қарағанда автоматты түрде ұяшықтағы сөздерді аударуды болдыртпайды. Осындай нәтижені алу үшін &nbsp объектісінде пробелдерді қолдануға болады.

· Id -Бұл атрибут сілтемеге атын қояды. <TD id= аты >

Мысалдар

1.Төмендегі мысалды теріп, нәтижесін қарап шығындар да,оған бірсыпыра өзгерістер енгізіңдер:

<TABLE ALIGN=CENTER BORDER=3 WIDTH=”80%” BGCOLOR=YELLOW BORDERCOLOR=BLUE>

<CAPTION><H2>Кесте тақырыбы</H2></CAPTION>

<TR><TD>кестенің бірінші торы</TD><TD>кестенің екінші торы</TD></TR>

Дата добавления: 2015-11-14; просмотров: 301 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
Листопада 2013 року	\|	Фонды суреттер.

mybiblioteka.su - 2015-2024 год. (0.184 сек.)