Жаппай ашық онлайн курс: Web - программалау

Каламкас Багитова
Каламкас Багитова
Информационно-коммуникационные технологии/Информатика
Класс:
10 класс
Раздел:
Веб-проектирование
Тема:

Жаппай ашық онлайн курс: Web - программалау

18.02.2026
0
Скачать в PDF Скачать в WORD
Курстың мақсаты:

Білім алушыларға Web-технологиялардың негіздерін меңгерту, HTML, CSS және JavaScript тілдерін пайдалана отырып заманауи Web-беттерді әзірлеу, безендіру және интерактивті элементтермен толықтыру дағдыларын қалыптастыру.

Курстың міндеттері:
  • Web-технологиялардың негізгі ұғымдарын меңгерту;
  • HTML тілінің құрылымы мен негізгі элементтерін үйрету;
  • Web-бет мәтінін құрылымдау және форматтау дағдыларын қалыптастыру;
  • кестелер, тізімдер, гиперсілтемелер және формалар құруды үйрету;
  • CSS көмегімен Web-беттерді безендіру тәсілдерін меңгерту;
  • JavaScript-ті HTML құжатында қолдану дағдыларын қалыптастыру;
  • Web-сайт әзірлеу конструкторларымен жұмыс істеуді үйрету;
  • практикалық Web-жобаларды әзірлеу қабілетін дамыту.
Курсты оқу барысында қалыптасатын құзыреттер:

Білім алушы:

  1. Web-беттерді жобалау және әзірлеу;
  2. HTML, CSS және JavaScript құралдарын тиімді пайдалану;
  3. Web-контентті құрылымдау және безендіру;
  4. интерактивті Web-элементтерді жасау;
  5. Web-сайттарды тестілеу және жетілдіру;
  6. заманауи Web-конструкторларды пайдалану құзыреттерін қалыптастырады.
Күтілетін оқу нәтижелері:

Курс соңында білім алушы:

  1. HTML-құжаттың құрылымын түсіндіреді және құрады;
  2. Web-бет мәтінін форматтайды;
  3. кестелер, тізімдер, гиперсілтемелер және формалар жасайды;
  4. CSS арқылы Web-бетті безендіреді;
  5. JavaScript кодын HTML құжатына енгізеді;
  6. қарапайым интерактивті Web-беттер әзірлейді;
  7. Web-сайт конструкторларын пайдаланып сайт жасайды;
  8. өз бетінше шағын Web-жобаны әзірлеп, нәтижесін ұсына алады.
Пререквизиттер:

Курсқа дейін білім алушының ақпараттық-коммуникациялық технологиялар, компьютерлік сауаттылық және алгоритмдеу негіздері бойынша бастапқы білімі болғаны жөн.

Постреквизиттер:

Курс нәтижесінде қалыптасқан білім мен дағдыларды Web-бағдарламалау, Front-end әзірлеу, ақпараттық жүйелерді жобалау және Web-жобаларды әзірлеу бағыттарында қолдануға болады.

Білім алушылардың оқу жетістіктерін бағалау:
  • практикалық тапсырмаларды орындау;
  • жеке тапсырмалар;
  • ағымдық бақылау;
  • Web-жобаны әзірлеу;
  • жобаны қорғау;
  • қорытынды бақылау.
Негізгі әдебиеттер:
  1. Robbins J. N. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Images. 6th ed. — O’Reilly Media, 2025.
  2. McFedries P. HTML, CSS, & JavaScript All-in-One For Dummies. — Wiley, 2023.
  3. Simon M. JavaScript for Web Developers: Understanding the Basics. — Apress, 2023.
  4. Wilson K. The Absolute Beginner’s Guide to HTML and CSS: A Step-by-Step Guide with Examples and Lab Exercises. — Apress, 2023.
  5. Hart-Davis G. Teach Yourself VISUALLY HTML and CSS. 2nd ed. — Wiley, 2023.
  6. Янцев В. В. Разработка web-страниц на HTML, CSS и JavaScript: учебное пособие для вузов. — Санкт-Петербург: Лань, 2024. — 148 с.
  7. Сапрыкин А. Н. Основы веб-программирования: HTML 5, CSS 3, JavaScript: учебное пособие для вузов. — Москва: Лаборатория знаний, 2024. — 248 с.
