пʼятниця, 1 жовтня 2021 р.

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

 04.10.2021 - 10.10.2021

"Тестування учасника  ІКТ-олімпіади"

 

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

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

 

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

Якісні властивості

 текстової інформації

 

Семантична

парадигма

інформації

Синтаксична

парадигма

інформації

Стилістична

парадигма

інформації

Лінгвістична

парадигма

інформації

Інноваційна

парадигма

інформації

Загальні

властивості 

змісту,

суті,

смислу,

 контексту

інформації

достовірність

форматованість

інтуїтивність

відкритість

цільовість

повнота

формальність

досвідність

секретність

ймовірність

структурованість

аналітичність

історичність

ємність

модельність

ефективність

технічність

імітаційність

конфліктність

перехресність

логічність

економічність

місткість

ситуаційність

методологічність

абстрактність

передбаченість

визначеність

ієрархічність

проблемність

системність

схематичність

класичність

ступеневість

ризикованість

концептуальність

інтервальність

композиційність

рівневість

компромісність

складність

гарантованість

заангажованість

актуальність

прогнозованість

раціональність

реалізованість

збережувальність

стратегічність

інтерактивність

зведеність

функціональність

розпізнаванність

узгодженість

доповнюваність

ресурсність

керованість

надлишковість

публічність

предметність

глобальність

факторність

масштабність

надзвичайність

критичність

надійність

Форс-мажорність

адаптивність

чутливість

адаптивність

ритмічність

художність

магічність

усвідомленість

публічність

мелодійність

гумористичність

документальність

психологічність

модерність

справжність

доповненість

сакральність

епічність

фантастичність

сутність

розлогість

ліричність

афористичність

колізійність

умовність

характерність

почуттєвість

антитезовість

оксимороність

алогічність

суперечливість

уреальненість

ефективність

трансцендентність

парадоксальність

часовість

неологічність

заглибленість

позитивність

чарівливість

експресивність

емоційність

екзистенціальність

метафоричність

виразність

гумористичність

саркастичність

ірочність

забарвленість

Загальні

властивості

змісту,

суті,

смислу,

контексту

інформації

кодованість

діалектність

делікатність

персоніфікованість

зашифрованість

моторошність

неоковирність

ненормативність

колоритність

гіперболічність

масовість

популярність

поміркованість

пестливість

риторичність

сатиричність

пародійність

каламбурність

усіченість

шарадність

гротескність

іншомовність

негативність

панорамність

духовність

узагальненість

культовість

запозиченість

медитативність

динамічність

прикметність

уявність

зрозумілість

градаційність

сенсовість

переплетеність

схрещуваність

зрощеність

бурлескність

травестійнсть

кумедність

вживаність

частотність

жахливість

страхітність

сумісність

спільність

дошкульність

повчальність

афористичність

химерність

передбаченість

конкретність

суперечливість

неузгодженість

фонічність

витонченість

комічність

своєрідність

привабливість

величність

жартівливість

потворність

урізноманітненість

інтересність

мозаїчність

калейдоскопність

ілюзорність

структурність

серйозність

стильність

збагаченість

індивідуальність

персофікованість

атрибутивність

коштовність

регалійність

спрямованість

громадянськість

вульгарність

яскравість

призначеність

прихованість

невидимість

пейзажність

портретність

живописність

народність

ментальність

фольклорність

гнучкість

інверсійність

історичність

сучасність

святість

оптимальність

парадоксальність

гострість

памфлетність

полемічність

сповненість

проклятість

смисловість

роздратованість

заклинаність

фактичність

явищність

процесуальність

схематичність

комбінованість

збентеженість

закличність

наказовість

спонукальність

імперативність

розмірковуваність

первісність

тлумачність

сутність

трепетність

справжність

підсиленість

забарвленість

зрощеність

нудотність

пишнотність

епічність

прикметниковість

епітетність

фігурність

красивість

влучність

невичерпність

екскурсивність

роздумливість

завершеність

враженість

