12 subscribers
182 photos
3 videos
212 links
Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.
Download Telegram
### Заключение
Этот урок познакомил вас с работой с библиотеками, регулярными выражениями и асинхронным программированием. Эти концепции помогут вам писать более мощные и эффективные программы. В следующих уроках мы рассмотрим работу с базами данных, тестирование и создание веб-приложений.

---
Отлично! пост посвященный шестому уроку по изучению HTML5. В этом уроке мы сосредоточимся на работе с таблицами, их стилизации и использовании семантических элементов для улучшения структуры и доступности веб-страниц.

---

🚀 Изучаем HTML5 | Урок 6: Таблицы и семантические элементы

Привет, друзья! В этом уроке мы продолжим изучать возможности HTML5, сосредоточившись на создании таблиц и использовании семантических элементов для улучшения структуры и доступности веб-страниц. Поехали! 🎉

---

### 📊 Таблицы в HTML5
Таблицы используются для отображения данных в строках и столбцах. Основные элементы таблицы: <table>, <tr>, <th>, <td>.

#### Пример таблицы:
<table border="1">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>25</td>
</tr>
<tr>
<td>Мария</td>
<td>Петрова</td>
<td>30</td>
</tr>
</table>


- `<table>`: Контейнер для таблицы.
- `<tr>`: Строка таблицы.
- `<th>`: Заголовок столбца.
- `<td>`: Ячейка таблицы.

---

### 🛠 Семантические элементы
Семантические элементы помогают лучше структурировать содержимое страницы и улучшить её доступность для поисковых систем и вспомогательных технологий.

#### Пример использования семантических элементов:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Семантические элементы</title>
</head>
<body>
<header>
<h1>Заголовок сайта</h1>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2>Статья 1</h2>
<p>Содержание статьи 1.</p>
</article>

<article>
<h2>Статья 2</h2>
<p>Содержание статьи 2.</p>
</article>
</main>

<aside>
<h3>Дополнительная информация</h3>
<p>Здесь может быть дополнительная информация.</p>
</aside>

<footer>
<p>&copy; 2023 Мой сайт</p>
</footer>
</body>
</html>


- `<header>`: Верхняя часть страницы или раздела.
- `<nav>`: Навигационное меню.
- `<main>`: Основное содержимое страницы.
- `<article>`: Независимый раздел содержимого.
- `<aside>`: Дополнительная информация, связанная с основным содержимым.
- `<footer>`: Нижняя часть страницы или раздела.

---

### 🎯 Практическое задание
1. Создайте таблицу с данными о ваших друзьях (имя, фамилия, возраст).
2. Используйте семантические элементы для структурирования вашей веб-страницы.
3. Добавьте навигационное меню и разделы с контентом.

---

💡 Совет: Используйте семантические теги для улучшения структуры и доступности вашего кода. Это не только сделает код чище, но и поможет поисковым системам лучше понять ваш контент.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши страницы стали стильными и красивыми! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

---
Урок 5: Flexbox — Гибкие макеты в CSS

Привет, друзья! 👋 Сегодня мы изучим Flexbox — одну из самых мощных и удобных технологий для создания гибких и адаптивных макетов. С помощью Flexbox вы сможете легко выравнивать элементы, распределять пространство и управлять порядком отображения. Поехали! 🚀

---

### Что такое Flexbox?
Flexbox (гибкий контейнер) — это модуль CSS, который позволяет создавать макеты с предсказуемым поведением, даже если размеры элементов динамические или неизвестны.

Основные понятия:
- Flex-контейнер — элемент, который содержит дочерние элементы (flex-элементы).
- Flex-элементы — дочерние элементы внутри flex-контейнера.

---

### Как создать Flex-контейнер?
Чтобы превратить элемент в flex-контейнер, используйте свойство display:
.container {
display: flex;
}



Теперь все дочерние элементы становятся flex-элементами.

---

### Основные свойства Flexbox

#### Для контейнера:
1. Направление оси (`flex-direction`)
Определяет, как элементы располагаются внутри контейнера:
- row (по умолчанию) — слева направо.
- row-reverse — справа налево.
- column — сверху вниз.
- column-reverse — снизу вверх.

Пример:

   .container {
flex-direction: column;
}


2. Выравнивание по главной оси (`justify-content`)
Распределяет элементы вдоль главной оси:
- flex-start (по умолчанию) — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.
- space-between — равное расстояние между элементами.
- space-around — равное пространство вокруг элементов.

Пример:

   .container {
justify-content: space-between;
}


3. Выравнивание по поперечной оси (`align-items`)
Выравнивает элементы вдоль поперечной оси:
- stretch (по умолчанию) — элементы растягиваются на всю высоту.
- flex-start — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.

Пример:

   .container {
align-items: center;
}


4. Многострочность (`flex-wrap`)
Позволяет элементам переноситься на новую строку, если они не помещаются:
- nowrap (по умолчанию) — элементы не переносятся.
- wrap — элементы переносятся.
- wrap-reverse — элементы переносятся в обратном порядке.

Пример:

   .container {
flex-wrap: wrap;
}


---

#### Для элементов:
1. Гибкость (`flex`)
Управляет тем, как элемент растягивается или сжимается относительно других:
- flex-grow — определяет, насколько элемент может растягиваться.
- flex-shrink — определяет, насколько элемент может сжиматься.
- flex-basis — задает начальный размер элемента.

Пример:

   .item {
flex: 1; /* Элемент растягивается на все доступное пространство */
}


2. Порядок (`order`)
Позволяет изменить порядок отображения элементов.

   .item {
order: 2; /* Элемент будет отображаться вторым */
}


3. Выравнивание отдельного элемента (`align-self`)
Позволяет переопределить выравнивание для конкретного элемента.

   .item {
align-self: flex-end;
}


---

