Посилання — це невіддільна частина всесвітньої павутини, оскільки вони об’єднують вебсторінки, документи та ресурси всього інтернету.

Посилання в HTML (скорочено від Hypertext Markup Language) відіграють важливу роль у створенні мережі взаємопов’язаного контенту, що дозволяє користувачам безперешкодно переміщатися між різними сторінками та вебсайтами.

У цій статті ми розглянемо основи посилань в HTML, включно з їхніми типами, атрибутами та найкращими практиками.

Що таке посилання в HTML?

Посилання в HTML (також відоме як гіперпосилання) — це елемент, який дозволяє користувачам переміщатися з однієї сторінки на іншу. Воно також дозволяє користувачам переходити до зовнішніх ресурсів (наприклад, документів, зображень, відео тощо).

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

Як створити текстове посилання

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

<a href="https://www.pryklad.com">Перейти на pryklad.com</a>

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

Як створити посилання-зображення

Зображення можна зробити активним посиланням, оточивши його елементом посилання. Це корисно для створення навігації на основі зображень або посилання на більші версії зображень:

<a href="https://www.pryklad.com">
  <img src="image.jpg" alt="Зображення pryklad">
</a>

Посилання-зображення є візуально привабливими і часто використовуються для елементів (наприклад, логотипів, банерів чи маленьких зображень), які при натисканні перенаправляють користувача на відповідну сторінку.

Як створити посилання-емейл

Щоб створити посилання, яке відкриває електронну пошту з вже заповненою адресою отримувача, використайте схему mailto:

<a href="mailto:contact@pryklad.com">Надіслати лист</a>

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

Як створити зовнішні посилання

Зовнішні посилання вказують на інші вебсайти. Важливо вказати, що посилання є зовнішнім, використовуючи атрибут target="_blank", щоб відкрити пов’язану сторінку в новій вкладці або вікні. Це забезпечує, що вебсайт залишається відкритим в поточній вкладці користувача, а пов’язаний вміст відображається в окремій вкладці чи вікні:

<a href="https://www.zovnishniy-sayt.com" target="_blank">Перейти на зовнішній сайт</a>

Зовнішні посилання — це спосіб надати додаткові ресурси, посилання або джерела, дозволяючи користувачам легко повернутися на вебсайт.

Як створити внутрішні посилання

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

<a href="/about">Дізнайтесь більше про нас</a>

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

Пояснення атрибутів посилання

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

Як використовувати атрибут href