Электрондық оқу ресурстары:
  1. MDN Web Docs — HTML, CSS және JavaScript бойынша заманауи анықтамалық және оқу материалдары.
  2. W3Schools — HTML, CSS және JavaScript бойынша интерактивті оқу материалдары мен практикалық тапсырмалар.
  3. freeCodeCamp — Web-бағдарламалау және Front-end әзірлеу бойынша онлайн курстар мен практикалық жаттығулар.
  4. JavaScript.info — JavaScript тілін үйренуге арналған заманауи электрондық оқу ресурсы.
  5. HTML Living Standard — HTML стандартының ресми техникалық сипаттамасы.
Бағдарламалық қамтулар:
  1. Sublime Text — HTML, CSS және JavaScript кодтарын жазуға және өңдеуге арналған мәтіндік редактор.
  2. Visual Studio Code — Web-қосымшаларды әзірлеуге арналған код редакторы.
  3. Google Chrome — Web-беттерді қарау, тестілеу және әзірлеу құралдарымен жұмыс істеуге арналған браузер.
  4. Mozilla Firefox — Web-беттерді тестілеу және әзірлеу үшін қолданылатын браузер.
  5. Microsoft Edge — Web-беттерді қарау және тестілеуге арналған браузер.
  6. Figma — Web-беттердің интерфейсі мен дизайн макеттерін әзірлеуге арналған құрал.
  7. Git және GitHub — Web-жобаларды сақтау, нұсқаларын басқару және бірлесіп жұмыс істеуге арналған құралдар.
  8. Web-сайт конструкторлары — код жазбай Web-сайттарды әзірлеу және жариялау үшін қолданылатын платформалар.
Академиялық адалдық қағидалары:

Білім алушылар оқу барысында академиялық адалдық қағидаларын сақтауға міндетті. Практикалық және өзіндік жұмыстарды орындау кезінде білім алушы өз бетінше жұмыс істеп, пайдаланылған ақпараттық және әдеби дереккөздерге сілтеме жасауы тиіс.

Курс барысында:

  • дайын жұмыстарды немесе басқа білім алушылардың жұмыстарын көшіруге жол берілмейді;
  • басқа авторлардың идеяларын, мәтіндерін, бағдарламалық кодтарын және дайын Web-жобаларын дереккөзге сілтемесіз пайдалануға болмайды;
  • пайдаланылған әдебиеттер мен электрондық ресурстар міндетті түрде көрсетіледі;
  • практикалық тапсырмалар мен Web-жобалар білім алушының өз бетінше орындаған жұмысы болуы тиіс;
  • жасанды интеллект құралдарын қолданған жағдайда, олардың пайдаланылуы оқытушының талаптарына сәйкес ашық көрсетілуі қажет.

Ход урока

Этапы урока Запланированная деятельность на уроке Ресурсы

1 тәжірибелік сабақ. HTML – құжат құрылымы. Алғашқы Web – бет

Практикалық сабақ барысында білім алушылар HTML тілінің негізгі ұғымдарымен және web-құжаттың құрылымымен танысады. HTML-құжаттың негізгі элементтері мен тегтерін қолдану, құжаттың құрылымын қалыптастыру, мәтіндік ақпаратты орналастыру және алғашқы қарапайым Web-бетті әзірлеу бойынша практикалық тапсырмалар орындайды.

https://youtu.be/mY669Aj0yzI

2 тәжірибелік сабақ. Web – бет мәтінін форматтау

Практикалық сабақ барысында білім алушылар HTML тілі арқылы web-беттегі мәтінді форматтау тәсілдерін меңгереді. Мәтінді тақырыптарға бөлу, абзацтарды ұйымдастыру, қаріптің өлшемі мен түрін өзгерту, мәтінді қалың, көлбеу және асты сызылған түрде көрсету, сондай-ақ мәтінді туралау бойынша практикалық тапсырмалар орындайды.

https://youtu.be/8wkqWRBS7mw

3 тәжірибелік сабақ. Web – бет мәтінін форматтау (жалғасы)

Практикалық сабақ барысында білім алушылар web-бет мәтінін форматтаудың қосымша тәсілдерін меңгереді. Мәтіннің өлшемін, түсін, қаріп түрін және орналасуын өзгерту, мәтіндік элементтерді тиімді құрылымдау, арнайы символдар мен абзацтарды қолдану арқылы web-беттің мазмұнын көркемдеу бойынша практикалық тапсырмалар орындайды.

https://youtu.be/W85tKnKcbu0

4 тәжірибелік сабақ. Web – беттің фон және мәтін түсімен жұмыс

