{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый уважающий себя программист имеет в своем распоряжении множество инструментов для работы. С ними работа становится приятнее, а процесс разработки сокращается в несколько раз.","type":"unstyled","key":"7abvp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно, в прошлом уроке, вам показалось, что весь код, который мы поместили в документ превратился в нечитаемую простыню, - это действительно так. Представьте, что в нашем коде будет не 10-15 строк, а, скажем, 1 000, - работать с таким кодом стало бы невозможно.","type":"unstyled","key":"3nd4f"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":151}],"inlineStyleRanges":[{"length":9,"offset":119,"style":"BOLD"}],"text":"Для работы с кодом программисты используют специализированные текстовые редакторы. В своих статьях я буду использовать Notepad++. Скачать его можно по этой ссылке.","type":"unstyled","key":"cfai1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":29,"style":"BOLD"},{"length":8,"offset":81,"style":"BOLD"},{"length":9,"offset":128,"style":"BOLD"}],"text":"На прошлой лекции мы создали html-страницу. Давайте скопируем ее в новый каталог Learn 2 и откроем в профессиональном редакторе Notepad++.","type":"unstyled","key":"dlodd"},{"data":{"image":{"id":"5b8fcddef8555f00aa1b2f52"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bdhnt"},{"data":{"image":{"id":"5b8fcde5eb502200aba73be1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5iks9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Согласитесь - другое дело!","type":"unstyled","key":"6kait"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас не такой вид текста, проведем небольшую настройку редактора:","type":"unstyled","key":"dsdsj"},{"data":{"image":{"id":"5b8fecd147a3c100aa98fafe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"63tjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":"Это сильно поможет нам в будущем.","type":"unstyled","key":"3dri1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":168,"style":"BOLD"},{"length":1,"offset":171,"style":"BOLD"},{"length":2,"offset":174,"style":"BOLD"},{"length":1,"offset":177,"style":"BOLD"}],"text":"В прошлом уроке я не акцентировал внимание на то, что в программировании каждый символ имеет значение и, соответственно, для чего-то нужен. В нашем случае, это символы <, / и >. Если они будут находиться не там, где нужно, либо будут отсутствовать там, где нужны, наш код работать не будет. ","type":"unstyled","key":"1d279"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В таких случаях, как раз, помогает новый текстовый редактор. ","type":"unstyled","key":"55a8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдем к делу","type":"header-three","key":"69osm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":38,"style":"BOLD"}],"text":"Проведем эксперимент, - удалим символ > из тега начала абзаца:","type":"unstyled","key":"agicb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"Было:

","type":"unstyled","key":"7ut2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"Сделаем:

","type":"unstyled","key":"ftfht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"Стало:

","type":"unstyled","key":"3lder"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":22,"style":"BOLD"}],"text":"Сюда же начнем писать ce... И редактор выдает нам возможные варианты этой комбинации, отталкиваясь от написанного кода:","type":"unstyled","key":"68jor"},{"data":{"image":{"id":"5b8fd1b71345ee00a9c4b414"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4rqve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":51,"style":"BOLD"}],"text":"Редактор будто знал какой нам нужен параметр. Жмем Enter.","type":"unstyled","key":"2gccs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти подсказки я больше не буду упоминать, так как вы сами будете их видеть постоянно. ","type":"unstyled","key":"1n44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":80,"offset":0,"style":"ITALIC"}],"text":"Экспериментируйте с ними и постепенно вы заучите все параметры для каждого тега.","type":"blockquote","key":"5tmm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логика кода","type":"header-three","key":"dgl8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":19,"style":"ITALIC"}],"text":"Так же писать код (программировать) очень удобно логическими разделами. Каждый логический раздел должен начинаться с новой строки. Для визуального восприятия кода вставляют пустую строку, но, желательно, не более одной. ","type":"unstyled","key":"bi81d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В принципе, писать код можно в одну строку. Да, все, что мы написали в прошлом уроке можно поставить в одну строку. Попробуйте сделать это, - сможете ли вы прочитать свой код? Посмотрите на наш готовый код - каждый раздел страницы на отдельной строке.","type":"unstyled","key":"8hf6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С блоков в коде прыгнем на секторы страницы.","type":"unstyled","key":"24t3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сектор страницы","type":"header-three","key":"as3lo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":17,"style":"ITALIC"}],"text":"Сектор страницы (придумал эту фразу в процессе написания статьи) - это, например, шапка сайта, меню с левой стороны, подвал и все что только угодно, что может быть на странице.","type":"unstyled","key":"csq92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откроем наш редактор и разобьем нашу страницу на сектора:","type":"unstyled","key":"2o6jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"e7kmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок вкладки","type":"blockquote","key":"6tg77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9jdtq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4delo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1iqn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f1skr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"afs2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6sc3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"esoc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dkun3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"cto7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок страницы

","type":"blockquote","key":"2jfdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"eifm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст в абзаце. Текст для примера.

","type":"blockquote","key":"5932e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"41bpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"btr4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bbbra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не торопитесь проверять результат, посмотрим на код еще раз:","type":"unstyled","key":"2deol"},{"data":{"image":{"id":"5b8fd7628fb24300a953a04b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"63unc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание на структуру двух секторов в коде. Сохраняемся и идем смотреть результат:","type":"unstyled","key":"9ubga"},{"data":{"image":{"id":"5b8fd7fca9ab1900ab7680f2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cqhf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":211,"style":"BOLD"}],"text":"Казалось бы, ничего не изменилось, но на самом деле это не так. У каждого сектора теперь есть своя граница, по умолчанию она скрыта. Мы сможем увидеть границы секторов, используя интструментарий табличного тега . Изменяем в 7-й строке часть кода:","type":"unstyled","key":"2v2t3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":6,"offset":59,"style":"BOLD"},{"length":1,"offset":108,"style":"BOLD"}],"text":"

- просим наши сектора показать границу, border, и выбираем первый вариант ее начертания, 1.","type":"unstyled","key":"11jlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"Было:

","type":"unstyled","key":"3kqki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"Стало:

","type":"unstyled","key":"deuhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Идем смотреть результат:","type":"unstyled","key":"6g7qs"},{"data":{"image":{"id":"5b8fda2aeb502200aba73cd2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5o46p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы визуально наблюдаем границы созданных секторов. ","type":"unstyled","key":"5sm79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте придумаем как будет называться наша страница, придумаем текст для нее и создадим еще несколько секторов:","type":"unstyled","key":"fsl5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bf3r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Easy Dev - Создание сайтов от А до Я","type":"blockquote","key":"2i6br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2p9a4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"b0v65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a0gvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bqouh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"60jh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"17qk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b3nom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2k06q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8guvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bnq1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1p50q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4s4tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cjqam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2ndgr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Easy Dev ","type":"blockquote","key":"btvkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"ur0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Левый сектор ","type":"blockquote","key":"4bo16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"	","type":"blockquote","key":"4ce51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу! ","type":"blockquote","key":"2794q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"	","type":"blockquote","key":"7faj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Правый сектор ","type":"blockquote","key":"dojtf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"2h3tj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Подвал страницы Easy Dev ","type":"blockquote","key":"2scbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1g1dq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ba5b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"20jeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрим результат:","type":"unstyled","key":"61hsb"},{"data":{"image":{"id":"5b8fdd0e36233e00ad874cbe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9quti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы создали дополнительные секторы, аналогично имеющимся. ","type":"unstyled","key":"5lsbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Очень важно не запутаться в структуре тегов. ","type":"blockquote","key":"ba9aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":22,"style":"ITALIC"},{"length":18,"offset":104,"style":"BOLD"}],"text":"Сегодня мы размечаем (помните про разметку?) нашу страницу табличным методом или, как принято называть, табличной версткой.","type":"unstyled","key":"7cacq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":40,"style":"BOLD"},{"length":8,"offset":68,"style":"BOLD"},{"length":5,"offset":103,"style":"BOLD"},{"length":5,"offset":137,"style":"BOLD"},{"length":4,"offset":175,"style":"BOLD"},{"length":5,"offset":201,"style":"BOLD"}],"text":"Логично, тело таблицы открывается тегом и им же закрывается

. Далее мы открываем строку и так же тегом ее закрываем . После этого идут теги столбцов и так же закрываются .","type":"unstyled","key":"aenjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и в любой таблице, ячейка формируется при пересечении строки и столбца:","type":"unstyled","key":"u9of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9q94o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a9e9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейка","type":"blockquote","key":"b9sp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"842vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cghap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":97,"style":"BOLD"},{"length":1,"offset":137,"style":"BOLD"}],"text":"Полагаю, что вы заметили 3 объединенные ячейки вверху и внизу таблицы. Мы это сделали параметром colspan=\"3\" в 9 и 33 строках, где цифра 3 - это количество объединяемых ячеек в строке.","type":"unstyled","key":"1d3jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"Было: ","type":"unstyled","key":"8a24v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"Стало: ","type":"unstyled","key":"e8k2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":30,"style":"ITALIC"}],"text":"Выдыхайте, дальше копипастим (copy + paste): ","type":"unstyled","key":"2ku0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"84f9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Easy Dev - Создание сайтов от А до Я","type":"blockquote","key":"d1h0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cp3ub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8stpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d39in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"90kc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8r480"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cnc90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3ttko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7if0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9r0fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7njvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5ll4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6tu8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bbhuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5sm27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Easy Dev ","type":"blockquote","key":"a8tk7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"7quge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Левый сектор ","type":"blockquote","key":"7th59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"	","type":"blockquote","key":"1vok5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу! ","type":"blockquote","key":"8jcoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"	","type":"blockquote","key":"5gn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Правый сектор ","type":"blockquote","key":"1b6mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"20car"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Подвал страницы Easy Dev ","type":"blockquote","key":"84dev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"55qd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"562bh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"433pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрим результат:","type":"unstyled","key":"32s9u"},{"data":{"image":{"id":"5b8fe0babec38800abc50f2e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b6ir2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":165,"style":"ITALIC"},{"length":12,"offset":214,"style":"BOLD"},{"length":14,"offset":280,"style":"BOLD"},{"length":14,"offset":359,"style":"BOLD"}],"text":"Что изменилось: я визуально хочу показать структуру кода. Используя табличную верстку, мы жестко отделяем секторы друг от друга. Так же мы можем их кастомизировать (изменить под наши нужды), задавая высоту строки, height=\"200\" в 15-й строке кода, а так же указывать заливку фона, bgcolor=\"aqua\", в 16-й строке, и расположение объектов, относительно вертикали valing=\"top\", в 19-й строке.","type":"unstyled","key":"2hug7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":134,"offset":0,"style":"BOLD"}],"text":"С этого момента мы часто будем делать сноски на наш код по номеру строки в редакторе. Соблюдайте чистоту кода и тогда ошибок не будет.","type":"blockquote","key":"50hjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополним левый сектор содержимым, 18-я строка:","type":"unstyled","key":"85fuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Левый сектор

