112 lines
7.1 KiB
Markdown
112 lines
7.1 KiB
Markdown
# Лабораторная работа №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)
|