Photos

Creating HTML in python

I am looking for a way to create html files dynamically in python. I am writing a gallery script, which iterates over directories, collecting file meta data. I intended to then use this data to automatically create a picture gallery, based on html. Something very simple, just a table of pictures. I really don’t think writing to a file manually is the best method, and the code may be very long. So is there a better way to do this, possibly html specific?

7 Answers 7

Dominate is a Python library for creating HTML documents and fragments directly in code without using templating. You could create a simple image gallery with something like this:

import glob from dominate import document from dominate.tags import * photos = glob.glob('photos/*.jpg') with document(title='Photos') as doc: h1('Photos') for path in photos: div(img(src=path), _class='photo') with open('gallery.html', 'w') as f: f.write(doc.render()) 

     
Photos
 
 
 
 
   

Disclaimer: I am the author of dominate

Best thing since sliced bread. I have dabbled with the same ideas for 20 years, with false starts in C, Lisp and IIRC (shudder) PHP but my half-baked solutions were always even more painful than just sprinkling HTML between code (PHP) or print -ing HTML. The Dominate library just clicks for me. To me Dominate feels very lisp-y in the sense that you always hear that Lisp is great for using the language itself as a Domain Specific Language. Well, it turns out Python is really good for this as well!

Well done, @Knio. Your library is still holding up after more than a decade. This is exactly what I needed.

I think, if i understand you correctly, you can see here, «Templating in Python».

Use a templating engine such as Genshi or Jinja2.

Python is a batteries included language. So why not use xml.dom.minidom ?

from typing import List from xml.dom.minidom import getDOMImplementation, Document def getDOM() -> Document: impl = getDOMImplementation() dt = impl.createDocumentType( "html", "-//W3C//DTD XHTML 1.0 Strict//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd", ) return impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt) def ul(items: List[str]) -> str: dom = getDOM() html = dom.documentElement ul = dom.createElement("ul") for item in items: li = dom.createElement("li") li.appendChild(dom.createTextNode(item)) ul.appendChild(li) html.appendChild(ul) return dom.toxml() if __name__ == "__main__": print(ul(["first item", "second item", "third item"])) 

The interface does not look like pythonic, but if you have been a fronted developer and used JavaScript DOM manipulation, it matches your mind better and yes it frees you from adding a needless dependency.

Источник

Creating and Viewing HTML Files with Python

Here you will learn how to create HTML files with Python scripts, and how to use Python to automatically open an HTML file in Firefox.

edited by

reviewed by

published

modified

difficulty

https://doi.org/10.46430/phen0004

Donate today!

Great Open Access tutorials cost money to produce. Join the growing number of people supporting Programming Historian so we can continue to share knowledge free of charge.

Contents

Lesson Goals

This lesson uses Python to create and view an HTML file. If you write programs that output HTML, you can use any browser to look at your results. This is especially convenient if your program is automatically creating hyperlinks or graphic entities like charts and diagrams.

Here you will learn how to create HTML files with Python scripts, and how to use Python to automatically open an HTML file in Firefox.

Files Needed For This Lesson

If you do not have these files from the previous lesson, you can download programming-historian-5, a zip file from the previous lesson.

Creating HTML with Python

At this point, we’ve started to learn how to use Python to download online sources and extract information from them automatically. Remember that our ultimate goal is to incorporate programming seamlessly into our research practice. In keeping with this goal, in this lesson and the next, we will learn how to output data back as HTML. This has a few advantages. First, by storing the information on our hard drive as an HTML file we can open it with Firefox and use Zotero to index and annotate it later. Second, there are a wide range of visualization options for HTML which we can draw on later.

If you have not done the W3 Schools HTML tutorial yet, take a few minutes to do it before continuing. We’re going to be creating an HTML document using Python, so you will have to know what an HTML document is!

“Hello World” in HTML using Python

One of the more powerful ideas in computer science is that a file that seems to contain code from one perspective can be seen as data from another. It is possible, in other words, to write programs that manipulate other programs. What we’re going to do next is create an HTML file that says “Hello World!” using Python. We will do this by storing HTML tags in a multiline Python string and saving the contents to a new file. This file will be saved with an .html extension rather than a .txt extension.

Typically an HTML file begins with a doctype declaration. You saw this when you wrote an HTML “Hello World” program in an earlier lesson. To make reading our code easier, we will omit the doctype in this example. Recall a multi-line string is created by enclosing the text in three quotation marks (see below).

