Web беттер және сайттар

Күні: 12.04.2017

Сынып: 11 ЖМБ

Мұғалімніңаты-жөні:

Темиров А.Б

Тексерілді:

МДОІЖО: И.Жапбаров

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

Web беттер және сайттар

Осы сабақта қолжеткізілетін оқу мақсаттары (оқу бағдарламасына сілтеме)

HTML тілінің көмегімен қарапайым веб парақтарын жасап үйренеді.

Сабақ мақсаты:

1.Барлық оқушылар: Тег дегеніміз не екенін біледі

2. Оқушылардың басым бөлігі : Қарапайым веб беттерін жасай алады

3 . Кейбір оқушылар: Тапсырмаларды орындауда басымдық танытады

Бағалау критерийі

Оқушылар өзара бірін- бірі бағалау, топтар бірін- бірі бағалау, кері байланыс түрлері

Тілдік мақсаттар

Тег, атрибут, браузер,веб

Пәнаралық байланыс

Ағылшын тілі, орыс тілі

Алдыңғы білім

Интернет, сайт, ақпарат

Сабақ барысы

Сабақтың жоспарланған кезеңдері

Сабақтағы жоспарланған жаттығу түрлері

Ресурстар

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

Оқушылармен амандасып, түгендеп алғансоң ынтымақтастық атмосферасын құру мақсатында «Сәлемдесу» тренингін үйымдастырып жағымды ахуал қалыптастырамын. Жасырылған рубустан браузер сөзін тауып , «Мозайка» әдісі арқылы топтарға бірігіп және мозайка суреттеріндегі сұрақтарға жұппен жауап береді. Топбасшыны әр топ өзі сайлайды. Бағалау парағын тапсырамын.

Оқулық, қорап

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

Жаңа тақырыпты бейнеролик арқылы түсінеді. Тапсырмаларды компьютерде топпен орындайды.

№1 тапсырма.

1. Блокнот қосымшасын ашамыз

2. Төмендегі кодты тереміз.

< HTML>

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

</HEAD>

<BODY>

Құрметті достар, алғашқы web-парағыма қош келдіңіздер!

</ BODY >

</HTML>

3. Құжатты сақтаймыз.

4. Броузерден қараймыз.

№2 тапсырма.

1. Алдыңғы парақтағы «Құрметті достар, алғашқы web-парағыма қош келдіңіздер!» сөйлемінің астына бір шумақ өлең қосайық. Ол үшін сөзді немесе сөйлемді жаңа жолдан бастаймыз. Жолды бөлу үшін <BR> тегін қолданса болады.

Блокнотта:

< HTML>

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

</HEAD>

<BODY>

<B><І>

<font color=“#FF0000”> <H2> ALIGN=“CENTER”> Құрметті достар, алғашқы web-парағыма қош келдіңіздер! <H2></font>

<BR><PRE><font color=“#008080”> <H4 ALIGN=“CENTER”>

Ұстаз болу – жүректің батылдығы,

Ұстаз болу – сезімнің ақындығы.

Ұстаз болу – мінездің күн шуағы,

Азбайтұғын адамның ақылдығы.

</PRE> </H4> </font>

</ BODY >

</HTML>

№3 тапсырма

 Тізім
Нөмірленген тізімді ұйымдастыру үшін <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>

№4-тапсырма.

Мәтінді форматтау тегтері  
Құжатта тақырыптар <Hi>, </hi> тегтерімен жасалынады, бұл жерде і=1 болғанда ең үлкен тақырып жазылады, і=6 болғанда – ең кіші.
Мысалы, 
Көрінетін мәтін 
HTML де жазылуы
Заголовок1

<H1> 11 cынып </H1>

Заголовок2

<H2> 11 сынып </H2>

Заголовок3

<H3> 11 сынып </H3>

Заголовок4

<H4> 11 сынып </H4>

Заголовок5

<H5> 11 сынып </H5>

Заголовок6

<H6> 11 сынып </H6>

Абзац енгізу ушін <P>, </p> тегтерін қолданады, мәтіннің сол жақ, ортада, оң жақта орнату үшін align атрибуты пайдалынады.

Мысалы:

<P align=center> 11 сынып </p>

«11 сынып» сөйлемі беттің ортасына орналасады.
Align дің мәні тағыда left (сол жақ), right (оң жақ) болуы мүмкін.

