Всем увеееей ребята. В этой(этих) статьях я напишу о том как создать простой блог на python с использованием библиотеки flask. Ну что-ш меньше слов - больше дела, приступим! [Часть 1]HTML и Bootstrap HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы. Вот начало кода с Bootstrap: <!DOCTYPE html>
<html>
<head>
<title>Bootstrap сайт</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
Всем увеееей ребята. В этой(этих) статьях я напишу о том как создать простой блог на python с использованием библиотеки flask. Ну что-ш меньше слов - больше дела, приступим!
[Часть 1]HTML и Bootstrap
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.
Вот начало кода с Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap сайт</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
Тут мы создаём заголовки, применяем кодировку. И самое главное: загружаем Bootstrap.
- <!DOCTYPE html> Декларация определяет этот документ как HTML5
- <html> элемент является корневым элементом HTML-страницы
- <head> элемент содержит мета-информацию о документе
- <title> элемент задает заголовок документа
- <meta> элемент должен определить кодировку UTF-8
- <meta> элемент с именем = "видовой экран" делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана
- <style> элемент содержит стили для веб-сайта (макет/дизайн)
Далее создадим меню:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Сайт</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 3</a>
</li>
</ul>
</div>
</nav>
Далее создадим основной контент:
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Активированная ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Выключенная ссылка</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Заголовок 1</h2>
<h5>Дек 7, 2023</h5>
<p>Текст</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>
<br>
<h2>Заголовок 2</h2>
<h5>Сен 2, 2023</h5>
<p>Какой-нибудь текст</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>
</div>
</div>
</div>
Тут мы создаём боковое меню а также 2 статьи с текстом "рыбой".
Результат:
А весь код вместе:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap сайт</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Сайт</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка 3</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Активированная ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Выключенная ссылка</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Заголовок 1</h2>
<h5>Дек 7, 2023</h5>
<p>Текст</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>
<br>
<h2>Заголовок 2</h2>
<h5>Сен 2, 2023</h5>
<p>Какой-нибудь текст</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet rutrum vehicula. Fusce metus quam, consequat a quam eget, suscipit efficitur enim. Fusce blandit, lectus fermentum scelerisque condimentum, dolor purus rutrum diam, ut tincidunt augue libero ut leo. Morbi massa est, vestibulum ut efficitur a, placerat tempor diam. Vestibulum ullamcorper sollicitudin turpis, a accumsan massa commodo sed. In eget mauris in neque accumsan tristique et ut eros. Fusce non dignissim tellus. Phasellus feugiat consectetur nisi, at aliquet magna aliquam ut</p>
</div>
</div>
</div>
</body>
</html>
Подписывайтесь ведь скоро вторая часть где мы поговорим об python mysqlite!
Часть 2: https://dzen.ru/media/id/657db13f723bf50ff344f52d/chast-2prostoi-blog-na-python-657e9adf64bfa87a0dbb8b7a