10 клас. Інформатика. Дистанційне навчання.: Дистанційна освіта з інформатики 19.04.2021

Дистанційна освіта з інформатики в період квітень 2021 року

19.04.2021 - 25.04.2021

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

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

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

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

Стандарт мови розмітки W3C HTML включає підтримку сценаріїв(скриптів) на стороні клієнта. Він визначає, яким чином локально виконувані сценарії можуть бути використані на веб-сторінці. Конкретні застосунки на стороні клієнта, такі як веб-браузер, можуть підтримувати кілька мов сценаріїв, хоча всі популярні браузери підтримують сценарії на JavaScript. Код сценарію може виконуватися під час завантаження документа, або пізніше.

У HTML5 JavaScript сценарії (скрипти) відіграють значну роль при відтворенні аудіо, відео та графічного вмісту (див. нові можливості HTML5).

JavaScript разом із HTML, CSS та DOM були основою для створення концепції DHTML.

У концепції AJAX клієнтські сценарії мають визначне місце.

Сценарії можуть існувати як окремі файли (js-файли), або бути включеними всередину HTML документу. Безпосередньо в HTML-документі код сценарію можна записати:

· до елементу <script>;

· всередину інших елементів до відповідних атрибутів внутрішніх подій.

DHTML, Dynamic HTML — концепція створення веб-сайту, що розглядає HTML-документ як об'єктну структуру, використовує поєднання статичної мови розмітки HTML, вбудованої скриптової мови JavaScript (сценарії виконуються на стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктної моделі документа). Ця концепція може бути використана для створення застосунку в браузері: наприклад для навігації або для додання інтерактивності формам. Також DHTML може бути використана для динамічного перетягування елементів по екрану і як інструмент для створення заснованих на браузері відео-ігор.

Конкуруючі технології: Macromedia Flash, Microsoft Silverlight, Adobe AIR для анімації і аплети (applets).

Шаблон кодування сценаріїв веб-сторінки зі скриптами

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Заголовок сторінки</title>

</head>

<body>

<div id="navigation"></div>

<script>

window.onload = function () {

myObj = document.getElementById("navigation");

// ... manipulate myObj

};

</script>

</body>

</html>

Часто програма на JavaScript зберігається у зовнішньому файлі, а веб-сторінка просто зв'язується з ним. Це дуже зручно, коли декілька сторінок використовують один і той самий програмний код:

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

Приклад.

Наведений код ілюструє часто використовувану функцію. Додаткова частина сторінки (тестовий блок) відображатиметься на екрані, тільки коли користувач робить запит. У електронному навчанні така функція може використовуватися для виведення підказки або правильної відповіді для студента. Але спочатку цієї інформації не видно.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Using a DOM function</title>

<style>

a {background-color:#eee;}

a:hover {background:#ff0;}

#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}

</style>

</head>

<body>

<h1>Using a DOM function</h1>

<h2><a id="showhide" href="#">Show paragraph</a></h2>

This is the paragraph that is only displayed on request.

The general flow of the document continues.

<script>

changeDisplayState = function (id) {

var d = document.getElementById('showhide'),

e = document.getElementById(id);

if (e.style.display === 'none' || e.style.display === '') {

e.style.display = 'block';

d.innerHTML = 'Hide paragraph';

}

else {

e.style.display = 'none';

d.innerHTML = 'Show paragraph';

}

};

document.getElementById('showhide').onclick = function () {

changeDisplayState('toggleMe');

return false;

};

</script>

</body>

</html>

Кодування для зображення на веб-сторінці:

Тег(або дескриптор) для розміщення на веб-сторінці зображення, що розміщене в поточній папці: <IMG scr=”foto1.png” >

Тег(або дескриптор) для розміщення на веб-сторінці зображення, що розміщенне в іншій папці: <IMG scr=”image/foto1.png”>

Приклад:

<HTML>

<HEAD>

<TITLE>Кодування зображення

</TITLE>

</HEAD >

Текстовий блок 1 веб-сторінки

Напівжирний текст

Курсив

Підкреслений текст

Текстовий блок <STRIKE>TEXT</STRIKE>,2 веб-сторінки

Текстовий блок 3 веб-сторінки

Текстовий блок 4 веб-сторінки Текстовий блок 5 веб-сторінки Текстовий блок 6 веб-сторінки

</BODY>

</HTML>

КОДУВАННЯ КОЛЬОРІВ ШРИФТІВ, ТЛА ШРИФТІВ, І ЗМІНИ КОЛЬОРІВ

Приклад кодування кольорів шрифтів, тла шрифтів, і зміни кольорів використаних та активних гіперпосилань в текстових блоках за допомогою тегу <BODY>… </BODY>..

Приклад:

<BODY bgcolr=”#99aabb” text=”#ddffaa” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>… </BODY>.

Тег використовується HTML-кодуванні великих текстових блоків веб-сторінки для дизайну шрифтів.

Приклад:

Текстовий блок веб-сторінки

Тег має такі атрибути: висоти символів: size(12), кольору символів: color=”9999dd”, назви шрифту: face=” Times New Roman, Serif”

Приклад:

Текстовий блок веб-сторінки

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

Текстовий блок веб-сторінки

Форматування заголовків текстових блоків

Для форматування заголовків і підзаголоків для текстових блоків можна використати ряд тегів-дескрипторів:

<H1>…заголовок 1 рівня…</H1>

<H2>……заголовок 2 рівня…</H2>

<H3>……заголовок 3 рівня…</H3>

<H4>…заголовок 4 рівня…</H4>

<H5>……заголовок 5 рівня…</H5>

<H6>……заголовок 6 рівня…</H6>

Кодування спеціального форматування фрагментів в текстовому блоці

Тег початку нового рядка без абзацу: (для катренів та віршів)

Тег початку нового рядка з абзацом: … (для прози)

Тег початку попередньо відформатовaного рядка з абзацом: <PRE>…</PRE> (для авторської графіки)

Тег початку рядка без природніх розривів: …

Тег початку напівжирного тексту в абзаці: … (для заголовків)

Тег початку курсивного тексту в абзаці: … (для прописних ліітер)

Тег початку підкресленого тексту в абзаці: … (для виділення фрагментів тексту)

Тег початку зменшеного тексту в абзаці: … (для приміток)

Тег початку збільшеного тексту в абзаці: <BIG>…</BIG> ( для означень термінів)

Тег початку надрядкового текстового символу в абзаці: … (для степенів числа)

Тег початку підрядкового текстового символу в абзаці: … (для індексів у буквах)

Тег початку закресленого текстового символу в абзаці: <STRIKE>…</STRIKE>

Тег початку внутрішнього гіперпосилання текстового символу в абзаці: <A name=”top”>…</A>

Тег початку зовнішнього гіперпосилання на іншу веб-сторінку текстового символу в абзаці: <A href=” http://inf11klas.blogspot.com/”>…</A>

Тег початку зовнішнього гіперпосилання на файл у папці текстового символу в абзаці: <A href=” informatuka/inf11klas.html”>…</A>

Тег початку зовнішнього гіперпосилання на файл у папці у вигляді зображення в абзаці: <A href=” informatuka/inf11klas.html”><IMG scr=”image/grafic1.png”>…</A>

Тег початку зовнішнього гіперпосилання на поштову електронну скриньку в абзаці: <A href=” mailto:vinnser@gmail.com”><IMG scr=”image/grafic1.png”>…</A>

Тег початку впорядкованого нумерованого списку в абзаці: <OL>…<LI>… </LI> … </OL> (для чисел)

Тег початку невпорядкованого маркованого списку в абзаці: <UL>…<LI>… </LI> … </UL> (для маркерів)

Тег початку списку означень в абзаці: <DL>…<LI>… </LI> … </DL> (для списку означень…)

Тег початку списку означень в абзаці: <DT>…<LI>… </LI> … </DT> (для визначаємого терміну у списку…)

Тег початку списку означень в абзаці: <DD>…<LI>… </LI> … </DD> (для визначення терміну…)

Атрибути чисел та маркерів для тегу початку списку

<OL>…<LI value=”30”>… </LI value=”33”> … </OL> (зміна номеру у списку)

<UL>…<LI type=”disc”>… </LI type=”disc”>… </UL>(зміна маркеру у списку)

Приклад форматування тексту в HTML-документі

 елемент є найпростішим способом , щоб змінити текст в розмір, колір і накреслення шрифту. Однак це не найкращий спосіб.
font

Font - Тег був доставлений на початку життя в HTML - форматі, щоб дозволити розробникам змінити розмір, шрифт і колір їх текст. Це продовжувало приносити більше шкоди, ніж користі - з різних причин - але головним чином тому, що це надзвичайно неефективний спосіб форматування тексту. Форматування тексту CSS набагато перевершує, але знання цих прийомів старого стилю все ще є корисним.

Розмір шрифту

У вас є два варіанти встановлення розміру тексту: розмір його абсолютно або відносно . Абсолютні розміри знаходяться між діапазоном 1і 7, і встановлюються так:

<font size="2">text

Для більшості браузерів розмір шрифту за замовчуванням встановлений як3 . Для більшості сайтів текст буде встановлений приблизно за розміром 2або 3.

Відносний розмір означає, що розмір тексту зменшиться відносно розміру користувача за замовчуванням . Це краще, оскільки воно адаптується до уподобань ваших користувачів - якщо вони спеціально налаштували свої браузери для відображення тексту більшого розміру, ніж зазвичай, ваш текст буде пропорційно зростати. У вас є діапазон від +6до +1і -1до -6. Плюс 1 і мінус 1 будуть тими, якими ти будеш користуватися найбільше. Як ярлики для цих двох розмірів є теги <big></big>та , що допомагає.

Text one size greater than the browser’s default.

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

Шрифт Face

По-перше, якщо ви не внесете жодних змін, ваш текст, мабуть, буде виглядати так:

12pt Black Times New Roman

Не найкрасивіший або найпридатніший шрифт у світі, оскільки він справді був розроблений для читання з паперу, а не для екранів комп’ютерів. Отже, ви захочете змінити його на щось більш читабельне та приємніше на вигляд.

Подивіться у папку шрифтів (на ПК це C: \ windows \ fonts ). У вас повинно бути кілька десятків різних шрифтів. Деякі з них будуть придатні для використання в Інтернеті, а інші ви будете використовувати знову і знову. Одним з найпоширеніших шрифтів, що використовуються в мережі, є Arial (варіант Helvetica для Mac). Щоб змінити текст на Arial або будь-який інший шрифт, тегами є

<font face="Arial">Your text here.

faceАтрибут був так названий тому , що шрифт конструкція більш точно відома як шрифти .

Обмеження шрифтів

Окремий шрифт відображатиметься на екрані комп’ютера зчитувача лише в тому випадку, якщо на ньому встановлено цей шрифт. Отже, якщо у вас ціла сторінка визначена цифровим шрифтом ( »завантажити ) або щось інше, навантажувачі ваших глядачів просто отримають сторінку з нудним старим Times New Roman. Щоб обійти це, найкращою ідеєю, звичайно, є використання загальних шрифтів . Існує набір загальних шрифтів, у яких ви можете бути більш-менш впевнені, що вони з’являться на всіх системах ваших читачів. faceАтрибут дозволяє вказати список шрифтів в той час. Це хороша практика - визначати резервні шрифти на випадок, якщо щось піде не так. Дивитися:

text

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

Усі шрифти входять до певного сімейства шрифтів. Наприклад, Arial має тип 'sans-serif'. Якщо всі ваші альтернативи вичерпані, не знайшовши збігу, останньою інстанцією є вказати сімейство шрифтів. Якщо справа доходить до цього, буде використано типове значення для цієї родини. Ви можете дізнатися все про сімейства шрифтів та відмінності між ними у веб-типографіці .

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

sourcetip: якщо у вас є текстовий процесор, як Word, спробуйте кілька шрифтів. Знайти того, кого ти хочеш, набагато швидше.

Поширені шрифти

Для вашої зручності, ось група найпопулярніших та найпоширеніших списків шрифтів:

Arial, Helvetica,
Требуше MS, Arial, Helvetica,
Вердана, Женева,
Times New Roman, Times,
Джорджія, Гарамонд, Палатіно, засічка
Кур'єр Новий, Кур'єр, монопростір

Колір шрифту

Щоб змінити кольори тексту на сторінці для цілої сторінки , ви можете визначити його в <body>тезі. У мене тут є повний посібник з основ .

Щоб змінити кольори лише невеликого блоку тексту або окремого слова, вам доведеться знову використати старий fontтег. Формат:

<font color="#ff0000">text

Кольори в HTML повинні бути визначені як шістнадцяткові коди , які представляють собою 6-значні коди, що представляють кількість червоного, зеленого та синього (RGB) у кольорі. Щоб побачити повну діаграму цих кодів, щоб ви могли вибрати ті, які вам подобаються, див. Таблицю кольорів HEX .

text

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

Веб-типографіка
Привабливий текст в Інтернеті досягти непросто. Дізнайтеся про сімейства шрифтів, про те, які шрифти найкраще працюють в Інтернеті, та як створити гарні розділові знаки.

Спеціальні символи
"Спеціальні", як, наприклад, не на клавіатурі Для їх отримання потрібно використовувати магічний код, тому перегляньте нашу діаграму.

Внутрішні посилання
Внутрішні посилання означають, що ви можете переходити між розділами вашої сторінки та іншими сторінками. Їх теж дуже легко зробити.

Назви розділів

В основному, стрибки сторінок - це лише посилання (вони використовують той самий <a>елемент, що і всі посилання), але посилання, які вказують на певну частину документа. Це робиться шляхом присвоєння імен частинам вашої сторінки , а потім посилання за посиланням на цей розділ.

Сторінка переходи робиться за допомогою name атрибута цього aелемента. Отже, скажімо, ви хочете отримати посилання на верх сторінки, ви додасте такий прив’язок у верхній частині документа ( <body>звичайно, всередині елемента):

<a name="top"></a>

Списки
Дізнайтеся, як розкласти текст у крапці, нумеровані та списки визначень.

Список форматування тексту
Існує більше 40 тегів, які можна використовувати для форматування тексту - і я отримав тут список.

Шаблони
За допомогою спеціальних вікон Internet Explorer ви можете прокручувати текст по екрану.

В іншому місці

Інші статті HTML-джерела, які були б у цьому розділі, якби вони не були десь ще ...

Коди основних елементів мови HTML

Тег	Опис тега	Приклад
<html> </html>	Позначення початку і кінця веб-документа	<html> </html>
<head> <title> </title> </head>	Позначення назви і заголовка веб-документа	<head> <title></title> </head>
<body> </body>	Позначення розпочата і кінця тексту (тіла) веб-документа	<body> </body>
<P> </p>	Позначення меж абзацу	<р> </р> <р> Це моє рідне місто. </р>
<br>	Позначення переходу на новий рядок тексту	<р> Я дуже люблю поеми Шевченка, особливо: </р> <р>СОН, <br> Гайдамаки </р>
<p align = "center"> </p>	Позначення абзацу, в якому текст вирівняний по центру	<р align = "center"> Київ - столиця нашої Батьківщини. </р> <р> Це моє рідне місто. Він дуже гарний. </р>
<p align = "right"> </p>	Позначення абзацу, в якому текст вирівняний по правому краю	<р> Каменяр України, <br> Іван Франко </р> <р align = "right"> Відомий поет</р>
<p align = "1eft"> </p>	Позначення абзацу, в якому текст вирівняний по лівому краю	<р align = "left"> </р> <р align = "center"> Довбай цю скалу <br> Коли маєш силу ... </p>
<h1> </h1> або <h2> </h2>	Позначення абзацу, в якому знаходиться заголовок тексту (можливо до шести видів заголовків залежно від рівня заголовка, тобто щодо зменшення ступеня важливості)	<h1>Київ - столиця нашої Батьківщини </h1> <p> Це історичне місто. </р> <h2> Головні пам'ятки Києва <h2> <p> Це місто патріотів. </ р>
"<strong> </strong>	Використовується для виділення фрагмента тексту напівжирним шрифтом	<p> <strong>Київ </strong> - столиця нашої Батьківщини. </р>
<em> </em>	Використовується для виділення фрагмента тексту курсивом	<р> <em>Вінниця </em> - перлина Поділля. </р>
<u> </u>	Використовується для виділення фрагмента тексту підкресленням	<р> <u> Львів </u> - місто науки. </р>
<s> </s>	Використовується для перекреслення тексту	<р> У нас знижки! Стара ціна <s> 5000 грн. </S>, нова ціна 1000 грн! </Р>
<sup> </sup>	Створює верхній індекс	2 <sup> 2 </sup> = 4
<sub> </sub>	Створює нижній індекс	Хімічна формула води: H<sub> 2 </sub> О
<font size = "+ 2"> </font>	Змінює вигляд шрифту, а саме: збільшує розмір букв у зазначеному тегом фрагменті тексту на дві одиниці в порівнянні зі стандартним розміром (стандартний розмір шрифту дорівнює 3)	<р> У нас знижки! Стара ціна 5000 грн., Нова ціна <font size = "+ 2"> 1000 </font> грн! </Р>
<font size = "l"> </font>	Змінює вигляд шрифту, а саме: визначає розмір букв у зазначеному тегом фрагменті тексту (всього можливі сьомій градацій розмірів шрифту 1, 2, 3, 4, 5, 6, 7)	<p> <font size = "l"> ОДЕСА </ font> - південна ПАЛЬМІРА нашої Батьківщини.
<font color = "red"> </font>	Змінює вигляд шрифту, а саме: відмічені тегом фрагменти тексту будуть червоного кольору (колір задається або RGB-позначенням в шістнадцятковій системі, або англійською назвою одного з 16 базових кольорів: BLACK - чорний, BLUE - синій, NAVY - темносиній, LIME - світло- зелений, GREEN - зелений, SILVER - світло-сірий, AQUA - блакитний, OLIVE - оливковий, RED - червоний, MAROON - коричневий, GREY - сірий, FUCHSIA - колір фуксії (рослина), PURPLE - фіолетовий, YELLOW - жовтий, WHITE - білий, TEAL - зеленувато-блакитний)	<p> <font со1ог = "red">ДНІПРО</font> - місто козаків моєї Батьківщини. </р>
<body bgcolor = "silver" text = "green"> </body>	Задає колір фону вебсторінки *(bgcolor* - *background* *color),* а також колір тексту (в даному випадку - червоний) у всьому документі	<body bgcolor = "silver" text = "green ''> <p> Це мій Ліцей. Він знаходиться у Вінниці. </p> </body>
<body background = "fon01. jpg">	Дозволяє використовувати файл картинки (в даному випадку графічний файл з ім'ям fon01.jpg) в якості фону веб-сторінки	<body background = "fon01. jpg> <p> Це моя вулиця. Я живу у Вінниці. </p> </body>
<font face = '' courier new "> </font>	Змінює вигляд шрифту, а саме: задає гарнітуру шрифту (рекомендується використовувати шрифти сімейства *Times* New Roman, A rial, Tahoma, Courier; *Courier* *New,* які найчастіше бувають встановлені на всіх комп'ютерах)	<p> <font face = "courier new"> Харків </font> - місто науковців. </р>
<ul> <li> </li> </ul>	Створює невпорядкованості ий список, при цьому обов'язково позначення кожного з елементів цього списку за допомогою тега <Н>	<р> Столиці країн: <ul> <li> Молдови- Кишинів, </li> <li> Польщі - Варшава, </li> <li> Болгарії - Софія, </li> <li> Чехії - Прага, </li> <li> Словаччини - Братислава, </li> </ul> </р>
<ol> <li> </ li> </ ol>	Створює впорядкований список, при цьому обов'язково позначення кожного з елементів цього списку за допомогою тега <І>	<р> Країни Східної Європи: <о1> <li> Болгарія, </li> <li> Польща, </li><li> Сербія</li> <li> Словаччина </li><li> Словенія, </li><li> Чехія, </li><li> Хорватія </li></о1></р>
<a href=" kdu.org"> </a>	Створить посилання вебсторінку в Інтернеті	<а href = "msu.ru"> Це посилання на веб-сайт до університету. </ а>
<а href = "file.htm"> </ а>	Створює посилання на інший файл (в даному випадку на інший файл у форматі lit ml)	<а href = "file.htm"> Це посилання на файл з новими матеріалами про університет. </ А>
<а href = "mailto: contact @ philol.ukr.net"> </а>	Посилання на адресу електронної пошти	<а href = "mailto: contact @ philol.msu.ru"> Це посилання на електронну поштову адресу ліцею
<img src = "kdu.jpg">	Вставка малюнка (графічного елементу). У веб документ можна вставити зображення в форматах: gif, jpg (jpeg), png	Це фотографія мого університету. <Р> <iing src = "mgu, jpg"> </р>
<img src = "mgu.jpg" width = "65" height = "59" hspace = "15" vspace = "15" align = "right">	Вставка графічного елементу із завданням параметрів відображення картинки: ширини малюнка *(width),* висоти малюнка *(height),* відстань від попереднього елемента веб-документа до малюнка (по горизонталі - *hspace* - *horizontal* *space),* відстань від інших елементів малюнка по вертикалі *(vspace* - *vertical* space) і спосіб вирівнювання малюнка щодо тексту (обтікання малюнка текстом) - вирівняного вправо	Це фотографія мого ліцею шириною близько 2 см і висотою близько 1,8 см, вирівняна Bnpaвo. <Img src = "mgu.jpg" width = "250" height = "250" hspace = "15" vspace = "15" align = "right">

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

Мова розмітки HTML для форматування тексту.

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

гіпертексту на веб-сторінці

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

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

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

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

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

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

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

<!doctype html>

<head>

<title>Заголовок сторінки</title>

</head>

Текстовий блок 1 веб-сторінки

Бібліотека алгоритмів мовою програмування Python

для цілих рівннянь з двома невідомими

Приклад 1. Алгоритм пошуку цілих pозвязків нелінійного рівняння третього степення з двома невідомими

print('Алгоритм пошуку цілих pозвязків нелінійного рівняння x3+3x2+3x+1+y3-y2-y-x2y-xy2-2xy=0.')

p=4; t=3;

w=['None']*p; v=['None']*p; f=['None']*p;

h=['None']*p; h3=['None']*p; w3=['None']*p;

l=0

for i in range(p):

for k in range(1,t):

for m in range(1,t):

for n in range(1,t):

l=l+1

v[i]=k #x1

f[i]=-1-k #y1

w[i]=m #x2

h[i]=1+m #y2

w3[i]=-n #x3

h3[i]=1-n #y3

print(l,' -a 1-двійка чисел, що є розвязком рівняння, (x1,y1)=(', v[i],'; ',f[i], ')')

print(l,' -a 2-двійка чисел, що є розвязком рівняння, (x2,y2)=(',w[i],'; ',h[i],')')

print(l,' -a 3-двійка чисел, що є розвязком рівняння, (x3,y3)=(', w3[i],'; ',h3[i], ')')

Приклад 2. Алгоритм пошуку розвязків системи двох рівняння: aх+by=d; nx+my=k

import random

print("це алгоритм пошуку розвязків системи двох рівняння: aх+by=d; nx+my=k")

a=float(random.randint(-100,100)); b=float(random.randint(-100,100));

d=float(random.randint(-100,100)); n=float(random.randint(-100,100));

m=float(random.randint(-100,100)); k=float(random.randint(-100,100));

print('це коефіцієнти для рівняння:',a,'*x+',b,'*y=',d)

print("a=",a); print("b=",b); print("d=",d)

print('це коефіцієнти для рівняння:',n,'*x+',m,'*y=',k)

print("n=",n); print("m=",m); print("k=",k)

if (a/n==b/m)and(a/n==d/k):

print('безліч розвязків, вигляду (x; (d-ax)/b) якщо х - довільне число')

for i in range(10):

print('x=',i, 'y=',(d-a*i)/b)

if (a/n==b/m)and(a/n!=d/k):

print('немає розвязків система рівнянь')

if (a/n!=b/m)and(a/n!=d/k):

print('один розвязок, вигляду (x; у)')

print('x=',(d*m-k*b)/(a*m-n*b), 'y=',(a*k-n*d)/(a*m-n*b))

Приклад 3. Алгоритм пошуку цілих розвязків системи двох рівняння: aх+by=d; nx+my=k

import random

print("це алгоритм пошуку цілих розвязків системи двох рівняння: aх+by=d; nx+my=k")

a=3; b=-4; d=7; n=7; m=-5; k=12;

print('це коефіцієнти для рівняння:',a,'*x+',b,'*y=',d)

print("a=",a); print("b=",b); print("d=",d)

print('це коефіцієнти для рівняння:',n,'*x+',m,'*y=',k)

print("n=",n); print("m=",m); print("k=",k)

if (a/n==b/m)and(a/n==d/k):

print('безліч розвязків, вигляду (x; (d-ax)/b) якщо х - довільне число')

for i in range(10):

print('x=',i, 'y=',(d-a*i)/b)

if (a/n==b/m)and(a/n!=d/k):

print('немає розвязків система рівнянь')

if (a/n!=b/m)and(a/n!=d/k):

print('один розвязок, вигляду (x; у)')

print('x=',int((d*m-k*b)/(a*m-n*b)), 'y=',int((a*k-n*d)/(a*m-n*b)))

Приклад 4. Алгоритм пошуку розвязків рівняння: aх+b=d

import random

print("це алгоритм пошуку розвязків рівняння: aх+b=d")

a=3; b=-4; d=6

print('це коефіцієнти для рівняння:',a,'*x+',b,'=',d)

print("a=",a); print("b=",b); print("d=",d)

if (a==0)and(b==d):

print('безліч розвязків, вигляду x=n, якщо n - довільне число')

for i in range(10):

print('x=',i)

if (a==0)and(b!=d):

print('немає розвязків у цього рівняння')

if (a!=0)and(b!=d):

print('один розвязок, вигляду x=(d-b)/a')

print('x=',(d-b)/a)

</body>

</html>

Завдання 2. Завантажте програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Треба прочитати текст ы виправити помилки в кодах.

Завдання 3. Набрати в текстовому редакторі Блокнот наступний код-текст і зберегти його у файл з розширенням html, а саме: ДРАЧ.html

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

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

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

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

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

<HTML>

<HEAD>

<TITLE>Шаблон для кодування зображення

</TITLE>

</HEAD >

<BODY bgcolr=”#99aabb” text=”#ddffaa” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

 Іван Драч.

Балада про соняшник

 В соняшника були руки і ноги,

 Було тіло, шорстке і зелене.

 Він бігав наввипередки з вітром,

 Він вилазив на грушу,

 і рвав у пазуху гнилиці,

 І купався коло млина, і лежав у піску,

 І стріляв горобців з рогатки.

 Він стрибав на одній нозі,

 Щоб вилити з вуха воду,

 І раптом побачив сонце,

 Красиве засмагле сонце,-

 В золотих переливах кучерів,

 У червоній сорочці навипуск,

 Що їхало на велосипеді,

 Обминаючи хмари на небі...

 І застиг він на роки й століття

 В золотому німому захопленні:

 — Дайте покататися, дядьку!

 А ні, то візьміть хоч на раму.

 Дядьку, хіба вам шкода?!

 Поезіє, сонце моє оранжеве!

 Щомиті якийсь хлопчисько

 Відкриває тебе для себе,

 Щоб стати навіки соняшником.

.

</body>

</html>

Завдання 4. Завантажте програму-браузер файл з текстом завдання 3. Створена веб-сторінка повинна мати напрочуд файний вигляд. Треба виправити помилки в кодах.

Завдання 5. Виясніть, які послуги надаються користувачам акаунту від фірми Microsoft, використавши повний перелік, що поданий нижче. Створіть презентацію на 10 слайдів «Які можливості в користувачів акаунту від фірми Microsoft?»

Перелік інтернет-служб від Фірми Microsoft

· Account.microsoft.com

· Bing Apps

· Bing Image and News (iOS)

· Bing Pages

· Bing Rebates

· Bing Search APIs/SDKs

· Bing Translator

· Bing Webmaster

· Bing.com

· Bingplaces.com

· Cortana skills by Microsoft

· Cortana

· Default Homepage and New Tab Page on Microsoft Edge

· Dev Center App

· Dictate

· education.minecraft.net

· Face Swap

· Feedback Intake Tool for Azure Maps (aka “Azure Maps Feedback”)

· Forms.microsoft.com

· forzamotorsport.net

· Groove Music Pass

· Groove

· GroupMe

· LineBack

· Microsoft 365 Consumer

· Microsoft 365 Family

· Microsoft 365 Personal

· Microsoft Academic

· Microsoft Add-Ins for Skype

· Microsoft Bots

· Microsoft Educator Community

· Microsoft Health

· Microsoft Launcher

· Microsoft Math Solver

· Microsoft Pay

· Microsoft Pix

· Microsoft Research Interactive Science

· Microsoft Research Open Data

· Microsoft Soundscape

· Microsoft Teams

· Microsoft Translator

· Microsoft Wallpaper

· Microsoft XiaoIce

· Minecraft Realms Plus and Minecraft Realms

· Mixer

· MSN Dial Up

· MSN Explorer

· MSN Premium

· MSN Гроші

· MSN Здоров’я та фітнес

· MSN Новини

· MSN Погода

· MSN Подорожі

· MSN Спорт

· MSN Їжа та напої

· MSN.com

· Office 365 Pro Plus optional connected experiences

· Office in Microsoft 365 Consumer

· Office in Microsoft 365 Family

· Office in Microsoft 365 Personal

· Office Sway

· Office для браузера (раніше Office Online)

· Office.com

· OneDrive.com

· OneDrive

· OneNote.com

· Outlook.com

· Paint 3D

· Presentation Translator

· Rinna

· rise4fun

· Seeing AI

· Send

· Skype in the Classroom

· Skype Manager

· Skype.com

· Skype

· Snip Insights

· Spreadsheet Keyboard

· Sway.com

· to-do.microsoft.com

· Translator for Microsoft Edge

· Translator Live

· UrWeather

· ux.microsoft.com

· Video Breakdown

· Visio Online

· Web Translator

· Windows Live Mail

· Windows Live Writer

· Windows Movie Maker

· Xbox Game Pass

· Xbox Live Gold

· Xbox Live

· Xbox Music

· Xbox Store

· Глобальний пошук

· Карти Bing

· Магазин Office

· Магазин Windows

· Магазин

· Наступний екран блокування

· Обліковий запис Microsoft

· Помічник Microsoft із підтримки й відновлення Office 365

· Пошук Microsoft у Bing

· Програма Bing Search

· Програма Device Health

· Програма «Карти»

· Родина Microsoft

· Словник Bing

· Фотоколекція Windows

· Фільми й телепрограми Microsoft

· Ігри Minecraft

· Ігри, програми та веб-сайти Xbox Game Studios

· Ігри, програми та веб-сайти для Windows, опубліковані корпорацією Майкрософт

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

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

*********************

*****************

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