### Практика
1. Создайте flex-контейнер и добавьте в него несколько элементов.
2. Поэкспериментируйте с justify-content, align-items и flex-direction.
3. Используйте flex-wrap, чтобы элементы переносились на новую строку.
4. Попробуйте изменить порядок элементов с помощью order.

---

### Домашнее задание
Создайте макет страницы с использованием Flexbox:
- Шапка с логотипом и меню.
- Основной контент с боковой панелью.
- Футер с выравниванием по центру.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем Grid Layout — еще более мощный инструмент для создания сложных макетов. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование
Урок 6: CSS Grid — Создание сложных макетов

Привет, друзья! 👋 Сегодня мы изучим CSS Grid — мощный инструмент для создания сложных и адаптивных макетов. Если Flexbox — это про одномерные макеты (строка или столбец), то Grid позволяет работать с двумерными сетками (строки и столбцы одновременно). Поехали! 🚀

---

### Что такое CSS Grid?
CSS Grid — это система для создания сеточных макетов. Она позволяет легко управлять строками, столбцами и промежутками между ними, а также размещать элементы в любом месте сетки.

Основные понятия:
- Grid-контейнер — элемент, который содержит дочерние элементы (grid-элементы).
- Grid-элементы — дочерние элементы внутри grid-контейнера.
- Строки и столбцы — определяют структуру сетки.

---

### Как создать Grid-контейнер?
Чтобы превратить элемент в grid-контейнер, используйте свойство display:
.container {
display: grid;
}



Теперь все дочерние элементы становятся grid-элементами.

---

### Основные свойства Grid

#### Для контейнера:
1. Определение строк и столбцов (`grid-template-rows`, `grid-template-columns`)
Задайте количество и размеры строк и столбцов:

   .container {
display: grid;
grid-template-columns: 100px 200px auto; /* 3 столбца */
grid-template-rows: 100px 300px; /* 2 строки */
}



Можно использовать единицы измерения: px, %, fr (доля свободного пространства).

2. Промежутки между элементами (`gap`)
Задайте расстояние между строками и столбцами:

   .container {
gap: 10px; /* Промежутки между всеми элементами */
row-gap: 15px; /* Только между строками */
column-gap: 20px; /* Только между столбцами */
}


3. Выравнивание элементов (`justify-items`, `align-items`)
- justify-items — выравнивание по горизонтали.
- align-items — выравнивание по вертикали.

Пример:

   .container {
justify-items: center; /* По горизонтали */
align-items: end; /* По вертикали */
}


4. Автоматическое создание строк и столбцов (`grid-auto-rows`, `grid-auto-columns`)
Если элементов больше, чем задано строк/столбцов, Grid автоматически создаст новые:

   .container {
grid-auto-rows: 100px; /* Высота новых строк */
}


---

#### Для элементов:
1. Размещение элемента в сетке (`grid-row`, `grid-column`)
Укажите, где должен располагаться элемент:

   .item {
grid-row: 1 / 3; /* Элемент занимает строки 1 и 2 */
grid-column: 2 / 4; /* Элемент занимает столбцы 2 и 3 */
}


2. Выравнивание отдельного элемента (`justify-self`, `align-self`)
Переопределите выравнивание для конкретного элемента:

   .item {
justify-self: start; /* По горизонтали */
align-self: center; /* По вертикали */
}


3. Именованные области (`grid-template-areas`)
Создайте именованные области и разместите элементы в них:

   .container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }


---

### Практика
1. Создайте grid-контейнер с 3 столбцами и 2 строками.
2. Разместите элементы в разных частях сетки.
3. Используйте gap, чтобы добавить промежутки между элементами.
4. Попробуйте создать макет с именованными областями.

---

### Домашнее задание
Создайте макет страницы с использованием CSS Grid:
- Шапка (header) на всю ширину.
- Боковая панель (sidebar) и основной контент (content).
- Футер (footer) на всю ширину.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем анимации и трансформации в CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
👉Создание и Раскрутка сайта от А до Я
Видеокурс "Создание и раскрутка сайта от А до Я"

Здравствуйте, дорогие мои читатели!

Наверное, каждый день каждый из Вас видит десятки (а то и сотни) самых различных сайтов. И некоторые из Вас наверняка горят желанием научиться делать такие же. Но вот только как?

Процесс этот совсем несложный, как кажется многим новичкам, но и не самый простой, поэтому долю труда вложить придётся. Но самое главное - это найти хорошее руководство! Безусловно, в Интернете есть большое количество бесплатных книг, однако, есть замечательная альтернатива книгам! И эта альтернатива называется Видеокурс!

Предлагаю Вашему вниманию один из них! Это Видеокурс "Создание и раскрутка сайта от А до Я" от Михаила Русакова: https://Hottab.programsite.ru/kurs.

Это действительно очень объёмный видеокурс, состоящий из 246 уроков общей продолжительностью более 50-ти часов, который раскрывает следующие темы:

HTML
CSS
JavaScript
PHP
MySQL
XML
Joomla
Регистрация сайта в Интернете
Раскрутка сайта
Фактически, ничего больше для создания и раскрутки сайтов и не нужно! Вы можете выбросить все книги, все Ваши видеокурсы, которые приобретали раньше! Всё, что Вам нужно теперь - это Универсальный Видеокурс "Создание и раскрутка сайта от А до Я" от Михаила Русакова!

Помимо универсальности, у этого курса есть ещё одно ОГРОМНОЕ преимущество. Процесс создания сайта демонстрируется на примере сайта MyRusakov.ru (личный сайт автора). Этот же сайт размещается в Интернете (прямо на Ваших глазах), а затем и раскручивается. То есть этот видеокурс - это не сухая теория, а чистой воды практика на реальном примере успешного и профессионального сайта!

Более полную информацию Вы можете получить, перейдя по ссылке: https://Hottab.programsite.ru/kurs
🚀 Изучаем HTML5 | Урок 7: Формы и элементы ввода

Привет, друзья! В этом уроке мы погрузимся в мир форм и элементов ввода, которые позволяют собирать данные от пользователей. HTML5 предлагает множество новых возможностей для создания удобных и функциональных форм. Давайте начнем! 🎉

---

### 📝 Основы форм
Формы создаются с помощью тега <form>. Они могут содержать различные элементы ввода, такие как текстовые поля, кнопки, флажки и многое другое.

#### Пример простой формы:
<form action="/submit" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Отправить</button>
</form>


- `action`: Указывает URL, на который отправляются данные формы.
- `method`: Определяет метод отправки данных (GET или POST).
- `required`: Обязательное поле для заполнения.

---

### 🛠 Элементы ввода
HTML5 предоставляет множество типов элементов ввода, которые упрощают сбор данных и улучшают пользовательский опыт.

#### Примеры:
<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color">

<label for="date">Дата:</label>
<input type="date" id="date" name="date">

<label for="range">Уровень удовлетворения:</label>
<input type="range" id="range" name="range" min="0" max="10">

<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file">


- `type="color"`: Поле для выбора цвета.
- `type="date"`: Поле для выбора даты.
- `type="range"`: Ползунок для выбора значения в диапазоне.
- `type="file"`: Поле для загрузки файлов.

---

### 🔍 Валидация форм
HTML5 упрощает валидацию данных с помощью встроенных атрибутов.

#### Пример:
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>


- `pattern`: Указывает регулярное выражение для проверки ввода.
- `type="tel"`: Поле для ввода номера телефона.

---

### 🎯 Практическое задание
1. Создайте форму регистрации с полями для имени, email, пароля и даты рождения.
2. Добавьте поле для выбора цвета и ползунок для оценки.
3. Используйте атрибуты валидации, чтобы сделать поля обязательными.

---

💡 Совет: Используйте семантические теги, такие как <fieldset> и <legend>, для группировки элементов формы. Это улучшит читаемость и доступность вашего кода.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши формы и страницы стали стильными и привлекательными! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)
📘 Полное руководство по PHP – Глава 10: Создание и использование RESTful API 🐘

В этой главе мы рассмотрим, как создавать и использовать RESTful API на PHP. API (Application Programming Interface) позволяет приложениям взаимодействовать друг с другом. Мы изучим основы REST, создадим простое API и научимся его использовать.

---

### 1. Что такое RESTful API?
REST (Representational State Transfer) — это архитектурный стиль для создания веб-сервисов. RESTful API использует HTTP-методы (GET, POST, PUT, DELETE) для выполнения операций с ресурсами.

---

### 2. Создание простого RESTful API
#### Шаг 1: Настройка маршрутов
Создайте файл index.php и настройте маршруты:
<?php
header("Content-Type: application/json");

$request_method = $_SERVER['REQUEST_METHOD'];
$request_uri = $_SERVER['REQUEST_URI'];

switch ($request_method) {
case 'GET':
if ($request_uri == '/users') {
getUsers();
} elseif (preg_match('/\/users\/(\d+)/', $request_uri, $matches)) {
getUser($matches[1]);
}
break;
case 'POST':
if ($request_uri == '/users') {
createUser();
}
break;
default:
http_response_code(405);
echo json_encode(["message" => "Метод не поддерживается"]);
}
?>


#### Шаг 2: Функции для обработки запросов
<?php
function getUsers() {
$users = [
["id" => 1, "name" => "Иван"],
["id" => 2, "name" => "Мария"]
];
echo json_encode($users);
}

function getUser($id) {
$users = [
1 => ["id" => 1, "name" => "Иван"],
2 => ["id" => 2, "name" => "Мария"]
];
if (isset($users[$id])) {
echo json_encode($users[$id]);
} else {
http_response_code(404);
echo json_encode(["message" => "Пользователь не найден"]);
}
}

function createUser() {
$data = json_decode(file_get_contents("php://input"), true);
if (isset($data['name'])) {
echo json_encode(["message" => "Пользователь создан", "name" => $data['name']]);
} else {
http_response_code(400);
echo json_encode(["message" => "Неверные данные"]);
}
}
?>


---

### 3. Использование API
#### GET-запрос (получение списка пользователей)
curl -X GET http://localhost/users

Ответ:
[
{"id": 1, "name": "Иван"},
{"id": 2, "name": "Мария"}
]


#### GET-запрос (получение одного пользователя)
curl -X GET http://localhost/users/1

Ответ:
{"id": 1, "name": "Иван"}


#### POST-запрос (создание пользователя)
curl -X POST -H "Content-Type: application/json" -d '{"name": "Алексей"}' http://localhost/users

Ответ:
{"message": "Пользователь создан", "name": "Алексей"}


---

### 4. Обработка ошибок
- 404 Not Found: Ресурс не найден.
- 400 Bad Request: Неверные данные.
- 405 Method Not Allowed: Метод не поддерживается.

Пример:
<?php
http_response_code(404);
echo json_encode(["message" => "Ресурс не найден"]);
?>


---

### 5. Работа с JSON
PHP предоставляет функции для работы с JSON:
- json_encode(): Преобразует массив в JSON.
- json_decode(): Преобразует JSON в массив.

Пример:
<?php
$data = ["name" => "Иван", "age" => 25];
$json = json_encode($data);
echo $json; // {"name":"Иван","age":25}

$array = json_decode($json, true);
print_r($array); // Array ( [name] => Иван [age] => 25 )
?>


---

### 6. Авторизация и токены
Для защиты API часто используются токены (например, JWT).

#### Пример с JWT
1. Установите библиотеку для работы с JWT:

   composer require firebase/php-jwt

2. Создайте токен:

   <?php
