{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":0}],"inlineStyleRanges":[],"text":"Блог RU-CENTER","type":"header-two","key":"6sk98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно.","type":"unstyled","key":"fpqa5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Примечание : мы не будем лезть в дебри и подробно описывать процесс программирования. Расскажем о том минимуме, что пригодится в работе над вашим сайтом.","type":"unstyled","key":"6hlqa"},{"data":{"image":{"id":"602f5f833ad6ee787c05230b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2r8tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем понимать исходный код","type":"header-two","key":"4qoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.","type":"unstyled","key":"d86st"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зная, как устроен исходный код, вы сможете:","type":"unstyled","key":"eps1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Больше понимать в SEO-продвижении.","type":"unordered-list-item","key":"6vfb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.","type":"unstyled","key":"14vpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.","type":"unstyled","key":"e91r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"Анализировать сайты конкурентов на более глубоком уровне.","type":"unordered-list-item","key":"9mejk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.","type":"unstyled","key":"flctj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"Составлять грамотные ТЗ для разработчика самостоятельно.","type":"unordered-list-item","key":"ff6k5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.","type":"unstyled","key":"7tfve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Лучше понимать программистов.","type":"unordered-list-item","key":"3brhf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.","type":"unstyled","key":"epshh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Экономить, самостоятельно внося изменения в сайт.","type":"unordered-list-item","key":"56pk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.","type":"unstyled","key":"bsujo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое исходный код сайта","type":"header-two","key":"dj4cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.","type":"unstyled","key":"4l5gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.","type":"unstyled","key":"dqvu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как посмотреть код любого сайта","type":"header-two","key":"dn5cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.","type":"unstyled","key":"5cmds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код вызывается одной из комбинаций:","type":"unstyled","key":"8cfoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"},{"length":45,"offset":32,"style":"BOLD"}],"text":"комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:","type":"unordered-list-item","key":"3598t"},{"data":{"image":{"id":"602f5f836ce3da78042ec4da"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5sjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"},{"length":38,"offset":40,"style":"BOLD"}],"text":"комбинация клавиш Ctrl + Shift + I или правая кнопка мыши → «Просмотреть код» — удобная команда, чтобы посмотреть не весь исходный код страницы сразу, а код отдельных элементов на странице.","type":"unordered-list-item","key":"66h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель с кодом откроется на этой же странице, а не в другом окне. При наведении мышки на код будет подсвечиваться соответствующая ему область на текущей странице.","type":"unstyled","key":"40fes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше в статье мы будем пользоваться именно этим инструментом — он нагляднее.","type":"unstyled","key":"2tud0"},{"data":{"image":{"id":"602f5f835f462a3bfd2aa313"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ak2gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.","type":"unstyled","key":"7bk4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое HTML","type":"header-two","key":"5kpvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.","type":"unstyled","key":"9alko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что можно узнать о сайте из исходного кода","type":"header-three","key":"14lt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код сайта предназначен в первую очередь для браузера и поисковых систем. Браузеру он говорит, что и в каком порядке выводить на странице. Поисковые системы берут из исходного кода всю информацию о странице: заголовок, описание, метаданные — всё то, что потребуется, чтобы показать страницу в выдаче поисковика. Обычный пользователь тоже может прочитать этот специальный текст — достаточно знать, как он устроен.","type":"unstyled","key":"9i9ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:","type":"unstyled","key":"4slb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"текст, который есть на странице;","type":"unordered-list-item","key":"efdn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"цвета, шрифты и размеры элементов страницы;","type":"unordered-list-item","key":"1tfh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"иллюстрации, фотографии и другие детали;","type":"unordered-list-item","key":"2iv5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ссылки;","type":"unordered-list-item","key":"8dip3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"важные теги, метатеги и атрибуты кода;","type":"unordered-list-item","key":"2be63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"скрипты, счётчики, генераторы заявок, коды идентификации в системах и пр.;","type":"unordered-list-item","key":"97qfu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"данные JavaScript;","type":"unordered-list-item","key":"8a564"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ошибки и поломки в коде и прочее.","type":"unordered-list-item","key":"2pnsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.","type":"unstyled","key":"echue"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":21}],"inlineStyleRanges":[],"text":"Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.","type":"unstyled","key":"937g8"},{"data":{"image":{"id":"602f5f91ffa2d86ae406d5aa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9gc1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные теги","type":"header-three","key":"ckkv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-страница состоит из набора тегов, которые вместе с содержимым называются элементами — это строительный материал веб-страницы. Другими словами, теги — команды для браузера, чтобы он понял, как нужно показывать сайт пользователю. Указывая в коде определенные теги, вы говорите браузеру: «Это текст, а это картинка, это ссылка, а это кнопка или форма». И браузер показывает все элементы интерфейса так, как вы их разместили.","type":"unstyled","key":"9v1gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги обычно открываются и закрываются так: — открытие тега, — закрытие.","type":"unstyled","key":"cq6er"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":26,"style":"BOLD"}],"text":"Теги делятся на два вида: блочные и строчные .","type":"unstyled","key":"4figm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Блочные теги всегда занимают отдельную строку в коде и обозначают целый элемент страницы сайта. Пример: заголовки или параграфы.","type":"unordered-list-item","key":"be9d6"},{"data":{"image":{"id":"602f5f913ad6ee787c053ac6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"rr3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок в тегах

занимает отдельную строку","type":"unstyled","key":"hibb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Строчные теги входят в состав блоков и занимают лишь часть строки. Пример: гиперссылки и подчёркнутые строки.","type":"unordered-list-item","key":"5km30"},{"data":{"image":{"id":"602f5f916ce3da78042ede70"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Гиперссылка и текст заголовка в тегах находятся внутри строки с тегами

","type":"atomic:image","key":"1r1mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги блочного уровня","type":"header-three","key":"4k9ol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый HTML-документ содержит три обязательных тега: , и .","type":"unstyled","key":"eg439"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — элемент самого высокого уровня, является контейнером, который заключает в себе всё содержимое веб-страницы.","type":"unordered-list-item","key":"7pvdg"},{"data":{"image":{"id":"602f5fa25f462a3bfd2adabd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fr684"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — содержит заголовки и информацию о кодировке.","type":"unordered-list-item","key":"45cqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержимое не отображается на странице напрямую, в нём находится служебная информация для браузера и поисковика, кроме тега — он устанавливает заголовок окна веб-страницы.","type":"unstyled","key":"dort6"},{"data":{"image":{"id":"602f5fa23ad6ee787c055a6f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2tps1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<body> </body> — как интуитивно понятно из перевода названия, это «тело» страницы — всё её содержимое.","type":"unordered-list-item","key":"ktc1"},{"data":{"image":{"id":"602f5fa2ffa2d86ae406f56c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2butg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также HTML-документ может содержать необязательные теги. Расскажем о некоторых их них.","type":"unstyled","key":"7j3f2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":26,"style":"BOLD"}],"text":"<h1> </h1> — <h6> </h6> — заголовки . Имеют 6 уровней: h1 — заголовок самого высокого уровня, а h6 — самого низкого.","type":"unordered-list-item","key":"6d264"},{"data":{"image":{"id":"602f5fa2ffa2d86ae406f56d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок первого уровня","type":"atomic:image","key":"9eamt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9ap4i"},{"data":{"image":{"id":"602f5fb66ce3da78042f1a38"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок третьего уровня","type":"atomic:image","key":"61d9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":11,"style":"BOLD"}],"text":"<p> </p> — абзацы .","type":"unordered-list-item","key":"7ij2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":47,"style":"BOLD"}],"text":"<blockquote> </blockquote> — этот тег выделяет длинные цитаты внутри документа. Текст, обозначенный этим тегом, выглядит на странице как выровненный блок с отступами слева и справа, отбивкой сверху и снизу.","type":"unordered-list-item","key":"2c726"},{"data":{"image":{"id":"602f5fd4bc490b6725ec5ccd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b7ahp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<div> </div> — этим тегом отмечаются контейнеры — крупные блоки, содержащие в разном количестве несколько абзацев, иллюстраций, блок-записей и других элементов. Современный, хорошо спроектированный сайт в основном использует теги <div> для создания структуры страницы.","type":"unordered-list-item","key":"1d79j"},{"data":{"image":{"id":"602f5fd4ffa2d86ae407528b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"829lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<ol> </ol> — упорядоченные списки (аналог нумерованного списка).","type":"unordered-list-item","key":"evk6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<li> </li> — элементы списка.","type":"unordered-list-item","key":"e1u2"},{"data":{"image":{"id":"602f5fd46ce3da78042f554d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7q46d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<ul> </ul> — неупорядоченные списки (аналог маркированных списков).","type":"unordered-list-item","key":"6ok5e"},{"data":{"image":{"id":"602f5fd43ad6ee787c05aa0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7hk3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строчные теги","type":"header-three","key":"2n9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<em> </em> — форматирование текста, курсив.","type":"unordered-list-item","key":"3iftg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<strong> </strong> — форматирование текста, жирный шрифт.","type":"unordered-list-item","key":"dnap1"},{"data":{"image":{"id":"602f5fd43ad6ee787c05aa0a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5hs71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<a> </a> — гиперссылки, href — указание URL-адреса.","type":"unordered-list-item","key":"li15"},{"data":{"image":{"id":"602f5fd43ad6ee787c05aa0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"30smi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<img> без закрывающего тега — для добавления изображения + атрибут src для указания пути к папке с картинкой.","type":"unordered-list-item","key":"5rmaa"},{"data":{"image":{"id":"602f5fd85f462a3bfd2b3edf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"43bna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Немного разобрались с основными HTML-элементами, теперь поговорим о том, что такое CSS.","type":"unstyled","key":"2a65o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое CSS","type":"header-two","key":"e8dvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS (Cascading Style Sheets) — каскадные таблицы стилей. Это язык, который отвечает за внешний вид HTML-документа, — CSS и HTML действуют в одной связке.","type":"unstyled","key":"9cg9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если HTML отвечает за структуру, то CSS определяет стиль документа: дизайн, вёрстку, адаптацию для разных устройств.","type":"unstyled","key":"2pd7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страница сайта, написанная только на HTML, выглядит просто как текст, поделённый на абзацы, с разными начертаниями шрифтов, гиперссылками, списками и таблицами:","type":"unstyled","key":"aohlo"},{"data":{"image":{"id":"602f5fe45f462a3bfd2b5269"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2vljv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А так выглядит та же страница, но со стилями CSS:","type":"unstyled","key":"d4ttu"},{"data":{"image":{"id":"602f5fe4bc490b6725ec7d79"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6h569"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше, примерно до 1996 года, стили были встроены в HTML, код становился громоздким и в нём было сложно разобраться. Тогда появился CSS со своим языком, правилами и возможностью вынести все стили в отдельный файл. Процесс создания сайтов стал более гибким, управлять стилями оказалось проще — теперь стиль абзаца не нужно править в HTML-файле вручную для каждого абзаца— достаточно в CSS-файле отредактировать одно правило. Плюс стало проще читать и обслуживать HTML-код.","type":"unstyled","key":"na05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":104,"style":"BOLD"}],"text":"Главный тег для элементов CSS — <style>. Стили, которые нужно подключить к HTML-документу, как правило, выносят в отдельный CSS-файл , а после прописывают ссылку на него в коде HTML.","type":"unstyled","key":"8nf6h"},{"data":{"image":{"id":"602f5fe45f462a3bfd2b526a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код HTML (слева) и CSS (справа) в интерактивном окне на сайте RU-CENTER","type":"atomic:image","key":"781tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое JavaScript","type":"header-two","key":"34sqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript — логический язык программирования. Он сложнее, чем HTML или CSS, поддерживается всеми современными браузерами, его используют практически все сайты.","type":"unstyled","key":"1iavt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В отличие от HTML и CSS, JavaScript позволяет использовать на сайтах более мощные и сложные функции, создавать интерактивные страницы с динамичными элементами. Например:","type":"unstyled","key":"cvug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"отслеживать аналитику,","type":"unordered-list-item","key":"f6sr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создавать анимации,","type":"unordered-list-item","key":"2j013"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"встраивать всплывающие окна и другое.","type":"unordered-list-item","key":"fsmic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сайте скрипты на этом языке найти просто. Открываем интерактивный код, нажимаем Ctrl + F и вводим в поле поиска JavaScript:","type":"unstyled","key":"2t80c"},{"data":{"image":{"id":"602f60003ad6ee787c05f249"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8pl60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы видим, что тег с пометкой javascript отвечает за отслеживание взаимодействий пользователя с сайтом: это тег Google Аналитики. Но мы не будем подробно останавливаться на нём в этой статье.","type":"unstyled","key":"a8fse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как познакомиться с кодом поближе","type":"header-two","key":"9808v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поговорили о теории, теперь — практика. Глубоко копать не будем, чтобы не запутаться. Покажем, как отредактировать код в браузере, а после — провести мини-SEO-аудит, используя только выдачу поисковика и страницу вашего сайта. Начнём с редактирования кода.","type":"unstyled","key":"9bqvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как редактировать HTML-код прямо в браузере","type":"header-three","key":"6gs0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете отредактировать код любой интернет-страницы с одним «но»: эти изменения будут видны только вам и после перезагрузки страницы всё вернётся к прежнему виду. Поэтому смелее — вы точно ничего не сломаете.","type":"unstyled","key":"cbrgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Обычно это делается, чтобы:","type":"unstyled","key":"d5rhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуально менять тексты и данные на сайте, проверять новые форматы.","type":"ordered-list-item","key":"5ug0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестировать блоки и элементы: заголовки, сноски, абзацы, врезки и т. п.","type":"ordered-list-item","key":"aenog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Править информацию на странице, чтобы показать скриншоты дизайнерам, редакторам или разработчикам.","type":"ordered-list-item","key":"4a8rf"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":70}],"inlineStyleRanges":[],"text":"Давайте немного поменяем текст на странице блога RU-CENTER. Открываем страницу в браузере Google Chrome. Находим заголовок, нажимаем на него правой кнопкой мыши и выбираем в меню «Просмотр кода».","type":"unstyled","key":"bs6g2"},{"data":{"image":{"id":"602f6000ffa2d86ae4079dd5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4v3ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы хотим исправить этот заголовок. Нажимаем дважды левой кнопкой мыши на текст в строке кода, пишем новый заголовок и нажимаем Enter:","type":"unstyled","key":"8jh2e"},{"data":{"image":{"id":"602f60005f462a3bfd2b8560"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fccjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Или, например, хотим мы поменять текст на кнопке. Кликаем на неё правой кнопкой мыши, выбираем в меню пункт «Просмотреть код»:","type":"unstyled","key":"ekajj"},{"data":{"image":{"id":"602f60003ad6ee787c05f248"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6ic54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Находим текст кнопки:","type":"unstyled","key":"cspcc"},{"data":{"image":{"id":"602f6000ffa2d86ae4079dd7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d065"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И меняем его — в области кода левой кнопкой мыши дважды нажимаем на текст, печатаем новую фразу и нажимаем Enter:","type":"unstyled","key":"3d0vr"},{"data":{"image":{"id":"602f6000ffa2d86ae4079dd6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c536t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А ещё поменяем иллюстрацию. Кликаем на изображение правой кнопкой мыши и выбираем пункт «Просмотреть код»:","type":"unstyled","key":"6db11"},{"data":{"image":{"id":"602f60046ce3da78042fa596"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"chouu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед нами код иллюстрации:","type":"unstyled","key":"9u3t4"},{"data":{"image":{"id":"602f6005bc490b6725ecbb76"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b9gc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меняем URL картинки на новый:","type":"unstyled","key":"eq0m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//storage.nic.ru/ru/images/png/1.blog-pl950.png","type":"unstyled","key":"ehefj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"меняем на:","type":"unstyled","key":"ebftq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//vse-znay.ru/wp-content/uploads/2018/09/Kak-pojavilsja-znak-sobachka-istorija-i-znachenie-simvola-.jpg","type":"unstyled","key":"d1hju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5chv4"},{"data":{"image":{"id":"602f6013bc490b6725ecd4d8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6dvc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуйте поэкспериментировать на своём сайте. Это интересно и полезно: вы сможете внести изменения, сделать скриншот наиболее удачной версии и использовать его при составлении ТЗ на доработку сайта.","type":"unstyled","key":"af8er"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как редактировать CSS-код прямо в браузере","type":"header-three","key":"3pg0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-код можно редактировать так же, как и HTML: открываем код страницы в браузере и заменяем или удаляем элементы. Если обновить страницу, всё вернётся на свои места.","type":"unstyled","key":"5j9g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменим размер картинки на странице RU-CENTER. Открываем код изображения, находим внизу окна кода нужное поле:","type":"unstyled","key":"13ln6"},{"data":{"image":{"id":"602f60135f462a3bfd2ba5a0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"asge1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уменьшим иллюстрацию, изменив значения в блоке:","type":"unstyled","key":"36bhb"},{"data":{"image":{"id":"602f6013ffa2d86ae407bc7e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fk8u9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А ещё изменим цвет текста рядом с иллюстрацией. Находим код текстового блока:","type":"unstyled","key":"640q6"},{"data":{"image":{"id":"602f60133ad6ee787c060eda"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fv27o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слева — код текстового блока HTML, справа — стили этого блока в CSS.","type":"unstyled","key":"csi8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Находим цвет шрифта:","type":"unstyled","key":"4i8t6"},{"data":{"image":{"id":"602f60136ce3da78042fc2dd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"59vu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажимаем на квадрат с цветом шрифта:","type":"unstyled","key":"27cao"},{"data":{"image":{"id":"602f6013bc490b6725ecd4da"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"81ugr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И меняем цвет на любой другой в палитре:","type":"unstyled","key":"f68cs"},{"data":{"image":{"id":"602f60185f462a3bfd2baf7d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ba4ap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте основные теги для SEO на вашем сайте","type":"header-two","key":"tl72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы разобрались в HTML-тегах, узнали, как отредактировать код сайта в браузере и ничего не сломать. Теперь давайте проведём мини-SEO-аудит сайта, используя только его страницу и выдачу поисковика.","type":"unstyled","key":"84p16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для тренировки и насмотренности попробуйте найти в коде своей страницы указанные ниже теги. Они обязательно должны быть на каждой странице сайта как самые важные для SEO-продвижения.","type":"unstyled","key":"37cl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Title","type":"header-three","key":"a57qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"<title>Заголовок страницы . Это самый важный тег для SEO, его нужно заполнять для каждой страницы сайта. Информация из title не показывается напрямую на странице, но отображается в названии страницы в верхней области браузера:","type":"unstyled","key":"vqe7"},{"data":{"image":{"id":"602f6024ffa2d86ae407d86e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2v77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И отражается в результатах поиска как заголовок:","type":"unstyled","key":"5oane"},{"data":{"image":{"id":"602f60236ce3da78042fe045"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8qks1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Найдём title на странице RU-CENTER. Открываем код сайта с помощью инструментов разработчика. Нажимаем Ctrl + F и вводим в поле поиска title. Вот и наш заголовок:","type":"unstyled","key":"efv9u"},{"data":{"image":{"id":"602f6023bc490b6725ecf19b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"23rsq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Description","type":"header-three","key":"22cl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё один важный тег для SEO. Отвечает за мета-описание страницы, выводится в сниппете поисковика:","type":"unstyled","key":"637qm"},{"data":{"image":{"id":"602f60236ce3da78042fe047"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"21bp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Воспользуемся поиском по коду и найдём нужный тег на странице RU-CENTER:","type":"unstyled","key":"2mqoc"},{"data":{"image":{"id":"602f60243ad6ee787c062d0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5ao2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"H1–H6","type":"header-three","key":"ahq6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"

–

. Эти теги прописываются в контейнере , их значения отображаются на странице и отвечают на логику заголовков документа. Мы писали об этих тегах выше. Самый важный из них — тег

, он должен быть на каждой странице сайта.","type":"unstyled","key":"4m24p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Найдём

на сайте RU-CENTER:","type":"unstyled","key":"89kji"},{"data":{"image":{"id":"602f60236ce3da78042fe046"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8jcho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Alt","type":"header-three","key":"7br64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Атрибут alt тега . Этот атрибут отвечает за альтернативный текст, описывающий изображение на сайте. При загрузке браузер получает сначала текстовую информацию о иллюстрации на сайте и уже после этого загружает само изображение.","type":"unstyled","key":"nqpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Найдём alt на странице RU-CENTER:","type":"unstyled","key":"43kg"},{"data":{"image":{"id":"602f60276ce3da78042fe5a5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f4kr3"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":12,"offset":81}],"inlineStyleRanges":[],"text":"Подробнее о тегах и основных ошибках SEO-продвижения сайта вы можете прочитать в нашей статье .","type":"unstyled","key":"9tr5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где бесплатно научат понимать код и программировать","type":"header-two","key":"aigev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье мы дали общую информацию об устройстве HTML-кода сайта. Чтобы окунуться в тему глубже, вы можете пройти специальные курсы. Сейчас их много, мы дадим список из нескольких самых популярных вариантов.","type":"unstyled","key":"5h5t8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Html Academy. Бесплатные задания после регистрации.","type":"ordered-list-item","key":"enhpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"«Нетология». Курсы: «Основы HTML и CSS», «Python-разработка для начинающих» и др.","type":"ordered-list-item","key":"810qm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Geekbrains. Интенсивы: «Основы программирования», «Python для начинающих» и др.","type":"ordered-list-item","key":"9bod3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Яндекс Практикум. Все курсы можно попробовать бесплатно, например: «Как стать веб-разработчиком», «Как стать Python-разработчиком» и др.","type":"ordered-list-item","key":"eit7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"«Смотри.Учись». Курс «PHP. Базовый курс» и др.","type":"ordered-list-item","key":"69bgk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Гарвард, Основы программирования. Видео-лекции на YouTube.","type":"ordered-list-item","key":"8pbe6"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":43,"offset":0}],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"}],"text":"Подписывайтесь на наш блог на сайте nic.ru ","type":"unstyled","key":"a8ea4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"O3Z41ClJPPqSy0cDDzn2"}],"entityMap":{"0":{"data":{"url":"https://www.nic.ru/info/blog/?ipartner=3939adv_id=120221_blog_site_code&utm_source=dzen&utm_medium=smm&utm_campaign=120221_blog_site_code"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.nic.ru/info/blog/","url":"https://www.nic.ru/info/blog/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.nic.ru/info/blog/","url":"https://www.nic.ru/info/blog/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://www.nic.ru/info/blog/seo-mistake/","url":"https://www.nic.ru/info/blog/seo-mistake/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://www.nic.ru/help/podpisat6sya-na-blog-ru-center_8720.html?ipartner=3939adv_id=120221_blog_site_code&utm_source=dzen&utm_medium=smm&utm_campaign=120221_blog_site_code"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}