Привіт! Якщо ви новачок у веб-розробці і не знаєте, що таке HTML, не хвилюйтеся — ви потрапили за адресою. У цьому блозі я поясню HTML (мова розмітки гіпертексту) найпростішими словами. Ви дізнаєтеся, чому це важливо, як це працює і отримаєте практичні приклади, щоб почати.
Поїхали! 🙌
Що таке HTML?
HTML — це мова розмітки гіпертексту (Hypertext Markup Language), і вона є стандартною мовою для створення веб-сторінок. Якщо ви коли-небудь відвідували веб-сайт (що, я припускаю, ви робили), ви дивитесь на HTML. Кожна веб-сторінка, яку ви бачите в Інтернеті, побудована за допомогою HTML.
Це як скелет веб-сторінки. Хоча на сторінці можуть бути яскраві кольори, шрифти та анімації (які додаються за допомогою CSS і JavaScript), основна структура завжди є HTML.
Уявіть HTML як рецепт. Кожен елемент у рецепті — це конкретний інгредієнт (або частина контенту), загорнутий у тег. Ці теги вказують браузеру, як відображати різні частини сторінки.
Як працює HTML?
HTML складається з тегів. Теги зазвичай йдуть парами: один для початку елемента, а інший для його завершення. Ось базовий приклад:
<p>This is a paragraph.</p>
У наведеному прикладі:
- <p> — це відкриваючий тег.
- </p> — це закриваючий тег.
- Текст між ними (“This is a paragraph.”) — це контент.
💡 Більшість тегів у HTML йдуть парами, але є й такі, які не потребують закриваючого тега. Прикладом цього є тег <img>, який використовується для вставлення зображень. Ми побачимо більше таких прикладів пізніше.
Основна структура HTML-документу
Перед тим як перейти до створення крутих речей, давайте розберемо основну структуру будь-якого HTML-документу. Коли ви пишете HTML-файл, він виглядатиме ось так:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>This is my first web page.</h1>
</body>
</html>
Дозвольте пояснити кожну частину:
1. <!DOCTYPE html>: Це вказує браузеру, що ви використовуєте HTML5 (найновішу версію HTML).
2. <html>: Це корінний тег для всього HTML-документу.
3. <head>: Цей розділ містить інформацію про сторінку, таку як заголовок та метадані (про це пізніше).
4. </head> — Закриваючий тег для блоку <head>.
Unlike other tags, doesn’t need a closing tag.
src="image.jpg"— це шлях до зображення.alt="A description of the image"— це альтернативний текст, який відображається, якщо зображення не можна показати (важливо для доступності).
Списки
HTML надає два типи списків: невпорядковані списки (маркерні пункти) та впорядковані списки (нумерація).
Невпорядкований список:
- Item 1
- Item 2
- Item 3
Впорядкований список:
1. First Item
2. Second Item
3. Third Item
<ul>: Невпорядкований список (створює список з маркерами).<ol>: Впорядкований список (створює список з нумерацією).<li>: Елемент списку (кожен елемент у списку).
Форми
Форми дозволяють користувачам вводити дані. Ось простий приклад форми "Зв'язатися з нами":
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
action="/submit": Це місце, куди мають бути відправлені дані форми.method="POST": Метод відправки даних (POST або GET).<input>: Для вводу тексту.<textarea>: Для більшого вводу тексту (як, наприклад, повідомлення).<button>: Кнопка, яка дозволяє надіслати форму.
Повний приклад
Давайте об'єднаємо все, що ми дізналися, в один простий HTML-файл:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>Hi! I'm learning HTML, and this is my very first web page.</p>
<h2>Here are a few of my favorite websites:</h2>
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>
<h2>Contact Me</h2>
<form action="/submit" method="POST">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
</body>
</html>
Висновок
Ось і все! Тепер у вас є чітке розуміння того, що таке HTML і як ви можете використовувати його для створення структури веб-сторінки. Ви дізналися про заголовки, абзаци, списки, посилання, зображення та форми. Це основні будівельні блоки для будь-якого вебсайту.
Продовжуйте практикуватися, експериментуйте з кодом і незабаром ви будете створювати повноцінні вебсайти! В HTML є ще багато чого для вивчення, але з цією основою ви готові розпочати свою подорож у веб-розробку.
Успіхів у кодингу!
Перекладено з: HTML Basics: Your First Step to Web Development 👨💻