EasyCode365EasyCode365

Твоя перша сторінка HTML

1. Вступ

Вітаємо на курсі "Основи HTML"! HTML — це стандартна мова, яку використовують для побудови структури кожного сайту в інтернеті. У цьому уроці ти створиш свою першу вебсторінку, зібравши базовий і необхідний каркас HTML-документа.

2. Основна ідея

Кожна вебсторінка потребує базової структури, щоб працювати правильно. Уяви цю структуру як фундамент і каркас будинку: перш ніж фарбувати стіни або ставити меблі, потрібна міцна й правильно організована основа.

3. Ключові частини

<!DOCTYPE html>

  • Що це: Спеціальна декларація, яку ставлять на самому початку файлу.
  • Чому це важливо: Вона гарантує, що браузер правильно відобразить сторінку.
  • Пояснення: Вона просто каже браузеру: "Привіт, я використовую сучасний стандарт HTML!".

<html>

  • Що це: Кореневий контейнер.
  • Чому це важливо: Це головна "обгортка" для всього твого сайту.
  • Пояснення: Увесь інший код, який ти пишеш, має бути всередині цього елемента.

<head>

  • Що це: Центр керування прихованою інформацією.
  • Чому це важливо: Тут зберігаються важливі технічні дані для браузера, а не контент для користувача.
  • Пояснення: Нічого з цього розділу не видно на самій сторінці; тут знаходяться речі на кшталт назви вкладки браузера.

<body>

  • Що це: Основна область відображення.
  • Чому це важливо: Саме тут розміщується весь текст, зображення та інтерактивні кнопки.
  • Пояснення: Усе, що знаходиться всередині цього тега, є видимим контентом для відвідувачів.

4. Приклад

Можна редагувати
<!DOCTYPE html>
<html>
  <head>
    <title>Моя перша вебсторінка</title>
  </head>
  <body>
    <h1>Привіт, світе!</h1>
    <p>Ласкаво просимо на мій новий сайт.</p>
  </body>
</html>

5. Розбір прикладу

  • <!DOCTYPE html>: Встановлює стандарт, щоб браузер знав, що ми використовуємо сучасний HTML.
  • <html>: Відкриває головну обгортку HTML-документа.
  • <head>: Відкриває прихований розділ для службової інформації браузера.
  • <title>: Встановлює текст у верхній вкладці браузера як "Моя перша вебсторінка".
  • </head>: Закриває прихований розділ.
  • <body>: Відкриває секцію видимого контенту.
  • <h1> і <p>: Показують великий жирний заголовок і звичайний абзац тексту на екрані.
  • </body> і </html>: Позначають кінець видимого контенту та кінець усього документа.

6. Спробуй сам

Тепер твоя черга писати код! Спробуй змінити текст усередині <title> на своє ім'я, а потім додай другий абзац <p> одразу під першим у блоці <body>.

7. Безкоштовні онлайн-редактори для практики

Ти можеш практикувати HTML прямо в браузері за допомогою цих безкоштовних інструментів:

8. Підсумок

  • HTML — це структурний фундамент вебу.
  • <head> містить невидимі для користувача дані для браузера, а <body> — видимий контент.
  • Кожна коректна сторінка потребує декларації <!DOCTYPE html> і кореневої обгортки <html>, щоб усе працювало правильно.