Lab1 - master - ankarr/Web

Lab1
332 строки30 KB
ankarr
create Lab1
12 янв 2026, 12:09
12 янв 2026, 12:094134a3c
1. Принципы работы веб-сервера
Веб-сервер — это программа, которая принимает HTTP-запросы от клиентов (браузеров) и возвращает им запрошенные ресурсы. Он работает на
стандартных портах: 80 для HTTP и 443 для HTTPS. Процесс обработки запроса включает:
1. Приём запроса: Браузер отправляет HTTP-запрос на указанный URL.
2. Поиск ресурса: Веб-сервер ищет запрошенный ресурс (HTML-файл, изображение, скрипт) на диске.
3. Обработка:
a. Если ресурс статический (например, HTML, CSS, изображение), он отправляется клиенту без изменений.
b. Если ресурс динамический (например, PHP, Python-скрипт), сервер передаёт его специальному обработчику (интерпретатору),
который генерирует HTML-код и возвращает его клиенту.
4. Отправка ответа: Сервер формирует HTTP-ответ с соответствующими заголовками и телом (данными) и отправляет его браузеру.
2. Веб-серверы. Синхронная и асинхронная обработка запросов. Apache и nginx
• Apache: Использует синхронную модель обработки «один процесс (или поток) на запрос». Каждое новое соединение создаёт новый
процесс, что обеспечивает простоту и надёжность, но приводит к высокому потреблению памяти и процессорного времени при большом
количестве одновременных подключений. Подходит для классических веб-приложений с меньшей нагрузкой.
• nginx: Использует асинхронную событийную модель. Один главный процесс управляет несколькими рабочими процессами, каждый из
которых может обрабатывать тысячи соединений одновременно. Это делает nginx высокопроизводительным, особенно для обслуживания
статических файлов и работы в качестве обратного прокси или балансировщика нагрузки. Эффективно использует ресурсы сервера.
3. Виды хостинга: виртуальный, VPS и выделенный сервер
• Виртуальный хостинг (shared hosting): Несколько веб-сайтов размещаются на одном сервере, совместно используя его ресурсы (процессор,
память, дисковое пространство). Это самый экономичный вариант, подходящий для небольших сайтов с низкой посещаемостью.
Администрация сервера осуществляется провайдером.
• VPS/VDS (Virtual Private/Dedicated Server): Виртуальный сервер с гарантированным выделением ресурсов (CPU, RAM, диск). Клиент
получает root-доступ к своей виртуальной машине и может самостоятельно устанавливать ПО и настраивать окружение. Это промежуточный
вариант между виртуальным и выделенным хостингом.
• Выделенный сервер (dedicated server): Клиенту предоставляется в аренду целый физический сервер. Это даёт максимальный контроль,
производительность и безопасность, но и является наиболее дорогим решением. Используется для высоконагруженных проектов и
критичных приложений.
4. Типы веб-приложений (Static, SSR, SPA, PWA)
• Статический сайт (Static): Состоит из готовых HTML, CSS и JavaScript файлов. Сервер отдаёт их без изменений. Подходит для лендингов,
визиток, документации. Плюсы: высокая скорость, простота развёртывания, безопасность. Минусы: отсутствие интерактивности и
персонализации.
• Серверный рендеринг (SSR — Server-Side Rendering): HTML-страница генерируется на сервере при каждом запросе (например, с
помощью PHP, Python/Django, Node.js). Сервер выполняет бизнес-логику, запрашивает данные из БД и вставляет их в HTML-шаблон.
Подходит для блогов, новостных порталов, интернет-магазинов. Плюсы: хорошая SEO-оптимизация, быстрая первичная загрузка. Минусы:
нагрузка на сервер, менее интерактивный интерфейс.
• Одностраничное приложение (SPA — Single Page Application): После первой загрузки HTML-каркаса всё взаимодействие происходит
динамически через JavaScript. Сервер предоставляет данные в формате JSON через API. Рендеринг интерфейса происходит на стороне
клиента. Подходит для сложных веб-приложений: дашборды, почтовые клиенты, административные панели. Плюсы: высокая
интерактивность, скорость работы после загрузки. Минусы: сложность разработки, проблемы с SEO.
• Прогрессивное веб-приложение (PWA — Progressive Web App): Это SPA, расширенное возможностями нативных приложений: работа в
офлайн-режиме, push-уведомления, доступ к аппаратным функциям устройства, установка на домашний экран. Использует Service Workers
для кэширования. Плюсы: кроссплатформенность, высокий UX. Минусы: сложность реализации офлайн-логики.
5. Гиперссылки. Тег <a>. Изображения в HTML
• Тег <a> (гиперссылка): Создаёт кликабельную ссылку на другой ресурс.
o Основной атрибут: href="URL" — указывает адрес цели.
o Примеры:
html
<a href="https://example.com">Внешняя ссылка</a>
<a href="/about.html">Относительная ссылка</a>
<a href="#section1">Якорная ссылка внутри страницы</a>
<a href="mailto:email@example.com">Ссылка для отправки письма</a>
o Якорные ссылки требуют предварительного определения цели с помощью атрибута name или id: <a name="section1"></a>.
o Ссылки могут быть абсолютными (полный URL) или относительными (путь относительно текущего документа).
• Тег <img> (изображение): Встраивает изображение в документ.
o Обязательные атрибуты:
▪ src="URL" — путь к файлу изображения.
▪ alt="текст" — альтернативный текст, который отображается если изображение не загрузилось, и используется для
доступности (скринридеры).
o Опциональные атрибуты:
▪ width и height — задают размеры в пикселях.
o Пример: <img src="logo.png" alt="Логотип компании" width="200" height="100">.
o Тег <img> является одиночным (самозакрывающимся).
6. Разделение оформления и содержания. Таблицы стилей CSS. Подключение CSS
Основной принцип веб-разработки — разделение структуры (HTML) и оформления (CSS). Это повышает поддерживаемость, позволяет
переиспользовать стили и легко изменять дизайн сайта.
CSS (Cascading Style Sheets) — язык описания стилей.
Способы подключения CSS:
1. Внешняя таблица стилей (рекомендуется):
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
Стили хранятся в отдельном файле с расширением .css и применяются ко всем страницам, подключившим этот файл.
2. Встроенные стили (в секции <head>):
html
<head>
<style>
p { color: blue; }
</style>
</head>
Стили прописываются непосредственно в HTML-документе внутри тега <style>. Подходит для небольших проектов или демо.
3. Инлайн-стили (прямо в теге):
html
<p style="color: red;">Текст</p>
Стили задаются через атрибут style конкретного HTML-элемента. Не рекомендуется для реальных проектов, так как усложняет поддержку и
нарушает принцип разделения.
7. Определение стилей – классы, идентификаторы, теги, инлайн
В CSS стили определяются с помощью селекторов, которые указывают, к каким элементам применять правила.
1. Селектор по тегу (элементу): Применяется ко всем элементам данного типа на странице.
css
p { color: blue; } /* Все параграфы будут синими */
h1 { font-size: 2em; }
2. Селектор по классу: Начинается с точки .. Применяется ко всем элементам, у которых в атрибуте class указано это имя. Один элемент
может иметь несколько классов, а один класс может применяться ко многим элементам.
css
.highlight { background-color: yellow; }
.text-center { text-align: center; }
html
<p class="highlight text-center">Текст с двумя классами</p>
3. Селектор по идентификатору (ID): Начинается с решётки #. Применяется к единственному элементу на странице с указанным id. Должен
быть уникальным.
css
#header { height: 100px; }
#submit-button { background: green; }
html
<div id="header">...</div>
4. Инлайн-стили: Стили задаются напрямую в атрибуте style элемента. Имеют наивысший приоритет (но не рекомендуются).
html
<p style="font-weight: bold; color: purple;">Жирный фиолетовый текст</p>
8. CSS. Наследование и специфичность
Это два ключевых механизма, определяющих, какие стили в итоге будут применены к элементу.
А. Наследование (Inheritance)
• Некоторые CSS-свойства автоматически передаются от родительского элемента к дочерним. Это в основном свойства, связанные с текстом.
• Наследуемые свойства: color, font-family, font-size, line-height, text-align, visibility и др.
• Ненаследуемые свойства: width, height, margin, padding, border, background и др.
• Управление наследованием:
o inherit: Принудительно заставляет элемент унаследовать значение свойства у родителя.
o initial: Сбрасывает значение свойства до значения по умолчанию, определённого браузером.
o unset: Для наследуемых свойств ведёт себя как inherit, для ненаследуемых — как initial.
Б. Специфичность (Specificity)
• Это алгоритм, который браузер использует для определения того, какое правило CSS будет применено, если к одному элементу подходит
несколько конфликтующих правил.
• Специфичность рассчитывается как число с четырьмя компонентами: [a, b, c, d] (или 0,0,0,0).
o a: Стили с !important (не рекомендуется). Игнорирует обычную специфичность.
o b: Количество ID в селекторе (#header).
o c: Количество классов, псевдоклассов (:hover) и атрибутов ([type="text"]).
o d: Количество тегов и псевдоэлементов (::before).
Правила сравнения:
1. 2. 3. 4. 5. Сравнивается значение a. Если у одного правила !important, а у другого нет — первое побеждает.
Если !important одинаковый или отсутствует, сравнивается b.
Если b одинаково, сравнивается c.
Если c одинаково, сравнивается d.
Если все компоненты одинаковы, побеждает правило, которое было объявлено позже в коде (ниже по файлу).
Примеры:
• #nav .item → [0,1,1,0] (1 ID + 1 класс).
• div ul li a → [0,0,0,4] (4 тега).
• a:hover → [0,0,1,1] (1 тег + 1 псевдокласс).
Правило с [0,1,1,0] будет приоритетнее правила [0,0,0,4].
9. HTML-фреймворки. Twitter Bootstrap
HTML-фреймворки (или CSS-фреймворки) — это набор готовых инструментов (стилей, компонентов, скриптов), которые ускоряют и
стандартизируют процесс вёрстки веб-интерфейсов.
Twitter Bootstrap — один из самых популярных CSS-фреймворков.
• Основа: Использует систему модульной сетки (обычно 12-колоночную) для создания адаптивных макетов.
• Что включает:
o Сетка (Grid System): Классы для строк (row) и колонок (col-*) для гибкой компоновки.
o Готовые компоненты: Кнопки (btn), формы (form-control), навигационные панели (navbar), карточки (card), модальные окна
(modal) и многие другие.
o Утилитарные классы: Для быстрой стилизации: отступы (p-*, m-*), цвета текста и фона (text-primary, bg-light), выравнивание
(text-center).
o JavaScript-виджеты: Интерактивные элементы, такие как выпадающие меню, карусели, табы, которые работают на основе
встроенного JS Bootstrap.
• Преимущества:
o Быстрая разработка прототипов и готовых интерфейсов.
o Кроссбраузерность и адаптивность «из коробки».
o Большое сообщество и документация.
o Возможность кастомизации через переменные SASS.
• Недостатки:
o Размер итогового CSS-файла может быть избыточным, если использовать не все компоненты.
o Сайты на Bootstrap могут выглядеть типово без глубокой кастомизации.
10. Grid (CSS Grid Layout)
CSS Grid — это современная двумерная система макета в CSS, предназначенная для создания сложных сеточных интерфейсов. Она позволяет
управлять размещением элементов одновременно по горизонтали и вертикали.
Основные концепции:
• Grid Container: Элемент, для которого задано display: grid. Его прямые потомки автоматически становятся Grid Items.
• Grid Tracks: Колонки (grid-template-columns) и строки (grid-template-rows), которые определяют структуру сетки.
• Grid Lines: Линии, разделяющие колонки и строки. Они нумеруются (начиная с 1).
• Grid Cell: Пересечение одной строки и одной колонки.
• Grid Area: Прямоугольная область, охватывающая несколько ячеек.
Базовый синтаксис:
css
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 300px; /* 3 колонки: 200px, гибкая, 300px */
grid-template-rows: 100px auto 150px; /* 3 строки */
gap: 20px; /* Расстояние между элементами (ранее grid-gap) */
}
Размещение элементов:
Можно размещать элементы с помощью номеров линий или именованных областей (grid-template-areas).
css
.item {
grid-column: 1 / 3; /* Элемент занимает от 1-й до 3-й линии колонок */
grid-row: 2; /* Занимает вторую строку */
}
Преимущества Grid:
• Полный контроль над двумерным макетом.
• Возможность создавать сложные, несимметричные и перекрывающиеся области.
• Более чистый и семантичный HTML (по сравнению с таблицами или множеством обёрток).
11. Flexbox (CSS Flexible Box Layout)
Flexbox — это одномерная модель макета, предназначенная для распределения пространства и выравнивания элементов внутри контейнера вдоль
одной оси (горизонтально или вертикально). Идеально подходит для компонентов интерфейса: навигаций, карточек, центрирования.
Основные концепции:
• Flex Container: Элемент с display: flex. Его прямые потомки становятся Flex Items.
• Main Axis & Cross Axis: Главная ось (направление определяется flex-direction) и поперечная ось (перпендикулярна главной).
Ключевые свойства контейнера:
• flex-direction: Определяет направление главной оси (row, row-reverse, column, column-reverse).
• justify-content: Выравнивание элементов вдоль главной оси (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Выравнивание элементов вдоль поперечной оси (stretch, flex-start, flex-end, center, baseline).
• flex-wrap: Разрешает ли перенос элементов на новую строку (nowrap, wrap, wrap-reverse).
Ключевые свойства элементов (flex items):
• flex-grow: Определяет, насколько элемент может увеличиться относительно других, если есть свободное место.
• flex-shrink: Определяет, насколько элемент может уменьшиться при нехватке места.
• flex-basis: Исходный размер элемента до распределения свободного места.
• align-self: Позволяет переопределить align-items для отдельного элемента.
Пример центрирования:
css
.center-container {
display: flex;
justify-content: center; /* По горизонтали */
align-items: center; /* По вертикали */
height: 100vh;
}
Когда использовать Flexbox:
• Для выравнивания и распределения элементов в строке или колонке.
• Для создания адаптивных навигационных панелей.
• Для центрирования содержимого.
• Для создания гибких карточек или списков.
12. Медиа-запросы (Media Queries)
Медиа-запросы — это технология CSS3, которая позволяет применять стили в зависимости от характеристик устройства или среды отображения:
ширины и высоты окна браузера (viewport), ориентации, разрешения экрана, типа устройства.
Синтаксис:
css
@media тип_устройства and (условие) {
/* CSS-правила, которые применятся, если условие истинно */
}
• Тип устройства (опционально): screen (экраны), print (принтеры), all (все устройства).
• Условия: Чаще всего используются условия по ширине (width, min-width, max-width).
Типичные точки останова (breakpoints):
css
/* Для мобильных устройств (портретная ориентация) */
@media (max-width: 767px) {
body { font-size: 14px; }
}
/* Для планшетов и небольших ноутбуков */
@media (min-width: 768px) and (max-width: 1023px) {
.container { width: 750px; }
}
/* Для десктопов */
@media (min-width: 1024px) {
.container { width: 980px; }
}
Ориентация устройства:
css
@media (orientation: portrait) { /* Высота > ширины */ }
@media (orientation: landscape) { /* Ширина > высоты */ }
Подключение отдельных CSS-файлов через медиа-запросы:
html
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">
Зачем нужны:
• Для создания адаптивного веб-дизайна, когда макет подстраивается под разные размеры экрана.
• Для оптимизации отображения при печати (@media print).
• Для улучшения пользовательского опыта на разных устройствах.
13. Препроцессоры CSS (SASS, LESS)
Препроцессоры CSS — это инструменты, которые расширяют стандартный синтаксис CSS, добавляя возможности, которых в нём нет: переменные,
вложенность, миксины, функции, наследование. Код препроцессора затем компилируется в обычный CSS, который понимают браузеры.
Основные возможности (на примере SASS):
1. Переменные (Variables): Хранят значения для многократного использования (цвета, шрифты, отступы).
scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
body {
color: $primary-color;
font-family: $font-stack;
}
2. Вложенность (Nesting): Позволяет вкладывать селекторы, что отражает структуру HTML.
scss
nav {
ul {
margin: 0;
padding: 0;
li { display: inline-block; }
}
a {
text-decoration: none;
&:hover { color: red; } /* & ссылается на родительский селектор (a) */
}
}
3. Миксины (Mixins): Позволяют создавать переиспользуемые блоки CSS-кода, часто с параметрами.
scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
4. Наследование/Расширение (Extend): Позволяет одному селектору наследовать стили другого.
scss
.message {
border: 1px solid #ccc;
padding: 10px;
}
.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
5. Импорт (Import): Позволяет разбивать CSS-код на несколько файлов и импортировать их в один.
scss
@import 'variables';
@import 'buttons';
@import 'grid';
Популярные препроцессоры:
• SASS/SCSS: Самый популярный. Имеет два синтаксиса: SASS (с отступами) и SCSS (похож на обычный CSS).
• LESS: Похож на SCSS, но с некоторыми отличиями в синтаксисе и возможностях.
Преимущества:
• Повышают читаемость и поддерживаемость кода.
• Снижают количество повторяющегося кода (DRY — Don't Repeat Yourself).
• Ускоряют разработку.
• Позволяют создавать сложные, структурированные стили.
Недостатки:
• Требуют шага компиляции перед использованием в браузере.
• Добавляют сложность в процесс сборки проекта.
14. Модульные сетки в веб-дизайне
Модульная сетка — это система вертикальных и горизонтальных направляющих, которая структурирует пространство макета, организует контент и
задаёт визуальный ритм.
Основные термины (из лекции):
• Margin: Внешние поля, отделяющие контент от края страницы.
• Flowlines (Направляющие): Горизонтальные линии, разделяющие пространство.
• Columns (Колонки): Вертикальные полосы, по которым выравниваются элементы.
• Rows (Строки): Горизонтальные полосы.
• Gutters (Промежутки): Отступы между колонками и строками.
• Modules (Модули): Отдельные единицы пространства, образованные пересечением колонок и строк.
• Spatial Zones (Пространственные зоны): Группы модулей, объединённые по смыслу.
Зачем нужны:
• Создание порядка и гармонии: Элементы выглядят организованно и пропорционально.
• Ускорение работы: Дизайнер и разработчик следуют единой системе, что ускоряет вёрстку.
• Адаптивность: Сетка является основой для создания адаптивных макетов (например, 12-колоночная сетка в Bootstrap).
• Улучшение UX: Пользователю легче воспринимать структурированную информацию.
Принцип работы: Ширина макета разбивается на определённое число колонок (часто 12, 16, 24) равной или разной ширины. Элементы интерфейса
размещаются, занимая определённое количество колонок. При изменении ширины экрана колонки могут перестраиваться.
Пример расчёта для 12-колоночной сетки (ширина 1280px):
1280px = (85px * 12 колонок) + (20px * 11 промежутков) + (20px * 2 внешних поля)
15. Растровые форматы файлов для веб
Растровые изображения состоят из пикселей (точек). Качество зависит от разрешения (количества пикселей).