Вступ до HTML. Семантичні елементи HTML5. Links, Images, Text, Symbols

Лекція 3.
Вступ до HTML.
Семантичні елементи HTML5.
Links, Images, Text, Symbols
Дисципліна «Розробник фронтенду програмних систем»
Лектор Ірина ЮРЧУК
Вступ
HTML (HyperText Markup Language,
мова розмітки гіпертексту) — це мова,
за допомогою якої визначається
структура та вміст веб-сторінки.
У 1991 році британським ученим Тімом
Бернерсом-Лі, співробітником
Європейського інституту фізики
частинок (CERN) у Женеві, було
розроблено систему передачі
гіпертекстової інформації через
інтернет.
"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

2
2023
Історія
• 1986 - Міжнародна організація стандартизації (ISO) приймає "Standard Generalized Markup Language" -
SGML (ISO 8879). Цей стандарт описував узагальнену мета мову, за допомогою якої можна було
будувати розмітку будь-яких різновидів текстів. SGML визначив синтаксис запису елементів розмітки -
тегів та їх атрибутів, а також правила визначення нових тегів та вказівки структурних відносин між
ними.
• У липні 1994 р. випущена специфікація HTML 2. Ден Конноллі та його колеги зібрали всі широко
використовувані теги HTML в чернетку документа, яку потім було перетворено на HTML 2.
• Наприкінці 1994 року було створено Консорціум World Wide Web – організація, яка розробляє
стандарти для всесвітньої мережі.
• Березень 1995 - Дейв Раггетт опублікував інтернет-проект HTML 3. Серед нових ідей було розглянуто
цілий набір функцій для розмітки математичних та наукових документів, теги для створення таблиць,
обтікання зображень текстом тощо.
• Січень 1997 - Консорціум W3 офіційно затвердив HTML 3.2 як міжгалузеву специфікацію HTML. HTML
3.2 містив у собі таблиці, аплети, текстовий потік навколо зображень, нижні і верхні індекси.
• Грудень 1997 - Виходить HTML 4.0, який охоплює підтримку кадрів, скриптів, загальну процедуру
додавання різних об'єктів. Покращено використання таблиць та форм. Деякі теги були відзначені як
застарілі. Рекомендується використовувати таблиці стилів CSS.

3
2023
Історія
• Грудень 1999 - Представлений HTML 4.01, у якому доопрацювали об'єкти, форми та
зображення, виправили баги. Ця версія залишалася актуальною понад 10 років.
• 2000 - Нову версію мови розмітки після HTML 4.01 було названо XHTML 1.0. "Ікс" в назві
означав eXtreme ("розширений"). У XHTML вимагається дотримуватися правил мови XML.
• У 2004 році співробітники великих компаній Mozilla, Opera, Apple створюють робочу групу
під назвою WHATWG (Web Hypertext Application Technology Working Group). Вона створила
дві специфікації: Web Forms 2.0 (веб-форми) та Web Apps 1.0 (веб-додатки), які потім стали
частиною специфікації HTML5.
• 28 січня 2008 - W3C припинив розвиток XHTML 2.0 і почав розробляти HTML5 (вирішили
писати без пробілу) уже спільно з WHATWG.
• 28 жовтня 2014 - Опубліковано специфікацію HTML5. У цій версії синтаксис став строгішим у
порівнянні з попередньою, покращилася підтримка мультимедіа та графічних технологій,
з'явилися нові семантичні елементи.
• 14 грудня 2017 - W3C випустив другу редакцію HTML5 — HTML 5.2, який підтримує
модульний JavaScript, так само з'явилися нові елементи та атрибути.

4
2023
Історія
Ідея полягала в тому, що мова не залежала від форматера
(браузера або іншого програмного забезпечення для перегляду),
який фактично відображав текст на екрані. Використання пар тегів,
таких як <TITLE> та </TITLE>, взяте безпосередньо з SGML. Елементи
SGML, що використовуються в HTML Тіма, включали:
• P (параграф);
• елементи від H1 до H6 (заголовки рівня 1-6);
• OL (упорядковані списки);
• UL (невпорядковані списки);
• LI (елементи списку) тощо.

