Створення вебсторінки-візитки (HTML+CSS)

Створення вебсторінок

Одразу після створення сайт містить лише одну сторінку, яка є головною (домашньою) сторінкою сайту. Кожна сторінка сайту має назву. Часто назва головної сторінки збігається з назвою сайту.

Мапа сайту — схема, що відображає ієрархію сторінок і зв’язки між ними.

У мапі сайту на верхньому рівні розміщуються сторінки, які є головними в тематичних розділах, а нижче — сторінки, що входять до цих тематичних розділів.

Наприклад, на рис.1 наведено мапу сайту Наш клас.

На наведеній мапі сайту три тематичних розділи — Наш клас, Навчання, Відпочинок.

До тематичного розділу Наш клас входять сторінки Наш клас — головна сторінка тематичного розділу, а також Історія класу та Фотогалерея.

Повторюємо:

• <p>Текст</p> — створює новий абзац. Весь текст усередині автоматично займає всю доступну ширину рядка.

• <h1>Заголовок</h1> — головний заголовок сторінки

• <a href="#" class="btn">Кнопка</a> — створює кнопку (посилання), на яку можна натиснути, щоб перейти на іншу сторінку.

  Щоб користувач міг переходити з головної сторінки на інші (наприклад, з «Головної» на сторінку «Наш клас» або «Фотогалерея»), використовується гіперпосилання.

  Для цього в HTML застосовують тег <a> (anchor) із атрибутом href (сканує адресу сторінки, куди треба перейти).

  

  <a> — відкриваючий тег посилання.

  href="nas_klas.html" — назва файлу іншої сторінки, яка відкриється при натисканні.

  Перейти на сторінку... — текст або кнопка, яку бачить користувач.

  </a> — закриваючий тег.

Усі файли сторінок вашого сайту (index.html, nas_klas.html, foto.html тощо) мають зберігатися в одній папці на комп'ютері чи телефоні.

У назвах файлів не можна використовувати пробіли чи українські літери (краще писати латиницею: nas_klas.html, photo.html), інакше посилання може не спрацювати.

Створіть сторінку-візитку для нашого ліцею:

1. Перейдіть на онлайн сервіс для створення сторінки: https://jsfiddle.net/

2. Наберіть HTML теги для структурування сторінки:

Що має відобразитись:

1. Додайте CSS-стиль (скопіюйте та вставте у вікно CSS):

body {
    /* Білий фон із клітинкою */
    background-color: #ffffff;
    background-image: 
        linear-gradient(to right, rgba(0, 120, 215, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 120, 215, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* Контейнер по центру*/
.content-container {
    width: 100%;
    max-width: 450px;
    text-align: center;
    padding: 10px;
    background: transparent;
}

/* Назва ліцею */
h1 {
    color: #1a4a6e; 
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Текст */
.description {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 500;
}

/* Жовті напівпрозорі кнопки */
.btn {
    display: block;
    width: 80%;
    max-width: 280px;
    margin: 12px auto; /* Вирівнювання по центру */
    padding: 14px 20px;
    text-decoration: none;
    border-radius: 12px;
    text-align: center;
    
    /* Текст: жирний, чорний */
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 16px;
    
    /* Жовтий колір з напівпрозорістю */
    background-color: rgba(255, 223, 0, 0.85) !important;
    border: 2px solid rgba(218, 165, 32, 0.7) !important;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: 0.2s;
}

.btn:hover {
    background-color: rgba(255, 223, 0, 1) !important;
}

Як має виглядати сайт:

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