rm -r
@rm_programmer
12 subscribers
182 photos
3 videos
212 links
Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.
Download Telegram
About
Blog
Apps
Platform
Join
rm -r
12 subscribers
rm -r
👉Видеокурс по основам PHP 7
Не секрет, что PHP - это самый популярный язык Web-программирования. По этой причине его должен знать любой, кто планирует создавать мало-мальски серьёзные сайты. Так же те, кто планирует устроиться на работу Web-программистом, должны помнить, что самый основной и самый требуемый язык - это PHP.

Не секрет, что 21 век - это век IT, и очень хорошо, если Вы освоите Web-программирование, тогда в 21-м веке Вы уже без работы не останетесь.

Но как освоить PHP? В Интернете тонны информации, начиная с сотен тысяч статей и заканчивая тысячами книг. Как новичку разобраться?

Хочу порекомендовать Вам курс по PHP 7 от Михаила Русакова. Михаил Русаков - это многолетний практик, и он, в отличие от многих авторов книг, знает, что нужно знать, а что совсем не обязательно. Его курс содержит всё то, что нужно и ничего лишнего. И самое главное, что курс бесплатный!

Курс состоит из 28 видеоуроков по всем базовым вещам в PHP 7, и это будет уже отличной базой для дальнейшего развития. Я этот курс уже посмотрел, и остался очень доволен, поэтому рекомендую всем. Ссылка на курс: https://Hottab.programsite.ru/freephp7
11 views
rm -r
📘 Полное руководство по PHP – Глава 7: Работа с файлами и загрузка данных на сервер 🐘

В этой главе мы рассмотрим, как работать с файлами в 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 #Файлы #Загрузка #Программирование #Телеграм
8 views
rm -r
Изучаем Python: Урок 2 — это продолжение нашего путешествия в мир программирования на Python. В этом уроке мы рассмотрим более сложные темы, такие как функции, списки, словари и работа с файлами. Эти концепции являются ключевыми для написания более структурированных и мощных программ.

---

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

---

### Шаг 1: Функции
Функции позволяют организовать код в блоки, которые можно повторно использовать.

1. Создание функции:
Используйте ключевое слово def для определения функции.

   def greet(name):
       print(f"Привет, {name}!")


2. Вызов функции:

   greet("Алексей")

Вывод:

   Привет, Алексей!
   


3. Функции с возвращаемым значением:
   Используйте return для возврата значения.
   

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

   result = add(3, 5)
   print(result)  # Вывод: 8


---

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

1. Создание списка:

   fruits = ["яблоко", "банан", "вишня"]


2. Доступ к элементам:

   print(fruits[0])  # Вывод: яблоко
   print(fruits[-1]) # Вывод: вишня


3. Изменение элементов:

   fruits[1] = "груша"
   print(fruits)  # Вывод: ["яблоко", "груша", "вишня"]


4. Методы списков:
- append(): Добавляет элемент в конец списка.

     fruits.append("апельсин")

- remove(): Удаляет элемент по значению.

     fruits.remove("груша")

- len(): Возвращает количество элементов.

     print(len(fruits))  # Вывод: 3


---

### Шаг 3: Словари
Словари — это неупорядоченные коллекции пар "ключ-значение".

1. Создание словаря:

   person = {
       "имя": "Алексей",
       "возраст": 25,
       "город": "Москва"
   }


2. Доступ к значениям:

   print(person["имя"])  # Вывод: Алексей


3. Изменение значений:

   person["возраст"] = 26


4. Добавление новых пар:

   person["профессия"] = "программист"


5. Методы словарей:
- keys(): Возвращает список ключей.

     print(person.keys())  # Вывод: dict_keys(['имя', 'возраст', 'город', 'профессия'])

- values(): Возвращает список значений.

     print(person.values())  # Вывод: dict_values(['Алексей', 26, 'Москва', 'программист'])


---

### Шаг 4: Работа с файлами
Python позволяет легко работать с файлами для чтения и записи данных.

1. Чтение из файла:

   with open("example.txt", "r", encoding="utf-8") as file:
       content = file.read()
       print(content)


2. Запись в файл:

   with open("example.txt", "w", encoding="utf-8") as file:
       file.write("Привет, мир!")


3. Добавление в файл:

   with open("example.txt", "a", encoding="utf-8") as file:
       file.write("\nНовая строка.")


---

