Звіт з Практики-3 - В3

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

ХЕРСОНСЬКИЙ ПОЛІТЕХНІЧНИЙ ФАХОВИЙ КОЛЕДЖ
ДЕРЖАВНОГО УНІВЕРСИТЕТУ «ОДЕСЬКА ПОЛІТЕХНІКА»
Відділення комп’ютерної та програмної інженерії
Спеціальність «Інженерія програмного забезпечення»
Звіт з навчальної практики-3
Виконав студент 451 групи

_________________________
(підпис, п. і .п.)
Перевірив викладач
________________Г.В. Носова
(дата, підпис)
2023
Частина 1. Розробка веб-сторінок, використовуючи HTML, CSS, CSS-фреймворк Bootstrap
1. (Обов’язковий рівень) Створити макет сторінки index.html, використовуючи табличне верстання, згідно варіанту
завдання.
Варіант 3
2. (Обов’язковий рівень) Згідно варіанту, додати в макет:
- меню там «хлібні крихти», як марковані переліки;
- графічний логотип (якщо він є) та графічну шапку;
- розмістити у футері інформацію про виконавця роботи;
- у блоку контенту розмістити довільний текст із включенням зображень;
3-А. (Обов’язковий рівень) Використовуючи атрибути тегів HTML, налаштувати макет наступним чином:
- встановити колір фону сторінки;
- встановити ширину таблиці в 900 пікселів;
- встановити ширину колонок таблиці – меню 20%, сайд бар (якщо присутній) 20%, логотип (якщо присутній) – 20%, «хлібні
крихти» - як ширина блоку контенту;
- розфарбувати комірки таблиці кольорами, що мають рядкові константи (наприклад, «red», «green», «yellow»);
- зробити межу таблиці невидимою;
- зарезервувати відступи від меж таблиці в 5 пікселів
3-Б. (Бажаний рівень) Змінити макет із завдання 3-А наступним чином:
- встановити графічний фон сторінки;
- встановити кольори комірок таблиці у шістнадцятиричному форматі (наприклад FF0000, A0A0A0, 00FF00);
3-В. (Високий рівень) Змінити макет із завдання 3-Б наступним чином:
- усі налаштування зовнішнього вигляду реалізувати із застосуванням CSS
4-А. (Обов’язковий рівень) Змінити зовнішній вигляд пунктів меню, використовуючи атрибути HTML
4-Б. (Бажаний рівень) Змінити зовнішній вигляд меню з використанням CSS
4-В
(Високий рівень) Змінити зовнішній вигляд меню та хлібних крихт з використанням CSS
Код HTML файлу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Demon Slayer</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header" class="header" >
<div class="container">
<div class="nav">
<img src="#" alt="Kimetsu No Yaiba" class="logo">
<ul class="menu">
<li>
<a href="#">Main</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Heroes</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
<a href="tel:+380662399924" class="tel">+380662399924</a>
</div>
<div>
<h2>«Клинок, рассекающий демонов» — образцовый сёнэн и одно из

самых красивых аниме 2019-года </h2>
<p>Ежегодно выходит множество экранизаций сёнэн-манги (комиксы,

ориентированные подростков), однако лишь немногим удаётся заслужить мировое признание. Но вот в
успехе аниме по манге Кёхару Готогэ Kimetsu no Yaiba («Клинок, рассекающий демонов») в Японии вряд
ли кто-то сомневался. Оригинал уже второй год не покидает топы продаж японских книжных магазинов
и не раз попадал в тренды Твиттера. Весной 2019 года общее количество проданных печатных копий
превысило шесть миллионов.
Экранизацию Kimetsu no Yaiba можно посоветовать даже тем, кто не любит сёнэны. В ней авторы
постарались обойти или немного сгладить жанровые штампы, сделать историю мрачной и жестокой —
при этом не растеряв юмора. А ещё это просто один из самых красивых аниме-сериалов этого года.
Разбираем мангу, её экранизацию, достоинства и основные проблемы.</p>
<h3>О манге и сюжете</h3>

<p>События «Клинка» происходят в Японии эпохи Тайсё (1912-1926). Главный герой — подросток
Тандзиро Камадо, который живёт на горе в типичной японской глубинке. Отец давно умер, поэтому в
семье он за главного. Тандзиро делит одну крышу вместе с тремя братьями, двумя сёстрами и матерью.
Зарабатывает семья изготовлением и продажей древесного угля. Сам Тандзиро время от времени
спускается в деревню, где продаёт уголь и помогает местным жителям за скромную плату.
В один из зимних дней Тандзиро до позднего вечера задержался в деревне. На обратном пути он
встретил знакомого старичка Сабуро, который порекомендовал парню остаться у него на ночь, ведь
после захода солнца в лесу бродят демоны. Эти мифические создания нападают на людей, пьют их
кровь и пожирают плоть. Тандзиро никогда не верил в сверхъестественное, но он очень устал, поэтому
всё-таки решил остаться у старика на ночь. Парень и не подозревал, что эта случайная встреча спасла
ему жизнь.
По возвращению домой он увидел, что вся его семья жестоко растерзана демонами. Единственная
выжившая — сестра Нэдзуко, которая потеряла много крови и обратилась в монстра. Она хоть и
заражена демонической кровью, но каким-то чудом сохранила некоторую часть человеческого
рассудка. В голодном порыве Нэдзуко напала на брата, но в битву родственников вмешался охотник на
демонов Гию Томиока.
После этой судьбоносной встречи и знакомства с мастером боевых искусств Сакондзи Урокодаки,
Тандзиро решает стать убийцей демонов, отомстить за смерть близких и вернуть сестре человеческий
облик. В своих путешествиях он найдет новых друзей и познакомится с другими охотниками на
демонов.
Манга ещё не закончена и вряд ли мы увидим концовку в ближайшее время. В целом, если
внимательно изучить развитие сюжета во всех томах и официальные комментарии в журнале Shonen
Jump, то есть некоторые предпосылки к тому, что история ушла дальше середины и вот вот начнётся
(или уже началась) финальная сюжетная арка.</p>
</div>
</div>
</header>
<div class="menu-left">
<ul class="menu">
<li>
<a href="#">Меню слева))</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<p>
random text random text random text random text random text
random text random text random text random text random text random text random text random text
random text vrandom text random text random text random text random text random text random text
random text random text random text random text random text random text vvrandom text random text
random text random text random text random text random text random text random text vvvrandom text
vrandom text random text random text random text random text vvvrandom text random text random text
random text random text vrandom text
</p>
</div>
<section id="about" class="about">
<div class="content">
<h2>Еще немного об этой манге и аниме </h2>
<div class="description">
<div class="desc-left">
<h3>В чём экранизация немного лучше манги</h3>
<p>
Кёхару Готогэ — успешная, но всё ещё начинающая мангака. В

Shonen Jump она рисует всего пять лет, а на постоянной основе — только с 2016 года. О недостатке
опыта у автора говорят первые тома Kimetsu no Yaiba.
За прошедшие годы стиль Готогэ изменился в лучшую сторону, однако в самом начале её рисунок имел
довольно минимальную детализацию. Персонажам порой не хватало деталей, пропорции были
расплывчаты, а фоны во многих фреймах либо отсутствовали (белый или чёрный фон), либо
представляли собой что-то схематичное. С другой стороны, в неряшливом рисунке был свой шарм, а за
развитием авторского стиля всегда интересно наблюдать.
Дизайн персонажей в манге и аниме
Но главная проблема манги совсем не в этом. В ранних томах темп и размеренность повествования
сильно хромали. Сюжет развивался стремительно, сражения редко длились больше трёх глав и были
небрежно нарисованы. Слабо чувствовалась напряжённость и драматизм, а окружающий мир выглядел
просто поверхностно.
</p>
</div>
<div class="desc-right">
<h3>В чём экранизация немного лучше манги</h3>
<p>
Кёхару Готогэ — успешная, но всё ещё начинающая мангака. В

