11 клас. Інформатика. Дистанційне навчання: 06.12.2021 - 12.12.2021 Створення гіперпосилань на веб-сторінці

06.12.2021 - 12.12.2021

Тема: Створення та реалізація інформаційної веб-сторінки з гіперпосиланнями на об’єкти внутрішньої структури веб-сайту та з гіперпосиланнями на зовнішню мережу.

Практична частина

Тема: Створення і налаштування HTML-шаблонів для інформаційного веб-сайту про економіку міста Вінниці

Завдання 1. Створити папку на Робочому столі з назвою «Веб-сайт про економіку міста Вінниці». Набрати в текстовому редакторі Блокнот наступний текст html-кодів та зберегти його у файл з розширенням html.

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

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

2. Зберегти даний документ під іменем site1.html на Робочий стіл у відповідну папку.

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

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

HTML-реалізація кодів

<!-Інформаційну веб-СТОРІНКУ СТвоРЕНО 06.12.2021 >

<HTML>

<HEAD>

<TITLE>"Економіка Вінниці в ХХІ столітті"</TITLE>

</HEAD>

<BODY bgcolor="#FFFFOO">

 Це шаблон ІНФОРМАЦІЙНОЇ веб-сторінки для реалізації веб-сайту

<A href="index1.html"> Оце тут розміcтити посилання на головну веб-сторінку </A>

<A href="wiki2.html"> Оце тут розмістити посилання на сторінку Вікіпедiї </A>

Отут вам треба розмістити декілька гіперпосилань на додаткові джерела інформації про сучасну економіку у Вінниці.

<A href="site1.html">Це звичайне гіперпосилання №1 на іншу інформаційну веб-сторінку </A>

<A href="site2.html">Це звичайне гіперпосилання № 2 на іншу інформаційну веб-сторінку</A>

<A href="site3.html">Це звичайне гіперпосилання № 3 на іншу інформаційну веб-сторінку</A>

<A href="site3.html">Це звичайне гіперпосилання № 4 на іншу інформаційну веб-сторінку</A>

Проектна робота ліцеїста Варави Люпонюка 

"Дослідження промисловості міста Вінниці в першій чверті ХХІ століття"

 Розділ 1. Занепад промисловості Вінниці в 2000-2001 рр.

<A href="index1.html"><Palign="center">Отут треба розмістити гіперпосилання на сайт статистики Вінницької області</A>

 Отут розміщується Діаграма 1.<IMG src="images/d1.gif" align="left">

 Отут розміщується текстовий блок 1. 

Отут розміщується Діаграма 2.<IMG src="images/d2.gif" align="left">

 Отут розміщується текстовий блок 2. 

Отут розміщується фото руїн хім.заводу<IMG src="images/d2.gif" align="left"> Фото1.

 Отут розміщується текстовий блок 3. 

Отут розміщується фото руїн заводу тракторних агрегатів<IMG src="images/d2.gif" align="left">Фото2.

 Отут розміщується текстовий блок 4. 

07.12.2021

 

 <A href="../index1.html">Головна сторінка</A>

 <A href="menu.html">меню веб-сайту</A>

 ОТУТ РОЗМІСТИТИ ВІКНО ДЛЯ ВІДЕОТРАНСЛЯЦІЇ 

<EMBED src="../music/SCRABLE5.mid" width="pixel" height="pixel" autoplay="true" controller="false" loop="true">

</BODY>

</HTML>

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

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

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

2. Зберегти даний документ під iменем menu1.html на Робочий стіл у відповідну папку.

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

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

HTML-реалізація кодів

<!-цю веб-СТОРІНКУ МЕНЮ СТвоРЕНО 06.12.2021 >

<HTML><HEAD><TITLE>MENU</TITLE></HEAD>

<BODY bgcolor="#FFFFOO"> 

<A href="../SBORNIK/SBORNIK/menu.html">Головна сторінка

</A>

 

<a href=http://www.bigmir.net/?cl=56083 target=_blank><script language="javascript"><!--

bmQ='<img src=http://c.bigmir.net/?s56083&t17'

bmD=document

bmD.cookie="b=b"

if(bmD.cookie)bmQ+='&c1'

//--></script>

<script language='jscript'><!--

obHP.style.behavior="url('#default#homePage')";

obHP.addBehavior('#default#homePage');

if(obHP.isHomePage(window.location.href))bmQ+='&h1';

//-->

</script>

<script language="javascript1.2"><!--

bmS=screen;bmQ+='&d'+(bmS.colorDepth?bmS.colorDepth:bmS.pixelDepth)+"&r"+bmS.width;

//--></script><script language="javascript"><!--

bmF = bmD.referrer.slice(7);

((bmI=bmF.indexOf('/'))!=-1)?(bmF=bmF.substring(0,bmI)):(bmI=bmF.length);

if(bmF!=window.location.href.substring(7,7+bmI))bmQ+='&f'+escape(bmD.referrer);

bmD.write(bmQ+" border=0 width=88 height=63 alt='bigmir TOP100'>");

//--></script></a> 

 

 <FONT face="arial,helvetica,sans-serif" size="8"

color="#OOOOFF">

<CENTER>Меню  інформаційного веб-сайту Варави Люпонюка  <IMG src="../sbornik/foto.JPG" width="150" height="200">

 

 Причини занепаду економіки Вінниці в 2000-2001 рр.

 

<A href="t41.html">Розвиток економіки Вінниці в 2006-2010 рр

</A>

<A href="T42.html">Стагнація економіки Вінниці в 2010-2012 рр</A>

<A href="T43.html">Ріст економіки Вінниці в 2013-2014 рр</A>

<A href="T44.html">Різкий спад економіки Вінниці в 2014-2015 рр</A>

<A href="t45.html">Економічна криза у Вінниці в 2016-2017 рр</A>

<A href="t46.html">Економічний підйом економіки Вінниці в 2018-2019 рр</A>

<A href="t47.html">Глобальна криза у Вінниці в 2019-2020 рр</A>

<A href="T48.html">Інвестиційний портфель розвитку міста Вінниці</A>

 

<A href="T49.html">Сучасна інфраструктура міста Вінниці</A>

 

<A href="T50.html">Новітні підприємства у Вінниці </A>

<A href="t1.html">Доба трансцендентної економіки у Вінниці</A>

</CENTER>

 

 

 <A href="../sbornik/menu.html">Головна сторінка

</A>

</BODY>

</HTML>

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

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

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

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

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

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

HTML-реалізація

Головний HTML-файл має назву index.html

HTML-файл зберегти в папці: «Веб-сайт про економіку Вінниці ХХІ ст.»

Реалізація кодування головного HTML-файлу

<!DOCTYPE html>

<html>

<head>

<title>Головна сторінка</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<header>

<div class="logo"><h1>Самостійно налаштувати і вставити логотип ліцею№ 7, що висить на сайті ліцею <h1></div>

<div>

Самостійно реалізувати та налаштувати посилання на HTML-файли для таких кнопок.

<button class="download">Завантажити</button>

<button class="menu home">Історія Вінниці (це гіперпосилання на відповідному сайті)</button>

<button class="menu">Про сучасні новобудови міста Вінниці</button>

<button class="menu" >Про найвідоміші брени та фірми міста Вінниці</button>

<button class="menu">Блоги економістів міста Вінниці </button>

<button class="menu" >Хронологія розвитку міста Вінниці</button>

</div>

<div class="touch">

<button class="touch-button">Зображення якісних фото ліцею 7</button>

</div>

</header>

<main>

<div id="home" class="block">

<div class="home-text">

<h3>Самостійно вставити на веб-сторінку таблицю , в якій подано текстом різні марки найкращих заводів Вінниці</h3>

Заповніть таблицю правильними гіперпосиланнями, вставити зображення смартфона у клітинки таблиці і змініть колір тла комірок в таблиці

<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"> <a href="http://inf11klas.blogspot.com/"> корпорація ROSHEN - налаштувати посилання на сайт цієї фірми </a> Відвідай форум покупців продукції ROSHEN <img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"></td>

<td align=”left” valign=”bottom” ” widht=”125" bgcolor="11ff00" height="87"><a href="http://inf10klas.blogspot.com/"> корпорація ******** - налаштувати посилання на сайт цієї фірми </a>Відвідай форум користувачів та покупців продукції фірми ****** <img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"> </td>

<td align=”right” valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77"><a href="http://inf9klas.blogspot.com/"> корпорація *******- налаштувати посилання на сайт цієї фірми </a>Відвідай форум користувачів послугами фірми ******Y<img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"></td>

<td align=”right” valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77"><a href="http://inf18klas.blogspot.com/"> корпорація ******** -налаштувати посилання на сайт цієї фірми </a> Відвідай форум користувачів та покупців продукції фірми *******<img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"> </td>

</tr>

<tr>

<td bgcolor="55ff00" height="57"> <a href="news2.html"> корпорація ****** - налаштувати посилання на сайт цієї фірми </a> Відвідай форум користувачів послугами фірми *********<img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"></td>

<td bgcolor="eeee00" height="87"> <a href="news3.html">корпорація *******- налаштувати посилання на сайт цієї фірми </a> Відвідай форум користувачів послугами фірми ********<img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"></td>

