Мова HTML (HyperText Markup Language)
Мова HTML
HTML (HyperText Markup Language) — це стандартна мова розмітки, яка використовується для створення веб-сторінок. Вона визначає структуру та зміст веб-документів за допомогою елементів, які задають текст, зображення, посилання, таблиці тощо.
Основні аспекти HTML:
1. Структура HTML-документа
Кожен HTML-документ складається з таких основних частин:
- <!DOCTYPE html> — оголошення типу документа.
Використовується для вказівки браузеру, що документ написано на HTML5.- <html> — кореневий елемент документа.
- <head> — містить метаінформацію про документ (назва сторінки, метатеги, посилання на стилі тощо).
- <body> — основний вміст документа (текст, зображення, відео, посилання тощо).Приклад структури:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя перша сторінка</title>
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Це мій перший HTML-документ.</p>
</body>
</html>
2. Елементи HTML
Елементи HTML складаються з тегів, які завжди обрамляють текст або інший вміст.
Приклад:
<p>Це абзац тексту.</p>
- <p> — відкриваючий тег.
- </p> — закриваючий тег.
- Вміст між тегами — це текст.
3. Атрибути
Атрибути надають елементам додаткові властивості. Вони завжди записуються у відкриваючому тегі.
Приклад:
<img src="image.jpg" alt="Опис зображення" width="300">
- src — посилання на зображення.
- alt — текст, що з'явиться, якщо зображення не завантажиться.
- width — ширина зображення у пікселях.
Основні теги HTML:
1. Заголовки
Використовуються для позначення заголовків різного рівня.
<h1>Заголовок 1 рівня</h1>
<h2>Заголовок 2 рівня</h2>
<h3>Заголовок 3 рівня</h3>
2. Абзаци
<p>Це приклад текстового абзацу.</p>
3. Посилання
<a href="https://example.com">Перейти на сайт</a>
4. Зображення
<img src="example.jpg" alt="Приклад зображення" width="500">
5. Списки
- Ненумерований список:
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
- Нумерований список:
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
6. Таблиці
<table border="1">
<tr>
<th>Ім'я</th>
<th>Вік</th>
</tr>
<tr>
<td>Олена</td>
<td>25</td>
</tr>
<tr>
<td>Іван</td>
<td>30</td>
</tr>
</table>
Особливості HTML5:
HTML5 — це сучасна версія HTML, яка додає нові можливості:
1. Семантичні теги:
- <header> — для верхнього колонтитула.
- <footer> — для нижнього колонтитула.
- <section> — для розділів.
- <article> — для статей.
Приклад:
<header>
<h1>Заголовок сторінки</h1>
</header>
<section>
<h2>Розділ 1</h2>
<p>Текст розділу.</p>
</section>
<footer>
<p>Автор: Олена Віталіївна</p>
</footer>
2. Мультимедіа:
- <audio> — для звукових файлів.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Ваш браузер не підтримує аудіо.
</audio>
- <video> — для відеофайлів.
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Ваш браузер не підтримує відео.
</video>
3. Форми:
HTML5 додає нові типи полів для форм:
<form>
<label for="email">Електронна пошта:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="date">Дата:</label>
<input type="date" id="date" name="date">
<br>
<button type="submit">Відправити</button>
</form>
Основні принципи роботи з HTML:
1. HTML описує структуру, але не оформлення (за це відповідає CSS).
2. Теги повинні бути відкриті та закриті (крім самозакритих, як <img>).
3. Код має бути акуратним і зрозумілим (рекомендується використовувати відступи).
4. Використовуйте семантичні теги для кращого розуміння коду.
Висновок:
HTML — це основа веб-розробки, яка дозволяє створювати структуру сайтів. Освоївши HTML, ви зможете створювати прості веб-сторінки, які згодом можна покращити за допомогою CSS та JavaScript.
про публікацію авторської розробки
Додати розробку