use Firebase\JWT\JWT;

$key = "your_secret_key";
$payload = [
"user_id" => 1,
"username" => "Иван"
];
$jwt = JWT::encode($payload, $key);
echo $jwt;
?>

3. Проверка токена:

   <?php
try {
$decoded = JWT::decode($jwt, $key, array('HS256'));
print_r($decoded);
} catch (Exception $e) {
http_response_code(401);
echo json_encode(["message" => "Ошибка авторизации"]);
}
?>




🎯 Что дальше?
В следующей главе мы изучим работу с файлами и загрузкой данных на сервер.

#PHP #API #RESTful #Программирование #Телеграм
Изучаем Python: Урок 5 — это продолжение нашего изучения Python. В этом уроке мы рассмотрим такие важные темы, как работа с базами данных, тестирование кода и создание веб-приложений. Эти навыки помогут вам создавать более сложные и надежные приложения.

---

### ⚠️ Важно!
Python — это мощный язык программирования, который используется для решения широкого круга задач. Убедитесь, что вы используете его в законных и этических целях.

---

### Шаг 1: Работа с базами данных
Python предоставляет множество инструментов для работы с базами данных. Мы рассмотрим работу с SQLite, встроенной в Python базой данных.

1. Создание базы данных и таблицы:

   import sqlite3

conn = sqlite3.connect("example.db")
cursor = conn.cursor()

cursor.execute("""
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
age INTEGER
)
""")

conn.commit()


2. Добавление данных:

   cursor.execute("INSERT INTO users (name, age) VALUES (?, ?)", ("Алексей", 25))
conn.commit()


3. Чтение данных:

   cursor.execute("SELECT * FROM users")
rows = cursor.fetchall()
for row in rows:
print(row) # Вывод: (1, 'Алексей', 25)


4. Закрытие соединения:

   conn.close()


---

### Шаг 2: Тестирование кода
Тестирование — это важная часть разработки, которая помогает убедиться, что ваш код работает правильно.

1. Использование модуля `unittest`:

   import unittest

def add(a, b):
return a + b

class TestMathOperations(unittest.TestCase):
def test_add(self):
self.assertEqual(add(2, 3), 5)
self.assertEqual(add(-1, 1), 0)

if __name__ == "__main__":
unittest.main()


2. Запуск тестов:
Сохраните код в файл и запустите его. Если все тесты пройдены, вы увидите сообщение OK.

---

### Шаг 3: Создание веб-приложений
Python предоставляет множество фреймворков для веб-разработки. Мы рассмотрим Flask, один из самых популярных микрофреймворков.

1. Установка Flask:

   pip install Flask


2. Создание простого веб-приложения:

   from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
return "Привет, мир!"

if __name__ == "__main__":
app.run(debug=True)


3. Запуск приложения:
Сохраните код в файл app.py и запустите его:

   python app.py

Откройте браузер и перейдите по адресу http://127.0.0.1:5000/. Вы увидите сообщение "Привет, мир!".

4. Добавление маршрутов:

   @app.route("/about")
def about():
return "О нас"


---

### Шаг 4: Практические примеры
1. Работа с базой данных в веб-приложении:

   from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

def get_db_connection():
conn = sqlite3.connect("example.db")
conn.row_factory = sqlite3.Row
return conn

@app.route("/users", methods=["GET"])
def get_users():
conn = get_db_connection()
cursor = conn.cursor()
cursor.execute("SELECT * FROM users")
users = cursor.fetchall()
conn.close()
return jsonify([dict(user) for user in users])

if __name__ == "__main__":
app.run(debug=True)


2. Тестирование веб-приложения:
Используйте библиотеку pytest для тестирования веб-приложений.

   pip install pytest


Создайте файл test_app.py:

   import pytest
from app import app

@pytest.fixture
def client():
app.config["TESTING"] = True
with app.test_client() as client:
yield client

def test_home(client):
response = client.get("/")
assert response.status_code == 200
assert b"Привет, мир!" in response.data

def test_about(client):
response = client.get("/about")
assert response.status_code == 200
assert b"О нас" in response.data


Запустите тесты:

   pytest test_app.py


---
### Заключение
Этот урок познакомил вас с работой с базами данных, тестированием кода и созданием веб-приложений. Эти навыки помогут вам создавать более сложные и надежные приложения. В следующих уроках мы рассмотрим работу с API, машинное обучение и создание графических интерфейсов.

---
Изучаем Python: Урок 4 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с библиотеками, регулярные выражения и асинхронное программирование. Эти концепции помогут вам писать более мощные и эффективные программы.

---

### 📚 Что вы узнаете:
1. Библиотеки: Как устанавливать и использовать популярные библиотеки, такие как requests, Pandas и NumPy.
2. Регулярные выражения: Как искать, заменять и разделять текст с помощью модуля re.
3. Асинхронное программирование: Как использовать async и await для выполнения задач одновременно.

---

### 🛠 Практические примеры:
1. Использование библиотеки `requests`:

   import requests
response = requests.get("https://api.github.com")
print(response.json())


2. Регулярные выражения для поиска email:

   import re
text = "Свяжитесь со мной: example@example.com"
pattern = r"[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+"
match = re.search(pattern, text)
print(match.group()) # Вывод: example@example.com


3. Асинхронная загрузка данных:

   import asyncio

async def fetch_data():
await asyncio.sleep(2)
return "Данные загружены!"

async def main():
result = await fetch_data()
print(result)

asyncio.run(main())


---

### 🚀 Почему это важно?
- Библиотеки экономят время, предоставляя готовые решения для сложных задач.
- Регулярные выражения помогают эффективно работать с текстом.
- Асинхронное программирование ускоряет выполнение задач, особенно при работе с сетью или файлами.

---

