Введение

Если вы пересмотрели множество источников по этой теме, но так и не смогли приступить к изучению процесса разработки веб-сайта – поздравляю, вы нашли тот самый сайт, с которым вам просто и понятно дастся обучение всему, что нужно для создания полноценного Интернет-ресурса. Здесь вы найдёте всё: основы вёрстки на HTML + CSS, принципы работы с фреймворком Django, деплой на VPS-сервер и настройка Nginx и Gunicorn на сервере.

Что такое Django?

Django - это фреймворк для создания веб-сайтов и веб-приложений на языке Python, который используют такие крупные компании, как Instagram*, Pinterest и NASA, построенный по архитектурному шаблону MVT (Model-View-Template).

Model (Модель) – отвечает за структуру базы данных и логику работы с объектами. Django использует ORM (Object-Relational Mapping), что позволяет работать с БД через код Python без написания SQL-запросов;
View (Представление) – отвечает за обработку HTTP-запросов, взаимодействие с моделями и выбор данных, которые будут отображаться пользователю;
Template (Шаблон) – описывает, как данные будут выглядеть на странице (HTML-код с использованием специального языка шаблонов Django).

Преимущества Django

Объектно-реляционное отображение ORM: предоставляет возможность работать с БД на Python, не используя SQL-запросы;
Шаблонизатор: позволяет динамически форматировать HTML-страницы, что значительно упрощает чтение HTML-кода и ускоряет процесс разработки;
Админ-панель: позволяет автору управлять данными на сайте без написания текста в HTML-файле. Она отправляет эти данные в БД, которые берёт шаблонизатор;
Безопасность: автоматическая защита от SQL-инъекций, межсайтового скриптинга (XSS) и подделки межсайтовых запросов (CSRF);
Экосистема и сообщество: Django является одним из самых популярных инструментов для серверной разработки. Наличие обширной документации и активного сообщества разработчиков упрощает создание сайта и исправление ошибок.

Вёрстка. Что такое тег в HTML?

Вёрстка – это описание того, как будет выглядеть веб-страница, говоря простым языком. С помощью языка гипертекстовой разметки HTML определяется структура изложенной информации на странице, а каскадные таблицы стилей CSS отвечают за внешний вид того или иного объекта, а также его расположение.
Приступим к изучению азов HTML.
Для начала определим, как выглядит логика и структура языка разметки. HTML строится из элементов, каждый из которых обосабливается тегами. Тег представляет собой текстовую метку в угловых скобках "<>". Теги бывают открывающими и закрывающими. Открывающий тег – это тег вида "<тег>", а закрывающий – вида "</тег>". Есть парные открывающие и закрывающие теги, которые нельзя использовать по отдельности, а есть непарные, состоящие только из открывающего.
Примеры:

<a>Клик</a>: этот элемент – ссылка с текстом "Клик";
<b>Контент</b>: элемент – полужирный текст с надписью "Контент";
<img> (пример непарного тега): элемент – картинка и т. д.

Вёрстка. Основные теги HTML

Разберём основные элементы HTML с их атрибутами, узнаем их иерархию и создадим первую HTML-страницу.
У множества элементов есть атрибуты. Атрибут – это свойство элемента, его дополнительная модификация. Атрибуты прописываются внутри открывающих тегов так: <тег атрибут="значение_атрибута">.
Например, <img src="https://djangodoc.ru/static/img/logos/django-logo-negative.1d528e2cb5fb.png" title="Это картинка">: этот элемент – изображение с двумя атрибутами. Первый атрибут, src, указывает на URL-источник, откуда будет взята картинка. Второй атрибут, title, – подсказка с текстом при наведении на картинку.
Важно оговорить, что атрибуты бывают обязательными (как src в примере) и необязательными (как подсказка title).
Самыми главными атрибутами для нас являются id и class. С их помощью мы можем обращаться к тому или иному элементу или к группе элементов в CSS-файле, чтобы применить к элементу(-ам) определённые стили. id – атрибут, дающий уникальное имя (идентификатор) объекту. Обратим особое внимание: именно уникальное имя. Нельзя нескольким элементам присваивать идентификатор с одним и тем же значением, потому что это вызовет проблемы (например, стили применятся только к первому из элементов с одинаковым id). Для группы объектов существуют классы, за которые отвечает атрибут class. Те объекты, к которым вы хотите применить один стиль, должны обладать одним названием класса.
Наконец, перейдём к основным тегам (если отмечены атрибуты, значит они обязательные для этого тега):

