Теги форматування тексту

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

Теги <strong> та <em> використовуються для виділення тексту. Тег <strong> відображає текст напівжирним шрифтом, підкреслюючи особливу важливість, а тег <em> відображає текст курсивом, підкреслюючи акцент.

Тег <u> підкреслює текст для візуальної чіткості та виділення важливої інформації. Однак використовуйте підкреслення помірковано, щоб уникнути перевантаження тексту.

Тег <s> закреслює текст, вказуючи на видалення або неактуальність. Зазвичай використовується для позначення того, що певний текст було видалено або він більше не є дійсним.
Приклад:

У наведеному вище прикладі:

• Теги <strong> та <em> надають тексту виділення: <strong> робить текст напівжирним, а <em> — курсивом;
• Тег <u> підкреслює текст, виділяючи його візуально;
• Тег <s> перекреслює текст, позначаючи його як видалений або неактуальний.

Посилання

Посилання, також відомі як гіперпосилання, дозволяють користувачам переходити між веб-сторінками, ресурсами та різними формами комунікації. У HTML посилання створюються за допомогою тегу <a> (anchor).

<a href="href-value">some text</a>

Атрибут href у тегу <a> визначає адресу призначення посилання. Він може приймати різні типи URL, зокрема:

• Абсолютні URL: Вказують повну адресу пов’язаного ресурсу, включаючи протокол (наприклад, "https://www.example.com");
• Телефонні URL: Дозволяють користувачам ініціювати телефонні дзвінки безпосередньо з браузера при натисканні. Форматуються як "tel:phone-number". Важливо вказувати код країни та видаляти спеціальні символи або пробіли з номера телефону (наприклад, "tel:+123456789");
• Email URL: Дозволяють користувачам створювати електронні листи при натисканні. Форматуються як "mailto:email-address". Важливо вказувати повну електронну адресу після mailto: (наприклад, "mailto:example@example.com").

Приклад:

У наведеному вище прикладі:

• Тег <a> створює гіперпосилання з різними призначеннями;
• Атрибут href визначає різні URL-адреси, включаючи абсолютні URL, номери телефонів та електронні адреси.

Інші корисні атрибути

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

• target="_blank": Вказує, де відкривати пов'язаний документ. "_blank" відкриває посилання у новому вікні або вкладці;
• download: Вказує, що цільовий ресурс буде завантажено при натисканні на гіперпосилання. Цей атрибут може мати значення для визначення імені файлу при збереженні ресурсу.

Приклад:

У цьому прикладі:

• Атрибут href вказує URL пов’язаного ресурсу;
• Атрибут target відкриває посилання у новому вікні або вкладці.

Кнопки

Тег <button> створює клікабельні кнопки на веб-сторінках. Це дозволяє користувачам взаємодіяти з веб-сторінкою, наприклад, надсилати форму або виконувати JavaScript-код. Хоча ми не будемо зосереджуватися на JavaScript у цьому курсі, важливо знати, що така можливість існує.

Типи кнопок

• Стандартна кнопка (<button type="button">): універсальна кнопка для різних дій на веб-сторінці, наприклад, виклику JavaScript-функцій або переходу на іншу сторінку;
• Кнопка надсилання (<button type="submit">): використовується у формі для надсилання даних форми на сервер;
• Кнопка скидання (<button type="reset">): використовується у формі для скидання полів форми до їхніх початкових значень.

Приклад:

У наведеному вище прикладі:

• Перший кнопка — це стандартна кнопка з атрибутом onclick, який викликає сповіщення при натисканні;
• Друга кнопка — це кнопка надсилання, яка надсилає дані форми на сервер;
• Третя кнопка — це кнопка скидання, яка повертає поля форми до початкових значень.

Відеоінструкція