Web - страница. Что такое верстка веб страницы?
Веб-страница (Web page) является гипертекстовым ресурсом интернета. Такие страницы зачастую пишутся на языке HTML. Обычно в веб-страницу входят различные ссылки для быстрого перехода на другие ресурсы, к тому же здесь имеются динамические и статические элементы, такие как изображения, видео, текст и тд. Также каждая страница имеет свой уникальный адрес. Для просмотра веб-страниц используются самые разнообразные веб-браузеры.


Но для того, чтобы пользователь мог посмотреть эту страницу верстальщику или frontend разработчику нужно сверстать эту страницу.


Верстка web - страницы - создание такого HTML-кода, который позволяет размещать элементы веб-страницы (изображения, текст, линии и т.д.) в нужных местах документа и отображать их в окне браузера согласно разработанному макету.

В свою очередь все элементы HTML помещаются в теги <header>...</header>.

Для того чтобы страница имела внешний вид, разметку добавляют стили - CSS.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Основные элементы интерфейса и теги HTML. CSS
Теперь по-порядку, из каких элементов может состоять web - страница.

Header или же шапка - самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.

Тег header <header>...</header>

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

Тег footer <footer>....</footer>

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

Бургер меню - иконка, состоящая из трех горизонтальных черточек. Широко применяется в веб мастерами для обозначения скрытого меню. Наибольшую популярность получила в адаптивном дизайне.

Боковая панель страницы (Sidebar) - Тут размещается периферийная информация, ссылки, цитаты, реклама и т. д. Обычно это контекстно к тому, что содержится в основном контенте (например, на странице новостной статьи, боковая панель может содержать биографию автора или ссылки на связанные статьи), но есть также случаи, когда можно найти повторяющиеся элементы, такие как вторичная навигационная система.

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

Тег для body <body>...</body>


Что может быть в теле страницы?
Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.
Тег
<button>... </button>
<input type="button"> …. </input>
Radio button — позволяет пользователю выбрать одну опцию.
Тег <input type="radio">…. </input>
Checkbox — позволяет выбрать несколько опций.
Тег <input type="checkbox">…. </input>
Текстовое поле — поле для ввода текстовых значений.
Тег <input type="text">... . </input>
Маска — это значения, указывающие формат допустимых значений, входных данных в поле.

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.
Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.
Select — позволяет пользователю выбрать одну опцию из выпадающего списка.
тег <select> … </select>
Accordion — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.
Вкладки (tabs) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.
Слайдер / карусель — переключатель изображений (или другого контента) работающий автоматически или вручную.
Галерея — набор из нескольких изображений.
Превью (preview) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью.
Элементы в контенте
Заголовки - как и в любом другом документе, делят текст на разделы, а разделы в свою очередь состоят из абзацев.
HTML теги бывают: h1, h2, h3, h4, h5, h6. Это шесть заголовков показывающих относительную важность блока после заголовка в зависимости от уровня заголовка h1, h2, h3 и т.д. Тег h1 — заголовок первого уровня, тег h2 — второго, тег h3 — третьего, тег h6 — наименее значимый заголовок из всех. Заголовок h1 важен для продвижения сайта. Использование html тега заголовка h1 на странице допускается не более одного раза и по умолчанию, заголовок первого уровня H1 отображается самым крупным (среди прочих тегов H) шрифтом жирного начертания. Остальные теги заголовков H имеют шрифт меньшего размера в зависимости от уровня

Теги:
<h1>... </h1>
<h2>... </h2>
<h3>... </h3>
<h4>... </h4>
<h5>... </h5>
<h6>... </h6>

Контент — текст, изображения, видео, то есть наполнение сайта.
Тег <p>...</p>

Списки
Маркированные списки
Теги:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Нумерованные списки
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

Якорь (Anchor text) — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.
Тег <a href="link">text</a>
Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).
Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы.
Поисковая строка — строка для ввода поискового запроса.
Ползунок — предназначен для ввода чисел в указанном диапазоне.
Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.
Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.
Прелоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.
Хлебные крошки — навигационная цепочка — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь.
Иконка (icon) - элемент графического интерфейса, небольшая картинка, обозначающая какой-то элемент.
Метка (label) - элемент графического интерфейса, который используется для пояснения основного элемента: название поля в форме, метка о новом товаре или действующей скидке.

Всплывающее окна
Pop-up — небольшое всплывающее окно.
Модальное окно (Modal window) — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работу с остальным сайтом.
Алерт окно (Alert) — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.
CSS
Color - цвет какого- элемента и задается CSS.
color, background-color etc.

Fonts - шрифта, которые используются на сайте и задается CSS.
font - https://developer.mozilla.org/en-US/docs/Web/CSS/font-style


Размер шрифта
Margin - это расстояние от одного блока до другого, межблоковое пространство.
Padding - это отступ от содержимого до края блока.



Домашнее задание:
На странице https://isqi.org/en/59-istqb-certified-tester-foundation-level-usability-testing.html найти следующее элементы:
Header, footer, nav, burger menu;
button, select, checkbox;
text field, search field;
заголовки, текст, anchor text;
tabs;
icons;
modal window.

Сделать screenshots найденных элементов и указать название каждого элемента. Для следующих элементов указать html теги: Header, footer, nav, burger menu, button, select, checkbox, text field, заголовки, текст, anchor text.

Все скрины поместить в файл и положить в папку с вашим именем, нажав на Upload file ниже.