5
2023
Теги та атрибути (універсальні атрибути)
HTML- елементи до п'ятої версії
мови ділилися тільки на блокові
елементи (block-level elements) та
строкові (інлайн) елементи (inline-
level elements). У HTML5 з'явилося
поняття контентної моделі.
Контентні моделі — це набір
правил, які описують контекст, у
якому можна використовувати
елемент та очікуваний вміст
елемента.

6
2023
Контентні моделі
Flow content — контент-потік, до якого належать більшість елементів, які
використовуються в основній частині документів або веб-додатків.
Наприклад: <article>, <aside> тощо
Interactive content - інтерактивний контент, який передбачає взаємодію
з користувачем.
Наприклад: <label>, <select>, <textarea>, <video> (якщо є атрибут
controls).
Metadata content — контент метаданих. До нього належить контент, що
встановлює зображення або поведінку іншої частини контенту або
визначає взаємозв'язок HTML-документа з документами (наприклад, з
таблицями в стилі css), а також відповідає за зовнішній вигляд або
поведінку контенту на сторінці.
Наприклад: <link>, <meta> та ін.
7
2023
Контентні моделі
Phrasing content — текстовий контент. Він представлений елементами
для розмітки тексту всередині абзаців.
Наприклад: <b>, <bdi>, <bdo>, <br>, <button> тощо.
Embedded content — вбудований контент, який імпортується в документ
з інших джерел, іншої мови розмітки або іншого простору імен.
Наприклад: <audio>, <iframe>, <img> та ін.
Heading content — контент, що містить заголовки. Визначає заголовки
розділів.
Наприклад: <h1>, <h2>, <h3>.
Sectioning content — контент, який являє собою розділи
сторінки. Визначається ділянкою заголовків та колонтитулів.
Наприклад: <article>, <aside>, <nav>, <section>.
8
2023
Контентні моделі: взаємозв’язок

9
2023
Тег
Основою мови HTML є тег – це елемент гіпертекстової розмітки,
який виконує свою функцію.
Деякі теги використовуються для створення структури HTML
документа, інші — для форматування та створення елементів на
веб-сторінці.
Тег складається із спеціальних символів: < > та /.
Вони інтерпретуються програмним забезпеченням (браузерами)
для створення HTML-елемента.
Тег потрібен для того, щоб позначити початок і кінець елементів, з
яких складається сторінка.

10
2023
Синтаксис тега

11
2023
Етапи створення HTML-елемента
Етап 1
Створення початкового тега. Для цього використовується знак "<", потім вказується
ім'я елемента (список символів без пропуску), потім через пропуск можливі атрибути і
завершується процес створення тега знаком ">".
Етап 2
Створення контенту елемента. Елемент може містити контент - дані, які додаються
між початковим і кінцевим тегом. Якщо контент не вводити, елемент буде порожнім.
Етап 3
Створення кінцевого тега. Починається зі знаку "</", далі додається те саме ім'я
елемента, що має початковий тег, і завершується символом ">".
------------------------------------------------------------------------------------------------------------------------
Увага! В одиночних тегів немає контенту і кінцевого тега, тому спочатку пишуть
знак "<", далі ім'я елемента, і, можливо, атрибути та знак ">". Приклад одиночних
тегів: <img>, <br>.
12
2023
Що таке атрибут?
HTML-атрибути повідомляють браузеру, в який спосіб повинен
відображатися той чи інший елемент сторінки. Атрибути задають
елементам додаткові властивості та розширюють можливості. Якщо
атрибут має значення, воно береться в лапки.
Назви та значення атрибутів не чутливі до регістру, проте
рекомендується писати їх у нижньому регістрі.
Атрибути пишуться усередині тега. Якщо атрибутів кілька, вони
перераховуються через пропуск. Порядок значення не має, але варто
дотримуватись одного стилю для зручності читання коду.
Приклад:
<p style="color:green">Це параграф зеленого кольору.</p>

<p> А це параграф без атрибуту <b>style</b>.</p>

13
2023
Атрибути зі значенням
Для написання атрибуту зі значенням необхідно виконати такі
кроки:

14
2023
Атрибути зі значенням
Зверніть увагу: атрибути відокремлюються один від одного
пробілами. Кожен атрибут повинен бути єдиним у елемента і не
повинен повторюватись: alt писати можна, alt alt ні.
Замість подвійних лапок ("значення атрибута") можна писати
одинарні лапки (значення) або взагалі опустити лапки (значення).

15
2023
Приклади
У прикладі показано додавання картинки на сторінку за допомогою
елемента <img> з різними атрибутами:
Зверніть увагу:
тег img додає картинку на сторінку;
атрибут src задає шлях, де знаходиться файл з картинкою;
атрибут alt задає альтернативний контент;
атрибути width та height задають розмір картинки при завантаженні,
задається без одиниць виміру.
16
2023
Логічні атрибути
У логічних атрибутів немає значень, сама наявність чи відсутність
атрибута вже змінює поведінку елемента.
Синтаксис:
Розглянемо приклад використання логічного
атрибуту controls (додає кнопки керування до програвача. Якщо
цей атрибут відсутній, аудіопрогравач не має кнопок керування)
для аудіоплеєра:

17
2023
Порядок атрибутів
Порядок атрибутів елемента не має значення і на результат
відображення елемента не впливає.
!! Атрибут class у HTML-елементів зазвичай пишеться першим ;-)
Наприклад, наступні записи рівноцінні за своєю дією:

18
2023
Глобальні атрибути
Універсальні (глобальні) атрибути виділені в окрему групу, тому що
застосовуються практично до всіх елементів HTML.
Список усіх таких атрибутів за посиланням
https://html.spec.whatwg.org/multipage/dom.html#global-attributes,

19
2023
Популярні глобальні атрибути
Style
атрибут для приховування та
показу вмісту або передачі
сенсу, який в іншому випадку не
включається до документа, не
відповідає
title
Представляє консультативну інформацію для
елемента, як, наприклад, підходить для підказки. За
посиланням, це може бути заголовок або опис
цільового ресурсу; На зображенні це може бути
кредит на зображення або опис зображення; У пункті
це може бути виноска або коментар до тексту; За
цитуванням це може бути додаткова інформація про
джерело; Що стосується інтерактивного вмісту, це
може бути міткою для використання елемента або
інструкцій для використання елемента; і так далі.
Значення - це текст.
20
2023
Приклади
______________________________________________
__________________________________________
_________________________________________

21
2023
HTML документ та його структура
Будь-яка веб-сторінка містить набір
елементів, які є її “каркасом”. Це типові
елементи, які є на кожній сторінці,
незалежно від тематики або мови.
Нагадаємо, що кожен елемент HTML -
це тег. У свою чергу, тег - фундамент
HTML.
З огляду на це, можемо сказати, що у
кожному HTML-документі теги
формують дерево HTML-елементів.
Також до документу входить текст і
можуть бути коментарі.

22
2023
Структура мінімального HTML-документа

23
2023
Декларація <!DOCTYPE>
Перший рядок у кожному веб-документі повинен містити
оголошення <!DOCTYPE html>.
Незважаючи на те, що він поміщений у кутові дужки, це не тег, а
інструкція. Doctype означає декларацію на кшталт документа. Він
інформує веб-браузер про тип і версію HTML, яка використовується
під час створення веб-документа. Це допомагає браузеру
правильно обробляти та завантажувати його. Зараз
використовується HTML версії 5, для цього потрібне таке
оголошення:
<!DOCTYPE html>
24
2023
<html>
Елемент <html> є кореневим елементом HTML-документу. Він
складається з двох тегів <html>…</html> та контенту між ними. Під
контентом ми розуміємо весь вміст веб-сторінки. Якщо розглядати
HTML-документ як структуру дерева, то елемент HTML буде
коренем.
Елемент html завжди потрібно використовувати з
aтрибутом lang. Елемент html містить обов'язково два
елементи. Першим елементом є head, а іншим — body.
Елемент body завжди йде після head.

25
2023
<head>
Елемент <head>, аналогічно елементу html, складається з двох
тегів <head>…</head> та контенту всередині. head — це контейнер
для інших елементів, необхідних для надання даних про сторінку
(колекції метаданих HTML-документів). Він містить HTML-елементи,
які дають інформацію браузеру про заголовок сторінки (title),
кодування символів, підключені стилі та інше.
Всередині <head> можна використовувати такі елементи:
<link>, <meta>, <script>, <style>, <title>.

26
2023
<link>
Елемент <link> встановлює зв'язок даного документа із зовнішнім,
наприклад, з файлом зі стилями або шрифтами. Елемент
<link> перебуває всередині <head> і не створює посилання.
Атрибути:

27
2023
Приклад

28
2023
<title>
Елемент <title> позначає заголовок документа. При цьому <title> — це
не частина документа, він не відображається безпосередньо на веб-
сторінці.
Текст, який міститься в цьому елементі, відображається на вкладці у
браузері.
<title> можна використовувати лише один раз у документі. Його
потрібно розміщувати всередині контейнера<head>.

29
2023
<meta>
Елемент <meta> містить дані (метатеги), які потрібні для зберігання інформації,
необхідної для браузерів та пошукових систем. Так, наприклад, пошукові системи
звертаються до метатегів, щоб отримати опис сайту, ключові слова та інші дані.
Можливе використання більш ніж одного метатегу. Усі вони розміщені
в контейнері <head>
Зазвичай атрибути будь-якого метатегу зводяться до пар «ім'я=значення», імена яких
визначаються ключовими словами content, name, charset, http-equiv:

30
2023
Атрибут charset
вказує кодування документа.
Введено в HTML5 і призначено для скорочення форми <meta>, яка
задавала кодування в попередніх версіях HTML та XHTML.
Детально різниця між ASCII, ANSI, 8859 та UTF- 8 за посиланням тут
В одному документі не повинно бути більше одного
метаелементу з атрибутом charset.
Приклад:
<head>
<meta charset="UTF-8">
</head>
31
2023
Атрибут name
може набувати значень application-
name, author, description, keywords, viewport тощо.
Розглянемо докладніше <meta name="viewport">.
Тег <meta> з атрибутом name="viewport" потрібний для коректного
відображення веб-сторінки на смартфонах, планшетах та інших
пристроях, що мають високу щільність пікселів (>200ppi). Цей метатег
найчастіше застосовується для адаптивних сайтів, але за його
допомогою також можна покращити представлення веб-сторінки, що
має фіксовану або гнучку розмітку.
Особливості адаптації веб-сторінок для перегляду на різних пристроях
ми розглядатимемо далі в цьому курсі.

32
2023
Атрибут name
Viewport — це область на екрані пристрою, яка є видимою для
користувача без прокручування екрана.
Звичайний сайт, оптимізований для мобільних пристроїв, містить
такий мета-тег:

33
2023
<body>
Елемент <body> складається з двох тегів <body>…</body> та контенту
між ними. Елемент <body> необхідний для зберігання вмісту веб-
сторінки, який відображається у вікні браузера. Контент, який потрібно
виводити в документі, має в своєму розпорядженні вміст цього
контейнера.
До такого вмісту належать текст, зображення, теги, скрипти JavaScript
тощо.

34
2023
Приклад

35
2023
Коментарі
Коментарі можуть бути розміщені в будь-якому місці сторінки,
оскільки вони не відображаються браузером. Інформація,
наведена в коментарях, не має значення та не сприймається як
НТМL-код.
Коментарі заборонено вкладати всередину інших коментарів.
Синтаксис:
Приклад:

36
2023
Семантичні елементи
Семантичні елементи (семантичні теги) дають
змогу вказати роль контенту на сторінці. Ця
додаткова інформація допомагає
роботам/індексаторам, таким як Google і Bing,
краще зрозуміти який контент важливий, а який
другорядний, який використовується для
навігації і так далі. Додаючи семантичні
елементи на веб-сторінку, ви даєте додаткові
дані, які допомагають пошукачам розуміти ролі
та відносну важливість різних частин веб-
сторінки. Крім того, семантичні теги дають змогу
програмам читання з екрана виділяти важливий
контент на сторінці та відображати його. Отож,
контент стає ще більш доступним для різних
категорій користувачів.
HTML5 пропонує семантичні елементи
визначення різних частин веб-сторінки.

