Назад Вперед Зміст

ПРАКТИЧНА РОБОТА № 4

Створіть просту сторінку myIndexVar_N.html з випадковим текстом і файл талиці для стилів my.css

У файлі myIndexVar_N.html повинні бути такі елементи:

Додайте посилання на таблицю стилів.

Збережіть ці файли для використання на наступних уроках.

📚Варіант 1 Класичний стиль

Завдання:

Створити класичне оформлення тексту з використанням серіфних шрифтів. Заголовки мають бути вишуканими, абзаци - з червоним рядком та вирівнюванням за шириною.

Основи веб-дизайну

Робота з типографікою

Класичний стиль передбачає використання серіфних шрифтів, які додають тексту елегантності та традиційності. Такий підхід часто використовується в книжкових виданнях та офіційних документах.

Велика висота рядка та червоний рядок полегшують читання довгих текстів, створюючи комфортний ритм для очей читача.

styles.css 

h1 {
    font-family: 'Georgia', serif;
    font-size: 42px;
    color: #2c3e50;
    text-align: center;
    font-style: italic;
    margin-bottom: 20px;
}

h2 {
    font-family: 'Georgia', serif;
    font-size: 28px;
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 5px;
}

p {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    color: #34495e;
    text-align: justify;
    line-height: 1.6;
    text-indent: 40px;
}

💡 Поради для класичного стилю:

  • Шрифти: Використовуйте серіфні шрифти (Georgia, Times New Roman)
  • Червоний рядок: Додайте text-indent для абзаців
  • Вирівнювання: Застосуйте text-align: justify для рівномірного розподілу
  • Кольори: Використовуйте класичні кольори (темно-сині, бордові)
  • Акценти: Додайте курсив для заголовків для елегантності

💼Варіант 2 Сучасний стиль

Завдання:

Створити сучасне оформлення з sans-serif шрифтами. Заголовки мають бути стилізованими, абзаци - збільшеним міжрядковим інтервалом для кращої читабельності.

Сучасний веб-дизайн

Інновації в типографіці

Сучасний стиль характеризується чистими лініями, sans-serif шрифтами та мінімалістичним підходом. Такий дизайн добре підходить для корпоративних сайтів та блогів.

Великий міжрядковий інтервал та чіткі контрасти роблять текст легким для сприйняття на екранах різних пристроїв.

styles.css 

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    color: #27ae60;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

h2 {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    color: #2980b9;
    background: #ecf0f1;
    padding: 10px;
    border-radius: 5px;
}

p {
    font-family: 'Verdana', sans-serif;
    font-size: 16px;
    color: #2c3e50;
    text-align: left;
    line-height: 1.8;
}

💡 Поради для сучасного стилю:

  • Шрифти: Використовуйте sans-serif шрифти (Arial, Verdana, Helvetica)
  • Інтервал: Застосуйте великий line-height для читабельності
  • Трансформація: Експериментуйте з text-transform для заголовків
  • Кольори: Використовуйте сучасні кольори (зелений, синій)
  • Фон: Додайте background-color для виділення підзаголовків

🎭Варіант 3 Елегантний стиль

Завдання:

Створити вишукане оформлення з використанням декоративних елементів. Заголовки мають мати тіні та особливе вирівнювання, текст - ніжні кольори.

Мистецтво типографіки

Естетика тексту

Елегантний стиль поєднує в собі класичні серіфні шрифти з сучасними декоративними елементами. Тіні та градієнти додають тексту об'ємності та глибини.

Ніжна палітра кольорів створює спокійну атмосферу, ідеальну для творчих проектів та преміальних видань.

styles.css 

h1 {
    font-family: 'Garamond', serif;
    font-size: 48px;
    color: #8e44ad;
    text-align: center;
    font-weight: normal;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

h2 {
    font-family: 'Garamond', serif;
    font-size: 32px;
    color: #16a085;
    font-style: italic;
    text-align: right;
}

p {
    font-family: 'Palatino Linotype', serif;
    font-size: 20px;
    color: #7f8c8d;
    text-align: justify;
    line-height: 1.7;
    text-indent: 30px;
}

💡 Поради для елегантного стилю:

  • Шрифти: Використовуйте вишукані серіфні шрифти (Garamond, Palatino)
  • Тіні: Додайте text-shadow для об'ємності заголовків
  • Вирівнювання: Експериментуйте з нестандартним вирівнюванням
  • Кольори: Використовуйте ніжні, пастельні кольори
  • Курсив: Застосуйте font-style: italic для елегантності

⚡Варіант 4 Мінімалістичний стиль

Завдання:

Створити мінімалістичне оформлення з тонкими шрифтами та приглушеними кольорами. Акцент на простоті та функціональності.

Мінімалізм у дизайні

Less is more

Мінімалістичний стиль базується на принципах простоти та функціональності. Тонкі шрифти, приглушена палітра кольорів та максимум вільного простору.

Такий підхід дозволяє зосередити увагу на контенті, не відволікаючи читача зайвими декоративними елементами.

styles.css 

h1 {
    font-family: 'Helvetica', sans-serif;
    font-size: 32px;
    color: #2c3e50;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
}

h2 {
    font-family: 'Helvetica', sans-serif;
    font-size: 20px;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 3px;
}

p {
    font-family: 'Helvetica', sans-serif;
    font-size: 14px;
    color: #7f8c8d;
    text-align: left;
    line-height: 1.8;
}

💡 Поради для мінімалістичного стилю:

  • Шрифти: Використовуйте тонкі, легкі шрифти (Helvetica Light)
  • Кольори: Оберіть приглушену палітру кольорів (сірі, бежеві)
  • Мінімалізм: Мінімізуйте декоративні елементи
  • Трансформація: Використовуйте text-transform для акцентів
  • Інтервали: Застосуйте letter-spacing для кращої читабельності

🎨Варіант 5 Творчий стиль

Завдання:

Створити креативне оформлення з нестандартними шрифтами та яскравими кольорами. Ідеально підходить для дитячих сайтів та творчих проектів.

Весела типографіка

Граємо з текстом

Творчий стиль дозволяє експериментувати з шрифтами, кольорами та оформленням. Тіні, пунктирні рамки та незвичайні кольори створюють життєрадісну атмосферу.

Такий підхід чудово підходить для сайтів, що розраховані на молоду аудиторію або творчі проекти, де важливо виділитися.

styles.css 

h1 {
    font-family: 'Comic Sans MS', cursive;
    font-size: 40px;
    color: #e67e22;
    text-align: center;
    text-shadow: 3px 3px 0 #f39c12;
}

h2 {
    font-family: 'Comic Sans MS', cursive;
    font-size: 26px;
    color: #9b59b6;
    border: 2px dashed #9b59b6;
    padding: 10px;
    text-align: center;
}

p {
    font-family: 'Comic Sans MS', cursive;
    font-size: 18px;
    color: #34495e;
    text-align: justify;
    line-height: 1.6;
}

💡 Поради для творчого стилю:

  • Шрифти: Використовуйте нестандартні шрифти (Comic Sans, cursive)
  • Кольори: Експериментуйте з яскравими кольорами
  • Тіні: Додайте text-shadow для 3D-ефекту
  • Рамки: Використовуйте dashed або dotted borders
  • Експерименти: Не бійтеся незвичайних комбінацій

💼Варіант 6 Професійний стиль

Завдання:

Створити професійне оформлення для бізнес-сайтів. Чіткі шрифти, консервативні кольори та структурований вигляд.

Корпоративний дизайн

Професійний підхід

Професійний стиль характеризується чіткими sans-serif шрифтами, консервативною палітрою кольорів та структурованим розташуванням елементів.

Подвійні лінії, градієнтні фони та чіткі відступи створюють враження надійності та компетентності, що важливо для бізнес-проектів.

styles.css 

h1 {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 38px;
    color: #2c3e50;
    text-align: center;
    border-bottom: 3px double #3498db;
    padding-bottom: 10px;
}

h2 {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 22px;
    color: #c0392b;
    background: linear-gradient(90deg, transparent, #f8f9fa, transparent);
    padding: 8px 0;
}

p {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16px;
    color: #2c3e50;
    text-align: justify;
    line-height: 1.7;
    text-indent: 25px;
}

💡 Поради для професійного стилю:

  • Шрифти: Використовуйте професійні sans-serif шрифти (Trebuchet MS)
  • Кольори: Оберіть консервативні кольори (сині, сірі, темно-червоні)
  • Рамки: Використовуйте border-bottom з подвійною лінією
  • Фон: Застосуйте градієнтні фони для підзаголовків
  • Структура: Додайте text-indent для структурованого вигляду

Назад Вперед Зміст