31 авг 2022 · 11:26
{"document": [{"text": [{"type": "string", "attributes": {"bold": true}, "string": "Модуль 2. Урок 1. Простые таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Таблицы в HTML. Панель разработчика"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Таблица имеет жесткую структуру: главным является тег <table>, внутри которого должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них - теги <td>, которые создают ячейки (столбцы). "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "table - таблица"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "tablerow – tr (ряд, строка)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "tаblе data – td (данные таблицы, ячейка, столбец)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Простые таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В простые таблицах нет операций по разделению и объединению ячеек – этим они отличаются от сложных таблиц. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Код таблицы из одной строки и одного столбца:"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "<table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>строка и один столбец без рамки </td><! —Таблица без рамки -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В браузере таблица будет такой (рис. 1)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "1.png", "filesize": 8437, "height": 114, "pic_id": 142030, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/1_gkCs53m.jpeg", "width": 318}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 1. "}, {"type": "string", "attributes": {}, "string": "Таблица без рамки"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Поскольку рамка таблицы не задана, то мы ее не увидим. Дело в том, что не все браузеры прорисовывают рамки таблиц. Поэтому, чтобы увидеть таблицу, надо в теге таблицы указать рамку "}, {"type": "string", "attributes": {"bold": true}, "string": "<table border= «1» >"}, {"type": "string", "attributes": {}, "string": " где 1-ширина рамки в пикселях (вы можете менять это значение на ваше усмотрение). Итак, наша таблица с рамкой будет такой:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Одна строка и один столбец + рамка</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Этот код в браузере (рис. 2)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "2.png", "filesize": 8440, "height": 118, "pic_id": 142031, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/2_IPCK0UE.jpeg", "width": 312}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 2. "}, {"type": "string", "attributes": {}, "string": "Таблица в одну клетку с рамкой"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Еще пример:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» ><! —Толщина рамки таблицы равна 1 px -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! --Это будет первый ряд (строка) таблицы: -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 1</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 2</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 3</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! --Это будет второй ряд таблицы: -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 4</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 5</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 6</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! --Это будет третий ряд таблицы: -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 7</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 8</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>Ячейка 9</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Так этот код будет выглядеть в браузере (рис. 3)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "3.png", "filesize": 6073, "height": 184, "pic_id": 142032, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/3_heeccR2.jpeg", "width": 303}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 3."}, {"type": "string", "attributes": {}, "string": " Простая таблица из 3 строк и 3 столбцов"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На рис. 4 схематично изображено правило построения простых таблиц."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "4.jpg", "filesize": 24143, "height": 282, "pic_id": 142033, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/4_pefuKSQ.jpeg", "width": 520}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 4."}, {"type": "string", "attributes": {}, "string": " Алгоритм построения простых таблиц"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Изменение размеров строк и ячеек"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В таблицах для указания размеров ячеек можно использовать теги "}, {"type": "string", "attributes": {"bold": true}, "string": "height (высота)"}, {"type": "string", "attributes": {}, "string": " и "}, {"type": "string", "attributes": {"bold": true}, "string": "width (ширина)."}, {"type": "string", "attributes": {}, "string": " Например, "}, {"type": "string", "attributes": {"bold": true}, "string": "<tr height= «100» >, "}, {"type": "string", "attributes": {}, "string": "где «100» размер высоты клеток таблицы в пикселях (если задать в процентах, то пишем «100%»). Аналогично "}, {"type": "string", "attributes": {"bold": true}, "string": "<td width= «200» >"}, {"type": "string", "attributes": {}, "string": " ширина клеток таблицы в пикселях или "}, {"type": "string", "attributes": {"bold": true}, "string": "<td width= «80%» >"}, {"type": "string", "attributes": {}, "string": " в процентах."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример таблицы с заданием размеров ее клеток:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «100» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «200» ></td><td width= «200» ></td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «100» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «200» ></td><td width= «200» ></td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В этой таблице ширина столбцов 200 пикселов, а высота строк 100 пикселов (рис. 5)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "5.png", "filesize": 18905, "height": 322, "pic_id": 142034, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/5_5p6WOJg.jpeg", "width": 464}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 5."}, {"type": "string", "attributes": {}, "string": " Пример таблицы с указанием размеров ее ячеек"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В следующем примере мы задаем размеры ячеек таблицы в процентах:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» width= «640» height= «480» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «25%» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «15%» > строка1 ячейка1</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «25%» >строка1 ячейка2</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «50%» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>строка2 ячейка1</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>строка2 ячейка2</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь мы проценты ячеек исчисляли относительно общих размеров таблицы (640 на 480 px). В браузере такая таблица выглядит так:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "6.png", "filesize": 21107, "height": 705, "pic_id": 142043, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/6.jpeg", "width": 936}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 7. "}, {"type": "string", "attributes": {}, "string": "Размеры ячеек заданы относительно общих размеров таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Внимание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мы также можем задавать размеры таблицы относительно к размерам экрана монитора. Тогда вместо строчки "}, {"type": "string", "attributes": {"bold": true}, "string": "<table border= «1» width= «640» height= «480» >"}, {"type": "string", "attributes": {}, "string": " мы напишем "}, {"type": "string", "attributes": {"bold": true}, "string": "<table border= «1» width= «100%» height= «100%» >"}, {"type": "string", "attributes": {}, "string": " и таблица заполнит весь экран ПК."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Цветные таблицы"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Таблицы можно окрасить цветом, используя такие теги:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"bold": true}, "string": "<table bgcolor= «#цвет» >"}, {"type": "string", "attributes": {}, "string": " цвет таблицы;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"bold": true}, "string": "<tr bgcolor= «#цвет» >"}, {"type": "string", "attributes": {}, "string": " цвет строки;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"bold": true}, "string": "<td bgcolor= «#цвет» >"}, {"type": "string", "attributes": {}, "string": " цвет столбца."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Совет"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример задания цвета всей таблицы:"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» bgcolor= «#0000FF» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «100» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «200» ></td><td width= «200» ></td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «100» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «200» ></td><td width= «200» ></td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На рис. 8 показано как выглядит эта таблица в браузере."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "7.png", "filesize": 19116, "height": 325, "pic_id": 142046, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/7_b5tJIba.jpeg", "width": 461}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 8."}, {"type": "string", "attributes": {}, "string": " Пример задания цвета ячеек всей таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Напомню, что цвет можно задать в модели RGB (через знак решетки) или словом:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "8.png", "filesize": 224257, "height": 530, "pic_id": 142045, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/8_8YSGrhj.jpeg", "width": 812}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Панель разработчика"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В этой главе мы поговори о режим разработчика в Яндекс. Браузере, хотя эта панель (консоль) имеется и в других браузерах. Панель разработчика нужна для выполнения различных задач, например:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "чтобы просмотреть код страницы и внести в него изменения;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "панель отображает ошибки на веб странице;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "в панели можно увидеть, как будет вести себя сайт на смартфонах, планшетах или нетбуках;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "есть и другие возможности работы в режиме разработчика. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Как открыть панель разработчика в Яндекс. Браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Способ 1"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Открываем какую-либо веб страницу в браузере (например, вашу таблицу) и нажимаем на клавишу "}, {"type": "string", "attributes": {"bold": true}, "string": "F12 "}, {"type": "string", "attributes": {}, "string": "(рис. 9)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "9.png", "filesize": 54253, "height": 444, "pic_id": 142040, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/9.jpeg", "width": 650}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 9."}, {"type": "string", "attributes": {}, "string": " В панели разработчика активна закладка "}, {"type": "string", "attributes": {"bold": true}, "string": "HTML"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Способ 2"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Открыть консоль разработчика можно по-другому, нажав на иконку в виде трех полосок в верхней панели (рис. 10)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "10.png", "filesize": 7020, "height": 130, "pic_id": 142039, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/10.jpeg", "width": 231}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 10."}, {"type": "string", "attributes": {}, "string": " Меню для настройки Яндекс. Браузера"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Далее выбираем команду "}, {"type": "string", "attributes": {"bold": true}, "string": "Дополнительно-Дополнительные инструменты-Инструменты разработчика."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Способ 3"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Третий способ включить режим разработчика – вызвать контекстное меню для какого-либо объекта на веб-странице. На рис. 11. мы на на нижней правой клетке таблицы щелкнули правой кнопкой мыши, а затем в возникшем при этом меню выбрали строку «"}, {"type": "string", "attributes": {"bold": true}, "string": "Исследовать элемент"}, {"type": "string", "attributes": {}, "string": "»."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "11.png", "filesize": 28357, "height": 251, "pic_id": 142038, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/11.jpeg", "width": 650}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 11. "}, {"type": "string", "attributes": {}, "string": "Пример вызова панели разработчика из контекстного меню "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Проверка адаптации сайта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Адаптивность сайта"}, {"type": "string", "attributes": {}, "string": " — это способность сайта правильно (хорошо) отображаться на разных устройствах, как на стационарных ПК, так и на различных мобильных устройствах."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы посмотреть, как сайт будет выглядеть на устройствах с различной диагональю экрана, нажмите на иконку в виде телефона в панели инструментов консоли (рис. 12)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "12.jpg", "filesize": 5690, "height": 110, "pic_id": 142037, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/12.jpeg", "width": 230}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 12. "}, {"type": "string", "attributes": {}, "string": "Кнопка вызова режима проверки адаптивности сайта"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На рис. 13. мы видим, как на iPad будет смотреться наша таблица."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "13.png", "filesize": 13071, "height": 389, "pic_id": 142036, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/13.jpeg", "width": 395}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 13. "}, {"type": "string", "attributes": {}, "string": "Можно просмотреть таблицу на разных устройствах"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Иконка в виде квадратика со стрелкой, расположенная в верхней панели, позволяет быстро перейти к коду определенного элемента на странице (рис. 14). При ее активации появляется специального вида курсор, которым следует указать на нужный вам элемент."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "14.png", "filesize": 41852, "height": 346, "pic_id": 142035, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/14.jpeg", "width": 640}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 14."}, {"type": "string", "attributes": {}, "string": " Исследуется код ячейки 1, второй ряд"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вкладки панели разработчика"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Рассмотрим назначение вкладок консоли:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Elements"}, {"type": "string", "attributes": {}, "string": " – вкладка отображает код HTML и позволяет увидеть классы элементов веб-страницы;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Console"}, {"type": "string", "attributes": {}, "string": " – здесь можно узнать, какие есть ошибки на веб-странице;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Sources"}, {"type": "string", "attributes": {}, "string": " – вкладка позволяет посмотреть подключенные файлы с CSS-кодом и JavaScript;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Network "}, {"type": "string", "attributes": {}, "string": "– здесь находится информация, использовав которую, можно увеличить быстродействие загрузки сайта;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Performance"}, {"type": "string", "attributes": {}, "string": " – инструмент позволяет проверить производительность сайта;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Memory "}, {"type": "string", "attributes": {}, "string": "– вкладка для исследования всех элементов сайта;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Application"}, {"type": "string", "attributes": {}, "string": " – вкладка открывает доступ к куки, кешу, сессиям и другим хранилищам;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Security"}, {"type": "string", "attributes": {}, "string": " – вкладка показывает информацию о сертификатах, обеспечивающих безопасность и надежность соединения;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Lighthouse"}, {"type": "string", "attributes": {}, "string": " – на вкладке отображается аудит сайта (производительность, удобство использования, SEO и др.). "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Совет"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Нажав на EN языке клавиши "}, {"type": "string", "attributes": {"bold": true}, "string": "CTRL+U"}, {"type": "string", "attributes": {}, "string": " вы можете в "}, {"type": "string", "attributes": {"bold": true}, "string": "Панели разработчика"}, {"type": "string", "attributes": {}, "string": " увидеть код любого сайта, например, код вашей страницы ВКонтакте."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Вопросы и задания "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вопросы"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Чем простые таблицы отличаются от сложных?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Как изменить размеры строк и ячеек таблицы?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Покажите умение создавать цветные таблицы"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Как правильно задавать таблицу – в px или %?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Чем полезна Панель разработчика?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Чем адаптивный сайт отличается от не адаптивного? "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Объясните назначение следующих тегов и атрибутов: tr, td, border, height, width, bgcolor"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Задание"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Создайте таблицу 2х2 с атрибутами (height 200 и width 400) "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Задайте границу таблицы (border) в 2 пикселя"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Измените цвет второго столбца <td bgcolor= «#цвет» > "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "В первую клетку 1-1 вставьте жирный текст (ваше имя) и центруйте его <th> "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Во вторую клетку вставьте вашу фамилию"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "ПРИМЕРЫ ПРОСТЫХ ТАБЛИЦ"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "1. Простые таблицы"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Повторите страницу по данному по образцу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 1 | ячейка 2 | ячейка 3"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 4 | ячейка 5 | ячейка 6"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 7 | ячейка 8 | ячейка 9"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Задачник HTML </title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 1 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 2 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 3 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 4 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 5 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 6 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 7 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 8 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 9 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "2. Добавим заголовки, атрибуты width (400) и height (200)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Повторите страницу по данному по образцу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 1 | ячейка 2 | ячейка 3"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 4 | ячейка 5 | ячейка 6"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| ячейка 7 | ячейка 8 | ячейка 9"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Задачник HTML </title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» cellpadding= «0» width= «400» height= «200» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 1 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 2 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 3 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 4 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 5 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 6 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 7 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 8 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 9 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "3. Добавим выравнивание align"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Повторите страницу по данному по образцу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Задачник HTML </title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» cellpadding= «0» width= «400» height= «200» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 1 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 2 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th> ячейка 3 </th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td align= «right» > ячейка 4 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 5 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 6 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td> ячейка 7 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td align= «center» > ячейка 8 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td align= «right» > ячейка 9 </td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "4. Закрепление"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Повторите страницу по данному по образцу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| номер | тег | значение"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 1 | p | абзац"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 2 | a | ссылка"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 3 | b | жирный текст"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 4 | i | курсив"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 5 | table | таблица"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 6 | tr | ряд таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 7 | td | ячейка таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "| 8 | th | заголовок таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Задачник HTML</title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» width= «400» height= «200» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th>номер</th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th>тег</th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<th>значение</th>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>1</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>p</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>абзац</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>2</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>a</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>ссылка</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>3</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>b</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>жирный текст</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>4</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>i</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>курсив</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>5</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>table</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>таблица</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>6</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>tr</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>ряд таблицы</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>7</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>td</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>ячейка таблицы</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>8</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>th</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td>заголовок таблицы</td>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "https://taplink.cc/vladimir_vn", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "полисайт.png", "filesize": 93305, "height": 383, "pic_id": 142047, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/31/%D0%BF%D0%BE%D0%BB%D0%B8%D1%81%D0%B0%D0%B9%D1%82.jpeg", "width": 293}}], "attributes": []}], "selectedRange": [14487, 14488]}
Комментарии 0