Web-парақ ішіне суреттерді орналастыру

Сабақтың тақырыбы: Web-парақ ішіне суреттерді орналастыру

Сабақтың мақсаты: HTML тілінде сурет тэгасы қызметін үйрету.

Білімділік:Сурет салу атрибуттарымен және олардың жазылу жолдарымен таныстыру.

Дамытушылық: HTML тілінде сурет салу арқылы оқушылардың шығармашлық қабілетін дамыту

Тәрбиелік: Әсемділікке, әдемілікке баулу.Оқушылардың эстетикалық талғамын байыту, ақпараттық мәдениетін қалыптастыру және ұқыптылыққа тәрбиелеу.

Сабақтың түрі, әдісі: аралас сабақ

Пән аралақы байланыс:әдебиет

Сабақтың көрнекілігі:

1.Суреттер.

2.Cлайттар

Сабақтың барысы:

І.Ұйымдастыру барысы

а) Оқушыларды түгендеу

ә) Оқушылардың сабаққа даярлығын бақылау

ІІ.Үй тапсырмасын тексеру, қайталау:

Өткен материалдарды қайталау (слайд арқылы)

№1 тапсырма. Қәріптер өлшемі қанша екенін анықта.

< HTML>

<HEAD>

<TITLE> HTML- де практикалық жұмыс </TITLE>

</HEAD>

<BODY>

<FONT SIZE =”7” > Қазақстан — </FONT><BR>

кең байтақ елім!!!

</BODY>

</HTML>

№2 тапсырма. Мәтін үзінділерін бөліп алу тэгаларын ата. HTML файлына өзгерістер енгіз.

< HTML>

<HEAD>

<TITLE> HTML- де практикалық жұмыс </TITLE>

</HEAD>

<BODY>

<H1> HTML- де <H1> <I> құжаттар құру </I> <U> алгоритмі </U>

</BODY>

</HTML>

№3 тапсырма. Қатесін тап.

< HTML>

<HEAD>

<TITLE> сөздің жазылуы </TITLE>

<BODY>

<HTML>

№4 тапсырма. Негізгі тақырып стилі және қосымша тақырып стилін ата.

< HTML>

<HEAD>

<TITLE> HTML- де практикалық жұмыс </TITLE>

</HEAD>

<BODY>

<PALIGN=CENTER>

<FONT SIZE =”6” <I> құжаттарды құру алгоритмі </I></FONT>

</P>

</BODY>

</HTML>

<HTML>

<HEAD><TITLE> HTML- де практикалық жұмыс</TITLE>

</HEAD>

<BODY>

<PALIGN=CENTER>

<FONT SIZE =”6” <I> құжаттарды құру алгоритмі </I></FONT>

</P>

</BODY>

</HTML

III. Сөзтізбек

8
1				5
	2	3	4		6

						7

Көлденеңнен

Даму тарихы 4 кезеңнен тұратын бүкіләлемдік компьютерлік желі

1.101 және 102 батырмалардан тұратын енгізу құрылғысы

2.Сыртқы құрылғы

3.Хабарламаларды жіберу тәсілдері мен ұсыну формаларын бекітетін стандарттар

4.Бүкіләлемдік компьютерлік желімен компьютерді байланыстыратын құрал

5.Қосымша элементтерді басқару мақсатында ішіне екпінді элемент орналастыратын мәтін.

6.Планшетті, барабанды, қолмен кескінді қайта өңдеп экранға орналастыруға болатын құрал.

HTML тілінің командасы

8..Информацияны сақтау құрылғысы.

Д
К				Г			И
Л	П	Х	М	И	С		С
А	Р	А	О	П	К		К
В	И	Т	Д	Е	А	Т	Е
И	Н	Т	Е	Р	Н	Е	Т
А	Т	А	М	М	Е	Г
Т	Е	М		Ә	Р	И
У	Р	А		Т
Р				І
А				Н

ІV. Жаңа сабақтың негізгі материалы

Web -парақ ішіне суреттерді орналастыру

<IMG> тэгі құжат ішіне суреттерді қою мүмкіндігін береді.Ал сурет осы тэг жазылған орында пайда болады.Аталаған тэг –бірэлементі тэг.Сондықтан ол жалғыз жазылады. Web құжаттарындағы сурет немесе графика ереже бойынша үш форматта жазылады, олар:GIF,JPG,PNG .Сіздің салатын суретіңіз “Lesson” бумасының ішіне жұмыс каталогы ретінде жазылады.Сол жағдайда ғана Сіз оны Web құжатына орналастыра аласыз.

Жазылу форматы:

HTML файлына өзгерістер енгіз:

< HTML>

<HEAD>