<!DOCTYPE html> – тег, который объявляет браузеру, что тип документа – HTML5.
<html></html> – тег, в котором находится всё содержимое страницы.
<head></head> – тег, в котором содержится техническая информация, такая как метаданные, название вкладки страницы сайта. Также внутри него используется тег шаблонизатора Django {% load static %}, которая загружает стили этой страницы.
<meta name="" content=""> или <meta charset=""> – тег, отвечающий за метаданные. Метаданные – это данные, которые помогают поисковикам. Эти данные могут содержать информацию об авторе, ключевых словах для поиска, кодировке и т. д.
<link rel="" href=""> – тег, отвечающий за подключение тех или иных ресурсов. Например, CSS-файлов, отвечающих за стили страницы.
<title></title> – тег, отвечающий за название вкладки страницы сайта.
<body></body> – тег, содержащий всю видимую пользователем информацию.
<header></header> – тег, обозначающий "шапку" страницы сайта. Несёт смысловой характер, а также помогает поисковикам и браузерам правильно понять структуру страницы.
<main></main> – тег, аналогичный тегу header, но обозначающий основную часть страницы сайта.
<footer></footer> – тег, аналогичный тегу header и main, но обозначающий "подвал" страницы сайта.
<div></div> – тег, создающий блок какого-либо контента. Это самый используемый тег, так как он универсален и большая часть той или иной информации отображается именно с помощью него. Занимает всю ширину экрана и начинается с новой строки по умолчанию.
<p></p> – тег, выделяющий абзац текста
<b></b> – тег, выделяющий текст жирным шрифтом.
<i></i> – тег, выделяющий текст курсивом.
<code></code> – тег, оформляющий текст в виде фрагмента кода.
<br> – тег, образующий пустую строку на всю ширину окна.
<pre></pre> – тег, текст в котором отображается с установленными отступами и переносами на новую строку.
<a></a> – тег, представляющий текст в виде ссылки.
<img src=""> – тег, отображающий картинку на странице.
<table></table> – тег, создающий таблицу.
<tr></tr> – тег, создающий строку в таблице.
<td></td> – тег, создающий ячейку в таблице.
<thead><thead> – тег, обозначающий строку с заголовками столбцов таблицы.
<tbody></tbody> – тег, обозначающий основную часть таблицы.
<tfoot></tfoot> – тег, обозначающий конечную строку таблицы, обычно используется для строки в конце таблицы с какими-либо итоговыми данными.
<span></span> – тег, с помощью которого можно выделить фрагмент текста для дальнейшего применения стилей к этому фрагменту.
<ol></ol> – тег, создающий пронумерованный список.
<ul></ul> – тег, создающий непронумерованный список.
<li></li> – тег, создающий элемент пронумерованного или непронумерованного списка.
<style></style> – тег, с помощью которого удобно добавлять небольшой по объёму CSS-код внутри HTML-файла, чтобы не создавать отдельный CSS-файл или идентификатор или класс для CSS-файла.

Вёрстка. Иерархия элементов

В HTML существует определённая иерархия элементов. Каркас простой HTML-страницы с правильным расположением элементов выглядит так:

<!DOCTYPE html>
<html>
<head>
    <meta>
    <link>
    <title></title>
    <style></style>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

Все остальные теги, которые были указаны ранее в блоке про основные теги, могут свободно использоваться внутри тега <body> и тегах <header>, <main> и <footer> соответственно. Но есть несколько нюансов:

