Как открыть панель разработчика в Яндекс.Браузере

Модуль 2. Урок 1. Простые таблицы

Таблицы в HTML. Панель разработчика

Таблица имеет жесткую структуру: главным является тег <table>, внутри которого должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них - теги <td>, которые создают ячейки (столбцы).

table - таблица

table row – tr (ряд, строка)

tаblе data – td (данные таблицы, ячейка, столбец)

Простые таблицы

В простые таблицах нет операций по разделению и объединению ячеек – этим они отличаются от сложных таблиц.

Код таблицы из одной строки и одного столбца:

<table>
<tr>
<td>строка и один столбец без рамки </td><!—Таблица без рамки -->
</tr>
</table>

В браузере таблица будет такой (рис. 1).

Рис. 1. Таблица без рамки

Поскольку рамка таблицы не задана, то мы ее не увидим. Дело в том, что не все браузеры прорисовывают рамки таблиц. Поэтому, чтобы увидеть таблицу, надо в теге таблицы указать рамку <table border="1"> где 1-ширина рамки в пикселях (вы можете менять это значение на ваше усмотрение). Итак, наша таблица с рамкой будет такой:

<table border="1">
<tr>
<td>Одна строка и один столбец + рамка</td>
</tr>
</table>

Этот код в браузере (рис. 2).

Рис. 2. Таблица в одну клетку с рамкой

Еще пример:

<! --Это будет первый ряд (строка) таблицы: -->

<tr>

<td>Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<! --Это будет второй ряд таблицы: -->

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

<! --Это будет третий ряд таблицы: -->

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Так этот код будет выглядеть в браузере (рис. 3).

Рис. 3. Простая таблица из 3 строк и 3 столбцов

На рис. 4 схематично изображено правило построения простых таблиц.

Рис. 4. Алгоритм построения простых таблиц

Изменение размеров строк и ячеек

В таблицах для указания размеров ячеек можно использовать теги height (высота) и width (ширина). Например, <tr height="100">, где "100" размер высоты клеток таблицы в пикселях (если задать в процентах, то пишем "100%"). Аналогично <td width="200"> ширина клеток таблицы в пикселях или <td width="80%"> в процентах.
Пример таблицы с заданием размеров ее клеток:

<td

</tr>

<td

</tr>

</table>

В этой таблице ширина столбцов 200 пикселов, а высота строк 100 пикселов (рис. 5).

Рис. 5. Пример таблицы с указанием размеров ее ячеек

В следующем примере мы задаем размеры ячеек таблицы в процентах:

</tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

</table>

Здесь мы проценты ячеек исчисляли относительно общих размеров таблицы (640 на 480 px). В браузере такая таблица выглядит так:

Рис. 7. Размеры ячеек заданы относительно общих размеров таблицы

Внимание

Мы также можем задавать размеры таблицы относительно к размерам экрана монитора. Тогда вместо строчки <table border="1" height="480"> мы напишем <table border="1" height="100%"> и таблица заполнит весь экран ПК.

Цветные таблицы

Таблицы можно окрасить цветом, используя такие теги:
<table bgcolor="#цвет"> цвет таблицы;
<tr bgcolor="#цвет"> цвет строки;
<td bgcolor="#цвет"> цвет столбца.

Совет

Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите.

Пример задания цвета всей таблицы:

<td

</tr>

<td

</tr>

</table>

На рис. 8 показано как выглядит эта таблица в браузере.

Рис. 8. Пример задания цвета ячеек всей таблицы

Напомню, что цвет можно задать в модели RGB (через знак решетки) или словом:

Панель разработчика

В этой главе мы поговори о режим разработчика в Яндекс.Браузере, хотя эта панель (консоль) имеется и в других браузерах. Панель разработчика нужна для выполнения различных задач, например:

чтобы просмотреть код страницы и внести в него изменения;
панель отображает ошибки на веб странице;
в панели можно увидеть, как будет вести себя сайт на смартфонах, планшетах или нетбуках;
есть и другие возможности работы в режиме разработчика.

Как открыть панель разработчика в Яндекс.Браузере

Способ 1

Открываем какую-либо веб страницу в браузере (например, вашу таблицу) и нажимаем на клавишу F12 (рис. 9).

