HTML для Початківців: Основи розмітки веб-сторінок

html

HTML (HyperText Markup Language) є основою для створення веб-сторінок. Він дозволяє визначати структуру та зміст веб-сторінки за допомогою тегів. У цій статті ми розглянемо основні елементи HTML та як їх використовувати.

Структура документа: Кожна HTML-сторінка починається з такого базового шаблону:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок сторінки</title>
</head>
<body>

<!-- Ваш вміст сторінки тут -->
</body>
</html>

Заголовки:

Використовуйте теги <h1> до <h6> для визначення заголовків різних рівнів. Наприклад:

<h1>Найбільший заголовок</h1>


<h2>
Другий за розміром заголовок</h2>

Параграфи:

Використовуйте тег <p> для визначення параграфів тексту. Наприклад:

<p>Це перший параграф.</p>

<p>Це другий параграф.</p>

 
Зображення: 

Використовуйте тег <img> для вставки зображень. Вказуйте шлях до зображення у властивості src. Наприклад:

<img src="шлях_до_зображення.jpg" alt="Опис зображення">

 
Посилання:

Використовуйте тег <a> для створення посилань. Вкажіть посилання у властивості href. Наприклад:

<a href="https://www.example.com">Текст посилання</a>

Виділення тексту:

<p>Це <strong>жирний текст</strong>, а це <em>курсивний текст</em>.</p>

Списки:

Є два типи списків: маркований та нумерований.

Маркований список створюється за допомогою тегу <ul> і елементів списку <li>. Наприклад:

<ul>
     <li>Перший елемент</li>
     <li>Другий елемент</li>
     <li>Третій елемент</li>
</ul>

Нумерований список створюється за допомогою тегу <ol> і елементів списку <li>. Наприклад:

<ol>
     <li>Перший елемент</li>
     <li>Другий елемент</li>
     <li>Третій елемент</li>
</ol>

Форми:

Створюйте форми за допомогою тегу <form>. Додайте поля вводу, кнопки та інші елементи для взаємодії з користувачем. Наприклад:

<form>
     <label for=”name”>Ім’я:</label>
     <input type=”text” id=”name” name=”name” required>
     <br>
     <label for=”email”>Email:</label>
     <input type=”email” id=”email” name=”email” required>
     <br>
     <input type=”submit” value=”Надіслати”>
</form>

Групування елементів:

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

Основна роль <div> полягає в тому, щоб дати можливість вибирати, стилізувати та розміщувати групу пов’язаних елементів у структурі веб-сторінки. Ви можете додати класи або ідентифікатори до <div>, щоб мати змогу звертатися до них за допомогою CSS або JavaScript для стилізації або виконання певних дій на сторінці.

Ось приклад використання <div> для групування елементів:

<div>
<h3>Заголовок групи елементів</h3>
<p>Це група елементів, що потребує групування.</p>
</div>

Таблиці:

Створюйте таблиці за допомогою тегів <table><tr> (рядок) і <td> (комірка) border визначає рамку для таблиці. Наприклад:

<table border=“2”>
   <tr>
      <td>
Комірка 1</td>
      <td>Комірка 2</td>
   </tr>
   <tr>
      <td>
Комірка 3</td>
      <td>Комірка 4</td>
   </tr>
</table>

Коментарі:

Використовуйте тег<!-- коментар -->для вставки коментарів у HTML-код, які не відображатимуться на веб-сторінці. Наприклад:

<!– Це коментар, який пояснює наступний рядок коду –> <p>Це параграф звичайного тексту.</p> 

Це лише основи HTML. Існує багато інших тегів та можливостей для створення веб-сторінок. Продовжуйте вивчати та експериментувати, щоб розширити свої знання HTML!

Scroll to Top