Professional Documents
Culture Documents
HTML перше заняття
HTML перше заняття
Що таке HTML?
Основи мови розмітки
гіпертексту
2
ЩО ТАКЕ HTML?
Це мова гіпертекстової розмітки. Він дозволяє користувачеві
створювати та структурувати розділи, параграфи, заголовки,
посилання та блоки для веб-сторінок та програм.
3
ІСТОРІЯ HTML
HTML був винайдений Тімом Бернерсом-Лі, фізиком із дослідницького
інституту ЦЕРН у Швейцарії. Він вигадав ідею інтернет-гіпертекстової
системи.
4
ІСТОРІЯ HTML
Через швидке зростання популярності HTML тепер вважається офіційним
веб-стандартом. Специфікації HTML підтримуються та розробляються
консорціумом World Wide Web (W3C). Ви можете перевірити останній
стан мови будь-коли на веб-сайті W3C (англ).
5
ЕВОЛЮЦІЯ HTML.
ЩО ВІДРІЗНЯЄ HTML ТА HTML5?
Починаючи з перших днів HTML пройшов неймовірну еволюцію. World Wide Web Consortium постійно
публікує нові версії та оновлення, тоді як історичні віхи також отримують виділені імена.
HTML4 (в наші дні зазвичай званий HTML) був опублікований в 1999 році, а остання велика версія
вийшла в 2014 році. HTML5 — це оновлення, яке запровадило безліч нових функцій мови.
Однією з найбільш очікуваних особливостей HTML5 є підтримка вбудовування аудіо та відео. Замість
використання Flash-плеєра ми можемо просто вставляти відео та аудіофайли на наші веб-сторінки за
допомогою нових тегів <audio> </audio> та <video> </video>. Він також включає вбудовану підтримку
масштабованої векторної графіки (SVG) та MathML для математичних та наукових формул.
HTML5 також запровадив кілька семантичних вдосконалень. Нові семантичні теги інформують браузери
про значення контенту, що приносить користь як читачам, так і пошуковим системам.
Найбільш популярними семантичними тегами є <article> </article>, <section> </section>, <aside>
</aside>, <header> </header> та <footer> </footer>.
6
ЯК ПРАЦЮЄ HTML?
HTML-документи - це файли, які закінчуються розширенням
.html. Ви можете переглядати його за допомогою будь-якого
веб-браузера (наприклад, Google Chrome, Safari або Mozilla
Firefox). Браузер читає HTML-файл і відображає його вміст,
щоб користувачі інтернету могли його переглядати.
7
ЯК ПРАЦЮЄ HTML?
Кожна HTML-сторінка складається з набору тегів (також званих
елементами), які можна назвати будівельними блоками веб-
сторінок. Вони створюють ієрархію, яка структурує контент за
розділами, параграфами, заголовками та іншими блоками
контенту.
8
ЯК ПРАЦЮЄ HTML?
Нижче ви можете побачити приклад коду, за допомогою якого можна
структурувати елементи HTML:
<div> Найголовніший елемент — це простий поділ (<div> </div>),
<h1> Основна рубрика </h1> який можна використовувати для розмітки великих розділів
<h2> Яскравий підзаголовок </h2> контенту.
<p>Пункт 1</p> Він містить заголовок (<h1> </h1>), підзаголовок (<h2> </h2>),
<img src="/" alt="Зображення"> два абзаци (<p> </p>) та зображення (<img>).
<p>Пункт другий з гіперпосиланням Другий абзац містить посилання (<a> </a>) з атрибутом href,
<a href="https://example.com"></a> який містить цільову URL-адресу.
</p> Тег зображення також має два атрибути: src для шляху
</div> зображення та alt для опису зображення.
9
ОГЛЯД НАЙБІЛЬШ ВЖИВАНИХ HTML-ТЕГІВ
HTML-теги мають два основних типи: блок-рівень та вбудовані теги.
10
ТЕГИ БЛОКОВОГО РІВНЯ
Три теги рівня блоку, які кожен HTML-документ повинен містити:
<html>, <head> та <body>.
<html>
Тег <html> </html> — це елемент найвищого <head>
рівня, який охоплює кожну сторінку HTML.
11
ТЕГИ БЛОКОВОГО РІВНЯ
Заголовки мають 6 рівнів HTML. Вони варіюються від <h1> </h1> до <h6>
</h6>, де h1 - заголовок найвищого рівня, а h6 - найнижчий. Абзаци
додаються <p> </p>.
12
ТЕГИ БЛОКОВОГО РІВНЯ
Ви також можете використовувати
теги <ol> </ol> для впорядкованих <ul>
списків і <ul> </ul> для <li>Елемент списку 1</li>
неупорядкованих. Окремі елементи <li>Елемент списку 2</li>
списку мають бути поміщені в тег <li>Елемент списку 3</li>
<li> </li>. Наприклад, ось як </ul>
виглядає основний невпорядкований
список у HTML:
13
ВБУДОВАНІ ТЕГИ
Для форматування тексту використовується багато вбудованих
тегів. Наприклад, тег <strong> </strong> візуалізує
виділений елемент жирним шрифтом, тоді як теги <em> </em>
відображають його курсивом.
15
ПЛЮСИ ТА МІНУСИ HTML
Як і більшість речей, HTML має як сильні сторони, так і слабкі.
ПЛЮСИ:
Широко використовувана мова з великою кількістю ресурсів та величезною
спільнотою.
Виконується спочатку у кожному веб-браузері.
У відкритому доступі та абсолютно безкоштовний.
Чиста та послідовна розмітка.
Офіційні веб-стандарти підтримуються консорціумом World Wide Web (W3C).
Легко інтегрується з базовими мовами, такими як PHP та Node.js.
15
ПЛЮСИ ТА МІНУСИ HTML
Як і більшість речей, HTML має як сильні сторони, так і слабкі.
МІНУСИ:
В основному використовується для статичних веб-сторінок. Для динамічної
функціональності вам може знадобитися використовувати JavaScript або бекенд-мову,
таку як PHP.
Це не дозволяє користувачеві реалізувати логіку. У результаті всі веб-сторінки
потрібно створювати окремо, навіть якщо вони використовують ті самі елементи,
наприклад. заголовки та колонтитули.
Деякі браузери приймають нові функції повільно.
Іноді поведінка браузера важко передбачити (наприклад, старі браузери не завжди
створюють нові теги).
15
ЯК ПОВ'ЯЗАНІ HTML, CSS ТА JAVASCRIPT?
Хоча HTML є потужною мовою, недостатньо створити професійний веб-сайт. Ми
можемо використовувати його лише для додавання текстових елементів та
створення структури вмісту.
Однак HTML відмінно працює з двома іншими інтерфейсами: CSS (каскадні таблиці
стилів) та JavaScript. Разом вони можуть забезпечити багатий інтерфейс
користувача і реалізувати розширені функції.
15
ОТЖЕ… ЩО ТАКЕ HTML?
HTML є основною мовою розмітки в Інтернеті. Він запускається
спочатку у кожному браузері та підтримується консорціумом World
Wide Web.
15
ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
Якщо коротко:
15
ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
15
ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
У прикладі з попереднього уроку є елемент a (anchor — якір),
що складається з тегів, що відкриває і закриває <a></a>.
<a href="https://palace.kyiv.ua">КПДЮ</a>
15
ЕЛЕМЕНТИ, ТЕГИ ТА АТРИБУТИ
А нижче є картинка. Це приклад одиночного тега, елемента, в якому
не потрібний тег, що закриває. Їх ще називають self-closing
element - «елементи, що закриваються самостійно».
<img src="https://i.imgur.com/789p0uP.png">
15