Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Мы знаем, что кроссбраузерность и адаптивность отвечают за внешний вид сайта на разных устройствах и браузерах. Настало время поговорить о языках, с помощью которых браузеры выводят информацию и стилизуют ее. Для этого в веб-разработке используется два основных языка:

2 <ul><li>HTML</li>

3 <li>CSS</li>

4 </ul>В этом уроке разберем, за что отвечает каждый из языков, и как с помощью встроенных в браузер инструментов увидеть и протестировать код на этих языках.

5 <h2>Языки HTML и CSS</h2>

6 Посмотрите на страницу, на которой вы читаете этот текст. Вы видите сам текст, иногда появляются изображения, в правой панели располагаются элементы управления.

7 Чтобы браузер мог вывести эти данные, используетсяязык HTML- Hyper Text Markup Language или язык разметки гипертекста. Про понятие гипертекста мы поговорим в одном из следующих уроков, а пока остановимся наязыке разметки. В этом понятии нет словосочетания "язык программирования", так как HTML предназначен для разметки данных.

8 Приведем пример:

9 Это простой пример HTML разметки, в которой есть:

10 <ol><li>Заголовок первого уровня с текстом "Хекслет - онлайн-школа программирования"</li>

11 <li>Один параграф с текстом "В нашей школе вы можете изучить:"</li>

12 <li>Список из пяти элементов</li>

13 </ol>Основа всей разметки - текст. Чтобы браузер мог отличить обычный текст от заголовка или списка, используются специальные конструкции -теги. Например, чтобы сказать браузеру, что нужно обработать текст как заголовок первого уровня, используется тег <h1></h1>.

14 Подробнее про теги, их роль и применение вы можете узнать из бесплатного курса<a>Основы современной верстки</a>.

15 HTML не выводит данные и ничего с ними не делает. Он лишь указывает браузеру или другой программе, как обработать данные. Если у браузера нет правил для вывода заголовков, то он их и не отобразит.

16 За то, как будет выведен элемент на странице, отвечаетязык CSS- Cascading Style Sheets или каскадные таблицы стилей. Это обычный набор правил. Они говорят браузеру о том, какого размера будет элемент, какой у него будет цвет, шрифт, заливка и так далее.

17 У каждого браузера свой начальный набор таких стилей для каждого из элементов. У стандартных стилей нет четких правил, поэтому каждый браузер может выводить одинаковые элементы по-разному. По этой причине, а также из-за поддержки новых правил тестировщику важно помнить о кроссбраузерности.

18 Если хотите узнать больше о CSS и его особенности, можете пройти тот же курс<a>Основы современной верстки</a>. В нем помимо HTML есть основы работы с CSS.

19 Разберемся, как можно проверить верстку и увидеть разметку и стили на любом сайте.

20 <h2>Инструменты разработчика</h2>

21 У всех браузеров есть встроенные веб-инспекторы, которые еще называются инструментами разработчика. Хоть это и инструменты разработчика, но функционал очень полезен и для тестировщиков. Так выглядят базовые моменты, которые можно сделать с помощью инструмента разработчика:

22 <ul><li>Проверить HTML и CSS любой страницы</li>

23 <li>Временно добавить новые блоки или стили без необходимости разворачивания сайта на своем компьютере</li>

24 <li>Протестировать JavaScript код, найти в нем ошибки или вывести промежуточные результаты в специальную консоль</li>

25 <li>Получить данные обо всех запросах, которые происходят на сайте. Узнать, какие данные на сайт приходят и какие данные куда уходят</li>

26 <li>Проверить скорость загрузки страницы. Найти скрипты или запросы, которые долго выполняются</li>

27 <li>Протестировать адаптивность сайта на самых разных разрешениях</li>

28 </ul>Разберем некоторые функции на примере инструментаDeveloper Tools, который доступен в браузере Firefox:

29 Чтобы открыть инструмент разработчика, используется один из двух путей:

30 <ol><li>Навести курсор мыши на любой элемент страницы, кликнуть правой кнопкой и выбрать пункт Inspect. В русской локализации "Посмотреть код элемента" или "Исследовать Элемент"</li>

