Introduction to HTML

There’s a lot to know about HTML. This quick introduction will help you understand the basics so you can create simple pages in Python. Start by reading the documentation here:

The entire guide is good but the two articles above will get you started. HTML is a way to make the output of a program beautiful. Instead of just plain old text you can use images, make tables, use different fonts and styles and, importantly, make hyperlinks to other pages. In this lesson you’ll learn how to make your Python programs produce HTML that looks cool in the Jupyter notebook.

Writing Python Code That Produces HTML

You can produce ouput from Python code and have the Jupyter notebook render it as HTML. First you have to import the HTML function using Python’s import directive.

[ ]:
from IPython.core.display import HTML

The import directive only has to be run once, after it’s run you can use the HTML function in any cell. When you want to produce HTML from your program you use the display function rather than the print function. Try entering in the example code:

my_html = "<h1>Hello HTML World</h1>"
display(HTML(my_html))
[ ]:

Generating HTML with Python opens up some colorful possibilities. For example:

color = 'green'
text = 'Hello World'
display(HTML(f'<span style="color: {color};"><b>{text}</b></span>'))
[ ]:

Notice the use of an f-string?. Try changing the color and text variables in your code to see what happens. Mixing static and variable HTML is how every useful site works. It’s also a place where the format function shines.

template = """
<span style="color: {};">
    <b>{}</b>
</span>
"""
display(HTML(template.format("orange", "I'm so happy!")))
[ ]:

Using format() this way enables your program to reuse the template to make new words and colors. Try running this code in the cell below and you’ll see that the template can be used over and over:

display(HTML(template.format("blue", "I'm blue")))
[ ]:

Some HTML Example Programs

The Jupyter notebook makes it easy to experiment with HTML because it renders the HTML right in the notebook. Here are some example programs with HTML code taht you can use and reuse:

[ ]:
my_html = """
<h3>My Heading</h3>
<p>My first paragraph.</p>
"""
display(HTML(my_html))

Heading Tags

Heading tags change the size and weight of the letters. Words inside heading tags appear on their own line.

[ ]:
my_html = """
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
"""
display(HTML(my_html))

Text Decoration

You can use tags to make bold, italic and underlined text. Notice that they don’t split lines like heading tags do.

[ ]:
my_html = """
This is <i>italic</i>.
This is <b>bold</b>.
This is <u>underlined</u>.
"""
display(HTML(my_html))

Lists

You can make ordered lists (lists with numbers) and unordered lists (lists with bullets) easily with HTML. These use nested elements.

[ ]:
my_html = """
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
"""
display(HTML(my_html))
[ ]:
my_html = """
<ul>
    <li>Bullet one</li>
    <li>Bullet two</li>
</ul>
"""
display(HTML(my_html))

Tables

Tables let you organize elements into rows and columns. Tables nest just like lists.

[ ]:
my_html = """
<table>
    <tr>
        <th>Class</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>cis-15</td>
        <td>Intro. to programming in Python</td>
    </tr>
    <tr>
        <td>cis-192</td>
        <td>UNIX/Linux Network Administration</td>
    </tr>
    <tr>
        <td>cis-194</td>
        <td>Windows Client Administration</td>
    </tr>
</table>
"""
display(HTML(my_html))

Images

You can display images in HTML using the image tag.

[ ]:
my_html = """
<image src="https://www.python.org/static/img/python-logo.png"/>
"""
display(HTML(my_html))

Paragraphs and Breaks

You have seen how HTML “smashes” text together. You can make sure sentences stay separate using the paragraph <p> tag and the break <br> tag.

[ ]:
my_html = """
<p>Line one</p>
<p>Line two</p>
<p>Line three</p>
"""
display(HTML(my_html))

Paragraphs get extra space. Breaks are just a single “enter”.

[ ]:
my_html = """
Line one<br/>
Line two<br/>
Line three<br/>
"""
display(HTML(my_html))