### 📌 Совет:
Попробуйте написать свой код, используя изученные концепции. Например, создайте асинхронный скрипт для загрузки данных с нескольких сайтов или используйте регулярные выражения для обработки текста.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
Урок 7: Анимации и трансформации в CSS

Привет, друзья! 👋 Сегодня мы изучим, как оживить ваши веб-страницы с помощью анимаций и трансформаций в CSS. Эти инструменты помогут вам создавать плавные переходы, вращение, масштабирование и другие эффекты. Поехали! 🚀

---

### Трансформации в CSS
Трансформации позволяют изменять форму, размер и положение элемента. Основные свойства:

1. Перемещение (`translate`)
Сдвигает элемент по осям X и Y:

   .box {
transform: translate(50px, 20px); /* Вправо на 50px, вниз на 20px */
}


2. Масштабирование (`scale`)
Увеличивает или уменьшает размер элемента:

   .box {
transform: scale(1.5); /* Увеличивает элемент в 1.5 раза */
}


3. Вращение (`rotate`)
Поворачивает элемент на заданный угол:

   .box {
transform: rotate(45deg); /* Поворот на 45 градусов */
}


4. Наклон (`skew`)
Наклоняет элемент по осям X и Y:

   .box {
transform: skew(20deg, 10deg); /* Наклон по X и Y */
}


5. Множественные трансформации
Можно комбинировать несколько трансформаций:

   .box {
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}


---

### Переходы (`transition`)
Переходы позволяют плавно изменять свойства элемента при наведении или других событиях.

1. Свойства перехода:
- transition-property — указывает, какое свойство анимировать (например, background-color, transform).
- transition-duration — длительность перехода (например, 1s).
- transition-timing-function — функция скорости (например, ease, linear).
- transition-delay — задержка перед началом перехода.

Пример:

   .box {
background-color: blue;
transition: background-color 0.5s ease, transform 1s;
}
.box:hover {
background-color: red;
transform: scale(1.2);
}


---

### Анимации (`@keyframes`)
Анимации позволяют создавать сложные последовательности изменений.

1. Создание анимации:
Используйте @keyframes, чтобы задать этапы анимации:

   @keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}


2. Применение анимации:
Используйте свойство animation, чтобы применить анимацию к элементу:

   .box {
animation: slide 3s infinite; /* Название, длительность, повтор */
}


3. Свойства анимации:
- animation-name — название анимации.
- animation-duration — длительность.
- animation-timing-function — функция скорости.
- animation-delay — задержка перед началом.
- animation-iteration-count — количество повторений (infinite для бесконечности).
- animation-direction — направление (normal, reverse, alternate).

---

### Практика
1. Создайте кнопку, которая увеличивается при наведении.
2. Добавьте плавный переход для изменения цвета фона.
3. Создайте анимацию, чтобы элемент двигался по кругу.

---

### Домашнее задание
Создайте страницу с использованием анимаций и трансформаций:
- Кнопка с эффектом наведения.
- Блок, который вращается при клике.
- Текст, который плавно появляется при загрузке страницы.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем адаптивный дизайн и медиазапросы. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
👉HTML5 и CSS3 для начинающих
Друзья, у меня иногда спрашивают, а где я учился создавать сайты? Я всегда отвечаю, что у Михаила Русакова. И вот недавно передо мной встала ещё одна задача.

Мне надо было изучить в кратчайшие сроки HTML5 и CSS3. И как раз у Михаила вышел новый курс, который посвящён этим новым технологиям. Они уже развиваются много лет, и вот сейчас они уже вышли на финишную прямую, и мы смело можем их использовать.

Вот как раз ссылка на курс: https://Hottab.programsite.ru/freehtml5

Курс бесплатный, но при этом Михаил рассказал все нюансы этих технологий, рассказал, где он сам изучал всё это. В общем, всё оказалось очень легко, и уже через пару дней, я отлично знал HTML5 и CSS3.

Таким образом, курс "HTML5 и CSS3 для начинающих" превзошёл все мои ожидания, особенно, если учесть, что он абсолютно бесплатный.

Для тех, кто захочет пойти дальше, у Михаила есть и полный курс, где помимо HTML5 и CSS3 делается вёрстка его сайта, но это уже платная версия. Она для тех, кто хочет всё и сразу. А для начала будет вполне достаточно и материала из бесплатной части: https://Hottab.programsite.ru/freehtml5
📘 Полное руководство по PHP – Глава 11: Работа с файлами и загрузка данных на сервер 🐘

В этой главе мы рассмотрим, как работать с файлами в PHP, включая загрузку файлов на сервер, чтение и запись данных, а также управление файловой системой. Эти навыки необходимы для создания функциональных веб-приложений.

---

### 1. Загрузка файлов на сервер
PHP позволяет загружать файлы на сервер через HTML-форму.

#### HTML-форма
<form action="upload.php" method="post" enctype="multipart/form-data">
Выберите файл: <input type="file" name="file">
<input type="submit" value="Загрузить">
</form>


#### Обработка загрузки (upload.php)
<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$upload_dir = 'uploads/';
$upload_file = $upload_dir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $upload_file)) {
echo "Файл успешно загружен!";
} else {
echo "Ошибка при загрузке файла!";
}
} else {
echo "Ошибка: " . $_FILES['file']['error'];
}
?>


---

### 2. Чтение и запись файлов
PHP предоставляет функции для работы с файлами.

#### Чтение файла
<?php
$file = fopen("example.txt", "r") or die("Не удалось открыть файл!");
echo fread($file, filesize("example.txt"));
fclose($file);
?>


#### Запись в файл
<?php
$file = fopen("example.txt", "w") or die("Не удалось открыть файл!");
$text = "Привет, мир!";
fwrite($file, $text);
fclose($file);
?>


---

### 3. Работа с директориями
PHP позволяет создавать, удалять и переименовывать директории.