31 <li>Использовать комбинацию клавиш Ctrl + Shift + I или клавишу F12</li>

32 </ol>После открытия инструмента разработчика на экране появятся вкладки. Разберем, что в них можно делать.

33 <h3>Вкладки для работы с HTML и CSS</h3>

34 Первая вкладка, которая открывается по умолчанию в инструментах разработчика, отвечает за работу с HTML и CSS. Эта панель разбита на две части:

35 <ul><li>Верхняя панель показывает структуру HTML со всеми классами, атрибутами, значениями и вложенными элементами. Можно открывать и закрывать вложенные элементы и так ориентироваться по странице. Когда мы наводим курсор на любой из HTML-элементов, то он подсвечивается, как на изображении выше</li>

36 <li>Нижняя панель показывает весь CSS-код, который применяется к выбранному элементу</li>

37 </ul>Любой элемент или CSS-код можно изменять. В тестировании это полезно при изменении текста, например, чтобы проверить длинный текст в блоке. Для примера я изменил текст в кнопке на главной странице. Так можно проверить, что кнопка правильно отреагирует на длинный текст и растянется под его размер:

38 Чем больше вы будете изучать HTML и CSS, тем больше возможностей по тестированию приложений можно открыть для себя.

39 <h3>Вкладки для работы с JavaScript</h3>

40 Рядом со вкладкой для работы с HTML и CSS располагается вкладкаConsole. В ней происходит взаимодействие с языком JavaScript. В эту вкладку попадают все сообщения от приложения, которые, например, выводятся с помощью функции console.log():

41 В этой вкладке вы можете:

42 <ul><li>Посмотреть на все ошибки приложения, если они есть</li>

43 <li>Вывести промежуточные результаты работы JavaScript с помощью функции console.log()</li>

44 <li>Писать свой код на JavaScript</li>

45 </ul>Написание своего кода полезно при тестировании, например, чтобы найти все ссылки на странице. Можно поискать их самостоятельно, а можно с помощью JavaScript получить все ссылки в консоль.

46 Попробуйте открыть инструмент разработчика. Для этого нужно перейти на любой сайт и вставить следующий код во вкладку Console:

47 Этот простой код выберет все элементы с тегом <a></a> на текущей странице. Тег <a></a> служит для разметки ссылок:

48 В будущих уроках разберем больше вкладок в инструментах разработчика и узнаем, какие еще возможности для тестирования есть у встроенных средств браузеров.

49 Для закрепления материала скачайте несколько разных браузеров и посмотрите на устройство вкладок для работы с HTML, CSS и JavaScript в них.

50 Вы можете использовать инструмент разработчика на любом сайте, так как работа в нем не влияет на работоспособность ресурса. Можете открыть инструмент разработчика на странице этого урока и посмотреть, как выглядит HTML, какие CSS стили применяются, какие ошибки и уведомления появляются в консоли, если они есть.

51 Инструмент разработчика не изменяет данные на сайте, они хранятся до первой перезагрузки страницы, поэтому не бойтесь экспериментировать и смотреть на интересные моменты разных сайтов. Верстальщики часто пользуются этой возможностью, чтобы посмотреть на верстку разных элементов.

52 <h2>Выводы</h2>

53 В этом уроке мы узнали, что за отображение информации на странице отвечают два языка: HTML и CSS. Язык разметки HTML помогает браузеру отличать элементы друг от друга. Он указывает, что является заголовком, ссылкой, параграфом. CSS позволяет стилизовать контент на странице: добавить цвета, изменить шрифт, расположить элементы на странице.

54 Так же мы изучили первые базовые вещи при работе с инструментами разработчика. Научились открывать его, просматривать HTML, CSS и изменять их. Узнали о вкладке Console, в которой отображаются ошибки JavaScript.

55 В будущих уроках мы еще не раз вернемся к инструментам разработчика. Мы научимся управлять размером окна браузера, эмулировать разную скорость работы интернета и просматривать запросы, которые отправляет и получает сайт.