web-tech/labs/lab-01/other/Задание - Лабораторная работа 1.md

# Лабораторная работа №1. Вёрстка домашней страницы

---

Сверстайте главную страницу сайта компании по доставке бизнес-ланчей и оформите сайт с помощью стилей CSS.

## Порядок выполнения

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

### HTML

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

- Шапка сайта с заголовком и блоком навигации (header)
	- Заголовок (h1)
	- Блок навигации (nav) с ссылками (a) на другие страницы сайта  (пункт меню "Контакты" должен быть якорной ссылкой, ведущей к футеру)
- Блок с основным содержимым страницы (main)
	- Блок с информацией о компании (section)
		- Заголовок (h2)
		- Изображение (img)
		- Текст (p)
	- Блок с преимуществами компании (section)
		- Заголовок (h2)
		- Маркированный список с преимуществами (ul). Описать минимум 3 преимущества
	- Блок с самыми популярными блюдами (section)
		- Заголовок (h2)
		- Таблица (table). Минимум 5 блюд в таблице
- Футер с контактными данными (footer)
	- Контактные данные (p, a)

Чтобы проверить валидность кода, воспользуйтесь [validator.w3.org](https://validator.w3.org/).  
  
Выберите понравившийся шрифт на [fonts.google.com](https://fonts.google.com/) и подключите к странице (он должен быть применен ко всему размещенному тексту).  
  
После того, как вы сверстали страницу, необходимо оформить ее стилями CSS.

### CSS

В данном разделе перечислены обязательные CSS-свойства, которые должны быть использованы. Необязательно использовать все свойства из перечня для каждого указанного тега. Например, вы можете использовать для тегов p только свойство font-family, но тогда нужно применить font-size и color для других текстовых элементов.

#### Для блоков (div, header, footer, main, nav)
- margin
- padding
- box-sizing: border-box (примените к [универсальному селектору](https://htmlacademy.ru/blog/css/universal) )
#### Для текста
- font-family (к странице должен быть подключен Google-шрифт)
- font-size
- color
#### Для изображений
- width
- height
#### Для таблиц
- padding
- border
- border-collapse: collapse;
- text-align
#### Для ссылок
- text-decoration: none
- font-family
- font-size
- color (цвет ссылок должен изменяться при наведении, используйте :hover)
#### Для футера
- background-color: black
- color: white

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

### Контент-сайта
[Ссылка](https://lms.mospolytech.ru/mod/assign/images/lunch.jpg) на изображение из макета.

### Защита
Чтобы сдать лабораторную, необходимо выполнить все [требования](https://lms.mospolytech.ru/mod/assign/requirements.html).

### Материалы для изучения

#### HTML
[Структура HTML-документа [WebReference]](https://webref.ru/course/html-basics/valid-document) 
[Заголовки [Doka]](https://doka.guide/html/h1-h6/)
[Абзац текста [Doka]](https://doka.guide/html/p/)
[Маркированный список [Doka]](https://doka.guide/html/ul/)
[Ссылки [Doka]](https://doka.guide/html/a/)
[Изображения [Doka]](https://doka.guide/html/img/)
[Тег div [Doka]](https://doka.guide/html/div/)
[Таблицы [Doka]](https://doka.guide/html/tables/)
[Атрибут класс [Doka]](https://doka.guide/html/class/)
[Поток документа [Doka]](https://doka.guide/html/flow/)
[Семантическая вёрстка [Doka]](https://doka.guide/html/semantics/)
[Как проверить валидность HTML-разметки [HTML Academy]](https://htmlacademy.ru/blog/html/html-validation)
[Элементы, теги и атрибуты [Hexlet]](https://ru.hexlet.io/courses/html/lessons/html_terms/theory_unit)
#### CSS
[Подключение стилей [Doka]](https://doka.guide/css/adding-styles/)
[Селектор по тегу [Doka]](https://doka.guide/css/tag-selector/)
[Селекторы по классу [Doka]](https://doka.guide/css/class-selector/)
[Селектор потомков (пробел) [HTML Academy]](https://htmlacademy.ru/blog/css/descendant)
[Универсальный селектор * [HTML Academy]](https://htmlacademy.ru/blog/css/universal)
[border [Doka]](https://doka.guide/css/border/)
[Стили для таблиц (border) [W3Schools]](https://www.w3schools.com/css/css_table.asp)
[Принцип каскада [Doka]](https://doka.guide/css/cascade/)
[Блочная модель [Doka]](https://doka.guide/css/box-model/)
[Специфичность [Doka]](https://doka.guide/css/specificity/)
[:hover [Doka]](https://doka.guide/css/hover/)
[background-color [Doka]](https://doka.guide/css/background-color/)
#### Другое
[Работа с файлами [MDN]](https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
[Якорные ссылки [Doka]](https://doka.guide/html/a/#vadim-makeev-sovetuet)
[Как сделать кликабельный номер телефона [HTML Academy]](https://htmlacademy.ru/blog/html/mailto)
[Как подключать шрифты [HTML Academy]](https://htmlacademy.ru/blog/html/fonts-loading)