","type":"blockquote","key":"ff3rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст в левом секторе. Резервируем место.

","type":"blockquote","key":"5cs3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что получилось:","type":"unstyled","key":"efeit"},{"data":{"image":{"id":"5b8fe57cc4ee7000a94598a6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"absi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":153,"style":"ITALIC"}],"text":"Левый сектор увеличился в ширину, так как его содержимое требует большего места. Согласитесь, выглядит не очень. Вносим правки в три окрашенных столбца (добавляем параметры):","type":"unstyled","key":"41odq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"width=\"20%\" - первый столбец;","type":"unstyled","key":"59r9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"width=\"60%\" - второй столбец;","type":"unstyled","key":"6nrjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"width=\"20%\" - третий столбец;","type":"unstyled","key":"20h05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":131,"style":"ITALIC"}],"text":"Общая длина таблицы 100%. Мы пропорционально разбили таблицу для наилучшего отображения разметки. Эта длина теперь будет статичной (неизменной):","type":"unstyled","key":"91ud7"},{"data":{"image":{"id":"5b8fe710bd739500aacfa90b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"aakpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":146,"style":"BOLD"},{"length":18,"offset":151,"style":"ITALIC"}],"text":"Яркие цвета режут глаз, поэтому при помощи встроенного в браузер помощника подберем более приятные тона. Начнем с левого сектора, щелкнем по нему ПКМ (правая кнопка мыши) и вызовем инспектор объектов страницы:","type":"unstyled","key":"2jnqq"},{"data":{"image":{"id":"5b8fe818aa006a00ac5b0ec9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5nm6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откроется окно обзора этого сектора:","type":"unstyled","key":"2stuq"},{"data":{"image":{"id":"5b8fe89fc4ee7000a94598e5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1bmtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":32,"style":"BOLD"},{"length":5,"offset":71,"style":"BOLD"},{"length":13,"offset":140,"style":"BOLD"}],"text":"Определимся: большое окно - это разметка страницы, маленькое, справа - стили сектора или объекта. По умолчанию в окне стилей задан параметр element.style - его мы используем для своих целей. ","type":"unstyled","key":"2f557"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":28,"style":"BOLD"},{"length":3,"offset":100,"style":"BOLD"},{"length":5,"offset":177,"style":"BOLD"}],"text":"Помещаем туда курсор, пишем backgrond. Тут есть такие же подсказки, как в текстовом редакторе. Жмем Tab, чтобы указать значение параметра и выбираем подходящий цвет, у меня это beige.","type":"unstyled","key":"f5i5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":95,"style":"BOLD"},{"length":4,"offset":100,"style":"BOLD"}],"text":"Если вы после этого нажмете на иконку этого цвета, станет доступно окно выбора цвета в системе HEX и RGB:","type":"unstyled","key":"fkaof"},{"data":{"image":{"id":"5b8feab78f916100a9fcd38c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ek5hi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копируем название цвета или кода цвета, который понравился и возвращаемся в редактор:","type":"unstyled","key":"7b9b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"bgcolor=\"#7cbaec\" - 16-я строка;","type":"unstyled","key":"kho1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":66,"style":"ITALIC"},{"length":4,"offset":80,"style":"BOLD"}],"text":"То же самое проделываем с оставшимися двумя столбцами и подвалом (столбцы - это ):","type":"unstyled","key":"edbcp"},{"data":{"image":{"id":"5b8febc1c55e0500a9605609"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1s561"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот такой вид приобрела моя страница.","type":"unstyled","key":"8in5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подведем итоги","type":"header-three","key":"f49r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для чего нужен профессиональный текстовый редактор?","type":"unstyled","key":"av03d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":36,"style":"BOLD"}],"text":"Расскажите о некоторых возможностях Notepad++.","type":"unstyled","key":"6dboq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Табличная верстка - как формируется ячейка?","type":"unstyled","key":"a9n5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":23,"style":"BOLD"}],"text":"Напишите в комментарий HEX-код желтого цвета.","type":"unstyled","key":"uthe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подписывайтесь на канал Easy Dev","type":"header-two","key":"fol0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"133p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"slnY6busOAFKPos6zJtK"}],"entityMap":{"0":{"data":{"url":"https://notepad-plus-plus.org/download/v7.5.8.html"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}