226 lines
12 KiB
HTML
Executable File
226 lines
12 KiB
HTML
Executable File
<!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>
|