{"draftJsState":{"blocks":[{"data":{"image":{"id":"5bbdc11da5bd5400a990ef4d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2hce8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":249,"offset":0,"style":"BOLD"},{"length":249,"offset":0,"style":"ITALIC"}],"text":"Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов. Разбираемся, как создать первую страницу, какие возможности предоставляет HTML5 и почему явление Open Source стало таким популярным.","type":"unstyled","key":"1g7tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда в 1980 году хакер и талантливый программист Тимоти придумал гиперссылки, чтобы легко переходить от одного документа к другому, то вряд ли мог осознать грандиозность своего изобретения. Сэр Тим Бернерс-Ли (так мы его именуем сейчас), сам того не понимая, заложил основы современного веба.","type":"unstyled","key":"673j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня создать простой сайт на HTML ничуть не сложнее, чем в 1980 году. Достаточно выучить пару тегов для оформления документов. Хотя технологии шагнули далеко вперед, но базовые принципы остались те же, что и тогда.","type":"unstyled","key":"8fmd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Гиперссылки в составе гипертекста порождают целую сеть связанных между собой документов, которые физически разбросаны по всему миру, причем каждый документ можно загрузить по его уникальному адресу.","type":"unstyled","key":"56m3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все вместе эти гипертексты образуют Всемирную паутину.","type":"unstyled","key":"3j4ke"},{"data":{"image":{"id":"5bbdc12e44c10400ae66f7e8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иллюстрация из предложения Тима Бернерса-Ли использовать документы с гиперссылками и клиент-серверную архитектуру в CERN, 1989 год","type":"atomic:image","key":"a9n03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Что такое HTML","type":"header-two","key":"403h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:","type":"unstyled","key":"5fj7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сам текст.","type":"unordered-list-item","key":"7mjc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги (элементы) для разметки этого текста.","type":"unordered-list-item","key":"trak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги — это команды для браузера. Например, тег

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

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

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

в тексте веб-страницы будут выделены как заголовок. Всё очень просто.","type":"unstyled","key":"a45jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы работаете в Windows, откройте «Блокнот». Напишите:","type":"unstyled","key":"cr7l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок Skillbox\n

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

\nпример текста","type":"blockquote","key":"3btmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и сохраните документ в формате .html (например, doc.html). Теперь откройте его в браузере («Файл» — «Открыть»). И увидите, что покажет браузер:","type":"unstyled","key":"em6dl"},{"data":{"image":{"id":"5bbdc12e44c10400ae66f7e7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1igjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляем! Вы написали свою первую HTML-страницу! Можно начинать присматриваться к вакансиям веб-разработчика.","type":"unstyled","key":"28cvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Без шуток, многие так и делают на этом этапе.","type":"unstyled","key":"5jdbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте добавим в документ ссылку:","type":"unstyled","key":"d8hln"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":19,"offset":89}],"inlineStyleRanges":[],"text":"Заголовок Skillbox \n

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

\nпример текста\n
\nНАЖМИ СЮДА","type":"blockquote","key":"avjbg"},{"data":{"image":{"id":"5bbdc12eda0edb00aac493a9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"27ure"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег
переносит текст на следующую строку.","type":"unstyled","key":"8bdc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это аналог клавиши Enter на клавиатуре или кнопки «Возврат каретки» на печатной машинке.","type":"unstyled","key":"5jng0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте в браузере эту страницу и нажмите ссылку — загрузится главная страница сайта skillbox.ru, с IP-адресом 178.248.237.96. По щелчку мыши документы загрузятся из дата-центра в Москве прямо в ваш браузер. Вот что придумал хакер Тимоти!","type":"unstyled","key":"bh42h"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":54,"offset":14},{"key":2,"length":68,"offset":69},{"key":3,"length":72,"offset":138}],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"},{"length":11,"offset":24,"style":"BOLD"},{"length":3,"offset":36,"style":"BOLD"},{"length":7,"offset":40,"style":"BOLD"},{"length":8,"offset":48,"style":"BOLD"},{"length":1,"offset":57,"style":"BOLD"},{"length":21,"offset":59,"style":"BOLD"},{"length":13,"offset":81,"style":"BOLD"},{"length":9,"offset":95,"style":"BOLD"},{"length":1,"offset":105,"style":"BOLD"},{"length":7,"offset":107,"style":"BOLD"},{"length":6,"offset":115,"style":"BOLD"},{"length":7,"offset":122,"style":"BOLD"},{"length":11,"offset":130,"style":"BOLD"},{"length":12,"offset":142,"style":"BOLD"},{"length":10,"offset":155,"style":"BOLD"},{"length":1,"offset":166,"style":"BOLD"},{"length":4,"offset":168,"style":"BOLD"},{"length":1,"offset":173,"style":"BOLD"},{"length":5,"offset":175,"style":"BOLD"},{"length":2,"offset":181,"style":"BOLD"},{"length":6,"offset":184,"style":"BOLD"},{"length":1,"offset":191,"style":"BOLD"},{"length":2,"offset":193,"style":"BOLD"},{"length":3,"offset":196,"style":"BOLD"},{"length":3,"offset":200,"style":"BOLD"},{"length":6,"offset":204,"style":"BOLD"}],"text":"Читайте также\nПошаговая инструкция. Как создать анимацию в Photoshop\nСовременный промо-дизайн: единороги в космосе против изящных решений\nКак организовать веб-студию с нуля и выйти на оборот в 10 000 000 рублей","type":"blockquote","key":"blgia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":98,"style":"ITALIC"}],"text":"На самом деле оформление в хорошем стиле требует массы дополнительных тегов оформления, таких как , , , и так далее. Отдельные абзацы корректно обрамлять тегами

, так что наш первый пример во многих отношениях не соответствует хорошему стилю. Вы поймете это, когда изучите реальные страницы настоящих сайтов.","type":"unstyled","key":"9dflk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами-программистами, которые заглянут в исходники.","type":"unstyled","key":"2lslk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Изучение на примерах","type":"header-two","key":"fd7nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте любой сайт и посмотрите исходный код. Это можно сделать прямо в браузере, использовав сочетание клавиш Ctrl+U.","type":"unstyled","key":"9ds6q"},{"data":{"image":{"id":"5bbdc12e46547a00aaa8bfb1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"31cc"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":26,"offset":317}],"inlineStyleRanges":[],"text":"Теперь вы видите, как пишут HTML-код профессионалы, которые получают за это большие деньги. Отличается от нашей первой странички, правда? Но этому тоже можно научиться за несколько месяцев. А если хотите получить полное образование со знанием CSS и JavaScript, с трудоустройством на вакансию джуниор-программиста, то придется учиться целый год.","type":"unstyled","key":"12pgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Элементы HTML","type":"header-two","key":"78ib6"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":25,"offset":236}],"inlineStyleRanges":[{"length":23,"offset":48,"style":"ITALIC"},{"length":4,"offset":84,"style":"ITALIC"}],"text":"В своем примере мы использовали всего три тега: , <h1> и тег <a> с атрибутом href для гиперссылки. В реальности словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C).","type":"unstyled","key":"ccnrd"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":9,"offset":68}],"inlineStyleRanges":[],"text":"Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документеперечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, который придется вызубрить.","type":"unstyled","key":"c780h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Набор технологий HTML5","type":"header-two","key":"8m5pb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":154,"style":"BOLD"}],"text":"HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, новыми атрибутами и новым поведением. Под термином HTML5 также подразумевают набор технологий, позволяющий создавать разнообразные сайты и веб-приложения.","type":"unstyled","key":"f2cub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На самом деле термин HTML5 используется для обозначения свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).","type":"unstyled","key":"aeqhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":95,"offset":0,"style":"BOLD"}],"text":"Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идет о технологиях HTML5.","type":"blockquote","key":"4pk43"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":20,"offset":229}],"inlineStyleRanges":[],"text":"В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. HTML5 позволяет создавать браузерные игры. Даже YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.","type":"unstyled","key":"cko6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":116,"style":"ITALIC"}],"text":"Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег <!DOCTYPE html> для указания типа документа.","type":"unstyled","key":"6l4ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<!DOCTYPE html>\n<title>Заголовок Skillbox\n

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

\nпример текста\n
\nНАЖМИ СЮДА","type":"blockquote","key":"56eca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё, теперь у нас документ по стандарту HTML5.","type":"unstyled","key":"drf2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":63,"style":"ITALIC"}],"text":"В HTML4 было много разных типов, а в HTML5 остался только один . Весь код, который вы написали раньше на «обычном» HTML (HTML4), будет работать и в HTML5. Однако здесь добавлено много новых технологий:","type":"unstyled","key":"9q3qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Мультимедиа-контент: HTML5 audio и video.","type":"unordered-list-item","key":"a4tbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":7,"offset":98,"style":"ITALIC"},{"length":8,"offset":122,"style":"ITALIC"}],"text":"Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).","type":"unordered-list-item","key":"2lbjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"},{"length":68,"offset":30,"style":"ITALIC"},{"length":7,"offset":101,"style":"ITALIC"}],"text":"Новые семантические элементы (,

, , , , и ).","type":"unordered-list-item","key":"99sq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"MathML для математических формул.","type":"unordered-list-item","key":"1dpfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Веб-сокеты: постоянное соединение между страницей и сервером и обмен данными через него. Страница интерактивно обновляется без перезагрузки.","type":"unordered-list-item","key":"4601g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"WebRTC: возможность общения в реальном времени. Позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешних приложений.","type":"unordered-list-item","key":"2gbq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Server-sent-события. Позволяют серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.","type":"unordered-list-item","key":"ebgk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Офлайн-работа: кеш приложения, офлайн- и онлайн-события.","type":"unordered-list-item","key":"rc1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Хранилище и использование файлов. Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента, а HTML5 File API работает с файлами.","type":"unordered-list-item","key":"c0q6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Camera API: позволяет взаимодействовать с камерой устройства.","type":"unordered-list-item","key":"er0mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":8,"offset":33,"style":"ITALIC"}],"text":"WebGL и SVG: трехмерная графика (