Зміст курсу
Знайомство з HTML
Знайомство з HTML
Атрибути
Атрибути є невід'ємною частиною елементів HTML, оскільки вони надають додаткову інформацію або інструкції про елемент. Визначаючи поведінку, зовнішній вигляд або функціональність елемента, атрибути покращують його загальну функціональність. Атрибути вказуються у відкриваючому тезі елемента і складаються з імені та значення.
Базовий синтаксис
Атрибути вказуються лише у трикутних дужках відкриваючого тегу елемента. Синтаксис для визначення атрибуту наступний:
Ключові моменти
- Атрибути можуть бути необов'язковими або обов'язковими: Залежно від елемента, певні атрибути можуть бути обов'язковими для коректної роботи, тоді як інші є необов'язковими і надають додаткові можливості кастомізації;
- Атрибути беруться в лапки: Значення атрибутів беруться в подвійні лапки (
"..."
) або одинарні лапки ('...'
). Це допомагає відрізнити їх від імені елемента і полегшує читання; - Кожен тег має власний набір атрибутів: Різні елементи HTML підтримують різні атрибути. Розуміння специфічних атрибутів, що застосовуються до кожного елемента, є важливим для їх ефективного використання;
- Можна використовувати декілька атрибутів: В одному елементі можна використовувати декілька атрибутів, розділяючи їх пробілами. Це дає змогу ширше кастомізувати та контролювати поведінку елемента.
Приклади використання
Розглянемо кілька прикладів використання елементів HTML з атрибутами, щоб зрозуміти, як вони впливають на поведінку елементів:
index
index
index
Пояснення коду по рядках:
- Елемент
input
;type="text"
вказує на те, що поле вводу повинно приймати від користувача звичайний текст;placeholder="name"
надає підказку або приклад очікуваного введення у полі введення. Ми очікуємо ім'я користувача.
- Елемент
img
;alt="Forest"
надає альтернативний текст для зображення. Якщо зображення не буде завантажено, користувач побачить текст "Forest";src="..."
вказує URL-адресу джерела зображення (Uniform Resource Locator). В інтернеті воно знаходиться за цим посиланням (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+example+img.png
).
- Елемент
a
;target="_blank"
вказує, що коли користувач натискає на посилання, URL-адреса призначення повинна відкритися в новій вкладці браузера;href="https://www.google.com/"
посилання призначення.
- Елемент
button
.type="reset"
визначає поведінку кнопки, яка при натисканні скидає поля форми до початкових значень, якщо кнопка вказана в елементіform
.
Примітка
У цьому курсі ми заглибимося в деталі атрибутів кожного елемента. Наразі важливо зрозуміти концепцію атрибутів, їх застосування та той факт, що кожен елемент має свій унікальний набір атрибутів. Ці атрибути відіграють важливу роль у зміні зовнішнього вигляду, призначення та функціональності елемента.
Підсумок
Елемент HTML зазвичай складається з тега, атрибутів і вмісту.
- Тег визначає тип елемента (наприклад,
p
,img
тощо); - Атрибут надає додаткову інформацію про елемент (наприклад,
src
,alt
тощо); - Вміст - це все, що знаходиться між відкриваючим та закриваючим тегами елемента.
Дякуємо за ваш відгук!