Зарегистрируйтесь для доступа к 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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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