13.12.2021-19.12.2021
Тема: Створення меню з
гіперпосиланнями на веб-сторінці
Мотиваційна частина
Що таке ціннісні компетенції в старшокласників?
Запитання 1. Які складники ціннісних компетенцій у старшокласників?
Відповідь. Звичайно, що я розставлю тільки головні акценти у застосуванні власних розумінь та ціннісних компетенцій в своїй педагогічній практиці із страшокласники. Розумію, що перераховані позиції не зможуть анулювати мою порожню лакуну уявлень про те, що я не хочу досягти у «вульгарній» педагогіці турботи і щастя, у «мерзенній» педагогіці влади і незалежності, у «фарисейській» педагогіці одкровень, засад, маніпуляцій.
· Стійкі уміння діяти і вирішувати свою безпорадність на полюсах правди-істини-кривди-хиби.
· Адекватні уявлення про навколишнє оточення на полюсах краси-ідентичності-потворності-моди.
· Адекватні здатності реагування на зміни на полюсах сутності-змісту-сенсу-конотації.
· Використання швидкодіючих сервісів на полюсах «технології-принципи-акценти-підходи.
· Задатки до постійної самоосвіти і комунікації.
· Толерантна мотивація до саморозвитку на полюсах наративи-інвективи-понти-фронти.
· Етичні і естетичні критерії оцінювання досягнень на полюсах пам’ятники-свідомості-вірування-догмати.
· Власні переконання та гідність власної позиції і з позиції команди, соціальної групи,
· Прагнення не нашкодити собі під час впровадження інновацій на полюсах заклики-гасла-цінності-досвід
· Академічна доброчесність та культура виховання.
· Осмисленний досвід страху перед допущеними помилками і їх виправлень на полюсах зради-обману-крадіжки-знищення
· Довіра до знань і досвіду наукової та освітянської еліти.
· Аналіз загрозливих наслідків своєї непланованої роботи.
· Аналіз ризиків проблеми «права на оскарження».
· Конкурентність власних сенсів у соціумі на полюсах переконання-знання-трагедії-драми
· Мудрий альтруїзм та неуникнення проблемних ситуацій.
· Правова солідарність відповідальності у командній співпраці
· Спокійна нетерпимість до інтересів, які нівелюють цінності.
Практична частина
Завдання 1. Cтворити, реалізувати,
протестувати веб-сторінку «Довідкова інформація» для ліцеїстів, що цікавляться
інформатикою, або поглиблено вивчають математику.
Інструкція
для створення допоміжної веб-сторінки
на основі HTML-документів
1.Створити
папку з назвою «Довідкова інформація»
2.За
допомогою редактора БЛОКНОТ
створюємо HTML-документи
за
даним нижче кодуванням:
Інформація про 1-ий HTML-файл
Допоміжний HTML-файл має назву dovidka1.html
Цей HTML-файл
зберегти в папці: «Довідкова інформація»
Html-реалізація
у вигляді кодування:
<!DOCTYPE
html>
<html
lang="ukr">
<head>
<title>
Приклади меню на веб-сторінці</title>
</head>
<body>
<h1
class="has-text-weight-bold is-size-1" style="box-shadow:0.5rem
0 0 #3b5998, -0.5rem 0 0
#3b5998;background-color:#3b5998;color:white;padding:1rem">Довідкова
інформація</h1>
<h4
class="has-text-weight-bold is-size-1" style="box-shadow:0.5rem
0 0 #FFC0CB, -0.5rem 0 0
#FFC0CB;background-color:#FFC0CB;color:white;padding:1rem"><a
class="navbar-item" href="/blog">1-ий рядок меню
"ІНФОРМАТИКА":</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf5klas.blogspot.com"
class="navbar-item">Інформатика 5 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf6klas.blogspot.com" class="navbar-item">Інформатика
6 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf7klas.blogspot.com" class="navbar-item">Інформатика
7 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf8klas.blogspot.com" class="navbar-item">Інформатика
8 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf9klas.blogspot.com"
class="navbar-item">Інформатика 9 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf10klas.blogspot.com"
class="navbar-item">Інформатика10 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://inf11klas.blogspot.com"
class="navbar-item">Інформатика 11 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://iktolymp.blogspot.com">ІКТ-олімпіади</a>
</h4>
<h4
class="has-text-weight-bold is-size-1" style="box-shadow:0.5rem
0 0 #EE82EE, -0.5rem 0 0
#EE82EE;background-color:#EE82EE;color:white;padding:1rem"><a
class="navbar-item" href="/blog">2-ий рядок меню
"АЛГЕБРА":</a>
<a class="button is-warning
is-fullwidth" target="_blank" rel="noopener
noreferrer" href="http://m5klas.blogspot.com/" class="navbar-item">Математика
5 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://arifmet6klass.blogspot.com/" class="navbar-item">Математика 6
клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://alg7klass.blogspot.com/"
class="navbar-item">Алгебра 7 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://alg8klass.blogspot.com/"
class="navbar-item">Алгебра 8 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://alg9klas.blogspot.com/"
class="navbar-item">Алгебра 9 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://alg10klas.blogspot.com/"
class="navbar-item">Алгебра 10 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://alg11klas.blogspot.com/"
class="navbar-item">Алгебра 11 клас</a></h4>
<h4 class="has-text-weight-bold
is-size-1" style="box-shadow:0.5rem 0 0 #DAA520, -0.5rem 0 0
#DAA520;background-color:#DAA520;color:white;padding:1rem"><p><a
class="navbar-item" href="/blog">3-ий рядок меню
"ГЕОМЕТРІЯ":</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://geom7klass.blogspot.com/" class="navbar-item">Геометрія 7
клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="https://geom8klas.blogspot.com" class="navbar-item">Геометрія 8 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://geom9klas.blogspot.com/"
class="navbar-item">Геометрія
9 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://geom10klas.blogspot.com/"
class="navbar-item">Геометрія 10 клас</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://geom11klas.blogspot.com/"
class="navbar-item">Геометрія
11 клас</a></h4>
<h4
class="has-text-weight-bold is-size-1" style="box-shadow:0.5rem
0 0 #C0C0C0, -0.5rem 0 0
#C0C0C0;background-color:#C0C0C0;color:white;padding:1rem"><a
class="navbar-item" href="/blog">4-ий рядок меню
"Математична довідка":</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://teoria0432.blogspot.com//" class="navbar-item">Теорія чисел</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer" href="http://mahikquatrat.blogspot.com/"
class="navbar-item">Магічні квадрати та трикутники</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://trukytnuc.blogspot.com/2014/04/"
class="navbar-item">Геометрія плоского трикутника</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://mahtklass.blogspot.com/2013/08/"
class="navbar-item">Формули скороченого множення</a>
<a
class="button is-warning is-fullwidth" target="_blank" rel="noopener
noreferrer"
href="http://mahtklass.blogspot.com/2013/09/blog-post_9393.html"
class="navbar-item">Банк квадратних рівнянь</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer" href="http://mahtklass.blogspot.com/2013/09/blog-post.html"
class="navbar-item">Банк квадратних нерівностей</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://teoria0432.blogspot.com/2017/02/blog-post_60.html"
class="navbar-item">Комбінаторика</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://teoria0432.blogspot.com/2017/02/blog-post_53.html"
class="navbar-item">Інваріанти</a>
<a
class="button is-warning is-fullwidth" target="_blank"
rel="noopener noreferrer"
href="http://olimpmath.blogspot.com/2017/03/"
class="navbar-item">Нерівності</a></h4>
</div>
<div
class="navbar-end has-text-centered">
<a
class="navbar-item"
href="https://www.facebook.com/groups/544697383003761"
target="_blank" rel="noopener noreferrer"
style="cursor:pointer">Група ліцею№ 7 в Фейсбуці
<div><svg
stroke="currentColor" fill="currentColor"
stroke-width="0" viewBox="0 0 512 512"
style="color:#3b5998" height="25px" width="25px"
xmlns="http://www.w3.org/2000/svg">
</svg></div></a></div></div>
</body>
</html>
Завдання 2. Cтворити, реалізувати,
протестувати веб-сторінку «Довідкова інформація про смартфони» на основі
таблиці.
Інструкція
для створення допоміжної веб-сторінки
на основі HTML-документів
1.Створити
папку з назвою «Довідкова інформація»
2.За
допомогою редактора БЛОКНОТ
створюємо HTML-документи
за
даним нижче кодуванням:
Інформація про 2-ий HTML-файл
Допоміжний HTML-файл має назву dovidka2.html
Цей HTML-файл
зберегти в папці: «Довідкова інформація»
Html-реалізація
у вигляді кодування:
<!DOCTYPE html>
<html lang="ukr-UA">
<head>
<title>Меню про марки смартфони</title>
</head>
<BODY bgcolr=”#00bb99” text=”#00000g”
link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>
<p> <a
href="index.html">Головна сторінка</a>
<p>Моделювання навігації на веб-сторінці та
її реалізація на допоміжній сайту
<P><Font size=40" color=”#000000”
face=”Arial, Times New Roman, Serif”>Заповніть таблицю-меню із правильними
гіперпосиланнями, вставити зображення смартфона у клітинки таблиці і змініть
колір тла комірок в таблиці</font>
<P><Font size="15"
color=”#000000” face=”Arial, Times New Roman, Serif”>
<table border="3" align=”left”
cellspacing=”2” cellpading=”1”
widht=”500”>
<caption
align=”midlle”> <P><Font size=40" color=”#abcdef”
face=”Arial, Times New Roman, Serif”> Фірми, що виробляють смартфони
</font></caption>
<tr>
<td align=”midlle” valign=”top” ” widht=”150" bgcolor="60ff00" height="97">
<a href="http://inf11klas.blogspot.com/"> SAMSUNG - налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум користувачів смартфонів SAMSUNG <img src ="images1.png"
alt= "Вставити зображення смартфона та пропишіть в кодах назву цього
зображення"></td>
<td
align=”left” valign=”bottom” ”
widht=”125"
bgcolor="11ff00" height="87"><a
href="http://inf10klas.blogspot.com/"> APPLE -
налаштувати посилання на сайт цієї фірми
</a><p>Відвідай форум користувачів смартфонів APPLE <img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"> </td>
<td
align=”right” valign=””midlle” ”
widht=”105" bgcolor="ddff00" height="77"><a
href="http://inf9klas.blogspot.com/"> SONY - налаштувати посилання на сайт цієї фірми
</a><p>Відвідай форум користувачів смартфонів SONY<img src ="images1.png" alt=
"Вставити зображення смартфона та пропишіть в кодах назву цього
зображення"></td>
<td align=”right” valign=””midlle” ” widht=”105"
bgcolor="ddff00" height="77"><a
href="http://inf18klas.blogspot.com/"> HUAWEI -налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум
користувачів смартфонів HUAWEI<img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"> </td>
</tr>
<tr>
<td bgcolor="55ff00"
height="57"> <a href="news2.html"> XIAOMI -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів XIAOMI <img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"></td>
<td bgcolor="eeee00"
height="87"> <a href="news3.html"> MEIZU- налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум
користувачів смартфонів MEIZU<img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення"></td>
<td bgcolor="bbbb00"
height="97"> <a href="news4.html"> ASUS -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів ASUS<img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"></td>
<td bgcolor="bbaa00"
height="97"> <a href="news5.html">FLY -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів FLY <img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"></td>
</
tr>
<tr>
<td
bgcolor="55fab0" height="77"> <a
href="http://matryza.blogspot.com/2014/05/"> ALCATEL - налаштувати посилання на сайт цієї
фірми </a> <p><img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення">
</td>
<td bgcolor="00ff99"
height="67"> <a
href="http://vinnmatolymp.blogspot.com/"> ZTE- налаштувати посилання на сайт цієї фірми
</a> <p><img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення"></td>
<td
bgcolor="ggff00" height="57"> <a
href="http://fun0432.blogspot.com/2017/02/blog-post_10.html">
Android - налаштувати посилання на сторінку у Вікіпедеї</a>
<p><img src ="images1.png" alt= "Вставити зображення
смартфона та пропишіть в кодах назву цього зображення"></td>
<td
bgcolor="ggdd00" height="57"> <a
href="http://fun0432.blogspot.com/2017/02/blog-post.html">iOS
-налаштувати посилання на сторінку у Вікіпедеї</a> <p><img src ="images1.png"
<img src ="images1.png" alt= "Вставити зображення смартфона
та пропишіть в кодах назву цього зображення"></td>
</tr>
</table>
</body>
</html>
Завдання 3. Cтворити, реалізувати,
протестувати веб-сторінку «Довідкова інформація про операційні системи для смартфонів» на основі списків.
Інструкція
для створення допоміжної веб-сторінки
на основі HTML-документів
1.Створити
папку з назвою «Довідкова інформація»
2.За
допомогою редактора БЛОКНОТ
створюємо HTML-документи
за
даним нижче кодуванням:
Інформація про 3-ий HTML-файл
Допоміжний HTML-файл має назву dovidka3.html
Цей HTML-файл
зберегти в папці: «Довідкова інформація»
Реалізація
кодування цього HTML-файлу
<html>
<head>
<title>Допоміжний файл. ОС смартфонів</title>
</head>
<body
style="background: silver">
<p>Моделювання навігації на веб-сторінці та її реалізація на службовій сторінці сайту
<p>
<a href="index1.html">Головна сторінка</a>
<p>Довідник
<p><p>Операційні
системи смартфонів
<h1>Відомі
операційні системи для смартфонів</h1>
<ol>
<li>
Операційні системи
<ol>
<li>Android</li>
<li>IOS</li>
<li>Bada</li>
<li>Windows Mobile
</li>
<!-- додайте елементи вкладеного списку сюди -->
</ol>
</li>
<li> Windows
Phone</li>
<li>Tizen</li>
<li>BlackBerry OS</li>
<li>Firefox OS</li>
<li>Maemo</li>
</ol>
<p><p>Розмістіть зображення логотипу операційної систем Android на веб-сторінці з гіперпосиланням насторінку Вікіпедії
<p>
<p><a href = "index1.html" >
<img src ="images2.png"
alt="Повернутися на
сторінку Вікіпедії"
title ="Натисність на зображення, що повернутися на Головну
сторінку"></a>
<p><p>Розмістіть
зображення логотипу IOS операційної системи із Інтернету на веб-сторінці
<img src
="
https://nuschool.com.ua/textbook/mathematics/1klas_4/1klas_4.files/image480.jpg"
alt="Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Результати виконання практичної частини надіслати у вигляді скріншотів
створених веб-сторінок на електронну адресу: vinnser@gmail.com
