{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# [CptS 111 Introduction to Algorithmic Problem Solving](https://github.com/gsprint23/cpts111)\n", "[Washington State University](https://wsu.edu)\n", "\n", "[Gina Sprint](http://eecs.wsu.edu/~gsprint/)\n", "## PA7 (30 BONUS pts)\n", "\n", "### Learner Objectives\n", "At the conclusion of this programming assignment, participants should be able to:\n", "* Manipulate strings\n", "* Understand basic Markdown\n", "* Understand basic HTML\n", "\n", "### Prerequisites\n", "Before starting this programming assignment, participants should be able to:\n", "* Implement loops\n", "* Open a file for reading and read information from the file\n", "* Open a file for writing and write information to the file\n", "* Close a file\n", "\n", "### Acknowledgments\n", "Content used in this assignment is based upon information in the following sources:\n", "* [Markdown tutorial](http://www.markdowntutorial.com/)" ] }, { "cell_type": "markdown", "metadata": { "collapsed": true }, "source": [ "### Overview and Requirements\n", "Write a program (md_to_html.py) that converts the contents of a [Markdown](https://en.wikipedia.org/wiki/Markdown) file to a [HTML]() file. The output of your code will be this webpage: [personal_website.html](http://htmlpreview.github.com/?https://github.com/gsprint23/cpts111/blob/master/progassignments/files/personal_website.html)\n", "\n", "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: \n", "\n", "```html\n", "

This is a header

\n", "```\n", "\n", "In the above example, the text \"This is a header\" is labeled as a first (top) level header. \n", "\n", "Markdown is a lightweight markup language that is used by many sites, such as [Github](https://github.com/) and [Reddit](https://www.reddit.com/wiki/commenting) for plain text formatting. For example, [Github](https://github.com/) uses Markdown to format [README](https://help.github.com/articles/about-readmes/) 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:\n", "\n", "`# This is a header`\n", "\n", "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](https://www.codecademy.com/learn/web). If you want to learn more about Markdown, I recommend starting with [this Markdown tutorial](http://www.markdowntutorial.com/).\n", "\n", "#### Program Details\n", "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.).\n", "\n", "#### Markdown/HTML Background Info\n", "##### Headers in Markdown\n", "Headers are used to label a section. There are 6 different levels of headers:\n", "# Header Level 1\n", "## Header Level 2\n", "### Header Level 3\n", "#### Header Level 4\n", "##### Header Level 5\n", "###### Header Level 6\n", "Each header (except for level 1) represents a sub section of previous, higher level headers. \n", "\n", "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: \n", "\n", "```\n", "### This is a level 3 header\n", "```\n", "would be displayed in a browser as:\n", "### This is a level 3 header\n", "\n", "##### Headers in HTML\n", "A phrase in HTML is specified as a header by beginning with the `

` tag for a header level 1 and ending with the `

` tag. The number of after the \"h\" in the tag denotes the level of the header. For example, a level 3 header in HTML: \n", "\n", "```html\n", "

This is a level 3 header

\n", "```\n", "would be displayed in a browser as:\n", "### This is a level 3 header\n", "\n", "\n", "##### Unordered Lists in Markdown\n", "Preface each item in an unordered list (bulleted list) with a `*`. Place each item on its own line. For example:\n", "```\n", "* Item1\n", "* Item2\n", "* Item3\n", "```\n", "would be displayed in a browser as:\n", "* Item1\n", "* Item2\n", "* Item3\n", "\n", "##### Unordered Lists in HTML\n", "Begin an unordered list in HTML with the tag ``. In between these tags, preface each item in an unordered list with the tag `
  • ` (short for list item) and end the list item with the tag `
    • `. For example:\n", "```html\n", "\n", "```\n", "would be displayed in a browser as:\n", "* Item1\n", "* Item2\n", "* Item3\n", "\n", "\n", "##### Images in Markdown\n", "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](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:\n", "\n", "`![](https://www.python.org/static/community_logos/python-logo-master-v3-TM.png)` \n", "would be displayed in a browser as:\n", "![](https://www.python.org/static/community_logos/python-logo-master-v3-TM.png)\n", "\n", "##### Images in HTML\n", "To include an image in HTML, like Markdown we need to specify a link to the image with the `` tag. Using the same example:\n", "\n", "``\n", "would be displayed in a browser as:\n", "\n", "\n", "#### Additional HTML Code to Add\n", "To make our personal website look \"semi-fancy\", your HTML file should include the following string as the *header* (top of the file):\n", "\n", "```html\n", "\n", "\n", "\n", "\n", "\n", "Personal Website\n", "\n", "\n", "
    \n", "```\n", "\n", "And the following string as the *trailer* (end of the file):\n", "```html\n", "
    \n", "\n", "\n", "```\n", "\n", "Simply write the above information to the output file in Python.\n", "\n", "#### Functions to Define\n", "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!" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### Example Output\n", "Here is example output to the user (via the console) for the sample input file [personal_website.md](https://raw.githubusercontent.com/gsprint23/cpts111/master/progassignments/files/personal_website.md):\n", "\n", "```\n", "Opening personal_website.md for reading...\n", "Opening personal_website.html for writing...\n", "Writing the HTML header...\n", "Processing a header...\n", "Processing a list...\n", "Processing an image...\n", "Processing a header...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a list...\n", "Processing a header...\n", "Processing a header...\n", "Processing a list...\n", "Writing the HTML trailer...\n", "Closing both md and html files...\n", "```\n", "\n", "And the associated output file [personal_website.html](https://raw.githubusercontent.com/gsprint23/cpts111/master/progassignments/files/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](http://htmlpreview.github.com/?https://github.com/gsprint23/cpts111/blob/master/progassignments/files/personal_website.html).\n", "\n", "#### Hosting Your Personal Website (Not Required for the PA)\n", "Replace Butch T. Cougar's information with your own information! Then, follow [this WSU VCEA tutorial](https://support.vcea.wsu.edu/kb/a21/how-to-update-your-eecs-website-in-windows.aspx) 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." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Submitting Assignments\n", "1.\tUse the Blackboard tool https://learn.wsu.edu to submit your assignment to your TA. You will submit your code to the corresponding programming assignment under the \"Assignment Turn In\" tab. You must upload your solutions as `_bonuspa.zip` by the due date and time.\n", "2.\tYour .zip file should contain your .py file and your .md and .html files you used to test your program." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Grading Guidelines\n", "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:\n", "* 3 pts for displaying status messages to the console\n", "* 5 points for reading the Markdown text from the input file\n", "* 15 points for writing correct HTML text to the output file\n", "* 5 points for function design\n", "* 2 pts for adherence to proper programming style and comments established for the class" ] } ], "metadata": { "anaconda-cloud": {}, "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.7.1" } }, "nbformat": 4, "nbformat_minor": 1 }