#### Создание директории
<?php
if (!file_exists("new_dir")) {
mkdir("new_dir");
echo "Директория создана!";
} else {
echo "Директория уже существует!";
}
?>


#### Удаление директории
<?php
if (file_exists("new_dir")) {
rmdir("new_dir");
echo "Директория удалена!";
} else {
echo "Директория не существует!";
}
?>


#### Переименование директории
<?php
if (file_exists("old_dir")) {
rename("old_dir", "new_dir");
echo "Директория переименована!";
} else {
echo "Директория не существует!";
}
?>


---

### 4. Работа с CSV
CSV (Comma-Separated Values) — это формат для хранения табличных данных.

#### Чтение CSV
<?php
$file = fopen("data.csv", "r");
while (($data = fgetcsv($file, 1000, ",")) !== FALSE) {
print_r($data);
}
fclose($file);
?>


#### Запись в CSV
<?php
$file = fopen("data.csv", "w");
$data = [
["Иван", 25],
["Мария", 30]
];
foreach ($data as $row) {
fputcsv($file, $row);
}
fclose($file);
?>


---

### 5. Работа с JSON
JSON (JavaScript Object Notation) — это популярный формат для обмена данными.

#### Чтение JSON
<?php
$json = '{"name": "Иван", "age": 25}';
$array = json_decode($json, true);
print_r($array);
?>


#### Запись JSON
<?php
$array = ["name" => "Иван", "age" => 25];
$json = json_encode($array);
echo $json;
?>


---

### 6. Управление файловой системой
PHP предоставляет функции для работы с файловой системой.

#### Проверка существования файла
<?php
if (file_exists("example.txt")) {
echo "Файл существует!";
} else {
echo "Файл не существует!";
}
?>


#### Получение размера файла
<?php
echo "Размер файла: " . filesize("example.txt") . " байт";
?>


#### Удаление файла
<?php
if (unlink("example.txt")) {
echo "Файл удалён!";
} else {
echo "Ошибка при удалении файла!";
}
?>


---

🎯 Что дальше?
В следующей главе мы изучим работу с сессиями и куками, а также управление состоянием пользователя. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Файлы #Загрузка #Программирование #Телеграм
Изучаем Python: Урок 5 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с базами данных, тестирование кода и создание веб-приложений. Эти навыки помогут вам создавать более сложные и надежные приложения.

---

### 📚 Что вы узнаете:
1. Базы данных: Как работать с SQLite для хранения и обработки данных.
2. Тестирование: Как писать тесты для вашего кода с помощью модуля unittest.
3. Веб-приложения: Как создать простое веб-приложение с использованием Flask.

---

### 🛠 Практические примеры:
1. Работа с SQLite:

   import sqlite3

conn = sqlite3.connect("example.db")
cursor = conn.cursor()
cursor.execute("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)")
cursor.execute("INSERT INTO users (name, age) VALUES (?, ?)", ("Алексей", 25))
conn.commit()
conn.close()


2. Тестирование кода:

   import unittest

def add(a, b):
return a + b

class TestMathOperations(unittest.TestCase):
def test_add(self):
self.assertEqual(add(2, 3), 5)

if __name__ == "__main__":
unittest.main()


3. Создание веб-приложения с Flask:

   from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
return "Привет, мир!"

if __name__ == "__main__":
app.run(debug=True)


---

### 🚀 Почему это важно?
- Базы данных позволяют хранить и управлять большими объемами информации.
- Тестирование помогает убедиться, что ваш код работает правильно.
- Веб-приложения открывают двери к созданию полноценных онлайн-сервисов.

---

### 📌 Совет:
Попробуйте создать свое веб-приложение с использованием Flask и подключите к нему базу данных SQLite. Напишите тесты для проверки функциональности вашего приложения.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
---

🚀 Изучаем HTML5 | Урок 8: Мультимедиа и графика

Привет, друзья! В этом уроке мы продолжим изучать возможности HTML5, сосредоточившись на мультимедиа и графике. Мы узнаем, как добавлять аудио и видео на страницы, а также как создавать графику с помощью <canvas> и <svg>. Поехали! 🎉

---

### 🎧 Аудио и видео в HTML5
HTML5 предоставляет встроенную поддержку для добавления аудио и видео на веб-страницы без необходимости использования сторонних плагинов.

#### Пример аудио:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>


#### Пример видео:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео элемент.
</video>


- `controls`: Добавляет элементы управления (воспроизведение, пауза, громкость).
- `<source>`: Указывает источник файла и его тип.

---

### 🎨 Графика с помощью `<canvas>`
Элемент <canvas> используется для создания графики на лету с помощью JavaScript. Это мощный инструмент для рисования графиков, анимаций и даже игр.

#### Пример:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 50, 50);
</script>


- `getContext('2d')`: Получает контекст для рисования 2D графики.
- `fillRect(x, y, width, height)`: Рисует прямоугольник.

---

### 🖼 Графика с помощью `<svg>`
SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет создавать масштабируемые изображения. SVG можно использовать для создания сложных графических элементов, таких как иконки, диаграммы и анимации.

#### Пример:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>


- `<circle>`: Создает круг с заданными параметрами.
- `cx`, `cy`: Координаты центра круга.
- `r`: Радиус круга.

---

### 🎯 Практическое задание
1. Добавьте на свою страницу аудиоплеер и видеоплеер.
2. Создайте простой рисунок на элементе <canvas> с использованием JavaScript.
3. Используйте SVG для создания графического элемента, например, иконки или диаграммы.

---

💡 Совет: Используйте семантические теги (<header>, <main>, <footer>) для улучшения структуры вашей страницы. Это не только сделает код чище, но и поможет поисковым системам лучше понять ваш контент.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши страницы стали стильными и красивыми! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)
Урок 8: Адаптивный дизайн и медиазапросы

