HTML – язык, который применяют для разметки страниц. Без него корректное отображение содержимого невозможно – он позволяет пользователям видеть таблицы, картинки, списки и другие элементы. Навык использования HTML-кода нужен не только программисту, его используют SEO-специалисты, копирайтеры, редакторы. Поговорим о том, что такое HTML, где ему научиться и какие сложности могут возникнуть.
История развития HTML
Предшественником HTML стал обобщённый метаязык SGML, стандарт по которому в ISO приняли в 1986 году. Его задачей было создание разметки текста, который распознавался бы на любом компьютере. Спустя 5 лет появился HTML – Тимо Бернерс Ли разработал его на основе SGML.
Основной функцией нового языка он видел обмен между пользователями научной и технической документацией в единственном тогда браузере Mosaic. Спустя 2 года появилась новая версия 1.2 – здесь было чуть больше 40 tags (непременных атрибутов, служебных слов).
2.0 был утвержден в 1995 году, но практически сразу же появилась следующая версия – 3.0. Сегодня в большинстве случаев используется пятая, хотя есть и шестая версия.
Что представляет собой HTML
Расшифровка HTML – HyperText Markup Language. HTML-код используется для разметки документов в интернете. Это стандартизированный язык гипертекстовой разметки, с помощью которого форматируют страницу. Основной «рабочий инструмент» – теги, служебные слова, которые заключают в угловые скобки. При встраивании в гипертекст (приставка hyper значит, что текст представлен в электронном виде) теги преобразуют его элементы.
Например, если отделить часть текста тегами <ul>, он превратится в маркированный список, а если использовать <ol> – в нумерованный. Весь контент на странице содержит тег <body>, стоящий после <head>.
С помощью ХТМЛ-тегов можно составлять списки определений и директорий, формировать структуру меню, выделять комментарии, задавать цвета фрагментам текста, стили шрифтам. Так контент становится более наглядным, лёгким для восприятия, тем более, сам HTML-документ пользователи не видят.
Как HTML работает на сайтах
Язык разметки гипертекста используется в автоматическом режиме – браузер сам подгружает соответствующие файлы, а посетители видят только отформатированную веб-страницу. В работе он использует как инструкцию DOCTYPE, а, например, index. html помогает находить файлы в папках.
Теги могут быть парными и непарными. В первом случае их используют для открытия и закрытия какого-либо элемента, например, маркированного списка. Непарный тег применяют, когда, например, нужно сделать ссылку на изображение.
HTML – язык программирования, который показывает «путь» для браузера и передаёт ему файлы в формате HTML в качестве инструкции по отображению контента на web-странице. Браузер преобразует полученный код в различные элементы – цветную заливку, списки, таблицы, картинки.
Но теги будут работать только в том случае, если указаны корректно. Например, если использовать для построения нумерованного списка непарный тег, он будет отображаться на странице в виде служебного слова в угловых скобках, а текст не преобразуется в список.
Возможности языка HTML
Программирование на HTML – не совсем разработка. С помощью этого языка нельзя написать код, например, для приложения. Но у него много возможностей по визуальному оформлению контента.
Что можно сделать при помощи HTML
Файл HTML может вмещать теги для таких элементов:
- картинки;
- таблицы;
- заголовки;
- списки;
- формы;
- гиперссылки;
- абзацы в тексте;
- блоки.
Если и другие функции. С его помощью можно задать подсветку определённого участка текста, создать список подсказок. В пятой версии есть новый тег <template> – часть данных, отделённая этими тегами, не считывается браузером (пользователь её не видит). Тег <picture> работает только в Chrome, но с его помощью можно добавлять картинки с учётом различных расширений.
Что нельзя сделать на HTML
HTML является языком разметки, поэтому на нём нельзя написать полноценные приложение или сайт. Некоторые операции доступны с его помощью, например, можно устанавливать шрифты, цвета для блоков и текста, но чаще это делают в файлах CSS – это проще и быстрее.
Как научиться HTML и сколько времени на это нужно
Освоить HTML на базовом уровне, чтобы добавлять тексты на веб-сайты, делать списки и таблицы, вставлять изображения, можно в среднем за день. Больше времени потребует изучение CSS, кроссбраузерной верстки – использования тегов с учётом их разного отображения в разных браузерах.
Платные курсы
В большинстве онлайн-школ есть тематические курсы, посвящённые HTML и CSS, также с ними знакомят в рамках других программ:
- «HTML/CSS» от beONmax. Интерактивный курс по основам HTML и CSS продолжительностью 5 часов. Включает 16 тестов и 18 интерактивных задач, по завершении обучения выдаётся сертификат.
- «Frontend-разработка» от SkillFactory. Языку посвящён первый блок учебной программы. Студенты пройдут 70 задач на вёрстку и составят 2 проекта для портфолио, а также будут оттачивать основы HTML и CSS на тренажёрах. Продолжительность курса – 3 месяца, по окончании выдаётся сертификат.
- «Веб-вёрстка» от Skillbox. Курс продолжительностью 4 месяца подойдёт новичкам и начинающим верстальщикам. Студенты выполнят 24 практические работы и создадут портфолио. Школа выдаёт сертификат и предоставляет рассрочку сроком до полугода.
- «Профессиональная вёрстка» от GeekBrains. Обучает адаптивной вёрстке на HTML 5 и CSS 3, продолжительность – 1 месяц, состоит из 8 уроков. По окончании обучения выдаётся сертификат.
Курсы, посвящённые HTML, обычно непродолжительные – в среднем от 1 до 3 месяцев.
Бесплатные курсы
Среди бесплатных курсов по HTML самые популярные:
- «Знакомство с HTML и CSS» от HTML-Academy. Курс продолжительностью 6 часов состоит из блока теории, 83 заданий и тренажёров для отработки навыков.
- «Основы HTML и CSS» от Stepik. Включает 10 видеоуроков с теорией и 34 теста для проверки навыков. Подходит для новичков без знаний веб-разработки.
- «Основы HTML, CSS и веб-дизайна» от «Хесклет». Состоит из 11 текстовых и видеоуроков, включает 18 проверочных тестов и тренажёр. Студентам предоставляются дополнительные материалы, есть доступ к онлайн-чату для получения помощи.
- «Введение в HTML» от «Интуит». Почти шестичасовой курс научит основам языка гипертекстовой разметки, состоит из 7 лекций продолжительностью до 1 часа. По окончании выдаётся сертификат.
При бесплатном обучении обычно нет помощи от наставников и сертификата. Обучающие программы, как правило, «урезанные» – состоят только из базовой информации.
YouTube
Для обучения можно использовать каналы на Youtube:
- loftblog – предлагает практические уроки, курсы, спецификации, записи вебинаров по JavaScript, jQuery, CSS, HTML;
- webtheory – канал с уроками по веб-разработке, помогает научиться делать сайты;
- Magisters | Обучение современным профессиям – уроки по CSS3, HTML5, веб-дизайну, Photoshop, PHP;
- webformyself – большое количество обучающих видео по веб-разработке;
- knowcity – обзоры и видеоуроки, в том числе по CSS, HTML.
Среди англоязычных каналов – Helping Develop, Treehouse, mjdwebdesign, Adam Khoury, TheDigiCraft.
Блоги и статьи
Понять, что означает HTML, и освоить язык разметки можно с помощью блогов и статей в интернете:
- блог компании HTML Academy на «Хабре» – новые материалы не добавляются, но собран большой объём полезной информации из мира IT;
- IT-Blog – уроки по программированию, удобный поиск материалов по категориям и тегам;
- htmlbook.ru – блог, где HTML посвящён целый раздел, есть самоучители, сборники полезных материалов;
- ИТ-шеф – уроки, статьи и примеры по HTML и CSS;
- Tproger – посты с обсуждениями, бесплатные курсы, последние новости для разработчиков.
Также можно использовать тематическую литературу, например, учебник ru. html. net или справочник html. manual.ru.
Сложность изучения
В целом освоить HTML несложно, даже если изучать его самостоятельно. Но есть ряд нюансов:
- только на практике можно понять, какие теги лучше использовать в том или ином случае;
- одного только HTML для создания полноценных веб-страниц недостаточно, по меньшей мере, не обойтись без знания CSS, а для оформления динамических элементов нужно знать JavaScript;
- нужны внимательность и усидчивость – отсутствие одного символа в тегах приведёт к некорректному отображению содержимого страницы.
HTML – каркас сайта, обеспечивающий базу. Только его одного недостаточно – чтобы контент был привлекательным, важно использовать его в связке с CSS и получить базовые навыки в JS.
