Сайт

Самый простой сайт на html: Шаблон сайта на чистом HTML. Готовый код сайта

30.01.2023

Содержание

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
  • Реклама на сайте

Мы в соцсетях

Простой пример HTML документа — Учебник по основам HTML

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P> Это простейший пример HTML-документа. </P>
<P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P>
</body>
</html>

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

<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P>
</body>
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки

<html> . .. </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> … </head>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<title> … </title>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> … </body>

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<h2> … </h2> — <H6> … </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> … </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:

<h2 ALIGN=CENTER>Выравнивание заголовка по центру</h2>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим все, что мы знаем, с помощью примера 2:

<html>
<head>
<title>Пример 2</title>
</head>
<body>
<h2 ALIGN=CENTER>Привет!</h2>
<h3>Это чуть более сложный пример HTML-документа</h3>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю. </P>
</body>
</html>

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

Мой первый сайт | создание вашего первого веб-сайта, базовый HTML для начинающих

Путь // www.yourhtmlsource.com → МОЙ ПЕРВЫЙ САЙТ

Здесь мы начнем очень легко, потому что я предполагаю, что вы только начинаете. Никто не любит оглядываться назад на My First Site , но, надеюсь, ваш опыт можно сделать немного менее травматичным, если вы подтолкнете его в правильном направлении. Вы сначала начали здесь, верно? Это не обязательно, но помогает.

Примечание: Из-за того, как изучается HTML, вам, вероятно, следует читать их по порядку.

Моя первая страница
Изучите базовую структуру HTML-страницы, тег и как сохранить ее как веб-страницу.

Базовое форматирование
Теперь, когда у вас есть возможность написать страницу, вы можете оживить ее с помощью некоторого кода.

Основные ссылки
К настоящему моменту вы должны были написать несколько простых страниц. Пришло время связать их вместе и начать создавать сайт!

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

<тело> Атрибуты
Добавьте цвет к тексту, ссылкам, фону и установите изображение в качестве фона страницы. Здесь также можно получить краткое введение в использование CSS.

Основы веб-дизайна
Это набор советов, которые помогут вам стать хорошим веб-дизайнером.

Справочник по тегам HTML
Полный список всех тегов HTML со ссылками на полные руководства.

Загрузка вашего сайта
Наконец, вам нужно загрузить файлы вашего сайта в онлайн. Это сложный, но относительно простой процесс. Узнайте подробности здесь.

  • Продвижение > Регистрация домена
  • Веб-хостинг

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

Начало  
Начните здесь ·
Мой первый сайт·

Уроки  
Текст·
Изображения ·
Таблицы·
Фреймы·9 листов·190 формы
0003

Advanced  
Accessibility ·
Promotion ·
Optimisation ·

Site Management ·

Scripting  
JavaScript ·
CGI Scripting ·

Reviews  
Web Hosting ·
Books ·
Recommendations ·

HTML Source Набор инструментов ¤

Любите нас?  

Добавьте HTML-код в закладки!

Добавьте исходный код HTML в закладки!

Страницы для печати  

Просто распечатайте страницы в обычном режиме, наша таблица стилей автоматически переформатирует страницу для вас.

Переводы  ¤

Автоматический перевод на:

Действительный код, естественно  

Мы используем (и учим!) только лучшие действующие HTML и CSS для вашего удобства и безопасности.

HTML Источник создан мной, Россом Шенноном. Я веб-дизайнер из Ирландии, и в настоящее время заканчиваю докторскую степень в области компьютерных наук.

Вы можете поддержать HTML Source, сделав небольшое пожертвование.

Спасибо нашим замечательным сторонникам!

Веселитесь? Заблудиться? Есть комментарии?
Мы хотим их!

простой веб-сайт · Темы GitHub · GitHub

Здесь 98 публичных репозиториев соответствует этой теме…

робизо / чудеса

Спонсор Звезда 496

навенду-поттеккат / навенду-pottekkat.

github.io Спонсор Звезда 87

шаблон сайта / html5-простой-личный-веб-сайт

Звезда 34

Винаяк-09 / Винаяк-09.github.io

Звезда 30

Субутай / VerySimpleПортфолио

Звезда 21

ХасанНасер / Мой персональный сайт

Звезда 16

аюшман1024 / Управление больницами с использованием сервлетов

Звезда 14

Фелипесабино / бомдианао

Звезда 11

DevinОфициальный / devinofficial.

github.io Звезда 10

Хангезое / дикая природа

Звезда 8

сссейн / простое портфолио

Звезда 6

Алфавит404 / личная сеть

Звезда 6

озлемекичи / Отзывчивый шаблон Blogger

Звезда 6

сиркираз / ПерсоналВеб-сайт

Звезда 5

icheft / ntu-домашняя страница

Звезда 5

Субутай / Better-IAU-UBIS

Звезда 4

раздавлена / Система-Информаси-Перпустакаан

Звезда 4

костикид / некоммерческий сайт

Звезда 3

Токсикликит / Информация

Звезда 3

АшнаВиар / веб-сайт Рик-и-Морти

Звезда 3

Улучшить эту страницу

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *