Primer lesson: мова гіпертекстової розмітки

Урок: Мова гіпертекстової розмітки (HTML)

HTML розшифровується як мова гіпертекстової розмітки . Це спеціальна мова, яка використовується для створення веб-сторінок. Коли ви відвідуєте веб-сайт, комп'ютер зчитує HTML, щоб показати вам слова, зображення та посилання. Уявіть собі HTML як будівельні блоки веб-сайту. Так само, як ви використовуєте деталі Lego, щоб побудувати будинок чи машину, ми використовуємо теги HTML для створення веб-сторінки.

Що таке HTML?

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

Чому HTML важливий?

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

Базова структура HTML-документа

HTML-документ має спеціальну структуру. Вона починається з оголошення під назвою <code><!DOCTYPE html></code>, яке повідомляє комп'ютеру, що сторінка використовує HTML. Потім документ поділяється на дві основні частини: заголовок і тіло.

Дуже простий HTML-документ виглядає так:

<code><!DOCTYPE html>
<html>
<заголовок>
<title>Моя перша веб-сторінка</title>
</head>
<тіло>
<p>Привіт, світе!</p>
</body>
</html> </code>

У цьому прикладі розділ <head> містить заголовок сторінки, а розділ <body> – це місце, де ви розміщуєте вміст, який відображається на екрані.

Теги та елементи HTML

HTML використовує теги для позначення різних частин веб-сторінки. Тег – це слово в кутових дужках. Наприклад, <code><p></code> повідомляє комп’ютеру, що те, що йде далі, є абзацом. Після завершення абзацу використовується закриваючий тег <code></p></code>, щоб позначити його кінець.

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

<code><p>Це абзац.</p></code>

Кожен тег вказує веббраузеру, як відображати контент.

Загальні теги HTML

У HTML є багато тегів. Деякі з найпоширеніших:

<html> – цей тег повідомляє комп’ютеру, що це HTML-документ.
<head> – У цьому розділі зберігається інформація про сторінку, яка не відображається безпосередньо на екрані.
<title> – цей тег встановлює заголовок веб-сторінки та відображається на вкладці браузера.
<body> – цей тег містить видимий вміст веб-сторінки.
<p> – Цей тег створює абзац, який є блоком тексту.
<h1> до <h6> – ці теги створюють заголовки. <h1> – найбільший заголовок, а <h6> – найменший.
<a> – цей тег використовується для створення посилань на інші веб-сторінки.
<img> – цей тег використовується для додавання зображень на сторінку.

Атрибути HTML

Атрибути надають додаткову інформацію про елемент HTML. Вони додаються до початкового тегу всередині кутових дужок тегу. Найпоширенішими атрибутами є src та alt, що використовуються з тегом image.

Наприклад, щоб додати зображення, ви можете написати:

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

Розділи голови та тіла

HTML-документ розділений на дві частини:

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

Створення посилань у HTML

Посилання дозволяють переходити з однієї сторінки на іншу. У HTML ми створюємо посилання за допомогою тегу <a> . Атрибут href всередині тегу повідомляє браузеру місце призначення посилання.

Наприклад:

<code><a href="https://www.example.com">Відвідайте Example.com</a></code>

Коли ви натиснете на це посилання, ваш браузер відкриє вебсайт example.com .

Додавання зображень на веб-сторінку

Зображення роблять веб-сторінку яскравішою та цікавішою. Щоб додати зображення, використовуйте тег <img> . Пам’ятайте, що тег <img> не має закриваючого тегу.

Ось як додати зображення:

Цей код вказує браузеру відобразити зображення соняшника. Атрибут src вказує на розташування зображення, а атрибут alt надає опис зображення.

Використання списків у HTML

Списки впорядковують інформацію в акуратному форматі. У HTML існує два основних типи списків:

Упорядкований список: Цей список пронумерований. Він використовує тег <ol> .
Невпорядкований список: У цьому списку використовуються марковані списки. Використовується тег <ul> .

Ось приклад невпорядкованого списку:

<код><ул>
<li>Яблуко</li>
<li>Банан</li>
<li>Вишня</li>
</ul> </code>

А ось приклад упорядкованого списку:

<код><ол>
<li>Перший</li>
<li>Другий</li>
<li>Третій</li>
</ol> </code>

Таблиці в HTML

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

Ось простий приклад таблиці HTML:

<code><table border="1">
<tr>
Ім'я
Вік
</tr>
<tr>
<td>Аліса</td>
10
</tr>
</table> </code>

