Дистанційна освіта з інформатики в період січня 2021 року
08.02.2021 - 14.02.2021
Тема: Зміст
веб-дизайну. Способи організації, упорядкування і розміщення текстової,
графічної , мультимедійної інформації на веб-сторінках.
Мотиваційна частина.
Ми існуємо у просторі, а простір існує в нас. У будь-якій грі, тобто в житті, немає нічого зайвого, будь-яка гра прозора і глибока за змістом, проте багато ігор складається з суперечностей, які треба узгоджувати з власним досвідом життя. А де отримати досвід успішної гри в життя, - зрозуміло де, - під час наполегливого навчання, бо це перевірена виграшна стратегія існування людства.
Теоретична частина.
1.Запитання: Що таке тег?
Відповідь:
Тег - це назва елементу, записана у кутових дужках (< >)
2.Як кодується текстова інформація на веб-сторінці?
Алгоритм кодування текстової інформації на веб-сторінці:
- Запустіть Notepad++ або Блокнот і оберіть кодування кирилиці utf-8.
- Збережіть цей документ у папці "Моя веб-сторінка" файл Sample1.html, ввівши в нього розмітку:
<!DOCTYPE html>
<html>
<head>
<title> Приклад форматування тексту </title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
- В тіло html-документа вставте текст з про Вінницю та Вінницьку область . Пам'ятайте, що в тексті автоматично "проковтуються" зайві пробіли та переноси.
- Задайте Вінниця як заголовок <h1>, а Географічне положення та Музеї Вінниці як заголовок <h2>.
- Географічний опис розпочніть з абзаца.
- Слово Вінниця на початку опису зробіть збільшеним жирним шрифтом, а фразу Вінницької області - жирним шрифтом.
- Текст "Вінницька область має шість районів: Вінницький район, Жмеринський район, Гайсинський район, Могилів-Подільський район, Тульчинський район, Хмільницький район" задайте курсивним шрифтом, а шість районів - підкресліть.
- Текст "Вінницька область" зробіть жирним та іншим кольором.
- Проведіть горизонтальну лінію (hr).
- Текст "Майдан біля Вінницької вежі" та "Історичний Музей " розпочніть з абзацу, задайте жирним шрифтом з логічним наповненням (strong), виділіть маркером (mark )та оформіть як визначення (dl, dt, dd).
Текстові елементи веб-сторінки, теги та їх атрибути.
 
 Основні теги для форматування тексту:
. . Теги
для форматування тексту (парні):
Гіперпосилання у тексті Запитання: Як кодується гіперпосилання у тексті?
Відповідь: Для організації гіперпосилань використовується тег <a>, який має обов'язковий атрибут href. Зразок кодування: <a href=https://mon.gov.ua/ua target="blank"> Міністерство</a> . При клацанні слова Міністерство здійснюється перехід на сайт міністерства освіти (атрибут href) і він відкривається на новій сторінці (атрибут target).
Запитання: Для чого використовуються гіперпосилання? Відповідь: Гіперпосилання використовують для:
Практична
частина. Завдання 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="Відкриття Золотої пекторалі"> </ТD> <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> |
Немає коментарів:
Дописати коментар