26.09.2021 - 30.09.20 Шрифтове оформлення текстових блоків веб-сайту.

 

26.09.2021 - 30.09.2021

Конспект уроку для учнів

 

Тема: Шрифтове оформлення текстових блоків веб-сайту.

Створення текстових блоків на веб-сторінці.

 

Теоретична частина

 "Тестування учасника  ІКТ-олімпіади"

Запитання 1. Як можна виділяти окремі частини тексту на веб-сторінці?

Відповідь:  Для виділення окремих частин тексту можна скористатися наступними стилями:

Y - жирний (Bold);

I - курсив (Italic);

U - з підкресленням (Underline);

S - з перекресленням (STRIKE);

Нижче наведена таблиця команд виділення тексту.

Текст, що відображається

Зразок запису в форматі HTML

Виділення тексту жирним шрифтом

Виділення <b> тексту </b> жирним шрифтом

Виділення тексту курсивом

Виділення <i> тексту </i> курсивом

Виділення тексту підкресленням

Виділення <u> тексту </u> підкресленням

Виділення тексту перекресленням

Виділення <strike> тексту </strike> перекресленням

Для зміни розміру текстових символів скористайтеся командами:

<FONT SIZE = +-i > </FONT>, де i в межах від 1 до 7 відносно початкового розміру букв.

Крім того, можна збільшити або зменшити висоту шрифту за допомогою команд <BIG> і <SMALL>. Ці команди використовуються в парі з командами </BIG> і </SMALL>.

Ще дві пари команд:

<SUB> і </SUB> - підрядковий індекс, наприклад, H₂SO₄.

<SUP> і </SUP> - надрядковий індекс, наприклад, (a² - b²) = (а - b)(а + b).

Всі вищенаведені команди визначають фізичне форматування символів. Ви задаєте конкретну зміну характеристик символів.

Крім того, є логічне форматування символів - Ви даєте опис, а броузер вирішує як змінювати характеристики. Загалом, хто довіряє броузеру - користуйтеся цими командами. Вони виглядають таким чином:

<CITE>Цитата</CITE>

<EM>Особливо важливий текст</EM>

<STRONG>Сильне виділення тексту</STRONG>

<KBD>Текст, введений користувачем</KBD>

<CODE>Лістинг програми</CODE>

<SAMP>Послідовність літералів</SAMP>

<VAR>Ім’я змінної</VAR>

Броузер користувача сам вибирає шрифт, якщо Ви його конкретно не задали в описі сторінки. Якщо в сторінці заданий шрифт, якого немає у користувача, то Ви можете задати список, що складається з декількох шрифтів, і броузер вибере самий лівий, а якщо його в системі немає, то наступний і т. д. Якщо жодного з шрифтів немає, броузер вибирає свій шрифт.

Шрифт задається за допомогою команди: FONT FACE

 

Запитання 2. Як опрацьовувати межі таблиці?

Відповідь:      Таблиця з нестандартними відстанями між осередками і кордоном.

Отримавши певні навички роботи з кордоном таблиці, ви можете приступати до управління її відображенням. За допомогою атрибута frame будемо керувати відображенням зовнішнього кордону, а за допомогою атрибуту rules – внутрішніми кордонами таблиці.

Атрибут frame може приймати такі значення:

above – відображається тільки верхня лінія кордону;
below – видно тільки нижня лінія кордону;
box – відображається зовнішній кордон таблиці;
border – видно зовнішня межа таблиці (аналогічно box);
hsides – відображаються тільки горизонтальні лінії кордону;
lhs – видно тільки ліва лінія кордону;
rhs – відображається тільки права лінія кордону;
void – зовнішня межа таблиці не відображається;
vsides – видно лише вертикальні лінії кордону.

Frame і rules – це нові атрибути в HTML, вони підтримуються тільки останьними версіями браузерів.

Атрибут rules може приймати такі значення:

all – кордон відображається навколо кожної клітинки;
cols – видно лише вертикальні кордону між стовпцями;
groups – відображаються тільки вертикальні межі між групами стовпців або горизонтальні межі між групами рядків;
none – межі між осередками не відображаються;
rows – видно тільки горизонтальні межі між групами рядків.

 

Запитання 3. Як вбудовуються зображення на веб-сторінку?

Відповідь. Для вбудовування зображень в HTML-документ застосовується елемент IMG. Він має обов’язковий атрибут src, значенням якого має бути адреса вбудованого зображення.
Найпростіший варіант запису для включення картинки: <IMG src=”image.jpg”>. При такому запису розмір картинки на екрані буде відповідати її реальному розміру.