№5-тапсырма.Қарапайын 2*3 кестесін жасау

<TABLE border=1>
         <TR>
                   <TD> мәтін</td>
                   <TD> мәтін</td>
                   <TD> мәтін</td>
         </tr>
<TR>
                   <TD> мәтін</td>
                   <TD> мәтін</td>
                   <TD> мәтін</td>
         </tr>
</table>
Бұл жерде border  кесте сызықтарының ені.

Сен мұғалімсің, қатені тап

<table>

  <h1> Демалысқа керек заттар: </h1>

<td><th>  Тамақ  <th>  Су  <th>  Жылы киім  </td>

</table>

Жауабы:

<h1> Демалысқа керек заттар: </h1>

<table>

  <tr>

              <th>Тамақ</th>

<th>Су</th>

<th>Жылы киім</th>

</tr>     

</table>

Сен мұғалімсің, қатені тап

<!DOCTYPE html>

<html>

<title> Адам саны ең көп мемлекеттер </title>

 <body>

<ol>

1. Үндістан

2. Қытай

3. АҚШ

</ol>

</body>

</html>

Жауабы:

<!DOCTYPE html>

<html>

<head>

<title> Адам саны ең көп мемлекеттер </title>

</head> 

<body>

<ol>

<li>Үндістан</li>

<li>Қытай</li>

<li>АҚШ</li>

</ol>

</body></html>

Оқулық, плакат, маркер.

Сергіту сәті

1. Жігітті компьютеріне қарап бағала /Жігітті досына қарап бағала/

2. Байт биттен құралады /Теңге тиыннан құралады/

3. Вирустан қорыққан, интернетке шықпас /Шегірткеден қорыққан, егін, екпес/

4. Антивирусы күштіні – вирус ала алмайды /Досы күштіні – жау алмайды/

Сабақтың соңы

Шығармашылық әрекет

1 - топ

Сынып оқушыларының нөмірленген тізімін жасаңыз

2 - топ

Сәрсенбі күннің сабақ кестесін құрыңыз

3 - топ

Кесте құрып, жыл мезгілдерін ай аттарымен жазыңыз

Жабық тест

1. Тәг - HTML тілінде символдық мәтінді белгілейтін команда. /Ия/

2. HTML body құжаты қай тәгтен басталады. /жоқ/ html

3. HTML тәгтері жәй жақшаға алынады. /жоқ/ бұрыштық

4. Жабу тәгі бұрыштық жақша символмен басталады. /ия/

5. Файл аттары *.doc типінде сақталады. /жоқ/ *.html

6. Ең ірі мәтін тәгі - H4. /жоқ/ H1

7. Мәтін құжатының негізгі тұлғасы body тәгі. /ия/

8. Көбейтілуге және басқа программаларға «жұғуға» қабілетті арнайы компьютерлік программа – паразит деп аталады. /жоқ/

9. Нөмірленген тізімді ұйымдастыру үшін <OL> және <l1> тегтері қолданылады./ия/

10. HTML тілінде қолданылатын командаларды - браузер деп атаймыз. /жоқ/ тэг

Саралау – Сіз қандай тәсілмен көбірек қолдау көрсетпексіз? Сіз басқаларға қарағанда қабілетті оқушыларға қандай тапсырмалар бересіз?

Бағалау – Сіз оқушылардың материалды игеру деңгейін қалай тексеруді жоспарлап отырсыз?

Денсаулық және қауіпсіздік техникасын сақтау

Топтық тапсырмалар

арқылы

Топты бағалау: ынталандыру арқылы, өзін-өзі бағалау

«Плюс-минус-қызықты» әдісі

Арнайы жаттығулар, Компьютерде жұмысты аяқтаған кездегі қауіпсіздік

№

Аты – жөні

Мозайка

№1

№2

№3

№4

№5

Қатені тап

Шығармашы лық

Тест

Сәйкестендіру

Жалпы ұпай

№

Аты – жөні

Мозайка

№1

№2

№3

№4

№5

Қатені тап

Шығармашы лық

Тест

Сәйкестендіру

Жалпы ұпай

№

Аты – жөні

Мозайка

№1

№2

№3

№4

№5

Қатені тап

Шығармашы лық

Тест

Сәйкестендіру

Жалпы ұпай