Атрибут href вказує адресу або ресурс, на які веде посилання. Таке посилання може бути абсолютним (починається з http:// чи https://) або відносним (належить до поточної сторінки).

Ось так виглядає створення абсолютного посилання:

<a href="https://www.pryklad.com">Перейти на pryklad.com</a>

А так відносного:

<a href="/about">Дізнайтесь більше про нас</a>

Використання відносних посилань часто переважає при створенні посилань в межах одного вебсайту, оскільки це робить посилання адаптованими до змін в структурі домену.

Як використовувати атрибут target

Атрибут target визначає, як відтворювати пов’язаний ресурс при натисканні. До загальних значень належать:

• _self (за замовчуванням): відкриває посилання в тій же вкладці або вікні;
• _blank: відкриває посилання в новій вкладці або вікні;
• _parent: відкриває посилання в батьківському фреймі або вікні;
• _top: відкриває посилання у повному вікні, замінюючи будь-які фрейми.

<a href="https://www.zovnishniy-sayt.com" target="_blank">Перейти на зовнішній сайт</a>

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

Як використовувати атрибут rel

Атрибут rel вказує на відносини між поточним документом і пов’язаним ресурсом. Наприклад, rel="noopener" часто використовують з метою безпеки при відкритті посилань у новій вкладці:

<a href="https://www.pryklad.com" rel="noopener">Перейти на pryklad.com</a>

Значення noopener допомагає захиститися від можливих вразливостей безпеки, пов’язаних з відкриттям нових вкладок або вікон.

Найкращі практики посилань в HTML

Щоб забезпечити відмінний досвід користувача і дотриматись стандартів вебдоступності та оптимізації для пошукових систем (SEO), використовуйте найкращі практики, коли працюєте з посиланнями в HTML.

Використовуйте описовий текст

Текст, який використовується для посилань, має бути описовим і передавати користувачам суть. Уникайте загальних фраз, таких як «натисніть тут».

Не рекомендовано: <a href="https://www.pryklad.com">Натисніть тут</a>

Рекомендовано: <a href="https://www.pryklad.com">Перейти на pryklad.com</a>

Описовий текст покращує досвід користувача і допомагає йому зрозуміти, куди веде посилання.

Надавайте контекст

При посиланні на зовнішні ресурси подумайте над тим, щоб додати короткий опис або атрибут title, щоб проінформувати користувачів про зміст, на який вказує посилання:

<a href="https://www.pryklad.com" title="Перейти на pryklad.com">Pryklad.com</a>

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

Тестуйте посилання

Регулярно перевіряйте всі посилання на своєму вебсайті, щоб переконатися, що вони працюють правильно. Зламане посилання може засмутити користувача і пошкодити репутації вебсайту.

Подумайте над тим, щоб використовувати автоматизовані інструменти для перевірки посилань. Такі інструменти сканують вебсайт на наявність зламаних посилань і дозволяють їх вчасно виправити.

Оптимізуйте доступність

Використовуйте семантичний HTML і надавайте альтернативний текст для зображень у межах посилань, щоб вміст був доступним для користувачів з порушеннями.

<a href="/about">
  <img src="zobrazhennya-pro-nas.jpg" alt="Про нас">
</a>

Доступні посилання забезпечують, що всі користувачі, незалежно від своїх можливостей, можуть взаємодіяти з вебсайтом.

Враховуйте SEO

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

Не рекомендовано: <a href="/product123">Натисніть тут для детальної інформації</a>

Рекомендовано: <a href="/product123">Дізнатись більше про продукт XYZ</a>

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

Використовуйте відносні посилання

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

<a href="/about">Дізнайтесь більше про нас</a>

Відносні посилання менш схильні до зламу, коли ви вносите зміни у структуру вебсайту або переносите його на інший домен.

Використовуйте індикатори для зовнішніх посилань

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

Подумайте над тим, щоб додати іконки або текст (наприклад, «Зовнішнє посилання») поруч зі зовнішніми посиланнями.

Висновок

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

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

Уявіть, що ви створюєте статтю з переліком рекомендацій або вебсторінку з меню опцій. Як ви структуруєте цю інформацію, щоб зробити її візуально привабливою та легкою для навігації?

Тут приходять на допомогу списки HTML. У цій статті ми зануримося у світ списків HTML та розглянемо, як вони можуть допомогти ефективно організувати та представити вміст.

Основи списків HTML

Списки HTML поділяють на три основні категорії: невпорядковані списки, впорядковані списки та списки визначень. Кожен тип має конкретне призначення і може бути налаштований, щоб відповідати вашим потребам дизайну та вмісту.

Як створити невпорядкований список

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

Щоб створити невпорядкований список, використайте елемент <ul> (unordered list) та вкладіть окремі пункти списку в елементи <li> (list item):

<ul>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>

Цей код створить простий невпорядкований список:

• Елемент 1
• Елемент 2
• Елемент 3

Ви можете додатково налаштувати вигляд маркерів за допомогою CSS, щоб відповідати стилю вебсайту.

Як створити впорядкований список

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

Щоб створити впорядкований список, використайте елемент <ol> (ordered list) та вкладіть пункти списку в елементи <li> (list item):

<ol>
  <li>Перший елемент</li>
  <li>Другий елемент</li>
  <li>Третій елемент</li>
</ol>

Цей код створить простий впорядкований список:

1. Перший елемент
2. Другий елемент
3. Третій елемент

Впорядковані списки корисні для створення покрокових інструкцій, ранжування елементів або в будь-якому іншому випадку, коли важливий певний порядок.

Як створити список визначень

Списки визначень призначені для представлення термінів та їхніх визначень. Вони складаються зі списку термінів, оточених елементами <dt> (definition term), та відповідних визначень, оточених елементами <dd> (definition descriptio). Ось приклад:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, використовується для структурування вмісту в інтернеті.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, використовується для стилізації вебдокументів.</dd>
  
  <dt>JavaScript</dt>
  <dd>Мова програмування, використовується для додавання інтерактивності на вебсторінках.</dd>
</dl>

Цей код створить простий список визначень:

HTML

HyperText Markup Language, використовується для структурування вмісту в інтернеті.

CSS

Cascading Style Sheets, використовується для стилізації вебдокументів.

JavaScript

Мова програмування, використовується для додавання інтерактивності на вебсторінках.

Списки визначень особливо корисні для глосаріїв та словників, де потрібно вказати терміни та їхні визначення.

Як налаштувати списки за допомогою CSS

HTML надає основну структуру для списків, але щоб зробити їх візуально привабливими і вписати у дизайн вебсайту, можна застосовувати стилі CSS. Ось деякі загальні властивості CSS, які можна використати для налаштування списків:

Зміна маркера чи числа

Щоб змінити маркери в невпорядкованих списках або числа у впорядкованих списках, можна використати властивість list-style-type. Наприклад, щоб використати квадратні маркери в невпорядкованому списку, додайте таке правило CSS:

ul {
  list-style-type: square;
}

Невпорядкований список з таким CSS матиме наступний вигляд:

• Елемент 1
• Елемент 2
• Елемент 3

Додавання відступу та поля

Ви можете контролювати місце навколо елементів списку, змінюючи властивості margin та padding. Наприклад, ви можете додати простір між елементами списку:

li {
  margin-bottom: 10px;
}

Елементи списку матимуть додаткове місце між собою завдяки такому правилу, що робить список зручнішим для читання.

Стилізація елементів списку

Окремі елементи списку можна стилізувати по-іншому, націлившись на них за допомогою CSS. Наприклад, ви можете змінити колір елементів списку, коли користувач наводить на них курсор:

li:hover {
  color: blue;
}

Так елементи списку змінюватимуть свій колір на синій, коли користувач наводить на них курсор, надаючи візуальний зворотний зв’язок.

Створення власних маркерів

Якщо ви хочете використати власні маркери, використайте псевдоелемент ::before. Це дозволить додати власний вміст перед кожним елементом списку. Наприклад, якщо ви хочете використати галочки:

ul {
  list-style: none; /* Видаліть маркери за замовчуванням */
}

li::before {
  content: "✔"; /* Символ галочки за юнікодом */
  margin-right: 5px; /* Додайте місце між маркером та текстом */
}

Невпорядкований список з таким CSS матиме власні маркери-галочки перед кожним елементом:

• Елемент 1
• Елемент 2
• Елемент 3

Як зробити списки доступними

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

Семантичні елементи

Важливо переконатись, що ви правильно використовуєте семантичні елементи, щоб надати контекст користувачам, які користуються читачами екрана. Наприклад::

<ol>
  <li><strong>Крок 1:</strong> Підготуйте інгредієнти </li>
  <li><strong>Крок 2:</strong> Розігрійте духовку до 180°С </li>
  <li><strong>Крок 3:</strong> Змішайте сухі інгредієнти </li>
</ol>

У цьому впорядкованому списку використано елементи <strong>, щоб підкреслити важливі кроки. Це робить список не лише візуально привабливішим, але й покращує розуміння вмісту для читачів екрана.

Ролі та атрибути ARIA

Для складніших списків або коли потрібна додаткова інформація щодо доступності, можна використати атрибути ARIA (Accessible Rich Internet Applications). Наприклад:

<ul role="list" aria-label="Функції">
  <li role="listitem">Адаптивний дизайн</li>
  <li role="listitem">Доступність</li>
  <li role="listitem">Кросбраузерність</li>
</ul>

У цьому невпорядкованому списку атрибут role має значення "list", щоб позначити, що це список, а атрибут aria-label надає маркер для списку. Ці атрибути допомагають читачам екрана правильно інтерпретувати та передавати мету і вміст списку.

Висновок

Використання списків HTML на вебсайті — потужний спосіб організації інформації, створення зручних інтерфейсів та покращення користувацького досвіду.

Розуміючи різновиди списків (невпорядковані, впорядковані та списки визначень) і знаючи, як стилізувати їх за допомогою CSS, ви можете зробити вебсайт красивішим та зручнішим для користувачів.

Використовуйте списки в документах HTML в міру, враховуючи як дизайн, так і доступність. Використовуйте CSS, щоб вдосконалити їхній зовнішній вигляд відповідно до стилю вебсайту і переконуйтесь, що кожен, незалежно від своїх можливостей, може легко користуватись вебсайтом.

Пам’ятайте, що списки — це більше, ніж просто маркери чи цифри. Вони є основою ефективного вебдизайну та комунікації.

Практика

Ви дізнались про списки HTML, то чому б не спробувати створити власні списки в документі HTML? Експериментуйте з різними стилями та зверніть увагу, як CSS може змінювати вигляд списків. Практика — ключ до володіння цією важливою навичкою веброзробки.

HTML (абревіатура від HyperText Markup Language) служить основою веброзробки, яка дозволяє створювати інтерактивні вебсторінки, структурувати вміст і ефективно передавати повідомлення.

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

Ключова роль HTML у веброзробці

HTML відіграє важливу роль у веброзробці, оскільки визначає структуру та вміст вебсторінок. Він служить основою, на якій ґрунтуються вебсайти.

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

<!-- Приклад тегу HTML -->
<h1>Це тег HTML</h1>

Як написати код HTML?

Написання коду HTML стосується розуміння тегів HTML.

Теги розташовані в кутових дужках і складаються з відкриваючої та закриваючої частини. Вони виступають як будівельні блоки, які визначають структуру вебсторінки.

Їх можна порівняти з цеглою та розчином. Важливо розуміти їхню роль для веброзробки.

<!-- Базова структура HTML -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Моя перша вебсторінка</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Це абзац тексту.</p>
</body>
</html>

Як створити вебсайт за допомогою HTML?

Створення вебсайту за допомогою HTML складається з декількох ключових етапів. Розглянемо їх в наступних розділах.

Планування вебсайту

Перш ніж почати програмувати, проведіть ретельне планування свого вебсайту.

Визначте цільову аудиторію, окресліть концепцію вмісту і структури сайту та розробіть дизайн, який відповідає вашим цілям.

Пам’ятайте, що візуальний дизайн можна покращити за допомогою CSS (каскадні таблиці стилів), що ми розглянемо пізніше.

Написання коду HTML

Відкрийте текстовий редактор (наприклад, Visual Studio Code або Sublime Text) та почніть писати код HTML.

Розпочніть з основної структури, включно з <!DOCTYPE html>, <html> </html>, <head> </head> та <body> </body>.

Потім заповніть тіло (body) своїм вмістом.

<!-- Приклад структури документа HTML -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Мій перший вебсайт</title>
</head>
<body>
    <!-- Вміст розташовується тут -->
</body>
</html>

Зберігання як .html

Зберігайте файли HTML з розширенням .html, щоб вказати, що це вебсторінки. Правильна назва файлу є важливою для організації проєкту.

Локальне тестування

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

Хостинг та публікація

Щоб сайт був доступний в інтернеті, вам знадобляться служби вебхостингу. Різні провайдери пропонують хостинг, і ви, як правило, отримаєте доменне ім’я (наприклад, www.yourwebsite.com), щоб посилатись на свій сайт, розміщений на хостингу.

Як розпочати код HTML?

Розпочати код HTML — легко. Розглянемо кожен крок у наступних розділах.

Вибір текстового редактора

Оберіть текстовий редактор, який відповідає вашим потребам. До популярних належать Visual Studio Code, Sublime Text та Atom. Ці редактори пропонують функції, серед яких підсвічування синтаксису та автодоповнення, спеціально розроблені для веброзробки.

Оголошення HTML5

Ініціюйте свій документ HTML за допомогою <!DOCTYPE html>. Це оголошення позначає використання HTML5, останнього стандарту HTML.

<!DOCTYPE html>

Побудова структури

В середині тегів <html> </html> створіть структуру HTML.

Розділ <head> </head> містить метадані, включно з заголовком сторінки, а розділ <body> </body> містить видимий вміст вебсторінки.

<html>
<head>
    <meta charset="UTF-8">
    <title>Моя вебсторінка</title>
</head>
<body>
    <!-- Вміст розташовується тут -->
</body>
</html>

Додавання метаданих

В межах розділу <head> </head> використовуйте тег <meta>, щоб вказати кодування символів, що забезпечить правильне відтворення.

<meta charset="UTF-8">

Як запустити код HTML крок за кроком?

Виконання коду HTML є простим завдяки сучасним браузерам. Ось поетапна інструкція:

Збережіть файл HTML

Переконайтеся, що файл HTML збережений з розширенням .html. Так ви сигналізуєте комп’ютеру, що це документ HTML.

Подвійне натискання, щоб відкрити файл

Двічі натисніть на файлі HTML, і браузер автоматично відкриє його. Браузер відтворює HTML, відображаючи вебсторінку.

Альтернативні браузери

Якщо ви надаєте перевагу конкретному браузеру, натисніть правою кнопкою миші на файлі HTML та оберіть «Відкрити програмою», щоб вибрати бажаний браузер.

Інспектування та налагодження

Сучасні браузери обладнані вбудованими інструментами розробника, які дозволяють інспектувати та налагоджувати HTML, CSS та JavaScript.

Щоб отримати доступ до цих інструментів, натисніть правою кнопкою миші  на вебсторінці та оберіть «Показати вихідний код сторінки» або натисніть F12 чи Ctrl+Shift+I (Windows) або Cmd+Option+I (Mac).

Як написати «Hello» в HTML?

Відтворити «Hello» на вебсторінці просто. Ви можете використати тег <h1>, щоб створити заголовок верхнього рівня, як це було показано раніше.

HTML пропонує декілька способів представлення «Hello». Наприклад:

<!-- Використовуючи тег <h1> -->
<h1>Hello!</h1>

Або ви можете використати тег абзацу:

<!-- Використовуючи тег <p> -->
<p>Hello!</p>

Обидва варіанти призведуть до того, що «Hello!» відтвориться на вебсторінці. Вибір залежить від вмісту та ваших вподобань у стилізації.

Важливо відзначити, що в HTML існує шість рівнів заголовків: від <h1> (найвищий) до <h6> (найнижчий). Заголовки використовуються для ієрархічної структури контенту, де <h1> представляє головний заголовок, а <h6> — підзаголовки.

Як створити файл HTML з прикладом?

Створення файлу HTML — ваш головний шлях до веброзробки. Ось детальна інструкція:

Оберіть текстовий редактор

Виберіть текстовий редактор, який відповідає вашому робочому процесу та вподобанням. Сучасні редактори пропонують функції, серед яких підсвічування синтаксису та автодоповнення, що покращить ваш досвід програмування.

Структуруйте HTML

Розпочніть документ HTML з <!DOCTYPE html>, а після цього додайте теги <html> </html>, щоб оточити вміст. У розділі <head> </head> встановіть метадані, такі як заголовок сторінки та кодування символів, використовуючи тег <meta>.

<!-- Приклад структури HTML -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Мій перший вебсайт</title>
</head>
<body>
    <!-- Вміст розташовується тут -->
</body>
</html>

Додайте вміст

В межах розділу <body> </body> вставте свій вміст. Експериментуйте з різними тегами HTML для форматування вмісту, включно з заголовками, абзацами, списками, посиланнями та зображеннями.

<!-- Приклад вмісту -->
<h1>Вітаю на вебсайті</h1>
<p>Це приклад абзацу.</p>
<ul>
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
</ul>

Збережіть з розширенням .html

Збережіть свій файл з розширенням .html. Така конвенція найменування забезпечить, що комп’ютер визнає файл як документ HTML.

Перегляньте локально

Двічі натисніть на файлі HTML, щоб відкрити його у браузері. Це надає миттєвий попередній перегляд вебсайту, що дозволить побачити, як він виглядає для аудиторії.

Введення CSS для стилізації

Хоча HTML визначає структуру вашої вебсторінки, для стилізації використовують CSS. Ви можете приєднати зовнішній файл CSS до HTML, щоб управляти дизайном та макетом вебсторінки. Наприклад:

<!-- Приєднання зовнішнього файлу CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">

Таке розділення вмісту (HTML) та презентації (CSS) є основною практикою у веброзробці.

Як написати речення в HTML?

Щоб створити речення в HTML, можна використати тег <p> (абзац), як згадувалось раніше. Однак HTML надає гнучкість, що дозволяє використати інші вбудовані теги для коротших текстових фрагментів. Ось приклад:

<!-- Використовуючи тег <p> -->
<p>Це приклад речення в HTML.</p>

Або для коротшого тексту ви можете використати тег <span>:

<!-- Використовуючи тег <span> -->
<span>Це речення.</span>

Тег <p> зазвичай використовують для абзаців, в той час як тег <span> більш універсальний і часто використовується для вбудованих елементів всередині речення чи абзацу. Обирайте тег відповідно до контексту вмісту.

Додаткові елементи HTML

Хоча ми розглянули базу, HTML надає безліч інших елементів і атрибутів для побудови багатого та інтерактивного досвіду. Ось деякі додаткові елементи HTML, про які варто дізнатись:

Форми

HTML надає елементи, такі як <form>, <input> та <button>, для створення користувацьких форм, щоб збирати дані.

Таблиці

Ви можете використовувати <table>, <tr>, <td> та інші пов’язані теги для структури табличних даних.

Мультимедіа

Вставляйте зображення, аудіо та відео за допомогою тегів <img>, <audio> та <video>.

Посилання

Створюйте гіперпосилання за допомогою тегу <a>, щоб з’єднувати вебсторінки та зовнішні ресурси.

Списки

Використовуйте <ul> для невпорядкованих списків, <ol> для впорядкованих списків та <li> для елементів списку.

Семантичні теги

HTML5 вводить семантичні елементи, такі як <header>, <nav>, <section>, <article> та <footer>, для покращення структури та доступності вебсторінок.

Метатеги

Додайте додаткові налаштування до свого документа за допомогою метатегів, включно з тими, що визначають кодування символів, налаштування видимості та інформацію про автора.

Висновок

Підсумовуючи, HTML — це головні двері до веброзробки. Він надає основу, на якій можна будувати захоплюючий досвід та ефективно спілкуватися зі своєю аудиторією.

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

Розвиваючись у веброзробці, пам’ятайте, що HTML — це лише початок вашого шляху. Покращуйте свої навички HTML за допомогою CSS для стилізації та JavaScript для інтерактивності. Такий підхід надасть можливість створювати динамічні та захоплюючі вебсайти, які привертатимуть увагу аудиторії.

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

Текст відіграє важливу роль на вебсторінках, оскільки допомагає користувачам зрозуміти її суть.

Коли ви додаєте текст на вебсторінку, за замовчуванням цей текст має чорний колір. Іноді виникає бажання змінити колір тексту, щоб він був більш персоналізованим.

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

У цій статті ви дізнаєтеся, як змінити колір тексту в HTML. Ми розглянемо різні методи та обговоримо, який метод найкращий.

Як змінювали колір тексту до HTML5

До випуску HTML5, щоб додати текст на вебсайт, використовували тег <font>. Цей тег приймав атрибут color, який отримував колір у вигляді назви або значення шістнадцяткового коду:

<font color="#9900FF"> Ласкаво просимо до freeCodeCamp. </font>

// Або

<font color="green"> Ласкаво просимо до freeCodeCamp. </font> 

З появою HTML5 цей тег втратив свою цінність. Це логічно, оскільки HTML є мовою програмування для розмітки вебсайту, а не мовою стилю. Коли виникає питання зі стилю, краще використовувати CSS, головною функцією якого є стилізація.

Це означає, що для того, щоб додати колір вебсторінці, потрібно використовувати CSS.

Якщо ви поспішаєте дізнатися, як змінити колір тексту за допомогою CSS, то ось як це зробити:

// Використовуючи вбудований CSS
<h1 style="color: value;"> Ласкаво просимо до freeCodeCamp! </h1>

// Використовуючи зовнішній/внутрішній CSS
selector {
    color: value;
}

Припустимо, ви нікуди не поспішаєте. Зануримось в деталі.

Як змінити колір тексту в HTML

Ви можете використати властивість color в CSS, щоб змінити колір тексту. Ця властивість приймає такі значення кольорів: шістнадцяткові коди, RGB, HSL або назви кольорів.

Наприклад, якщо ви хочете змінити колір тексту на блакитний, можете скористатися назвою skyblue, шістнадцятковим кодом #87CEEB, десятковим кодом RGB rgb(135,206,235) або значенням HSL hsl(197, 71%, 73%).

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

Як змінити колір тексту в HTML за допомогою вбудованого CSS

Вбудований CSS дозволяє використовувати стиль напряму в елементі HTML. Це означає, що ви безпосередньо додаєте CSS у тег HTML.

Ви можете використати атрибут style, який містить усі стилі, які ви бажаєте застосувати до цього тегу.

<p style="...">Ласкаво просимо до freeCodeCamp!</p>

Для цього ви використовуватимете властивість color разом із бажаним значенням кольору:

// Назва кольору
<p style="color: skyblue">Ласкаво просимо до freeCodeCamp!</p>

// Шістнадцятковий код
<p style="color: #87CEEB">Ласкаво просимо до freeCodeCamp!</p>

// Код RGB
<p style="color: rgb(135,206,235)">Ласкаво просимо до freeCodeCamp!</p>

// Значення HSL
<p style="color: hsl(197, 71%, 73%)">Ласкаво просимо до freeCodeCamp!</p>

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

Як змінити колір тексту в HTML за допомогою внутрішнього або зовнішнього CSS

Інший бажаний спосіб змінити колір тексту — використати внутрішні або зовнішні стилі. Вони досить схожі, оскільки обидва використовують селектор.

Для внутрішнього стилю це виконується в тегу <head> файлу HTML. У тег <head> ви додаєте тег <style> і розміщуєте там всі свої стилі CSS, як показано нижче:

<!DOCTYPE html>
<html>
  <head>
    <style>
      selector {
        color: value;
      }
    </style>
  </head>

  // ...

</html>

У той час як для зовнішніх стилів все, що вам потрібно зробити — додати стиль CSS до файлу CSS, використовуючи загальний синтаксис:

selector {
  color: value;
}

Селектор може бути як тегом HTML, так і class або ID. Наприклад:

// HTML
<p> Welcome to freeCodeCamp! </p>

// CSS
p {
  color: skyblue;
}

Або використовуючи class:

// HTML
<p class="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
.my-paragraph {
   color: skyblue;
}

Або використовуючи id:

// HTML
<p id="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
#my-paragraph {
   color: skyblue;
}

