Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Знакомство с HTML Основы HTML, CSS и веб-дизайна

Что такое 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

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


Аватары экспертов Хекслета

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

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

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»