Добавил:

KaFaka t.me Установите расширение 'SyncShare' для решения тестов в LMS (Moodle): https://syncshare.naloaty.me/ . На всякий лучше отключить блокировщик рекламы с ним. || Как пользоваться ChatGPT в России: https://habr.com/ru/articles/704600/ || Также можно с VPNом заходить в bing.com через Edge браузер и общаться с Microsoft Bing Chat, но в последнее время они форсят Copilot и он мне меньше нравится. || Студент-заочник ГУАП, группа Z9411. Ещё учусь на 5-ом курсе 'Прикладной информатики' (09.03.03). || Если мой материал вам помог - можете написать мне 'Спасибо', мне будет очень приятно :) Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Санкт-Петербургский государственный университет аэрокосмического приборостроения

Предмет:

Базы данных

Файл:

3 курс 2 семестр / Z9411_КафкаРС_БД_ЛР8

.docx

Скачиваний:

Добавлен:

24.10.2023

Размер:

1.59 Mб

Скачать

☆

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральное государственное автономное образовательное учреждение высшего образования

«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»

ИНСТИТУТ НЕПРЕРЫВНОГО И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ

КАФЕДРА 41

ОЦЕНКА

ПРЕПОДАВАТЕЛЬ

старший преподаватель				Н. А. Соловьева
должность, уч. степень, звание		подпись, дата		инициалы, фамилия

ПРАКТИЧЕСКАЯ РАБОТА №1

ЯЗЫК HTML. ПРИЕМЫ ВЕРСТКИ

по дисциплине: Основы профилизации

РАБОТУ ВЫПОЛНИЛ

СТУДЕНТ ГР. №

Z9411

Р. С. Кафка

номер группы

подпись, дата

инициалы, фамилия

Студенческий билет №

2019/3603

Санкт-Петербург 2022

Цель работы: знакомство с языком разметки HTML, работа с основными тегами.

Задание:

Разработать две страницы сайта по теме, определенной вариантом. Тема сохраняется на все лабораторные семестра. Каждый информационный элемент сайта должен соответствовать теме.

Сайт должен обязательно содержать следующие элементы:

Заголовок в верхней части каждой страницы
Гиперссылки с одной страницы на другую
Таблицу со структурой по варианту
Список со структурой по варианту
Набор картинок
Текст
«подвал» внизу страницы

Элементы на странице следует располагать сверху вниз. Оформление не использовать.

Вариант №8.

Вид таблицы: Объединение строк.

Вид списка: 2 уровня, нумерованный.

Тема: Современная элементная база вычислительной техники

Ход работы:

Для выполнения практических работ была выбрана интегрированная среда разработки Visual Studio Code.

Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

Внешний вид пустой вкладки для написания и редактирования кода представлена на рисунке1.

Рисунок 1 – Начало работы в редакторе Visual Studio Code

Самой первой строкой объявляем тип создаваемого документа, чтобы браузер смог его прочитать. Для этого используется команда <!DOCTYPE HTML>.

Стандартная структура любого html-документа имеет следующий вид:

<!DOCTYPE HTML>

<html>

<head>

…

</head>

<body>

…

</body>

</html>

Элемент-контейнер <head> применяется для описания метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.

Чтобы у сайта было название, которое высвечивалось бы на вкладке браузера, а также в качестве заголовка на странице результатов поиска, прописывается тег <title>. Результат использования данной команды приведен на рисунке 2.

Рисунок 2 – Название сайта

Вся основная информационная часть сайта содержится в разделе <body>.

Для добавления на страницу заголовка используется тег <h1>. Таким образом на сайте появляется строка, написанная крупным жирным шрифтом, которая сразу привлекает к себе внимание. Такой заголовок приведен на рисунке 3.

Рисунок 3 – Внешний вид основного заголовка

В синтаксисе языка HTML существует 6 различных видов заголовков: среди них <h1> - самый крупный, <h6> - самый мелкий.

Весь текст на странице можно разделить на смысловые блоки с помощью тега <div>. Тогда при чтении программного кода просматривающему человеку будет легче ориентироваться и понимать, какая часть к чему относится.

Конкретный абзац текста окружается командой <p>. На рисунке 4 показан внешний вид параграфа, обособленного подобным образом.

Рисунок 4 – Параграф текста на странице сайта

Сделать сайт более визуально интересным позволяют изображения. Тег <img> даёт возможность встраивать изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения. Если в редакторе кода прописать строку <img src="1.jpg">, то на сайте в конкретном месте появится выбранный элемент, как это показано на рисунке 5.

Рисунок 5 – Вставка изображения на сайт

Для добавления на страницу маркированного списка используется команда <ul>. Каждый элемент выделяется с помощью тега <li>. На рисунке 6 приведен пример неупорядоченного списка, где путём применения атрибута type со значением square был изменен вид маркера.

Рисунок 6 – Создание неупорядоченного списка

Для создания на сайте таблицы используется тег <table>. Внутри него применяется команда <caption>, определяющая заголовок данной структуры. Каждая строка обособляется инструкцией <tr>. Шапка таблицы отмечается с помощью тега <th>, обычные же ячейки - <td>. В случае необходимости объединения нескольких столбцов внутри команд <th> или <td> указывается атрибут colspan. Внешний вид полностью оформленной таблицы приведен на рисунке 7.

Рисунок 7 – Добавление таблицы

Внутри основной части сайта, обозначаемой тегом <body>, можно выделить «подвал» страницы с помощью инструкции <footer>. В этот раздел обычно добавляются контактные данные, навигация по сайту. На нашем сайте в «подвал» была добавлена напутственная строка и ссылка на сторонний сайт, где можно получить больше информации. Пример приведен на рисунке 8.

Рисунок 8 – Неоформленный «подвал» страницы

Для добавления ссылок используется тег <a>, внутри которого прописывается атрибут href с самой ссылкой. Данный элемент необходимо привязать к какому-либо текстовому блоку или объекту. На рисунке 9 приведен пример ссылки, ведущей на следующую страницу сайта и привязанной к строке «Перейти на следующую страницу».

Рисунок 9 – Ссылка для перехода на следующую страницу сайта

Листинг программного кода

Программный код файла html1.html (первая страница сайта):

<!DOCTYPE HTML>

<html>

<head>

<title>Умный дом</title>

</head>

<body>

<h1>Умный дом - что это такое и как работает</h1>

<div>

<h2>Что такое умный дом?</h2>

<p>

Технологии не стоят на месте и уже сегодня каждому известно о способностях ученых создавать вещи, которые раньше могли быть вымыслом фантастов и описывались только в книгах и демонстрировались в рамках кинематографа. Раньше из области фантастики была мысль о том, что чайник может вскипеть без вашего участия в этом процессе. А сегодня это вполне реально и очень распространено. Все это благодаря технологии «умный дом».

</p>

<br>

<p>

Что это такое и как работает, знают не все. Так как не все жители планеты следят за разработками Цукерберга, компании Сяоми и прочих. В статье мы раскроем тему «Smart Home» в полном объеме. Расскажем, как работает система умный дом, какие есть технологии и процессы работы системы, как управлять системой и многое другое.

</p>

</div>

<br>

<div>

<h2>Как работает умный дом?</h2>

<p>

Как же работает умный дом? Как система понимает, что и когда нужно сделать? Принцип работы системы умный дом основан на ряде команд (опций), которые могут быть поставлены как человеком, так и машиной.

</p>

<ul type="square"> Способы активации системы Умный дом:

<li>Активация человеком - выполняется посредством голосового запроса или посредством запуска того или иного устройства через приложения.</li>

<li>Активация без вмешательства человека - при установке системы задается определенные параметр на тот или иной прибор в доме и в определенное время он начинает работу.</li>

</ul>

<p>

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

</p>

</div>

<div>

<p>

</p>

</div>

<div>

<p>

Второй вариант не требует вашего присутствия непосредственно в доме или квартире. Все потому что при таком варианте все запрограммировано. То есть при установке системы задается определенные параметр на тот или иной прибор в доме. И в определенное время он активируется. Например, каждый день в 07:30 включается чайник, или в 12:00 срабатывает система отопления. Также в этом варианте возможен такой расклад как самостоятельное принятие решений системой. Это значит, что на основании статистики система сама решает, когда запустить или выключить отопление или вскипятить воду.

</p>

</div>

<div>

<p>

Но важно понимать, что система умного дома – это гораздо больше, нежели автоматика в активации работы чайника. «Smart Home» включает в себя управление системами отопления, водоснабжения, охранными системами и видеонаблюдением. Организацией работоспособности и установки системы умного дому обычно занимается компания застройщика или лены совета дома.

</p>

</div>

<div>

<p align="right"><a href="html2.html"> <i>Перейти на следующую страницу > </i></a></p>

</div>

<p>

<i><b>Сделайте свою жизнь проще с системой Умный дом!</b></i>

</p>

<a href="https://www.intelvision.ru/blog/what-is-smarthome" target="_blank"> <i>Узнать больше информации можно здесь</i></a>

</footer>

</body>

</html>

Программный код файла html2.html (вторая страница сайта):

<!DOCTYPE HTML>

<html>

<head>

<title>Умный дом</title>

</head>

<body>

<h1>Умный дом - что это такое и как работает</h1>

<div>

<h2>Какие технологии включает в себя умный дом?</h2>

<p>

По сей день многие так и не понимают до конца, что же нужно считать умным домом. К примеру, можно ли назвать умным дом оснащенный роботами или же дом, в котором просто автоматически регулируется температура? Давайте обозначим раз и навсегда, что умный дом – это общее название для всех автоматизированных систем быта. Рынок сегодня предлагает много вариантов систем, которые можно между собой объединять. Комплектация системы «Smart Home» будет зависить от предпочтений потребителя. Более подобно рассмотрим базовые варианты функций умного дома.

</p>

</div>

<div>

<ol>

<li>

Умное освещение.

<p>

Самая распространённая функция – управление светом. Эта функция также является самой бюджетной. Умный свет может быть автоматизирован таким образом, что освещение будет регулировать не только в доме, но и в подъезде, на улице. Включение света по хлопку или при движении осуществляется за счет диммеров и умных ламп. Не секрет, что такая система значительно сэкономит расходы на электричество.

</p>

</li>

<br>

<li>

Умное водоснабжение, отопление, вентиляция и кондиционирование.

<p>

При описании преимуществ системы умный дом нужно обязательно отметить функционал систем вентиляции, кондиционирования и отопления. За рубежом есть такое понятие как «HVAC», которое обозначает автоматизацию работы систем поддержание температурных режимов, влажности воздуха, чистоты воздуха, экономии расхода электроэнергии. Создать совокупность таких систем и реализовать такой проект было верным решением. Отныне ОКВ (HVAC) – обязательная составляющая любой системы умного дома. Она позволят значительно облегчить быт и жизнь в целом. От работоспособности этих функций зависит как здоровье человека, так и безопасность. Чем стабильнее и качественнее работает эта часть системы, тем лучше качество жизни у потребителя.

</p>

</li>

<br>

<li>

Системы обеспечения безопасности в комплектации системы умного дома.

<p>

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

</p>

</li>

<br>

<li>

Управление и контроль за детьми и пожилыми людьми.

<p>

Удивительно, но умный дом – это не только банальные функции по регулировке света. Вы удивитесь, то контроль за домашними питомцами тоже часть программы интеллектуального дома. Что входит в систему умный дом еще? Например, система контроля и наблюдения за детьми, людьми с отграниченными возможностями, и пенсионерами.

</p>

</li>

</ol>

</div>

<br>

<div>

<p>

Произведем анализ перечисленных умных систем по ряду основных факторов, волнующих широкого потребителя.

</p>

<caption>Сравнение основных характеристик</caption>

<tr>

<th>Характеристика</th>

<th>Умное освещение</th>

<th>Умная система ОКВ</th>

<th>Умная система безопасности</th>

<th>Умная система контроля</th>

</tr>

<tr>

<td><b>Бюджетность</b></td>

<td> Средняя </td>

<td> Очень высокая </td>

<td> Высокая</td>

<td> Низкая</td>

</tr>

<tr>

<td><b>Сложность установки</b></td>

<td>Низкая</td>

<td>Высокая</td>

<td colspan=2 align="center">Средняя</td>

</tr>

<tr>

<td><b>Момент установки</b></td>

<td>В любой момент по желанию</td>

<td colspan=2 align="center">В момент строительства</td>

<td>В любой момент по желанию</td>

</tr>

</table>

</div>

<div>

<p>

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

</p>

<p>

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

</p>

</div>

<div>

<p align="right"><a href="html1.html"> <i>Вернуться на предыдущую страницу < </i></a></p>

</div>

<p>

<i><b>Сделайте свою жизнь проще с системой Умный дом!</b></i>

</p>

<a href="https://www.intelvision.ru/blog/what-is-smarthome" target="_blank"> <i>Узнать больше информации можно здесь</i></a>

</footer>

</body>

</html>