Web-программирование
Web-программирование — процесс создания веб сайтов и приложений. Делится на два вида: Frontend и backend.
Frontend — программирование — создание части сайта, с которой непосредственно взаимодействует пользователь. Туда входят объекты, которые видит пользователь, например, кнопки, фон, текст и т. п.
Языки:
— HTML
— CSS
— JavaScript
Backend-программирование — создание той части сайта или приложения, которая взаимодействует на сервере, и этого пользователь не видит. Оно отвечает за обработку данных, управлениями пользователями и обеспечением безопасности.
Языки:
— Python
— Java
— PHP
— C#
— Kotlin
Мы разберем Frontend программирование
С нуля до страницы: первое знакомство с HTML
HTML — язык гипертекстовой разметки. Он служит основой сайта, указывает браузеру, какие элементы должны быть на странице и в каком порядке их отображать. Задает только каркас документа, а не его поведение или внешний вид.
Основная структура:
// объявление типа документа
// корневой элемент страницы
// содержит данные о сайте
// указывает кодировку документа
//
Чтобы добавить информации в наш сайт, то применяются так называемые тэги. Строятся следующим образом <название тэга>«Какой-нибудь текст»
Приведем пример:
—
Текст 123
— отвечает за создание заголовков.Результат:
— Для добавления абзаца используется тег
(например,
Подзаголовок 123
)Результат:
Один из основных и важных атрибутов в HTML, который я использовал, был Он помогает объединить объекты в один общий. Очень помогает для создания отдельных плашек и заднего фона.
Использование div выглядит так:
Текст 123
Подзаголовок 123
Для того, чтобы придавать стили объектам, например, какой цвет будет объект, какое будет иметь положение, ширину, длину и т. п., используется язык стилей CSS.
CSS — душа современного сайта
CSS (Cascading Style Sheets, «каскадные таблицы стилей») — язык описания стилей, который используется для задания внешнего вида элементов на веб-странице.
Рассмотрим примеры простейших атрибутов и примеры, которые я использовал в создании сайта
1-й пример:
.library-subtitle {
font-size: 32px;
color: blue;
letter-spacing: 3px;
}
Разбор:
— font-size отвечает за размеры шрифта
— color — отвечает за придачу цвета
— letter-spacing — отвечает за интервал между буквами
Результат:
2-й пример:
.download-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(255, 77, 0, 0.4);
}
Разбор:
— :hover означает, что этот стиль будет выполняться при наведении
— transform отвечает за анимацию. В данном случае показан translateY, который сдвигает объект по оси Y
— Свойство CSS box-shadow позволяет добавить тень вокруг элемента.
0 — Смещение по горизонтали (offset-x)
10px — Смещение по вертикали (offset-y)
20px — Радиус размытия
rgba(255, 77, 0, 0.4) — первые три числа показывает цвет, последнее — непрозрачность
Результат:
До наведения:
При наведении:
3-й пример:
@media (min-width: 768px) {
.element {
}
}
Разбор:
— @media помогает нам при адаптивной вёрстке, т. е. вёрстке для разных типов экранов. min-width: 768px означает, что все стили в этой медиа будут для планшетов.
Результат:
Экран компьютера
Экран планшета:
Как подключить CSS в HTML? Есть два выхода
- Внешняя таблица стилей
— Вначале создаём папку с любым названием, например, «styles.css»
— Подключаем в с помощью тега :
-
Внутренние стили (внутри тега
Язык программирования JavaScript
JavaScript — скриптовый язык программирования, что означает, что он выполняется в браузере клиента. это позволяет веб-страницам реагировать на действия пользователя без необходимости загружать новую страницу. Javascript выполняет асинхронные операции, что позволяет не блокировать пользовательский интерфейс во время выполнения долгих операций, например, запросов к серверу.
Как подключить JS к HTML?
1-й способ:
- Создать файл с расширением.js, например, script.js
- Добавить в HTML тег 2-й способ: Аналогично 2 пункту первого способа, только код мы пишем внутри тега
