Научная статья на тему 'Методичні особливості навчання студентів розмітки блоків при вивченні таблиць каскадних стилів'

Методичні особливості навчання студентів розмітки блоків при вивченні таблиць каскадних стилів Текст научной статьи по специальности «Науки об образовании»

CC BY
159
25
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
розмітка блоків / веб-сторінка / логічна структура сайту / методика навчання інформатики / метод аналогій / репродуктивний метод / block marking / website / logical site structure / methods of teaching science / method of analogies / reproductive method

Аннотация научной статьи по наукам об образовании, автор научной работы — Н В. Дегтярьова

Стаття присвячена вивченню методичних особливостей навчання студентів мові гіпертекстової розмітки, таблиць каскадних стилів на прикладі опису блоків. Обґрунтовано актуальність вивчення мови гіпертекстової розмітки попри велике заповнення простору глобальної мережі системами управління контентом. Акцентується увага на веб-компетентностях як на одній зі складових інформатичних компетентностей майбутнього учителя інформатики. У роботі пропонується розглянути поступове опанування навичками роботи з блоком як одним з елементів логічної структури веб-сторінки, в контексті чого також описано сучасний підхід до логічного розбиття веб-сторінки. Представлено використання методу репродуктивної діяльності та методу аналогій як необхідних методів при первинному закріпленні знань. Наведено приклад частини практичної роботи. З метою зацікавленості та реалізації творчого підходу наведено приклади оформлення рухомого тексту на веб-сторінках. В статті використовуються електронні ресурси, в яких розташовано колекції зразків оформлення різних елементів.

i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

STUDENTS TEACHING METHODS PECULIARITIES OF MARKING UNITS THE STUDY OF CASCADING STYLE SHEETS

The article is devoted to methods of teaching students to hypertext markup language and cascading style sheets. The author talks about the relevance of the study of HTML language despite the large number of CMS. The emphasis is on web-competencies, which are a part of it-competence of future teachers of Informatics. The article discusses the gradual acquiring skills when working with blocks. Students study HTML at the University. In school students learn possibility only about this. The teacher must be able to work with the sites ready and establish. The unit is part of the logical structure of the web page. So the modern approach to logical markup of the web page. Reproductive method and the method of analogies is a necessary method in arkticheskih works. An example is given of practical work. The teacher should remind about copyright when using ready-made solutions. The author cites the example design of mobile line for interested students and their work. Examples of design elements are placed on the pages of a global network of electronic resource.

Текст научной работы на тему «Методичні особливості навчання студентів розмітки блоків при вивченні таблиць каскадних стилів»

Scientific journal PHYSICAL AND MATHEMATICAL EDUCATION

Has been issued since 2013.

Науковий журнал Ф1ЗИКО-МАТЕМАТИЧНА ОСВ1ТА

Видасться з 2013.

http://fmo-journal.fizmatsspu.sumy.ua/

Дегтярьова Н.В. Memodu4Hi oco6nueocmi навчання студент'в розм'тки бломв при eue4eHHi таблиць каскадних cmunie //Ф'зико-математична осв'та : науковий журнал. - 2017. - Випуск 1(11). - С. 32-36.

Dehtiarova N. Students Teaching Methods Peculiarities Of Marking Units The Study Of Cascading Style Sheets // Physical and Mathematical Education : scientific journal. - 2017. - Issue 1(11). - Р. 32-36.

УДК: 378.14: 372.8 (004)

Н.В. Дегтярьова

Сумський державний педагогiчний ушверситет iменi А.С. Макаренка, Укра)на

[email protected]

МЕТОДИЧН1 ОСОБЛИВОСТ1 НАВЧАННЯ СТУДЕНТ1В РОЗМ1ТКИ БЛОК1В ПРИ ВИВЧЕНН1 ТАБЛИЦЬ КАСКАДНИХ СТИЛ1В

Анотац'я. Стаття присвячена вивченню методичних особливостей навчання студент'!в мов'1 гпертекстовоi розмтки, таблиць каскадних стилiв на приклад'1 опису блошв. Обфунтовано актуальшсть вивчення мови гпертекстовоi розм'тки попри велике заповнення простору глобально)' мережi системами управлiння контентом. Акцентуеться увага на веб-компетентностях як на однй 3i складових iнформатичних компетентностей майбутнього учителя iнформатики.

У роботi пропонуеться розглянути поступове опанування навичками роботи з блоком як одним з елементiв логiчноi структури веб-стор'шки, в контекст'1 чого також описано сучасний п'дх'д до логiчного розбиття веб-стор'нки. Представлено використання методу репродуктивноiдiяльностi та методу аналогй як необхдних метод/'в при первинному закр'тленш знань. Наведено приклад частини практично)' роботи. З метою за^кавленост'1 та реал'зацП творчого пдходу наведено приклади оформлення рухомого тексту на веб-стор'шках. В статт'1 використовуються електронн ресурси, в яких розташовано колекцПзразк'в оформлення р'!зних елементiв.

Ключов! слова: розм'тка бломв, веб-сторiнка, логiчна структура сайту, методика навчання iнформатики, метод аналог'ш, репродуктивний метод.

Постановка проблеми. Реформування освти вщбуваеться з урахуванням тенденций сусптьного розвитку. Навчання у школi та отримання освти у вищих навчальних закладах передбачае не просто накопичення певного об'ему знань та умшь, але й розвитку здiбностей студента i учня використовувати сучасш технологи для розв'язування рiзноманiтних завдань. Розглядаючи дослщження щодо проблеми шформатичних компетентностей майбутых учителiв можемо зробити висновок, що саме використання веб-технолопй на даний час е одним з актуальних напрямюв таких дослщжень. I це можна з упевнеыстю стверджувати щодо особистосп кожного учителя незалежно вщ предмету, який вш викладае. Цю же тезу пщтверджують дослщники, зауважуючи, що можлив^ь працювати у бтьшосп галузей може реалiзуватися за наявносп вщповщних уявлень та навичок роботи у мережi [13, с.6]. Що стосуеться педагопчного напрямку ще' проблеми, то поняття «шформатичы компетентность», «шновацмна дiяльнiсть», «сучасний учитель» останшм часом вживаються разом з умшнями використовувати сервки глобально'' мереж^ створювати та наповнювати контент блогу, сайту тощо. Тому навчання студенев педагопчних спе^альностей створенню, наповненню та пiдтримцi сай^в е актуальним питанням на даний час. При цьому це стосуеться майбутых учт^в всiх шкiльних дисциплш, а особливо iнформатики.

Вже звичним е той факт, що кожен вчитель повинен мати власний блог, особистий сайт, де вш пропонуе методичн матерiали для учнiв, колег чи шформацшы повiдомлення для бать^в. Так, при проведеннi конкурсу «Учитель року 2017» необхщно було представити власний веб-ресурс. З огляду на це важливим е навчити майбутых учителiв правильному форматуванню та наповненню сай^в. Освiтнi веб-ресурси можуть створюватися педагогами i професiональними веб-розробниками. У першому випадку при яккному методичному наповненнi та корисних матерiалах можлива низька якiсть функцiонального наповнення. У шшлй ситуацГ'' може спостер^атися низька якiсть педагогiчного рiвня, а саме, не придтяеться увага методик навчання предмету, педагогiчним вимогам та цтям навчання [14, с.44]. Тому актуальним е навчити саме студенев педагопчних спещальностей основам мови HTML та застосуванню таблиць каскадних ст^в CSS. I слiд зауважити, що як i при створеннi веб-сторшок, так i при редагуваннi вже готових шаблоыв в тих ресурсах, ям надають можливiсть редагувати код сторшки, актуальним е логiчне форматування за допомогою блокiв.

Аналiз актуальних дослщжень. Аналiз дослiджень з дано' тематики дае пщстави стверджувати про увагу до дано'' проблеми. Вивчення веб-компетентностей учителя шформатики як складово'' шформатично''' компетентностi присвячено роботи О.Захар, Л.А. Кулш, Т.А. Крамаренко та шил. Активне застосування iнформацiйних технолопй у освiтньому процесi викладачем чи у навчальному - вчителем було зумовлено швидким розвитком та постшним удосконаленням

