Дистанційна освіта з інформатики в період травня 2021 року
17.05.2021 - 23.05.2021
Конспект уроку для
учнів
Тема:Створення
веб-сторінки на таблицях з графічними типами даних. Реалізація HTML-кодування.
Теоретична частина
Запитання: Що означає створення сайту?
Відповідь: Створення
сайтів включає наступні етапи:
• розробка технічного завдання та його узгодження;
• реєстрація доменного імені;
• створення макета сайту;
• розробка дизайну сайту;
• верстка дизайн-макетів головної і внутрішніх сторінок сайту,
програмування;
• тестування сайту;
• наповнення та оптимізація сайту відповідно до вимог пошукових
систем;
• наповнення сайту: написання статей, копірайтинг;
• підключення системи управління сайтом;
• технічна підтримка сайту.
ДОВІДКА щодо наповнення сайту:
Копіпаст: акуратне, категоризовати і
відформатироване розміщення на сайті матеріалів з наданих замовником джерел
(каталоги, сайти, електронні листи копірайтеру)
Рерайт: Унікалізація (перепис) тексту
з джерела, наданого замовником (електронні листи копірайтеру, посилання на
Інтернет-ресурси, наповнення по тематиках на розсуд копірайтера і т. д.)
Копірайт: авторський унікальний
текст (новина, інтерв'ю, стаття і т. п.)
* Хостинг надається за тарифними планами хостингу, в залежності від потреби
Вашого ресурсу
Практична частина
Реалізація форми на веб-сторінці мовою розмітки HTML
Завдання 1.
Набрати в текстовому редакторі
Блокнот наступний текст html-кодів і зберегти його у файл з
розширенням html.
Скопіювати HTML-кодування веб-сторінки у
цьому завданні 1.
1. Відкрити
текстовий редактор Блокнот. І вставити на сторінку коди.
2. Зберегти
даний документ під Іменем index1.html на Робочий стіл.
3. Відкрити
даний документ у веб-браузері. Протестувати активні слова на веб-сторінці
4. надіслати
скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
<html>
<head>
<title> Проста HTML-форма 6 </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”>
<forma method="post" action=”/cgi-bin/feedback.pl” name=”FORMA6”>
Запишіть декілька слів прo ваш настрій:<br>
<TEXTAREA NAME=s COLS=15 ROWS=5 WRAP=virtual>
Тут можна ввести довільний текст про ваш настрій
</TEXTAREA>
<INPUT TYPE=submit></form>
<p>Який сьогодні день тижня?
<br><SELECT NAME=s>
<OPTION VALUE=1 selected>Понеділок
<OPTION VALUE=2>Вівторок
<OPTION VALUE=3 selected>Середа
<OPTION VALUE=4>Четвер
<OPTION VALUE=5>П'ятниця
<OPTION VALUE=6>Субота
<OPTION VALUE=7>Неділя
</SELECT>
<INPUT TYPE=submit> </form>
<p> Запишіть декілька слів про своє місто.
<br><TEXTAREA NAME=s COLS=15 ROWS=5>
Тут можна ввести довільний текст
</TEXTAREA>
<INPUT TYPE=submit></form>
<form>
<p>Який на сьогодні ваш улюблений вид спорту?
<br><SELECT NAME=s>
<OPTION VALUE=1 selected>Cпортивна гімнастика
<OPTION VALUE=2 selected>Велоспорт
<OPTION VALUE=3 selected>Шахи
<OPTION VALUE=4 selected>Футбол
<OPTION VALUE=5 selected>Баскетбол
<OPTION VALUE=6 selected>Хокей
<OPTION VALUE=7 selected>Легка атлетика
<OPTION VALUE=8 selected>Важка атлетика
<OPTION VALUE=9 selected>Волейбол
<OPTION VALUE=10 selected>Гандбол
<OPTION VALUE=11 selected>Лижний спорт
<OPTION VALUE=12 selected>Фігурне катання
<OPTION VALUE=13 selected>Хокей на траві
<OPTION VALUE=14 selected>Стрільба з луку
<OPTION VALUE=15 selected>Кульова стрільба
<OPTION VALUE=16 selected>Веслування
<OPTION VALUE=17 selected>Плавання
<OPTION VALUE=18 selected>Акробатика
</SELECT>
</form>
<FORM>
Який спосіб навчання для вас найкращий?<br>
<INPUT NAME=sex TYPE=radio>Дистанційний<br>
<INPUT NAME=sex TYPE=radio>Очний<br>
<INPUT NAME=sex TYPE=radio>Змішаний<br>
</FORM>
<FORM>
Твори, яких письменників України, ви читали:<br>
1. Ліна Костенко <INPUT NAME=mouse TYPE=checkbox><br>
2. Юрій Андрухович - <INPUT NAME=key TYPE=checkbox><br>
3. Василь Шкляр- <INPUT NAME=monitor TYPE=checkbox><br>
4. Оксана Забужко- <INPUT NAME=monitor TYPE=checkbox><br>
5. Олександр Ірванець <INPUT NAME=monitor TYPE=checkbox><br>
6. Сергій Жадан- <INPUT NAME=monitor TYPE=checkbox><br>
7. Степан Процюк- <INPUT NAME=monitor TYPE=checkbox><br>
8. Ігор Павлюк-<INPUT NAME=monitor TYPE=checkbox><br>
9. Андрій Кокотюха-<INPUT NAME=monitor TYPE=checkbox><br>
10.Брати Капранови-<INPUT NAME=monitor TYPE=checkbox><br>
11. Василь Кожелянко-<INPUT NAME=monitor TYPE=checkbox><br>
12. Марія Матіос-<INPUT NAME=monitor TYPE=checkbox><br>
13. Маріанна Кіяновська-<INPUT NAME=monitor TYPE=checkbox><br>
14. Констянтин Матвієнко-<INPUT NAME=monitor TYPE=checkbox><br>
15. Тарас Прохасько-<INPUT NAME=monitor TYPE=checkbox><br>
16. Олесь Ульяненко-<INPUT NAME=monitor TYPE=checkbox><br>
17. Наталка Сняданко-<INPUT NAME=monitor TYPE=checkbox><br>
18. Василь Слапчук-<INPUT NAME=monitor TYPE=checkbox><br>
19. Ірен Роздобудько-<INPUT NAME=monitor TYPE=checkbox><br>
20. Світлана Пиркало-<INPUT NAME=monitor TYPE=checkbox><br>
</FORM>
</body>
</html>
Завдання 2.
Набрати в текстовому редакторі
Блокнот наступний текст html-кодів і зберегти його у файл з
розширенням html.
Скопіювати HTML-кодування веб-сторінки у
цьому завданні 1.
1. Відкрити
текстовий редактор Блокнот. І вставити на сторінку коди.
2. Зберегти
даний документ під Іменем index1.html на Робочий стіл.
3. Відкрити
даний документ у веб-браузері. Протестувати активні слова на веб-сторінці
4. надіслати
скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
Кодування простої HTML-таблиці розміром 3х3 з гіперпосиланнями, яка складається з трьох стовпців і трьох рядків, для вставлення дев'яти гіперпосилань в усі комірки таблиці.
Реалізація кодування
веб-сторінки на таблицях з гіперпосиланнями в комірках таблиці .
Кодування 2-ого файлу index2.html
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<title> Проста HTML-таблиця </title>
</head>
<BODY lang=UK link=blue vlink=purple style='tab-interval:35.4pt' bgcolr=”#00bb99” text=”#00000g” link=”#222222” alink=”#111111” background=”bg.jpg”>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<div class=WordSection1>
<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"><p class=MsoNormal> <a href="http://inf10klas.blogspot.com">10 клас. Дистанційна освіта з інформатики</a> </td>
<td align=”left” valign=”bottom” ” widht=”125" bgcolor="11ff00" height="87"><p class=MsoNormal><a href="http://inf9klas.blogspot.com">9 клас. Дистанційна освіта з інформатики </a></td>
<td align=”right” valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77"><p class=MsoNormal><a href="http://inf8klas.blogspot.com"> 8 клас. Дистанційна освіта з інформатики </a></td>
</tr>
<tr>
<td bgcolor="55ff00" height="57"> <a href="http://inf11klas.blogspot.com">11 клас. Дистанційна освіта з інформатики </ a> </td>
<td bgcolor="eeee00" height="87"> <a href="http://inf7klas.blogspot.com">7 клас. Дистанційна освіта з інформатики </a> </td>
<td bgcolor="bbbb00" height="97"> <a href="http://inf6klas.blogspot.com"> 6 клас. Дистанційна освіта з інформатики </a> </td>
</ tr>
<tr>
<td bgcolor="55fab0" height="77"> <a href="http://inf5klas.blogspot.com">5 клас. Дистанційна освіта з інформатики </a> </td>
<td bgcolor="00ff99" height="67"><a href="http://geom10klas.blogspot.com/">10 клас. Дистанційна освіта з геометрії </a></td>
<td bgcolor="ggff00" height="57"> <a href="http://alg10klas.blogspot.com/"> 10 клас. Дистанційна освіта з алгебри</a></td>
</tr>
</table>
</div>
</body>
</html>
Завдання 3.
Набрати в текстовому редакторі Блокнот наступний текст і зберегти його у файл з розширенням html, а саме: Algorutmu.html
Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.
4) Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.
5)Зберегти даний документ під Іменем index1.html на Робочий стіл.
6) Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці
7) надіслати скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Заголовок сторінки</title>
</head>
<BODY bgcolr=”#99aabb” text=”#000000” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>
<P style=”font-family: arial, calibri; font-size: 16pt; font-style: oblique; font-weight: bold; color:#22ffdd; line-height:14pt; ”> Текстовий блок 1 веб-сторінки</P>
<Font size(40) color=”0009dd” face=”Arial, Times New Roman, Serif”>
Бібліотека алгоритмів мовою програмування Python
для цілих рівннянь з двома невідомими </FONT>
<BR>
<BR> Приклад 1. Алгоритм пошуку цілих pозвязків нелінійного рівняння третього степення з двома невідомими
<BR>
</FONT>
<BR>print('Алгоритм пошуку цілих pозвязків нелінійного рівняння x<SUP>3</SUP>+3x<SUP>2</SUP>+3x+1+y<SUP>3</SUP>-y<SUP>2</SUP>-y-x<SUP>2</SUP>y-xy<SUP>2</SUP>-2xy=0.')
<BR>p=4; t=3;
<BR>w=['None']*p; v=['None']*p; f=['None']*p;
<BR>h=['None']*p; h3=['None']*p; w3=['None']*p;
<BR>l=0
<BR>for i in range(p):
<BR> for k in range(1,t):
<BR> for m in range(1,t):
<BR> for n in range(1,t):
<BR> l=l+1
<BR> v[i]=k #x1
<BR> f[i]=-1-k #y1
<BR> w[i]=m #x2
<BR> h[i]=1+m #y2
<BR> w3[i]=-n #x3
<BR> h3[i]=1-n #y3
<BR> print(l,' -a 1-двійка чисел, що є розвязком рівняння, (x1,y1)=(', v[i],'; ',f[i], ')')
<BR> print(l,' -a 2-двійка чисел, що є розвязком рівняння, (x2,y2)=(',w[i],'; ',h[i],')')
<BR> print(l,' -a 3-двійка чисел, що є розвязком рівняння, (x3,y3)=(', w3[i],'; ',h3[i], ')')
<Font size(35) color=”000eed” face=”Arial, Times New Roman, Serif”>
<BR>
<BR> Приклад 2. Алгоритм пошуку розвязків системи двох рівняння: aх+by=d; nx+my=k
<BR>
</FONT>
<BR>import random
<BR>print("це алгоритм пошуку розвязків системи двох рівняння: aх+by=d; nx+my=k")
<BR>a=float(random.randint(-100,100)); b=float(random.randint(-100,100));
<BR>d=float(random.randint(-100,100)); n=float(random.randint(-100,100));
<BR>m=float(random.randint(-100,100)); k=float(random.randint(-100,100));
<BR>print('це коефіцієнти для рівняння:',a,'*x+',b,'*y=',d)
<BR>print("a=",a); print("b=",b); print("d=",d)
<BR>print('це коефіцієнти для рівняння:',n,'*x+',m,'*y=',k)
<BR>print("n=",n); print("m=",m); print("k=",k)
<BR>if (a/n==b/m)and(a/n==d/k):
<BR> print('безліч розвязків, вигляду (x; (d-ax)/b) якщо х - довільне число')
<BR> for i in range(10):
<BR> print('x=',i, 'y=',(d-a*i)/b)
<BR>if (a/n==b/m)and(a/n!=d/k):
<BR> print('немає розвязків система рівнянь')
<BR>if (a/n!=b/m)and(a/n!=d/k):
<BR> print('один розвязок, вигляду (x; у)')
<BR> print('x=',(d*m-k*b)/(a*m-n*b), 'y=',(a*k-n*d)/(a*m-n*b))
<BR>
<Font size(31) color=”00ffdd” face=”Arial, Times New Roman, Serif”>
<BR>
<BR> Приклад 3. Алгоритм пошуку цілих розвязків системи двох рівняння: aх+by=d; nx+my=k
<BR>
</FONT>
<BR>import random
<BR>print("це алгоритм пошуку цілих розвязків системи двох рівняння: aх+by=d; nx+my=k")
<BR>a=3; b=-4; d=7; n=7; m=-5; k=12;
<BR>print('це коефіцієнти для рівняння:',a,'*x+',b,'*y=',d)
<BR>print("a=",a); print("b=",b); print("d=",d)
<BR>print('це коефіцієнти для рівняння:',n,'*x+',m,'*y=',k)
<BR>print("n=",n); print("m=",m); print("k=",k)
<BR>if (a/n==b/m)and(a/n==d/k):
<BR> print('безліч розвязків, вигляду (x; (d-ax)/b) якщо х - довільне число')
<BR> for i in range(10):
<BR> print('x=',i, 'y=',(d-a*i)/b)
<BR>if (a/n==b/m)and(a/n!=d/k):
<BR> print('немає розвязків система рівнянь')
<BR>if (a/n!=b/m)and(a/n!=d/k):
<BR> print('один розвязок, вигляду (x; у)')
<BR> print('x=',int((d*m-k*b)/(a*m-n*b)), 'y=',int((a*k-n*d)/(a*m-n*b)))
<Font size(36) color=”00aadd” face=”Arial, Times New Roman, Serif”>
<BR>
<BR> Приклад 4. Алгоритм пошуку розвязків рівняння: aх+b=d
<BR>
</FONT>
<BR>import random
<BR>print("це алгоритм пошуку розвязків рівняння: aх+b=d")
<BR>a=3; b=-4; d=6
<BR>print('це коефіцієнти для рівняння:',a,'*x+',b,'=',d)
<BR>print("a=",a); print("b=",b); print("d=",d)
<BR>if (a==0)and(b==d):
<BR> print('безліч розвязків, вигляду x=n, якщо n - довільне число')
<BR> for i in range(10):
<BR> print('x=',i)
<BR>if (a==0)and(b!=d):
<BR> print('немає розвязків у цього рівняння')
<BR>if (a!=0)and(b!=d):
<BR> print('один розвязок, вигляду x=(d-b)/a')
<BR> print('x=',(d-b)/a)
</body>
</html>
Завантажте програму-браузер файл з текстом завдання 3. Створена веб-сторінка повинна мати напрочуд файний вигляд. Треба прочитати тексти виправити помилки в кодах.
Завдання 4.
Набрати в текстовому редакторі Блокнот наступний код-текст і зберегти його у файл з розширенням 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”>
<p><Font size="5" color=”00000” face=”Arial, Times New Roman, Serif”> Виконайте зміну кольору та зміну розміру шрифту в написанні вірша Івана Драча на даній веб-сторінці:</font>.
<p><Font size="50" color=”ffffdd” face=”Arial, Times New Roman, Serif”> Іван Драч</font>.
<P><Font size=40" color=”eeeee” face=”Arial, Times New Roman, Serif”>Балада про соняшник</font>
<P><Font size="4" color=”1234dd” face=”Arial, Times New Roman, Serif”>
<BR>В соняшника були руки і ноги,
<BR>Було тіло, шорстке і зелене.
<BR>Він бігав наввипередки з вітром,
<BR>Він вилазив на грушу,
<BR>і рвав у пазуху гнилиці,
<BR>І купався коло млина, і лежав у піску,
<BR>І стріляв горобців з рогатки.
<BR>Він стрибав на одній нозі,
<BR>Щоб вилити з вуха воду,
<BR>І раптом побачив сонце,
<BR>Красиве засмагле сонце,-
<BR>В золотих переливах кучерів,
<BR>У червоній сорочці навипуск,
<BR>Що їхало на велосипеді,
<BR>Обминаючи хмари на небі...
<BR>І застиг він на роки й століття
<BR>В золотому німому захопленні:
<BR>— Дайте покататися, дядьку!
<BR>А ні, то візьміть хоч на раму.
<BR>Дядьку, хіба вам шкода?!
<BR>Поезіє, сонце моє оранжеве!
<BR>Щомиті якийсь хлопчисько
<BR>Відкриває тебе для себе,
<BR>Щоб стати навіки соняшником.
</font>.
</body>
</html>
Завантажте програму-браузер файл з текстом завдання 4. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то треба виправити помилки в кодах.
Немає коментарів:
Дописати коментар