Прежде чем мы начнем углубляться в шаблоны Hugo, мы сделаем краткий обзор HTML, который является базовым языком для всех шаблонов.
Если ты уже знаешь HTML, смело переходи к следующему разделу.
Что такое HTML?
HTML - это теговый язык разметки документов. Он позволяет нам размещать кнопки, ссылки, текст, изображения и видео на странице.
Чтобы начать экспериментировать с HTML и вещами, описанными в этой секции, создай на рабочем столе файл с именем index.html. Далее открой его в VSCode, а также открой этот файл в своем веб-браузере.
Элементы (Elements)
В HTML много элементов, которые описывают то, что мы хотим отобразить на странице. Например, есть элемент абзац, и он выглядит так:
<p>Твоё предложение здесь</p>
Вперед! Напиши, что-то в твоем файле index.html, который ты создал(а). Сохрани файл, затем открой его в веб-браузере, чтобы увидеть твой абзац.
Мы рассмотрим основные элементы ниже и, если хочется, проверяй каждый из них в твоём файле index.html. Не забывай сохранять файл после каждого изменения и перезагружать окно браузера, чтобы увидеть изменения.
Заголовки (Headings)
Заголовки используются для создания больших текстовых заголовков на твоей веб-странице. Например, на этой странице какой-то текст больше, потому что он является заголовком для контента ниже. Чтобы создать заголовок, нужно написать:
<h1>Заголовок 1</h1>
<h1> элемент создает самый большой заголовок, но ты можешь пройти весь путь от него до <h6>, который используют для подзаголовков.
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
h2 будет немножко меньше, чем h1, h3 немножко меньше, чем h2 и так далее…
Абзац (Paragraph)
Абзацы используются для отображения текста с нового абзаца без форматирования.
<p>Я - абзац</p>
Изображения (Images)
Элементы изображений используются для отображения изображений, соотвественно.
<img src="/path/to/my/image.jpg" />
Элемент img должен иметь атрибут src (атрибуты мы рассмотрим ниже), атрибут src обозначает source. Это должен быть путь к файлу изображения на твоём компьютере или к URL-адресу изображения в Интернете.
Сохрани изображение на своем компьютере рядом с файлом index.html и попробуй отобразить его на экране.
Изображения также могут иметь атрибут alt, сокращенно от alternate, и они используются для отображения текста, если изображение не может быть загружено должным образом. А также это важно для людей, использующих технологию голосовой помощи при просмотре сайтов, ведь альтернативный текст будет читаться пользователю вслух.
<img src="bird.jpg" alt="bird flying through the sky" />
Списки (Lists)
Списки используются для отображения групп элементов вместе. Они выглядят так:
- Я - элемент списка
- Я - элемент списка
- Я - элемент списка
или так:
- Я - первый
- Я - второй
- Я - третий
Первый список можно составить так:
<ul>
<li>Я - элемент списка</li>
<li>Я - элемент списка</li>
<li>Я - элемент списка</li>
</ul>
<ul> - это Unordered List (неупорядоченный список) и его следует использовать, когда порядок не имеет значения.
Если же порядок имеет значение, ты можешь увидеть <ol>, что является Ordered Lists (упорядоченным списоком).
<ol>
<li>Я - первый</li>
<li>Я - второй</li>
<li>Я - третий</li>
</ol>
Ссылки (Links)
Ссылки создают кликабельную ссылку на твоей странице. Эта ссылка может перевести пользователя куда угодно, например, на другой веб-сайт или другую страницу на твоём сайте, или даже на другую позицию на текущей странице.
<a href="https://google.com">Я - Google ссылкаle</a>
Элемент <a> обозначает anchor(якорь), а атрибут href является целью.
Ты также можешь сделать так, чтобы новая ссылка автоматически открывалась на новой вкладке в браузере, добавляя атрибут target.
<a href="https://google.com" target="_blank">Нажми, чтобы открыть ссылку в новом окне</a>
Ты также можешь сделать ссылки, которые открывают почтовое приложение пользователя, чтобы он мог отправить электронное письмо на определенный адрес.
<a href="mailto:test@gmail.com">Отправить мне письмо</a>
Разделы (Divs)
Разделы (divs) используются для группировки элементов. Это позволяет структурировать большие веб-страницы с тысячами элементов.
<div>
<h1>Добро пожаловать</h1>
<p>Меня зовут Боб!</p>
<a href="https://youtube.com">Посмотрите на мой youtube канал!</a>
</div>
Атрибуты (Attributes)
Атрибуты используются для передачи элементу дополнительной информации. Мы уже видели много примеров выше, таких как src и href, но есть десятки атрибутов, которые можно использовать, и каждый элемент может иметь свои собственные специфические атрибуты.
Чтобы узнать обо всех доступных элементах и атрибутах, ознакомься с учебными руководствами по html от w3schools для получения дополнительной информации.
Прежде чем перейти к следующему уроку, поэкспериментируй с созданием полноценной веб-страницы с множеством различных элементов, но не беспокойся о ее стилизации.