{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучаем основы веба на простом примере.","type":"unstyled","key":"9ph87"},{"data":{"image":{"id":"5e01d4aa34808200b1fdc916"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bqsda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.","type":"unstyled","key":"fjor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как это работает","type":"header-two","key":"ctsg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). По-русски: это набор команд, которые говорят нашим браузерам, как рисовать сайты. Например:","type":"unstyled","key":"894j3"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"d7f8f0416b6138463687f6c740062b7e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"egkck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слова внутри угловых скобок называются тегами:

,
и т. д. Теги говорят браузеру, как именно нужно отобразить тот или иной текст, где разместить картинку или какую сделать кнопку.","type":"unstyled","key":"ef5a7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраним наш фрагмент как текстовый файл и откроем его в браузере. Браузер прочитает каждый тег и покажет нам страницу уже без них, но будет помнить, что они означают. Браузеры на компьютерах и смартфонах понимают эти команды примерно одинаково, поэтому в большинстве браузеров страница тоже будет смотреться одинаково. Например, написанный выше код будет выглядеть как-то так:","type":"unstyled","key":"1l5nt"},{"data":{"image":{"id":"5e01d549c31e4900b23e520f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fbl9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В мире есть много подобных языков: текстовые редакторы Microsoft Word и Apple Pages тоже используют собственные языки разметки, чтобы сохранить информацию об оформлении документа. Даже когда вы в них пишете простой текст, эти редакторы добавляют в документ невидимую информацию о внешнем виде текста.","type":"unstyled","key":"eriak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем нужен HTML","type":"header-two","key":"c56ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — главный язык в интернете, на котором написано большинство документов. Каждый абзац текста в интернете, скорее всего, завёрнут в теги
...
и каждая ссылка, на которую вы нажимали, точно была завёрнута в теги .... Короче: это язык, на котором написан весь интернет.","type":"unstyled","key":"2r4u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если бы не было HTML, нам бы пришлось придумать какой-то другой формат для обмена документами в Сети, поэтому в любом случае мы бы получили тот же HTML.","type":"unstyled","key":"r525"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"— Но я не обмениваюсь документами!","type":"header-two","key":"1ta0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут есть терминологическая тонкость. Каждый раз, когда вы ходите по интернету через Chrome, может показаться, что вы переходите с одной страницы на другую. Но на самом деле вы их скачиваете. Вот как это работает:","type":"unstyled","key":"3j8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы набираете yandex.ru в адресной строке браузера или печатаете прямо там свой поисковый запрос.","type":"unordered-list-item","key":"8qlk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какие-то серверы, принадлежащие Яндексу, создают для вас новый документ — главную страницу yandex.ru или страницу с результатами поиска. Этот документ отправляется на ваш компьютер.","type":"unordered-list-item","key":"99u24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваш браузер получает этот документ, он написан на языке HTML. Браузер читает все теги и инструкции и показывает результат на экране в виде пикселей. Вам может показаться, что это вы пришли в Яндекс, но на самом деле это Яндекс отправил вам документ с результатами поиска.","type":"unordered-list-item","key":"bsjjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы нажимаете на ссылку в этом документе, и ваш браузер запрашивает новый документ с другого сервера. В ответ вам снова приходит HTML-документ.","type":"unordered-list-item","key":"csrut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер открывает полученный документ в новой вкладке.","type":"unordered-list-item","key":"f3ta7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кажется, что вы перешли на новый сайт, но на самом деле вы скачали с этого сайта документ, который выглядит как страница.","type":"unordered-list-item","key":"89nkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По-простому, в интернете вы никуда не «ходите». Скорее вы скачиваете документы, которые для вас формируют серверы разных компаний. Эти документы написаны на HTML.","type":"unstyled","key":"lqac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем знать HTML","type":"header-two","key":"3t67v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы знаете основные HTML-теги, то вы можете:","type":"unstyled","key":"c8f0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создавать свои и редактировать чужие страницы и целые сайты; настраивать готовые сайты и шаблоны;","type":"unordered-list-item","key":"1i3j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"контролировать внешний вид своих материалов при их публикации на разных сайтах;","type":"unordered-list-item","key":"3mfjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"стащить чей-то макет или фрагменты кода и использовать их в своих сайтах;","type":"unordered-list-item","key":"4hcus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"обходить некоторые пейволы и блокировки доступа к закрытому контенту.","type":"unordered-list-item","key":"3js18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные теги","type":"header-two","key":"8maqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот основные теги, которые используются в HTML:","type":"unstyled","key":"5ah5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"... — служебная область на странице, которая не показывается в браузере, но влияет на страницу в целом.","type":"unstyled","key":"fq2uq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"... — находится внутри . Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера.","type":"unstyled","key":"bvq61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"... — видимая часть страницы. Всё, что вы видите, происходит внутри этих тегов.","type":"unstyled","key":"1inr0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

и так далее — заголовки разного уровня.","type":"unstyled","key":"f0dca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

— абзац.","type":"unstyled","key":"6g5ak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"... — гиперссылка. Свойство «href» отвечает за адрес ссылки.","type":"unstyled","key":"8gvok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— картинка. Свойство «src» отвечает за адрес, по которому лежит изображение, чтобы браузер мог запросить её оттуда, скачать и показать на экране.","type":"unstyled","key":"6hga4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— ненумерованный список с одним элементом внутри. Чтобы элементов было больше, добавьте

...

внутрь

....","type":"unstyled","key":"41tmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— нумерованный список.","type":"unstyled","key":"8pl7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

— универсальный блок внутри страницы. Его можно настроить, чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки до кнопки подтверждения.","type":"unstyled","key":"8bgg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"... — с помощью этого тега можно менять внешний вид выбранного текста. Например, выделить его жёлтым, как маркером на бумаге.","type":"unstyled","key":"f0f49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

— минимальный набор тегов, чтобы сделать таблицу. TR отвечает за строки в таблице (table row), а TD — за ячейки в этой строке (table division). Мы вкладываем один тег в другой: ячейки живут внутри строк, строки — внутри , и всё это живёт внутри тега .","type":"unstyled","key":"1kn96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё есть

, который отвечает за первую строку таблицы (её называют головкой), но мы туда сейчас не полезем.","type":"unstyled","key":"4bi1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужно ли это учить?","type":"header-two","key":"bvvvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В интернете полно информации про HTML, поэтому нет необходимости что-то заучивать специально. Но если вы будете регулярно что-то верстать в HTML, вы и сами всё выучите. Это как ходьба или езда на велосипеде.","type":"unstyled","key":"8875b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если подумать, то привычные веб-страницы в каком-то смысле умирают, и HTML медленно теряет свою актуальность. 20 лет назад веб-страницы были единственным способом разместить что-то в Сети, а для этого абсолютно точно нужно было знать HTML. Теперь у нас есть социальные сети и платформы для публикаций, которые не требуют знания HTML. А у тех платформ, которые требуют, есть WYSIWYG-редакторы — они сразу позволяют форматировать текст как в Microsoft Word. Поэтому в будущем может появиться поколение интернет-пользователей, которые ни разу в жизни не столкнутся с HTML-кодом в своих проектах.","type":"unstyled","key":"7vq9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С другой стороны, HTML очень легко выучить и начать использовать, а польза от него огромная и прямо сейчас. В будущем, может быть, исчезнут велосипеды, но кататься прямо сегодня никто не запрещает.","type":"unstyled","key":"fu0fe"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":25,"offset":20}],"inlineStyleRanges":[{"length":25,"offset":20,"style":"BOLD"},{"length":25,"offset":20,"style":"UNDERLINE"}],"text":"Скоро всё покажем! Не забудьте подписаться. ","type":"unstyled","key":"45of1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"1mCbOeCyMRurUUb10VOi"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/code"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}