Примітка: як ви бачили раніше, у вбудованому CSS можна використовувати назву кольору, шістнадцятковий код, RGB і значення HSL із внутрішнім або зовнішнім стилем.

Підсумок

У цій статті ви дізналися, як змінити колір шрифту/тексту елемента HTML за допомогою CSS. Ви також дізналися, як це робили розробники до появи HTML5 за допомогою тегу <font> і атрибутів кольору.

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

Наприклад, замість того, щоб додавати подібні вбудовані стилі до всіх елементів тегу <p>, можна використати один CSS-клас для всіх.

Вбудовані стилі не вважаються найкращою практикою, оскільки вони призводять до великої кількості однотипних записів, і ви не можете повторно використовувати стилі в іншому місці. Щоб дізнатись більше, див. мою статтю про вбудований стиль в HTML. Ви також можете дізнатись про те, як змінити розмір тексту і колір фону в цих статтях.

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

Щасливого програмування!

Вирушайте в подорож навчання! Перегляньте понад 200 експертних статей про веброзробку. Перегляньте мій блог, щоб отримати більше цікавого контенту від мене.

Тег select у HTML використовується для створення випадного списку, щоб користувачі могли обрати бажаний варіант. Це інструментальна функція для збору даних, які надсилаються на сервер.

Зазвичай тег select розташовується у формі, а варіанти вибору закодовані в тегу <option>. Це також може бути окремий елемент, який однаково буде пов’язаний з формою за допомогою одного зі своїх спеціальних атрибутів.