У лістингу продемонстрований найпростіший варіант вбудовування картинки.
<html>

<head>

<title>Вбудовування зображення</title>

</head>

<body>

<img src=”image.jpg”/>

</body>

</html>

Запитання 4. Як вбудовується гіперпосилання на веб-сторінку?

Відповідь: Між тегами <A> і </ A> розташовується саме текст посилання.
Адреса документа для переходу записується в елементі A як значення атрибута href. Таким чином, переміщення по сайту стає зручним, легким і прозорим для користувача. Йому абсолютно все одно, де знаходиться документ, на який вказує посилання, він бачить тільки текст опису. У лістингу представлений приклад створення посилання на HTML-сторінку і малюнок.

<html>
<head>
<title> Посилання </title>
<body>
<a href=”aboutme.html”> Про мене </ a> <br />
<a href=”myfoto.jpg”> Моє фото </ a>
</body>
</html>

 

 

Практична частина

 

Практична робота. 

 

Мова розмітки HTML для кодування таблиці.

Приклад кодування властивостей  таблиці

на веб-сторінці

 мовою розмітки HTML

 

Завдання 1. Набрати в текстовому редакторі Блокнот наступний текст html-кодів і зберегти його у файл з розширенням html.

 

 Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.

4) Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.

5)Зберегти даний документ під Іменем index1.html на Робочий стіл.

6) Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці

7) надіслати скріншот утвореної веб-сторінки на e-mail:  vinnser@gmail.com

 

 

Кодування простої HTML-таблиці розміром 3х3,

яка складається з трьох стовпців і трьох рядків

<html>

<head>

<title> Проста HTML-таблиця </title>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок таблиці</font>.

<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”>   Це заголовок таблиці </caption>

<tr>

 <td  align=”midlle”  valign=”top” ” widht=”150"  bgcolor="60ff00" height="97"> Заголовок 1 </td>

 <td align=”left”  valign=”bottom” ” widht=”125"  bgcolor="11ff00" height="87">Заголовок 2 </td>

 <td align=”right”  valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77">Заголовок 3</td>

 </tr>

<tr>

<td bgcolor="55ff00" height="57"> Осередок 2×1 </td>

<td bgcolor="eeee00" height="87"> Осередок 2×2 </td>

<td bgcolor="bbbb00" height="97"> Осередок 2×3 </td>

 </ tr>

<tr>

<td  bgcolor="55fab0" height="77"> Осередок 3×1 </td>

 <td  bgcolor="00ff99" height="67"> Осередок 3×2 </td>

<td  bgcolor="ggff00" height="57"> Осередок 3×3 </td>

 </tr>

 </table>

 </body>

</html>

 

Завдання 2. Завантажте програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення. Закодуйте в кожну комірку таблиці гіперпосилання на навчальні та освітні сайти.

 

Результат виконаної практичної роботи це файли( із результатами виконання програм) надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)

Додаткові завдання на розвиток кмітливості

20.09. 2021-26.09.2021 Багатовимірна структура веб-сайтів

20.09.2021-26.09.2021 

Конспект уроку для учнів

Тема: Багатовимірна структура веб-сайтів. Засоби автоматизації опрацювання інформації на веб-сторінках. Створення тренувального тесту   в  GoogleForms

Теоретична частина

 

Подивись презентацію про Веб-ресурси

Опрацюємо багатовимірну структуру веб-сайтів на прикладі онлайн додатку  Google Forms

 Спосіб створення тесту в Google Forms

Практична частина

Практична робота в  GoogleForms

Завдання 1.  Створити  тренувальний тест на платформі GoogleForms  за відповідним зразком і налаштувати його автоматичну перевірку із занесенням результатів у  електронну таблицю

 

Зразок «Тренувальний тест» для заповнення GoogleForms  

1. Що таке ІНФОРМАЦІЯ?

Інформація - це роз'яснення, виклад, запис в конспекті;
Інформація - це атрибут розумних істот, які вміють виробляти факти і досвід;
Інформація - це спостереження і фіксування міркувань з наступним повідомленням живим істотам про свої спостреження;
Інформація - це сукупність деяких відомостей, повідомлень, даних, знань, поданих у певному вигляді.

2. Що таке інформаційні процеси?

