Лаб_1_Ф Головков И.Е. 12002108
.docx
БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ
ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ»
(НИУ «БелГУ»)
ИНСТИТУТ ИНЖЕНЕРНЫХ И ЦИФРОВЫХ ТЕХНОЛОГИЙ
Кафедра информационных и робототехнических систем
Отчет по лабораторной работе № 1
по дисциплине «Моделирование технических систем»
студента очного отделения
3 курса 12002108 группы
Головкова Игоря Евгеньевича
Проверила:
ст. пр. Скрипина Ирина Ивановна
БЕЛГОРОД, 2024
Лабораторная работа №1 (Frontend)
Работа с HTML и CSS
Цель работы
Изучить основы синтаксиса тегов HTML
Изучить основы использования правил CSS
Изучить основы Git Flow
Задание для подготовки к работе
Изучить лекционный материал и теоретический материал настоящей лабораторной работы.
Порядок выполнения работы
Изучить теоретический материал по лекции «HTML + CSS»
Используя теги НТML и правила СSS создать сайт по придуманной вами тематике.
Создать аккаунт на GitHub, если такового не имеется. Сделать fork репозитория https://github.com/Brarion/front-course-bgu . Отправить pull request с выполненной работой. В файле Readme указать тематику вашего сайта. Файлы лабораторной положить в отдельную, пронумерованную папку внутри репозитория.
Ход работы:
Был разработан сайт с применением HMTL + CCS. Итоговый вид сайта представлен на рисунках 1 и 2.
Рисунок 1 – Верхняя часть страницы сайта
Рисунок 2 – Нижняя часть страницы сайта
Листинг HTML-файла: <!DOCTYPE html>
<html lang="ru" xml:lang="en">
<head>
<title>СмартДом / Главная</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/cards.css" type="text/css">
</head>
<body>
<header>
<div class="logo"> <img src="../img/logo.png" alt="Логотип"></div>
<h2>СмартДом — Подключитесь к умному миру с нами</h2>
</header>
<div style="margin-bottom: 8vh"></div>
<div class="container">
<main>
<section>
<h2>О нас</h2>
<p>Мы - магазин умного дома, предлагающий самые современные и качественные устройства для умных домов. Наш
цель - предоставить нашим клиентам уникальный опыт покупки умных устройств, которые упрощают и улучшают
их жизнь.</p>
</section>
<section>
<h2>Последние товары в нашем магазине</h2>
<div class="card-container">
<div class="card">
<h3>Термостат умный</h3>
<img src="https://fs.elektro.ru/images/800/products/f82872c0-6b12-48a6-81b3-9368d69e43ee.jpg" alt="Изображение умного термостата">
<p>Умный термостат позволяет вам автоматически регулировать температуру в вашем доме с помощью
приложения на своем смартфоне.
Он учится вашим предпочтениям и обеспечивает комфортную температуру в любое время года.</p>
<p>1499 руб.</p>
</div>
<div class="card">
<h3>Камера умная</h3>
<img src="https://hiper-power.com/upload/iblock/522/M-2-1%20(1).jpg" alt="Изображение умной камеры">
<p> Умная камера является идеальным решением для наблюдения за вашим домом.
Она обеспечивает видеосъемку и звуковую запись,
а также предоставляет возможность удаленного доступа и уведомлений на ваш смартфон.</p>
<p>1999 руб.</p>
</div>
</div>
</section>
<section>
<h2>Последние новости в нашем блоге</h2>
<div class="card-container">
<div class="card">
<h3>Умные устройства для сада: автоматизируйте ваш садоводческий процесс</h3>
<p>Теперь вы можете автоматизировать ваш садоводческий процесс с помощью наших
новых умных устройств для сада.
Управляйте освещением, водоснабжением и даже пыльщиками с помощью приложения на своем смартфоне.
Не пропустите шанс сделать свой сад еще более красивым и ухоженным!</p>
<p>29 декабря 2023 года</p>
<p>Елена Л.</p>
</div>
<div class="card">
<h3>Новинка в магазине умных устройств: Робот-поливальщик для растений</h3>
<p>Мы рады представить вашему вниманию нашу новинку - Робот-поливальщик для
растений.
Этот умный устройство автоматически поливает ваши растения в нужное время, обеспечивая им
оптимальные условия для роста.
Не пропустите шанс улучшить уход за вашими растениями с помощью нашего нового умного
устройства!</p>
<p>6 декабря 2023 года</p>
<p>Сергей С.</p>
</div>
<div class="card">
<h3>Умные устройства для кухни: новые модели и функции</h3>
<p>Мы рады объявить о добавлении новых моделей и функций в нашу коллекцию умных
устройств для кухни.
Теперь вы можете управлять вашей кухонной техникой с помощью голоса, приложений и даже с помощью
своего смартфона.
Не пропустите шанс улучшить свою кухню с помощью наших новых умных устройств!</p>
<p>13 декабря 2023 года</p>
<p>Ирина И.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="address">
Адрес: Умная Улица, 12, Москва, Россия, 123456
</div>
<div class="contacts">
Телефон: +7 (495) 123-45-67<br>
E-mail: <a href="mailto:support@smartdom.ru">support@smartdom.ru</a>
</div>
<div class="social-links">
<a href="https://zen.yandex.ru/smartdom" class="social-link">Яндекс Дзен</a>
<br>
<a href="https://t.me/smartdom" class="social-link">Телеграм</a>
<br>
<a href="https://www.youtube.com/channel/smartdom" class="social-link">YouTube</a>
</div>
<p>© СмартДом, 2024</p>
</footer>
</div>
</body>
</html>
Ссылка на pull request:
https://github.com/Brarion/front-course-bgu/pull/2