CGI: пишем простой сайт на Python. Часть 1: Hello world

Проще всего создать динамические страницы на Python при помощи CGI-скриптов. CGI-скрипты — это исполняемые файлы, которые выполняются веб-сервером, когда в URL запрашивается соответствующий скрипт.

Сегодня я расскажу про то, как написать Hello world, как CGI-скрипт.

Настройка локального сервера

В Python уже есть встроенный CGI сервер, поэтому его настройка элементарна.

Для запуска из консоли (для любителей linux-систем). Запускать нужно из той папки, где мы хотим работать:

python3 -m http.server --cgi

Для сидящих на Windows чуть проще будет запуск Python файла (заметьте, что он должен находиться в той же папке, в которой мы планируем работать!):

from http.server import HTTPServer, CGIHTTPRequestHandler
server_address = ("", 8000)
httpd = HTTPServer(server_address, CGIHTTPRequestHandler)
httpd.serve_forever()

Теперь откройте браузер и в адресной строке наберите localhost:8000

Если у вас примерно такая же картина, значит, у вас все заработало!

Hello world

Теперь в той папке, где мы запустили сервер, создаём папку cgi-bin (у меня она уже создана).

В этой папке создаём скрипт hello.py со следующим содержимым:

#!/usr/bin/env python3
print("Content-type: text/html")
print()
print("<h2>Hello world!</h2>")

Первая строка говорит о том, что это Python скрипт (CGI-скрипты можно не только на Python писать).

Вторая строка печатает заголовок. Он обозначает, что это будет html файл (бывает ещё css, javascript, pdf и куча других, и браузер различает их по заголовкам).

Третья строка (просто символ новой строки) отделяет заголовки от тела ответа.

Четвёртая печатает Hello world.

Теперь переходим на localhost:8000/cgi-bin/hello.py

И радуемся!

Если у вас не работает, проверьте, установлены ли права на выполнение.

Также в консоли запущенного сервера появляются сообщения об ошибках. Например, убрал скобочку и обновил страницу:

В следующей части мы рассмотрим обработку данных форм и cookies.

Для вставки кода на Python в комментарий заключайте его в теги <pre><code>Ваш код</code></pre>

Свежее

• Модуль csv — чтение и запись CSV файлов
• Создаём сайт на Django, используя хорошие практики. Часть 1: создаём проект
• Онлайн-обучение Python: сравнение популярных программ

Категории

• Книги о Python
• GUI (графический интерфейс пользователя)
• Курсы Python
• Модули
• Новости мира Python
• NumPy
• Обработка данных
• Основы программирования
• Примеры программ
• Типы данных в Python
• Видео
• Python для Web
• Работа для Python-программистов

Полезные материалы

• Сделай свой вклад в развитие сайта!
• Самоучитель Python
• Карта сайта
• Отзывы на книги по Python
• Реклама на сайте

Мы в соцсетях

CSS, HTML, или конструкторы?» — Яндекс Кью

Популярное

Сообщества

Создание сайтов

Радик Х.

4 января 2020  ·

11,8 K

ОтветитьУточнить

Postium

1,0 K

Postium: бизнес, реклама и digital-маркетинг.   · 4 янв 2020  · postium.ru

Отвечает

Анатолий Чупин

Зависит от цели создания сайта.

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

Конструкторы подойдут, если вы хотите очень быстро собрать лендинг или сайт из нескольких страниц. При этом, создание сайта на конструторе предолагает очень много минусов. Например:

• платная подписка — ежемесячно нужно платить за то, что сайт отображается и на него могут заходить пользователи;
• неоптимизированный код — чаще всего сайты на конструкторах тяжёлые и долго грузятся;
• не подходят для SEO продвижения — на конструкторе очень сложно развивать структуру сайта, плюс само исполнение сайта на конструкторе будет проигрывать сайтам на CMS в плане поискового продвижения.

Из плюсов:

• готовые решения для бизнеса — можно за пару часов сделать инструмент для привлечения клиентов;
• быстрое изменение — можно быстро поменять то, что нужно: цвет, кнопки, меню и прочее.

CMS (или движок). Если же создание сайтов для вас не разовое мероприятие, я бы порекомендовал начать работать с CMS. Выберите одну или две CMS с которыми вы будете работать, начинайте создавать на ней сайты и изучать.

Для создания небольших коммерческих сайтов идеальная CMS — WordPress. О ней много бесплатной информации в интернете, как в текстовом, так и в видео формате.

Для запуска интернет-магазинов можно остановиться на битриксе — если позволяет бюджет, или использовать бесплатный OpenCart.

Больше полезных материалов и гайдов в нашем Телеграм >>

Перейти на t.me/postiumru

Комментировать ответ…Комментировать…

Алексей Махметхажиев

7