У цій публікації ми пройдемось по створенню випадного списку за допомогою тегу select, і ви зможете використовувати його у своїх проєктах. Я також торкнуся стилізації тегу select, оскільки це надзвичайно складно.

Ось інтерактивна платформа про те, як створити випадний список у HTML

Атрибути тегу select

Перед тим, як ми зануримось у створення випадного списку за допомогою тегу select, нам потрібно обговорити його атрибути.

Ось його атрибути:

• name потрібно прикріплювати до кожного елементу керування, оскільки його використовують як посилання на дані після їх надсилання на сервер;
• multiple дозволяє користувачу обирати декілька варіантів зі випадного списку;
• required зазвичай використовують для валідації. Завдяки цьому атрибуту форма не буде надіслана, якщо користувач не обере принаймні одну відповідь з випадного списку;
• disabled забороняє користувачу взаємодіяти з варіантами відповіді;
• size виражений у числах; його використовують, щоб вказати кількість видимих відповідей;
• autofocus вказує, що вхідні дані отримують фокус при завантаженні сторінки.

Як створити випадний список із тегом select

Щоб створити випадний список за допомогою тегу select, спочатку потрібно створити елемент form. Причина в тому, що ви також матимете кнопку відправки для надсилання даних на сервер.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Я додав трішки CSS, щоб відцентрувати список та кнопку, і надав тілу світло-сірого фону:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Аби все було продуманіше та доступніше, до елемента label можна додати випадний список, щоб на ньому був фокус при натисканні на текст мітки. Для цього можна використати такий код:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Я написав символ # як значення атрибута action, щоб ви не отримали 404 при натисканні на кнопку надсилання.

