...

{"draftJsState":{"blocks":[{"data":{"image":{"id":"65ddf49dfc977a64cb6a95d4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9fbjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание сайта похоже на конструктор лего. А HTML — его инструкция, по которой все элементы сайта собирают в нужный вид.","type":"unstyled","key":"eb3dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что это такое, как на практике работает HTML, за сколько и где можно научиться его использовать новичку в веб-дизайне, узнаете в нашей статье.","type":"unstyled","key":"3jnp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Из чего состоит HTML-код","type":"header-two","key":"aahqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"HTML (Hypertext Markup Language) — код, который структурирует веб-страницу и ее содержимое.","type":"unstyled","key":"918fv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":148,"style":"BOLD"}],"text":"С помощью HTML разработчик создает документ с гиперссылками, списками, заголовками и подзаголовками, разными шрифтами. Так получается неоформленный каркас сайта, с текстом, таблицами и иллюстрациями. Привычный нам дизайн оформляют каскадными таблицами CSS, о них читайте в нашей другой статье.","type":"unstyled","key":"597ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"HTML-код состоит из тегов — команд, которые сообщают браузеру, как располагаются элементы на странице.","type":"unstyled","key":"42jgk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"ITALIC"}],"text":"Для всех примеров мы писали код HTML в приложении Notepad ++.","type":"unstyled","key":"vn44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":25,"style":"BOLD"},{"length":20,"offset":50,"style":"BOLD"},{"length":6,"offset":82,"style":"ITALIC"},{"length":8,"offset":140,"style":"ITALIC"}],"text":"Такая команда состоит из названия, заключенного в боковые скобки < >. Теги бывают парные, которые состоят из открывающего и закрывающего, и непарные, состоящие из одного тега.","type":"unstyled","key":"cl95g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":173,"offset":0,"style":"ITALIC"}],"text":"Парные теги всегда идут вместе. Если вы пропустите закрывающий тег, команда будет незавершенной и браузер не сможет ее исполнить, а элементы на странице отобразятся неверно.","type":"unstyled","key":"996hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример парных тегов:","type":"unstyled","key":"dd2kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

…

, где

это открывающий тег, а

— закрывающий. В него помещают основной текст, например:","type":"unstyled","key":"cr2ms"},{"data":{"image":{"id":"65ddf4db36382e4c7db99971"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отображение кода в браузере","type":"atomic:image","key":"aoitq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Парные теги используются, чтобы разметить блоки на странице: заголовки, абзацы, списки и таблицы.","type":"unstyled","key":"80r9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь наша надпись «Здравствуйте, это проект “Содействие занятости”» расположена на веб-странице.","type":"unstyled","key":"d023o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":34,"style":"BOLD"}],"text":"Добавим к ней картинку при помощи непарного тега .","type":"unstyled","key":"bpjv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно запомнить и про атрибуты тега. Благодаря им к элементу страницы добавляют дополнительные характеристики: размер, id элемента, ссылку на изображение.","type":"unstyled","key":"7l4pq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":14,"offset":40,"style":"BOLD"}],"text":"Тег включает два основных атрибута — src и alt. Первый добавляет ссылку на файл, а второй — подпись к картинке, которая отобразится, если картинка не загрузится.","type":"unstyled","key":"b41kc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим и атрибут src в наш html-код:","type":"unstyled","key":"fpmgv"},{"data":{"image":{"id":"65ddf5013c6ee117e9a0b3c9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть кода с тегами

и ","type":"atomic:image","key":"co1l8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер отобразит это так:","type":"unstyled","key":"2ni7m"},{"data":{"image":{"id":"65ddf54f884b103276ec4810"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отображение кода в браузере","type":"atomic:image","key":"a7k9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"ВАЖНО: Чтобы картинка отображалась верно, скачайте нужную на компьютер, найдите ее свойства и скопируйте содержимое строки «Путь к файлу» внутрь тега .","type":"unstyled","key":"93aos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы наш текст на фоне логотипы выглядел больше и ярче, сделаем его через тег … — заголовок конкретного уровня: от 1 до 6. Мы выбрали заголовок уровня 2 —

...

и поставили этот тег вместо

…

.","type":"unstyled","key":"dssm3"},{"data":{"image":{"id":"65ddfcab0feeaa2ff61e38ab"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Такой код получился с новым тегом

...

","type":"atomic:image","key":"fmhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qpq8"},{"data":{"image":{"id":"65ddf5a8a6331c665f3303e8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере теперь разметка выглядит вот так","type":"atomic:image","key":"befaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На простых примерах вы увидели, как работает код html. Если планируете изучать разметку сайтов вам понадобятся следующие теги:","type":"unstyled","key":"3isk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"},{"length":4,"offset":11,"style":"BOLD"}],"text":"... — контейнер гипертекста;","type":"unstyled","key":"456ce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"},{"length":4,"offset":11,"style":"BOLD"}],"text":"... — контейнер заголовка документа;","type":"unstyled","key":"a7fq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":1,"style":"BOLD"},{"length":5,"offset":12,"style":"BOLD"}],"text":"... — название, которое отображается в заголовке окна браузера;","type":"unstyled","key":"42fi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"},{"length":4,"offset":11,"style":"BOLD"}],"text":"... — контейнер тела документа;","type":"unstyled","key":"fmf26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":10,"style":"BOLD"}],"text":"

...

— структурный блок;","type":"unstyled","key":"7ue6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":1,"style":"BOLD"},{"length":1,"offset":8,"style":"BOLD"}],"text":"... — гиперссылка;","type":"unstyled","key":"f69la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"

... — нумерованный список;","type":"unstyled","key":"f1oq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"

... — маркированный список;","type":"unstyled","key":"8radd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"

...

— элемент списка;","type":"unstyled","key":"11l18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":1,"style":"BOLD"},{"length":5,"offset":12,"style":"BOLD"}],"text":"...

— контейнер таблицы;","type":"unstyled","key":"gv6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"... — строка таблицы;","type":"unstyled","key":"3bbp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"... — ячейка таблицы;","type":"unstyled","key":"3lakj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"},{"length":4,"offset":11,"style":"BOLD"}],"text":" — форма;","type":"unstyled","key":"apbvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":1,"style":"BOLD"},{"length":1,"offset":8,"style":"BOLD"}],"text":"... — отображение текста курсивом;","type":"unstyled","key":"r60f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":1,"style":"BOLD"},{"length":1,"offset":8,"style":"BOLD"}],"text":"... — отображение текста полужирным шрифтом;","type":"unstyled","key":"7hc6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"},{"length":2,"offset":9,"style":"BOLD"}],"text":"... — выделение (курсивом);","type":"unstyled","key":"fb8ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":1,"style":"BOLD"},{"length":6,"offset":13,"style":"BOLD"}],"text":"... — усиление (полужирным шрифтом);","type":"unstyled","key":"3ikda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":1,"style":"BOLD"}],"text":"
— принудительный разрыв строки.","type":"unstyled","key":"e9qad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как же происходит процесс разметки сайта на деле, давайте разбираться.","type":"unstyled","key":"7r2l8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала вы вводите в адресную строку название сайта или страницы. Браузер отправляет запрос и получает HTML-файл с кодом. Именно этот код и преобразуется в объекты и элементы на странице.","type":"unstyled","key":"evo3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У каждого браузера есть собственные правила отображения. Чтобы облегчить работу и не подстраивать код под каждый браузер, разработчики W3C создали веб-стандарты, благодаря которым код в любом браузере отображается одинаково.","type":"unstyled","key":"4e3iv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"HTML — язык программирования","type":"header-two","key":"51om3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":5,"style":"BOLD"},{"length":22,"offset":5,"style":"ITALIC"}],"text":"Нет, HTML — язык разметки. Он сообщает браузеру, на каком устройстве вы открыли веб-страницу, с какой ориентацией экрана, и подсказывает, как браузеру показать сайт, чтобы вам было комфортно его смотреть.","type":"unstyled","key":"avhl6"},{"data":{"image":{"id":"65ddf5cffb98fa6a95190442"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3ee21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На языках программирования пишут программы и приложения, а вот HTML как язык разметки через теги — команды — указывает браузеру, где и какой элемент должен находиться на странице.","type":"unstyled","key":"35k3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Сколько времени нужно, чтобы освоить HTML","type":"header-two","key":"d8kvm"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":44,"offset":143},{"key":1,"length":22,"offset":297}],"inlineStyleRanges":[{"length":44,"offset":143,"style":"BOLD"},{"length":1,"offset":188,"style":"BOLD"},{"length":13,"offset":191,"style":"BOLD"},{"length":23,"offset":297,"style":"BOLD"}],"text":"Основы HTML, важные теги и теорию вы сможете изучить за пару часов. Здесь важнее практика и насмотренность. Их вы получите на бесплатном курсе «Web-программист: с нуля до первых проектов». Вы за 2 месяца изучите и html, и другие основы веб-дизайна. Обучение проходит в рамках федерального проекта «Содействие занятости».","type":"unstyled","key":"5op4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На курсе вы научитесь:","type":"unstyled","key":"glbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выстраивать элементы сайта так, чтобы он был удобным и понятным;","type":"unordered-list-item","key":"e6gtl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понимать все внутренние процессы, которые происходят на сайте;","type":"unordered-list-item","key":"fcpok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Писать код и использовать инструменты разработки;","type":"unordered-list-item","key":"4vufh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстать сайты для всех типов устройств.","type":"unordered-list-item","key":"do016"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":19,"style":"BOLD"},{"length":77,"offset":173,"style":"BOLD"}],"text":"Обучение проходит в онлайн-формате на образовательной платформе Odin. Обучаться можно по гибкому графику: после работы или на выходных. После окончания программы вы получите документ установленного образца и возможность пройти оплачиваемую стажировку в компаниях-партнерах проекта.","type":"unstyled","key":"54rhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только закончите обучение, вы получите доступ в закрытый канал с 4500+ актуальными вакансиями «с опытом» и «без» от проверенных работодателей России.","type":"unstyled","key":"71hlb"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":13,"offset":138}],"inlineStyleRanges":[{"length":13,"offset":138,"style":"BOLD"}],"text":"Чтобы вам было легче и комфортнее найти работу после обучения, чувствовать поддержку и получать помощь и ответы на вопросы, обращайтесь в Центр карьеры.","type":"unstyled","key":"ab8uv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Специалисты помогут:","type":"unstyled","key":"9rols"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сориентироваться в сферах, где вам стоит искать работу по своей специальности.","type":"unordered-list-item","key":"6ajud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понять, на какую зарплату можно претендовать (подготовят статистику по вашей позиции).","type":"unordered-list-item","key":"fip2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определиться с чего начать, если планировали менять работу.","type":"unordered-list-item","key":"6tb6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Узнать, как действовать при угрозе увольнения или сокращения.","type":"unordered-list-item","key":"4vbgs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Составить план поиска работы.","type":"unordered-list-item","key":"5jgo9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правильно коммуницировать с работодателем на всех этапах работы.","type":"unordered-list-item","key":"6m3j6"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":44,"offset":37}],"inlineStyleRanges":[{"length":44,"offset":37,"style":"BOLD"}],"text":"Записывайтесь на бесплатное обучение «Web-программист: с нуля до первых проектов», чтобы получить новую профессию и изменить свою карьеру.","type":"unstyled","key":"23hr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7UpW0vJu9PtokKV4nxup"}],"entityMap":{"0":{"data":{"url":"https://www.tgu-dpo.ru/program/webprogrammer?utm_source=dzen&utm_medium=article"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://tgu-dpo.ru/?utm_source=dzen&utm_medium=article"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://tgu-dpo.ru/careercenter?utm_source=dzen&utm_medium=article"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://www.tgu-dpo.ru/program/webprogrammer?utm_source=dzen&utm_medium=article","url":"https://www.tgu-dpo.ru/program/webprogrammer?utm_source=dzen&utm_medium=article"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}