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

Выделите текст, нажмите 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 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

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

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

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

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

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».