- 27.05.2016
- 820
- 1
Тәжірибелік сабақтың әдістемелік нұсқамасы
Сабақтың тақырыбы: HTML тілінде кесте құру
Сабақтың мақсаты:
білімділік – HTML тілінде кесте құру дербес компьютердің көмегімен
даярлауға қатысты қолданылатын ұғымдар мен әдістерді қарастыру
дамытушылық: Студенттердің танымдық қабілеттерін дамыту
тәрбиелік – Оқушыларды пәнге қызығушылығын арттыру, ақпараттық
мәдениеттілікке өз ойын толық жеткізе білуге тәрбиелеу
Сабақтың түрі: тәжірибелік дағдыны қалыптастыру
Сабақтың әдісі: репродуктивті, жартылай ізденіс
Сабақтың уақыты: 90 мин
Пәнішілік байланыс: HTML атрибуттарымен жұмыс істеу
Пәнаралық байланыс: Бейнелеу
Сабақтың жабдықталуы: мөлдір қағаз, үлестірме қағаз, компьютер
Пайдаланылған әдебиеттер:
негізгі М.М.Ерекешова, М.Р.Дүзбағамбетова, З.Р.Мурзабекова,Ж.Қ.Убаева,
Н.Қ. Наурызова. «Информатика» оқу құралы, Ақтөбе, 2007. 4-13 беттер
қосымша М.Қ.Байжұманов, Л.Қ.Жапсарбаева «Информатика»
Оқушы білуі тиіс: HTML тілінде кесте құру және оны форматтауды
Оқушы істей білуі тиіс: HTML тілінде кесте құру және оны форматтауды
Сабақтың хронокартасы және құрылымдық-логикалық сызбасы
І Ұйымдастыру кезеңі – 3 мин
ІІ Үй тапсырмасын тексеру – 15 мин
ІІІ Жаңа тақырыпты түсіндіру – 20 мин
ІҮ Өзіндік жұмыс – 30 мин
Ү Жаңа тақырыпты бекіту – 15 мин
ҮІ Қорытындылау – 5 мин
ҮІІ Үйге тапсырма – 2 мин
Сабақ барысы
І Ұйымдастыру кезеңі
ІІ Үй тапсырмасын тексеру
Зертханалық жұмыс
Блокнот қосымшасын пайдаланып, html-гипермәтіндік тілінде құжат тақырыбын жазу.
3-тапсырма: Құжаттың тақырыбын ЖҰЛДЫЗ-ЖОРАМАЛ деп атаңыз.
Блокнотты ашамыз да ішіне төмендегіні тереміз
<html>
<head>
<title>
Жулдыз-жорамал
</title>
</head>
<body bgcolor="beige" text="red">
<br>
<br>
<br>
<h1 align="center">
<marquee>
<font face="monotype corsiva" size="7" color="red">
Жулдыз-жорамал
</marquee>
</font>
</h1>
<p align="justify">
<font face="arial" color="#0000FF" size="4">
</font>
</p>
<center>
<img src="овен.gif">
<img src="телец.gif">
<img src="близнецы.gif">
<img src="рак.gif">
<img src="лев.gif" >
<img src="дева.gif">
<img src="весы.gif">
<img src="скорпион.gif">
<img src="стрелец.gif">
<img src="козерог.gif">
<img src="водолей.gif">
<img src="рыбы.gif">
</center>
</body>
</html>
Оқытушының нұсқауымен жұмыс үстеліндегі 111 атты бумаға, web.htm деген атпен сақтаңыз.
ІІІ. Жаңа тақырыпты түсіндіру
Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады. Кесте келесi бөлiктерден тұрады:
• кесте тақырыбы;
• бағаналар тақырыптары;
• ұяшықтар.
Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi. Боя ұяшық жасау үшiн бос орын таңбалары енгiзiлуi тиiс.
Қарапайын 2*3 кестесін жасау үшін төменгі тегтер жиынын қолдануға болады:
<TABLE border=1>
<TR>
<TD> мәтін</td>
<TD> мәтін</td>
<TD> мәтін</td>
</tr>
<TR>
<TD> мәтін</td>
<TD> мәтін</td>
<TD> мәтін</td>
</tr>
</table>
Бұл жерде border кесте сызықтарының ені.
Кестенің ұяшықтарының енін пайз арқылы өзгерту үшін width атрибутн қолданса болады, мысалы:
<TABLE width=50%>
Нөмірленген тізімді ұйымдастыру үшін <OL> және <l1> тегтері қолданылады.
<OL> Қолданылған әдебиеттер тізімі
<LI> Полонская Е.П. Самоучитель HTML
<LI> Мержевич В. Создание Web страниц </li>
</ol>
Егер тізім номерін керекті бір номермен бастау керек болса онда start атрибутын пайдалынамыз, мысалы:
<OL start=5> Қолданылған әдебиеттер тізімі
<LI> Полонская Е.П. Самоучитель HTML
<LI> Мержевич В. Создание Web страниц </li>
</ol>
Тізімдің түрін өзгерту үшін type атрибуты көмектеседі, мысалы номерлерді латын цифрларымен жазу үшін төмендігідей жазамыз
<OL type=I> Қолданылған әдебиеттер тізімі
<LI> Полонская Е.П. Самоучитель HTML
<LI> Мержевич В. Создание Web страниц </li>
</ol>
Маркерлік тізімді жазғанда <UL> тегін пайдаланады, маркердің түрін өзгерту үшін type атрибутын. Оный мәні кестеде көрсетілген
disc
дөңгелек
circle
шеңбер
square
квадрат
<UL type=disc>
<LIt> дөңгелек
</ul>
<UL type=circle>
<LIt> шеңбер
</ul>
<UL type=square>
<LIt> квадрат
</ul>
Web беттегі графика
Бұл бөлімде Web беттерге графиканы орналыстыруға тоқталамыз. Web дизайнерлер графика мәселесіне келгенде екі топқа бөлінеді. Бірінші топ графикасыз Web сайт ол сайт емес деп ойласа, екінші топ керісінше Web сайттарға суреттің қажеті жоқ деп санайды, себебі олар кейбір модемдердің және жүйелердің күші жетпейтіндігін ескеріп отыр. Дегенменде сайтқа графиканы қолдану мүмкіндік бар және соны тиімді пайдалану керек. Ол үшін бізге <IMG> тегі src атрибутымен көмектеседі. Суретті сайтқа орналастыру үшін src атрибутына суреттің толық жолын көрсету керек, мысалы, rose.jpg суретi С дискасының My img папкасына орналасқан болса, онда төмендегі тег жазылады:
<IMG src=c:/my img/rose.jpg>
width және heigth атрибуттармен суреттің көлемін өзгертуға болады, биіктігі және ені.
alt атрибутымен суретке қосымша мәтін түрде қосымша мәлімет шығаруға болады.
<IMG src=c:/my img/rose.jpg width=50% height=30% alt=менің суретім>
ІV. Өзіндік жұмыс
Енгізетін тапсырма: Блокнот программасын іске қосыңыздар. Төменде берілген мәтінді Блокнот программасына келесі мәтін жолдарын теріңіздер.
<HTML>
<HEAD>
<TITLE>Сабақ кестесі</TITLE> </HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<P ALIGN=CENTER>
<FONT COLOR=”RED” SIZE=”6” FACE=”KZ ARIAL”>
<B>Сабақ кестесі </B> </FONT></P> <BR>
<FONT COLOR=”BLUE” SIZE=”4” FACE=”Times New Roman”>
<TABLE BORDER=”1” WIDTH=100% BGCOLOR=”#99 CCCC”>
<TR BGCOLOR =”#CCCCFF” ALIGN=CENTER>
<TD>Уақыты</TD>
<TD>7а класс</TD>
<TD>7б</TD>
<TD>7в</TD>
</TR>
<TR>
<TD>8-30 – 9-50</TD>
<TD> Орыс тілі </TD>
<TD> Информатика </TD>
<TD> Тарих </TD>
</TR>
<TR>
<TD>10-00 – 11-20</TD>
<TD> Математика </TD>
<TD>Геодезия </TD>
<TD> Ағылшын тілі </TD>
<TR>
<TD>11-30 - 12-30 </TD>
<TD> Тарих </TD>
<TD> Сызба геометрия </TD>
<TD> Компьютерлік графика </TD><TR>
</TABLE>
</BODY>
</ HTML >
Ү. Жаңа тақырыпты бекіту.
1. Графикалық диктанттың дұрыс жауабын табыңыз:
..........-құжатының негiзгi бөлiктерiнiң бiрi - ............. Ол тiктөртбұрыш ........................ мен көлденең орналасқан .......................... тұратын .................... жиыны түрiнде қарастырылады. Жол мен .................... қиылысы ....................... деп аталады. Бiр ұяшықта ...................., сурет немесе басқа бiр шағын ..................... орналаса алады. ..................... келесi бөлiктерден тұрады:
• кесте ...........................
• .............................. тақырыптары;
• ...................................
...................... жолдар тiзбегi бойынша ....................... толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). ..................... ұяшыққа ..................... енгiзiледi. ............... ұяшық жасау үшiн .............. орын ........................... енгiзiлуi тиiс.
Жауаптары:
Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады. Кесте келесi бөлiктерден тұрады:
• кесте тақырыбы;
• бағаналар тақырыптары;
• ұяшықтар.
Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi. Боя ұяшық жасау үшiн бос орын таңбалары енгiзiлуi тиiс.
2.Төмендегі кестедегі атрибуттардың қызметтерін жазыңыз:
|
№ |
Атрибут |
Жазылу форматы |
Атқаратын қызметі |
|
1 |
ALT |
<IMG SRC=«WAGON.GIF» ALT=«сурет»> |
|
|
2 |
BRODER |
<IMG SRC=«WAGON.GIF» BORDER=«3»> |
|
|
3 |
ALIGN |
<IMG SRC=«WAGON.GIF» ALIGN=TOP> |
|
|
4 |
HEIGHT |
<IMG SRC=«WAGON.GIF» HEIGHT=111> |
|
|
5 |
WIDTH |
<IMG SRC=«WAGON.GIF» WIDTH=220> |
|
|
6 |
VSPACE |
<IMG SRC=«WAGON.GIF» VSPACE=«8»> |
|
|
7 |
HSPACE |
<IMG SRC=«WAGON.GIF» HSPACE=«8»> |
|
Кестенің жауаптары:
|
1. Суретте көрсетілмейтін браузерде оның орнына сурет аты (ол жайлы түсінік беретін мәтін ретінде) көрсетіледі |
|
2. Сурет қоршап тұратын жақтау сызығының қалыңдығын пиксельмен береді |
|
3. Мәтінге байланысты суреттің орналасуын көрсетеді, төмендегі сөздердің бірін мән ретінде қабылдайды: TOP–жоғарғы (мәтін суретінің жоғарғы жағында), MIDLE-ортада, BOTTON-төмен, LEFT-сол жақта(сурет жолдың сол жақ шетінде), RIGHT-оң жақта(сурет жолдың оң жақ шетінде) |
|
4. Суреттің биіктігін пиксельмен немесе терезе биіктігінің пайызымен береді |
|
5. Суреттің енін пиксельмен немесе терезе енінің пайызымен береді |
|
6. Суреттің жоғарғы және төменгі жақтарындағы бос аймақ мөлшерін пиксельмен береді |
3. Кеспе қағаз:
VI. Қорытындылау:
Тапсырманы орындаған, компьютерде жұмыс жасаған оқушыларды бағалаймын.
VII. Үйге тапсырма:
Ерекешова М.М. Информатика оқулығынан 126-128 беттердегі «HTML тілінде кесте құру» тақырыпты оқып келу
Рабочие листы
к вашим урокам
Скачать
6 662 871 материал в базе
Настоящий материал опубликован пользователем Тасбауова Назифа Кенесовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 144 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Мини-курс
6 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.