Сукупність апаратних та програмних засобів, які забезпечують автоматизацію, збирання, накопичення, систематизацію, зберігання, подання, передавання інформації;
Послідовна зміна стану та(або) уявлення про інформацію в результаті дій, які з нею можна виконати: вимірювання, зберігання, опрацювання, передавання,захист інформації тощо;
Сукупність засобів і методів керування пошуку інформації в глобальній мережі про стан об'єкта, явища або процесу;
всі попередні пункти хибні.

3. ЯКА СУМА ОЧОК НА УСІХ ГРАННЯХ ГРАЛЬНОГО КУБИКА?

21;
22;
20;
всі попередні пункти хибні.

4. Яка найбільша сума очок на трьох гранях грального кубика, які мають спільну вершину?

13;
14;
15;
всі попередні пункти не вірні.

5. Яка найменша сума очок на трьох гранях грального кубика, які мають спільну вершину?

8;
7;
6;
всі попередні пункти не вірні.

6. Два гравці виклали усі кісточки доміно за правилами гри. На одному кінці "ланцюжка" перший гравець поклав останню кісточку з порожньою клітинкою. Скільки очок на другому кінці "ланцюжка"?

3;
1;
порожня клітинка;
всі попередні пункти не вірні.

7. Уявіть собі, що ви закінчили грати в доміно, що можна сказати про кількість очків на кінцевих кісточках доміно?

однакова кількість очок;
не однакова кількість;
сума очок на обох кінцях непарна;
всі попередні пункти не вірні.

8. На дошці записано 2 одиниці і 2 двійки. За хід дозволяється стерти дві будь-які цифри, а, якщо вони однакові, написати двійку, а якщо різні – одиницю. Якщо остання цифра, що залишилася на дошці одиниця, виграв перший гравець, якщо двійка — то другий. Чому у цій грі завжди перемагає гравець, який не розпочинає гру?

Непарність кількості одиниць на дошці після кожного ходу не змінюється. Оскільки спочатку одиниць було парне число, то після останнього ходу на дошці не може залишатися одна (непарне число!) одиниця. Тому виграє другий гравець.
Парність кількості одиниць на дошці після кожного ходу не змінюється. Оскільки спочатку одиниць було парне число, то після останнього ходу на дошці не може залишатися одна (непарне число!) одиниця. Тому виграє другий гравець.
Непарність кількості двійок на дошці після кожного ходу не змінюється. Оскільки спочатку одиниць було парне число, то після останнього ходу на дошці не може залишатися одна (непарне число!) одиниця. Тому виграє другий гравець.
Парність кількості двійок на дошці після кожного ходу не змінюється. Оскільки спочатку одиниць було парне число, то після останнього ходу на дошці не може залишатися одна (непарне число!) одиниця. Тому виграє другий гравець.

9. Двоє по черзі розламують шоколадку 6x8. За один хід дозволяється зробити прямолінійний розлом будь-якої частини вздовж заглиблення. Програє той, хто не зможе зробити хід. Хто забезпечить собі перемогу?

ніхто з гравців не переможе;
гравець, що робить парні ходи;
починаючий гравець;
всі попередні пункти хибні.

10. Маємо три купи каменів: в першій – 10, в другій – 15, в третій – 20. Грають двоє. За хід дозволяється розділити будь-яку купу на дві менші; програє той, хто не зможе зробити хід. Хто програє у цій грі?

всі наступні пункти не вірні;
гравець, який робить парні ходи, програє;
гравець, який розпочинає гру, виграє;
гравець, який розпочинає гру, програє.

11. Двоє по черзі кладуть п'ятаки на круглий стіл, причому так, щоб вони не накладались один на одного. Програє той, хто не може зробити хід. Хто перемагає при найкращій грі?

гравець, який розпочинає гру;
гравець, який не розпочинає гру;
ніхто не переможе;
всі попередні пункти хибні.

12. Ромашка має а) 12 пелюсток; б) 11 пелюсток. За хід дозволяється відірвати або одну пелюстку, або дві, що ростуть поруч. Програє той, хто не може зробити ходу. Хто перемагає при найкращій грі?

тільки в першому пункті виграє починаючий;
В обох пунктах виграє перший гравець;
В обох пунктах виграє другий гравець;
тільки в другому пункті виграє починаючий.

 

Протестувати виконання цього тесту  і виправити помилки

 

Результат виконаної практичної роботи 

це гіперпосилання на  веб-сторінку в додатоку  Google Forms  із тестом( Тренувальний тест) надіслати вашому учителю на електронну скриньку: 

vinnser@gmail.com (Сергій Петрович)

Завдання на розвиток  кмітливості 

та винахідливості

 

Тестування знань з інформатики

Обeріть декілька варіантів відповідей у кожному запитанні

1.(1бал). Для створення текстової інформації, що  містить 2021 символ, варто використати такі текстові редактори:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint.

 

2.(1бал). Для створення   електронної презентації, що  містить 221 слайд з анімаціями, варто використати такі редактори презентацій:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint.

 

3.(1бал). Для створення   електронної таблиці, що  містить 21 формулу для обчислення, варто використати такі середовища для електронних таблиць:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint.

 

 

4.(1бал). Для створення   електронного зображення, що  містить 21 шаблон  для малювання, варто використати такі середовища для опрацювання електронних зображень:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint.

 

5.(1бал). Для створення   електронного алгоритму, що  містить 21 команду розгалуження та повторення для обчислення, варто використати такі середовища для опрацювання та реалізації алгоритмів мовою програмування:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint.

 

6.(1бал). Для створення   електронної скриньки, що  містить 21 електронну хмару з додатками, варто використати такі служби для електронного листування:

А. Блокнот;     Б.WordPad;     В. MS Word;  Г. MS Power Point;    Ґ. Calc;  Д. MS Excel;    Е. BDV Notepad; Є. Writer,  Ж. Thonny;    З. Math;      И. Draw;      І. Base;     Ї.   Impress;  K. MS Access; Л. Scratch; M. Paint; Н. Gmail.

 

 

7.(1бал). Які властивості електронного символу в тексті  можна відформатувати у офісному додатку текстового редактора:

А. Напівжирне накреслення;     Б.Підкреслення;     В. Колір тексту;  Г. Зміна шрифту;    Ґ. Розмір шрифту;  Д. Колір виділення шрифту;    Е. Стиль написання; Є. Колонтитул,  Ж. Міжсимвольний інтервал;    З. Орієнтація;      И. Табуляція;      І. Макет слайда;     Ї.   Групування;  K. Анімація; Л. Наведення сітки;  M. Контури фігури;  Н. Створення списку.

 

 

8.(1бал). Які властивості електронної клітинки в таблиці  можна відформатувати у офісному додатку табличного редактора:

А. Формат клітинки;     Б.Висота клітинки;     В. Колір тексту в клітинці;  Г. Зміна адреси або назви клітинки;    Ґ. Ширина клітинки;  Д. Колір заливки клітинки;    Е. Колір контуру клітинки; Є. Колонтитул клітинки,  Ж. Клітинковий інтервал;    З. Орієнтація клітинки;      И. Табуляція клітинки;      І. Макет клітинки;     Ї.   Групування клітинок;  K. Анімація клітинок; Л. Наведення захисту клітинки;  M. Невидимість формул в клітинці;  Н. Правило виділення клітинки.

 

 

 

 

 

9.(1бал). Які властивості об’єктів електронного слайда в презентації  можна відформатувати у офісному додатку редактора презентації:

А. Висота слайда;     Б. Ширина слайда;     В. Колір тексту на слайді;  Г. Зміна шрифту заголовку слайда;    Ґ. Розмір шрифту заголовку слайда;  Д. Колір виділення заголовку слайда;    Е. Анімаційний перехід слайда; Є. Макет слайда;  Ж. Міжслайдовий інтервал;    З. Орієнтація слайда;      И. Табуляція на  слайді;      І. Макет схеми на слайді;     Ї.   Групування зображень на слайді;  K. Анімація тексту на слайді; Л. Наведення сітки на слайді;  M. Наведення напрямних ліній на слайді; Н. Створення гіперпосилання на слайді.

 

10.(1бал). Які властивості об’єктів електронного листа можна відформатувати у службі електронного листування:

 

А. Додати у графу «Кому» декілька електронних адрес;     Б. Написати тему листа трьома різними мовами;     В. Прикріпити до листа декілька файлів різних форматів;  Г. Змінити  адреси в гіперпосилання у змісті листа;    Ґ. Вставити таблицю в електронний лист;  Д. Вставити зображення в електронний лист;    Е. Змінити колір заливки тексту у змісті листа;  Є. Створити колонтитули в листі,  Ж. Змінити інтервал між усіма символа у тексті;    З. Змінити орієнтацію тексту у листі;      И. Змінити табуляцію у листі;      І. Змінити макет листа;     Ї.   Створити групування листів за адресатами;  K. Змінити анімацію тексту у листі ; Л. Наведення захисту даних у листі;  M. Невидимість тексту у листі;  Н. Змінити правило виділення спаму у листі.

 

11. Продовжити тестування в на основі Google-Forms