37
2023
Семантичні елементи
Елемент <header> призначений для визначення заголовного блоку або
"шапки" документа чи розділу.
Елемент <nav> визначає набір посилань навігації.
Елемент <main> призначений для основного контенту, що належить до
головної теми документа.
Елемент <aside> являє собою розділ сторінки, що складається з контенту,
який опосередковано пов'язаний з контентом навколо елемента <aside>
і який може вважатися відокремленим від цього контенту.
Елемент <article> визначає незалежний, самодостатній контент.
Елемент <footer> призначений для визначення нижньої частини,
"підвалу" документа або розділу.
38
2023
Елемент <header>
призначений для того, щоб утримувати заголовок розділу. Крім цього,
<header> можна використовувати для обгортання змісту розділу, форми
пошуку або будь-яких відповідних логотипів. В одному документі можна
визначати кілька елементів <header>.
Елемент <header> не можна поміщати всередину елементів <footer>,
<address> або іншого елемента<header>
Шапка

39
2023
Приклад <header> як заголовна частина
сторінки

40
2023
Елемент <main>
є основним вмістом документа. Вміст має бути унікальним і не
включати типові блоки на кшталт шапки сайту, підвалу, навігації,
бічної панелі, форми пошуку тощо. У документі не повинно бути
більше одного елемента <main>.

41
2023
Елемент <section>
є загальним розділом документа. Відповідно до
специфікації W3C по HTML5: "Розділ (section) — це
тематично згрупований контент, зазвичай із
заголовком."
Наприклад. Домашня сторінка сайту компанії
містить такі блоки:
• Наші переваги
• Наші клієнти
• Наша команда
Переважно такі блоки оформляються за
допомогою елемента <section>. Елемент <section>
повинен мати заголовки від <h1> до <h6> як
дочірній (вкладений) елемент.

42
2023
Елемент <article>
визначає незалежний самодостатній контент. Це може бути повідомлення на форумі,
стаття, запис у блозі, коментар та інше.
<p align="justify"> Контент, поміщений в цей елемент, повинен мати сенс сам по собі,
тобто повинен бути зрозумілий у відриві від інших частин веб-сайту. Може
дублюватись на інших сторінках сайту та містити всередині інші елементи <article>.
Елемент повинен мати як дочірній (вкладений) елемент заголовок від <h1> до <h6>.
Батьківські елементи <section> можна створювати з одним або кількома
вкладеними елементами <article>

43
2023
Елемент <aside>
є розділом сторінки, що складається з контенту,

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

44
2023
Елемент <nav>
це розділ сторінки, який посилається на інші сторінки або їх частини. Тобто це
розділ із навігаційними посиланнями.
Елемент <nav> призначений тільки для основного блоку навігаційних
посилань, наприклад головного меню сайту. Дозволяється використовувати
<nav> блок для навігації по сторінці.
Іноді елемент <footer> має короткий список посилань на різні сторінки сайту. У
таких випадках можна використовувати елемент <nav>, хоча зазвичай
достатньо елемента <footer>.

45
2023
Елемент <footer>
визначає "підвал" документа або розділу і повинен містити інформацію
про елемент, що містить його. Зазвичай у "підвалі" розміщують
інформацію про автора документа, посилання на умови використання
тексту, інформацію про авторські права, контактні дані тощо.
В одному документі можна визначати кілька елементів <footer>. В
елементі <footer> можна розміщувати елемент <nav>.

46
2023
Посилання, типи посилань, атрибути
Посилання – це зв'язок між двома ресурсами, один із яких –
поточний документ. У HTML для створення посилання можна
використовувати теги: <a>, <area> та <link>. Найчастіше
використовуються теги <a> (від слова anchor - якор) та <link>.
Елемент <area> потрібний для створення посилання з частини
зображення. Посилання можна розділити на дві категорії:
Посилання на зовнішні ресурси
Гіперпосилання

47
2023
Підключення файлів
Тег <link> використовується для підключення файлів до html-документу.
Тег <link> завжди повинен знаходитись усередині <head>…</head>.

48
2023
Для створення гіперпосилання необхідно використати парний тег
<a>…</a>. Між тегами міститься контент, який відображатиметься на
веб-сторінці. Текст посилання за замовчуванням відображається у
браузері з підкресленням, колір шрифту — синій, при наведенні
посилання курсор миші змінює вигляд. Обов'язковим параметром тега
<a> є атрибут href, який задає URL-адресу веб-сторінки.

49
2023
Атрибут target визначає, де показати вміст після переходу за посиланням.
Атрибут target набуває таких значень:
• _self завантажує документ у поточній вкладці. Є значенням за
замовчуванням.
• _blank завантажує документ у новій вкладці.
• _parent завантажує документ у батьківській вкладці.
• _top в HTML5 завантажує у вікні найвищого рівня. Якщо батька немає,
поводиться як_self.
Приклад:
<a href= "https://pst.knu.ua/" target="_blank">Відвідайте сайт рідної кафедри!</a>

50
2023
Якір
Якір або внутрішнє посилання — це посилання, яке допомагає
створювати переходи на різні розділи поточної веб-сторінки. Це
дозволяє швидко переходити від розділу до розділу. Використання
якоря зручно, коли на сторінці багато контенту.
Внутрішні посилання потрібно створювати за допомогою тега <a>.
Відмінність полягає в тому, що атрибут href містить ім'я покажчика -
так званий якір, а не URL-адресу. Перед іменем покажчика завжди
ставиться знак #.
<a href="#section2">Go to Section 2</a>

51
2023
Зображення, атрибути
Використання графічних зображень робить веб-сторінки привабливішими візуально.
Завдяки зображенням краще передається сенс та зміст веб-документа.
Щоб додати зображення на веб-сторінку, потрібно використовувати тег <img>.
Зображення тега <img> може бути посиланням. Для цього потрібно обвернути тег
<img> тегом посилання <a>. Так як <img> є рядковим елементом, то рекомендується
розташовувати його всередині блокового елемента, наприклад, всередині <p> або
<div.
HTML тег <img> має два обов'язкові атрибути:

52
2023
Зображення, атрибути
елемент <img> - це зображення та його резервний контент, який
додається за допомогою атрибуту alt (ми розглянемо цей атрибут
нижче). Значення обов'язкового атрибута src – це абсолютний чи
відносний шлях до зображення.
Приклад
<img src="code-example.png" alt="Приклад коду">

