Введение

Недавно я наткнулся на интересную библиотеку на GitHub — WebCode. Библиотека позволяет писать на Python CSS и HTML код. Ранее я не встречал аналогов, поэтому решил изучить WebCode поподробнее.

Начало

Чтобы скачать WebCode нужно перейти по ссылке, а далее нажать на 'Clone or download' => 'Download ZIP'. (После извлечения файла, перенесите его в папку, где будете писать код)

Итак, перейдём к делу.

Первые строки, которые надо написать это:

import webcode as wb
wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
wb.finuse(True)

В начале импортируем библиотеку, как wb. А дальше пишем базовую функцию startuse().

Первый аргумент в этой функции — название HTML файла, который библиотека будет генерировать, второй — имя вашего сайта во вкладке, третий — название CSS файла(если не собираетесь его создавать, напишите css=0) и наконец четвёртый аргумент отвечает за язык, на котором Вы будете писать текст. finuse() завершает работу и принимает 1 аргумент, который может быть либо True, либо False. Если Вы укажите True, то когда вы запустите файл, он автоматически откроется в браузере. Если же False, то он этого делать не будет.

Как можно было догадаться, между startuse() и finuse(), будет наш дальнейший код.

Давайте его напишем:

wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=True)

Функция writep() добавляет HTML p тег на наш сайт, иными словами — пишет текст на нашу страницу. С первым аргументом text в этой функции — всё понятно, второй аргумент — это класс(в дальнейшем с помощью этого свойства, мы сможем изменить цвет или размер нашего текста), третий аргумент отвечает за то, будет ли наш текст принадлежать другому элементу. True — не будет, False — будет. Пример:

simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss="writings", change=True)

Как видите, чтобы «положить» один элемент в другой, нам нужно создать переменную, которая будет содержать в нашем случае p тег, указать change=False, а далее указать переменную в text.

Примечание: функция writediv() аналогична writep(), только вместо p создаётся div элемент.

Можете запустить и посмотреть, что у нас получилось:

import webcode as wb

wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss="writings", change=True)

wb.finuse(True)

Украшаем нашу страницу

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

wb.stylestart()
wb.startclass(clss='simple-text', pseudo=0)
wb.usestyle('font-size', '24px', True)

wb.stylefin()

Функции stylestart() и stylefin() — это по сути тоже самое, что и startuse() finuse(), только теперь мы запускаем CSS, а не HTML код.

Помните, мы назначали writep() класс «simple-text»? Так вот, теперь мы его объявляем с помощью функции startclass(), задавая псевдо-классу(:hover, :active, :focus и т.д) значение 0, то есть его не объявляем. usestyle() принимает стандартные CSS свойства. К последнему usestyle() нужно приписать True. Так мы показываем, что после этой функции в нашем классе ничего не будет.

Теперь поменяем фон на нашей странице:

wb.startobject('body')
wb.usestyle('background-color', 'black', True)

Прошу заметить, что для тегов используется startobject(), а не startclass().

Используем преимущества Python для создания сайта

В написании кода на HTML и CSS зачастую возникает проблема: несколько раз писать одно и тоже. Но WebCode её решает:

for i in range(1, 7):
    wb.writeh(i, 'Я заголовок!') #Создаем h элемент. Первый аргумент отвечает за "важность" заголовка (h1, h2, h3...)

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

import webcode as wb

wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss='writings', change=True)
for i in range(1, 7):
    wb.writeh(i, 'Я заголовок!') #Создаем h элемент. Первый аргумент отвечает за "важность" заголовка (h1, h2, h3...)

wb.finuse(True)

wb.stylestart()

wb.startclass(clss='simple-text', pseudo=0)
wb.usestyle('font-size', '24px', True)

wb.startobject('body')
wb.usestyle('color', 'white')
wb.usestyle('font-family', 'monospace')
wb.usestyle('background-color', 'black', True)

wb.stylefin()

Спасибо за чтение!