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

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

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

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

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

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

Что такое HTML?

HTML — это специальный язык для создания веб-страниц. «Язык» значит «набор правил».

Вся идея сводится к двум условиям:

  1. Мы пишем код в соответствии с заранее оговорёнными правилами.
  2. Веб-браузер (например, Google Chrome или Microsoft Edge) превращает такой код в страницы для людей.

Как браузер отображает HTML-страницы

Всё, что вы видите сейчас на этой странице — это HTML, преобразованный в визуальный, человеческий вид вашим браузером. Ваш браузер «попросил» у нашего сервера данные в формате HTML, наш сервер отправил его браузеру, после чего браузер прочитал все строчки в этом файле и, используя правила HTML, нарисовал на экране текст, картинки, цвета, кнопки и так далее.

Вы можете заглянуть «под капот» и увидеть HTML-код любой страницы: нажмите правой кнопкой в любое место на странице и выберите Просмотр кода страницы (или «Просмотреть исходный код», "View Page Source" или что-то похожее, в зависимости от типа браузера и языка системы).

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

Попробуйте открыть исходный код текущей страницы и с помощью Ctrl+U (Cmd+Option+U на macOS) найти слово «Секрет». Это скрытый элемент — частичка HTML, которая не видна визуально, но присутствует в коде.

Секрет: Отлично! Вы нашли скрытый элемент :) Держите вкусняшку 🍰

Взглянем на живой пример. Слева — HTML-код, а справа то, как он преобразован браузером в вид для людей:

See the Pen HTML First steps by Hexlet (@hexlet) on CodePen.

А теперь измените HTML-код в левой панели таким образом, чтобы:

  1. Вместо «на Хекслет» было «в Википедию».
  2. Вместо ссылки на https://ru.hexlet.io была ссылка на https://www.wikipedia.org

И кликните на новую ссылку. В правой панели должна открыться Википедия.


<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

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

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

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