Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Что такое HTML и почему его должен знать каждый веб-разработчик

Что такое HTML и для чего он используется? Это язык программирования? Как долго его учить?

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт.

Возможности HTML

Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя. Например, тег <img> используется для размещения изображений на странице. У него есть обязательный атрибут src, в котором указывается ссылка на файл.

Вот как будет выглядеть код:

<p>Какой-нибудь сопроводительный текст. Обычно в примерах используют lorem ipsum, но мы пишем всё сами — хардкор!</p>

<img src=’image.png’>

<p>А тут еще один абзац, чтобы заполнить пустоту.</p>

А вот как этот код выглядит в браузере:

Еще вы могли заметить тег <p>. Он используется для создания абзацев. Этот тег парный, то есть на конце абзаца должен стоять закрывающий </p>. Парные теги применяются для разметки блоков:

  • контейнеров;
  • абзацев;
  • заголовков;
  • списков;
  • таблиц и так далее.

В них могут находиться другие блоки или отдельные элементы, такие как изображения.

Вот, например, что будет, если поместить код в блок <center>:

Принцип работы разметки следующий:

  1. Вы вводите в адресную строку адрес сайта или страницы.
  2. Браузер делает запрос по этому адресу и получает файл в формате .html.
  3. Код из полученного файла преобразуется в визуальные объекты.

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

<table border='1'>

<tr><th>№</th><th>Позиция</th><th>Цена за единицу(руб.)</th></tr>

<tr><td>1</td><td>Ручка синяя</td><td>8</td></tr>

<tr><td>2</td><td>Карандаш с ластиком</td><td>10</td></tr>

<tr><td>3</td><td>Линейка (30 см)</td><td>30</td></tr>

<tr><td>4</td><td>Галстук</td><td></td>250</tr>

<tr><td>5</td><td>Дырокол</td><td>100</td></tr>

</table>

<table> — это таблица, <tr> — это ряд, а <th> и <td> — столбцы. Если бы мы всё сделали правильно, в браузере бы отобразилась обычная таблица, но обратите внимание, что в 4 ряду цена галстука находится не в столбце, где она должна быть, а прямо в ряду. Вот как это будет выглядеть:

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

Что нельзя сделать на HTML

Простыми словами, HTML — это каркас сайта. В нем могут быть прописаны:

  • ссылки;
  • таблицы;
  • изображения;
  • блоки;
  • абзацы;
  • формы;
  • заголовки и так далее.

Также есть ограниченные возможности по изменению внешнего вида:

  • поменять цвет;
  • указать фоновое изображение;
  • изменить шрифт;
  • сделать текст жирным, курсивным, подчеркнутым, зачеркнутым и так далее.

На данный момент выпущено пять версий языка. Первая версия была разработана между 1986 и 1991 годами, а последняя (5.2) — в 2017. Изначально он должен был стать независимым от каких-либо платформ — отображаться везде одинаково. Но этого не случилось, потому что у пользователей росли требования к мультимедиа.

Как итог, код интерпретируется по-разному не только на разных устройствах, но и в разных браузерах. Это не плохо, потому что требования отличаются: пользователь, заходящий на сайт с телефона, готов к ограниченному функционалу и минималистичному дизайну, а владелец ПК зачастую хочет большего.

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

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

Появился встроенный плеер — теперь не нужно подключать Adobe Flash Player или другие плагины. Визуальная часть перетаскивания элементов теперь реализуется на HTML и CSS, если добавить атрибут draggable.

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

Работа с действиями пользователей пока в основном реализуется на JS. Атрибут draggable хоть и создает видимость перетаскивания, но на самом деле событие должно обрабатываться на JavaScript. HTML позволяет обмениваться данными с другими страницами, но чтобы их обработать, пригодится PHP.

Пока HTML стремится к тому, чтобы ускорить разработку и снизить нагрузку на браузер, но без других языков ему пока не обойтись, как и им без него.

Является ли HTML языком программирования

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

При этом во многих источниках говорится, что HTML все-таки относится к языкам программирования. Часть из них сомнительные, но встречаются и вполне авторитетные:

Так написано даже в «Википедии», хоть технически это и неверно.

Как долго учить HTML

Основы, которых хватит на создание простых сайтов, можно изучить за час. То есть быстрее, чем была написана эта статья. Но, как и в любом деле, мастерство приходит с практикой. Мало просто создать каркас — нужно убедиться, что он правильно отображается везде.

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

Курс «Профессия frontend-разработчик»
С нуля до разработчика с зарплатой от 60 000 рублей за 6 месяцев. Научитесь верстать сайты и создавать интерфейсы, соберите два проекта в портфолио и получите современную профессию.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать крутые статьи по программированию?
Подпишись на рассылку Skillbox
Новогодняя распродажа курсов
Посмотреть