Skill Base

HTML

Содержание

Введение

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

На мой взгляд начинать работу в IT мире необходимо как раз с самого простого. Никакая теоретическая информатика не будет так же эффективно закрывать базовые знания сразу в нескольких областях, как практика. Даже банальное написание сайтов на чистом HTML может дать куда большее понимание того, как работать и с чего начинать.

HTML (HyperText Markup Language) — это язык гипертекстовой разметки, который лежит в основе веб-разработки и помогает упорядочивать содержимое веб-страниц.

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

Пример html кода:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это пример простого HTML-документа.</p>
</body>
</html>

Для написания простенького сайта для себя самого хватит все лишь html, но что делать если мы хотим как-то стилизовать его? В таком случае приходиться использовать дополнительные технологии, такие как CSS.

CSS (Cascading Style Sheets) — это язык описания внешнего вида документа. Он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов.

Синтаксис CSS включает правила, которые определяют внешний вид элементов. Каждое правило состоит из селектора, CSS-свойств и их значений. Селектор — это ссылка на элемент в HTML, а свойство — определённая характеристика элемента, которую нужно изменить. Значение — цифровое или текстовое обозначение для выбранного свойства.

Пример CSS кода:

body {
   background-color: powderblue;
}

h1 {
   color: blue;
}

p {
   color: red;
}

Более подробно про html теги и css свойства можно узнать здесь.

Хостинги

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

Зачем нужен хостинг?

Хостинг необходим для размещения вашего веб-сайта или приложения в Интернете, чтобы он был доступен пользователям. Он выполняет несколько важных функций:

Доступность сайта: Хостинг позволяет вашему сайту или приложению работать 24/7.
Хранение данных: Хостинг предоставляет место на сервере для хранения файлов сайта.
Управление доменом: Многие хостинг-провайдеры также предлагают управление доменными именами.

REG.RU

Ссылка на хостинг

REG.ru является одним из самых популярных хостинг провайдеров в России. Он предоставляет не только сервера для хостинга сайта, а так же виртуальные и физические сервера, доменные имена, SSL сертификаты безопасности и т.д.

home-regru

GitHub Pages

GitHub Pages — это бесплатный хостинг для статических сайтов, предоставляемый платформой GitHub. Этот инструмент позволяет разместить веб-сайт, используя файлы вашего репозитория на GitHub. Статический сайт может быть написан на HTML, CSS и JavaScript.

Преимущества GitHub Pages

Бесплатно — размещение сайтов без оплаты.
Простота — минимальная настройка и интеграция с GitHub.
Поддержка HTTPS — безопасность и доверие к вашему сайту.
Совместимость с CI/CD — автоматическое обновление сайта при изменениях в репозитории.
Кастомизация домена — возможность подключения собственного домена.

Клонируйте репозиторий:

git clone https://github.com/your-username/my-website.git

Скопируйте файлы сайта в папку репозитория.

Сохраните изменения

git add .
git commit -m "Initial commit"
git push origin main

Как создать и разместить статический сайт на GitHub Pages

Создайте репозиторий на GitHub Зайдите в свой GitHub-аккаунт. Нажмите New Repository. Дайте имя репозиторию (например, my-website). Сделайте репозиторий публичным (чтобы сайт был доступен всем). Нажмите Create Repository.
Добавьте файлы вашего сайта Если у вас уже есть статический сайт, добавьте в репозиторий файлы: index.html — главный файл страницы. style.css, script.js — стили и скрипты (если есть).
Активируйте GitHub Pages Откройте настройки репозитория (Settings). Перейдите в раздел Pages в боковом меню. В разделе Source выберите ветку (например, main) и папку (/root). Нажмите Save.
Публикация сайта После активации в разделе Pages появится ссылка на ваш сайт. Пример: https://your-username.github.io/my-website.

Ограничения GitHub Pages

Поддержка только статических сайтов — динамические языки, такие как PHP или Python, не поддерживаются. Ограничение на размер — до 1 ГБ на репозиторий и 100 ГБ трафика в месяц. Для публичных репозиториев — ваши файлы будут доступны для всех (если репозиторий публичный).

Свой домашний хостинг

