Crowdly
Add to Chrome
Course 842
Looking for Course 842 test answers and solutions? Browse our comprehensive collection of verified answers for Course 842 at b.optima-osvita.org.
Get instant access to accurate answers and detailed explanations for your course questions. Our community-driven platform helps students succeed!
Укажіть, як називається процес створення web-сторінок із попередньо створеного макета дизайну сайту
Завдання
Створіть форми реєстрації за зразком (рис. 7.3,рис. 7.4)
1. Створити форму, що дозволяє реєструвати нових користувачів (рис. 7.3). Додайте в таблицю стилів відповідне форматування для створеної форми.
Рис. 7.3. Вигляд форми1 у вікні браузера
2. Створіть форму, зовнішній вигляд якої представлено на рис. 7.4. Додайте в таблицю стилів відповідне форматування для створеної форми.
Рис. 7.4. Вигляд форми 2 у вікні браузера
Порядок виконання завдання
- На локальному диску свого ПК створіть папку pr7_forms.
- Розархівуйте в дану папку архів Додаткові матеріали_ПЗ7, який містить рисунок (логотип WIX), що необхідно буде розмістити на формі 2.
- Відкрийте папку pr7_forms в редакторі коду VS і створіть файл form1.html. Додайте DOCTYPE й інші структурні теги.
- У розділ <body> додайте наступну розмітку для форми1:
<form class="form" action="#">
<h1 class="form-header"> Створити новий обліковий запис</h1>
<div>
<label>Логін:</label>
<input class="form-field" type="text" placeholder="login" >
</div>
<div>
<label>E-mail:</label>
<input type="email" class="form-field" placeholder="e-mail" >
</div>
<div>
<label>Пароль:</label>
<input type="password" class="form-field" placeholder="password">
</div>
<div class="button">
<button class="btn" type="submit" >Відправити</button>
</div>
</form>
- У папці pr7_forms cтворіть файл style-form1.css, підключіть до form1.html за допомогою тега <link> і задайте css-правила форматування форми1.
СSS-правила
*{
box-sizing:border-box;
}
html{
font-size: 14px;
font-family:'Times New Roman', Times, serif;
}
.form{
margin: 0 auto;
width: 340px;
border: 1px solid #CCC;
background-color:rgb(244, 177, 131);
}
.form div{
margin: 20px 0;
}
.form-header{
font-size: 20px;
color: rgb(91, 155, 213);
text-align: center ;
}
label {
display: inline-block;
width: 100px;
text-align: right;
color: rgb(91, 155, 213);
}
.form-field{
width: 180px;
height: 30px;
background: #f1f1f1;
border-radius: 5px;
border: none;
padding-left: 5px;
}
.button{
text-align: center;
}
.btn{
width: 180px;
height: 35px;
border: none;
background: rgb(91, 155, 213);
border-radius: 5px;
font-weight: bold;
color: white;
}
- Збережіть зміни, перегляньте створену форму в браузері.
(Друга частина завдання, створення форми 2)
- У папці pr7_forms створіть файл html. Додайте DOCTYPE й інші структурні теги.
- Використовуючи методичні рекомендації до практичного заняття 7, приклади створених форм, самостійно виконайте верстку форми 2 (рис. 7.4). Додайте в таблицю стилів відповідне форматування для створеної форми (аналогічно до попереднього завдання).
- Перевірте роботу, відкривши створену форму 2 у браузері.
- Запакуйте папку pr7_forms в архів з ім’ям pr7_forms-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).
Укажіть, який атрибут позначає, що поле форми є обов’язковим для заповнення
Укажіть, як зробити кнопку очистки полів форми
Укажіть, як обмежити кількість символів для введення в текстове поле
Завдання
Використовуючи можливості модуля Css Flexbox:
- Виконайте верстку шапки сайту, яка містить логотип і навігаційну панель (меню сайту). Схема розташування елементів шапки сайту та її вигляд у вікні браузера зображено на рис. 6.6.
- Доповніть web-сторінку власною галереєю зображень, методика створення якої приведена в методичних рекомендаціях до даного заняття.
Рис. 6.6. Схема й вигляд шапки сайту у вікні браузера
Порядок виконання завдання
- На локальному диску свого ПК створіть папку pr6_flexbox.
- Розархівуйте в дану папку архів Додаткові матеріали_ПЗ6, який містить логотип, що необхідно буде розмістити в шапці сайту.
- Виконайте верстку шапки сайту, виконуючи послідовно наступні дії.
- Відкрийте папку pr6_flexbox у редакторі коду VS і створіть файл іndex.html. Додайте DOCTYPE й інші структурні теги.
- У розділ <body> додайте container (елемент <div> із класом .container), у якому буде знаходитися «шапка» header.page-header (елемент <header> із класом .page-header).
- Укладіть у «шапку» логотип і меню таким чином, щоб логотип і меню були сусідами.
- Використайте розмітку, наведену нижче, для шапки сайту, що містить логотип і навігаційне меню:
<div class="container">
<header class="page-header">
<div class="logo">
<a href="" class="logo-link">
<img src="./images/logo.png" alt="logo">
</a>
</div>
<ul class="menu">
<li class="item"><a href="#" class="link">Home</a></li>
<li class="item"><a href="#" class="link">Gallery</a></li>
<li class="item"><a href="#" class="link">Contacts</a></li>
<li class="item"><a href="#" class="link">Production</a></li>
</ul>
</header>
</div>
- Створіть файл style.css, підключіть до index.html за допомогою тегу <link> й задайте css-правила.
- Для container задайте max-width: 1000 px, вирівнювання — по центру (через margin), внутрішні поля (відступи) — зліва і справа по 15 px, фон — #cde8fc.
- Поставте в рядок логотип logo і меню ul.menu, для цього перетворіть header.page-header у flex-контейнер, використовуючи властивість display: flex;.
- Розмістіть всі пункти навігаційного меню теж в рядок, перетворивши menu у flex-контейнер.
- Вирівняйте логотип і меню вертикально по центру, використовуючи властивість align-items: center;.
- Розсуньте логотип і меню по кутах хедера, задавши justify-content:space-between. Оскільки елементів в рядку всього два (логотип і меню), вони притискаються до країв головної осі, а увесь вільний простір знаходиться між ними.
- Дозвольте елементам меню item перестрибувати в інший рядок при зменшені flex-контейнера у вікні браузера, використовуючи властивість flex-wrap: wrap;.
- Використовуємо flex-властивість контейнера gap, задайте відстань між flex-eлементами у меню — 10 px.
- Доповніть .menu наступними властивостями: padding: 15px; margin: 0; list-style: none;.
- Кожен елемент <a> із класом link зробіть блочним елементом (display: block;), укажіть внутрішні відступи (поля) з усіх сторін по 15 px, приберіть підкреслення для гіперпосилання (text-decoration: none), колір тексту задайте чорний. При наведені на пункт меню колір тексту змінюється на #a52a2a.
- Для logo задайте властивість padding: 25px.
- Перевірте роботу, відкривши створену web-сторінку в браузері. Проекспериментуйте з різними розмірами екранів.
(друга частина завдання)
- Доповніть створену web-сторінку з хедером власною галереєю зображень, використовуючи пояснення щодо створення такої галереї з методичних рекомендацій.
- Перевірте роботу, відкривши створену web-сторінку в браузері. Її вигляд повинен відповідати рис. 6.7.
Рис. 6.7. Вигляд web-сторінки у вікні браузера, яка містить логотип, навігаційне меню і галерею зображень
- Запакуйте папку pr6_flexbox в архів з ім’ям pr6_flexbox -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).
Виберіть коректні твердження щодо flex-елементів у Flexbox-моделі
Укажіть, як розмістити елементи по центру відносно осі Y (cross axis)
Оберіть значення властивості flex-direction, яке дозволяє розташувати елементи так, як на рисунку нижче
Укажіть властивість, що дозволяє змінювати порядок слідування елементів в потоці, не змінюючи HTML-код