А зараз трішки змінимо CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Отримаємо такий результат:

Робота не закінчується тут. Один із елементів випадного списку з’являється за замовчуванням і буде вибраний, якщо користувач натисне кнопку надсилання одразу після переходу на сторінку.

Однак це поганий досвід користування. Цього можна позбутись, вказавши «select a language» як перший елемент списку.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Ще один поганий досвід користування: випадний список закриває кнопку надсилання, коли користувач натискає на поле вибору.

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

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

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

За допомогою атрибута multiple ви можете дозволити користувачеві вибирати декілька елементів з випадного списку.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

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

Це не все, що ви можете зробити за допомогою тегів <select> та <option>. Ви також можете створити багатошарове поле вибору з елементом <optgroup> всередині тегу <select>.

Ви можете перетворити вже створений список у багатошарове поле вибору:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Як стилізувати елемент select

Стилізація елемента select часто викликає плутанину та непослідовно відображається у браузерах. Однак ви завжди можете спробувати наступне:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

У вищеподаному коді CSS я надав тексту в полі вибору наступне:

• сімейство шрифтів cursive та білий колір;
• outline зі значенням 0, щоб видалити виділення при фокусі;
• зелений фон;
• 1-піксельний малиновий кордон;
• 4-піксельний радіус кордону, щоб трішки заокруглити край;
• 4-піксельний відступ, щоб між елементами було більше місця.