Shonen Jump она рисует всего пять лет, а на постоянной основе — только с 2016 года. О недостатке
опыта у автора говорят первые тома Kimetsu no Yaiba.
За прошедшие годы стиль Готогэ изменился в лучшую сторону, однако в самом начале её рисунок имел
довольно минимальную детализацию. Персонажам порой не хватало деталей, пропорции были
расплывчаты, а фоны во многих фреймах либо отсутствовали (белый или чёрный фон), либо
представляли собой что-то схематичное. С другой стороны, в неряшливом рисунке был свой шарм, а за
развитием авторского стиля всегда интересно наблюдать.
Дизайн персонажей в манге и аниме
Но главная проблема манги совсем не в этом. В ранних томах темп и размеренность повествования
сильно хромали. Сюжет развивался стремительно, сражения редко длились больше трёх глав и были
небрежно нарисованы. Слабо чувствовалась напряжённость и драматизм, а окружающий мир выглядел
просто поверхностно.
</p>
</div>
</div>
<div class="gallery">
<img
src="https://demonslayer-anime.com/risshihen/assets/img/top/img_main_sp.jpg">
</div>
</div>
</div>
</section>
<footer id="footer" class="footer">
<h1>Сделано студентом группы 451
Дешкантом Александром
Руководитель практики Носова Г.В</h1>
<p>P.S сделано все собственноручно</p>
</div>
</footer>
</body>
</html>
Код CSS файлу:
body {
padding: o;
margin: 0;
font-family: 'Anton' sans-serif;
color: 000;
font-size: 16px;
h1,h2,h3,h4,h5,h6 {
padding: o;
margin: 0;
text-transform: uppercase;
margin-top: 40px;
h2{
margin-top: 80px;
ul,li {
display: block;
li{
border-style: outset;
.container {
.box {
width: 100px;
height: 100px;
header{
background: url('../img/Header.jpg') no-repeat center top / cover;
padding-top: 57px;
padding-left: 10%;
padding-right: 10%;
}
header a{
color: #ffffff;
.logo {
margin-right: 69px;
.menu {
display: flex;
.menu li a {
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 0.1em;
.menu li {
margin-right: 40px;
header{
.tel {
font-size: 17px;
text-decoration: none;
margin-left: auto;
letter-spacing: 0.1em;
margin: 0 auto;
.nav {
display: flex;
align-items: center;
p{
font-size: 17px;
font-family: Anton;
.description {
display: flex;
justify-self: space-between;
margin-top: 67px;
.description p {
font-family: 'Anton';
font-weight: 567;
text-align: justify;
line-height: 1.62em;
.desc-left, .desc-right {
width: 600px;
.desc-left{
margin-right: 100px;
.menu-left {
width: 30%;
float: left;
max-height: 700px;
margin-top: 30px;
.content {
width: 100%;
.gallery {
margin-left: 25%;
Скріншоти виконаної роботи:

Частина 2 JavaScript
Створити форму на екрані з необхідними полями вводу, та виконати завдання згідно з

варіантом, написавши програму на JavaScript
В3. Дано поле вводу числа. Знайти факторіал введеного числа
Код HTML файлу
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/task.css">
<title>Задание 1 Факториал</title>
</head>
<body>
<div class="kr-content">
<h1>Факториал числа</h1>
<h2>Введите число для вычесления факториала</h2>
<div class="kr-form">
<form id="form" action method="get">
<label>
Введите число для факториала:
<br>
<input type="number" name="" id="number">

</label>
<br>
<br>
<input type="submit" value="Вычислить">
</form>
<p id="result"></p>
</div>
</div>
<script>
var frm=document.getElementById("form");
frm.onsubmit=function() {
var num=document.getElementById("number").value;
var result=document.getElementById("result");
var i,mult=1;
for (i=1;i<=num;i++){
mult=mult*i;
result.innerHTML=mult;
return false;
</script>
</body>
</html>
Код CSS файлу:
body {
font-family: Verdana, Tahoma, sans-serif;

height: 100%;
font-size: 11px;
background-color: #4b5f77;
.kr-content {
width: 640px;
text-align: left;
padding: 0 11px 0 20px;
vertical-align: top;
font-size: 12px;
color: #333333;
line-height: 21px;
display: table-cell;
padding-left: 40%;
padding-top: 200px;
.kr-content h1 {
max-width: 90vw;
font-size: 22px;
line-height: 22px;
.kr-content h2 {
width: 85vw;
font-size: 18px;
.kr-form {
width: 87vw;
margin-left: auto;
margin-right: auto;
display: block;
}
.kr-form {
background: none;
border: 1px solid gray;
text-align: left;
margin: 4px;
width: 400px;
padding: 10px;
display: table-cell;
border-radius: 6px;
.kr-form input[type=text] {
width: 390px;
height: 24px;
font-size: 16px;
text-align: center;
.kr-center {
text-align: center;
margin: auto;
justify-content: center;
input {
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: fieldtext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
cursor: text;
background-color: field;
margin: 0em;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
border-color: -internal-light-dark(rgb 118, 118, 118, rgb 133, 133, 133);
border-image: initial;
form{
text-align: center;
input{
padding: 7px;
text-align: center;
font-family: monospace;
#result{
font-size: 22px;
color: green;
text-align: center;
Код JavaScript
var frm=document.getElementById("form");
frm.onsubmit=function() {
var num=document.getElementById("number").value;
var result=document.getElementById("result");
var i,mult=1;
for (i=1;i<=num;i++){
mult=mult*i;
result.innerHTML=mult;
return false;
Cкріншоти виконаного завдання:
2.Створити форму на екрані з необхідними полями вводу, та виконати завдання згідно з

варіантом, написавши програму на JavaScript
В3. Дано випадаючий список з п’ятьма пунктами. Виводити повідомлення про вибраний пункт,
під час вибору.
Код HTML-CSS файлу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вибір обоїв</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.dropdown {
margin-right: 10px;
.dropdown-menu {
display: none;
.menu-active {
display: block;
</style>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="dropdown">
<button data-path="one" class="btn btn-secondary dropdown-toggle">
Вибір тематики для обоїв на ПК
</button>
<ul data-target="one" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="nature.html">Природа</a></li>
<li><a class="dropdown-item" href="programming.html">Програмування</a></li>
<li><a class="dropdown-item" href="music.html">Музика</a></li>
<li><a class="dropdown-item" href="food.html">їжа</a></li>
<li><a class="dropdown-item" href="anime.html">Аніме</a></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Код JavaScript:
let intervalId;
document.querySelectorAll('.dropdown-toggle').forEach(e => {
e.addEventListener('click', e => {
const menu = e.currentTarget.dataset.path;
document.querySelectorAll('.dropdown-menu').forEach(e => {
if (!document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
e.classList.remove('menu-active');
e.classList.remove('open');
document.querySelector(`[data-target=${menu}]`).classList.add('menu-active');
intervalId = setTimeout(() => {
document.querySelector(`[data-target=${menu}]`).classList.add('open');
}, 0);
if (document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
clearTimeout(intervalId);
document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
intervalId = setTimeout(() => {
document.querySelector(`[data-target=${menu}]`).classList.remove('open');
}, 0);
window.onclick = e => {
if (e.target == document.querySelector(`[data-target=${menu}]`) || e.target ==

document.querySelector(`[data-path=${menu}]`)) {
return;
} else {
document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
document.querySelector(`[data-target=${menu}]`).classList.remove('open');
});
});
});
Скріншоти виконаного завдання

Використовуючи засоби СУБД MS Access виконати наступні дії:
№ Завдання
1 Створити таблиці із запропонованим вмістом та встановити між ними зв’язки.
2 Кожен встановлений зв'язок проілюструвати пов’язаними формами.
3 Створити для кожної таблиці форму.
(Кожна нова форма має відрізнятися за зовнішнім виглядом від попередньої.)
4 Створити набір підпорядкованих форм для бази.
5 Створити головну кнопкову форму для забезпечення повної взаємодії з базою
5.1 перегляду таблиць,
5.2 перегляду форм,
5.3 роботи з запитами,
5.4 перегляду і підготовки для друку звітів.
6 Виконати запропоновані запити.
6.1 перехресний запит для визначення залежності вартості перельоту від класу
літака і компанії перевізника
6.2 запит на визначення класів літаків і напрямків, за якими відбувається політ,
якщо на рейс нема вільних місць.
6.3 запит на визначення напрямку руху та їх тривалості, якщо вартість квитка
знаходиться у вказаних межах.
6.4 запит на визначення кількості компаній-перевізниць, що мають вартість
квитка більшу за середню
6.5 запит, що визначає сумарну вартість квитків на рейси, що вилітають з
аеропорту Бориспіль
7 Для таблиці, що містить інформацію про квитки, створити форму, що за зовнішнім
виглядом максимально наближена до квитка – розташувати елементи форми
згідно зразка, додати фонове зображення.
Скріншоти виконаної роботи :

Частина 4
Завдання 1
Використовуючи пакет StarUml, виконати практичне завдання згідно варіанту.
2.1 Скласти текстову постановку задачі з вказаної предметної області (див. табл. 1).
Побудувати діаграму варіантів використання
2.2 На основі розробленої діаграми прецедентів побудувати діаграму класів, кількість
класів – 3-5 об’єктів. Вказати операції, типи атрибутів, їх властивості.
2.3 Створити діаграму послідовності для одного із сценаріїв виконання (як основного так і
альтернативного потоку подій)
2.4 Роздрукувати постановку задачі та спроектовані діаграми.
Таблиця 1 Предметні області
3 Виробництво • Код виробу, назва виробу, є типовими, примітка - для яких цілей
призначений;
• код, назва, адреса і телефон підприємств, що випускають вироби;
• рік випуску обсяг випуску даного виробу підприємством.
Постановка задачі з предметної області до «Контроль та облік роботи у Виробництві».
Нехай потрібно розробити інформаційну систему для автоматизації обліку випуску виробів у
підприємтсві. Система повинна передбачати режими ведення системного каталогу, що відображає
перелік віиробів, які випускають на підприємтвах. Усередині підприємств області знань в
систематичному каталозі можуть мати унікальний внутрішній номер і повне найменування. Кожен вироб
може містити відомості на яких підприємтвах він був вироблений. Кожен вироб, що випускається на
підприємтсвах , характеризується наступними параметрами :
• Код виробу;
• назва виробу;
• є типовими
• примітка - для яких цілей призначений);
• адреса і телефон підприємств, що випускають вироби;
• рік випуску;
• обсяг випуску даного виробу підприємством;
Вироби можуть мати однакові назви, але вони розрізняються за своїм унікальним кодом (ISBN).
У виробництві ведеться облік замовників(клієнтів).
На кожного замовника у облікову базу заносяться такі відомості:
• прізвище, ім'я, по батькові;
• домашня адреса;
• телефон ( будемо вважати , що у нас два телефони - робочий і домашній);
• дата народження.
Кожному замовнику присвоюється унікальний номер.
Кожен замовник може одночасно отримати безліч виробів..
Кожен вироб у підприємтві може бути в наявності у безліч екземплярів. Кожен екземпляр має такі
характеристики:
• унікальний інвентарний номер;
• код товару;
• місце виготовлення у виробництвах.
У разі замовлення товару клієнтом у підприємтві зберігається копія квітанції, у якій мають бути
записані такі відомості:
• номер телефону клієнта , який замовив вироби;
• дата виготовлення виробів;
• дата коли замовник забрав вироби.
Передбачити наступні обмеження на інформацію в системі :
1. У виробництві повинні бути записані клієнти не молодше 18 років.

2. Кожен клієнт може замовити безліч виробів
3. Кожен клієнт при реєстрації в базі виробництва повинен дати телефон для зв'язку: він
може бути робочим або домашнім.
З даної інформаційної системою повинні працювати такі групи користувачів :

• виробники;
• замовники;
При роботі із системою підприємтсва повинні мати можливість вирішувати такі
завдання:
1. Реєстрація нових виробів .
2. Проводити каталогізацію виробів, тобто призначення нових інвентарних номерів
прийнятим виробам, і, розміщуючи їх на складі виробництва, запам'ятовувати місце
розміщення кожного екземпляра.
4. Проводити додаткову каталогізацію, якщо надійшло кілька екземплярів виробу, який вже
є на складі.
5. Проводити списання старих виробів, і виробів, які не користуються попитом. Списувати
можна тільки вироби, жоден примірник яких не знаходиться у замовників. Списання
проводиться за спеціальним актом списання.
6. Вести облік проданих виробів замовникам. При продажі виробів фіксується, коли і який
екземпляр виробу був проданий даному клієнту.
7. Проводити списання не придатних віробів за спеціальним актом списання.
8. Проводити закриття обліку замовника, тобто знищення даних про нього.
Замовник повинен мати можливість вирішувати такі завдання:
1. Переглядати системний каталог, тобто перелік усіх екземплярів, товарів які є на складі.
2. Отримати повний перелік виробів які є на складі.
3.Для обраного замовника отримати перелік раніше замовлених виробів.
Розроблена діаграма прецедентів представлена на рисунку 2.1 :
Рисунок 2.1 Діаграма прецедентів предметної області «Підприємтво».
Рисунок 2.2 Діаграма класів предметної області «Підприємтво».

Звіт з Практики-3 - В3

Uploaded by

Document Information

Original Title

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Звіт з Практики-3 - В3

Uploaded by

Copyright:

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ВІДОКРЕМЛЕНИЙ СТРУКТУРНИЙ ПІДРОЗДІЛ

Звіт з навчальної практики-3

Виконав студент 451 групи

2. (Обов’язковий рівень) Згідно варіанту, додати в макет:

- меню там «хлібні крихти», як марковані переліки;

- графічний логотип (якщо він є) та графічну шапку;

- розмістити у футері інформацію про виконавця роботи;

- у блоку контенту розмістити довільний текст із включенням зображень;

- встановити колір фону сторінки;

- встановити ширину таблиці в 900 пікселів;

- зробити межу таблиці невидимою;

- зарезервувати відступи від меж таблиці в 5 пікселів

3-Б. (Бажаний рівень) Змінити макет із завдання 3-А наступним чином:

- встановити графічний фон сторінки;

3-В. (Високий рівень) Змінити макет із завдання 3-Б наступним чином:

- усі налаштування зовнішнього вигляду реалізувати із застосуванням CSS

Код HTML файлу:

<meta name="viewport" content="width=, initial-scale=1.0">

<link rel="stylesheet" href="css/main.css">

<header id="header" class="header" >

<img src="#" alt="Kimetsu No Yaiba" class="logo">

<a href="tel:+380662399924" class="tel">+380662399924</a>

<h2>«Клинок, рассекающий демонов» — образцовый сёнэн и одно из

<p>Ежегодно выходит множество экранизаций сёнэн-манги (комиксы,

<h3>О манге и сюжете</h3>

<a href="#">Меню слева))</a>

<a href="#">Меню слева))</a>

<a href="#">Меню слева))</a>

<section id="about" class="about">

<h2>Еще немного об этой манге и аниме </h2>

<h3>В чём экранизация немного лучше манги</h3>

Кёхару Готогэ — успешная, но всё ещё начинающая мангака. В

Дизайн персонажей в манге и аниме

<h3>В чём экранизация немного лучше манги</h3>

Кёхару Готогэ — успешная, но всё ещё начинающая мангака. В

Дизайн персонажей в манге и аниме

<footer id="footer" class="footer">

<h1>Сделано студентом группы 451

Руководитель практики Носова Г.В</h1>

<p>P.S сделано все собственноручно</p>

Код CSS файлу:

font-family: 'Anton' sans-serif;

background: url('../img/Header.jpg') no-repeat center top / cover;

Скріншоти виконаної роботи:

Створити форму на екрані з необхідними полями вводу, та виконати завдання згідно з

В3. Дано поле вводу числа. Знайти факторіал введеного числа

Код HTML файлу

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/task.css">

<h2>Введите число для вычесления факториала</h2>

<form id="form" action method="get">

Введите число для факториала:

<input type="number" name="" id="number">

<input type="submit" value="Вычислить">

Код CSS файлу:

font-family: Verdana, Tahoma, sans-serif;

padding: 0 11px 0 20px;

border: 1px solid gray;

writing-mode: horizontal-tb !important;

padding: 1px 2px;

border-color: -internal-light-dark(rgb 118, 118, 118, rgb 133, 133, 133);

Cкріншоти виконаного завдання:

2.Створити форму на екрані з необхідними полями вводу, та виконати завдання згідно з

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">