### Шаг 5: Практические примеры
1. Функция для работы со списком:

   def print_list(items):
       for item in items:
           print(item)

   fruits = ["яблоко", "банан", "вишня"]
   print_list(fruits)


2. Функция для работы со словарем:

   def print_person_info(person):
       for key, value in person.items():
           print(f"{key}: {value}")

   person = {"имя": "Алексей", "возраст": 25}
   print_person_info(person)


3. Чтение и запись файла:

   def read_and_write_file(filename):
       with open(filename, "r", encoding="utf-8") as file:
           content = file.read()
       with open("output.txt", "w", encoding="utf-8") as file:
           file.write(content.upper())

   read_and_write_file("example.txt")


---

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

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

---

🚀 Изучаем HTML5 | Урок 4: Формы и элементы ввода

Привет, друзья! В этом уроке мы погрузимся в мир форм и элементов ввода, которые позволяют собирать данные от пользователей. 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>, для группировки элементов формы. Это улучшит читаемость и доступность вашего кода.

---

Удачи в изучении HTML5! 🚀

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

---
4 views
rm -r
Урок 3: Блочная модель CSS — Отступы, границы и размеры

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

---

### Что такое блочная модель?
Каждый элемент на веб-странице представляет собой прямоугольный блок. Блочная модель описывает, как вычисляются размеры этого блока, включая:
1. Содержимое (content) — область, где отображается текст или другие элементы.
2. Внутренние отступы (padding) — пространство между содержимым и границей.
3. Границы (border) — рамка вокруг элемента.
4. Внешние отступы (margin) — пространство между элементом и другими элементами.

---

### Свойства блочной модели

1. Ширина и высота (width, height)
Задают размеры содержимого элемента. 

   div {
       width: 300px;
       height: 200px;
   }


2. Внутренние отступы (padding)
Добавляют пространство внутри элемента, вокруг содержимого. 

   div {
       padding: 20px; /* Отступы со всех сторон */
       padding-top: 10px; /* Индивидуально */
   }


3. Границы (border)
Задают рамку вокруг элемента. 

   div {
       border: 2px solid black; /* Толщина, стиль, цвет */
       border-radius: 10px; /* Закругленные углы */
   }


4. Внешние отступы (margin)
Создают пространство между элементами. 

   div {
       margin: 15px; /* Отступы со всех сторон */
       margin-bottom: 30px; /* Индивидуально */
   }


---

### Как рассчитывается общий размер элемента?
По умолчанию общий размер элемента складывается из:
- Ширина = width + padding + border
- Высота = height + padding + border

Чтобы изменить это поведение, можно использовать свойство box-sizing:
- box-sizing: content-box; (по умолчанию) — размеры учитывают только содержимое.
- box-sizing: border-box; — размеры включают padding и border.

Пример: 
div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* Общая ширина останется 300px */
}


---

### Практика
1. Создайте блок с заданными размерами (width, height).
2. Добавьте внутренние отступы (padding) и границу (border).
3. Поэкспериментируйте с внешними отступами (margin), чтобы расположить блоки на странице.
4. Используйте box-sizing: border-box;, чтобы упростить расчеты.

---

### Домашнее задание
Создайте макет из нескольких блоков:
- Заголовок с отступами и границей.
- Текстовый блок с внутренними отступами.
- Изображение с внешними отступами.

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

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

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
👉PHP и MySQL с Нуля до Гуру 2.0
Основой подавляющего большинства мало-мальски сложных сайтов является PHP. Именно с помощью PHP делается весь функционал сайта: формы обратной связи, регистрация, авторизация, поиск по сайту, добавление в корзину, оформление заказа, админка всех сайтов и многое-многое другое. Поэтому любой, кто планирует заниматься сайтостроением, а оно, кстати, весьма прибыльно, должен изучить PHP.

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

И вот недавно я узнал, что Михаил Русаков выпустил свой новый Видеокурс "PHP и MySQL с Нуля до Гуру 2.0". Это продолжение бестселлера "PHP и MySQL с Нуля до Гуру". В новом курсе он с нуля обучает языку PHP, причём разбирается именно свежая версия PHP 7: https://Hottab.programsite.ru/php7

В курсе он разбирает установку локального сервера, все базовые вещи языка PHP, стандартные функции и классы, ООП, компоненты, расширения, работа с базой данных, MySQL, PDO - в общем, целый ворох важнейших вещей.

