08.11.2021-15.11.2021
Тема: Створення і реалізація
інформаційної моделі про події на основі зв’язаних веб-сторінок.
Практична частина
Завдання 1. Виконати зв’язування веб-сторінок відповідно до інструкції.
Інструкція для створення навігації
на сайті на основі п’яти HTML-документів
1.Створити папку з назвою «Звязування
веб-сторінок»
2.За
допомогою редактора БЛОКНОТ
створюємо п’ять HTML-документів
за
даним нижче кодуваням:
Інформація про 1-ий HTML-файл.
Головна сторінка сайту зберігається в цій папці,
як файл, що має назву: index.html
Ця веб-сторінка має такий зміст:
1) Рядок «Меню» з активними словами
2) Календар подій у
вигляді таблиці з гіперпосиланнями на веб-сторінки
Реалізація головної
сторінки сайту у вигляді HTML-кодування для 1-ого
HTML-файлу::
<!DOCTYPE
html>
<html
lang="ukr-UA">
<head>
<title>Новини
нашого ліцею</title>
</head>
<BODY
bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111”
background=”bg.jpg”>
<p>Моделювання
навігації на веб-сторінці та її реалізація на головній сторінці сайту
<p>Зразок
рядка меню
<P> <a href="http://mahikquatrat.blogspot.com/"> Веб-сторінка 1</a> <a
href="http://matryza.blogspot.com/2014/05/"> Веб-сторінка 2</a>
<a
href="http://opt10klas.blogspot.com/"> Веб-сторінка3</a> <a
href="https://0432doscoole.blogspot.com/"> Веб-сторінка 4</a>
<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”> <P><Font
size=40" color=”#abcdef” face=”Arial, Times New Roman, Serif”> Календар
подій на сайті ліцею
</font></caption>
<tr>
<td
align=”midlle” valign=”top” ”
widht=”150"
bgcolor="60ff00" height="97"> <a href="http://inf11klas.blogspot.com/"> це посилання на 1-шу подію </a> <p>#Відвідай практичний семінар для 11-класників 18:00 13.11.2021
</td>
<td align=”left” valign=”bottom” ” widht=”125" bgcolor="11ff00"
height="87"><a href="http://inf10klas.blogspot.com/"> це посилання на 2-гу подію </a><p>#Відвідай практичний семінар для 10-класників 19:00
13.11.2021 </td>
<td align=”right” valign=””midlle” ” widht=”105"
bgcolor="ddff00" height="77"><a
href="http://inf9klas.blogspot.com/"> це посилання на 3-шу подію </a><p>#Відвідай практичний семінар для 9-класників 20:00 13.11.2021</td>
<td
align=”right” valign=””midlle” ”
widht=”105" bgcolor="ddff00" height="77"><a
href="http://inf18klas.blogspot.com/"> це посилання на 4-ту подію </a> <p>#Відвідай практичний семінар для 8-класників 21:00 13.11.2021
</td>
</tr>
<tr>
<td
bgcolor="55ff00" height="57"> <a
href="news2.html"> Гіперпосилання на зміст 1-ої події </a>
<p>*Топ-подія у місті Вiнниці </td>
<td
bgcolor="eeee00" height="87"> <a href="news3.html"> Гіперпосилання на зміст 2-ої події </a>
<p>*Цікава-подія у місті Вiнниці </td>
<td
bgcolor="bbbb00" height="97"> <a
href="news4.html"> Гіперпосилання на зміст 3-ої події </a> <p>*Вирішальна стадія
проектування метро у місті Вiнниці</td>
<td
bgcolor="bbaa00" height="97"> <a
href="news5.html">Гіперпосилання на зміст 4-ої події </a> <p>* Остаточна перемога
збірної Вінниці у чемпіонаті світу</td>
</ tr>
<tr>
<td bgcolor="55fab0"
height="77"> <a
href="http://matryza.blogspot.com/2014/05/"> Посилання на майстер-клас "Масиви для
просунутих програмістів" </a> <p><img src ="images1.png">
</td>
<td
bgcolor="00ff99" height="67"> <a
href="http://vinnmatolymp.blogspot.com/"> Посилання на майстер-клас
"Функції для просунутих програмістів" </a> <p><img src ="images1.png"></td>
<td bgcolor="ggff00"
height="57"> <a
href="http://fun0432.blogspot.com/2017/02/blog-post_10.html">
Посилання на майстер-клас "Функціонали для просунутих
програмістів"</a> <p><img src ="images1.png"></td>
<td bgcolor="ggdd00"
height="57"> <a
href="http://fun0432.blogspot.com/2017/02/blog-post.html">
Посилання на майстер-клас "Оператори для просунутих
програмістів"</a> <p><img
src ="images1.png" alt= "Пропишіть в кодах назву цього зображення"></td>
</tr>
</table>
</body>
</html>
Інформація про 2-ий HTML-файл.
Назва файлу для сторінки першої події:
news1.html
Сторінка
містить:
·
Інформація про 1-шу подію
·
Зображення 1-ої події
·
Кнопка «Головна сторінка»
Реалізація службової сторінки
сайту у вигляді HTML-кодування для 2-ого HTML-файлу:
<html>
<head>
<title>
2-ій файл. Зміст 1-ої події</title>
</head>
<body
style="background: silver">
<p>Моделювання
навігації на веб-сторінці та її реалізація на службовій сторінці сайту
<p>
<a href="index1.html">Головна сторінка</a>
<p>Зміст 1-ої події
<p><p>Майстер-клас
по робототехніці відбувся 7 вересня 2021
року у Вінницькому ліцеї №7 імені
Олександра Сухомовського в STREAM-лабораторії.
<h1>Місця опрацювання майстер-класів</h1>
<ol>
<li>
Роботи-гуманоїди
<ol>
<li>Роботи-інтелектуали</li>
<li>Роботи-емоціонали</li>
<li>Роботи-тягачі</li>
<li>Роботи-контролери</li>
<!--
додайте елементи вкладеного списку сюди -->
</ol> </li>
<li> Роботи-звірі</li>
<li> Роботи-птахи</li>
<li>
Роботи-рептилії</li>
<li>
Роботи-комахи </li>
<li>Роботи-павуки</li>
</ol>
<p><p>Розмістіть
зображення на веб-сторінці з гіперпосиланням
<p>
<p><a href = "index1.html" >
<img src ="images2.png"
alt="Повернутися на головну
сторінку "
title ="Натисність на зображення, що
повернутися на Головну сторінку"></a>
<p><p>Розмістіть
зображення із Інтернету на веб-сторінці
<img
src ="
https://nuschool.com.ua/textbook/mathematics/1klas_4/1klas_4.files/image480.jpg"
alt="Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Інформація про 3-ий HTML-файл.
Назва файлу для сторінки другої події news2.html
Сторінка містить:
·
Інформація про 2-у подію
·
Зображення 2-ої події
·
Кнопка «Головна сторінка»
Реалізація службової сторінки
сайту у вигляді HTML-кодування для 3-ого HTML-файлу:
<html>
<head>
<title> 3-ій файл. Зміст події</title>
</head>
<body style="background: gold">
<p>Моделювання
навігації на веб-сторінці та її реалізація на службовій сторінці сайту
<p>
<a href="index1.html">Головна сторінка</a>
<p><p>Зміст 2-ої події
<p>Веб-конференція веб-дизайнерів відбулася 7 вересня 2021 року у Вінницькому ліцеї №7 імені Олександра
Сухомовського на платформі Zoom
<h1>Список заходів</h1>
<ul>
<li>Спільна онлайн-нарада учасників веб-конференції</li>
<li>Засідання секцій по різним напрямках</li>
<li>Виставка та конкурс програмних середовищ</li>
<li>Колективне
фото учасників</li>
<!--
додайте пункти сюди -->
</ul>
<p>Невпорядкований (або маркований) список використовується для
простого перерахування об'єктів, коли порядок неважливий.</p>
<p><p>Розмістіть
зображення на веб-сторінці з гіперпосиланням
<p>
<p><a href = "index1.html" >
<img src ="images3.png"
alt="Повернутися на головну
сторінку "
title ="Натисність на зображення, що
повернутися на Головну сторінку"></a>
<p><p>Розмістіть
зображення із Інтернету на веб-сторінці
<img
src =" https://kraina-stendiv.com.ua/image/data/5555555/222232.png"
alt= "Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Інформація про 4-ий HTML-файл.
Назва файлу для сторінки третьої події
news3.html
Сторінка містить:
·
Інформація про 3-у подію
·
Зображення 3-ої події
·
Кнопка «Головна сторінка»
Реалізація службової сторінки
сайту у вигляді HTML-кодування для 4-ого HTML-файлу:
<html>
<head>
<title> 4-ий ТОП-чік файл</title>
</head>
<body style="backgroung: pink">
<p>Моделювання навігації на веб-сторінці
та її реалізація на службовій сторінці сайту
<p> <a
href="index1.html">Головна сторінка</a>
<p><p>Зміст 3-ої події
<p>
7 вересня 2021 року відбувся oнлайн-форум стрімерів у Вінницькому ліцеї №7 імені Олександра Сухомовського на
платформі
Meet.
<p>Розмістіть
зображення на веб-сторінці з гіперпосиланням
<p> <p><a href =
"index1.html" >
<img src ="images4.png"
alt="Повернутися на головну сторінку "
title ="Натисність на зображення, що повернутися на Головну
сторінку"></a>
<p>Розмістіть
зображення із Інтернету на веб-сторінці
<img src =http://art-coral.com/sites/default/files/newsimgs/134213.png
alt= "Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Інформація про 5-ий HTML-файл.
Назва файлу для сторінки четвертої події news4.html
Сторінка
містить:
·
Інформація про 4-у подію та посилання відео в Ютубі або на пристрої
·
Зображення 4-ої події
·
Кнопка «Головна сторінка»
Реалізація службової сторінки
сайту у вигляді HTML-кодування для 5-ого
HTML-файлу:
<html>
<head>
<title> 4-ий ТОП-чік файл</title>
</head>
<body style="backgroung: purple">
<p>Моделювання навігації на
веб-сторінці та її реалізація на службовій сторінці сайту
<p> <a
href="index1.html">Головна сторінка</a>
<p><p>Зміст 4-ої події
<p> У Вінницькому ліцеї №7 імені
Олександра Сухомовського відбувся стрім-фестиваль
ботів 5 вересня 2021 року.
<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="video/fractal1.ogv" type='video/ogg;
codecs="theora, vorbis"'>
<source src="video/ fractal2.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/ fractal3.webm" type='video/webm;
codecs="vp8, vorbis"'>
Тег video не підтримується вашим браузером.
<a href="video/fractal4.mp4">Скачайте адресу
деякого навчального уроку із Ютубу і вставте це посилання src=" ”
</a>.
</video>
<p>Розмістіть зображення на веб-сторінці
з гіперпосиланням
<p> <p><a href =
"index1.html" >
<img src ="images5.png"
alt="Повернутися на головну сторінку "
title ="Натисність на зображення, що повернутися на Головну
сторінку"></a>
<p>Розмістіть зображення із
Інтернету на веб-сторінці
<img src =" https://studepedia.org/img/baza1/20298828972092.files/image013.jpg"
alt= "Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Результати
виконаної практичної роботи надіслати вашому учителю на електронну скриньку: vinnser@gmail.com
(Сергій Петрович)
Немає коментарів:
Дописати коментар