Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Основы разметки

Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.

• <h1> — это тег для главного заголовка.
• <p> — это тег для абзаца текста.
• <img> — это тег для изображения.

Теги обычно идут парами: открывающий тег <tag> и закрывающий тег </tag>. Например:

<h1>Мой заголовок</h1>
<p>Это мой первый абзац. Привет, мир!</p>

Некоторые теги можно не закрывать:

Теги и атрибуты

У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега <img> атрибут src указывает путь к изображению:

<img src="мой_котик.jpg" alt="Фото моего котика">

Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.

Формы и элементы форм

Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.

<form action="/" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="user_name">
    <input type="submit" value="Отправить">
</form>

Здесь:

• <form> — это тег формы.
• action — куда отправляются данные.
• method — метод отправки (обычно get или post).
• <input> — поле для ввода данных. Тип text означает текстовое поле.
• <label> — метка для поля ввода.

Списки в HTML

Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.

Упорядоченные списки создаются с помощью тегов <ol> (ordered list) и <li> (list item):

<ol>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
</ol>

Неупорядоченные списки используют теги <ul> и <li>:

<ul>
  <li>Элемент списка с маркером</li>
  <li>Еще один элемент с маркером</li>
</ul>

Ссылки и навигация

Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — <a>, атрибут href указывает на адрес, куда должна вести ссылка:

<a href="https://www.example.com">Посетить сайт Example</a>

Таблицы

Таблицы в HTML создаются с помощью тега <table> и включают в себя строки (<tr>), заголовки колонок (<th>) и ячейки данных (<td>):

<table>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джон</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Элис</td>
    <td>25</td>
  </tr>
</table>

Использование изображений

Мы уже упоминали тег <img> для вставки изображений, но помимо src и alt есть и другие атрибуты, например, width и height для указания размеров изображения:

<img src="мой_котик.jpg" alt="Фото моего котика" width="500" height="600">

Семантическая разметка

Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:

• <header> для шапки сайта
• <footer> для подвала
• <article> для статьи
• <section> для раздела содержимого
• <nav> для навигации

<article>
  <header>
    <h1>Заголовок статьи</h1>
  </header>
  <section>
    <p>Первый абзац статьи...</p>
  </section>
  <footer>
    <p>Автор статьи</p>
  </footer>
</article>

Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! 🚀

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.