Курсы Михаила Русакова я уже смотрю давно, и все они сделаны качественно, видно, что он является большим практиком в сайтостроении, и при этом у него, по моему мнению, дар преподавателя.

Подробности о курсе по ссылке: https://Hottab.programsite.ru/php7.
11 views
rm -r
📘 Полное руководство по PHP – Глава 8: Работа с сессиями и куками 🐘

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

---

### 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 #Сессии #Куки #Программирование #Телеграм
9 views
rm -r
Изучаем Python: Урок 3 — это продолжение нашего изучения Python. В этом уроке мы рассмотрим такие важные темы, как модули, классы и объектно-ориентированное программирование (ООП), а также обработку исключений. Эти концепции помогут вам писать более структурированный, модульный и устойчивый код.

---

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

---

### Шаг 1: Модули
Модули — это файлы с расширением .py, которые содержат код, например функции, классы и переменные. Они позволяют организовывать код в логические блоки и повторно использовать его.

1. Импорт модуля:
Используйте ключевое слово import для подключения модуля.

   import math
   print(math.sqrt(16))  # Вывод: 4.0


2. Импорт конкретных функций:

   from math import sqrt, pi
   print(sqrt(25))  # Вывод: 5.0
   print(pi)        # Вывод: 3.141592653589793


3. Создание собственного модуля:
- Создайте файл my_module.py:

     def greet(name):
         return f"Привет, {name}!"

- Импортируйте его в другом файле:

     import my_module
     print(my_module.greet("Алексей"))  # Вывод: Привет, Алексей!


---

### Шаг 2: Классы и ООП
Объектно-ориентированное программирование (ООП) — это парадигма программирования, которая использует объекты и классы для организации кода.

1. Создание класса:
Используйте ключевое слово class.

   class Dog:
       def __init__(self, name, age):
           self.name = name
           self.age = age

       def bark(self):
           return f"{self.name} говорит: Гав!"


2. Создание объекта:

   my_dog = Dog("Бобик", 3)
   print(my_dog.bark())  # Вывод: Бобик говорит: Гав!


3. Наследование:
Классы могут наследовать свойства и методы других классов.

   class Puppy(Dog):
       def __init__(self, name, age, color):
           super().__init__(name, age)
           self.color = color

       def play(self):
           return f"{self.name} играет!"


4. Использование наследования:

   my_puppy = Puppy("Шарик", 1, "белый")
   print(my_puppy.bark())  # Вывод: Шарик говорит: Гав!
   print(my_puppy.play())  # Вывод: Шарик играет!


---

### Шаг 3: Обработка исключений
Исключения — это ошибки, которые возникают во время выполнения программы. Их можно обрабатывать, чтобы программа не завершалась аварийно.

1. Блок try-except:

   try:
       result = 10 / 0
   except ZeroDivisionError:
       print("Ошибка: деление на ноль!")


2. Блок finally:
Код в блоке finally выполняется всегда, независимо от того, произошла ошибка или нет.

   try:
       file = open("example.txt", "r")
       content = file.read()
   except FileNotFoundError:
       print("Файл не найден!")
   finally:
       file.close()
       print("Файл закрыт.")


3. Создание собственных исключений:

   class MyCustomError(Exception):
       pass

   try:
       raise MyCustomError("Это моя ошибка!")
   except MyCustomError as e:
       print(e)  # Вывод: Это моя ошибка!


---

### Шаг 4: Практические примеры
1. Использование модуля `datetime`:

   from datetime import datetime
   now = datetime.now()
   print(f"Текущее время: {now}")


2. Класс для работы с банковским счетом:

   class BankAccount:
       def __init__(self, owner, balance=0):
           self.owner = owner
           self.balance = balance

       def deposit(self, amount):
           self.balance += amount
           return f"Баланс пополнен на {amount}. Текущий баланс: {self.balance}"

       def withdraw(self, amount):
           if amount > self.balance:
               return "Недостаточно средств на счете."
           self.balance -= amount
           return f"Снято {amount}. Текущий баланс: {self.balance}"


3. Обработка исключений при работе с файлами:

   try:
       with open("example.txt", "r") as file:
           print(file.read())
   except FileNotFoundError:
       print("Файл не найден!")


