226 lines
12 KiB
HTML
226 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>Главная страница</title>
|
|||
|
|
<link rel="icon" type="image/svg+xml" href="src/img/house-solid.svg" />
|
|||
|
|
<link rel="stylesheet" href="src/css/main.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<!-- Информация в шапке сайта -->
|
|||
|
|
<div class="header-info">
|
|||
|
|
<!-- Логотип -->
|
|||
|
|
<div>
|
|||
|
|
<img
|
|||
|
|
src="src/img/earth-europe-solid.svg"
|
|||
|
|
alt="Логотип"
|
|||
|
|
class="icon" />
|
|||
|
|
<p>Лого</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- Основная информация -->
|
|||
|
|
<div>
|
|||
|
|
<p>Группа: <u>ЭФБО-09-23</u></p>
|
|||
|
|
<p>Калинин Никита Викторович</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Основная навигация в шапке -->
|
|||
|
|
<nav class="header-navigation">
|
|||
|
|
<a href="index.html" class="header-navigation-link">Главная страница</a>
|
|||
|
|
<a href="first_term.html" class="header-navigation-link"
|
|||
|
|
>Первый семестр</a
|
|||
|
|
>
|
|||
|
|
<a href="second_term" class="header-navigation-link">Второй семестр</a>
|
|||
|
|
<a href="services.html" class="header-navigation-link">Услуги</a>
|
|||
|
|
<a href="#" class="header-navigation-link">Авторизация</a>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- Навигация по странице -->
|
|||
|
|
<nav class="page-navigation">
|
|||
|
|
<p>Навигация по странице</p>
|
|||
|
|
<ul style="padding: 0; list-style: none">
|
|||
|
|
<li>
|
|||
|
|
<a href="#frontend-header" class="page-navigation-link">Фронтенд</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#backend-header" class="page-navigation-link">Бэкенд</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
<!-- Основной контент страницы -->
|
|||
|
|
<main class="page-info">
|
|||
|
|
<!-- Заголовок страницы -->
|
|||
|
|
<h1>Добро пожаловать на мой сайт</h1>
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- Введение -->
|
|||
|
|
<p style="width: 50%">
|
|||
|
|
Меня зовут Иванов Иван Иванович и я начинающий специалист по
|
|||
|
|
веб-разработке.
|
|||
|
|
</p>
|
|||
|
|
<!-- Изображение пользователя -->
|
|||
|
|
<img src="src/img/user-solid.svg" alt="user" class="user-image" />
|
|||
|
|
</div>
|
|||
|
|
<!-- Раздел о фронтенде -->
|
|||
|
|
<section>
|
|||
|
|
<h2 id="frontend-header">Фронтенд</h2>
|
|||
|
|
<p>
|
|||
|
|
Фронтенд (Frontend) — это часть веб-разработки, которая отвечает за
|
|||
|
|
создание пользовательского интерфейса и взаимодействие пользователя
|
|||
|
|
с веб-приложением. Другими словами, фронтенд охватывает все, что
|
|||
|
|
пользователь видит на экране и с чем он взаимодействует в браузере.
|
|||
|
|
Основная задача фронтенд-разработчика — сделать так, чтобы сайт или
|
|||
|
|
веб-приложение были удобными, понятными и эстетически приятными для
|
|||
|
|
пользователя.
|
|||
|
|
</p>
|
|||
|
|
<p>Ключевые технологии фронтенда:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<i>HTML (HyperText Markup Language)</i> — язык разметки, который
|
|||
|
|
определяет структуру веб-страницы. Он используется для создания
|
|||
|
|
различных элементов, таких как заголовки, абзацы, ссылки,
|
|||
|
|
изображения и другие элементы веб-страницы.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>CSS (Cascading Style Sheets)</i> — каскадные таблицы стилей,
|
|||
|
|
которые отвечают за внешний вид веб-страницы. С помощью CSS можно
|
|||
|
|
задавать стили для различных элементов HTML, например, цвета,
|
|||
|
|
шрифты, размеры, отступы и расположение на странице.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>JavaScript</i> — язык программирования, который позволяет
|
|||
|
|
создавать динамическое и интерактивное поведение на веб-странице.
|
|||
|
|
С его помощью можно реализовывать различные анимации, обработку
|
|||
|
|
событий, валидацию форм и взаимодействие с сервером без
|
|||
|
|
перезагрузки страницы.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Современные инструменты и библиотеки:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<i>Фреймворки</i> — такие как React, Angular, Vue.js, которые
|
|||
|
|
предоставляют готовые компоненты и архитектуры для создания
|
|||
|
|
сложных веб-приложений.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>Системы сборки</i> — Webpack, Gulp, которые помогают
|
|||
|
|
автоматизировать процесс сборки и оптимизации кода.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>Системы контроля версий</i> — Git, которые позволяют
|
|||
|
|
отслеживать изменения в коде и работать в команде.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<h4>Роль фронтенд-разработчика</h4>
|
|||
|
|
<p>
|
|||
|
|
Фронтенд-разработчик не только создает визуальную часть
|
|||
|
|
веб-приложения, но и обеспечивает её корректную работу на различных
|
|||
|
|
устройствах и браузерах, учитывая особенности пользовательского
|
|||
|
|
опыта. Он должен тесно сотрудничать с дизайнерами и
|
|||
|
|
бэкенд-разработчиками, чтобы добиться максимальной эффективности и
|
|||
|
|
функциональности приложения.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<video width="640" height="360" controls>
|
|||
|
|
<source src="src/videos/frontend.mp4" type="video/mp4" />
|
|||
|
|
Ваш браузер не поддерживает видео-тег.
|
|||
|
|
</video>
|
|||
|
|
</section>
|
|||
|
|
<!-- Раздел о бэкенде -->
|
|||
|
|
<section>
|
|||
|
|
<h2 id="backend-header">Бэкенд</h2>
|
|||
|
|
<p>
|
|||
|
|
Бэкенд (Backend) — это часть веб-разработки, которая отвечает за
|
|||
|
|
серверную логику, работу с базами данных и общую инфраструктуру,
|
|||
|
|
поддерживающую работу веб-приложения. Если фронтенд — это то, что
|
|||
|
|
видит и с чем взаимодействует пользователь, то бэкенд — это то, что
|
|||
|
|
происходит "за кулисами". Бэкенд обрабатывает запросы пользователя,
|
|||
|
|
взаимодействует с базами данных, управляет сессиями и обеспечивает
|
|||
|
|
безопасность приложения.
|
|||
|
|
</p>
|
|||
|
|
<p>Ключевые технологии бэкенда:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<i>Языки программирования</i> — такие как Python, Java, PHP, Ruby,
|
|||
|
|
JavaScript (Node.js), которые позволяют создавать серверную логику
|
|||
|
|
и обрабатывать запросы от фронтенда.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>СУБД (Системы управления базами данных)</i> — MySQL,
|
|||
|
|
PostgreSQL, MongoDB, которые отвечают за хранение и управление
|
|||
|
|
данными. Бэкенд-разработчик создает запросы к базам данных и
|
|||
|
|
обрабатывает полученные результаты.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>API (Application Programming Interface)</i> — интерфейсы
|
|||
|
|
программирования приложений, такие как REST и GraphQL, которые
|
|||
|
|
используются для взаимодействия между фронтендом и бэкендом, а
|
|||
|
|
также между различными сервисами внутри приложения.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Современные инструменты и фреймворки:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<i>Фреймворки</i> — такие как Django, Spring, Express.js, которые
|
|||
|
|
предоставляют готовые решения для создания и управления серверной
|
|||
|
|
логикой.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>Системы контейнеризации и виртуализации</i> — Docker,
|
|||
|
|
Kubernetes, которые упрощают развертывание и масштабирование
|
|||
|
|
приложений.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<i>Системы управления версиями</i> — такие как Git, которые
|
|||
|
|
позволяют отслеживать изменения в коде и эффективно работать в
|
|||
|
|
команде.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<h4>Роль бэкенд-разработчика</h4>
|
|||
|
|
<p>
|
|||
|
|
Бэкенд-разработчик отвечает за стабильную работу серверной части
|
|||
|
|
приложения, безопасность данных и эффективность обработки запросов.
|
|||
|
|
Он должен уметь работать с большими объемами данных, обеспечивать
|
|||
|
|
защиту от различных угроз, таких как SQL-инъекции и атаки типа DDoS,
|
|||
|
|
и оптимизировать работу серверов для быстрой обработки запросов.
|
|||
|
|
Взаимодействие с фронтенд-разработчиками и другими членами команды
|
|||
|
|
также является важной частью работы бэкенд-разработчика.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<video width="640" height="360" controls>
|
|||
|
|
<source src="src/videos/backend.mp4" type="video/mp4" />
|
|||
|
|
Ваш браузер не поддерживает видео-тег.
|
|||
|
|
</video>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Футер сайта -->
|
|||
|
|
<footer class="footer">
|
|||
|
|
<p style="margin: auto">© 2024 Все права защищены.</p>
|
|||
|
|
<!-- Социальные сети -->
|
|||
|
|
<div>
|
|||
|
|
<a
|
|||
|
|
href="https://vk.com"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
class="footer-navigation-link">
|
|||
|
|
<img src="src/img/vk-brands-solid.svg" alt="vkontakte" class="icon" />
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href="https://t.me"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
class="footer-navigation-link">
|
|||
|
|
<img
|
|||
|
|
src="src/img/telegram-brands-solid.svg"
|
|||
|
|
alt="telegram"
|
|||
|
|
class="icon" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|