Введение в HTML

«Так что же это за шаблон?» — можешь спросить ты.

Шаблон — это файл, который ты можешь использовать повторно для отображения различной информации в заданном формате; например, ты можешь использовать шаблон, чтобы упростить написание письма, поскольку письма хоть и различаются по содержанию и получателю, но сохраняют общую структуру.

Шаблоны в Django написаны на языке, называемом HTML (это тот HTML, о котором было упоминание в первой главе Как работает Интернет).

Что такое HTML?

HTML — это простой код, который может быть интерпретирован твоим браузером — таким как Chrome, Firefox или Safari — чтобы отобразить веб-страницу пользователю.

HTML (от англ. "HyperText Markup Language") — язык гипертекстовой разметки. Гипертекст — это тип текста, поддерживающий гиперссылки между страницами. Под разметкой понимается введение в текст документа кода, который будет говорить браузеру (в нашем случае), как интерпретировать веб-страницу. HTML код строится при помощи тегов, каждый из которых должен начинаться с < и заканчиваться >. Эти теги представляют элементы разметки.

Твой первый шаблон!

Создание шаблона означает создание файла шаблона. Всё есть файл, верно? Ты уже наверняка заметила это.

Шаблоны сохраняются в директории blog/templates/blog. Для начала создай директорию templates внутри директории blog. Затем создай другую директорию blog внутри директории templates:

blog
└───templates
    └───blog

(Ты, вероятно, можешь задаться вопросом: зачем нам нужны две директории с одинаковым названием blog — как ты узнаешь позже, это просто удобное соглашение об именовании, которое делает жизнь проще, когда вещи серьезно усложняются.)

Теперь создай файл post_list.html (для начала оставь его пустым) внутри директории blog/templates/blog.

Посмотри, как выглядит твой веб-сайт после этого: http://127.0.0.1:8000/

Если тебя всё ещё встречает ошибка TemplateDoesNotExists, попробуй перезапустить сервер. Перейди в командную строку, останови веб-сервер нажатием Ctrl+C (Ctrl и С одновременно) и запусти его снова командой python manage.py runserver.

Рисунок 11.1

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

Добавь следующий код в файл шаблона:

blog/templates/blog/post_list.html

<html>
    <p>Hi there!</p>
    <p>It works!</p>
</html>

Как теперь выглядит твой веб-сайт? Нажми сюда, чтобы узнать: http://127.0.0.1:8000/

Рисунок 11.2

Заработало! Хорошая работа :)

  • Наиболее базовый тег, <html>, всегда присутствует в начале веб-страницы, а </html> — в конце. Как ты можешь заметить, основной контент веб-сайта находится между тегами <html> и </html>.
  • <p> — это тег для параграфов; </p>, соответственно, закрывает каждый параграф.

Head и body

Каждая HTML-страница также делится на два элемента: head и body.

  • head — это элемент, содержащий информацию о документе, которая не отображается на экране.

  • body — это элемент, который содержит всё, что будет отражено на веб-странице.

Мы используем тег <head>, чтобы сообщить браузеру о настройках страницы, и тег <body> — о её содержимом.

Например, ты можешь разместить элемент title между тегов <head>:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Сохрани файл и обнови страницу.

Рисунок 11.3

Видишь, как браузер понял, что «Ola's blog» — это заголовок страницы? Он распознал <title>Ola's blog</title> и разместил текст в заголовке вкладки в твоем браузере (заголовок также будет использоваться при сохранении закладок и т.п.).

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

Это как складывать вещи в коробки. У нас есть одна большая коробка, <html></html>; внутри неё лежит коробка <body></body>, которая содержит еще меньшие коробки: <p></p>.

Ты должна следовать этим правилам закрытия тегов и вложенности элементов: если ты их нарушишь, браузер не сможет интерпретировать код и корректно отобразить страницу.

Настраиваем шаблон

Сейчас ты можешь немного повеселиться и попробовать настроить шаблон по своему вкусу! Вот несколько полезных тегов:

  • <h1>Заголовок</h1> — главный заголовок страницы
  • <h2>Подзаголовок</h2> — для заголовков второго уровня
  • <h3>Заголовок третьего уровня</h3> … и так далее, вплоть до <h6>
  • <p>Параграф</p>
  • <em>текст</em> — курсивный шрифт
  • <strong>текст</strong> — жирный шрифт
  • <br> — переход на следующую строку (внутрь br нельзя ничего поместить, также для него нет закрывающего тега)
  • <a href="https://djangogirls.org">link</a> создаёт ссылку
  • <ul><li>первый элемент</li><li>второй элемент</li></ul> создаёт список, такой же как этот!
  • <div></div> определяет раздел страницы

Вот пример готового шаблона, скопируй его содержимое в файл blog/templates/blog/post_list.html:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>

Мы создали три div элемента:

  • Первый элемент div содержит название нашего блога, которое также является ссылкой.
  • Два других div элемента содержат текст записи и дату публикации: h2 тег с заголовком записи, который также является ссылкой, и два p (параграфа) с текстом, один для даты, а другой — для самого текста записи.

Это даёт нам следующий результат:

Рисунок 11.4

Ура! Однако до сих пор наш шаблон отображал лишь одну и ту же информацию — тогда как раньше мы говорили, что шаблоны позволяют нам отображать различную информацию в одном и том же формате.

Что мы действительно хотим, так это отображать существующие записи, добавленные через панель администратора Django; этим и займёмся в следующий раз.

И ещё кое-что: публикация!

Хотелось бы увидеть всё это вживую в интернете, согласна? Давай проведём еще одно развёртывание веб-сайта на PythonAnywhere.

Commit и push кода в репозиторий GitHub

Во-первых, давай посмотрим, какие файлы были изменены с момента последнего развёртывания (выполни эти команды локально, не на PythonAnywhere):

command-line

$ git status

Убедись, что находишься в директории djangogirls, и попроси git выбрать все изменения в пределах папки:

command-line

$ git add --all .

Примечание: --all («всё») означает, что git также обратит внимание на удалённые файлы (по умолчанию он отслеживает новые/изменённые файлы). Также помни (из третьей главы), что . означает текущую директорию.

Прежде чем мы загрузим файлы, давай проверим, что именно git будет загружать (все файлы, которые git готов отправить на сервер, отмечаются шрифтом зелёного цвета):

command-line

$ git status

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

command-line

$ git commit -m "Changed the HTML for the site."

Примечание: убедись, что используешь двойные кавычки вокруг комментария.

После того, как мы сделали это, мы загрузим (заpush'им) изменения на GitHub:

command-line

$ git push

Загружаем новый код на PythonAnywhere и перезапускаем веб-приложение

  • Открой вкладку "терминалы" на PythonAnywhere и переключись на уже запущенную консоль Bash (или новую). Затем набери следующую команду:

PythonAnywhere command-line

$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]

Можешь понаблюдать, как твой код будет загружаться на сервер. Если хочешь проверить успешность процедуры — открой вкладку Файлы и просмотри свой код на PythonAnywhere.

  • Наконец, переключись на вкладку Web и нажми кнопку Reload.

Обновления должны отобразиться на веб-сайте! Переключись на него и обнови страницу. Ты должна сразу заметить улучшения :)

results matching ""

    No results matching ""