HTML + CSS
  • 🧑‍💻Full-Stack Web Developer
  • ‼️Список корисних ресурсів
  • 📚Теорія
    • 1️⃣HTML
      • Введення в веб-розробку
      • Теги та атрибути
      • Скелет документа HTML
      • Семантика
      • Розмітка тексту
      • Розмітка тексту (2 частина)
      • Зображення
      • Структура HTML-документа
      • Таблиці
      • Символьні підстановки
      • Таблиця кодів символів
      • Відео та аудіо
      • Інструменти розробника
      • Валідація
    • 2️⃣CSS та селектори
      • CSS
      • Селектори
      • Псевдокласи стану
      • Колір
      • Каскад стилів
      • CSS-змінні
      • Одиниці вимірювання
      • Стилізація тексту
      • Властивості шрифту
      • Псевдоелементи тексту
      • Підключення сторонніх шрифтів
    • 3️⃣Блокова модель
      • Основи блокової моделі
      • Геометрія елемента
      • Типи елементів
      • Структурні псевдокласи
    • 4️⃣Flexbox
      • Концепції
      • Властивості контейнера
      • Властивості елемента
    • 5️⃣Grid
    • 6️⃣Зображення і декор
      • Типи зображень
      • Фон елемента
      • Властивості object-fit і object-position
      • Псевдоелементи
      • Градієнт
      • Тінь елемента
    • 7️⃣Векторна графіка
      • Що таке векторна графіка
      • SVG-елементи
      • SVG-документ
      • Використання векторної графіки
      • Зміна властивостей в SVG
    • 8️⃣Позиціонування
      • Позиційовані елементи
      • Властивість z-index
      • Властивість overflow
    • 9️⃣Переходи і анімація
      • CSS-переходи
      • CSS-анімація
      • 2D-трансформації
      • Перспектива
    • 🔟Форми
      • Для чого потрібні форми
      • Елемент <form>
      • Елемент <label>
      • Елемент <input>
      • Елемент <textarea>
      • Елемент <select>
      • Елемент <datalist>
      • Групування полів
      • Валідація форм
      • Валідація на клієнті
      • Псевдокласи стану
    • 🐭Адаптивна верстка
      • Медіа-запити
      • Метатег viewport
      • Інструменти розробника для адаптивної та респонсивної верстки
      • Типи верстки
      • Стратегія Mobile First
      • Вендорні префікси
      • Налаштування теми
    • 🐹Адаптивна графіка
      • Щільність пікселів
      • Респонсивні зображення
      • Респонсивні фонові зображення
      • Респонсивний елемент <img>
      • Елемент <picture>
    • 🦁Методологія ВЕМ
    • 🐶Препроцесор SASS
    • 🐰CSS фреймворки
      • Що таке CSS фреймворки
  • 👷‍♂️Практика
    • 👷Практика
  • Про мене
    • Про мене
Powered by GitBook
On this page
  1. Теорія
  2. HTML

Введення в веб-розробку

PreviousHTMLNextТеги та атрибути

Last updated 1 year ago

Сучасні веб-сайти побудовані із використанням таких основних технологій:

HTML - технологія, яка визначає структуру, верстку і контент веб-сторінки.

CSS - технологія, використовувана для стилізації сторінок і позиціювання елементів на сторінці.

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

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

HTML

HyperText Markup Language (Мова розмітки гіпертекстових документів) - правила розмітки веб-документів. Мова призначена для маркування документів, що містять текст, зображення, гіперпосилання тощо.

HTML-документ - текстовий файл з розширенням .html. HTML-документи лежать в основі роботи Веб, і інтерпретуються та відображаються із допомогою веб-браузерів. Крім видимої інформації, HTML-документи містять додаткові метадані (наприклад, мову тексту, автора документа, стислий підсумок). Мову розмітки розробив консорціум W3C.

Покликання:

Підтримкою HTML займається:

📚
1️⃣
Офіційна документація HTML
Web Hypertext Application Technology Working Group (WHATWG)
Цікавий ілюстрований туторіал про веброзробку англійською мовою