ISSN 2413-158X (online) ISSN 2413-1571 (print)

шформацшно-комушкацшних технологiй. З огляду на це окремою складовою професiйноí компетентности педагога вважаеться iнформатична компетентнiсть. При цьому рiвень iнформатичних компететностей вчителiв рiзних дисциплiн мае вiдрiзнятися за змктом [7, с. 63-64]. Так, маемо змогу ознайомитися з дослщженнями, що стосуються структури веб-компететностей студента [10, с.8]. Постае проблема методики навчання майбутых учителiв шформатики у галузi застосування веб-технологiй, отже знаходимо дослщження, присвяченi вивченню технолопй поколiння Веб 2.0 розглядали О.В. 1гнатенко, Н.В.Морзе, 1.Я. Золотнiков, Ю.С. Рамський, 1.С. lваськiв, О.Ю. Ыколаенко 1.М. Сокол та iншi. А також використанням рiзних веб-технологiй, 1нтернет-ресурав, мови HTML в контекстi дистанцмного навчання, створення електронних пiдручникiв та поабни^в переймалися 1.В. Герасименко, В.В. Вишывський, М.П. Гнiденко, Г.1. Гайдур, О.О. 1лын, О.М. Удовиченко та iншi.

Мета CTaTTi: розглянути методичн особливостi навчання студентiв опису елемен^в, використовуючи таблицi каскадних стилiв, на прикладi формування структури веб-сторiнки за допомогою блокiв.

Виклад основного матерiалу. Розглядаючи тему створення сайту спочатку студенти ознайомлюються з його структурою. Лопчне форматування структури сайту за останн два десятирiччя зазнало змш. Певний час було популярним використання фреймiв та табличних структур. Шзнше, завдяки розширенню опису уже кнуючих та введенню нових елементiв у останню версiю мови гiпертекстовоí розмггки: <header>, <footer>, <div>, <nav>, <article>, <section>, <aside> -стали використовуватися блочнi елементи. I саме такш побудовi сайту важливо навчити сьогодншых студентiв.

При формуваннi практичних навичок доцтьно використовувати репродуктивну дiяльнiсть, дiяльнiсть за аналогiею та творчу дiяльнiсть студента. Так, вивчаючи конструювання веб-сторшки, вважаемо доцiльним пропонувати розв'язувати завдання, аналопчы представленим нижче. Слiд зауважити, що студенти перед отриманням такого завдання вже вивчали i таблиц каскадних сл/^в, i роботу з текстом та зображеннями.

Завдання I. Розбиття сторшки на блоки.

1. Розбити сторшку на зазначену тему за варiантом.

Варiант 1. Лопчш задачi

Варiант 2. Хто Ви сова чи жайворонок?

2. Створити розбиття сторшки на 3 частини:

- першу частину розташувати вгорi - зробити блок з назвою теми та емблемою;

- центральну частину заповнити текстом за темою, п^брати зображення та вставити 'х на сторшку;

- третю частину розташувати внизу сторшки - зробити блок з рухомим рядком (афоризм що пщходить до теми: «Лопка може привести вас вщ пункту А до пункту Б, а уява - куди завгодно», «Кожний ранок - це час почати нове життя» або будь-яюй шший з зазначенням прiзвища автора).

Завдання II. Оформлення сторшки за зразком.

1. Створити сторшку з прикладом блоку