Практикалық сабақ барысында білім алушылар web-беттің фоны мен мәтін түсін баптау тәсілдерін меңгереді. HTML және CSS көмегімен веб-беттің фон түсін, мәтін түсін, қаріп параметрлерін өзгерту, түстерді дұрыс үйлестіру және веб-беттің көрнекілігін арттыру бойынша практикалық тапсырмалар орындайды.

https://youtu.be/8rV2S4U8-fY

5 тәжірибелік сабақ. Тізімдер құру. Гиперсілтеме

Практикалық сабақ барысында білім алушылар HTML тілінде әртүрлі тізімдерді құру және веб-беттер арасында байланыс орнату тәсілдерін меңгереді. Нөмірленген, маркерленген және анықтамалық тізімдерді құру, гиперсілтемелерді орналастыру, олардың атрибуттарын баптау және сыртқы және ішкі ресурстарға сілтеме жасау бойынша практикалық тапсырмалар орындайды.

https://youtu.be/vfBPYs-2gfM

6 тәжірибелік сабақ. HTML тілі көмегімен кесте құру

Практикалық сабақ барысында білім алушылар HTML тілі арқылы веб-бетте кестелерді құру және құрылымдау тәсілдерін меңгереді. <table>, <tr>, <th>, <td> тегтерін қолдану, кесте жолдары мен бағандарын қалыптастыру, ұяшықтарды біріктіру және кесте мазмұнын тиімді орналастыру бойынша практикалық тапсырмалар орындайды.

https://youtu.be/QSvKbG8qiwg

7 тәжірибелік сабақ. HTML тілі көмегімен форма құру

Практикалық сабақ барысында білім алушылар HTML тілі арқылы веб-беттерде әртүрлі формаларды құру және баптау тәсілдерін меңгереді. Форма элементтерін (input, textarea, select, button және т.б.) қолдану, олардың негізгі атрибуттарын орнату және пайдаланушыдан ақпарат енгізуге арналған қарапайым веб-формаларды әзірлеу бойынша практикалық тапсырмалар орындайды.

https://youtu.be/m-HU7-ij-Go

8 тәжірибелік сабақ. CSS – ті HTML – да қолдану

Практикалық сабақ барысында білім алушылар CSS көмегімен HTML құжаттарының сыртқы көрінісін безендіру және веб-бет дизайнын қалыптастыру тәсілдерін меңгереді. CSS-ті HTML құжатына қосу, элементтердің түсін, қаріпін, өлшемін, орналасуын және басқа да стильдік қасиеттерін баптау бойынша практикалық тапсырмалар орындайды.

https://youtu.be/skb-hoje4kE

9 тәжірибелік сабақ. JavaScript – ті HTML – да қолдану

Практикалық сабақ барысында білім алушылар JavaScript тілін HTML құжаттарына енгізу және веб-беттің интерактивтілігін арттыру тәсілдерін меңгереді. JavaScript кодын HTML құжатына қосу, оқиғаларды өңдеу, веб-бет элементтерін басқару және қарапайым интерактивті функцияларды жүзеге асыру бойынша практикалық тапсырмалар орындайды.

https://youtu.be/IXj5go3afGQ

10 тәжірибелік сабақ. Web сайт әзірлеуге арналған конструкторлар

Практикалық сабақ барысында білім алушылар код жазбай-ақ web-сайт құруға мүмкіндік беретін заманауи конструкторлардың мүмкіндіктерімен танысады. Сайт құрылымын әзірлеу, дайын шаблондарды таңдау және бейімдеу, мәтіндік және графикалық контентті орналастыру, навигация элементтерін құру және сайтты жариялау бойынша практикалық тапсырмалар орындайды.

https://youtu.be/HUBY80rnyFs

Приложение:

Открыть файл Қосымша тапсырма №1. HTML – құжат құрылымы
Открыть файл Қосымша тапсырма №2. Web – бет мәтінін форматтау
Открыть файл Қосымша тапсырма №3. Web – бет мәтінін форматтау
Открыть файл Қосымша тапсырма №4. Web – беттің фон және мәтін түсімен жұмыс
Открыть файл Қосымша тапсырма №5. Тізімдер құру. Гиперсілтеме
Открыть файл Қосымша тапсырма №6. HTML тілі көмегімен кесте құру
Открыть файл Қосымша тапсырма №7. HTML тілі көмегімен форма құру
Открыть файл Қосымша тапсырма №8. CSS – ті HTML – да қолдану
Открыть файл Қосымша тапсырма №9. JavaScript – ті HTML – да қолдану
Открыть файл Қосымша тапсырма №10. Web сайт әзірлеуге арналған конструкторлар

Отзывы(0)