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

HTML Введение в веб-разработку

HTML — это первое, с чем сталкиваются начинающие веб-разработчики.

Когда мы открываем страницы сайтов, перед нами, обычно, красивые картинки, текст, иногда реклама и другие элементы. Но если вызвать контекстное меню и нажать на пункт «Исходный код страницы» (в зависимости от браузера и языка системы называется по-разному), то мы увидим примерно следующее:

<div class='navbar-collapse collapse' id='navbarResponsive'>
  <a aria-hidden='true' class='navbar-brand mr-4' href='/'>Hexlet</a>
  <ul class='navbar-nav mr-auto'>
    <li class="nav-item">
      <a class="nav-link" href="/my"><span class='fa fa-map-marker hexlet-header-icon'></span>
        Мой Хекслет
      </a>
    </li>
    <li class="nav-item"><a class="nav-link" href="/courses"><span class='fa fa-university hexlet-header-icon'></span>
      Курсы
      </a>
    </li>
  </ul>
</div>

Именно такой код и называется HTML. Hypertext Markup Language (HTML) — это язык разметки для создания веб-страниц или веб-приложений. Пусть вас не смущает слово "язык", HTML не является языком программирования. Другими словами, на HTML не программируют, как иногда думают начинающие веб-разработчики.

Формально языком программирования называют только тот язык, который является Тьюринг-полным.

Проще всего понять идею HTML на примере редактирования текста в редакторе. Когда нам необходимо выделить текст жирным, создать список или вставить таблицу, мы «размечаем» текст. В обычных текстовых редакторах это делается визуально. Мы выделяем текст, затем нажимаем кнопку "Жирный", и текст становится жирным.

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

В HTML такие выделения делаются с помощью тегов. Теги — своеобразные кирпичики, из которых строится страница. Например, для подчеркивания текста используется тег u и выглядит это так:

текст c <u>ашыпкой</u> будет подчёркнутым

Тег u относится к парным тегам. Кроме открывающего тега <u> он требует наличия закрывающего тега: </u>. Так браузер понимает, когда нужно перестать делать текст подчеркнутым.

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

<!-- Список из двух элементов -->
<ul>
  <li>one</li>
  <li>two</li>
</ul>

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

Создайте файл index.html в любом удобном месте вашего компьютера. Добавьте туда html код, указанный ниже, а затем откройте файл в браузере.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta name="description" content="My first page">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

Поздравляю, вы сделали свою первую страницу! Если захотите потренироваться, то это всегда можно сделать здесь https://plnkr.co/edit/ (другие подобные сервисы легко гуглятся).

Подобным образом вы можете создать сколько угодно страниц. Добавив на эти страницы ссылки, которые сплетают их в единое целое, мы получим статический сайт. Именно из-за ссылок веб называется гипертекстовым. Ссылки выглядят так:

<a href="/about">О компании</a>
<a href="https://hexlet.io">Хекслет</a>

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

HTML — не единственный язык разметки. Например, текст этого урока я пишу с использованием разметки Markdown. Она обладает более скромными возможностями, чем HTML, но при этом сильно удобнее для простых текстов, которые пишутся вручную и требуют только базового форматирования. Более того, на Хекслете Markdown используется повсеместно. Практически в любом месте, где вы можете написать нам, можно использовать markdown.

## Заголовок

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

Но браузер не понимает разметку Markdown. Как же она работает? Все очень просто: сначала Markdown транслируется в HTML, который уже отдается браузеру, а браузер уже выполняет свою главную задачу - отрисовывает страницу. Трансляция производится программным способом, но для понимания общего принципа работы это не важно.

Важно понимать, что страница, созданная с использованием только HTML, статична, то есть на ней ничего не двигается, не выезжает, не меняется при наведении и вообще никак себя не выдает (на самом деле есть некоторые элементы, которые добавляют каплю динамизма, но суть от этого не меняется). Динамизм появляется благодаря CSS и JavaScript.

HTML, как и большинство языков разметки, очень прост. Учить его "от и до" не нужно. Главное, понять общую схему работы и научиться применять правильные теги. Этого достаточно для старта. Хороший справочник по html можно найти на developer.mozilla.org.

Браузер для разработчиков

В любом современном браузере есть специальная панель разработчика (Developer Tools или «инструменты разработчика»). Она позволяет в удобном виде просматривать структуру страницы и менять её. Показывает статистику по загрузке зависимых ресурсов. Помогает анализировать изменения во время взаимодействия с загруженной в браузере страницей. Попробуйте открыть её в вашем любимом браузере и поэкспериментировать.

devtools

Хекслет

На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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