sparklingman

Вступ до HTML

Blog

Що таке HTML?

HTML (від англійської HyperText Markup Language — [гайперТекст маркап ленґвідж]) — це "будівельний матеріал" для створення веб-сайтів. Якщо уявити сайт як будинок, то HTML — це цеглини, які тримають усе разом. HTML допомагає описати, які елементи є на сторінці: текст, зображення, кнопки тощо.

Як працює HTML?

HTML складається з тегів — це спеціальні "команди", які кажуть браузеру, як саме відобразити ту чи іншу частину сторінки.

Ось приклад:

<h1>Привіт, світ!</h1>
  • <h1> — це тег, що означає "заголовок найвищого рівня".
  • Привіт, світ! — це текст, який побачать люди.
  • </h1> — це закриття тега. Усі теги закриваються, щоб браузер знав, де їх дія закінчується.

Як виглядає структура HTML-документа?

Будь-який HTML-документ починається з основної структури:

<!doctype html>
<html>
  <head>
    <title>Моя тестова сторінка</title>
  </head>
  <body>
    <h1>Ласкаво просимо на мій сайт</h1>
    <p>Це мій перший вебсайт!</p>
  </body>
</html>
  • <!doctype html> — каже браузеру, що це документ у HTML5.
  • <html> — тег, що обгортає весь документ.
  • <head> — частина з інформацією про сайт (назва, стилі тощо).
  • <title> — назва, яка буде відображатися на вкладці браузера.
  • <body> — основна частина документа, де розміщений увесь контент.

Що можна додати за допомогою HTML?

  • Заголовки: Від найголовнішого <h1> до менш важливих <h6>.

    <h1>Це найголовніший заголовок</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

  • Параграфи: Для тексту використовують <p>.

    <p>Це текст параграфа. Його легко читати!</p>

  • Зображення: Додаються за допомогою <img>.

    <img src="images/kittens.jpg" alt="Милі кошенята">

  • Посилання: Робляться за допомогою <a>.

    <a href="https://example.ua">Натисни тут, щоб перейти на інший сайт</a>
    • href — адреса, куди веде посилання.

  • Списки: HTML дозволяє створювати два типи списків: нумеровані та ненумеровані.

    • Нумерований список (із числами): 
      <ol>
    <li>Зробити чай</li>
    <li>>ипити чай</li>
    <li>Зробити веб-сайт</li>
</ol>
      • <ol> — означає "ordered list" (нумерований список).
      • <li> — це елемент списку ("list item").
    • Ненумерований список (із крапками): 
      <ul>
    <li>Зробити чай</li>
    <li>>ипити чай</li>
    <li>Зробити веб-сайт</li>
</ul>
      • <ul> — означає "unordered list" (ненумерований список).

  • Таблиці: допомагають організовувати дані у вигляді рядків та стовпців.

    <table>
    <tr>
        <th>Ім'я</th>
        <th>Вік</th>
    </tr>
    <tr>
        <td>Толік</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Оля</td>
        <td>22</td>
    </tr>
</table>
    • <table> — створює таблицю.
    • <tr> — додає рядок.
    • <th> — це "table header" (заголовок таблиці).
    • <td> — "table data" (дані в таблиці).

  • Розділювачі допомагають організувати контент:

    <hr>
    • <hr> — горизонтальна лінія, яка розділяє секції.

  • Форми дозволяють користувачам вводити дані, наприклад, заповнювати анкету або вводити логін.

    <form action="submit_form.php" method="post">
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name">

    <label for="email">Електронна пошта:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Відправити</button>
</form>
    • <form> — це форма.
    • action — адреса, куди надсилатимуться дані.
    • method — спосіб передачі даних (зазвичай get або post).
    • <label> — описує поле.
    • <input> — створює поля для вводу.
    • <button> — кнопка.

Чому HTML такий важливий?

HTML — це основа всіх веб-сайтів. Без нього браузери не зрозуміли б, що потрібно показувати. Він простий у вивченні, тому новачкам легко з ним почати.

Як зробити свій перший сайт?

  • Відкрий текстовий редактор, наприклад, Notepad чи Visual Studio Code.
  • Створи новий файл і збережи його з розширенням .html. Наприклад: index.html.
  • Встав основну структуру HTML: 
    <!doctype html>
<html>
  <head>
    <title>Моя тестова сторінка</title>
  </head>
  <body>
    <h1>Ласкаво просимо на мій сайт</h1>
    <p>Це мій перший вебсайт!</p>
  </body>
</html>
  • Збережи файл і відкрий його у браузері, двічі клікнувши на нього.

Ти побачиш сторінку з написами! 🎉

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

Назад