Отметьте строки содержащие ошибки c точки зрения браузера
Обновлено: 02.07.2024
Задание 1 Вопрос- Что такое HTMLпрограмма Выберите один из 4 вариантов ответа- 1 Документ который по
Текст хорошо читается, если он структурирован, то есть, разбит на отдельные смысловые части и в нем применяется единый способ оформления элементов на всем протяжении документа.
Что такое HTML-программа ?
Выберите один из 4 вариантов ответа:
1 ) Документ, который показывает браузер
2 ) Интернетовская WEB-страница
3 ) Текст на языке HTML
4 ) Список тегов
Кто выполняет HTML-программу ?
Выберите один из 4 вариантов ответа:
Записывая на HTML абзац, Петя Умников между двумя соседними словами поставил пять пробелов.
Сколько пробелов увидит он в браузере ?
Выберите один из 4 вариантов ответа:
Какие команды способны изменить цвет фона документа.
Выберите несколько из 5 вариантов ответа:
1 ) команда <HTML > . < /HTML >
2 ) команда <BODY > . < /BODY >
3 ) команда <FONT > . < /FONT >
5 ) команда <BIG > . < /BIG >
Какие команды способны изменить цвет шрифта.
Выберите несколько из 5 вариантов ответа:
1 ) команда <HTML > . < /HTML >
2 ) команда <BODY > . < /BODY >
3 ) команда <FONT > . < /FONT >
5 ) команда <BIG > . < /BIG >
Какой командой выделяются небольшие цитаты и текстовые ссылки.
Выберите несколько из 2 вариантов ответа:
1 ) команда <CITE > . < /CITE >
2 ) команда <BLOCKQUOTE > . < /BLOCKQUOTE >
Какой командой выделяются большие многостроковые цитаты.
Выберите несколько из 2 вариантов ответа:
1 ) команда <CITE > . < /CITE >
2 ) команда <BLOCKQUOTE > . < /BLOCKQUOTE >
Каким способом можно выделить элементы текста.
Выберите несколько из 5 вариантов ответа:
1 ) размером шрифта
3 ) плотностью шрифта ( жирностью )
5 ) смещением от границы полей
Записывая на HTML свое имя, Иван Гавриков написал так:
Как покажет этот текст браузер ?
Выберите один из 4 вариантов ответа:
1 ) В две строки
2 ) В одну строку с двумя пробелами
3 ) В одну строку с одним пробелом
4 ) Не покажет вовсе
Какая из трех программ задает вывод текста в две строки:
Выберите один из 4 вариантов ответа:
Посмотрите документ. Отметьте ошибки в его оформлении.
Выберите несколько из 5 вариантов ответа:
1 ) Цветовое решение документа
2 ) Уровень заголовка
3 ) Выделение больших фрагментов размером шрифта и жирностью
4 ) Неверно оформлена цитата
5 ) Неверно оформлен источник цитаты
Какая программа формирует список:
Выберите один из 3 вариантов ответа:
Какая программа формирует список:
Выберите один из 4 вариантов ответа:
Отметьте строки, содержащие ошибки c точки зрения браузера.
Выберите несколько из 7 вариантов ответа:
Запишите имя команды ( без символов “< >”), при помощи которой можно увеличить размер шрифта.
Запишите ответ: __________________________________________
Запишите имя команды ( без символов “< >”), при помощи которой можно уменьшить размер шрифта.
Запишите ответ: __________________________________________
Запишите имя атрибута команды <FONT > , при помощи которой можно изменить цвет шрифта.
Запишите ответ: __________________________________________
Запишите имя команды, предназначенной для усиления элементов текста ( как правило, полужирным шрифтом ) .
Запишите ответ: __________________________________________
При помощи какой команды ( без символов “< >”), можно у абзацев делать красные строки и выводить на экран таблицы, схемы и другую сложную информацию.
Запишите ответ: __________________________________________
При помощи какого атрибута команды <P > можно изменить выравнивание абзаца по горизонтали.
Запишите ответ: __________________________________________
Какой командой можно отцентрировать сразу несколько абзацев ( без символов “< >”).
Запишите ответ: __________________________________________
Запишите имя атрибута команды <P > и значение параметра для выравнивания абзаца по центру.
Запишите ответ: __________________________________________
Запишите имя атрибута команды <P > и значение параметра для выравнивания абзаца по правому краю.
Запишите ответ: __________________________________________
Как вывести этот символ на экран браузера: пробел
Запишите ответ: __________________________________________
Запишите имя команды для задания маркированного списка ( без символов “< >”).
Запишите ответ: __________________________________________
Запишите имя команды для задания нумерованного списка ( без символов “< >”).
Запишите ответ: __________________________________________
Запишите имя атрибута для задания вида метки списка
Запишите ответ: __________________________________________
Запишите имя команды для задания гиперссылки ( без символов “< >”).
Запишите ответ: __________________________________________
Запишите имя атрибута команды <A > для задания гиперссылки
Запишите ответ: __________________________________________
Запишите имя атрибута команды <A > для задания метки внутри программы
Запишите ответ: __________________________________________
Узнать стоимость написания работы -->
До сих пор разговор шел о том, как должен выглядеть документ на экране пользователя. Это, конечно, очень важно. Но не менее важную роль в непростом труде программиста играет внешний вид самой программы.
Записывать программу нужно так, чтобы смысл ее конструкций был максимально понятен. Для такой рекомендации есть ряд веских причин.
Как записывать текст программы
Не записывайте HTML-программы со слишком длинными строками. Для их просмотра приходится применять горизонтальную прокрутку окна редактора, а это очень неудобно. Любая строка должна помещаться на экране текстового редактора.
Старайтесь записывать теги на отдельных строках так, чтобы по записи можно было определить вложение команд друг в друга. Рекомендация достигается использованием строчного смещения записи тега вправо на 2 позиции по отношению к внешнему блоку.
Замечание
Если команда (от начального до конечного тега) небольшая, то ее можно записывать в одной строке вместе с тегами.
- для документирования сложных языковых конструкций;
- для временного отключения группы команд при отладке.
Программирование списков
Продолжим рассмотрение команд, которые помогают делать текст на экране красивым.
HTML допускает задание в документах списков двух типов:
- Какой он, этот Слонопотам?
- Неужели очень злой?
- Идет ли он на свист? И если идет, то зачем?
- Любит ли он поросят или нет?
- И как он их любит?
- Хамите.
- Хо-хо!
- Знаменито.
- Мрачный.
- Мрак.
- Жуть.
Маркированный список
Каждый элемент этого списка браузер предваряет меткой в начале строки, а сами строки смещает вправо.
Команда UL , задающая маркированный список, имеет следующую структуру:
Замечание
Вид метки, которую браузер помещает перед каждым элементом списка, настраивается при помощи атрибута type . Этот атрибут может отсутствовать или принимать одно из трех значений:
Нумерованный список
В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом.
Нумерованный список задается при помощи команды <OL> .
Замечание
Вид номера определяется значением атрибута type .
- Нумерация выполняется арабскими цифрами (1, 2, 3. )
- Нумерация выполняется арабскими цифрами (1, 2, 3. )
- Нумерация выполняется прописными буквами (A, B, C. )
- Нумерация выполняется строчными буквами (a, b, c. )
- Нумерация выполняется большими римскими цифрами (I, II, III. )
- Нумерация выполняется малыми римскими цифрами (i, ii, iii. )
Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n . Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).
Замечание
Вложенные списки
Элемент любого списка сам может быть списком. Уровень вложенности в принципе не ограничен, и это позволяет с успехом использовать списки для отображения сложных иерархических структур.
Пример 1 Программа (вложенные маркированные списки)
Пример 2 Программа (вложенные нумерованные списки)
Пример 3 Программа (вложенные смешанные списки)
В коде HTML, записывая абзац, Вы между двумя словами поставили пять пробелов. Сколько пробелов Вы увидите в браузере?
Вопрос №3 (ID - 227) Тип: Закрытая форма: верен только один вариант из всех
Текст на HTML выглядит следующим образом:
Как покажет этот текст браузер?
В одну строку с двумя пробелами
В одну строку с одним пробелом
Не покажет вовсе
Вопрос №4 (ID - 228) Тип: Закрытая форма: верно несколько вариантов из всех
Какие из программ задают вывод текста в две строки? (т.е. слова должны быть в разных строках)
Пришла <BR> осень.
Вопрос №5 (ID - 229) Тип: Закрытая форма: верен только один вариант из всех
Какой тег способен изменить цвет фона всего документа?
Вопрос №6 (ID - 230) Тип: Закрытая форма: верно несколько вариантов из всех
Какие теги способны изменить цвет шрифта?
Вопрос №7 (ID - 231) Тип: Закрытая форма: верен только один вариант из всех
Каким тегом выделяются небольшие цитаты и текстовые ссылки?
<BLOCKQUOTE>. </BLOCKQUOTE>
Вопрос №8 (ID - 233) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег (без символов "< >"), при помощи которого можно увеличить размер шрифта.
Правильные ответы:(через запятую): big
Вопрос №9 (ID - 234) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег (без символов "< >"), при помощи которого можно уменьшить размер шрифта
Правильные ответы:(через запятую): small
Вопрос №10 (ID - 235) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег, предназначенный для усиления элементов текста (как правило, полужирным шрифтом). (без символов "< >")
Правильные ответы:(через запятую): b, strong
Вопрос №11 (ID - 237) Тип: Открытая форма: безвариантный тип вопроса
При помощи какого атрибута тега <P> можно изменить выравнивание абзаца по горизонтали?
Правильные ответы:(через запятую): align
Вопрос №12 (ID - 238) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута "align" тега <P> для выравнивания абзаца по центру.
Правильные ответы:(через запятую): center
Вопрос №13 (ID - 239) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута "align" тега <P> для выравнивания абзаца по правому краю.
Правильные ответы:(через запятую): right, rigth
Вопрос №14 (ID - 240) Тип: Открытая форма: безвариантный тип вопроса
Как вывести символ "<" на экран браузера (чтобы он не воспринимался браузером как элемент тега)?
Правильные ответы:(через запятую): <, <
Вопрос №15 (ID - 241) Тип: Открытая форма: безвариантный тип вопроса
Как вывести символ ">" на экран браузера (чтобы он не воспринимался браузером как элемент тега)?
Правильные ответы:(через запятую): >, >
Вопрос №16 (ID - 242) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для создания маркированного списка(без символов "< >")?
Правильные ответы:(через запятую): ul
Вопрос №17 (ID - 243) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для создания нумерованного списка(без символов "< >")?
Правильные ответы:(через запятую): ol
Вопрос №18 (ID - 244) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута "align" тега <P> для выравнивания абзаца по левому краю.
Правильные ответы:(через запятую): left
Вопрос №19 (ID - 245) Тип: Закрытая форма: верен только один вариант из всех
Какая из программ формирует список следующего вида:
Курсовая работа
<UL type=circle>
<UL type=square>
Вопрос №20 (ID - 246) Тип: Закрытая форма: верен только один вариант из всех
Какая программа формирует список следующего типа:
Если кажется, что работу сделать легко, это непременно будет трудно.
Если на вид она трудна, значит, выполнить ее абсолютно невозможно.
<UL type=i start=5>
<OL type=i start=5>
<OL type=i start=v>
Вопрос №21 (ID - 247) Тип: Закрытая форма: верен только один вариант из всех
Какая программа формирует список следующего типа:
Закон избирательного тяготения. Предмет упадет таким образом, чтобы нанести наибольший ущерб.
Следствие Дженнинга. Вероятность того, что бутерброд упадет маслом вниз прямо пропорциональна стоимости ковра.
Следствие Клипштейна. Уронят самую хрупкую деталь.
Любой предмет, если его уронят, закатывается в самый недоступный угол.
Следствие. Закатываясь в угол, он ударит вас по пальцам ноги.
<OL type=1 start=1>
<OL type=1 start=1>
<UL type=square>
<UL type=square>
<UL type=1 start=1>
<UL type=1 start=1>
<OL type=square>
<OL type=square>
Вопрос №22 (ID - 248) Тип: Закрытая форма: верно несколько вариантов из всех
Отметьте строки, содержащие ошибки c точки зрения браузера.
Вопрос №23 (ID - 249) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для создания гипертекста (ссылок)? (без символов "<>")
Правильные ответы:(через запятую): a, а
Вопрос №24 (ID - 250) Тип: Открытая форма: безвариантный тип вопроса
Запишите имя атрибута тега <A> для задания URL-адреса гиперссылки
Правильные ответы:(через запятую): href
Вопрос №25 (ID - 251) Тип: Закрытая форма: верен только один вариант из всех
В одном каталоге находятся три файла со следующим HTML-кодом:
Какие из следующих утверждений верны?
Ссылки не будут видны на экране
Ссылки заданы правильно
В файле 01.htm должен быть тег <A name=волк>
В файле 02.htm должен быть тег <A name=курица>
Вопрос №26 (ID - 252) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для внедрения графических объектов(файлов рисунков) на страницу? (без символов "<>")
Правильные ответы:(через запятую): img
Вопрос №27 (ID - 253) Тип: Открытая форма: безвариантный тип вопроса
Какой атрибут тега <IMG> задает URL-адрес файла-рисунка?
Правильные ответы:(через запятую): src
Вопрос №28 (ID - 254) Тип: Открытая форма: безвариантный тип вопроса
Какой атрибут тега <IMG> задает надпись (всплывающую подсказку) для рисунка?
Правильные ответы:(через запятую): alt
Вопрос №29 (ID - 255) Тип: Открытая форма: безвариантный тип вопроса
Какой атрибут тега <IMG> задает толщину рамки рисунка?
Правильные ответы:(через запятую): border
Вопрос №30 (ID - 256) Тип: Закрытая форма: верен только один вариант из всех
Какой графический формат можно использовать для передачи высококачественных фотографий?
Вопрос №31 (ID - 257) Тип: Закрытая форма: верен только один вариант из всех
Файл какого графического формата может содержать мультипликацию?
Вопрос №32 (ID - 258) Тип: Закрытая форма: верен только один вариант из всех
Какие атрибуты тега <IMG> заданы для отображения следующего рисунка:
Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка. Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.
"Теплая струйка" Н.Сладко
<img src="but.jpg" align="left" border=0 alt="">
<img src="but.jpg" align="middle" border=0 alt="Бабочка">
<img src="but.jpg" align="top" border=1 alt="Бабочка">
<img src="but.jpg" align="bottom" border=0 alt="">
<img src="but.jpg" align="left" border=0 alt="Бабочка">
<img src="but.jpg" align="middle" border=0 alt="">
Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.
Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.
Как открыть консоль на разных браузерах
Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».
Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.
Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».
В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.
Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.
Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».
Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.
Какие вкладки есть в консоли и за что они отвечают
Консоль каждого браузера содержит практически идентичные вкладки с одним и тем же функционалом, поэтому рассмотрим каждый из блоков на примере веб-обозревателя Google Chrome.
Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.
В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.
Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.
И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.
На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.
Elements
Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.
Console
Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.
Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.
Также в данной консоли мы можем посмотреть информацию об ошибках плагина, воспользоваться поиском по слову или фразе, а также установить различные фильтры на отображаемую информацию.
Sources
Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.
Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.
Network
Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.
Performance
Панель отображает таймлайн использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков будут доступны подробные данные о выполнении кода и всем жизненном цикле страницы.
Memory
В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.
Application
Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.
Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.
Security
Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
- проверке сертификата – подтвердил ли сайт свою подлинность TLS;
- tls-соединении – использует ли сайт современные безопасные протоколы;
- безопасности второстепенных источников.
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
- Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
- TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
- TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
- (unknown):Scripterror. Обозначает ошибку скрипта.
- TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
- TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
- Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
- TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
- Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
- ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!
Читайте также: