Укажіть, як називається процес створення web-сторінок із попередньо створеного макета дизайну сайту

Завдання

Створіть форми реєстрації за зразком (рис. 7.3,

1. Створити форму, що дозволяє реєструвати нових користувачів (рис. 7.3). Додайте в таблицю стилів відповідне форматування для створеної форми.

Рис. 7.3. Вигляд форми1 у вікні браузера

2. Створіть форму, зовнішній вигляд якої представлено на рис. 7.4. Додайте в таблицю стилів відповідне форматування для створеної форми.

Рис. 7.4. Вигляд форми 2 у вікні браузера

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr7_forms.
2. Розархівуйте в дану папку архів Додаткові матеріали_ПЗ7, який  містить рисунок (логотип WIX), що необхідно буде розмістити на формі 2.
3. Відкрийте папку pr7_forms в редакторі коду VS і створіть файл form1.html. Додайте DOCTYPE й інші структурні теги.
4. У розділ <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>

1. У папці 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;

}

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

(Друга частина завдання, створення форми 2)

1. У папці pr7_forms створіть файл html. Додайте DOCTYPE й інші структурні теги.
2. Використовуючи методичні рекомендації до практичного заняття 7, приклади створених форм, самостійно виконайте верстку форми 2 (рис. 7.4). Додайте в таблицю стилів відповідне форматування для створеної форми (аналогічно до попереднього завдання).
3. Перевірте роботу, відкривши створену форму 2 у браузері.
4. Запакуйте папку pr7_forms в архів з ім’ям pr7_forms-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Укажіть, який атрибут позначає, що поле форми є обов’язковим для заповнення

Укажіть, як зробити кнопку очистки полів форми

Укажіть, як обмежити кількість символів для введення в текстове поле

Завдання

Використовуючи можливості модуля Css Flexbox:

1. Виконайте верстку шапки сайту, яка містить логотип і навігаційну панель (меню сайту). Схема розташування елементів шапки сайту та її вигляд у вікні браузера зображено на рис. 6.6.  
2. Доповніть web-сторінку власною галереєю зображень, методика створення якої приведена в методичних рекомендаціях до даного заняття.

Рис. 6.6. Схема й вигляд шапки сайту у вікні браузера

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr6_flexbox.
2. Розархівуйте в дану папку архів Додаткові матеріали_ПЗ6, який містить логотип, що необхідно буде розмістити в шапці сайту.
3. Виконайте верстку шапки сайту, виконуючи послідовно наступні дії.
4. Відкрийте папку pr6_flexbox у редакторі коду VS і створіть файл іndex.html. Додайте DOCTYPE й інші структурні теги.
5. У розділ <body> додайте container (елемент <div> із класом .container), у якому буде знаходитися  «шапка» header.page-header (елемент <header> із класом .page-header).
6. Укладіть у «шапку» логотип і меню таким чином, щоб логотип і меню були сусідами.
7. Використайте розмітку, наведену нижче, для шапки сайту, що містить логотип і навігаційне меню:

<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>

1. Створіть файл style.css, підключіть до index.html за допомогою тегу <link> й задайте css-правила.
2. Для container задайте max-width: 1000 px,    вирівнювання —  по центру (через margin), внутрішні поля (відступи) — зліва і справа по 15 px, фон —  #cde8fc.
3. Поставте в рядок логотип logo і меню ul.menu, для цього перетворіть header.page-header у flex-контейнер, використовуючи властивість display: flex;.
4. Розмістіть всі пункти навігаційного меню теж в рядок, перетворивши menu у flex-контейнер.
5. Вирівняйте логотип і меню вертикально по центру, використовуючи властивість align-items: center;.
6. Розсуньте логотип і меню по кутах хедера, задавши justify-content:space-between. Оскільки елементів в рядку всього два (логотип і меню), вони притискаються до країв головної осі, а увесь вільний простір знаходиться між ними.
7. Дозвольте елементам меню item перестрибувати в інший рядок при зменшені flex-контейнера у вікні браузера, використовуючи властивість flex-wrap: wrap;.
8. Використовуємо flex-властивість контейнера gap, задайте відстань між flex-eлементами у меню — 10 px.
9. Доповніть .menu наступними властивостями: padding: 15px;  margin: 0;  list-style: none;.
10. Кожен елемент <a> із класом link зробіть блочним елементом (display: block;), укажіть внутрішні відступи (поля) з усіх сторін по 15 px, приберіть підкреслення для гіперпосилання (text-decoration: none), колір тексту задайте чорний. При наведені на пункт меню колір тексту змінюється на #a52a2a.
11. Для logo задайте властивість padding: 25px.
12. Перевірте роботу, відкривши створену web-сторінку в браузері. Проекспериментуйте з різними розмірами екранів.

(друга частина завдання)

1. Доповніть створену web-сторінку з хедером власною галереєю зображень, використовуючи пояснення щодо створення такої галереї з методичних рекомендацій.
2. Перевірте роботу, відкривши створену web-сторінку в браузері. Її вигляд повинен відповідати рис. 6.7.

Рис. 6.7. Вигляд web-сторінки у вікні браузера, яка містить логотип, навігаційне меню і галерею зображень

1. Запакуйте папку pr6_flexbox в архів з ім’ям pr6_flexbox -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Виберіть коректні твердження щодо flex-елементів у Flexbox-моделі

Укажіть, як розмістити елементи по центру відносно осі Y (cross axis)

Оберіть значення властивості flex-direction, яке дозволяє розташувати елементи так, як на рисунку нижче

Укажіть властивість, що дозволяє змінювати порядок слідування елементів в потоці, не змінюючи HTML-код