4 янв 2020

Конструкторы конечно. Есть Тильда, есть Флексби из хороших.

Много есть остальных, но следите за скоростью загрузки готового сайта.

Это самое важное будет в 2020 году. Скорость загрузки влияет на конверсии.

Радик Х.

4 января 2020

Спасибо большое

Комментировать ответ…Комментировать…

Фрутини

-1

SEO продвижение сайта в ТОП выдачи Google и Яндекс  · 4 янв 2020

Отвечает

Александр Л.

Зависит от самих сайтов. Делать сайто только на html/css без CMS — это не так удобно как конструкторы — любое изменение цены или текста на сайте придется делать в коде. А вот конструкторы — очень удобные для создания простых сайтов, быстрого теста гипотезы, создания лендингов и других простых сайтов. На конструкорах даже можно собрать простенький интернет магазин и… Читать далее

Радик Х.

4 января 2020

Спасибо большое

Комментировать ответ…Комментировать…

Max Linnae

17

Ботаник  · 26 дек 2020

Лучше всего подучить PHP и освоить какой-либо простой фреймворк, я бы рекомендавал Yii или Laravel, и уже на базе этих инструментов, своеобразных каркасах MVC, написать бекэнд, а потом уже мудрить над фронтэндом, это (при условии знания (X)HTML/CSS, что при знании PHP — естественно) — дело техники и художественного вкуса.

Различные CMS, а уж, тем более конструкторы — не… Читать далее

Комментировать ответ…Комментировать…

Виктор Знание

17 июн 2020

если вы знаете html и есть время, то несомненно через html, css и CMS

попробуйте usercms.ru

если нет времени и нужно протестировать нишу или сделать временный сайт, то конструкторы — лучший выбор

Комментировать ответ…Комментировать…

Вы знаете ответ на этот вопрос?

Поделитесь своим опытом и знаниями

Войти и ответить на вопрос

1 ответ скрыто(Почему?)

Неделя 1: Создание прочного фундамента с помощью HTML | Зак Хейси

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

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

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

Воспринимайте HTML как структурную основу Интернета | Фото Dakota Roos на Unsplash

Ниже мы рассмотрим строительные блоки HTML (теги, элементы, атрибуты и т. д.), а также рассмотрим некоторые более сложные элементы, такие как

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

Теги являются основными строительными блоками HTML. Они позволяют нам придавать семантическое значение нашему контенту и указывать браузерам, как должны интерпретироваться и отображаться наши веб-страницы.

Конкретные HTML-теги, которые мы используем, будут зависеть главным образом от типа контента, который мы размечаем. Например, при разметке абзацев текста мы используем теги

. Для содержимого заголовка мы могли бы использовать тег

.

Существует тонн HTML-тегов на выбор, что может затруднить выбор правильного. В начале не слишком беспокойтесь о выборе наиболее семантически подходящего тега — важнее сначала освоиться с чтением и написанием синтаксиса HTML.

Если вы не знаете, какие типы тегов использовать в своей разметке, вы можете обратиться к этому списку в веб-документах MDN или ознакомиться с удобной периодической таблицей HTML-элементов ниже:

Периодическая таблица HTML-элементов из Smashing Magazine

Большинство HTML-элементов состоят из открывающего и закрывающего тегов. Между этими открывающими и закрывающими тегами мы размещаем наш контент, будь то текст, изображение и т. д. Открывающие теги состоят из левой и правой квадратных скобок (<>) , а закрывающие теги содержат косую черту 9. 0009 () примерно так:

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

Типичный элемент HTML состоит из открывающего тега, содержимого и закрывающего тега | Изображение: htmlandcssbook.com

Несколько тегов в HTML самозакрывающийся . Это означает, что у них нет закрывающего тега, соответствующего их открывающему тегу. Теги — это распространенный пример самозакрывающихся тегов, с которыми вы столкнетесь при чтении и написании HTML.

Блочные и встроенные элементы

По умолчанию почти все элементы HTML организованы в одну из двух категорий: блочные и встроенные. Блочные элементы начинаются с новой строки и занимают всю ширину страницы. Стандартный блочный элемент — .<дел> . Другие элементы общего блока включают:

• по