У цій таблиці <tr> визначає рядок таблиці, <th> використовується для заголовка таблиці (виділений жирним шрифтом), а <td> використовується для даних таблиці (комірок).

Робота з мультимедіа: аудіо та відео

HTML також дозволяє додавати мультимедіа, таке як звук і відео. За допомогою тегу <audio> ви можете додавати звукові файли. За допомогою тегу <video> ви можете вставляти відеоплеєри на свою веб-сторінку.

Ось приклад коду вбудовування відео:

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

HTML у повсякденному житті

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

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

Простий приклад HTML-проекту

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

Ваш HTML-код може виглядати так:

<code><!DOCTYPE html>
<html>
<заголовок>
<title>Моя улюблена тварина</title>
</head>
<тіло>
<h1>Все про котів</h1>
<p>Коти грайливі та лагідні. Вони люблять спати та муркотіти. Багато людей люблять мати котів як домашніх тварин.</p>
<img src="cat.jpg" alt="Милий кіт">
<a href="https://www.catfacts.com">Дізнайтеся більше про котів</a>
</body>
</html> </code>

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

HTML, CSS та JavaScript

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

CSS (каскадні таблиці стилів) використовуються для додавання кольорів, зміни шрифтів та налаштування макета веб-сторінки. Це робить сторінку красивою.
JavaScript — це мова програмування, яка додає інтерактивності сторінці. Вона може змусити елементи рухатися або реагувати на натискання кнопки.

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

Більше тегів HTML та їх використання

Під час вивчення HTML ви знайдете багато інших тегів. Ось ще кілька, які варто знати:

<div> – цей тег використовується для поділу сторінки на різні розділи. Він допомагає підтримувати порядок вмісту.
<span> – цей тег групує невеликі фрагменти тексту або інші елементи. Він схожий на <div>, але працює з меншими елементами.
<br> – Цей тег додає розрив рядка. Це як натискання клавіші Enter у текстовому редакторі.
<strong> – Цей тег робить текст жирним, щоб показати його важливість.
<em> – Цей тег робить текст курсивом для додавання акценту.

Ці теги надають вам більше контролю над тим, як ваш контент відображається на веб-сторінці.

Еволюція HTML

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

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

Безпека в Інтернеті

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

Огляд: Ключові терміни HTML

Давайте розглянемо деякі важливі терміни, які ви сьогодні вивчили:

HTML: Мова гіпертекстової розмітки, мова, що використовується для створення веб-сторінок.
Тег: Слово в кутових дужках, яке вказує комп’ютеру, яку частину сторінки показувати. Наприклад, <code><p></code> створює абзац.
Елемент: Повний набір, що включає початковий тег, вміст і закриваючий тег.
Атрибут: Додаткова інформація, що додається всередині тегу, така як <code>src</code> або <code>alt</code> у тегу зображення.
Посилання: створюється за допомогою тегу <code><a></code> для з’єднання однієї сторінки з іншою.

Реальні застосування

HTML використовується в багатьох реальних ситуаціях. Ось кілька прикладів:

Шкільні вебсайти: Школи використовують HTML для обміну розкладами, домашніми завданнями та новинами з учнями та батьками.
Онлайн-історії та ігри: Веб-сайти з цікавими історіями чи іграми використовують HTML для відображення зображень, тексту та відео.
Бізнес-сайти: Багато місцевих магазинів та компаній мають веб-сайти, створені за допомогою HTML, для демонстрації своїх продуктів та послуг.
Інтерактивне навчання: Освітні сайти, які допомагають вам вивчати нове, створені за допомогою HTML разом з іншими інструментами, такими як CSS та JavaScript.

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

Короткий зміст ключових моментів

Сьогодні ми дізналися, що HTML – це скорочення від мови гіпертекстової розмітки . Це основна мова, яка використовується для створення веб-сторінок. Ось ключові моменти, які слід пам’ятати:

HTML будує структуру веб-сторінки за допомогою тегів.
Базова структура включає оголошення типу документа та теги html , head та body .
Теги бувають парами: початковий тег і закриваючий тег, а між ними знаходиться контент.
Такі атрибути, як src та alt надають додаткову інформацію про елементи.
До поширених тегів належать <p> для абзаців, <a> для посилань, <img> для зображень та теги заголовків, такі як <h1> до <h6> .
Списки та таблиці допомагають упорядкувати інформацію на веб-сторінці.
Сучасні веб-сторінки використовують HTML разом із CSS для стилю та JavaScript для інтерактивності.

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

мова гіпертекстової розмітки