Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

toc-local

Import

All examples require:

Code Block
languagepy
from hte import Html5TreeBuilder, Raw
tb = Html5TreeBuilder()

Render

Assuming the tree starts at doc, render the tree by:

Code Block
languagepy
print(doc.render())

Attributes

Most elements take attributes though not all attributes are valid for all elements.

Elements should have only one instance on any attribute. They are passed in a dictionary.

Code Block
languagepy
div = tb.div(_name="mydiv", _title="mainsection")

produces:

Code Block
languagexml
<div name="mydiv" title="mainsection"></div>

For some popular HTML5 tags:

Code Block
languagepy
tb.a("x", _href="x.html")
tb.pre("this is text")
tb.table(tb.tr(tb.th("Name"), tb.th("Age")), tb.tr(tb.td("Bill"), tb.td("23")))

produces:

Code Block
languagexml
<a href="x.html">x</a>
<pre>this is text</pre>
<table><tr><th>Name</th><th>Age</th></tr><tr><td>Bill</td><td>23</td></tr></table> 

Almost all elements can take the id attribute. The value of an id attribute should only exist once in a document.

Code Block
languagepy
div = tb.div(_id="myid")

produces:

Code Block
languagexml
<div id="myid"></div>

Almost all elements can take the class attribute. The value of a class attribute may exist more than once in a document. A single element may have multiple class values.

Code Block
languagepy
div = tb.div(_class="light")

produces:

Code Block
languagexml
<div class="light"></div>

For multiple classes:

Code Block
languagepy
div = tb.div(_class="light bold")

produces:

Code Block
languagexml
<div class="light bold"></div>

Empty Elements

Some elements (e.g., <br>) do not have children and only an opening tag:

Code Block
languagepy
br = tb.br()

produces:

Code Block
languagexml
<br>
Code Block
languagepy
hr = tb.hr()

produces:

Code Block
languagexml
<hr>

Non-Element Content

Text

Textual content is added to the tree using strings. This is done simply as:

Code Block
tb = Html5TreeBuilder()
doc = tb.html()
doc.add("My name is Bob!")

which produces:

Code Block
<html>My name is Bob!</html>

It is necessary for textual content to be escaped properly tp render correctly in the browser. This is done automatically.

Raw

However, it is sometimes necessary to dump raw, prepared content into the tree that will be rendered as is. This is done using Raw.

Code Block
tb = Html5TreeBuilder()
doc = tb.html()
doc.add(Raw("<data>raw</data>"), "<data>processed</data>")

produces:

Code Block
<html><data>raw</data>&lt;data&gt;processed&lt;/data&gt;</html>

where the raw content is left untouched, but the simple text content is escaped.

Table

Code Block
languagepy
data = [("Mark", 25), ("Lucy", 23), ("Joe", 32), ("Jane", 41)]
table = tb.table()
table.add(tb.tr(tb.th("Name"), tb.th("Age")))
for name, age in data.items():
	table.add(tb.tr(tb.td(name), tb.td(age)))

or:

Code Block
languagepy
data = [("Mark", 25), ("Lucy", 23), ("Joe", 32), ("Jane", 41)]
table = tb.table()
table.add(tb.tr(tb.th("Name"), tb.th("Age")))
table.add([tb.tr[tb.td(name), tb.td(age)) for name, age in data.items()])

produces:

Code Block
languagexml
<table>
	<tr><th>Name</th><th>Age</th></tr>
	<tr><td>Mark</td><td>25</td></tr>
	<tr><td>Lucy</td><td>23</td></tr>
	<tr><td>Joe</td><td>32</td></tr>
	<tr><td>Jane</td><td>41</td></tr>
</table>

Select Menus

Drop Down

Code Block
languagepy
names = ["john", "bill", "louise"]
selectnames = tb.select([tb.option(name, _value=name) for name in names], _name="name")

produces:

Code Block
languagexml
<select name="name">
	<option value="john">john</option>
	<option value="bill">bill</option>
	<option value="louise">louise</option>
</select>

Multiple Selection

Code Block
languagepy
cities = ["Montreal", "Toronto", "Yellowknife"]
selectnames = tb.select(_name="city", _multiple=True)
selectnames.add([tb.option(city, _value=city) for city in cities])

produces:

Code Block
languagexml
<select name="city" multiple>
	<option value="Montreal">Montreal</option>
	<option value="Toronto">Toronto</option>
	<option value="Yellowknife">Yellowknife</option>
</select>

Form

Code Block
languagepy
form = tb.form(_method="get", _action="showuser.html")
form.add(tb.label("First name"), tb.input(_type="text", _size="40", _name="firstname"))
form.add(tb.label("Last name"), tb.input(_type="text", _size="40", _name="lastname"))
form.add(tb.input(_type="submit", _value="Submit"))

produces:

Code Block
languagexml
<form action="showuser.html" method="get">
	<label>First name</label><input name="firstname" size="40" type="text">
	<label>Last name</label><input name="lastname" size="40" type="text">
    <input type="submit" value="Submit">
</form>