<td bgcolor="bbbb00" height="97"> <a href="news4.html" корпорація >********- налаштувати посилання на сайт цієї фірми </a> Відвідай форум користувачів послугами фірми********<img src ="images1.png" alt= "Вставити зображення логотипу та пропишіть в кодах назву цього зображення"></td>

<td bgcolor="bbaa00" height="97"> <a href="news5.html"> корпорація ******* - налаштувати посилання на сайт цієї фірми </a> Відвідай форум користувачів ******* <img src ="images1.png" alt= "Вставити зображення логотипу фірми та пропишіть в кодах назву цього зображення"></td>

</ tr>

<tr>

<td bgcolor="55fab0" height="77"> <a href="http://matryza.blogspot.com/2014/05/">корпорація ******* - налаштувати посилання на сайт цієї фірми </a> <img src ="images1.png" alt= "Вставити зображення логотипу фірми та пропишіть в кодах назву цього зображення">

</td>

<td bgcolor="00ff99" height="67"> <a href="http://vinnmatolymp.blogspot.com/"> корпорація - налаштувати посилання на сайт цієї фірми </a> <img src ="images1.png" alt= "Вставити зображення логотипу фірми та пропишіть в кодах назву цього зображення"></td>

<td bgcolor="ggff00" height="57"> <a href="http://fun0432.blogspot.com/2017/02/blog-post_10.html"> Aкорпорація ******* - налаштувати посилання на сторінку у Вікіпедеї</a> <img src ="images1.png" alt= "Вставити зображення логотипу фірми та пропишіть в кодах назву цього зображення"></td>

<td bgcolor="ggdd00" height="57"> <a href="http://fun0432.blogspot.com/2017/02/blog-post.html">корпорація ******* -налаштувати посилання на сторінку у Вікіпедеї</a> <img src ="images1.png" <img src ="images1.png" alt= "Вставити зображення слоготипу фірми та пропишіть в кодах назву цього зображення"></td>

</tr>

</table>

<h3>Самостійно вставити список відомих фірм, які виробляють продукцію і мають свої офіси у Вінниці</h3>

Самостійно додати зображення логотипу чи герба Вінниці.

<button class="download">Завантажити файл про коротку сучасну історію міста Вінниці</button>

</div>

<div >

<img src="Mockup_2.png" class="home-img">

</div>

<div id="about" class="block">

</div>

<div id="services" class="block">

</div>

<div id="blog" class="block">

</div>

<div id="contacts" >

</div>

</main>

<footer>Самостійно налаштувати підвал веб-сторінки "фейковими" телефонами та сайт-адресами місця розташування ліцею №7

</footer>

</body>

</html>

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

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

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

2. Зберегти даний документ під iменем style.css на Робочий стіл у відповідну папку.

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

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

Інформація про 4-ий CCS -файл

CCS-файл стилів має назву style.css

Цей CCS-файл зберегти в папці: «Веб-сайт про екноміку міста Вінниці»

Реалізація кодування CCS-файлу

@font-face{ font-family: "JosefinSans"; src: url("JosefinSans-VariableFont_wght.ttf") format("truetype");

font-style: normal; font-weight: normal; }

body{ margin: 0px; font-family: "JosefinSans"; }

header{ display: flex; flex-direction: row; justify-content: space-around; height: 10vh; background: none;

position: fixed; width: 200vh; padding-top: 15px; }

.logo{ color: white; }

.menu{ background: none; border: none; height: 40px; width: 70px; color: white; margin-top: 10px; }

.touch-button{ height: 40px; width: 140px; border-radius: 20px; background: none; border: 1px solid white; color: white; margin-top: 5px; }

.block{ height: 100vh; padding-top: 20vh; }

#home{ background-color: #5c1dd1; display: flex; flex-direction: row; justify-content: space-around;}

.home-text{ color: white; width: 40%; height: 80%; font-size: 40px; }

.home-text-small{ font-size: 10px; color: white; width: 50%; text-align: center; }

.download{ border-radius: 20px; background: #d14b62; border: 1px solid #d14b62; height: 40px; width: 140px; color: white; }

.home-img{ height: 450px; margin-right: 150px; }

#about{ }

#services{}

#blog{}

#contacts{}

Результати виконання практичної частини ( скріншоти вами налаштованих веб-сторінок) надіслати на електронну адресу: vinnser@gmail.com

11 клас. Інформатика. Дистанційне навчання

неділя, 5 грудня 2021 р.

06.12.2021 - 12.12.2021 Створення гіперпосилань на веб-сторінці

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

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

неділя, 5 грудня 2021 р.

06.12.2021 - 12.12.2021 Створення гіперпосилань на веб-сторінці

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

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

неділя, 5 грудня 2021 р.