<TITLE> HTML- де практикалық жұмыс </TITLE>

</HEAD>

<PALIGN=CENTER>

<FONT SIZE =”6” <I> құжаттарды құру алгоритмі </I></FONT>

</P>

</BODY>

</HTML

Сурет атрибуттарын тағайындау

Сурет атрибуттарына мына тэгалар жатады:ALT, BORDER,ALIGH, HEIGHT, WIDTH, VSPASE, HSPACE. Ал олардың жазылу форматы мен сипаттамасына 2- кестеде берілген.

Сурет атрибуттарының сипаттамасы

2-кесте

Атрибут	Жазылу форматы	Сипаттамасы
ALT	<IMG SRC=”fullscreen.png” ALT=”суретке түсініктеме” >	Егер сурет көрсетілмесе, онда оның орына сурет атының жазулыу, не сол сурет жөнінде мәлімет беріледі
BORDER	<IMG SRC=”fullscreen.png” BORDER=”3”>	Суретті қоршап тұрған жақтау сызығының қалындығы пиксельмен беріледі.
ALIGN	<IMG SRC=”fullscreen.png” ALIGN=TOP>	Мәтінге байланысты суреттердің орналасуы көсретіледі.Қызметші сөздер: жоғары, төмен ,ортада ,сол жақта , оң жақта
HEIGHT	<IMG SRC=”fullscreen.png” HEIGHT=111>	Суреттің биіктігінің пиксельмен немесе терезе биіктігінің пайызымен береді.
WIDTH	<IMG SRC=”fullscreen.png” WIDTH=220>	Суреттің енін пиксельмен немесе терезе енінің пайызымен береді.
VSPASCE	<IMG SRC=”fullscreen.png” VSPASCE >	Суреттің жоғары және төменгі жақтарының бос аймақ мөлшерін пиксельмен береді
HSPACE	<IMG SRC=”fullscreen.png” HSPACE=”8”>	Суреттің сол жақ және оң жақ шеттеріндегі бос аймақ мөлшерін пиксельмен береді.

V.Бекіту тапсырмалары

№1-тапсырма. Мәтінге сурет енгіз.

Оқу инемен құдық қазғандай

Кітаптар

Кітап білім бұлағы

< HTML>

<HEAD>

<TITLE> Мәтінен бөлек сурет </TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> <B>Оқу инемен құдық қазғандай</B></H1>

<PALIGN=CENTER> <IMG SCR=ALT=”ТЕКСТ”></P>

<P>

Кітап білім бұлағы

</BODY>

</HTML

№2-тапсырма.Мәтінге сурет енгіз

< HTML>

<HEAD>

<TITLE> Мәтінен сурет </TITLE>

</HEAD>

<BODY>

<H2>Жаз келді</H2>

<H3>Жайнады айнала</H3>

</BODY>

</HTML

№3-тапсырма .Төменде берілген тапсырмаға программа жаз

Internet — бүкіләлемдік компьютерлік желі .

№4-тапсырма.Төменде берілген программа үзіндісін толықтырып жаз:

< PALING=CENTER>

<FONT COLOR=”#008080” SIZE=”7” > <B> HTML-де

</B> </FONT><BR>

<FONT SIZE=”6”> <1> Құжаттарды құру алгоритмі

</I><FONT> <BR><BR>

………..

5 –ші тапсырма . Суреттер кітапханасынан дайын суреттерді пайдаланып, программасын құр.

VI.Сабақты қорытындылау кезеңі.Тест жұмысымен қорытындылау

Бағалау

Үйге тапсырма беру: ;жаңа тақырыпты қайталау .

Д
К				Г			И
Л	П	Х	М	И	С		С
А	Р	А	О	П	К		К
В	И	Т	Д	Е	А	Т	Е
И	Н	Т	Е	Р	Н	Е	Т
А	Т	А	М	М	Е	Г
Т	Е	М		Ә	Р	И
У	Р	А		Т
Р				І
А				Н

Д
К				Г			И
Л	П	Х	М	И	С		С
А	Р	А	О	П	К		К
В	И	Т	Д	Е	А	Т	Е
И	Н	Т	Е	Р	Н	Е	Т
А	Т	А	М	М	Е	Г
Т	Е	М		Ә	Р	И
У	Р	А		Т
Р				І
А				Н

Д
К				Г			И
Л	П	Х	М	И	С		С
А	Р	А	О	П	К		К
В	И	Т	Д	Е	А	Т	Е
И	Н	Т	Е	Р	Н	Е	Т
А	Т	А	М	М	Е	Г
Т	Е	М		Ә	Р	И
У	Р	А		Т
Р				І
А				Н