Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Разработка открытого урока на тему "«Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін HTML – ді қолдану»"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Разработка открытого урока на тему "«Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін HTML – ді қолдану»"

библиотека
материалов

Урок комбинированный

Тема урока: «Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін HTML – ді қолдану»

Название предмета: Мультимедиа технология

Для студентов специальности информационные системы


Талдықорған агро-техникалық колледжі

Лабораториялық – практикалық сабақтың технологиялық картасы (жоспары) №7


Пән атауы:


Сабақтың тақырыбы: Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін

HTML – ді қолдану


Топ: 307 Күні: 10.11.2016 Уақыты:2сағ


Сабақтың түрі: Аралас сабақ


Сабақтың әдісі: Түсіндіру, баяндау, талдау, компьютерде жұмыс,

сын тұрғысынан ойлау стратегиясының элементтері


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

1.Білімділік: Интернетте бағдарламалау тілдерінің бірі болып табылатын HTML тілі, тэгтері, атрибуттары туралы жалпы түсінік беру, WEB-парақтарды құруға қажет және білім, білік, дағдысын жетілдіретін кешенді жаттығулар беріліп, оларды игерудің жолдары көрсету


2. Дамытушылық: Студенттердің қызығушылықтары мен белсенділіктерін, зейіндік қабілеттерін, компьютерлік сауаттылығын дамыту және ойларын жинақтай білуге үйрету


3.Тәрбиелік: Компьютерді құрал ретінде еркін қолдана білу, студенттерді уақытты

тиімді пайдалануға, жүйелі ойлауға, ұқыптылыққа, шапшаңдыққа,

компьютерлік сауаттылыққа тәрбиелеу


Пәнаралық байланыс: Бағдарламалау, ағылшын тілі, техникалық құралдар кешені, автоматтандырылған ақпараттық жүйелер


Пәнішілік байланыс: Гипермәтін. HTML тіліндегі файлдың құрылымы


Сабақтың жабдықталуы:


А. Көрнекі құралдар: Интерактивті тақта, Power Point –та

дайындалған презентация-слайдтар

Б. Үлестірмелі материал: қосымша тапсырмалар, стикерлер


В. Оқытудың техникалық құралдары: Дербес компьютер, интерактивті тақта


Г. Сабақ өтетін орын: 73 дәрісхана


Д. Негізгі әдебиет: К.А. Искакова «Web – технологиялар»16-20б.


Е. Қосымша әдебиет: Г.Ә. Жапарова «Информатика негіздері» 257 бет



Сабақтың мазмұны:

І. Сабақтың ұйымдастыру кезеңі: 3 – мин.

А) Студенттермен сәлемдесу

Ә) Дәрісхананың сабаққа дайындығын тексеру

Б) Ақпар бойынша тексеру


ІІ. Үй тапсырмасын тексеру: 15 – мин.

Үй тапсырмасын тексеру «Сынық вагон» әдісі арқылы жүзеге асырылады.

  1. Блокнот бағдарламасын іске қосу командасы қандай?

  2. Web-парақ дегеніміз не және олар қалай жасалады?

  3. HTML тілі қандай қызмет атқарады?

  4. Белгілеу тілі дегеніміз не?

  5. Браузер дегеніміз не?

  6. Тегтер дегеніміз не?

  7. HTML тегтерінің қандай түрлері бар?

  8. Тегтердің жазылу синтаксисі қандай?

  9. Тег атрибуттары не үшін қолданылады?

  10. Тег атрибуттарының жазылу ережелерінен мысалдар келтіріңіздер.

  11. HEAD және BODY қандай тегтер?

  12. HTML құжаттың негізгі тегтері қандай?

  13. Title тегінің қызметі қандай?

  14. Left, Right тегі не үшін қолданылады?

  15. BODY BACKGROUND тегінің қызметі қандай?

  16. HTML сөзінің ағылшын, қазақ тіліндегі мағыналары қандай?

  17. HTML дегеніміз не?

  18. Гипермәтін дегеніміз не?

  19. HTML тілінің шығу тарихы

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

  21. HTML құжаттары қалай дайындалады? Оларды қалай өзгертуге болады?

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


«Сынық вагон» сұрақтары:

  1. Тақырып жолы тегі қандай?

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

  3. «Body» тегінің қызметі қандай?

  4. «Head» тегінің қызметі қандай?

  5. «Title» тегінің қызметі қандай?

  6. Құжатты сақтаудағы кеңейтілім қандай?


ІІІ. Жаңа сабақты түсіндіру: 25 – мин.


ІV. Студенттердің теориялық білімдерінің игерілуін тексеру: 10 – мин.

«Алтын тасты сұрақтар» арқылы студенттердің теориялық білімдерінің игерілуін тексеру (интерактивті тақтада нөмірленген тастар берілген, осы тастарды таңдау арқылы сұрақтарға жауап беру)

  1. Мәтінмен жұмыс барысында қандай тегтер қолданылады?

  2. Суретті Web - параққа орнату тегі қандай?

  3. Анимация құрастырудың тегі қандай?

  4. Анимацияны құру тегінің атрибуттары бар ма?

  5. іmg тегінің атрибуттары қандай?

  6. Гипермәтінді құру үшін тағы қандай тегтер қолданылады?

  7. Мәтін түстерін анықтайтын тег?

  8. Фон түсін анықтайтын тег?

  9. Түстерді берілу тәсілдерін ата

  10. Негізгі түстердің RGB форматында жазылу кодтарына сипаттама жаса


V. Сабақты қорытындылау: 30 – мин.

Интерактивті тақта арқылы слайдта көрсетілген техника қауіпсіздігі ережесін оқып, еске ала отырып, тапсырманы орындау


Студенттердің теориялық материал бойынша білімдерін тексерместен бұрын, «Артық термин» әдісі арқылы студенттерді белсендендіру.

1. HTML, гипермәтін, сұраныс, тег, анимация.

2. Монитор, жүйелік блок, пернетақта, принтер, тышқан.

3. title, head, hand, body, H1

4. Блокнот, Web - парақ, браузер, форма, атрибут

5. Бос орын, компьютер, Esc, Enter, BackSpace.

6. Hyper Text Markup Language Head

7. Ctrl+B, Ctrl+U, Alt+F4, Delete, Ctrl+Alt+Delete, Ctrl+I.

8. MS Access, MS Excel, MS Word, Borland Delphi, MS Power Point.

9. Килобайт, сантиметр, бит, мегабайт.

10. Нүкте, Shift, үтір, қоснүкте.












Студенттердің орындаған жұмыстарын қорғауы.



VІ. Үйге тапсырма беру: 2 – мин.

К.А. Искакова «Web – технологиялар»16-20б.


VІІ. Бағалау: 5 – мин.

Сабақты қорытындылау барысында сабаққа белсене қатысқан студенттерге таратылған стикерлер арқылы мадақтап, қалыс қалып отырған студенттерге ескертпелер беру арқылы білімдерін бағалау.


Оқытушы:__________Нұрбекова А.Қ.





Нұсқау - технологиялық карта №7


Пән атауы: Мультимедиа технология

Сабақтың тақырыбы: Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін

HTML – ді қолдану

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

Уақыты: 30 минут

Тапсырма-1.
тегі өзінен соң келген сөзді немесе сөйлемді келесі қатарға түсіреді.
тегі бір қатардағы сөздерді немесе сөйлемдерді бірнеше қатарға бөліп тастайды.


тегі

Сызушы тегі


Бұл сызылған азатжол


Бұл да сызылған азатжол


Тапсырма-2. тегі сөзден немесе сөйлемнен соң жазылып, сол сөзден немесе сөйлемнен соң сызық түсіреді. Яғни, кейінгі қатарда бір сызық сызады.


Шрифтер

Шрифт түрлері

Қою шрифт

Көлбеу шрифт

Асты сызылған шрифт

Сызылған шрифт

Үлкен шрифт

Кіші шрифт

Шрифттөменгі индекс

Шрифтжоғарғы индекс


Тапсырма-3.


Шрифт аттары


Шрифт аттары

Times New Roman

Aharoni

Algerian

Monotype Corsiva


Шрифт таңдау үшін төмендегі терезедегі шрифт атауларының бірін таңдап, сол атауды font face=“осы жерде” жазу арқылы өзгерте аласыз. Ең бастысы шрифт атауын терезедегі сияқты дұрыс жазу керек!


Тапсырма-4.

Веб-бетке сурет қою

Веб-бетке сурет қою үшін қолданылады, оның атрибуты src графикалық файлға, яғни GIF, PNG немесе JPEG форматтағы суретке апаратын жол жазылады. Ал width атрибуты суреттің енін білдірсе, ал height атрибуты суреттің ұзындығын, биіктігін білдіреді.

HTML- де практикалык жумыс

HTML-де сурет кою

Priroda.jpg


Тапсырма-5. Web – параққа анимация орнату

Анимация в CSS3

@keyframes backgroundColorAnimation {

from {

background-color: red;

}

to {

background-color: blue;

}

}

div{

width: 100px;

height: 100px;

;

border: 1px solid #333;

animation-name: backgroundColorAnimation;

animation-duration: 5s;

animation-timing-function: ease-in-out;

animation-iteration-count: 3;

animation-direction: alternate;

animation-delay: 1s;

animation-fill-mode: forwards;

}


Тапсырма-6. Гиперсілтемемен жұмыс


6 - тапсырма

Гиперсілтеме қою

priroda.JPG

1 - тапсырмаға ауысу





































Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 14.11.2016
Раздел Информатика
Подраздел Конспекты
Просмотров88
Номер материала ДБ-349034
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх