Лекції
Почати
Почати навчання
JavaRush /Курси /Python SELF UA /Знайомство з HTML

Знайомство з HTML

Python SELF UA
Рівень 29 , Лекція 0
Відкрита

1. Теги в HTML

Що таке HTML?

HTML (HyperText Markup Language) — це мова розмітки, яка використовується для створення та структурування веб-сторінок. З допомогою HTML ми можемо організувати зміст сторінки, використовуючи різні теги та атрибути, щоб браузер знав, як відображати інформацію. У цій лекції ми розглянемо основні поняття HTML, такі як теги, дерево тегів, атрибути, одиночні теги та структуру HTML-документа.

У HTML теги — це ключові елементи, які дозволяють розмітити вміст. Вони охоплюють текст та інші елементи, допомагаючи браузеру зрозуміти, як саме їх показувати. Наприклад, теги <h1> та <p> вказують браузеру, що текст всередині них є заголовком або абзацом.

Теги записуються всередині кутових дужок <>. Більшість тегів відкриваються та закриваються, тобто складаються з початкового і кінцевого тегу. Наприклад:

HTML 
                      
                        <h1>Це заголовок</h1>
                        <p>Це абзац тексту.</p>
ALL IN ONE

Тут <h1> — це початковий тег, а </h1> — кінцевий тег.

Дерево тегів

HTML-документ має ієрархічну структуру, де теги вкладені один в одного, утворюючи древоподібну структуру. Це «дерево тегів» визначає, як елементи на сторінці взаємопов'язані і в якому порядку повинні відображатися.

Ось приклад простого дерева тегів:

Python 

<html>
<head>
  <title>Приклад сторінки</title>
</head>
<body>
  <h1>Заголовок сторінки</h1>
  <p>Тут знаходиться текст абзацу.</p>
</body>
</html>

У цьому прикладі тег <html> є кореневим елементом, всередині нього знаходяться <head> та <body>. Всередині <body> розташовані теги <h1> та <p>. Така структура дозволяє логічно впорядкувати зміст сторінки.

Атрибути

Атрибути в HTML використовуються для додавання додаткової інформації до тегів. Вони розташовані в початковому тегу і складаються з імені та значення. Наприклад:

HTML 

<a href="https://example.com">Посилання на сайт</a>
<img src="image.jpg" alt="Опис зображення">
  • href вказує адресу посилання.
  • src — шлях до зображення.
  • alt — альтернативний текст, який буде відображатися, якщо зображення не завантажиться.

Атрибути дозволяють додати елементам додаткові характеристики, такі як ідентифікатор (id), класи (class), стилі (style) та багато іншого.

Одиночні теги

Деякі HTML-теги не містять внутрішнього вмісту та не потребують закриваючого тегу. Такі теги називають одиночними. Наприклад, тег <img> використовується для вставки зображення, і його структура виглядає так:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Опис зображення">
HTML 
  
    <img src="image.jpg" alt="Опис зображення">

Інші приклади одиночних тегів:

  • <br> — для перенесення рядка.
  • <hr> — для додавання горизонтальної лінії.

2. Знайомство з HTML-документом

HTML-документ починається з оголошення <!DOCTYPE html>, яке вказує браузеру, що це документ HTML5. Потім йде кореневий тег <html>, який містить теги <head> і <body>. У <head> знаходяться метадані документа (заголовок, стилі, скрипти), а в <body> — основний вміст сторінки.

Приклад HTML-документа

Python 
      
        <!DOCTYPE html>
        <html lang="uk">
        <head>
          <meta charset="UTF-8">
          <title>Моя перша сторінка</title>
        </head>
        <body>
          <h1>Ласкаво просимо!</h1>
          <p>Це приклад HTML-документа.</p>
          <a href="https://example.com">Відвідайте наш сайт</a>
        </body>
        </html>
  • <!DOCTYPE html> повідомляє браузеру, що документ написаний на HTML5.
  • <html lang="uk"> вказує мову документа.
  • <meta charset="UTF-8"> визначає кодування, що допомагає коректно відображати символи.
  • <title> задає назву сторінки, яка буде видно в заголовку вікна браузера.

Додаткові теги в <head>

Тег <head> містить інформацію, яка не відображається прямо на сторінці, але важлива для роботи сайту. Всередині <head> можна додати наступні теги:

  • <meta name="description" content="Опис сторінки"> — короткий опис сторінки для пошукових систем.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — дозволяє зробити сайт адаптивним для мобільних пристроїв.
  • <link rel="stylesheet" href="styles.css"> — підключення файла CSS зі стилями.
  • <script src="script.js"></script> — підключення зовнішнього JavaScript-файла.

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

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