Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов. Разбираемся, как создать первую страницу, какие возможности предоставляет HTML5 и почему явление Open Source стало таким популярным.

Когда в 1980 году хакер и талантливый программист Тимоти придумал гиперссылки, чтобы легко переходить от одного документа к другому, то вряд ли мог осознать грандиозность своего изобретения. Сэр Тим Бернерс-Ли (так мы его именуем сейчас), сам того не понимая, заложил основы современного веба.

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

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

Все вместе эти гипертексты образуют Всемирную паутину.

Что такое HTML

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

Сам текст.
Теги (элементы) для разметки этого текста.

Теги — это команды для браузера. Например, тег <h1> командует браузеру отобразить весь текст как заголовок первого уровня, а тег </h1> командует завершить эту операцию. Соответственно, <h1>три этих слова</h1> в тексте веб-страницы будут выделены как заголовок. Всё очень просто.

Если вы работаете в Windows, откройте «Блокнот». Напишите:

<title>Заголовок Skillbox</title>
<h1>Первая страница</h1>
пример текста

и сохраните документ в формате .html (например, doc.html). Теперь откройте его в браузере («Файл» — «Открыть»). И увидите, что покажет браузер:

Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов.-3

Поздравляем! Вы написали свою первую HTML-страницу! Можно начинать присматриваться к вакансиям веб-разработчика.

Без шуток, многие так и делают на этом этапе.

Давайте добавим в документ ссылку:

<title>Заголовок Skillbox</title>
<h1>Первая страница</h1>
пример текста
<br>
<a href="http://skillbox.ru/">НАЖМИ СЮДА</a>

Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов.-4

Тег <br> переносит текст на следующую строку.

Это аналог клавиши Enter на клавиатуре или кнопки «Возврат каретки» на печатной машинке.

Откройте в браузере эту страницу и нажмите ссылку — загрузится главная страница сайта skillbox.ru, с IP-адресом 178.248.237.96. По щелчку мыши документы загрузятся из дата-центра в Москве прямо в ваш браузер. Вот что придумал хакер Тимоти!

Читайте также
Пошаговая инструкция. Как создать анимацию в Photoshop
Современный промо-дизайн: единороги в космосе против изящных решений
Как организовать веб-студию с нуля и выйти на оборот в 10 000 000 рублей

На самом деле оформление в хорошем стиле требует массы дополнительных тегов оформления, таких как <!DOCTYPE>, <html>, <head>, <body> и так далее. Отдельные абзацы корректно обрамлять тегами <p>, так что наш первый пример во многих отношениях не соответствует хорошему стилю. Вы поймете это, когда изучите реальные страницы настоящих сайтов.

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

Изучение на примерах

Откройте любой сайт и посмотрите исходный код. Это можно сделать прямо в браузере, использовав сочетание клавиш Ctrl+U.

Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов.-5

Теперь вы видите, как пишут HTML-код профессионалы, которые получают за это большие деньги. Отличается от нашей первой странички, правда? Но этому тоже можно научиться за несколько месяцев. А если хотите получить полное образование со знанием CSS и JavaScript, с трудоустройством на вакансию джуниор-программиста, то придется учиться целый год.

Элементы HTML

В своем примере мы использовали всего три тега: <title>, <h1> и тег <a> с атрибутом href для гиперссылки. В реальности словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C).

Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документеперечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, который придется вызубрить.

Набор технологий HTML5

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

На самом деле термин HTML5 используется для обозначения свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).

Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идет о технологиях HTML5.

В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. HTML5 позволяет создавать браузерные игры. Даже YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.

Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег <!DOCTYPE html> для указания типа документа.

<!DOCTYPE html>
<title>Заголовок Skillbox</title>
<h1>Первая страница</h1>
пример текста
<br>
<a href="http://skillbox.ru/">НАЖМИ СЮДА</a>

Всё, теперь у нас документ по стандарту HTML5.

В HTML4 было много разных типов, а в HTML5 остался только один <!DOCTYPE html>. Весь код, который вы написали раньше на «обычном» HTML (HTML4), будет работать и в HTML5. Однако здесь добавлено много новых технологий:

Мультимедиа-контент: HTML5 audio и video.
Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега <input> и новый элемент <output>).
Новые семантические элементы (<mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> и <meter>).
MathML для математических формул.
Веб-сокеты: постоянное соединение между страницей и сервером и обмен данными через него. Страница интерактивно обновляется без перезагрузки.
WebRTC: возможность общения в реальном времени. Позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешних приложений.
Server-sent-события. Позволяют серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
Офлайн-работа: кеш приложения, офлайн- и онлайн-события.
Хранилище и использование файлов. Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента, а HTML5 File API работает с файлами.
Camera API: позволяет взаимодействовать с камерой устройства.
WebGL и SVG: трехмерная графика (<canvas>) и основанный на XML формат векторных изображений.
…И другое.

Как редактировать HTML?

Разметка HTML5 создается с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5.

Некоторые справочные ресурсы по HTML

Справочник по HTML5 на портале Mozilla Developers Network

Руководства freeCodeCamp по HTML

Справочник по элементам HTML от W3Schools

Справочник DevDocs по HTML

Как научиться писать на HTML

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

Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.

Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

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

Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.

Годовая программа обучения «Профессия веб-разработчик» идеально подходит новичкам, которые хотят с чистого листа о тке HTML, CSS-стилях и языках программирования JavaScript и PHP. В итоге вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию джуниор-разработчика.

Курс «Профессия Веб-разработчик»

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

Программа курса