53
2023
Адреса зображення
Адреса зображення може бути вказана такими способами:
Відносний шлях Абсолютний шлях
Може бути використаний: При використанні абсолютного шляху, адреса буде
виглядати так:
Відносний шлях від
документа: url(../images/anyphoto.png) url(http://anysite.com/images/anyphoto.png)
Відносний шлях від кореневого

каталогу: url(/images/anyphoto.png)

54
2023
Розміри зображення
Якщо не встановити розміри зображення (картинки), то
малюнок відобразиться на веб-сторінці у своїх реальних
розмірах!
Атрибути width та height.
Якщо встановити значення лише одного атрибута, значення
другого буде обчислено автоматично, щоб зберегти пропорції
малюнка. За замовчуванням ці значення задаються в пікселях
(в HTML-коді вони опускаються).
Використання цих атрибутів є гарною практикою. Браузеру не
потрібно обчислювати розмір картинок, що завантажуються,
він відразу резервує для них місце. Ці атрибути називають
презентаційними. Вони перекриваються будь-якою іншою
інформацією про стилі.
Приклад
<img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" width="400" height="200">

55
2023
Текстові елементи, атрибути (фразовий
контент)
Фразовий контент може складатися із посилань, термінів,
скорочень, цитат та інших фраз. Їх позначають за допомогою
фразових тегів, які відповідають за форматування.
Форматування буває візуальним та логічним.

56
2023
Текстові елементи, атрибути (фразовий
контент)
Практично всім фразовим тегам за замовчанням у браузерах задані
стилі. Хоча безпосередньо за візуальне форматування відповідає
CSS.

57
2023
Теги, що найчастіше використовуються
Тег <p> визначає текстовий абзац. Є блоковим елементом і починається з нового
рядка. Абзаци тексту, що йдуть один за одним, поділяються між собою відступом.
Якщо тега, що закриває, немає, вважається, що кінець абзацу збігається з початком
наступного блокового елемента. Не можна вкладати теги <p> один в одний!
Тег <span> призначений для визначення строкових елементів документа. <span> не
семантичний тег і впливає лише на зовнішній вигляд елементів, якщо йому задані
стилі. З його допомогою можна виділити частину інформації всередині інших тегів та
встановити для неї свій стиль.
Наприклад: всередині абзацу (тега <p>) можна виділити частину тексту <span> та
визначити для нього інший колір тексту. Для цього тега доступні універсальні атрибути
та події.
Приклад:
<p>Мій улюблений колір <span style="color:orange">помаранчевий</span>, але й

<span style="color:white">білий</span> теж гарний.</p>
58
2023
Тег <i> встановлює курсивне зображення шрифту (italic).
Приклад:
<i>Текст</i>
Тег <b> встановлює напівжирне зображення шрифту (bold).
Тег <u> додає підкреслення до тексту.
Теги <b>, <i>, <u> є частиною тексту, що візуально відрізняється
від решти тексту, і не несуть будь-якого спеціального значення
або важливості. Рекомендується використовувати їх для
привернення уваги без вказівки вищого рівня важливості.
59
2023
Тег <em> (emphasis) призначений для акцентування тексту,
виділення слова інтонацією, посилення емоційної виразності.
Зазвичай у тег <em> обертають одне чи два слова. Якщо інформація
термінова або автор наполягає на своїй точці зору, то <em> можна
виділити всю пропозицію. Браузери відображають такий текст
курсивним зображенням.
Приклад
<span><em>Зверніть увагу!</em>
В одному документі не повинно бути більше одного
метаелемента з атрибутом charset.</span>
60
2023
Елемент сильної значущості <strong> призначений для контенту, який
має велике значення, включаючи речі великої ваги (наприклад,
попередження). Це може бути пропозиція, яка має велике значення для
всієї сторінки. Або ви можете просто спробувати вказати, що деякі слова
мають більше значення порівняно із сусіднім контентом. Браузери
зазвичай відображають вміст жирним шрифтом.
Теги <strong> та <b> відображаються браузером однаково, але тег
<strong> крім візуального оформлення виділяє важливість контенту.
Приклад:
<span><strong>Зверніть увагу!</strong> Виліт перенесено на 1 годину.</span>

61
2023
Символи
Спецсимволи HTML — це мовні конструкції, які використовують
набір символів із спеціальних текстових файлів. Іноді на сторінці
потрібно додати символ, якого немає у стандартній розкладці
клавіатури. Це можна зробити шляхом додавання коду або
позначення символу в місці, де він потрібний.
Спецсимволи чутливі до регістру.
Щоб вставити символ у тег, необхідно використовувати HTML-код
символу. А для додавання символів CSS як значення властивості
content необхідно використовувати CSS-код.

62
2023
Почитати
• Мельник Р. Програмування веб-застосувань (фронт-енд та бек-
енд). — Львів: Львівська політехніка, 2018. — 250 с.
• Duckett J. HTML & CSS: Design and Build Web Sites. — O’Reilly, 2011.
— 512 pp.
• Robson E., Freeman E. Head First HTML and CSS: A Learner's Guide to
Creating Standards-Based Web Pages. — O’Reilly, 2012 – 762 pp.
• HTML Tutorial [Електронний ресурс]. Режим доступу:
https://www.w3schools.com/html/

63
2023
Дякую за увагу!

64
2023

Вступ до HTML. Семантичні елементи HTML5. Links, Images, Text, Symbols

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Вступ до HTML. Семантичні елементи HTML5. Links, Images, Text, Symbols

Uploaded by

Copyright:

Available Formats

Лекція 3.

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

<p style="color:green">Це параграф зеленого кольору.</p>

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

є розділом сторінки, що складається з контенту,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

<a href="#section2">Go to Section 2</a>

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

<img src="code-example.png" alt="Приклад коду">

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

Відносний шлях від кореневого

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

<p>Мій улюблений колір <span style="color:orange">помаранчевий</span>, але й

<span><strong>Зверніть увагу!</strong> Виліт перенесено на 1 годину.</span>

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

"Розробник фронтенду програмних систем"© Ірина ЮРЧУК,

You might also like