exam04 - stankin/inet-2022 GitHub Wiki

1. Понятия информации, информационных технологий, информационных систем. Обязанности оператора информационной системы.

2. Язык разметки HTML. Блочные и строчные элементы. Создание и управление стилями.

◀️ Реферат к вопросам экзамена по дисциплине Интернет-технологии 1 курса магистратуры ▶️

Выполнили: Сырич Ксения ИДМ-22-02, Косилов Глеб ИДМ-22-04, Пронин Артём ИДМ-22-06, Плаксунов Г.В ИДМ-22-07, Бабушкин Денис ИДМ-22-01, Мамонтов Владимир ИДМ-22-08, Новосельцев Дмитрий ИДМ-22-05, Григорьевых Андрей ИДМ-22-08.

Информация — осознанные сведения об окружающем мире, которые являются объектом хранения, преобразования, передачи и использования.

Информационные технологии - процессы, использующие совокупность средств и методов сбора, обработки, накопления и передачи данных (первичной информации) для получения информации нового качества о состоянии объекта, процесса, явления, информационного продукта, а также распространение информации и способы осуществления таких процессов и методов. Информационные технологии призваны, основываясь и рационально используя современные достижения в области компьютерной техники и иных высоких технологий, новейших средств коммуникации, программного обеспечения и практического опыта, решать задачи по эффективной организации информационного процесса для снижения затрат времени, труда, энергии и материальных ресурсов во всех сферах человеческой жизни и современного общества. Информационные технологии взаимодействуют и часто составляющей частью входят в сферы услуг, области управления, промышленного производства, социальных процессов [1].

Информационная система - Информационная система (ИС) — система, предназначенная для хранения, поиска и обработки информации, и соответствующие организационные ресурсы (человеческие, технические, финансовые и т. д.), которые обеспечивают и распространяют информацию. ИС предназначена для своевременного обеспечения надлежащих людей надлежащей информацией, то есть для удовлетворения конкретных информационных потребностей в рамках определённой предметной области, при этом результатом функционирования информационных систем является информационная продукция — документы, информационные массивы, базы данных и информационные услуги [2].

Обязанности оператора информационной системы - К полномочиям операторов информационной системы относятся:

1. Обеспечение создания, функционирования и развития информационной системы.
2. Утверждение сроков регистрации в информационной системе поставщиков информации и пользователей информационной системы. Регистрация поставщиков информации и пользователей информационной системы осуществляется с использованием единой системы идентификации и аутентификации.
3. Установление форм и форматов электронных документов, размещаемых в информационной системе.
4. Установление требований к технологическим, программным, лингвистическим, правовым и организационным средствам обеспечения пользования информационной системой, в том числе требований к ее архитектуре.
5. Установление требований к функционированию и развитию информационной системы.
6. Обеспечение предоставления сведений в предусмотренный частью 1 статьи 44.1 Федерального закона от 21 ноября 2011 года N 323-ФЗ "Об основах охраны здоровья граждан в Российской Федерации" Федеральный регистр граждан, имеющих право на обеспечение лекарственными препаратами, медицинскими изделиями и специализированными продуктами лечебного питания за счет бюджетных ассигнований федерального бюджета и бюджетов субъектов Российской Федерации [3].

Язык разметки HTML - HTML (HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора [4].

Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, такие как интерактивная веб-форма, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок.

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать логически связанную структуру веб-страницы. Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл [5].

Примеры блочных элементов:

• Абзацы <р>.
• Списки: неупорядоченные (с маркером) <ul> или упорядоченные списки (с числами) <ol>.
• Заголовки: от первого уровня <h1> до шестого уровня <h6>.
• Статьи <article>.
• Разделы <section>.
• Длинные цитаты <blockquote>.

Примеры строчных элементов:

• Ссылки <a>.
• Выделенные слова <em>.
• Важные слова <strong>.
• Короткие цитаты <q>.
• Аббревиатуры <abbr>.

Существует несколько ключевых отличий между блочными и строчными элементами:

Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы. Также по умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки. Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. Строчные же элементы не могут содержать в себе блочных, но могут содержать строчные. В то же время, блочные элементы не могут быть самозакрывающимися, когда строчные - могут (к примеру, <img>) [6].

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

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

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

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

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

Анатомия набора правил CSS выглядит следующим образом:

Вся структура называется набором правил (но зачастую для краткости "правило"). Стоит отметить также имена отдельных частей:

Селектор (Selector) - имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p). Для стилизации другого элемента, просто измените селектор.

Объявление (Declaration) - единственное правило, например color: red; указывает, какие из свойств элемента требуется стилизовать.

Свойства (Properties) - способы, которыми стилизуется определённый HTML-элемент (в данном случае, color является свойством для элементов). В CSS выбирается, какие свойства необходимо затронуть в правиле.

Значение свойства (Property value) - справа от свойства, после двоеточия, есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red) [8].

Стоит обратить внимание на важные части синтаксиса:

• Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ({}).
• В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
• В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

Таким образом, чтобы изменить несколько значений свойств сразу, просто нужно написать их, разделяя точкой с запятой.

CSS поддерживает вложенность. При написании тегов HTML часто бывает необходимо вкладывать теги друг в друга, но огромное дерево DOM очень плохо влияет на оптимизацию страницы. Чтобы «приблизиться» к желаемому тегу класса, может быть полезно использовать вложенные селекторы.

Синтаксис:

.block { *набор правил для элемента с именем класса 'block' }

.block p { *набор правил для тегов

внутри блока }

Селекторы CSS.

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

Базовые селекторы

-Универсальный селектор Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён. Синтаксис: * ns|* | Пример: * будет соответствовать всем элементам на странице.

-Селекторы по типу элемента Этот базовый селектор выбирает тип элементов, к которым будет применяться правило. Синтаксис: элемент Пример: селектор input выберет все элементы .

-Селекторы по классу Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class. Синтаксис: .имяКласса Пример: селектор .index выберет все элементы с соответствующим классом (который был определён в атрибуте class="index").

-Селекторы по идентификатору Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. Синтаксис: #имяИдентификатора Пример: селектор #toc выберет элемент с идентификатором toc (который был определён в атрибуте id="toc").

-Селекторы по атрибуту Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением. Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения). Ещё пример: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg". Ещё пример: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".

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

Таблица специфичности:

*- 0 0 0

style - 1 0 0 0

!important - больше 1 0 0 0

#id - 0 1 0 0

class - 0 0 10

[ attr=val ] - 0 0 10

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

Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

Основные инструменты Bootstrap [9]:

• Сетки — заранее заданные размеры колонок, которые можно сразу использовать, например, ширина колонки 120 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа.
• Шаблоны — фиксированный или резиновый шаблон документа.
• Типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т.п.
• Медиа — предоставляет некоторое управление изображениями и видео.
• Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
• Формы — классы для оформления форм и некоторых событий, происходящих с ними.
• Навигация — классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов.
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

ИСТОЧНИКИ

1. 📑 Лекции по дисциплине "Интернет-технологии"
2. 📑 Понятие "Информационная система (ИС)".
3. 📑 Статья 6.10. Полномочия операторов информационной системы и оператор инфраструктуры, обеспечивающей функционирование информационной системы. Федеральный закон «Об информации, информационных технологиях и о защите информации».
4. 📑 Понятие "Язык разметки HTML".
5. 📑 Блочные и строчные элементы HTML.
6. 📑 Блочные элементы.
7. 📑 Лекция 3. Основы CSS: 1. Введение в каскадные таблицы стилей.
8. 📑 Основы CSS.
9. 📑 Основы Bootstrap.