959995
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 5 480 руб.;
- курсы повышения квалификации от 1 400 руб.
Московские документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ 60%

ВНИМАНИЕ: Скидка действует ТОЛЬКО до 28 февраля!

(Лицензия на осуществление образовательной деятельности №038767 выдана ООО "Столичный учебный центр", г.Москва)

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

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


Напоминаем, что в соответствии с профстандартом педагога (утверждён Приказом Минтруда России), если у Вас нет соответствующего преподаваемому предмету образования, то Вам необходимо пройти профессиональную переподготовку по профилю педагогической деятельности. Сделать это Вы можете дистанционно на сайте проекта "Инфоурок" и получить диплом с присвоением квалификации уже через 2 месяца!

Только сейчас действует СКИДКА 50% для всех педагогов на все 184 курса профессиональной переподготовки! Доступна рассрочка с первым взносом всего 10%, при этом цена курса не увеличивается из-за использования рассрочки!

ВЫБРАТЬ КУРС И ПОДАТЬ ЗАЯВКУ
библиотека
материалов
Скачать материал целиком можно бесплатно по ссылке внизу страницы.

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

Тема урока: «Мәтінді, суретті, анимацияны, гипермәтінді құрастыру үшін 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 - тапсырмаға ауысу




































Общая информация

Номер материала: ДБ-349034



Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 60% скидки (только до конца зимы) при обучении на курсах профессиональной переподготовки (124 курса на выбор).

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG

Только до конца зимы! Скидка 60% для педагогов на ДИПЛОМЫ от Столичного учебного центра!

Курсы профессиональной переподготовки и повышения квалификации от 1 400 руб.
Для выбора курса воспользуйтесь удобным поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВЫ).

Московские документы для аттестации: KURSY.ORG


Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «1С: Предприятие 7.7»
Курс «3D Studio MAX»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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