---
10 views
rm -r
### Заключение
Этот урок познакомил вас с модулями, классами, объектно-ориентированным программированием и обработкой исключений. Эти концепции помогут вам писать более структурированный, модульный и устойчивый код. В следующих уроках мы рассмотрим работу с библиотеками, регулярными выражениями и асинхронным программированием.

---
9 views
rm -r
Отлично! пост посвященный пятому уроку по изучению HTML5. В этом уроке мы сосредоточимся на работе с мультимедиа, включая аудио, видео и графику, а также рассмотрим, как использовать элементы <canvas> и <svg> для создания графики на веб-страницах.

---

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

Привет, друзья! В этом уроке мы продолжим изучать возможности 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>) для улучшения структуры вашей страницы. Это не только сделает код чище, но и поможет поисковым системам лучше понять ваш контент.

--

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

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

---
10 views
rm -r
Урок 4: Позиционирование элементов в CSS

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

---

### Типы позиционирования

В CSS есть несколько способов позиционирования элементов:

1. Статическое позиционирование (`static`)
Это значение по умолчанию. Элементы отображаются в обычном потоке документа. 

   div {
       position: static;
   }


2. Относительное позиционирование (`relative`)
Элемент смещается относительно своего обычного положения. Остальные элементы остаются на своих местах. 

   div {
       position: relative;
       top: 20px; /* Смещение вниз */
       left: 30px; /* Смещение вправо */
   }


3. Абсолютное позиционирование (`absolute`)
Элемент удаляется из обычного потока документа и позиционируется относительно ближайшего родительского элемента с position: relative, absolute, fixed или sticky. Если такого родителя нет, элемент позиционируется относительно <html>. 

   div {
       position: absolute;
       top: 0;
       right: 0;
   }


4. Фиксированное позиционирование (`fixed`)
Элемент фиксируется относительно окна браузера и не двигается при прокрутке страницы. 

   div {
       position: fixed;
       bottom: 10px;
       right: 10px;
   }


5. Липкое позиционирование (`sticky`)
Элемент ведет себя как relative, пока не достигнет определенной точки при прокрутке, после чего становится fixed. 

   div {
       position: sticky;
       top: 0;
   }


---

### Свойства для позиционирования
Для управления позицией элемента используются свойства:
- top, bottom, left, right — задают смещение относительно краев.
- z-index — управляет порядком наложения элементов (работает только с position: relative, absolute, fixed, sticky).

Пример: 
div {
    position: absolute;
    top: 50px;
    left: 100px;
    z-index: 10; /* Элемент будет поверх других */
}


---

### Примеры использования

1. Кнопка "Наверх" 

   .to-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       padding: 10px;
       background-color: blue;
       color: white;
   }


2. Липкий заголовок 

   header {
       position: sticky;
       top: 0;
       background-color: white;
       z-index: 100;
   }


3. Наложение элементов 

   .image-container {
       position: relative;
   }
   .overlay {
       position: absolute;
       top: 0;
       left: 0;
       background-color: rgba(0, 0, 0, 0.5);
   }


---

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

---

### Домашнее задание
Создайте макет с использованием всех типов позиционирования:
- Относительное позиционирование для смещения элемента.
- Абсолютное позиционирование для наложения текста на изображение.
- Фиксированное позиционирование для кнопки "Наверх".
- Липкое позиционирование для заголовка.

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

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

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

Где-то 90% своих знаний я почерпнул из курсов Михаила Русакова. И вот не так давно у него вышел очень интересный бесплатный курс по теме создания собственных движков для сайтов. Эта тема очень актуальна, если Вы хотите создавать по-настоящему профессиональные сайты.

У готовых движков есть огромное количество минусов. Не буду сейчас подробно останавливаться на них - просто перечислю основные из них: низкая безопасность (стандартные движки взламываются стандартно и никакие расширения не помогут, сразу говорю), медленная работа (любой движок - универсальность, отсюда и появляются тормоза), плохая оптимизация (сайтов на той же Joomla миллионы, и большинство из них принадлежит школьникам, отсюда и нелюбовь поисковых систем к подобным сайтам), зависимость от сторонних расширений.

Так вот Михаил выпустил бесплатный курс "Создание двжика на PHP для начинающих": https://Hottab.programsite.ru/freephp2.

Я уже этот курс прошёл. Мне он очень понравился, но отмечу, что курс рассчитан, в первую очередь, на тех, кто уже знаком с HTML+CSS+PHP. Хотя, в целом, курс очень простой (если знать базу). Всё разбирается на примере создания готового движка с чистого листа.