(оформлення сторшки запропоновано http://ruseller.com/service.php?rub=19&id=2970)

2. Текст коду можна котювати. Виконати там перетворення:

- збтьшити та зменшити блок;

- змшити малюнок,

- змiнити текст;

- змшити фон вае'|' сторiнки.

Завдання III. Розбиття сторшки з використанням таблиць каскадних сп^в та клаав. Оптимiзуйте власний варiант розбиття сторшки, виконане у завданн I, застосовуючи приклад та опис сл^в для визначених бло^в.

Блок - це елемент веб-сторшки, що вiдображаеться зазвичай прямокутною областю. Як вiдомо, блочний елемент займае весь проспр у ширину сторшки, проспр у висоту визначаеться контентом. Вигляд блоку описуеться таблицями каскадних сл^в. До дескрипторiв опису блочних елементiв вiдносяться <p>, <h1>, <div> та iншi.

Завдання I орiентовано на виконання роботи за зразком, розглянутим на лекцп. Студент мае можливiсть перевiрити застосування дескрипторiв власноруч, експериментальним шляхом визначити доцтьысть розташування блокiв, встановити 'х оптимальний розмiр. Також кожний зi студентiв реалiзуе власне уявлення щодо розмiру, заливки, форму блокiв та шших 'х властивостей. Наведемо частину матерiалу щодо встановлення фонового кольору, зображення та його властивостей, що пропонувалося на лекцп.

Таблиця 1.

Розмггка фонового зображення блошв засобами CSS

Селектор Призначення селектору Приклад властивост'1 Вар1анти опису властивост'1

background-color Опис фонового кольору елемента body { background-color: #7CFC00; } transparent - прозоркть фону inherit - задаеться при необхщност встановити наслщування фону батьювського елементу

background-image: url Встановлення фонового зображення body { background-image: http://oboi20.ru/waNpaper- 3405/; } none - при опис наступних елементiв вщмшяе фонове зображення inherit - при опиа наступних елеменпв наслiдуе зображення батьювського елементу

background-position Розташування фонового зображення body { background-position: left center; } [left | center | right | <проценты> | <значение>] | | [top | center | bottom

Селектор Призначення селектору Приклад властивост'1 Вар1анти опису властивост'1

background-attachment Опис варiантiв рухомост фонового зображення body { background-attachment: scroll; } fixed - нерухоме фонове зображення scroll - зображення рухаеться разом з контентом сторшки local - фонове зображення буде рухатися за умови рухомосп елемента, до якого вш вщноситься

background-repeat Повторення фонового зображення body { background-image: http://oboi20.ru/wallpaper- 3405/; background-repeat: repeat-x; } repeat-x - повторення зображення по горизонт repeat-y - повторення зображення по вертикалi space - зображення повторюеться, заповнюючи весь проспр, при необхiдностi мiж зображеннями додаеться порожне мкце round - зображення повторюеться цте число раз no-repeat - зображення не повторюеться

Завдання II спрямовано на застосування методу дiяльностi за аналопею. При вивченн дескрипторiв мови HTML опис фонового зображення задаеться парними тегами background, опис кольору - color, вставка зображення - image. При розмггц бломв за допомогою таблиць каскадних сл/^в вказанi дескриптори вже е властивостями селектора body. Розглядаючи готовий варiант,студент ознайомлюеться з прикладами. Таким чином демонструемо розв'язування класичних задач на лопчну розмп^ку веб-сторiнки. Навiть, якщо викладач не мае можливост ознайомити студентiв з уама основними тегами, то приклади е iнтуíтивно-зрозумiлими, оскiльки мiстять опис властивостей селекторiв, що е аналопчними до назв дескрипторiв. Тому застосування таких властивостей здмснюеться за аналопею вже знайомих студент^ назв. Також корисно пропонувати дектька лiстiнгiв опису певно''' розмiтки блокiв, а студент оцшюе íх i обирае на його думку кращий. При цьому атрибути дескрипторiв та властивостi селекторiв також е аналогiчними за написом та функ^ями.

Окремi дм, ям необхiдно виконати в контекстi даного завдання, присвячено опануванню роботи з такими селекторами та 'х властивостями, як: block; width; background; padding; padding-right та аналопчы; border: solid та аналопчы; float: left та аналопчы. Приклад розглядаеться за посиланням i пропонуеться студентам виконати змши. Починаючи з найпростших крокiв: замши картинки та тексту - маемо уже готове пщтвердження, що студенти розум^ть особливостi застосування вiдповiдних дескрипторiв. Подальша змiна вiдбуваеться у оформлены фону, встановлення полiв, вiдступiв у блоках. Поступово студент розумiе на таких прикладах, яким чином досягти оптимального представлення даних у блоках.

Засобами глобально' мережi можна знайти велику кшьмсть електронних джерел як на офщшних сайтах вищих навчальних закладiв так i на власних сайтах користувачiв, де описуються алгоритми створення та застосування окремих дескрипторiв, ''х атрибутiв, селекторiв та властивостей, а найголовшше прикладiв [1;2; 6; 9; 11].

Це пщтверджуе тезу про вщкриткть наповнення рiзноманiтних сервiсiв, що е ключовим фактором сучасних веб-технологiй [8, с.16]. Тому навчатися оформлювати певнi елементи досить зручно на готових розробках, що пропонуються 'х авторами. Дослiдники та методисти зазначають, що важливу роль при виршены певного завдання у людини в^грають асо^ацп та аналопя як методи розумово'' дiяльностi [12, с.5]. Як зазначае у своему дослщженн Вовк Л.1., «у тзнаны аналогiя - такий вид розумово' дiяльностi, який на основi встановлення подiбностi й вiдмiнностi одного предмета з шшим i вивчення одного з них приводить до набуття нового знання про предмет, що вивчаеться, i дае можливкть наочно обГрунтувати яке-небудь висловлене положення» [4,с.27].

Розумовi операцГ'' аналiзу, синтезу. Порiвняння, узагальнення, абстрагування визначае основою мiркувань за аналогiею Гордiенко I.B. [5, с.33] .

На заняттi з метою зацтавлення пропонуемо i приклади опису рухомих рядюв:

1) ... <div style="height:64px; width:512px; margin: auto; background-color: #ff543d; font-size: 44px; color: white;" align= "center"">

<marquee behavior-'alternate" direction="right">

Текст для рухомого рядка

</marquee>

</div> .

2) ... <div style="height:76px; width:512px; margin: auto; background-color:#EDEDED; border-left:4px solid #8B8B8B;" align="center">

<marquee behavior="scroll" direction="left"> <p style="color: Green">

Текст для рухомого рядка </p>

</marquee>

</div> ...

I знову студент при застосуванн рiзних дескрипторiв мае використовувати атрибути, аналогiчнi попередым вже вивченим. Отже, маемо пщстави стверджувати, що метод аналопй при набуттi практичних навичок лопчного форматування веб-сторiнки е доцтьним та актуальним.

Завдання III повертае студента до виконання перших кро^в. Тут надаеться можливiсть при вивченому та вже застосованому матерiалi розширити оформлення власно! роботи. Таким чином сприяемо прогресу навчання окремого студента. Виправлення або удосконалення завдання I надае студенту можливкть пщмти творчо, виявити креативний пщхщ до оформлення окремо! частини власного сайту.

Висновки та напрями подальших дослщжень. Отже, до методичних особливостей практичного опанування студентами застосування таблиць CSS на прикладi розробки окремих елеметтв сайту вщносяться репродуктивна дiяльнiсть студентiв, застосування методу аналопй та творча дiяльнiсть. Результати дослщження дають пiдстави стверджувати:

1. Пщготовка студентiв до створення власних та використання готових веб-ресурав у повному обсязi розпочинаеться у вищому навчальному закладi. Програма для загальноосвт-лх шкiл з iнформатики мктить тему лише для ознайомлення з мовою гiпертекстовоí розмiтки.

2. При оформлены власного контенту розробник повинен мати представлення про вже готовi роботи для бтьш продуктивно! та творчо! дiяльностi.

3. Надання можливостей застосування шаблоыв для розробки власно! веб-сторшки також мае i виховне значення: викладач повинен нагадати про авторське право, неприпустимкть плагiату тощо.

4. Метод аналогiй е доцтьним i актуальним при вивченнi мови HTML та таблиць CSS.

5. При подальшому дослщжены методичних особливостей навчання студеттв слiд придiлити увагу вивченню класiв, псевдокласiв та !х застосуванню для логiчного форматування веб-сторшки. Також актуальним та не у повнш мiрi дослiджуваним питанням е особливост навчання студентiв педагогiчних спещальностей фiзичному форматуванню окремих елементiв веб-сторшок.

Список використаних джерел

1. Балик Н.Р. Активне навчання з використанням технолопй Веб 2.0 : навч. поабник / Н.Р. Балик, О.О. Лялик. - Тернопть: Навчальна книга. - Богдан, 2009. - 88 с.

2. Блочна верстка сторшок. Сучасн методи веб-програмування [Електронний ресурс]. - Запорiзький нацюнальний уыверситет. - Режим доступу: http://sites.znu.edu.ua/webprog/lect/1207.ukr.html

3. Бондар С.П. Роль аналоги в проблемному навчанн / С.П. Бондар // Питання проблемного навчання: Зб. наук. праць. -Ки!в: Радянська школа, 1978. - С. 70-86.

4. Вовк Л.!. Активiзацiя навчально-тзнавально! дiяльностi студеттв на основi методу аналоги у навчанн фiзики (на нефiзичних факультетах) / Л.I. Вовк. - Полтава, 2008. - 109 с.

5. Гордiенко I.B. Активiзацiя навчально-тзнавально! дiяльностi на основi методу аналопй у навчанн математики та фiзики / I.B. Гордiенко. - Серiя «Педагопка. Соцiальна робота». - Випуск 37. - С. 31-34.

6. Давыдов Е.В. Создание Web-страниц с помощью языка HTML / Е.В. Давыдов // Информатика и образование. - 2000. -№ 8. - С. 62-77.

7. Захар О. Сучасш тдходи до визначення шформацмно-комунтацшно! компетентности вчт^в шформатики // Ыформатика та шформацшы технологи в навчальних закладах. - № 2. - 2014. - С. 63-67.

8. ^натенко О.В Методика навчання технолопй Веб 2.0 майбутых учт^в шформатики: дис. канд. пед. наук / О.В. ^натенко. - К.: НПУ iменi М.П. Драгоманова, 2014. - 214 с.

9. Каминский С. Создание сайтов простими словами [Электронный ресурс] / С. Каминский. - Режим доступа: https://w3c.github.io/html/introduction.html#toc, https://www.kaminskiy-web.com

10. Кулш Л.А. Методика навчання педагопчного веб-дизайну майбул-лх учителiв технолопй: автореф. дис. канд. пед. наук / Л.А. Кулш - К. : НПУ iменi М.П. Драгоманова, 2013. - 21 с.

11. Попов Е. Частная коллекция качественных материалов для тех, кто делает сайты / Е. Попов [Электронный ресурс] / Е. Попов. - 2017. - Режим доступа: http://ruseller.com/service.php?rub =19&id=2970.

12. Петрович Н. Поговорим об информации / Н. Петрович.- М.: Молодая гвардiя, 1973. - 208 с.

13. Рамський Ю.С. Вивчення Web-програмування у школг навчальний поабник / Ю.С. Рамський, I.C ^асьмв,

0.Ю. Ыколаенко. - Тернопть: Навчальна книга. - Богдан, 2009. - 200 с.

14. Ткачук Г.В. Методика використання освiтнiх веб-ресурав у процеа пщготовки майбутых учителiв шформатики: Монографiя / Г.В.Ткачук. - Умань: Видавець «Сочшський», 2011. - 177 с.

References

1. Balyk N.R. Aktyvne navchannia z vykorystanniam tekhnolohii Veb 2.0 : navch. posibnyk / N.R. Balyk, O.O. Lialyk. - Ternopil: Navchalna knyha. - Bohdan, 2009. - 88 s. (in Ukrainian)

2. Blochna verstka storinok. Suchasni metody veb-prohramuvannia [Elektronnyi resurs]. - Zaporizkyi natsionalnyi universytet. -Rezhym dostupu: http://sites.znu.edu.ua/webprog/lect/1207.ukr.html (in Ukrainian)

3. Bondar S.P. Rol analohii v problemnomu navchanni / S.P. Bondar // Pytannia problemnoho navchannia: Zb. nauk. prats. -Kyiv: Radianska shkola, 1978. - S. 70-86. (in Ukrainian)

4. Vovk L.I. Aktyvizatsiia navchalno-piznavalnoi diialnosti studentiv na osnovi metodu analohii u navchanni fizyky (na nefizychnykh fakultetakh) / L.I. Vovk. - Poltava, 2008. - 109 s. (in Ukrainian)

5. Hordiienko I.V. Aktyvizatsiia navchalno-piznavalnoi diialnosti na osnovi metodu analohii u navchanni matematyky ta fizyky /

1.V. Hordiienko. - Seriia «Pedahohika. Sotsialna robota». - Vypusk 37. - S. 31-34. (in Ukrainian)

6. Davyidov E.V. Sozdanie Web-stranits s pomoschyu yazyika HTML / E.V. Davyidov // Informatika i obrazovanie. - 2000. - # 8. - S. 62-77. (in Russian)

7. Zakhar O. Suchasni pidkhody do vyznachennia informatsiino-komunikatsiinoi kompetentnosti vchyteliv informatyky // Informatyka ta informatsiini tekhnolohii v navchalnykh zakladakh. - № 2. - 2014. - S. 63-67. (in Ukrainian)

8. Ihnatenko O.V Metodyka navchannia tekhnolohii Veb 2.0 maibutnikh uchyteliv informatyky: dys. kand. ped. nauk / O.V. Ihnatenko. - K.: NPU imeni M.P. Drahomanova, 2014. - 214 s. (in Ukrainian)

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

9. Kaminskiy S. Sozdanie saytov prostimi slovami [Elektronnyiy resurs] / S. Kaminskiy. - Rezhim dostupa: https://w3c.github.io/html/introduction.html#toc, https://www.kaminskiy-web.com (in Russian)

10. Kulish L.A. Metodyka navchannia pedahohichnoho veb-dyzainu maibutnikh uchyteliv tekhnolohii: avtoref. dys. kand. ped. nauk / L.A. Kulish. - K. : NPU imeni M.P. Drahomanova, 2013. - 21 s. (in Ukrainian)

11. Popov E. Chastnaya kollektsiya kachestvennyih materialov dlya teh, kto delaet saytyi / E. Popov [Elektronnyiy resurs] / E. Popov. - 2017. - Rezhim dostupa: http://ruseller.com/service.php?rub =19&id=2970. (in Russian)

12. Petrovich N. Pogovorim ob informatsii / N. Petrovich.- M.: Molodaya gvardIya, 1973. - 208 s. (in Russian)

13. Ramskyi Iu.S. Vyvchennia Web-prohramuvannia u shkoli: navchalnyi posibnyk / Iu.S. Ramskyi, I.S. Ivaskiv, O.Iu. Nikolaienko. - Ternopil: Navchalna knyha. - Bohdan, 2009. - 200 s. (in Ukrainian)

14. Tkachuk H.V. Metodyka vykorystannia osvitnikh veb-resursiv u protsesi pidhotovky maibutnikh uchyteliv informatyky: Monohrafiia / H.V.Tkachuk. - Uman: Vydavets «Sochinskyi», 2011. - 177 s. (in Ukrainian)

STUDENTS TEACHING METHODS PECULIARITIES OF MARKING UNITS THE STUDY OF CASCADING STYLE SHEETS

Nelia Dehtiarova

Sumy Makarenko State Pedagogical University, Ukraine

Abstract. The article is devoted to methods of teaching students to hypertext markup language and cascading style sheets. The author talks about the relevance of the study of HTML language despite the large number of CMS. The emphasis is on web-competencies, which are a part of it-competence of future teachers of Informatics.

The article discusses the gradual acquiring skills when working with blocks. Students study HTML at the University. In school students learn possibility only about this. The teacher must be able to work with the sites ready and establish. The unit is part of the logical structure of the web page. So the modern approach to logical markup of the web page. Reproductive method and the method of analogies is a necessary method in arkticheskih works.

An example is given of practical work. The teacher should remind about copyright when using ready-made solutions. The author cites the example design of mobile line for interested students and their work. Examples of design elements are placed on the pages of a global network of electronic resource.

Key words: block marking, website, logical site structure, methods of teaching science, method of analogies, reproductive method.

i Надоели баннеры? Вы всегда можете отключить рекламу.