Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Створення Повноцінного Вебсайту за Допомогою HTML | Секція
Основи HTML

bookСтворення Повноцінного Вебсайту за Допомогою HTML

Свайпніть щоб показати меню

Ми вже розглянули основні концепції HTML і готові створити повноцінний односторінковий сайт-портфоліо з нуля.

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

Покроковий посібник

1. План структури сайту

Наша сторінка-портфоліо міститиме:

  • Шапка: назва сайту та навігаційні посилання;
  • Про себе: коротке представлення власника;
  • Портфоліо: проєкти з зображеннями, назвами та короткими описами;
  • Контакти: форма для зв'язку з відвідувачами;
  • Підвал: авторське право та контактні/соціальні посилання.

2. Структурування контенту за допомогою семантичного HTML

Створення нового файлу index.html та додавання базової структури HTML з <!DOCTYPE html>, <html>, <head> і <body>.

index.html

index.html

copy

3. Розділ заголовка

Додавання <header> з іменем власника та <nav>, що містить посилання для переходу до розділів About, Portfolio та Contact.

index.html

index.html

copy

4. Розділ "Про себе"

Створити <section id="about"> з заголовком і коротким абзацом, який описує власника.

index.html

index.html

copy

5. Розділ портфоліо

Додати <section id="portfolio">, який містить перелік проєктів із зображеннями, назвами та короткими описами.

index.html

index.html

copy

6. Розділ контактів

Створити <section id="contact"> із простою контактною формою для збору імені, електронної пошти та повідомлення.

index.html

index.html

copy

7. Розділ підвалу

Завершіть сторінку за допомогою <footer>, який містить текст про авторські права та посилання на соціальні мережі, телефон і електронну пошту.

index.html

index.html

copy

Бонус

Щоб зробити сторінку більш привабливою візуально, можна підключити CSS-файл і стилізувати HTML. CSS керує кольорами, відступами, шрифтами та макетом, допомагаючи тій самій структурі виглядати значно охайніше.

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

index.html

index.html

index.css

index.css

copy

Ось посилання на повний вебсайт, створений у цьому розділі: Вебсайт Юлії

Що ви створили

Ви створили повноцінну веб-сторінку за допомогою HTML зі структурою, вмістом і базовими елементами.

Чого бракує

Ваша сторінка працює, але виглядає дуже просто. HTML визначає структуру, а не дизайн.

Що далі

Щоб стилізувати сторінку, використовуйте CSS для додавання кольорів, макету та візуальної привабливості.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 24

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 1. Розділ 24
some-alt