Размещение веб-сайтов, приложений или других проектов на собственном сервере, например, на Raspberry Pi или домашнем ПК, имеет ряд преимуществ. Это позволяет получить полный контроль над сервером, сэкономить на платных услугах и гибко настраивать среду для своих нужд.

Основные преимущества

Полный контроль Вы управляете сервером и можете установить любое ПО, настроить серверную конфигурацию под свои нужды (например, веб-серверы, базы данных, FTP). Никаких ограничений со стороны хостинг-провайдеров (например, ограничения на трафик, использование ресурсов).
Отсутствие регулярных платежей Вам не нужно платить за использование стороннего хостинга, за исключением стоимости электроэнергии и оборудования. Это особенно актуально для небольших сайтов или тестовых проектов.
Высокая кастомизация Полная свобода в настройке сервера: выбор операционной системы, программного обеспечения, уровня безопасности и других параметров. Возможность работы с любыми веб-технологиями, включая нестандартные языки программирования, библиотеки или фреймворки.
Обучение и опыт Организация домашнего хостинга — это отличная возможность для обучения: Настройка сетей (NAT, порт-форвардинг, статические IP-адреса). Администрирование серверов (Linux, Apache/Nginx, MySQL). Решение проблем безопасности и производительности. Это полезный опыт для разработчиков и системных администраторов.
Конфиденциальность Ваши данные хранятся локально и не передаются сторонним хостинг-провайдерам. Вы контролируете безопасность сервера и можете внедрять свои меры защиты (например, шифрование, VPN).
Эксперименты и тестирование Домашний сервер идеально подходит для экспериментов с новыми технологиями, языками программирования или конфигурациями. Например, развертывание локального контейнерного хостинга с Docker или Kubernetes.
Поддержка оффлайн-доступа Сервер в домашней сети может быть настроен для локального доступа, что полезно для разработки или хранения мультимедиа. Использование Raspberry Pi как сервера Raspberry Pi — это бюджетное, энергоэффективное и компактное устройство, которое идеально подходит для домашнего хостинга.

Преимущества Raspberry Pi:

Низкое энергопотребление (обычно около 5 Вт).
Маленький размер — можно разместить в любом месте.
Доступность — стоимость Raspberry Pi обычно в пределах $50–$100.
Поддержка Linux — идеально для установки веб-серверов, таких как Apache, Nginx, или баз данных, например, MySQL, PostgreSQL.
Большое сообщество — множество готовых гайдов и решений.

Недостатки и риски домашнего хостинга

Непрерывная работа Домашний сервер должен быть включён круглосуточно, что увеличивает расходы на электроэнергию. Возможны перебои при отключении электричества.
Безопасность Ваш сервер становится доступным из Интернета, поэтому его нужно защитить: Регулярное обновление системы и ПО. Использование SSL-сертификатов. Настройка файрвола и защиты от атак (например, DDoS). Домашние сети менее защищены, чем дата-центры.
Ограниченная производительность Производительность домашних серверов ниже, чем у облачных провайдеров. Например, Raspberry Pi может не справиться с большим трафиком или сложными задачами.
Доступность сети Ваш интернет-провайдер может менять IP-адреса. Для решения можно использовать динамический DNS (DDNS). Скорость загрузки в домашней сети может быть ограничена (например, медленный аплоад).
Технические навыки Требуется знание основ системного администрирования, сетей и безопасности.

Дополнения = усложнение

Знание HTML и CSS позволяет создавать веб-страницы, сложные и не очень, красивые и как получается. Однако, существует несколько способов усложнить, а следовательно и дополнить функционал сайта путем введение новой технологии - Java Script

JavaScript (JS) — это высокоуровневый язык программирования, предназначенный для создания интерактивных и динамических элементов на веб-страницах. Это язык, который работает на стороне клиента (в браузере), хотя его также можно использовать на стороне сервера с помощью среды Node.js.

Несмотря на схожесть в названиях, JavaScript и Java — это совершенно разные языки программирования

JavaScript довольно универсален и его можно использовать почти везде, разве что отличаются библиотеки, которые используются для работы с конкретными технологиями.

Веб-разработка (клиентская сторона):
Веб-разработка (серверная сторона)
Мобильная разработка
Десктопные приложения
Игры и графика

Пример js код:

function changeText() {
    const title = document.getElementById('title');
    title.innerText = "You clicked the button from external JS!";
}