15.11.2021-21.11.2021
Тема: Створення
і реалізація інформаційної моделі про об’єкти на основі веб-сторінок зі стилями.
Практична частина
Завдання 1. Реалізувати
та налаштувати веб-сайт відповідно до
інструкції.
Інструкція для створення веб-сайту
на основі HTML-документів
1.Створити папку з назвою «Веб-сайт про смартфони»
2.За допомогою редактора БЛОКНОТ
створюємо HTML-документи
за даним нижче кодуванням:
Інформація про 1-ий 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>Самостійно
налаштувати і вставити логотип фірми, що торгує
смартфонами<h1></div>
<div>
<p
class="home-text-small">Самостійно реалізувати та налаштувати
посилання на HTML-файли для таких кнопок.</p>
<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">Зображення крутих смартфонів</button>
</div>
</header>
<main>
<div id="home"
class="block">
<div class="home-text">
<h3>Самостійно вставити на веб-сторінку таблицю , в якій подано текстом
різні марки найкращих смартфонів</h3>
<h3>Самостійно вставити на веб-сторінку список відомих фірм, які
виробляють найкращі смартфони</h3>
<p class="home-text-small">Самостійно
додати зображення якого смартфона.</p>
<button class="download">Завантажити файл про технічні характеристики смартфона</button>
</div>
<div >
<img src="Mockup_2.png"
class="home-img">
</div>
</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>Самостійно налаштувати підвал
веб-сторінки фейковими телефонами та адресами місця розташування фірми
</footer>
</body>
</html>
Інформація про 2-ий 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{}
Інформація про 3-ий HTML-файл
Створюємо файл в редакторі Блокнот
Допоміжний HTML-файл має назву site1.html
Цей HTML-файл
зберегти в папці: «Веб-сайт про смартфони»
Реалізація
кодування цього 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> <a href="index.html">Головна
сторінка</a>
<p>Моделювання навігації на веб-сторінці та її
реалізація на допоміжній сайту
<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/"> SAMSUNG - налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум користувачів смартфонів SAMSUNG <img src ="images1.png"
alt= "Вставити зображення смартфона та пропишіть в кодах назву цього
зображення"></td>
<td
align=”left” valign=”bottom” ”
widht=”125"
bgcolor="11ff00" height="87"><a
href="http://inf10klas.blogspot.com/"> APPLE -
налаштувати посилання на сайт цієї фірми
</a><p>Відвідай форум користувачів смартфонів APPLE <img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"> </td>
<td
align=”right” valign=””midlle” ”
widht=”105" bgcolor="ddff00" height="77"><a
href="http://inf9klas.blogspot.com/"> SONY - налаштувати посилання на сайт цієї фірми
</a><p>Відвідай форум користувачів смартфонів SONY<img src ="images1.png" alt=
"Вставити зображення смартфона та пропишіть в кодах назву цього
зображення"></td>
<td align=”right”
valign=””midlle” ” widht=”105" bgcolor="ddff00"
height="77"><a
href="http://inf18klas.blogspot.com/"> HUAWEI -налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум
користувачів смартфонів HUAWEI<img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"> </td>
</tr>
<tr>
<td bgcolor="55ff00"
height="57"> <a href="news2.html"> XIAOMI -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів XIAOMI
<img src ="images1.png" alt= "Вставити зображення смартфона
та пропишіть в кодах назву цього зображення"></td>
<td bgcolor="eeee00"
height="87"> <a href="news3.html"> MEIZU- налаштувати посилання на сайт цієї
фірми </a> <p>Відвідай форум
користувачів смартфонів MEIZU<img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення"></td>
<td bgcolor="bbbb00"
height="97"> <a href="news4.html"> ASUS -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів ASUS<img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"></td>
<td bgcolor="bbaa00"
height="97"> <a href="news5.html">FLY -
налаштувати посилання на сайт цієї фірми
</a> <p>Відвідай форум користувачів смартфонів FLY <img
src ="images1.png" alt= "Вставити зображення смартфона та
пропишіть в кодах назву цього зображення"></td>
</ tr>
<tr>
<td
bgcolor="55fab0" height="77"> <a
href="http://matryza.blogspot.com/2014/05/"> ALCATEL - налаштувати посилання на сайт цієї
фірми </a> <p><img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення">
</td>
<td bgcolor="00ff99"
height="67"> <a
href="http://vinnmatolymp.blogspot.com/"> ZTE- налаштувати посилання на сайт цієї фірми
</a> <p><img src
="images1.png" alt= "Вставити зображення смартфона та пропишіть
в кодах назву цього зображення"></td>
<td
bgcolor="ggff00" height="57"> <a
href="http://fun0432.blogspot.com/2017/02/blog-post_10.html">
Android - налаштувати посилання на сторінку у Вікіпедеї</a>
<p><img src ="images1.png" alt= "Вставити зображення
смартфона та пропишіть в кодах назву цього зображення"></td>
<td
bgcolor="ggdd00" height="57"> <a href="http://fun0432.blogspot.com/2017/02/blog-post.html">iOS
-налаштувати посилання на сторінку у Вікіпедеї</a> <p><img src ="images1.png"
<img src ="images1.png" alt= "Вставити зображення смартфона
та пропишіть в кодах назву цього зображення"></td>
</tr>
</table>
</body>
</html>
Інформація про 3-ий HTML-файл
Допоміжний HTML-файл має назву site1.html
Цей HTML-файл
зберегти в папці: «Веб-сайт про смартфони»
Реалізація
кодування цього HTML-файлу
<html>
<head>
<title>Допоміжний файл. Фірми</title>
</head>
<body
style="background: silver">
<p>Моделювання навігації на веб-сторінці та її реалізація на службовій сторінці сайту
<p>
<a href="index1.html">Головна сторінка</a>
<p>Довідник
<p><p>Операційні
системи смартфонів
<h1>Відомі
операційні системи для смартфонів</h1>
<ol>
<li>
Операційні системи
<ol>
<li>Android</li>
<li>IOS</li>
<li>Bada</li>
<li>Windows Mobile
</li>
<!-- додайте елементи вкладеного списку сюди -->
</ol>
</li>
<li> Windows
Phone</li>
<li>Tizen</li>
<li>BlackBerry OS</li>
<li>Firefox OS</li>
<li>Maemo</li>
</ol>
<p><p>Розмістіть зображення логотипу операційної систем Android на веб-сторінці з гіперпосиланням насторінку Вікіпедії
<p>
<p><a href = "index1.html" >
<img src ="images2.png"
alt="Повернутися на
сторінку Вікіпедії"
title ="Натисність на зображення, що повернутися на Головну
сторінку"></a>
<p><p>Розмістіть
зображення логотипу IOS операційної системи із Інтернету на веб-сторінці
<img src
="
https://nuschool.com.ua/textbook/mathematics/1klas_4/1klas_4.files/image480.jpg"
alt="Пропишіть в кодах назву цього зображення та автора">
</body>
</html>
Результати виконання практичної частини надіслати у вигляді скріншотів
створених веб-сторінок на електронну адресу: vinnser@gmail.com