Тепер поле вибору виглядає краще:

Висновок

Тег select дуже корисний, коли ви створюєте випадні списки в HTML. Це як радіокнопка і прапорець в одному пакеті.

Пам’ятайте, що з радіокнопками ви можете обрати лише один елемент з списку, а з прапорцем — декілька. select гнучкіший, оскільки ви можете налаштувати його для прийняття лише одного або декількох елементів.

Єдина проблема тегу select — його важко стилізувати. Розумним рішенням є використання бібліотеки CSS, яка пропонує чудові класи для стилізації форми разом із елементом select.

Сподіваюсь, завдяки цій публікації ви детальніше ознайомились з тегом select та тепер можете використовувати його у своїх проєктах.

Дякую, що прочитали. Продовжуйте програмувати.

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

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

Здебільшого таблиці краще відображають великі обсяги структурованих даних. Тому в цій публікації ми дізнаємося, як використовувати таблиці в HTML та як їх стилізувати.

Але перш за все: що таке таблиця в HTML?

Що таке таблиця в HTML?

Таблиця — це представлення даних у вигляді стовпчиків та рядків. За допомогою таблиць у HTML можна впорядкувати такі дані, як зображення, тексти, посилання тощо.

Використання таблиць стало популярнішим завдяки тегам у HTML, які полегшують їх створення та дизайн.

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

