At the conclusion of this programming assignment, participants should be able to:
Before starting this programming assignment, participants should be able to:
Content used in this assignment is based upon information in the following sources:
Write a program (md_to_html.py) that converts the contents of a Markdown file to a HTML file. The output of your code will be this webpage: personal_website.html
HTML is the standard markup language used to create web pages. HTML is characterized by tags, which are angle brackets < > used to "label" content. You have probably seen HTML before, maybe something like:
<h1>This is a header</h1>
In the above example, the text "This is a header" is labeled as a first (top) level header.
Markdown is a lightweight markup language that is used by many sites, such as Github and Reddit for plain text formatting. For example, Github uses Markdown to format README files. Like HTML, Markdown is used to build content for websites; however, Markdown is much easier to learn and simpler to read. For example, let's look at the previous HTML header example in Markdown:
# This is a header
The # symbol denotes a header, and the number of # symbols denotes a header level. For this assignment, we are only going to cover a handful of basic Markdown and HTML features. Beyond the scope of this assignment, if you want to learn more about HTML (and CSS and Javascript), I recommend starting with this Codeacademy tutorial. If you want to learn more about Markdown, I recommend starting with this Markdown tutorial.
Write a program that reads the contents of a Markdown file (.md file) as input, and produces an HTML file (.html file) as output. In addition, your program should also include status messages displayed to the console. These messages simply let the user know what the program is currently computing (e.g. "Reading in website information from personal_website.md...", etc.).
Headers are used to label a section. There are 6 different levels of headers:
Each header (except for level 1) represents a sub section of previous, higher level headers.
A phrase in Markdown is specified as a header by beginning with the # symbol. The number of # symbols denotes the level of the header. For example, a level 3 header in Markdown:
### This is a level 3 header
would be displayed in a browser as:
A phrase in HTML is specified as a header by beginning with the <h1>
tag for a header level 1 and ending with the </h1>
tag. The number of after the "h" in the tag denotes the level of the header. For example, a level 3 header in HTML:
<h3>This is a level 3 header</h3>
would be displayed in a browser as:
Preface each item in an unordered list (bulleted list) with a *
. Place each item on its own line. For example:
* Item1
* Item2
* Item3
would be displayed in a browser as:
Begin an unordered list in HTML with the tag <ul>
and end the list with the tag </ul>
. In between these tags, preface each item in an unordered list with the tag <li>
(short for list item) and end the list item with the tag </li>
. For example:
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
would be displayed in a browser as:
To include an image in Markdown, we need to specify a link to the image. For example, to insert an image from https://www.python.org/static/community_logos/python-logo-master-v3-TM.png add an exclamation mark and a set of angle brackets in front of the url in parenthesis:
![](https://www.python.org/static/community_logos/python-logo-master-v3-TM.png)
would be displayed in a browser as:
To include an image in HTML, like Markdown we need to specify a link to the image with the <img>
tag. Using the same example:
<img src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png">
would be displayed in a browser as:
To make our personal website look "semi-fancy", your HTML file should include the following string as the header (top of the file):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="shortcut icon" href="http://www.wsulibs.wsu.edu/sites/all/themes/wsulibtest/favicon.ico" type="image/vnd.microsoft.icon" />
<title>Personal Website</title>
</head>
<body>
<div class="container">
And the following string as the trailer (end of the file):
</div>
</body>
</html>
Simply write the above information to the output file in Python.
You are free to decide which functions to define to solve this problem. Break the problem into tasks and build your solution accordingly. You will be graded on your approach. Ask the instructor or your TA for help with this!
Here is example output to the user (via the console) for the sample input file personal_website.md:
Opening personal_website.md for reading...
Opening personal_website.html for writing...
Writing the HTML header...
Processing a header...
Processing a list...
Processing an image...
Processing a header...
Processing a header...
Processing a list...
Processing a header...
Processing a header...
Processing a list...
Processing a header...
Processing a list...
Processing a header...
Processing a header...
Processing a list...
Processing a header...
Processing a list...
Processing a header...
Processing a header...
Processing a list...
Processing a header...
Processing a list...
Processing a header...
Processing a header...
Processing a list...
Writing the HTML trailer...
Closing both md and html files...
And the associated output file personal_website.html file. You can check your HTML file is formatted correctly by opening the HTML file with a web browser and checking that it looks like personal_website.html.
Replace Butch T. Cougar's information with your own information! Then, follow this WSU VCEA tutorial to host your personal website for free on our WSU EECS servers! If you have any questions about how to do this, please see the IT Help Desk in Sloan 358.
<your last name>_bonuspa.zip
by the due date and time.This assignment is worth 30 points bonus. Your assignment will be evaluated based on a successful compilation and adherence to the program requirements. We will grade according to the following criteria: