10 клас

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




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

Вправа 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;
}

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

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

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


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





Знайомство з 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
}


Уроки:

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 Спершу рекомендації: починати із сторінки, де задачі систематизовані за складністю та типом алгоритму. Наважуся навести приклади моїх розв'язків, не сумніваюся, що ваші будуть не гіршими. Роблю це для того, щоб запросити усіх охочих перебороти свої страхи та невпевненість, подивіться, як це легко.  Курс олімпійця для початківців Розв'язки задач
    Докладніше

    Майстер-клас у Скретч

    Зображення
    У середовищі Скретч можна не тільки малювати, слухати музику, - пробуйте створювати власні тести, ігри та анімацію. Пропоную майстер-клас: створення гри "Муріо". Для відкриття проекту перейдіть за посиланням
    Докладніше

    Чудові списки

    Зображення
     Тема масиви в 9 класі зараз хвилює всіх учнів, багато практичних, є питання. Вирішила зібрати корисні посилання та алгоритми Цікаві задачки на використання структури даних "список" Дякую автору презентації (ресурс наурок). Зазвичай я використовую інший спосіб введення елементів, але все працює, отже ДЯКУЮ. Задачі з e-olymp 5 методів сортування масиву Сортування методом бульбашки з виведенням проміжних результатів.  Спочатку створюється масив випадкових чисел довжини n, значення елементів - цілі числа від 1 до 12 (оцінки).
    Докладніше