блочные теги, такие как <div>, <h1>, <ul> и <p> не могут находиться внутри строчного <span>;
заголовки <h1>, <h2> и т. д. не могут находиться друг в друге, как и ссылка в ссылке <a>;
списки <ul> и <ol> внутри абзаца <p>;
тег <li> может находиться только внутри списков <ol> или <ul>, причём не допускается нахождение других элементов в списке отдельно. Т. е., нельзя написать <ul><div></div><li></li> … </ul>, но можно писать другие элементы в списке внутри тега <li>;
теги <tr> и <td> используются только внутри <table></table>, причём гораздо лучше пользоваться тегами thead, tbody и tfoot для структурированности кода таблицы. То есть, это должно выглядеть следующим образом:
```
<table>
    <thead>
        <td></td>
        …
        <tr></tr>
	…
    </thead>
    <tbody>
        <td></td>
        …
        <tr></tr>
        …
    </tbody>
    <tfoot>
        <td></td>
        …
        <tr></tr>
        …
    </tfoot>
</table>
```
внутри <title></title> можно писать только чистый текст, но нельзя выделить этот текст, например, жирным (неправильно: <title><b>Заголовок</b></title>)

Вёрстка. Пример HTML-документа

Давайте разберём пример HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Страница 1</title>
</head>
<body>
    <header>
        <h1 title=":)">Привет</h1>
    </header>
    <main>
        <h2>Основная часть</h2>
        <p>Текст</p>
        <a href="https://docs.djangoproject.com/" title="Сайт документации Django">
            Ссылка
        </a>
    </main>
    <footer>
        <div>Подвал сайта</div>
    </footer>
</body>
</html>

Техническая информация <head>: здесь указана кодировка и настройка отображения под мобильные устройства, а также заголовок вкладки браузера с текстом "Страница 1". Шапка сайта <header>: содержит заголовок <h1> со словом «Привет». При наведении на него всплывает смайлик ":)", так как указано в атрибуте title. Основная часть <main>: содержит подзаголовок второго уровня <h2>, абзац <p> с текстом и ссылку <a> с подсказкой при наведении (снова атрибут title), которая ведёт на сайт документации Django. Нижняя часть <footer>: содержит блок с текстом "Подвал"

Попрактикуйтесь в создании простых HTML-страниц для закрепления материала. Со временем вы запомните основные элементы и будете их использовать на автомате.

Деплой. Сервис Beget

Если вы сделали свой сайт и хотите его выложить в сеть, то мы приступаем к заключительному этапу обучения. Сразу хочу предупредить: вы маловероятно найдёте бесплатный VPS-сервер и даже адекватный хостинг. Единственный хостинг, который имел бы место – PythonAnywhere, который попадает под блокировку в РФ, и, вдобавок, ваш сайт будет иметь поддомен pythonanywhere, что сделает ваш сайт тоже недоступным в РФ. Напомню, что деплой – это процесс размещения готового сайта на удалённый сервер, в нашем случае – на VPS-сервер. VPS-сервер – виртуальный сервер на одном компьютере, преимущества которого над обычным хостингом – независимость от других пользователей (так как сервер арендуется только одним человеком) и полный контроль над системой. Сервис, который предоставит нам такой сервер – Beget. Мой выбор на него упал по причине наличия готового софта для Django, включающего операционную систему Ubuntu, среду Python и сам фреймворк. Цены, конечно, неприятные (стали таковыми недавно), но я и не нашёл вариантов дешевле; что есть, то есть. Выделю плюсы Beget'а:

наличие файлового менеджера, с помощью которого достаточно удобно делать корректировки в коде веб-приложения
предоставление бесплатного доменного имени
дешёвый IP-адрес

Приступим к размещению сайта в следующем блоке

Деплой. Добавление сайта на сервер

Добавим папку с приложением на наш удалённый сервер. Для этого архивируем эту папку и через файловый менеджер добавляем её в директорию /var/www/. Теперь постепенно начнём изучать навыки работы с консолью. Я буду объяснять на примере Windows PowerShell.
Для начала подключися по IP к VPS. Для этого

Разработка сайта на Django с нуля