Поэтому если Вы хотите создавать качественные сайты и выделиться на фоне сайтов на Joomla всяких школьников, то могу посоветовать курс Михаила Русакова: https://Hottab.programsite.ru/freephp2 - по крайней мере в Рунете лучше курса по этой теме я ещё точно не видел, и это при том, что сам курс абсолютно бесплатный.
7 views
rm -r
📘 Полное руководство по PHP – Глава 9: Работа с базами данных (PDO и ORM) 🐘

В этой главе мы углубимся в работу с базами данных в PHP. Вы узнаете, как использовать PDO (PHP Data Objects) для безопасного взаимодействия с базами данных, а также познакомитесь с основами ORM (Object-Relational Mapping).

---

### 1. PDO: Подключение к базе данных
PDO — это универсальный интерфейс для работы с различными СУБД (MySQL, PostgreSQL, SQLite и др.).

#### Подключение к MySQL
<?php
$host = 'localhost';
$dbname = 'my_database';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Подключение успешно!";
} catch (PDOException $e) {
    echo "Ошибка подключения: " . $e->getMessage();
}
?>


---

### 2. Выполнение запросов
#### SELECT
<?php
$stmt = $pdo->query("SELECT * FROM users");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    echo "Имя: " . $row['name'] . ", Возраст: " . $row['age'] . "<br>";
}
?>


#### INSERT
<?php
$name = "Иван";
$age = 25;

$stmt = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
$stmt->execute(['name' => $name, 'age' => $age]);
echo "Запись добавлена!";
?>


#### UPDATE
<?php
$id = 1;
$newAge = 30;

$stmt = $pdo->prepare("UPDATE users SET age = :age WHERE id = :id");
$stmt->execute(['age' => $newAge, 'id' => $id]);
echo "Запись обновлена!";
?>


#### DELETE
<?php
$id = 1;

$stmt = $pdo->prepare("DELETE FROM users WHERE id = :id");
$stmt->execute(['id' => $id]);
echo "Запись удалена!";
?>


---

### 3. Транзакции
Транзакции позволяют выполнять несколько запросов как единое целое. Если один запрос завершится ошибкой, все изменения откатываются.

Пример:
<?php
try {
    $pdo->beginTransaction();

    $stmt1 = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
    $stmt1->execute(['name' => 'Иван', 'age' => 25]);

    $stmt2 = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
    $stmt2->execute(['name' => 'Мария', 'age' => 30]);

    $pdo->commit();
    echo "Транзакция успешно завершена!";
} catch (Exception $e) {
    $pdo->rollBack();
    echo "Ошибка: " . $e->getMessage();
}
?>


---

### 4. ORM: Введение
ORM (Object-Relational Mapping) — это технология, которая позволяет работать с базой данных как с объектами в коде. Популярные ORM для PHP: Eloquent (Laravel), Doctrine.

#### Пример с Eloquent
1. Установите Eloquent через Composer:

   composer require illuminate/database

2. Настройка:

   <?php
   require 'vendor/autoload.php';

   use Illuminate\Database\Capsule\Manager as Capsule;

   $capsule = new Capsule;

   $capsule->addConnection([
       'driver' => 'mysql',
       'host' => 'localhost',
       'database' => 'my_database',
       'username' => 'root',
       'password' => '',
       'charset' => 'utf8',
       'collation' => 'utf8_unicode_ci',
       'prefix' => '',
   ]);

   $capsule->setAsGlobal();
   $capsule->bootEloquent();
   ?>

3. Создание модели:

   <?php
   class User extends Illuminate\Database\Eloquent\Model {
       protected $table = 'users';
   }

   $users = User::all();
   foreach ($users as $user) {
       echo "Имя: " . $user->name . ", Возраст: " . $user->age . "<br>";
   }
   ?>


---

### 5. Миграции
Миграции позволяют управлять структурой базы данных через код.

#### Пример с Eloquent
1. Создайте миграцию:

   <?php
   use Illuminate\Database\Capsule\Manager as Capsule;

   Capsule::schema()->create('users', function ($table) {
       $table->increments('id');
       $table->string('name');
       $table->integer('age');
       $table->timestamps();
   });
   ?>