Загальні теги для HTML таблиці

До інших тегів входять:

• <tr> — представляє рядки
• <td> — використовують для створення комірок
• <th> — використовують для додавання заголовків
• <caption> — використовують для додавання підпису
• <thead> — додає окремий заголовок до таблиці
• <tbody> — показує головне тіло таблиці
• <tfoot> — створює окремий колонтитул таблиці

Синтаксис HTML таблиці:

<table>
  <tr>
    <td>Комірка 1</td>
    <td>Комірка 2</td>
    <td>Комірка 3</td>
  </tr>
  <tr>
    <td>Комірка 4</td>
    <td>Комірка 5</td>
    <td>Комірка 6</td>
  </tr>
</table>

Тепер ви знаєте, що таке таблиця HTML та як її створити. Зараз розглянемо, як ми можемо використати теги, щоб створити багатофункціональні таблиці.

Як додати заголовок таблиці в HTML

Щоб додати заголовок до таблиці, використовують <th>. У базових таблицях заголовок завжди займатиме верхній рядок, тобто ми матимемо <th> оголошеним у першому рядку таблиці, за яким йтимуть дані. Текст у заголовку вирівняний за центром і жирний за замовчуванням.

Приклад використання <th>

<table>
  <tr>
    <th>Ім'я</th>
    <th>Прізвище</th>
    <th>Електронна пошта</th>
  </tr>
  <tr>
   <td>Гілларі</td>
   <td>Ньякунді</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Ларі</td>
    <td>Мак</td>
    <td>developer@mail.com</td>
  </tr>
</table>

У наведеному вище прикладі ми можемо сказати, яку інформацію містить кожен стовпчик. Це можливо завдяки тегу <th>.

Як додати підпис до таблиці

Основне завдання підпису таблиці — надати інформацію про дані, які представлені у таблиці. Підпис можна розташувати знизу або зверху, а за замовчуванням він завжди буде вирівняний за центром.

Використайте тег <caption>, щоб додати заголовок до таблиці.

Синтаксис підпису

<table>
  <caption></caption>
  <tr> </tr>
</table>

Приклад використання <caption>

<table>
  <caption>Безоплатні ресурси для програмування</caption>
  <tr>
    <th>Сайти</th>
    <th>Ютуб канали</th>
    <th>Мобільні додатки</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

Як використовувати атрибут scope у HTML таблицях

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

Головна мета елемента scope — показати цільові дані, щоб користувач не догадувався сам. Атрибут оголошений в заголовку <th> та приймає значення col, row, colgroup й rowgroup.

Значення col й row вказують на те, що заголовок надає інформацію для рядка чи стовпчика відповідно.

Синтаксис scope

<table>
 <tr>
   <th scope="значення">
 </tr>
</table>

Приклад використання <scope>

<table>
  <tr>
    <th></th>
    <th scope="col">Семестр</th>
    <th scope="col">Оцінка</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Січень - Квітень</td>
    <td>Задовільно</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Травень - Серпень</td>
    <td>Добре</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>Вересень - Грудень</td>
    <td>Відмінно</td>
  </tr>
</table>

Атрибут scope показує, куди належить заголовок: до стовпчика, рядка чи обох.

У прикладі заголовки належать до стовпчиків, оскільки так написано в коді. Перегляньте, як змінюється таблиця при зміні атрибутів.

Як об’єднати комірки в HTML таблицях

Можливо, ви стикались з комірками, які об’єднані у два або більше рядків чи стовпчиків. Це називається об’єднанням комірок.

Якщо ви працювали в таких програмах, як MS office або Excel, ймовірно, ви виділяли комірки та натискали на команду.

Ті самі функції можна застосувати до HTML таблиці, використавши два атрибути: colspan для горизонтального об’єднання та rowspan для вертикального об’єднання. Атрибутам присвоюються числа, більші за нуль, що позначають кількість комірок, які потрібно об’єднати.

Приклад використання span

<table>
  <tr>
    <th>Ім'я</th>
    <th>Предмет</th>
    <th>Оцінка</th>
  </tr>
  <tr>
    <td rowspan = "2">Гілларі</td>
    <td>Передова веброзробка</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Операційна система</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Ларі</td>
    <td>Передова веброзробка</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Операційна система</td>
    <td>75</td>
  </tr>
  <tr>
     <td></td>
    <td colspan="3">Середній бал: 72.5</td>
  </tr>
</table>

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

При використанні атрибутів colspan та rowspan переконайтесь, що правильно оголосили значення.

Як додати заголовок, тіло та колонтитул до HTML таблиці

Так само як і будь-який інший документ, таблиця має три основні розділи: заголовок, тіло та колонтитул.

У таблиці вони розділені за допомогою атрибутів, а саме:

• <thead> — окремий заголовок для таблиці
• <tbody> — основний вміст тіла
• <tfoot> — окремий колонтитул до таблиці

Приклад використання <thead>, <tbody> та <tfoot>