інструментованість

яскравість

прозорість

виваженість

готичність

враженість

перемежованість

схожість

подібність

алегоричність

зневажливість

ніжність

жіночість

чоловічість

автобіографічність

акцентованість

сумирність

пониженість

інтенсивність

пестливість

схвильованість

домисленість

маловживаність

невдачність

критичність

особливість

настроєвість

колоритність

болісність

афектність

відвертість

щирість

нерішучість

зачарованість

вульгарність

відгукуваність

тлумачність

епіграмність

секретність

потаємність

інтимність

актуальність

евфемістичність

потойбічність

непристойність

небезпечність

лукавість

делікатність

лайливість

грубість

образливість

сороміцність

всеохопність

детальність

чуттєвість

осягненість

кульмінаційність

ослабленість

мальовничість

незвичайність

колючість

тотурність

вживаність

винятковість

наповненість

перебільшеність

важливість

перенесеність

безпосередність

максимальність

надмірність

живописність

наснаженість

блискучість

манерність

благопристойність

оттожненість

звичаєвість

згалеженість

повторюваність

передумовність

післяумовність

вагомість

нечуваність

небаченість

головомність

незрозумілість

потворність

негідність

милостивість

неповторність

унікальність

множиність

проникненість

винятковість

тверезість

нарцисність

гострість

трагічність

драматичність

нестандартність

оригінальність

частковість

наснаженість

недосконалість

вживаність

милозвучність

розгорнутість

переказзуваність

архетипність

поміркованість

адекватність

жартівливість

 

 
























































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

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

Реалізувати кодування властивостей  гіпертексту на веб-сторінці  мовою розмітки HTML

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

 

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

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

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

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

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

 

 

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "w3.org/TR/html4/loose.dtd">

<html>   <head> <title> Mій ліцей </ title> </head><body bgcolor = "silver" text = "green">

 <p> Я вчусь у ліцеї №7. Він знаходиться в Вінниці в районі Єрусалимки. </р>

<р> Вінниця - це моє рідне місто. </р>   <р> Я дуже люблю вивчати історію Вінниці, особливо: </р><р> Історія міста періоду І-ої світової війни; <br> Історія міста періоду ІІ-ої світової війни;</p><р align = '' center "> Історія міста періоду відлиги;

<br> Історія міста періоду визвольних змагань</р><р align = "right"> Історія міста кінця ХХ століття</р> <р align = "left"> Доренко Максим </р><р>Я вивчаю першоджерела кожного періоду в державному архіві міста. <br>Читаю старі газети, журнали, статистичні довідники. </p><p align = '' center "> Вінниця має багату історію, зокрема: </р>

<р> У місті Вінниці є знаменитий  театр  ляльок.</р> <h1> Місто Вінниця має історичний музей.</h1><р> У центрі Вінниці є художній музей</р>   <h2> Місто Вінниця має музей літаків </h2><р> Місто Вінниця має музей Пирогова </Р>  <p> <strong> Вінниця</ strong> - перлина Поділля. </Р><р> <em> Вінниця</ em> - це моя  Батьківщина. </Р> 

<р> <u>Вінниця </ u> - це місто наукової та творчої інтелегенції </р>   <р> У нас у місті є світло-музичний фонтан. <s>Сучасний фонтан розташований  на річці Південний Буг</ S>, біля центрального мосту.</Р><p> Цікаво, що вздовж цієї річки між центральним та київським мостами розташовані красиві храми. <sup>1</sup>  Річкою курсують туристичні катери. </р>

<р> Вінницька формула  цілющої вроди:  щось на зразок, цілющої  формули води:

 H <sub> 2 </sub> О. </p><р> У місті Вінниці дуже низькі  ціни на житло, <font size = +2> приблизно 1000 грн за 1 кв.од. </font> і навіть наймодерновіша архітектура житлових масивів. </Р>     <p> <font size = '' 6 "> Вінниця </font> - це потужний обласний центр , повз який проходить  міжнародна магістраль зі сходу на захід країни</р>

<p> <font color = "red">Вінниця  </font> - зелене місто, що має аєропорт. </р>

<p> <font face = "courier new"> Вінниця  </font> -  це місто чистої води. </р> 

<р>Вінниця має транспортні сполучення з столицями європейських  країн:  

<ul>  <li> Молдови- Кишинів, </li>     <li> Польщі - Варшава, </li><li>Болгарії - Софія, </li>   <li> Чехії - Прага, </li> <li> Словаччини - Братислава, </li> </ul> </p>

<р> У Вінниці є більше сотні підприємств та заводів: 

<ОL>  <li> завод штучних діамантів, </li>    <li> завод холодильних агрегатів, </li>

<li> швейна фабрика «Вінничанка»,</li>  <li> швейна фабрика «Подолянка»,</li>

<li> завод «Маяк», </li>    <li> підприємство «ЦКБТ», </li> 

<li> кондитерська фабрика «Roshen» </li>  </ОL> </р>

<р> <а href = "https://sch7.edu.vn.ua"> Це посилання на веб-сайт нашого ліцею. </а> </р>

<р> <а href = ''E-mail: lyceum7@i.ua"> </а> </р>

<р> Це фотографія нашого ліцею  шириною близько 6,5 см і висотою близько 5 см, вирівняна вправо. </р>

<img src = "Lyceum.png" width = "250" height = "250" hspace = "15" vspace = "15" align = "right"> </body>

</html>

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

Завдання 3. Набрати в текстовому редакторі Блокнот наступний код-текст і зберегти його у файл з розширенням html, а саме: ПРОБА1.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”>

<Font size="25" color=”0000dd” face=”Arial, Times New Roman, Serif”>

<P style=”font-family: arial, calibri; font-size: 40pt; font-style: oblique;  font-weight: bold; color:#0000d; line-height:24pt; ”> Я навчаюся кодувати шрифти на веб-сторінці</P>

</font>.

<P style=”font-family: arial, calibri; font-size: 16pt; font-style: oblique;  font-weight: bold; color:#22ffdd; line-height:14pt; ”> Текстовий блок 1 веб-сторінки</P>

<IMG scr=”foto1.png” width=”200pt”  height=”200pt”   border==”10pt”  aling=”middle”  alt=”Таблиця1” hspace=”20pt” vspace=”30pt”>

<P style=”font-family: arial, calibri; font-size: 16pt; font-style: oblique;  font-weight: bold; color:#22ffdd; line-height:14pt; ”>

<Font size="18" color=”gg00dd” face=”Arial, Times New Roman, Serif”>

 <BR><B>Напівжирний текст</B>

<BR> <I>Курсив</I>

 <BR><U>Підкреслений текст</U> 

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

</P></font>.

<IMG scr=”foto2.png” width=”200pt”  height=”200pt”   border==”10pt”  aling=”top”  alt=”Таблиця2” hspace=”20pt” vspace=”30pt”>

<P style=”font-family: arial, calibri; font-size: 16pt; font-style: oblique;  font-weight: bold; color:#22ffdd; line-height:14pt; ”> Текстовий блок 3 веб-сторінки</P>

<IMG scr=”foto3.png” width=”200pt”  height=”200pt”   border==”10pt”  aling=”bottom”  alt=”Таблиця3” hspace=”20pt” vspace=”30pt”>

<Font size(16) color=”0099dd” face=”Arial, Times New Roman, Serif”>

<P style=”font-family: arial, calibri; font-size: 16pt; font-style: oblique;  font-weight: bold; color:#22ffdd; line-height:14pt; ”>

<Font size="40" color=”000000” face=”Arial, Times New Roman, Serif”>

 <BR>Текстовий блок 4 веб-сторінки

<BR>Текстовий блок 5 веб-сторінки

 <BR>Текстовий блок 6 веб-сторінки

</font>. </P>

<br> Я вчуся кодувати заголовки, гіперпосилання, списки

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

<OL>

<LI>Перший<A href=”http://inf11klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 11 клас</A></LI>

<LI>Другий<A href=”http://inf10klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 10 клас</A></LI>

<LI>Третій <A href=”http://inf9klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 9 клас</A></LI>

<LI>Четвертий <A href=”http://inf8klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 8 клас</A></LI>

<LI>П'ятий <A href=”http://inf7klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 7 клас</A></LI>

<LI>Шостий<A href=”http://inf6klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 6 клас</A></LI>

<LI>Сьомий <A href=”http://inf5klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 5 клас</A></LI>

<LI>Восьмий <A href=”http://inf4klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 4 клас</A></LI>

<LI>Дев'ятий <A href=”http://inf3klas.blogspot.com/”>

<IMG scr=”image/grafic1.png”> Інформатика 3 клас</A></LI>

<LI <LI value=”30”>Тридцятий </LI>

<LI>................</LI>

<LI <LI value=”100”>Сотий </LI>

 </OL>

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

<UL>

<LI>Перший</LI>

<LI>Другий</LI>

<LI type=”circle”>Третій</LI>

<LI>................</LI>

<LI <LI type=”disc”>Тридцятий </LI>

<LI>................</LI>

<LI type=”square”>Сотий </LI>

 </UL>

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

<br> Столиці  країн: <ul>

<li> Молдови- Кишинів, </li>

<li> Польщі - Варшава, </li>

<li> Болгарії - Софія, </li>

<li> Чехії - Прага, </li>

<li> Словаччини - Братислава, </li>

</ul>

</H3>

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

<br> Країни Східної Європи:

<li> Болгарія, </li>

<li> Польща, </li><li> Сербія</li>

<li> Словаччина </li><li> Словенія, </li><li> Чехія, </li><li> Хорватія </li>

</H4>

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

<BR>

<Img src = "mgu.jpg" width = "100" height = "50" hspace = "15"

vspace = "15" align = "left">

<BR><BR><BR>

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

<BR>

<Img src = "mgu.jpg" width = "250" height = "250" hspace = "15"

vspace = "15" align = "left">

<br> Я вчуся кодувати таблицю

<TABLE>

<TR>

<TD><A HREF="foto/l.html" TARGET="_blank">

<IMG SRC="foto/l.jpg" WIDTH=180 HEIGHT=150 ALT="Тренажерний зал">

</TD>

<TD><A HREF="foto/2.html" TARGET="_blank">

<IMG SRC="foto/2.jpg" WIDTH=180 HEIGHT=150 ALT="Гімнастика в нашій школі">

</TD>

<TD><A HREF="foto/3.html" TARGET="_blank">

<IMG SRC="foto/3.jpg" WIDTH=180 HEIGHT=150 ALT="Нарівні  з чемпіонами">

</TD>

<TD><A HREF="foto/4.html" TARGET="_blank">

<IMG SRC="foto/4.jpg" WIDTH=180 HEIGHT=150 ALT="KBK"></TD></TR>

<TR><TD><A HREF="foto/5.html" TARGET="_blank"><IMG SRC="foto/5.jpg"

WIDTH=180 HEIGHT=150 ALT="Шкільний xop"></TD>

<TD><A HREF="foto/6.html" TARGET="_blank">

<IMG SRC="foto/6.jpg" WIDTH=180 HEIGHT=150 ALT="Haші таланти"></TD>

<TD><A HREF="foto/7.html" TARGET="_blank"><IMG SRC="foto/7.jpg"

WIDTH=180 HEIGHT=150 ALT="Відкриття Золотої пекторалі"></ТП>

<TD><A HREF="foto/8.html" TARGET="_blank">

<IMG SRC="foto/8.jpg" WIDTH=180 HEIGHT=150 ALT=" Наші тaлaнти"></TD>

</TR>

</TABLE>

 </BODY>

</HTML>

 

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

 

 

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

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

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


 *******



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

 









































Немає коментарів:

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