Bonus: making webpages

Tags
Files, Functions

Bonus lessons are optional. If you know HTML or are curious about dynamic webpages, this might interest you.

We had versions of the name tag program that output to the screen, a network printer, or a file. You can also make a webpage from the output. Let's see how.

First, here's a function making the HTML for one name tag.

  • def make_html_name_tag(first_name, last_name):
  •     '''
  •     Make HTML for one name tag.
  •  
  •     Parameters
  •     ----------
  •     first_name : string
  •         Person's first name.
  •     last_name : string
  •         Person's last name.
  •  
  •     Returns
  •     -------
  •     name_tag_markup : string
  •         HTML markup for the tag.
  •  
  •     '''
  •     name_tag_markup = '<p>Hello!</p>\n'
  •     name_tag_markup += '<p>My name is</p>\n'
  •     name_tag_markup += '<p><strong>' + first_name \
  •         + ' ' + last_name + '</strong></p>\n'
  •     name_tag_markup += '<hr>\n'
  •     return name_tag_markup

It puts the HTML into a string variable, and returns it.

Show all

Now, let's call the function once for each name tag we want. We'll accumulate the HTML in a string variable.

  • # Accumulate name tags HTML.
  • tags_html = make_html_name_tag('Wednesday', 'Addams')
  • tags_html += make_html_name_tag('Xavier', 'Thorpe')
  • tags_html += make_html_name_tag('Tyler', 'Galpin')
  • tags_html += make_html_name_tag('Enid', 'Sinclair')
Show all

We need to make a complete webpage with a head, body, the usual stuff. This code makes HTML for the entire page in the variable html. It includes tags_html, the string we made a moment ago with the markup for all the name tags.

  • # Make the page.
  • html = '<html>\n'
  • html += ' <head>\n'
  • html += ' <title>Name tags</title>\n'
  • html += ' </head>\n'
  • html += ' <body>\n'
  • html += ' <h1>Your name tags</h1>'
  • html += tags_html
  • html += ' </body>\n'
  • html += '</html>\n'
Show all

Now, we just need to write the HTML to a file.

  • # Write HTML to a file
  • with open('./name-tags.html', 'w') as name_tags_file:
  •     # Writing data to a file
  •     name_tags_file.write(html)

You can download the code and try it.

Show all
Georgina
Georgina

That's so cool!

Could you make a page from user input?

Sure. Here's a program for one name tag.

  1. # Create a webpage with a name tag.
  2. # Written by Kieran Mathieson, August 30, Year of the Dragon.
  3.  
  4. def make_html_name_tag(first_name, last_name):
  5.     '''
  6.     Make HTML for one name tag.
  7.  
  8.     Parameters
  9.     ----------
  10.     first_name : string
  11.         Person's first name.
  12.     last_name : string
  13.         Person's last name.
  14.  
  15.     Returns
  16.     -------
  17.     name_tag_markup : string
  18.         HTML markup for the tag.
  19.  
  20.     '''
  21.     name_tag_markup = '<p>Hello!</p>\n'
  22.     name_tag_markup += '<p>My name is</p>\n'
  23.     name_tag_markup += '<p><strong>' + first_name \
  24.         + ' ' + last_name + '</strong></p>\n'
  25.     name_tag_markup += '<hr>\n'
  26.     return name_tag_markup
  27.  
  28.  
  29. def compute_file_name(first_name, last_name):
  30.     '''
  31.     Compute a file name for the name tag webpage.
  32.     All lowercase, spaces replaced by dashes.
  33.  
  34.     Parameters
  35.     ----------
  36.     first_name : string
  37.         First name.
  38.     last_name : string
  39.         Last name.
  40.  
  41.     Returns
  42.     -------
  43.     file_name : string
  44.         File name.
  45.  
  46.     '''
  47.     file_name = first_name.replace(' ', '-').strip().lower()
  48.     file_name += '-'
  49.     file_name += last_name.replace(' ', '-').strip().lower()
  50.     file_name += '-name-tag.html'
  51.     return file_name
  52.  
  53. # Input.
  54. first_name = input('First name? ').strip()
  55. last_name = input('Last name? ').strip()
  56.  
  57. # Name tags HTML.
  58. tags_html = make_html_name_tag(first_name, last_name)
  59.  
  60. # Make the page.
  61. html = '<html>\n'
  62. html += ' <head>\n'
  63. html += ' <title>Name tag for ' + first_name + ' ' + last_name + '</title>\n'
  64. html += ' </head>\n'
  65. html += ' <body>\n'
  66. html += ' <h1>Name tag</h1>'
  67. html += tags_html
  68. html += ' </body>\n'
  69. html += '</html>\n'
  70.  
  71. # Write HTML to a file
  72. # Compute a file name
  73. file_name = compute_file_name(first_name, last_name)
  74. with open('./' + file_name, 'w') as name_tags_file:
  75.     # Writing data to a file
  76.     name_tags_file.write(html)
  77. print('File ' + file_name + ' written.')

You can download this one, too.

Adela
Adela

Nice!

The function compute_file_name makes a file name in a normal form, right?

Aye. A standard format that works well on web servers.

Ethan
Ethan

Is this how things like Moodle work? Programs write HTML from data they have?

That's right! The data comes from a database, rather than user input, but that's the idea.

It's also how this site works. The webpage you're reading now doesn't exist, not exactly. The content is in a field in a database table. A program reads the content, and puts it in a template with the menus, book contents, exercise due dates, etc. Because you're logged in, it customizes stuff like the exercise list, to show data applying to you. It also decides which emoticon to use to show your progress.

Moodle and this site don't use Python. They use PHP, a language designed for webapps. But just like Python, PHP has variables (strings, booleans, etc.), if statements, whiles, fors, functions, the whole works.

You can write webapps in Python, too. I've done that in the past, and it works well.

There's sooooo much geeky fun to be had!

Attachments
name tags html.zip
name tags html from input.py_.txt