Дистанційна освіта з інформатики в період лютий 2021 року
15.02.2021 - 21.02.2021
Тема: Поняття функціональності інтерфейсу. Поняття цілісності доповнюваних елементів і функцій веб-сайту.
Теоретична частина.
Веб-дизайн та веб-розробка
Як створити першу веб-сторінку?
Що таке HTML, CSS, JavaScript?
Що таке веб-дизайн (web design) та веб-розробка (web development) і яка між ними різниця?
З чого складається веб-сторінка ?
А що таке HTML-код?
Що таке комп'ютерна графіка?
Приклад застосування комп'ютерної графіки у фільмі:
The Great Gatsby VFX from Chris Godfrey on Vimeo.
Як виглядають сучасні фільми без спецефектів?
10 модних термінів дизайну, які має знати кожен (стаття) https://designtalk.club/10-modnyh-terminiv-dyzajnu-yaki-maye-znaty-kozhen/
Терміни дизайну, які мають знати всі (статті):
https://designtalk.club/terminy-dyzajnu-yaki-maye-znaty-kozhen-chastyna-1/
https://designtalk.club/terminy-dyzajnu-yaki-mayut-znaty-vsi-chastyna-2/
https://designtalk.club/terminy-dyzajnu-yaki-mayut-znaty-vsi-kernyng-lossy-hex/
https://designtalk.club/terminy-dyzajnu-yaki-mayut-znaty-vsi-panton-ppi-rgb/
https://designtalk.club/terminy-dyzajnu-yaki-mayut-znaty-vsi-zasichky-stem-triadni-kolory/
Тенденції графічного дизайну
15 тенденцій графічного дизайну в 2018 році (стаття) https://mavericks.com.ua/15-tendentsij-grafichnogo-dyzajnu-u-2018-rotsi/
Тренди дизайну 2019: https://designtalk.club/10-tendentsij-grafichnogo-dyzajnu-2019/
Тенденції дизайну (стаття) https://vitamin-advertising.com/tendentsiyi-dizajnu-lakonichnist-ruh-ob-yem/
Як стати дизайнером?
Хто такий графічний дизайнер: https://designtalk.club/hto-takyj-grafichnyj-dyzajner-i-shho-treb/
Як стати дизайнером – безпрограшний рецепт із 25 кроків (стаття) https://designtalk.club/yak-staty-dyzajnerom-bezprograshnyj-retsept-iz-25-krokiv-chastyna-1/
50 фактів про розвиток дизайнера (стаття) https://telegraf.design/50-faktiv-pro-rozvitok-dizajnera-chastina-1/
Практична частина.
Завдання 1. Створити HTML-документ за допомогою
найпростішого текстового редактора БЛОКНОТ.
1. Відкрийте текстовий редактор Блокнот (Notepad).
2. Для створення HTML-документа в Блокноті наберіть такий текст:
<HTML>
<HEAD>
<TITLE>Купівля\продаж</TITLE>
</HEAD>
<BODY>
<Н1>Торговельні об'єкти Вінниччині</Н1>
<Н2>Супермаркети</Н2>
<Р>На Вінниччині діє мережа магазині в Інтермаркет. У кожному
районі є торговельний об'єкт.
<Р>Одним і з таких магазині в став
нещодавно відкрити й супермаркет "АРСЕН".
<HR>
Це торговельний центр із багатьма відділами
та зручною системою
обслуговування покупців.
<BR>Його можна назвати торговельним містечком .
</BODY>
<HTML>
3. Збережіть файл на жорсткому диску у створеній заздалегідь
папці, назвавши його, наприклад, 1.html. Закрийте текстовий
редактор.
4. Запустіть браузер Internet Explorer та відкрийте файл 1.html.
Перегляньте отриманий результат.
5. Проаналізуйте, як відтворено веб-сторінку.
Завдання 2. Створити у HTML-документі таблицю,
в комірки якої вставити ілюстрації
до веб-сайту навчального закладу.
<HTML>
<BODY>
<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>
Усі зображення розміщені в поточній
папці в підкаталозі foto. Кожний малюнок, вставлений
у комірку таблиці, є посиланням, що вказує на HTML-документ,
тіло якого містить тег вставляння того самого малюнка-гіперпосилання.
Наведемо приклад одного з таких документів — 3.html.
Використання зображень у веб-документах
Завдання 3.
Створити у HTML-документі таблицю, в комірки
якої вставити розклад уроків до веб-сайту
навчального закладу.
HTML-код для створення цієї таблиці матиме такий вигляд:
<HTML>
<TITLE>Приклад простої таблиці</TITLE>
<BODY>
<TABLE BORDER="1">
<САРТION>Розклад уроків</САРТION>
<TR>
<ТН>Понеділок</ТН>
<ТН>Вівторок</ТН>
<ТН>Середа</ТН>
<ТН>Четвєр</ТН>
<ТН>П'ятниця</ТН>
</TR>
<TR>
<TD>1. Алгебра</TD>
<TD>1. Українська мова</TD>
<TD>1. Зарубіжна література</TD>
<TD>1. Географія</TD>
<TD>1. Хімія</TD>
</TR>
<TR>
<TD>2. Іноземна мова</TD>
<TD>2. Хімія</TD>
<TD>2. Геометрія</TD>
<TD>2. Фізична культура</TD>
<TD>2. Іноземна мова</TD>
</TR>
<TR>
<TD>3. Фізична культура</TD>
<TD>3. Алгебра</TD>
<TD>3. Іноземна мова</TD>
<TD>3. Фізика</TD>
<TD>3. Геометрія</TD>
</TR>
<TR>
<TD>4. Географія</TD>
<TD>4. Інформатика</TD>
<TD>4. Трудове навчання</TD>
<TD>4. Українська мова</TD>
<TD>4. Українська література</TD>
</TR>
<TR>
<TD></TD>
<TD>5. Фізика</TD>
<TD>5. Українська література</TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Осмислити таблицю тегів НТМL
|
Тег |
Опис тега |
Приклад |
|
|
<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"> |
|
