HTML/CSS — Введение в тестирование веб-приложений
Мы знаем, что кроссбраузерность и адаптивность отвечают за внешний вид сайта на разных устройствах и браузерах. Настало время поговорить о языках, с помощью которых браузеры выводят информацию и стилизуют ее. Для этого в веб-разработке используется два основных языка:
В этом уроке разберем, за что отвечает каждый из языков, и как с помощью встроенных в браузер инструментов увидеть и протестировать код на этих языках.
Языки HTML и CSS
Посмотрите на страницу, на которой вы читаете этот текст. Вы видите сам текст, иногда появляются изображения, в правой панели располагаются элементы управления.
Чтобы браузер мог вывести эти данные, используется язык HTML — Hyper Text Markup Language или язык разметки гипертекста. Про понятие гипертекста мы поговорим в одном из следующих уроков, а пока остановимся на языке разметки. В этом понятии нет словосочетания «язык программирования», так как HTML предназначен для разметки данных.
Хекслет — онлайн-школа программирования В нашей школе вы можете изучить: HTML/CSS JavaScript PHP Python и многое другое Это простой пример HTML разметки, в которой есть:
- Заголовок первого уровня с текстом «Хекслет — онлайн-школа программирования»
- Один параграф с текстом «В нашей школе вы можете изучить:»
- Список из пяти элементов
Основа всей разметки — текст. Чтобы браузер мог отличить обычный текст от заголовка или списка, используются специальные конструкции — теги. Например, чтобы сказать браузеру, что нужно обработать текст как заголовок первого уровня, используется тег .
Подробнее про теги, их роль и применение вы можете узнать из бесплатного курса Основы современной верстки.
HTML не выводит данные и ничего с ними не делает. Он лишь указывает браузеру или другой программе, как обработать данные. Если у браузера нет правил для вывода заголовков, то он их и не отобразит.
За то, как будет выведен элемент на странице, отвечает язык CSS — Cascading Style Sheets или каскадные таблицы стилей. Это обычный набор правил. Они говорят браузеру о том, какого размера будет элемент, какой у него будет цвет, шрифт, заливка и так далее.
У каждого браузера свой начальный набор таких стилей для каждого из элементов. У стандартных стилей нет четких правил, поэтому каждый браузер может выводить одинаковые элементы по-разному. По этой причине, а также из-за поддержки новых правил тестировщику важно помнить о кроссбраузерности.
Если хотите узнать больше о CSS и его особенности, можете пройти тот же курс Основы современной верстки. В нем помимо HTML есть основы работы с CSS.
Разберемся, как можно проверить верстку и увидеть разметку и стили на любом сайте.
Инструменты разработчика
У всех браузеров есть встроенные веб-инспекторы, которые еще называются инструментами разработчика. Хоть это и инструменты разработчика, но функционал очень полезен и для тестировщиков. Так выглядят базовые моменты, которые можно сделать с помощью инструмента разработчика:
- Проверить HTML и CSS любой страницы
- Временно добавить новые блоки или стили без необходимости разворачивания сайта на своем компьютере
- Протестировать JavaScript код, найти в нем ошибки или вывести промежуточные результаты в специальную консоль
- Получить данные обо всех запросах, которые происходят на сайте. Узнать, какие данные на сайт приходят и какие данные куда уходят
- Проверить скорость загрузки страницы. Найти скрипты или запросы, которые долго выполняются
- Протестировать адаптивность сайта на самых разных разрешениях
Разберем некоторые функции на примере инструмента Developer Tools, который доступен в браузере Firefox:
Чтобы открыть инструмент разработчика, используется один из двух путей:
- Навести курсор мыши на любой элемент страницы, кликнуть правой кнопкой и выбрать пункт Inspect . В русской локализации «Посмотреть код элемента» или «Исследовать Элемент»
- Использовать комбинацию клавиш Ctrl + Shift + I или клавишу F12
После открытия инструмента разработчика на экране появятся вкладки. Разберем, что в них можно делать.
Вкладки для работы с HTML и CSS
Первая вкладка, которая открывается по умолчанию в инструментах разработчика, отвечает за работу с HTML и CSS. Эта панель разбита на две части:
- Верхняя панель показывает структуру HTML со всеми классами, атрибутами, значениями и вложенными элементами. Можно открывать и закрывать вложенные элементы и так ориентироваться по странице. Когда мы наводим курсор на любой из HTML-элементов, то он подсвечивается, как на изображении выше
- Нижняя панель показывает весь CSS-код, который применяется к выбранному элементу
Любой элемент или CSS-код можно изменять. В тестировании это полезно при изменении текста, например, чтобы проверить длинный текст в блоке. Для примера я изменил текст в кнопке на главной странице. Так можно проверить, что кнопка правильно отреагирует на длинный текст и растянется под его размер:
Чем больше вы будете изучать HTML и CSS, тем больше возможностей по тестированию приложений можно открыть для себя.
Вкладки для работы с JavaScript
Рядом со вкладкой для работы с HTML и CSS располагается вкладка Console. В ней происходит взаимодействие с языком JavaScript. В эту вкладку попадают все сообщения от приложения, которые, например, выводятся с помощью функции console.log() :
В этой вкладке вы можете:
- Посмотреть на все ошибки приложения, если они есть
- Вывести промежуточные результаты работы JavaScript с помощью функции console.log()
- Писать свой код на JavaScript
Написание своего кода полезно при тестировании, например, чтобы найти все ссылки на странице. Можно поискать их самостоятельно, а можно с помощью JavaScript получить все ссылки в консоль.
Попробуйте открыть инструмент разработчика. Для этого нужно перейти на любой сайт и вставить следующий код во вкладку Console:
const links = document.querySelectorAll('a') linksЭтот простой код выберет все элементы с тегом на текущей странице. Тег служит для разметки ссылок:
В будущих уроках разберем больше вкладок в инструментах разработчика и узнаем, какие еще возможности для тестирования есть у встроенных средств браузеров.
Для закрепления материала скачайте несколько разных браузеров и посмотрите на устройство вкладок для работы с HTML, CSS и JavaScript в них.
Вы можете использовать инструмент разработчика на любом сайте, так как работа в нем не влияет на работоспособность ресурса. Можете открыть инструмент разработчика на странице этого урока и посмотреть, как выглядит HTML, какие CSS стили применяются, какие ошибки и уведомления появляются в консоли, если они есть.
Инструмент разработчика не изменяет данные на сайте, они хранятся до первой перезагрузки страницы, поэтому не бойтесь экспериментировать и смотреть на интересные моменты разных сайтов. Верстальщики часто пользуются этой возможностью, чтобы посмотреть на верстку разных элементов.
Выводы
В этом уроке мы узнали, что за отображение информации на странице отвечают два языка: HTML и CSS. Язык разметки HTML помогает браузеру отличать элементы друг от друга. Он указывает, что является заголовком, ссылкой, параграфом. CSS позволяет стилизовать контент на странице: добавить цвета, изменить шрифт, расположить элементы на странице.
Так же мы изучили первые базовые вещи при работе с инструментами разработчика. Научились открывать его, просматривать HTML, CSS и изменять их. Узнали о вкладке Console, в которой отображаются ошибки JavaScript.
В будущих уроках мы еще не раз вернемся к инструментам разработчика. Мы научимся управлять размером окна браузера, эмулировать разную скорость работы интернета и просматривать запросы, которые отправляет и получает сайт.
Дополнительные материалы
- Введение в HTML
- Основы CSS
- Chrome DevTools
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Часть 1: Основы HTML и CSS
В этой части мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
Практикум
Профессии
- Фронтенд-разработчик
- JavaScript-разработчик (React)
- JavaScript-разработчик (Vue.js)
- Фулстек-разработчик
- HTML и CSS.
Профессиональная вёрстка сайтов - HTML и CSS.
Адаптивная вёрстка и автоматизация - JavaScript.
Профессиональная разработка веб-интерфейсов - JavaScript.
Архитектура клиентских приложений - React.
Разработка сложных клиентских приложений - Node.js.
Профессиональная разработка REST API - Node.js и Nest.js.
Микросервисная архитектура - TypeScript. Теория типов
- Алгоритмы и структуры данных
- Паттерны проектирования
- Webpack
- Vue.js 3. Разработка клиентских приложений
- Git и GitHub
- Анимация для фронтендеров
- Справочник по HTML
- Учебник по Git
- Учебник по PHP
Информация
- Об Академии
- О центре карьеры
Услуги
- Работа наставником
- Для вузов и колледжей
- Для учителей
Остальное
© ООО «Интерактивные обучающие технологии», 2013−2023
Вход
Регистрация
Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».
Восстановление доступа
Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.
Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.
Заполните заявку и мы подарим вам доступ к этой части тренажёра навсегда.
По всем вопросам пишите нам в Telegram.
Что такое HTML/CSS и как это выучить?
Язык гиперразметки, каскадные таблицы стилей и JavaScript – вот связка того, на чем пишут сайты. Мы не говорим пока о фреймворках, которые используются современными разработчиками, нам интересна база фронтенд-проектирования. JavaScript – полноценный язык программирования, который позволяет сделать сайт интерактивным, реагирующим на клики, ввод, нажимания клавиш и так далее. Но сама основа, композиция, внешний вид, расположение элементов, их цвет, шрифт и так далее – все это HTML+CSS. Вот что такое верстка сайта. Поговорим подробнее о каждой составляющей.
Как выглядит HTML-документ?
Язык гипертекстовой разметки – то, на чем верстают каркас сайта. Чтобы начать создавать структуру веб-страницы, нужно разобраться, что такое теги в HTML. Это элементы кода, из которых состоит разметка сайта. Они указывают, какое семантическое наполнение имеет та или иная его часть, например, тег говорит браузеру, что перед ним картинка, а в контейнер типа
…
оборачивают абзац текста. Это элементы HTML. С их помощью веб-страница “общается” с браузером, объясняя значение каждого компонента.
HTML-документ состоит из тегов и их содержимого. Вот основные компоненты каждой веб-страницы.
- – в этот тег оборачивается весь документ;
- – здесь служебная информация;
- – тело документа;
- , – структурные компоненты страницы;
-
, — – текстовые;
- – ссылки;
-
-
,
– списки и так далее.
Язык стилей CSS
Каскадные таблицы помогают задать внешний вид элементам страницы. Помните тег ? В него можно поместить , указав ссылку на файл со стилями. Теперь вы знаете, как подключить CSS к HTML.
При помощи стилей можно задавать расположение компонентов страницы, их цвет, размер, отступы, шрифты, словом, все визуальные характеристики. Кстати, адаптивность сайта – это тоже заслуга каскадных таблиц. Так что если вы видите, что у ресурса ломается верстка на маленьких экранах или неправильно работает масштаб, стоит провести проверку CSS на ошибки.
Как научиться верстать сайты с нуля?
Освоить базовые навыки фронтендера поможет компьютерная школа Hillel. Курсы по HTML и CSS разработаны для подготовки специалистов с нуля. Программа обучения верстке сайта для начинающих имеет практически уклон, благодаря чему уже в процессе занятий студенты осваиваются в работе с кодом. Курсы преподают опытные менторы-практики, сотрудники ведущих айти-компаний.
Тем, кого привлекает айти-сфера, но не интересует девелопинг, можно порекомендовать другие программы. Например, QA курсы. Тестирование ПО – еще одна перспективная сфера с низким порогом вхождения.
Уроки по HTML и CSS
«Уроки по HTML и CSS» являются простым и полным руководством, целью которого служит помощь начинающим при обучении HTML и CSS. Излагая основы, это руководство проходит через все основные этапы проектирования и разработки.
Если сумеете, представьте себе время до изобретения Интернета. Сайтов не существует и книги напечатанные на бумаге были вашим основным источником информации. Требовалось приложить значительное усилие, чтобы отыскать нужный фрагмент информации, который вы уже читали.
Сегодня вы можете открыть браузер, перепрыгнуть в выбранную поисковую систему и найти требуемое. Любая часть мыслимой информации лежит на кончиках ваших пальцев. И скорее всего кто-то где-то уже сделал сайт с вашей точной поисковой фразой.
В этой книге я собираюсь показать вам как создавать свои собственные сайты с помощью двух самых доминирующих компьютерных языков — HTML и CSS.
Оригинальную книгу вы можете прочитать и при желании купить по этому адресу: learn.shayhowe.com/html-css/
- Создание первой веб-страницы
- Знакомство с HTML
- Знакомство с CSS
- Открываем блочную модель
- Позиционирование содержимого
- Работа с типографикой
- Установка фона и градиента
- Создание списков
- Добавление медиа-контента
- Построение форм
- Организация данных с помощью таблиц
- Написание хорошего кода
Шэй Хоу
Специализируется на дизайне и разработке интерфейсов, о чём регулярно пишет и говорит. В настоящее время является руководителем подразделения Belly. Один из организаторов таких мероприятий как Chicago Camps, Refresh Chicago и UX Happy Hour.
- Создание первой веб-страницы
- Знакомство с HTML
- Знакомство с CSS
- Открываем блочную модель
- Позиционирование содержимого
- Работа с типографикой
- Установка фона и градиента
- Создание списков
- Добавление медиа-контента
- Построение форм
- Организация данных с помощью таблиц
- Написание хорошего кода
Гл. редактор: Влад Мержевич
О сайте
На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.
Связи
Разделы сайта
Популярное
- Уроки по HTML и CSS
- Руководство по флексбоксам
- HTML5 и CSS3 на примерах
- Руководство по JSON
- Как верстать на HTML5 и CSS3
- Продвинутые уроки по HTML и CSS
- Визуальное руководство по свойствам flexbox
- Создание первого приложения на Node
Помощь по сайту
Сайт WebReference.ru использует VPS от компании Beget.