Привет, друзья! 👋 Сегодня мы изучим, как сделать ваши веб-страницы адаптивными, чтобы они отлично выглядели на любых устройствах — от смартфонов до больших мониторов. Для этого мы будем использовать медиазапросы и другие техники. Поехали! 🚀

---

### Что такое адаптивный дизайн?
Адаптивный дизайн — это подход к верстке, при котором страница автоматически подстраивается под размер экрана устройства. Это важно, ведь пользователи заходят на сайты с разных устройств: смартфонов, планшетов, ноутбуков и десктопов.

---

### Медиазапросы (`@media`)
Медиазапросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и разрешение.

#### Основной синтаксис:
@media (условие) {
/* Стили, которые применяются при выполнении условия */
}



#### Примеры условий:
1. Ширина экрана:

   @media (max-width: 768px) {
body {
background-color: lightblue;
}
}


Этот стиль применится, если ширина экрана меньше или равна 768px.

2. Ориентация устройства:

   @media (orientation: portrait) {
body {
font-size: 18px;
}
}


Этот стиль применится, если устройство находится в портретной ориентации.

3. Минимальная и максимальная ширина:

   @media (min-width: 480px) and (max-width: 1024px) {
.container {
width: 90%;
}
}


Этот стиль применится для экранов от 480px до 1024px.

---

### Подходы к адаптивному дизайну

1. Mobile First
Сначала создаются стили для мобильных устройств, а затем добавляются медиазапросы для более широких экранов.

Пример:

   body {
font-size: 14px;
}
@media (min-width: 768px) {
body {
font-size: 16px;
}
}


2. Использование относительных единиц
Используйте %, em, rem, vw, vh вместо фиксированных значений (px), чтобы элементы масштабировались пропорционально.

Пример:

   .container {
width: 100%; /* Занимает всю ширину экрана */
padding: 2rem; /* Отступы в зависимости от размера шрифта */
}


3. Гибкие изображения
Чтобы изображения не выходили за пределы контейнера:

   img {
max-width: 100%;
height: auto;
}


---

### Практика
1. Создайте простую страницу с текстом и изображением.
2. Добавьте медиазапросы, чтобы:
- На экранах меньше 768px текст был больше, а изображение занимало всю ширину.
- На экранах больше 1200px контент был центрирован и занимал 60% ширины.

---

### Домашнее задание
Создайте адаптивную страницу:
- На мобильных устройствах элементы должны отображаться в один столбец.
- На планшетах — в два столбца.
- На десктопах — в три столбца.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем препроцессоры CSS (SASS/SCSS). Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
👉Видеокурс "Создание движка на PHP и MySQL 2.0"
Я достаточно давно занимаюсь созданием сайтов. И у меня иногда мои знакомые спрашивают, где я всему этому научился. Я решил, что эта информация может быть кому-нибудь полезна и среди моих читателей.

Где-то 90% своих знаний я почерпнул из курсов Михаила Русакова. И вот не так давно у него вышел очень интересный курс по теме создания собственных движков для сайтов. Эта тема очень актуальна, если Вы хотите создавать по-настоящему профессиональные сайты. У готовых движков есть огромное количество минусов (многие о них даже не догадываются). О них Михаил рассказал здесь: https://Hottab.programsite.ru/php2

На той же странице можно заказать курс "Создание движка на PHP и MySQL 2.0", который я уже приобрёл и посмотрел сам. Мне он очень понравился, но отмечу, что курс рассчитан, в первую очередь, на тех, кто уже знаком с HTML+CSS+PHP+MySQL.

Поэтому если Вы хотите создавать качественные сайты и выделиться на фоне сайтов на Joomla всяких школьников, то могу посоветовать курс Михаила Русакова: https://Hottab.programsite.ru/php2 - по крайней мере в Рунете лучше курса по этой теме я ещё точно не видел.
📘 Полное руководство по PHP – Глава 12: Работа с сессиями и куками 🐘

В этой главе мы рассмотрим, как управлять состоянием пользователя с помощью сессий и кук. Эти технологии позволяют сохранять данные между запросами, что особенно полезно для авторизации, корзин покупок и персонализации.

---

### 1. Сессии
Сессии позволяют хранить данные на сервере для каждого пользователя. Каждая сессия имеет уникальный идентификатор, который передаётся через куки.

#### Начало сессии
<?php
session_start();
?>


#### Сохранение данных в сессии
<?php
session_start();
$_SESSION['username'] = "Иван";
echo "Данные сохранены в сессии!";
?>


#### Получение данных из сессии
<?php
session_start();
if (isset($_SESSION['username'])) {
echo "Привет, " . $_SESSION['username'] . "!";
} else {
echo "Сессия не найдена!";
}
?>


#### Удаление данных из сессии
<?php
session_start();
unset($_SESSION['username']);
echo "Данные удалены из сессии!";
?>


#### Завершение сессии
<?php
session_start();
session_destroy();
echo "Сессия завершена!";
?>


---

### 2. Куки
Куки позволяют хранить данные на стороне клиента. Они могут быть использованы для персонализации или отслеживания пользователей.

#### Установка куки
<?php
setcookie("username", "Иван", time() + 3600, "/");
echo "Кука установлена!";
?>


#### Получение данных из куки
<?php
if (isset($_COOKIE['username'])) {
echo "Привет, " . $_COOKIE['username'] . "!";
} else {
echo "Кука не найдена!";
}
?>


#### Удаление куки
<?php
setcookie("username", "", time() - 3600, "/");
echo "Кука удалена!";
?>


---

### 3. Пример: Авторизация с использованием сессий
#### Форма входа
<form action="login.php" method="post">
Имя пользователя: <input type="text" name="username">
Пароль: <input type="password" name="password">
<input type="submit" value="Войти">
</form>