Рис. 9. В панели разработчика активна закладка HTML

Способ 2

Открыть консоль разработчика можно по-другому, нажав на иконку в виде трех полосок в верхней панели (рис. 10).

Рис. 10. Меню для настройки Яндекс.Браузера

Далее выбираем команду Дополнительно-Дополнительные инструменты-Инструменты разработчика.

Способ 3

Третий способ включить режим разработчика – вызвать контекстное меню для какого-либо объекта на веб-странице. На рис. 11. мы на на нижней правой клетке таблицы щелкнули правой кнопкой мыши, а затем в возникшем при этом меню выбрали строку «Исследовать элемент».

Рис. 11. Пример вызова панели разработчика из контекстного меню

Проверка адаптации сайта

Новый термин

Адаптивность сайта — это способность сайта правильно (хорошо) отображаться на разных устройствах, как на стационарных ПК, так и на различных мобильных устройствах.

Чтобы посмотреть, как сайт будет выглядеть на устройствах с различной диагональю экрана, нажмите на иконку в виде телефона в панели инструментов консоли (рис. 12).

Рис. 12. Кнопка вызова режима проверки адаптивности сайта

На рис. 13. мы видим, как на iPad будет смотреться наша таблица.

Рис. 13. Можно просмотреть таблицу на разных устройствах

Иконка в виде квадратика со стрелкой, расположенная в верхней панели, позволяет быстро перейти к коду определенного элемента на странице (рис. 14). При ее активации появляется специального вида курсор, которым следует указать на нужный вам элемент.

Рис. 14. Исследуется код ячейки 1, второй ряд

Вкладки панели разработчика

Рассмотрим назначение вкладок консоли:

Elements – вкладка отображает код HTML и позволяет увидеть классы элементов веб-страницы;
Console – здесь можно узнать, какие есть ошибки на веб-странице;
Sources – вкладка позволяет посмотреть подключенные файлы с CSS-кодом и JavaScript;
Network – здесь находится информация, использовав которую, можно увеличить быстродействие загрузки сайта;
Performance – инструмент позволяет проверить производительность сайта;
Memory – вкладка для исследования всех элементов сайта;
Application – вкладка открывает доступ к куки, кешу, сессиям и другим хранилищам;
Security – вкладка показывает информацию о сертификатах, обеспечивающих безопасность и надежность соединения;
Lighthouse – на вкладке отображается аудит сайта (производительность, удобство использования, SEO и др.).

Совет

Нажав на EN языке клавиши CTRL+ U вы можете в Панели разработчика увидеть код любого сайта, например, код вашей страницы ВКонтакте.

Вопросы и задания

Вопросы

Чем простые таблицы отличаются от сложных?
Как изменить размеры строк и ячеек таблицы?
Покажите умение создавать цветные таблицы
Как правильно задавать таблицу – в px или %?
Чем полезна Панель разработчика?
Чем адаптивный сайт отличается от не адаптивного?
Объясните назначение следующих тегов и атрибутов: tr, td, border, height, width, bgcolor

Задание

Создайте таблицу 2х2 с атрибутами (height 200 и width 400)
Задайте границу таблицы (border) в 2 пикселя
Измените цвет второго столбца <td bgcolor="#цвет">
В первую клетку 1-1 вставьте жирный текст (ваше имя) и центруйте его <th>
Во вторую клетку вставьте вашу фамилию

ПРИМЕРЫ ПРОСТЫХ ТАБЛИЦ

Простые таблицы

Повторите страницу по данному по образцу:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

<!DOCTYPE html>

<html>

<head>

<title>Задачник HTML </title>

</head>

<body>

<tr>

<td> ячейка 1 </td>

<td> ячейка 2 </td>

<td> ячейка 3 </td>

</tr>

<tr>

<td> ячейка 4 </td>

<td> ячейка 5 </td>

<td> ячейка 6 </td>

</tr>

<tr>

<td> ячейка 7 </td>

<td> ячейка 8 </td>

<td> ячейка 9 </td>

</tr>

</table>

</body>

</html>

Дата добавления: 2021-12-10; просмотров: 24; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!