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

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

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

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

Иллюстрация из предложения Тима Бернерса-Ли использовать документы с гиперссылками и клиент-серверную архитектуру в CERN, 1989 год
Что такое HTML
HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:

Сам текст.
Теги (элементы) для разметки этого текста.
Теги — это команды для браузера. Например, тег

командует браузеру отобразить весь текст как заголовок первого уровня, а тег

командует завершить эту операцию. Соответственно,

три этих слова

в тексте веб-страницы будут выделены как заголовок. Всё очень просто.

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

Заголовок Skillbox

Первая страница

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

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

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

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

Заголовок Skillbox

Первая страница

пример текста

НАЖМИ СЮДА
Тег
переносит текст на следующую строку.

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

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

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

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

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

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

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

Элементы HTML
В своем примере мы использовали всего три тега: , </p> <h1> и тег <a> с атрибутом href для гиперссылки. В реальности словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C).</p> <p>Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документеперечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, который придется вызубрить.</p> <p>Набор технологий HTML5<br /> HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, новыми атрибутами и новым поведением. Под термином HTML5 также подразумевают набор технологий, позволяющий создавать разнообразные сайты и веб-приложения.</p> <p>На самом деле термин HTML5 используется для обозначения свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).</p> <p>Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идет о технологиях HTML5.<br /> В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. HTML5 позволяет создавать браузерные игры. Даже YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.</p> <p>Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег <!DOCTYPE html> для указания типа документа.</p> <p><!DOCTYPE html><br /> <title>Заголовок Skillbox

Первая страница

пример текста

НАЖМИ СЮДА
Всё, теперь у нас документ по стандарту HTML5.

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

Мультимедиа-контент: HTML5 audio и video.
Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).
Новые семантические элементы (,

,
, ,