Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Введение в HTML

Что такое HTML

HTML (HyperText Markup Language) — язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.

Взгляните внимательно на страницу, на которой вы сейчас находитесь. Вся она вне зависимости от внешнего вида описана с помощью HTML. Это хорошо показывает, что какой бы сложной ни была страница, вся суть остаётся неизменной на протяжении более 20 лет.

Слово «язык» в HTML стоит воспринимать как правила. Сам по себе HTML только размечает данные, но никак с ними не взаимодействует и визуально с ними ничего не делает. Всю работу по выводу текстовых данных и разметки берёт на себя браузер.

Преобразование HTML в браузере

Вы можете попробовать открыть разметку этой страницы с помощью комбинации Ctrl + U (Cmd + Option + U на macOS).

Не пугайтесь всего того, что здесь есть. Со временем для вас это перестанет быть «магией», и вы с лёгкостью будете ориентироваться в HTML-разметке.

Давайте взглянем на небольшой пример HTML:

<section>
    <h1>Основы вёрстки на Hexlet</h1>

    <p>В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>

    <p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>
</section>

Прямо сейчас может показаться непонятным, что такое section, h1, p. Но сейчас самое важное то, что за всеми этими конструкциями скрывается самое главное — текстовое содержание.

Всегда ставьте контентную часть главнее визуального вида. Курсы дадут вам множество различных приёмов стилизации блоков, но не увлекайтесь. Если текст на странице трудно читать, то ценность страницы стремится к нулю.

Теги в HTML

Но что же означали эти загадочные section, h1 и p? На языке разметки они называются тегами. Именно теги оборачивают наш контент и в конечном итоге обрабатываются браузерами.

Один из таких тегов, о котором важно узнать, — параграф. Параграф, как и в реальной жизни, позволяет отделить по смыслу участки текста. Визуально это обычно делается с помощью отступов. На этой странице много параграфов, и вы можете их легко отличить друг от друга по отступам между ними.

Чтобы вставить параграф на страницу, необходимо указать специальную конструкцию <p> и </p>, между которыми вставить абзац текста.

<p>В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>

<p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>

Как вы заметили, у нас может быть не один параграф. Почти все HTML-теги возможно использовать много раз на странице.

У тега параграфа есть открывающая часть <p> и закрывающая </p>. Именно благодаря этому браузер понимает, где начинается параграф и где заканчивается. Такие теги называются парными.

Как можно догадаться, если есть парные теги, то есть и непарные теги. И вы не ошиблись! В процессе работы с вёрсткой вы узнаете и о таких тегах, и об их применении. Не торопитесь :)

Другой ключевой концепцией, помимо тегов, является вложенность. Посмотрите ещё раз на пример разметки:

<section>
    <h1>Основы вёрстки на Hexlet</h1>

    <p>В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>

    <p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>
</section>

В этом примере есть парный тег section, и внутри него располагаются остальные теги и текст внутри них. Эта концепция является одной из основных, которая позволяет строить большие системы.

Иногда вложенность — это обязательная часть разметки текста. Например, списки невозможно построить без использования вложенности.

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

Браузер выведет эту HTML-разметку следующим образом:


  • Первый элемент списка
  • Второй элемент списка

Без тегов li браузер не сможет отличить простой текст от элементов списка.

Атрибуты

Ещё одна важная концепция HTML — атрибуты и их значение. Атрибуты — это просто дополнительная информация для браузера.

В HTML вы можете использовать ссылки, чтобы перемещаться по интернету. Недостаточно просто указать тег ссылки <a></a> и текст внутри.

<a>Пойти изучать программирование</a>

Браузер, к сожалению, не умеет читать наши мысли и перенаправлять пользователя туда, куда мы хотели :(

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

<a href="https://ru.hexlet.io">Пойти изучать программирование</a>

Теперь при клике на ссылку пользователя успешно перенаправит по тому адресу, который мы указали внутри атрибута href.

Общая схема тегов HTML

Общая схема тегов HTML

Дополнительное задание

Воспользуйтесь любым онлайн-сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/.

Вставьте в левую область следующую разметку:

<h1>Хорошие книги</h1>

<p>
  Советую прочитать эти книги:
</p>

<ol>
  <li>
    <b>Код. Тайный язык информатики</b> <i>(Чарльз Петцольд)</i>
  </li>

  <li>
    <b>Не заставляйте меня думать</b> <i>(<a href="https://en.wikipedia.org/wiki/Steve_Krug">Steve Krug</a>)</i>
  </li>

  <li>
    <b>Дизайн привычных вещей</b> <i>(Donald Norman)</i>
  </li>
</ol>

Посмотрите на итоговый результат. Попробуйте удалять различные теги и менять их. Эксперементируйте, никто за это не наругает :)


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».