# write-html.py f = open('helloworld.html','w') message = """ 
Hello World!
 """ f.write(message) f.close() 

Save the above program as write-html.py and execute it. Use File -> Open in your chosen text editor to open helloworld.html to verify that your program actually created the file. The content should look like this:

Now go to your Firefox browser and choose File -> New Tab, go to the tab, and choose File -> Open File. Select helloworld.html . You should now be able to see your message in the browser. Take a moment to think about this: you now have the ability to write a program which can automatically create a webpage. There is no reason why you could not write a program to automatically create a whole website if you wanted to.

Using Python to Control Firefox

We automatically created an HTML file, but then we had to leave our editor and go to Firefox to open the file in a new tab. Wouldn’t it be cool to have our Python program include that final step? Type or copy the code below and save it as write-html-2.py . When you execute it, it should create your HTML file and then automatically open it in a new tab in Firefox. Sweet!

Mac Instructions

Mac users will have to specify to the precise location of the .html file on their computer. To do this, locate the programming-historian folder you created to do these tutorials, right-click it and select “Get Info”.

You can then cut and paste the file location listed after “Where:” and make sure you include a trailing slash (/) to let the computer know you want something inside the directory (rather than the directory itself).

# write-html-2-mac.py import webbrowser f = open('helloworld.html','w') message = """ 
Hello World!
 """ f.write(message) f.close() #Change path to reflect file location filename = 'file:///Users/username/Desktop/programming-historian/' + 'helloworld.html' webbrowser.open_new_tab(filename) 

If you’re getting a “File not found” error you haven’t changed the filename path correctly.

Windows Instructions

# write-html-2-windows.py import webbrowser f = open('helloworld.html','w') message = """ 
Hello World!
 """ f.write(message) f.close() webbrowser.open_new_tab('helloworld.html') 

Not only have you written a Python program that can write simple HTML, but you’ve now controlled your Firefox browser using Python. In the next lesson, we turn to outputting the data that we have collected as an HTML file.

Suggested Readings

Code Syncing

To follow along with future lessons it is important that you have the right files and programs in your “programming-historian” directory. At the end of each lesson in the series you can download the “programming-historian” zip file to make sure you have the correct code. If you are following along with the Mac / Linux version you may have to open the obo.py file and change “file:///Users/username/Desktop/programming-historian/” to the path to the directory on your own computer.

About the authors

William J. Turkel is Professor of History at the University of Western Ontario.

Adam Crymble, University College London.

Suggested Citation

William J. Turkel and Adam Crymble, «Creating and Viewing HTML Files with Python,» Programming Historian 1 (2012), https://doi.org/10.46430/phen0004.

Donate today!

Great Open Access tutorials cost money to produce. Join the growing number of people supporting Programming Historian so we can continue to share knowledge free of charge.

The Programming Historian (ISSN: 2397-2068) is released under a CC-BY license.

This project is administered by ProgHist Ltd, Charity Number 1195875 and Company Number 12192946.

Источник

Flask-HTML, генератор страниц с помощью классов Python

Здравствуйте. Я недавно начал писать библиотеки для Flask фреймворка. Сегодня я вам расскажу про Flask-HTML. Библиотека которая облегчит вам генерации от статических до сложных страниц.

Можете установить с помощью пакетного менеджера pip

Кроме этого вы можете посетит Github страницу библиотеки и установить.

Стандартное применение в своих роутах

from flask_html import Page, Head from flask_html.core import Style from flask_html.tags import Body, Div, P from flask import request @app.route('/') def index(): head = Head('Title', ['link to css'],['link to js'], []) page = Page(head) body = Body(page, styles=Style(color="red", padding_top="15px"),classes=['class1', 'class2'], ,elements=[ Div(styles=Style(margin="10px"), classes=['class1', 'class2'], , elements=[ P(styles=Style(color="blue"), classes=['class1', 'class2'], , elements=[ "Hello World" ]) ]) ]) return page.render(body, request)

1. В первую очередь на каждую страницу создаём переменную использую класс Head . Аргументы которога является Head(title, [link to css], [link to js], [] .
2. Дальше идёт класс Page(head: Head) . Которому прикрепляем Head.
3. Создаём нод Body которому передаём перемменную page
4. Дальше с помощью тег классов делаем ноды для нашу страниц и ложим их в elements = [] отцовскому ноду
5. В конце рендерим саму страницу передавая body и requests

Каждый нод имеет примерно одинаковую структуру

"""Div HTML element Args: styles (Style, optional): Inline css styles. Defaults to None. classes (List[str], optional): List of class names. Defaults to []. id (str, optional): Unique ID. Defaults to None. elements (List[object], optional): List of child elements. Defaults to []. props (Dict[str, str], optional): Additional tag properties. Defaults to <>. """ Div(styles=None, classes=[], elements=[], props=<>)

Каджому элементу можно задавать inline style с помощь класса flask_html.core.Style .

from flask_html.core import Style from flask_html.tags import Div div = Div(style=Style(background_color="red", padding="10px", margin="50px")) 

Каждому элементу можно написать листенер с помощью метода класса .on(event, function)

opts = [Option('<>'.format(x),'Name <>'.format(x)) for x in range(10)] sel = Select(opts).on('change', 'let val = $(this).val(); alert(val)') page = Page(Head('Title', ['link to css'],['link to js'], [])) body = Body(page, elements=[ sel ]) return page.render(body, request)

Jquery CDN автоматический внедрено в Head!

Спасибо за потраченное время 🙂
Библиотека написана мною. Идеи и правки приветствуется в Github

Источник