10 клас


Сайт із заготовками завдань "Інформатика для всіх" https://sites.google.com/pu.org.ua/allinf?pli=1
Сайт "Вибірковий курс. Графчний дизайн".  переглянути
Посібник. Графічний дизайн. Модуль для учнів 10-11 класів (Рівень стандарту). Автор: В.О.Потієнко переглянути


Завдання. 
1. NFT - що це? Навести приклади українського NFT
2. Що таке токен?
3. Тенденції в дизайні 2026

Технології опрацювання мультимедійних даних

Тестування (до 31.03):






Правила ергономічного розміщення об’єктів на вебсторінках 

Джерела:
Інформатика : підруч. для 10-11 кл. закл. загал. серед. освіти /  Й.Я.Ривкінд [та ін.]. — Київ: Генеза, 2018. 
Інформатика : підруч. для 8 кл. загальноосвіт. навч. закл. / Й.Я.Ривкінд [та ін.]. — Київ: Генеза, 2025. 
Ергономіка (грец. έργος — праця, νώμος — закон) — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.

Ергономічний сайт — це сайт, який забезпечує для відвідувача необхідні зручності, не викликає фізичної та психологічної втоми, не впливає на здоров’я та працездатність.
Складовою частиною ергономіки сайту є його інтуїтивно зрозумілий інтерфейс, зручність і простота у використанні для користувача, без необхідності проходження спеціального навчання.

Більшість шаблонів, які пропонують СКВ, створюються професіоналами. У них вже дотримано основні правила щодо розробки сайтів:
  • вміст (контент) лаконічний, поданий у зрозумілій для користувача формі;
  • посилання на вебсторінках помітні та однозначні;
  • навігація сторінками сайту зручна і проста.
Сторінки сайту, створені самостійно з використанням засобів HTML, PHP, MySQL та інших вебтехнологій, також мають відповідати основним правилам розробки сайтів та критеріям ергономічного розміщення матеріалів на сторінках сайту.
Критерії ергономічного сайту 
Оформлення вебсторінок
  • Дотримання єдиного стилю оформлення вебсторінок.
  • Вибір кольорів тла та тексту згідно з правилами колористики.
  • Читабельний шрифт, виділення заголовків кольором і більшим розміром шрифта.
  • Вирівнювання тексту за шириною.
  • Якісні графічні зображення з можливістю перегляду.
  • Уникнення використання подразнюючої анімації.
  • Текстові поля і зображення мають відступи один від одного та від країв таблиць.
Зміст контенту
  • Зазначення назви сайту на всіх вебсторінках.
  • Наявність заголовків на вебсторінках.
  • Розміщення найважливіших відомостей на початку вебсторінки.
  • Розміщення тексту максимум у три колонки.
  • Недопустимість використання горизонтальних смуг прокручування для перегляду сторінок.
  • Дублювання в нижньому колонтитулі меню, роміщення контактних даних власника ресурсу, відомостей про авторські права тощо.
Розташування контенту
  • Можливість переходу всіх вебсторінок на головну сторінку сайту.
  • Використання не більш ніж трьох рівнів вкладеності вебсторінок. 
  • Помітність і наочність меню і кнопок, усунення їх двозначності. 
  • Відмінність гіперпосилань від решти тексту.
  • Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).
  • Використання засобів навігації всередині тексту (зміст із посиланнями тощо) на вебсторінках із великим обсягом тексту.
Зверни увагу!
Правило «трьох кліків»: до будь-якої сторінки сайта користувач має дістатися не більш ніж за три переходи.

10-Б Правила ергономічного розміщення контенту

10-В Правила ергономічного розміщення контенту


Презентація "Системи керування вмістом"


https://new.xeol.com.ua/lesson/57/category/6

Штучний інтелект

Розумні речі


https://www.imena.ua/blog/top-15-smart-things/


"Моделі та моделювання. Аналіз та візуалізація даних"

1. Комп'ютерне моделювання об'єктів і процесів. Комп'ютерний експеримент
2. Основи статистичного аналізу даних. Середнє арифметичне, стандартне відхилення, мода, медіана.
3. Пошук та збір наборів даних. Соціальні аспекти масштабного аналізу даних
4. Розв’язування рівнянь комп’ютерними засобами.
5. Розв’язування систем рівнянь, оптимізаційних задач.
6. Програмні засоби для складних обчислень, аналізу даних та фінансових розрахунків
7. Візуалізація рядів і трендів даних.
9. Розв'язання задач з різних предметних галузей

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



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





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



Бази даних

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



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

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

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


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


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



Уроки:

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/

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



    Коментарі

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

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

    Авторські права та ліцензії у веб-середовищі (для 10 класу і всіх, кому цікаво)

      Інтелектуальна власність  — це власність на результати інтелектуальної та творчої діяльності.  Об’єктами інтелектуальної власності (результатами інтелектуальної та творчої діяльності) згідно із законодавством України є: ·       літературні та художні твори; ·     комп’ютерні програми; бази даних; фонограми, відеограми, передачі (програми) організацій мовлення; ·      наукові відкриття; ·       винаходи, корисні моделі, промислові зразки; ·          раціоналізаторські пропозиції; ·         сорти рослин, породи тварин; ·    комерційні (фірмові) найменування, торговельні марки (знаки для товарів і послуг), географічні зазначення; ·           комерційні таємниці тощо. На об’єкти інтелектуальної власності розповсюджується авторське право. Згадаймо, що таке право? (ві...
    Докладніше

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

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

    Створення меню в CSS

    Зображення
      Приклад стилю для меню body { font-family: Arial, San-Serif; font-size: 100%; background-color: #F6F2FF; } h1,h2,footer, nav { color: #E07BE0; text-align: center; } p { font-size: 20px; line-height: 1.3em; margin-top: 2.1em; margin-bottom: 1; margin-left: 10%; margin-right: 10%; color: #420039; } li { display: inline-block; } li a {   color: white;   text-align: center;  padding: 14px 16px;   text-decoration: none; } #menu { display: inline-block; } #menu a { margin-right: 5px; margin-left: 30%; padding: 10px; font: 15px Arial; text-decoration: none; color: #1437AD; border: 1px solid #1437AD; background-color: white; } #menu a:hover, #menu a.active { color: blue; background: yellow; border: 1px solid red; background-color: #F5F6FA; } Створення меню в CSS У цьому уроці ми будемо практикуватися створювати меню сайтів. Давайте для прикладу зробимо наступне меню: Для початку нам необхідно зробити HTML частину. Зробимо див, розмістивши в...
    Докладніше