• и 9999999999999999999999999999110110 гг. Встроенные элементы работают в потоке окружающего контента, а не разбиваются на собственную строку. Они тоже занимают только ширину самого контента, а не всю ширину страницы. Стандартный встроенный элемент — 9.0009 <диапазон> . Другие общие встроенные элементы включают в себя:

  Атрибуты элементов, означающие и функциональные элементы HTML

  3 90 Мы включаем атрибуты как часть открывающего тега данного элемента, при этом большинство атрибутов записывается в виде пар имя-значение в следующем формате: attribute="value" .

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

  В HTML мы будем использовать два атрибута и : id и class . Эти атрибуты в первую очередь действуют как «крючки» для наших будущих стилей CSS и функций JavaScript. На данный момент важно знать, что мы можем применять один и тот же класс к нескольким элементам в нашей разметке, но отдельные атрибуты id могут использоваться только один раз в HTML-документе.

  Формы — это основной способ отправки и получения информации о пользователях в Интернете. Мы используем элемент для определения формы в HTML, а также некоторые атрибуты и дополнительные элементы для создания полей нашей HTML-формы:

  Давайте разберем различные части приведенного выше элемента . Наш открывающий тег включает в себя три атрибута:

  • action="/thank-you" определяет место, куда будут отправлены данные нашей формы.
  • method="POST" ссылается на метод HTTP, используемый для обработки нашей формы. 9Значение метода 0009 обычно будет либо POST , либо GET . Для большинства контактных форм мы будем использовать POST .
  • name="contact-form" дает нашей форме имя при отправке на сервер.

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

  • <метка> 9Теги 0010 предоставляют описательные метки для наших тегов . Обратите внимание, что значение атрибута для соответствует значению атрибута id соответствующего тега . Это гарантирует, что привязан к связанному с ним .
  • Теги определяют поля, в которые пользователи могут вводить различные типы данных для отправки с формой. Существует много типов 9Теги 0010, которые мы можем использовать, в зависимости от типа данных, которые мы хотим собрать (например, электронные письма, номера телефонов, пароли, короткие сообщения, множественный выбор и т.  д.). Атрибут type используется для указания типа поля ввода, которое мы хотим использовать, и мы также можем дать имя данным, введенным в данное поле, введя значение для атрибута name .

  При рендеринге в браузере разметка для нашей формы будет выглядеть так:

  Наша HTML-разметка формы, отображаемая в браузере (без стилей)

  Гиперссылки — или просто ссылки — являются основополагающим элементом Всемирной паутины. На заре своего существования Интернет представлял собой просто набор HTML-документов, связанных вместе ссылками.

  Мы создаем ссылки в HTML, используя элемент anchor , который состоит из:

  • Открывающих () и закрывающих () тегов.
  • Обязательный атрибут href , значением которого чаще всего является URL-адрес.
  • Необязательный, но часто используемый атрибут target для определения места открытия ссылки при щелчке. Обычно вы будете использовать target="_blank" , чтобы открыть ссылку в новой вкладке браузера.

  Обратите внимание, что гиперссылки (записанные с помощью элемента ) отличаются от элементов , которые используются для ссылки на внешний ресурс (обычно таблицу стилей CSS). <ссылка> элементов чаще всего встречаются в раздел HTML-документа, о котором мы поговорим позже в этом уроке.

  Какой был бы Интернет без фото котов и мемов? Изображения составляют ключевой компонент Интернета и бывают разных форматов (jpg, png, gif и svg). Тег — это то, как мы встраиваем изображения в HTML-документы:

  Элемент имеет два обязательных атрибута:

  • src обеспечивает местоположение (относительный или абсолютный URL) изображения, которое мы хотим ссылаться.
  • alt предоставляет альтернативное текстовое описание ссылочного изображения для программ чтения с экрана, поисковых систем и т. д.

  Еще один часто используемый HTML-тег —

  , представляющий элемент списка. Мы используем теги

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

  Элементы должны содержаться внутри родительского элемента, который чаще всего будет либо

  (неупорядоченный список) или
  (упорядоченный список) элемент.

  Разметка для этих двух типов списков будет выглядеть в браузере следующим образом:

  При использовании элементов

  1. в качестве элементов навигации мы оборачиваем родительский элемент
     или
     с помощью навигация или элемент

  Прежде чем мы напишем какой-либо HTML-код в нашем документе, нам сначала нужно добавить объявление типа документа, например:

  Это объявление, написанное как первая строка кода в любом HTML-документе, указывает браузеру, как должен отображаться документ. Веб-документы MDN дают убедительное объяснение:

  «В HTML тип документа — это обязательная преамбула « », которая находится в верхней части всех документов. Его единственная цель — предотвратить переключение браузера в такой формат. -называется «причудливый режим» при рендеринге документа, то есть « " doctype гарантирует, что браузер сделает все возможное, чтобы следовать соответствующим спецификациям, а не использовать другой режим рендеринга, несовместимый с некоторыми спецификациями. "

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

  Другими словами, весь наш HTML-код будет написан внутри элемента .

  На этом этапе разметка для нашего HTML-документа должна выглядеть следующим образом:

  Head

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

  Типичный элемент может включать:

  • теги, предоставляющие структурированные метаданные о документе. Существует множество различных тегов на выбор. Я обычно использую charset , viewport и description в своих проектах.
  • Тег