10 клас

0952036715
batakazina_t@ukr.net
batakazina.t.v@gmail.com
Сайт із заготовками завдань "Інформатика для всіх" https://sites.google.com/pu.org.ua/allinf?pli=1

Модуль "Веб технології"


Вправа CSS Створіть декілька файлів style.css, style1.css, style2.css, підключіть ці файли по черзі до вашого index.html тегом

<link rel="stylesheet" href="style2.css" >

Оберіть палітру кольорів на сайті https://incolorbalance.com/colorova-palitra-4512/
Скористайтеся різними палітрами в різних файлах стилів. Додайте стилі меню навігації.
Зразок файлу style.css
body {
font-family: Arial, San-Serif;
font-size: 85%;
background-color: #4D0C02;
}

h1,h2 {
color: #FEF4DB;
text-align: center;
}

p {
font-size: 20px;
line-height: 1.3em;
margin-top: 2.1em;
margin-bottom: 1;
margin-left: 15%;
margin-right: 15%;
color: #F8A86A;
}


Практична робота №11. Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання
Опис завдання в посібнику "Веб-технології" (с. 42)

Завдання полягає в тому, що ви робите одну сторінку index.html і копіюєте цей файл, надавши інші імена, які є в навігації

<!DOCTYPE html>
<html lang="uk">
<head>
<title>My site</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1> Main Header - My site </h1>
<h2> Sub Header  Home </h2>
</header>
<nav>
<ul>
<li> <a href="index.html"> Home </a></li>
<li> <a href="info.html"> About </a></li>
<li> <a href="gallery.html"> Gallery </a></li>
<li> <a href="form.html"> Contacts </a></li>
</ul>
</nav>
<footer>
<p>  Copyright 2025 </p>
</footer>
</body>
</html>




Практична робота №10. Інформаційна структура сайту.

Опис завдання у посібнику на с. 26

Додаткове завдання:
1) Створити організаційну діаграму за допомогою шаблону (створити - обрати тип орг. діаграма)
2) Зобразити блок-схему алгоритму Евкліда.
3) Створити інфографіку на тему "Навчання: основна мотивація та засоби"





Таблиці та списки на вебсторінках

1. HTML таблиці: туторіал з прикладом

https://www.freecodecamp.org/ukrainian/news/html-tablytsi-tutorial-z-prykladom/


2. Синтаксис списків.
https://w3schoolsua.github.io/html/html_lists.html







Практична


градієнти


Вправа Бандерогусак

Завдання. Змінити 6 параметрів елементів веб-сторінки: 
1) Розмір та колір шрифтаів заголовків
2) Колір тла сторінки та інформаційного елементу про гусака
3) Розмір та колір тіні
4) Фото гусака
5) Розмір та колір тексту параграфів
6) Вставити свій власний текст замість тексту-риби

Вправа 3. (три колонки)

Файл Index.html

<!DOCTYPE html>
<html lang="uk">
<head>
<title>Блокова верстка в 3 колонки</title>
<meta charset="utf-8">
<link href=css/style1.css rel="stylesheet">
</head>
<body>
<div class="container">
<div id="header1">Швидкість</div>
<div id="header2">Час</div>
<div id="header3">Шлях</div>
</div>
<div class = "container">
<div id="col1">
<font>Швидкість - це фізична величина, що відповідає відношенню переміщення тіла до проміжку часу, за який це переміщення відбувалося.</font>>
</div>
<div id="col2">
Час - одне з основних понять фізики і філософії, одна з координат простору-часу, вздовж якого протягнуті світові лінії фізичних (матеріальних) тіл.
</div>
<div id="col3">
Шлях - це відстань між двома точками, виміряна вздовж траєкторії руху матеріальної точки.
 </div>
 </div>
</body>
</html>

Файл style.css

#header1,#header2,#header3,#col1,#col2,#col3{
width:300px;
padding:5px;
margin-left:5px;
margin-top:2px;
float:left;
border:2px solid green;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
font-size:80%;
color:gray;
}

#col1,#col2,#col3,{
font-family:Times New Roman, Times, serif;
font-size:100%;
font-weight:normal;
color:black;
}
#header1 {background:838541;}
#header2 {background:008159;}
#header3 {background:006077;}
#col1 {background:#EBE0C5;}
#col2 {background:#BBE1C4;}
#col3 {background:#ADD0D9;}
.container{
clear:both;
}






Знайомство з JS
Вправа 1. Тест для перевірки навичок додавання (Вправа 5.4. Підручник. Основи веб-дизайну. О.Г.Пасічник)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
var s, i = 0
s=confirm ("2+2=4 ? " ) ;
if (s==true) { alert("Правильно!"); i++} else alert('Hi!') 
s=confirm ("2+3=6 ? " ) ;
if (s == false) { alert( "Правильно" ) ; i++} else alert("Hi!")
s=confirm ("2+4 = 6 ? " ) ;
if (s==true) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+2= ?", " " ) ;
if (s==4) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+3= ?"," " ) ;
if (s==5) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+4= ?"," " ) ;
if (s==6) {alert ("Правильно!"); i++} else alert("Hi!")
if (i>=5) alert ("чудово")
else if (i>=3) alert ("добре")
else alert ("погано")
alert ("Сума балів="+і)
</SCRIPT>
</BODY>
</HTML>

Вправа 2. Опрацювання події натиснення на кнопку (перегляд зображень)

Хід роботи
1. Створіть папку "Практична", в ній папку "Images"
2. Скачайте або намалюйте 9 зображень, дайте їм назви 1.jpg, 2.jpg, ... 9.jpg Перемістіть їх у папку "Images"
3. У папці "Практична" створіть файл photo.html, наберіть текст

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
   <script type="text/javascript">
     var photosCount = 9;
     var currentPhotoIndex = 1;
     function showNextPhoto() {
      currentPhotoIndex++;
      if(currentPhotoIndex>photosCount) {currentPhotoIndex=1;}
      var elem = document.getElementById("currentPhoto");
      elem.src = "images/" + currentPhotoIndex + ".jpg";
     }
    </script>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <h1 align="center"> Найщасливіші миті життя </h1>
<img id="currentPhoto" height="420" width="540" src="images/1.jpg" />
<button onclick="showNextPhoto()">Next</button>
 </body>
</html>

Вправа 3. Рухаємо м'яч по полю. Для перегляду розв'язку натисніть Ctrl+U

Практична вправа "Блокові та лінійні елементи" (HTML+CSS)

Файл index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div class="first_div">
   <h1>dkfjgdkfj</h1>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   <span class="first_span">   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
   </span>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
  <div class="second_div">
   Кожен елемент дів починається з нового рядка 
    <span class="second_span">
      Елемент Спан
    </span>
    продовження елементу дів
  </div>
      <div class="fird_div"> 
          <img src="1.jpg"style="float:left;width:142px;height:142px;">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange

      </div>
  <div class="photo-block"><img src="2.jpg" width="60" ></div>
  <div class="photo-block"><img src="1.jpg"></div>
  <script src="script.js"></script>
</body>

</html>
Файл style.css
.first_div{
  background:#00fffb;
  }

.first_div,.second_div{
  margin:30px;
  margin-top:2px;
  margin-bottom:0px;
  padding-left:34px;
  padding-right:34px;
  padding-top:20px;
  padding-bottom:20px;
  height:70%;
}
.second_div{
  background:yellow;
  height:120px;
   }
.fird_div{
  margin-top:20px;
  margin-right:20px;
  padding:24px;
 border: thick double #32a1ce;
   }
.first_span{
  background:skyblue;
}
.second_span{
  background:#888ff2
}
img {
  width: 60 px;
  margin-left:8px;
  margin-top: 10px;
  margin-right:10px;
  border-radius:20px;
} 
.photo-block{
  text-align:center;
 }


ПРАКТИЧНА ВПРАВА "БЛОКОВА ВЕРСТКА"

Завдання: 1) Заповнити блоки контентом на тему "Безпечне навчальне середовище" (текст плюс зображення) 2) змінити розміри зображень 3) видалити overflow: auto; зі стилю третього блоку, продемонструвати результат

Файл index.html

<!DOCTYPE html>

<html>


<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>replit</title>

  <link href="style.css" rel="stylesheet" type="text/css" />

</head>


<body>

 <div class="first_div">

   <h1>dkfjgdkfj</h1>

   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

   <span class="first_span">   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 

   </span>

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

  <div class="second_div">

   Кожен елемент дів починається з нового рядка 

    <span class="second_span">

      Елемент Спан

    </span>

    продовження елементу дів

  </div>

      <div class="fird_div"> 

          <img src="1.jpg"style="float:left;width:142px;height:142px;">

        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange


      </div>

  <div class="photo-block"><img src="2.jpg" width="120" ></div>

  <div class="photo-block"><img src="1.jpg"></div>

  <script src="script.js"></script>

</body>


</html>

Файл style.css

 .first_div{

  background:#00fffb;

  height: 130 px;

  }


.first_div,.second_div{

  margin:30px;

  margin-top:2px;

  margin-bottom:0px;

  padding-left:13px;

  padding-right:34px;

  padding-top:20px;

  padding-bottom:20px;

  height:50%;

  

}

.second_div{

  background:yellow;

  height:130px;

   }

.fird_div{

  margin-top:20px;

  margin-right:20px;

  padding:24px;

 border: thick double #32a1ce;

  overflow: auto;

   }

.first_span{

  background:skyblue;

}

.second_span{

  background:#888ff2

}

img {

  width: 160px;

  margin-left:8px;

  margin-top: 10px;

  margin-right:10px;

  border-radius:20px;

} 

.photo-block{

  text-align:center;

 }

ПРАКТИЧНА ВПРАВА "ТАБЛИЦІ ТА СПИСКИ"

<ul>
        <li>  Перший пункт </li>
        <li>  Другий пункт </li>
        <li>  Третій пункт </li>
  </ul>

 <!DOCTYPE html>
  <html>
      <head>
        <title> Маркований список </title>
      </head>
      <body>
        <hr>
        <p>З якого мультфільму наступні персонажі?</p>
          <ul>
            <li> Чебурашка </li>
            <li> Крокодил Гена </li>
            <li> Шапокляк </li>
            <li> Щур Лариса </li>
          </ul>
        <hr>
      </body>
  </html>

<ol>
        <li>  Перший пункт </li>
        <li>  Другий пункт </li>
        <li>  Третій пункт </li>
  </ol>

<table>
  <tr>
    <td>Комірка 1</td>
    <td>Комірка 2</td>
    <td>Комірка 3</td>
  </tr>
  <tr>
    <td>Комірка 4</td>
    <td>Комірка 5</td>
    <td>Комірка 6</td>
  </tr>
</table>

Практична вправа "Знайомство з CSS"


Практична вправа "Заголовок та абзац (вірш)" (HTML+CSS)

Файл index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="не знаю" />
</head>

<body>
  <h1> Сергій Жадан</h1>
  <p>
 Добре, добре, знищуй листи… <br>
Тому що ніколи тебе не вирвеш…<br>
Перші дні листопада<br>
Птах уночі забивається до кімнати…<br>
Можливо, я просто не вмію передати все це…<br>
     </p><p>
Що вона потім робила, куди пішла…<br>
Навіть якби ти покинула ті місця…<br>
Що ти будеш згадувати про ці часи?<br>
Коли вона повернулась…<br>
    </p>
  <p>
    Що ти будеш згадувати про ці часи?<br>
Адже пам’ять змиває всі голоси,<br>
адже пам’ять не пам’ятає жодних імен, жодних назв,<br>
але ти все одно згадуй, згадуй про кожного з нас.<br>
  </p><p>
Згадуй про нашу закоханість у твоє лице,<br>
навіть якщо тобі це не подобалось – згадуй про це,<br>
навіть якщо ти не вірила в серйозність наших хвороб,<br>
навіть якщо не сумнівалась у марності наших спроб,<br>
 </p><p>
навіть якщо не зможеш згадати наших імен,<br>
і якщо тебе завжди дратував колір наших знамен,<br>
мова наших освідчень,<br>
біографії наших святих,<br>
кількість у наших будинках зброї, вина і книг.<br>
  </p>
 </body>

</html>

Файл style.css
p{
  padding:4px;
  margin:100px;
  color:yellow;
  font-family:verdana;
}
h1{
  color:#852020;
}
body{
  background:#5ACFCB
}





Мультимедійні та гіпертекстові документи

 Тестування:


Бази даних

10-Б підсумковий тест по БД

10-А підсумковий тест по темі "Бази даних"

Практична робота №8. Запити на вибірку даних



"Табличний процесор. Розв'язування задач з різних предметних галузей":

Задача:
У класі є 20 учнів. Їхні оцінки за контрольну роботу з математики наведені в таблиці.

1. Визначте середній бал, медіану та моду.


2. Порахуйте відсоток учнів, які отримали бал вище середнього.


3. Побудуйте діаграму, що відображає кількість учнів за різними інтервалами балів (наприклад: 1-3, 4-6, 7-9, 10-12).




Підсумковий тест 10-Б





Уроки:

1 Інструктування з безпеки життєдіяльності та правил поведінки під час роботи в комп’ютерному класі.

2.  Інформаційні системи у сучасному суспільстві

3. Інформаційна безпека. Загрози при роботі в Інтернеті і їх уникнення
4. Практична робота №1. Навчання в Інтернеті. Знайомство з популярними українськими освітніми онлайн-платформами.

Розділ 2.

Комп'ютерне моделювання об'єктів і процесів. Комп'ютерний експеримент


https://sites.google.com/site/lutskschool1yasenchuk/materiali-do-urokiv/10-klas/urok-9-1

Практична робота №6. Розв'язання задач з різних предметних галузей

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

https://docs.google.com/spreadsheets/d/1fl9eDVkP1sGlp-UWsfWQRJug_NNx4KnY4_bNElcVusM/edit?usp=sharing

Завдання 2. Нарахування заробітної плати. Виконати обчислення за вхідними даними, поданими в таблиці за посиланням (для редагування зробіть собі копію таблиці)

https://docs.google.com/spreadsheets/d/1LiKUiUpTBVWpdCJ80JD4pmdWazw9DLmSL1C9USN5F0I/edit?usp=sharing

 Розділ "Бази даних"

Підручник Руденко скачати

Підручники

Завдання на літо: 

пройти безкоштовний курс он-лайн на платформі PROMETHEUS

назва курсу "Lviv IT School:114 Основи Web UI розробки"

Матеріали до уроків:

Відеоуроки "Основи веб-розробки" 

1) Знайомство з HTML | Основи веб-розробки (EdEra)
2) Структура веб-сторінки. Блок head та body | Основи веб-розробки
3) Детальніше про поширені теги | Основи веб-розробки
4) Базове використання посилань та зображень | Основи веб-розробки
5) Поняття стилів | Основи веб-розробки
6) Винесення стилів в окремий блок. Поняття та базовий приклад селекторів | Основи веб-розробки
7) Блочні та лінійні (рядкові) елементи | Основи веб-розробки

Лекції курсу "Створення динамічних веб-сайтів" (англ.)

http://cs75.tv/2010/fall/

Довідник HTML

Якщо ви відвідували курси і є продвинутим у галузі веб-розробки або хочете таким стати, зазирніть СЮДИ: https://uptodate.frontendrescue.org/

Оф-лайн редактори: відеоурок; https://youtu.be/f65Q5V4rq5c
Завантажити Sublime   http://www.sublimetext.com/3

Уроки від академії "ШАГ" Creating web pages using HTML 5 and CSS 3

Додаткові матеріали та ресурси


Історія інтернету: 
Історія вебу: 
Про W3C: 
Ресурс, де зібрано всі новини у світі веб-розробки:
Як працює браузер(ru):
Як працює DNS:
Для перевірки підтримки браузером тих чи інших можливостей і стандартів існують спеціальні ресурси. Найбільш відомі:
Современный учебник JavaScript http://learn.javascript.ru/

    Матеріали до олімпіади з ІТ-технологій



    Коментарі

    Дописати коментар

    Популярні дописи з цього блогу

    Початок роботи на e-olimp

    Зображення
     Всім моїм учням хочу побажати міцного здоров'я. Сама перемагаю хворобу і дякую за прекрасні побажання одужання, що дають мені сили. Оскільки в цьому році змінилися форма та стиль навчання, учні 7-9 класів мали можливість через Google classroom долучитися до вивчення основ алгоритмізації засобами мови програмування Python. Разом з тим, не можна забувати надбання минулих років, коли ми знайомились з візуальним об'єктно-орієнтованим середовищем Lazarus.  Всі ці думки, а також успіхи учнів у засвоєнні матеріалу змусили мене саму працювати, мабуть тепер наступним кроком мотивації та розвитку є розв'язування задач на сайті e-olimp Спершу рекомендації: починати із сторінки, де задачі систематизовані за складністю та типом алгоритму. Наважуся навести приклади моїх розв'язків, не сумніваюся, що ваші будуть не гіршими. Роблю це для того, щоб запросити усіх охочих перебороти свої страхи та невпевненість, подивіться, як це легко.  Курс олімпійця для початківців Розв'язки задач...
    Докладніше

    Тиждень безпеки в Інтернеті

    6 клас 1) Повторення правил безпеки в Інтернеті (презентація) Безпечний інтернет.pptx https://youtu.be/VWKWM23fdg0?si=qiUiCGyfEelOPzm- 2) Виконання інтерактивних вправ на знання безпеки в Інтернеті Вправа-пазл   Вікторина "Безпечний Інтернет"       переглянути відео та записати відповіді на питання безпечно або ні Понеділок, 3 лютого, 2 урок 6-А  та 4 урок 6-Б, 25 кабінет 7 клас 1) "Шахраям це подобається" (відео) https://drive.google.com/drive/folders/1t1czW_rpxe4z8U2gNcDuRLEOUZH-xP6u Після перегляду відео дайте відповідь на запитання: що саме подобається шахраям і чому? 2) Виконання вправ на знання безпеки в Інтернеті Для розігріву:  https://learningapps.org/display?v=pb6rg66at21 Колекція вправ:  ttps://learningapps.org/display?v=ppsyqihit20 Вівторок, 4 лютого, 2 урок 7-В, 4 урок 7-Б, 6 урок 7-А 25 кабінет, 15 кабінет (Сидорчук В.В., Аністратенко Т.В.) 8 клас гра "Майстер кібербезпеки" Монетка Секрети створення паролів від Ремуса Люпина Інтерактивна ...
    Докладніше