2. Примените миграцию:

   <?php
   Capsule::schema()->create('users', function ($table) {
       $table->increments('id');
       $table->string('name');
       $table->integer('age');
       $table->timestamps();
   });
   ?>




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

#PHP #БазыДанных #PDO #ORM #Программирование #Телеграм
5 views
rm -r
Изучаем Python: Урок 4 — это продолжение нашего изучения Python. В этом уроке мы рассмотрим такие важные темы, как работа с библиотеками, регулярные выражения и асинхронное программирование. Эти концепции помогут вам писать более мощные и эффективные программы.

---

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

---

### Шаг 1: Работа с библиотеками
Библиотеки — это наборы модулей, которые предоставляют готовые решения для различных задач. В Python есть огромное количество библиотек для работы с данными, веб-разработки, машинного обучения и многого другого.

1. Установка библиотек:
Используйте pip для установки библиотек.

   pip install requests


2. Использование библиотеки `requests`:

   import requests

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


3. Популярные библиотеки:
- NumPy: Для работы с массивами и математическими операциями.
- Pandas: Для анализа и обработки данных.
- Matplotlib: Для визуализации данных.
- Flask/Django: Для веб-разработки.

---

### Шаг 2: Регулярные выражения
Регулярные выражения (regex) — это мощный инструмент для поиска и обработки текста.

1. Импорт модуля `re`:

   import re


2. Поиск совпадений:

   text = "Мой номер телефона: 123-456-7890"
   pattern = r"\d{3}-\d{3}-\d{4}"
   match = re.search(pattern, text)
   if match:
       print("Найден номер:", match.group())  # Вывод: Найден номер: 123-456-7890


3. Замена текста:

   new_text = re.sub(pattern, "XXX-XXX-XXXX", text)
   print(new_text)  # Вывод: Мой номер телефона: XXX-XXX-XXXX


4. Разделение текста:

   text = "apple,banana,cherry"
   fruits = re.split(r",", text)
   print(fruits)  # Вывод: ['apple', 'banana', 'cherry']


---

### Шаг 3: Асинхронное программирование
Асинхронное программирование позволяет выполнять несколько задач одновременно, что особенно полезно для работы с сетью или файловой системой.

1. Использование `async` и `await`:

   import asyncio

   async def fetch_data():
       print("Начало загрузки данных...")
       await asyncio.sleep(2)  # Имитация задержки
       print("Данные загружены!")
       return "Данные"

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

   asyncio.run(main())


2. Запуск нескольких задач одновременно:

   async def task1():
       await asyncio.sleep(1)
       print("Задача 1 завершена")

   async def task2():
       await asyncio.sleep(2)
       print("Задача 2 завершена")

   async def main():
       await asyncio.gather(task1(), task2())

   asyncio.run(main())


---

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

   import pandas as pd

   data = {
       "Имя": ["Алексей", "Мария", "Иван"],
       "Возраст": [25, 30, 22],
       "Город": ["Москва", "Санкт-Петербург", "Новосибирск"]
   }

   df = pd.DataFrame(data)
   print(df)


2. Регулярные выражения для валидации email:

   import re

   def validate_email(email):
       pattern = r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"
       return re.match(pattern, email) is not None

   print(validate_email("example@example.com"))  # Вывод: True
   print(validate_email("invalid-email"))        # Вывод: False


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

   import aiohttp
   import asyncio

   async def fetch_url(url):
       async with aiohttp.ClientSession() as session:
           async with session.get(url) as response:
               return await response.text()

   async def main():
       urls = [
           "https://example.com",
           "https://example.org",
           "https://example.net"
       ]
       tasks = [fetch_url(url) for url in urls]
       results = await asyncio.gather(*tasks)
       for result in results:
           print(result[:100])  # Вывод первых 100 символов каждого ответа

   asyncio.run(main())


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

---
6 views
rm -r
Отлично! пост посвященный шестому уроку по изучению 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 #программирование

---
8 views
rm -r
Урок 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 #Программирование
9 views
rm -r
Урок 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 #Программирование
10 views
rm -r
👉Создание и Раскрутка сайта от А до Я
Видеокурс "Создание и раскрутка сайта от А до Я"

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

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

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

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

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

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

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

Более полную информацию Вы можете получить, перейдя по ссылке: https://Hottab.programsite.ru/kurs
8 views
rm -r
🚀 Изучаем 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)
5 views
rm -r
📘 Полное руководство по 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 #Программирование #Телеграм
6 views