#### Обработка входа (login.php)
<?php
session_start();

$username = $_POST['username'];
$password = $_POST['password'];

// Проверка логина и пароля (пример)
if ($username === "Иван" && $password === "12345") {
$_SESSION['username'] = $username;
echo "Вход выполнен!";
} else {
echo "Неверные данные!";
}
?>


#### Проверка авторизации
<?php
session_start();

if (isset($_SESSION['username'])) {
echo "Привет, " . $_SESSION['username'] . "!";
} else {
echo "Пожалуйста, войдите в систему.";
}
?>


#### Выход из системы
<?php
session_start();
session_destroy();
echo "Вы вышли из системы!";
?>


---

### 4. Пример: Запоминание пользователя с использованием кук
#### Установка куки при входе
<?php
$username = $_POST['username'];
$password = $_POST['password'];

if ($username === "Иван" && $password === "12345") {
setcookie("username", $username, time() + 3600, "/");
echo "Вход выполнен!";
} else {
echo "Неверные данные!";
}
?>


#### Проверка куки
<?php
if (isset($_COOKIE['username'])) {
echo "Привет, " . $_COOKIE['username'] . "!";
} else {
echo "Пожалуйста, войдите в систему.";
}
?>


---

### 5. Безопасность
- Сессии: Используйте session_regenerate_id() для предотвращения фиксации сессии.
- Куки: Устанавливайте флаг HttpOnly и Secure для защиты от XSS и перехвата.

  setcookie("username", "Иван", time() + 3600, "/", "", true, true);


---

🎯 Что дальше?
В следующей главе мы изучим работу с базами данных, включая PDO и ORM. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Сессии #Куки #Программирование #Телеграм
Изучаем Python: Урок 6 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с API, машинное обучение и создание графических интерфейсов (GUI). Эти навыки помогут вам создавать современные и интерактивные приложения.

---

### 📚 Что вы узнаете:
1. Работа с API: Как взаимодействовать с внешними сервисами через API.
2. Машинное обучение: Как использовать библиотеку scikit-learn для создания моделей машинного обучения.
3. Графические интерфейсы: Как создавать простые GUI с использованием библиотеки Tkinter.

---

### 🛠 Практические примеры:
1. Работа с API:

   import requests

response = requests.get("https://api.github.com")
print(response.json()) # Вывод JSON-данных


2. Машинное обучение с `scikit-learn`:

   from sklearn.datasets import load_iris
from sklearn.model_selection import train_test_split
from sklearn.ensemble import RandomForestClassifier
from sklearn.metrics import accuracy_score

data = load_iris()
X_train, X_test, y_train, y_test = train_test_split(data.data, data.target, test_size=0.3)
model = RandomForestClassifier()
model.fit(X_train, y_train)
predictions = model.predict(X_test)
print("Точность модели:", accuracy_score(y_test, predictions))


3. Создание GUI с `Tkinter`:

   import tkinter as tk

def on_button_click():
label.config(text="Привет, мир!")

app = tk.Tk()
app.title("Мое приложение")
label = tk.Label(app, text="Нажмите кнопку")
label.pack()
button = tk.Button(app, text="Нажми меня", command=on_button_click)
button.pack()
app.mainloop()


---

### 🚀 Почему это важно?
- API позволяют взаимодействовать с внешними сервисами, такими как социальные сети, погодные сервисы и многое другое.
- Машинное обучение открывает двери к созданию интеллектуальных систем, способных анализировать данные и делать прогнозы.
- Графические интерфейсы делают ваши приложения более удобными и интерактивными.

---

### 📌 Совет:
Попробуйте создать свое приложение с использованием API, например, для получения данных о погоде. Или создайте простую модель машинного обучения для классификации данных.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
🚀 Изучаем HTML5 | Урок 9: Формы и элементы ввода

Привет, друзья! В этом уроке мы погрузимся в мир форм и элементов ввода, которые позволяют собирать данные от пользователей. HTML5 предлагает множество новых возможностей для создания удобных и функциональных форм. Давайте начнем! 🎉

---

### 📝 Основы форм
Формы создаются с помощью тега <form>. Они могут содержать различные элементы ввода, такие как текстовые поля, кнопки, флажки и многое другое.

#### Пример простой формы:
<form action="/submit" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Отправить</button>
</form>


- `action`: Указывает URL, на который отправляются данные формы.
- `method`: Определяет метод отправки данных (GET или POST).
- `required`: Обязательное поле для заполнения.

---

### 🛠 Элементы ввода
HTML5 предоставляет множество типов элементов ввода, которые упрощают сбор данных и улучшают пользовательский опыт.

#### Примеры:
<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color">

<label for="date">Дата:</label>
<input type="date" id="date" name="date">

<label for="range">Уровень удовлетворения:</label>
<input type="range" id="range" name="range" min="0" max="10">

<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file">


- `type="color"`: Поле для выбора цвета.
- `type="date"`: Поле для выбора даты.
- `type="range"`: Ползунок для выбора значения в диапазоне.
- `type="file"`: Поле для загрузки файлов.

---

### 🔍 Валидация форм
HTML5 упрощает валидацию данных с помощью встроенных атрибутов.

#### Пример:
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>


- `pattern`: Указывает регулярное выражение для проверки ввода.
- `type="tel"`: Поле для ввода номера телефона.

---

### 🎯 Практическое задание
1. Создайте форму регистрации с полями для имени, email, пароля и даты рождения.
2. Добавьте поле для выбора цвета и ползунок для оценки.
3. Используйте атрибуты валидации, чтобы сделать поля обязательными.

---

💡 Совет: Используйте семантические теги, такие как <fieldset> и <legend>, для группировки элементов формы. Это улучшит читаемость и доступность вашего кода.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши формы и страницы стали стильными и привлекательными! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

-