<table>
  <thead>
    <tr>
      <th colspan="2">Жовтень</th>
      <th colspan="2">Листопад</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Продаж</td>
      <td>Прибуток</td>
      <td>Продаж</td>
      <td>Прибуток</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">Листопад був продуктивнішим</th>
    </tr>
  </tfoot>
</table>

У наведеному вище прикладі заголовок представлено назвою місяців, тіло представлене цифрами з продажів та прибутку, а колонтитул представлений твердженням.

Варто зазначити, що таблиця може мати не лише одне тіло. У подібному сценарії кожне тіло групує пов’язані між собою рядки.

Як стилізувати HTML таблиці за допомогою CSS

Таблиці набули широкого користування і майже кожна з них була стилізована. Більшість з них використовують різні стилі, будь то кольори, шрифти, виділення важливих значень тощо.

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

На відміну від стилізації за допомогою інших мов чи інструментів, у HTML потрібен додатковий файл із розширенням .css, у якому ви додасте свої стилі та зв’яжете його з файлом HTML.

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

У наведеному вище коді ми створили таблицю та використали деякі атрибути, описані в публікації.

Ми стилізували її, використавши CSS файл: додали колір та кордон, щоб зробити таблицю читабельнішою та красивішою. У ній також є фіксований заголовок, тож ви можете прокручувати великий обсяг даних та бачити заголовок певного стовпчика.

Ми розглянули таблиці, створили декілька з них та навіть забігли наперед, стилізувавши їх.

Але мати знання і не знати, як їх застосувати, нічим не допоможе. Отже, де і коли потрібно використовувати таблиці у своєму дизайні?

Коли використовувати таблицю

Існує багато ситуацій, коли таблиці можуть стати в пригоді:

• Ви можете використати таблицю, якщо потрібно порівняти дані за спільними характеристиками. Наприклад, відмінності між A та B, або результати команд X та Y.
• Ви також можете використати її, якщо хочете надати загальний огляд числових даних. Хорошим прикладом є порівняння оцінок студентів або турнірна таблиця.
• Таблиця може допомогти читачам швидко знайти потрібну інформацію. Наприклад, якщо ви переглядаєте довгий список імен, таблицю можна використати для поділу списку, що полегшить роботу читачам.

Висновок

Таблиці — це чудовий спосіб представити табличні дані. Їх можна створити за допомогою базових HTML елементів, як-от <table>, <tr>, <td>.

А ще ви можете стилізувати таблиці за допомогою файлу CSS, щоб вони мали кращий вигляд та чітко представляли дані.

Перш ніж закінчити, виконайте одне завдання:

Створіть таблицю, використовуючи все, що ми розглянули в цій публікації. Потім порівняйте свою таблицю із кодом нижче:

Вкладки чудові, чи не так? Вони дозволяють виконувати багато завдань одночасно.

Зараз вкладки настільки поширені, що коли ви натискаєте посилання, воно, ймовірно, відкриється в новій вкладці.

Якщо ви коли-небудь вдавалися в питання, як це зробити зі своїм посиланням, то ви у правильному місці.

Елемент прив’язки

Щоб створити посилання на вебсторінці, вам потрібно обернути елемент (текст, зображення тощо) в елемент прив’язки (<a>) та встановити його атрибут href як адресу, на яку ви хочете зробити посилання.

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian">freeCodeCamp</a>.</p>

Відвідайте freeCodeCamp.

Якщо ви натиснете на посилання вище, браузер відкриє посилання в поточному вікні або вкладці. Це поведінка за замовчуванням в кожному браузері.

Щоб відкрити посилання в новій вкладці, нам потрібно буде переглянути інші атрибути елемента прив’язки.

Атрибут Target

Цей атрибут каже браузеру, як відкрити посилання.

Щоб відкрити посилання в новій вкладці, просто встановіть атрибут target  на _blank:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank">freeCodeCamp</a>.</p>

Тепер, коли хтось клацає на посилання, воно відкривається в новій вкладці або, можливо, у новому вікні (залежно від налаштувань браузера).

Проблеми безпеки через target="_blank"

Я наполегливо рекомендую вам додавати rel="noreferrer noopener" до елемента прив’язки кожного разу, коли ви використовуєте атрибут target:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Це призводить до наступного виводу:

Відвідайте freeCodeCamp.

Атрибут rel встановлює зв’язок між вашою сторінкою та приєднаною адресою. Значення noopener noreferrer запобігає типу фішингу, відомому як табнабінг (захоплення вкладки).

Що таке табнабінг?

Табнабінг — це експлойт, який використовує стандартну поведінку браузера з target="_blank" для отримання часткового доступу до сторінки через API window.object.

Табнабінг може спрямувати вас на підроблену сторінку. Більшості користувачів це буде важко помітити, оскільки фокус буде на вкладці, яка щойно відкрилася, а не на початковій вкладці з вашою сторінкою.

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

Підсумки

За допомогою HTML легко відкрити посилання в новій вкладці. Вам просто потрібен елемент прив’язки (<a>) з трьома важливими атрибутами:

1. Атрибут href, встановлений на потрібну адресу
2. Атрибут target, встановлений на _blank, що вказує браузеру відкривати посилання в новій вкладці/вікні, залежно від налаштувань браузера
3. Атрибут rel, встановлений на noreferrer noopener, щоб запобігти можливим зловмисним атакам

Знову ж таки, ось повний робочий приклад:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Що призводить до такого виводу в браузері:

Відвідайте freeCodeCamp.

Ще раз дякую, що прочитали. Щасливого програмування.