Coursework 3

Part B: Make an HTML Playlist

For this part of the assignment you will, as in the previous part, be reading a playlist from a CSV file; but this time you will create an HTML file containing the playlist information, which can be viewed in a web browser, and could potentially be put on the internet (by making the HTML page available via a web server).

You are provided with the following files to help you with this task:

Starting template file for your Python program:
make_html_playlist.py [View] [Download]
A useful example program that creates an HTML file that displays data in the form of a table:
make_html_table_file.py [View] [Download]
CSV files containing playlist data, on which to test your program (same as for Part A, but your program should work for any file in a similar format):
- geek-music.csv [View] [Download]
- snake-music.csv [View] [Download]

You need to modify and extend make_html_playlist.py so that the function make_html_playlist(playlist) creates a HTML file displaying the playlist information in the file refered to by the playlist argument.

As in Part A, your function should work whether or not the given argument includes or leaves off the .csv extension. Specifically, you should check whether the argument ends in .csv; and, if it does not, you should first add .csv to get the full name of the file that should be opened. You also need to output to a file with the extension .html. If filename argument does not end in .csv then simply add .html. But if filename does end in .csv then you should remove that and replace it by .html. So, to be completely clear, the function should work as follows depending on whether the arguemnt ents in .csv or not:

Which files to read from and create
playlist argument file to read from file to create

"some-playlist" some-playlist.csv some-playlist.html

"some-playlist.csv" some-playlist.csv some-playlist.html

Which files to read from and create
playlist argument	file to read from	file to create
"some-playlist"	some-playlist.csv	some-playlist.html
"some-playlist.csv"	some-playlist.csv	some-playlist.html

Your aim is to generate an HTML file that is as attractive and informative as you are able to make it and demonstrates the use of a variety of HTML formatting features

Some features you should consider adding to your HTML playlist webpage:

Different fonts for the different columns.
Colours. These can either be for the text or the background. You could chose different fonts or colours for the different columns.
A background image and/or other embedded image files.
Calculates and displays the total playing time.
Generates search links to other websites, such as YouTube or Wikipedia.

Some example solutions:

A Basic Solution
This displays the essential information of the CSV playlist as an HTML file, but has no frills and looks quite boring and inelegant.
A Good Solution
This is a perfectly good solution, which fulfils all the main requirements of the question.
Super Complex Solution
Well this one is probably a bit too complicated. I did actually cheat a bit with this one, because the track highlighted in red and the direct link to play it in YouTube were hacked on by me after the rest of the page contents were generated. It would be difficult to add a mechanism for selecting and playing particular tracks with plain HTML and the CSV file does not contain actual URL's of music videos. So it would be impossible to implement this within the limitations of this assignment. Implementing dynamic selection of a track would require some futher kind of web technology, such as the use of Javascript.
I'm also using a background image file and another image file for the red play button. Although not provided in the playlist file itself, such images could easily be stored on a web side and links to them added when the playlist web page is generated. If you like you can also do this, in which case you will need to include the required image files along with your submission so that we can see them when we view the web-page generated by your make_html_playlist function.
However, apart from the selected track, the video link and the images, all the other features of this web-page were generated by Python just from the CSV file. In particular the YouTube and Wikipedia search links can be generated just from the track and artist data strings (see below).

Representing and selecting colours in HTML

An HTML color code is a string consisting of a # symbol, followed by six hexadecimal digits, with a hexadecimal digit being one of: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The first two digits represent the amount of red, the next two the amount of green and the last two the amount of blue light that makes up the color. So, for example, #000000 represents black, #FFFFFF is white, #FF0000 is pure bright red, #C00000 is a muted red, #FF8080 is a pastel red and #FF00FF is magenta. You can experiment with different color codes, or you can easily find the code of a colour you like by using this web-based color chooser tool.

Creating URLs that will Query a Web-Based Search Engine

The following code will return a string of HTML that when included in an HTML web page will create a link that when clicked will execute an YouTube query and take you to a YouTube page that displays the results of the query:

     def youtube_query_link( query_string, text_string ):
         wordlist = query_string.split()
         URL = ( "https://www.youtube.com/results?search_query=" + 
                 "+".join(wordlist) )  # Add query terms separated by '+'
         # Make string containing the HTML link element
         return( '<a href="' + URL + '">' + text_string + '</a>' )

The first argument specifies the query that will be sent to YouTube, which can be one word or several words separated by spaces. The second argument is the text of the link that will appear in the browser.

This can be used as follows. Suppose I have this function in my program and execute the function call:

     youtube_query_link( "Python video", "YouTube search: Python video" )

This will generate the following string of HTML:

 '<a href="https://www.youtube.com/results?search_query=Python+video">YouTube search: Python video</a>'

If you then embed this into an HTML file (e.g. by using a Python write command) and view it in a browser, you will get the following link:

YouTube search: Python video

Try clicking it and see what happens.

A similar idea can be used to create a link that will search using another searchable resource, such as Google or Wikipedia. But the exact format used to specify the search will vary according to the particular resource. For example, to create a search link for Wikipedia, you need to create a link with the URL (i.e. the value of href) being of the following form (if there are several search words they should be joined by an underscore symbol):

"https://en.wikipedia.org/?search=word1_word2"